En fin, basta de palabras y manos a la obra!

Herramientas de desarrollo

Linux

HTML / PHP / CSS / JAVASCRIPT

Por lo general las herramientas que pueden editar HTML también pueden hacerlo con PHP, CSS y Javascript. Por tanto la elección que mejor reúne estas características es el Proyecto Nave NVU, que ya tiene su sucesor llamado Kompozer.
En estricto rigor estos proyectos no son exclusivos de linux, son de licencia MPL 1.1, GPL 2.0, LGPL 2.1 y tiene soporte multiplataforma. Además, tienen la capacidad de estar evolucionando ya que son los mismos usuarios encuentran bugs y los solucionan.
Su interfaz es bien parecida a la de Dreamweaver pero no tiene el suficiente soporte como el grande de Adobe.

Kompozer

NVU

Links de descargas [ NVU / Kompozer (aún no disponible) ]

GRAFICAS / VECTORES / EDITORES

En linux recien ahora se está integrando el tema de gráficas en formato web. Por lo general los sitios diseñados se realizan en base a vectores (SVG) y es en ésta área donde encontramos tres programas que nos ayudarán con el tema de los vectores y la edición.
El primero y muy conocido GIMP, que por lo general viene instalado en algunas distribuciones de linux. Tiene la capacidad para editar fotos y es muy similar a Photoshop.

El segundo, de los creadores de Xara 3D, se llama Xara Xtreme y que para linux está en versión Open Source. Esta aplicación es capaz de trabajar en formato vectores, es fácil de aprender y tiene un interfaz muy limpia.

El tercero es uno que aun está en desarrollo, me refiero a Inkscape. Este producto llega en formato totalmente Open Source y tiene capacidaes similares al Adobe Ilustrator, Adobe Freehand, Corel Draw y al mismísimo Xara Xtreme.

Link de descargas [ GIMP / Xara Xtreme / Inkscape ]

Windows

HTML / PHP / CSS / JAVASCRIPT

Para este caso les voy a recomendar a la única e inconfundible aplicación de Adobe que se acopla perfectamente a cualquier tipo de desarrollador, me refiero a Adobe Dreamweaver.
Esta gran utilidad partió siendo propiedad de la absorbida Macromedia, actualmente está en la versión CS3 y se ha impuesto como el mejor editor en lo que a sitios web se refiere.
Tiene la capacidad de dominar distintos tipos de lenguajes, administrar sitios, FTP, bases da datos, entre otros. Además viene con una gran biblioteca de códigos y scripts. Actualmente es posible descargar la versión prueba en el sitio de Adobe.

Link de descarga [ Adobe Dreamweaver ]

GRAFICAS / VECTORES / EDITORES

El primero en presentar es también de la familia de Macromedia, ahora de Adobe, llamado Fireworks. Este editor gráfico cumple la función principal de ser lo más indicado al momento de hacer sitios web. Tiene características adicionales como animador gif, trabajo de capas, exportación a html en codigo limpio, etc.
Lejos la mejor utilidad para crear sitios y estructurarlos, concepto que enseñare el próximo capitulo, es Adobe Fireworks.

Y como no olvidar al tan conocido Adobe Flash!

Esta herramienta ha sido una de las más revolucionarias en el concepto multimedia. Animaciones de alta calidad por poco costo (entiéndase «costo» como peso por archivo generado).
Flash no tiene mayor presentación pues es único en su tipo e inigualable. Tiene capacidades de sacar provecho de todas las herramientas acá descritas y vincularlas 100% al web.

Links de descarga [ Fireworks / Flash ]

Toda estas utilidades son a gusto de quien las ocupa y solo las nombro porque a lo largo de mi carrera como diseñador y programador web, por decirlo de alguna manera, han sido las que mejor resultado me han dado.

Espero que este capítulo les haya sido útil.

En la próxima entrega: “Concepto del porque y como diseñar un portal o sito web”

Saludos!

En nuestro portal vamos utilizar los siguientes lenguajes HTML, CSS, PHP, Javascript, AJAX y XML que serán apoyados por herramientas básicas como Apache, Flash, Fireworks, entre otros.

Lo primero que vamos a realizar es armar nuestro Laboratorio de pruebas el cual constara de tres herramientas básicas Apache 2.0, PHP5 y MySQL 5.

• El primero, Apache, será el encargado de controlar el protocolo HTTP, es decir, el que va a mostrar nuestro portal al mundo.
• El segundo, PHP, será el encargado de darle el toque dinámico a nuestro portal, este tiene la capacidad de hablar distintos lenguajes.
• Finalmente, MySQL, será quien guarde la información que necesitemos almacenar y mostrar a través de nuestro portal

Como sabemos que no todo el mundo ocupa Linux vamos a mostrar las dos caras de la moneda, es decir, Windows y Linux, no tomamos en cuenta Mac porque lamentablemente no tenemos gente relacionada con ese campo (por el momento).

Si trabajas en Linux

Para linux, lo mejor es instalar el ultra conocido formato LAMP (Linux Apache Mysql PHP/Perl) hoy llamado XAMPP. En nuestro caso haremos el ejemplo instalando XAMPP en la distribución de linux más amistosa y conocida llamada Ubuntu.

Vamos a consola y descargamos en el home lo siguiente

wget http://www.apachefriends.org/download.php?xampp-linux-1.6.5a.tar.gz

Luego lo descomprimes a la carpeta /opt de la siguiente forma:

sudo tar xvfz xampp-linux-1.6.5a.tar.gz -C /opt


Ahora, tenemos listo nuestro XAMPP en /opt/lampp para echarlo a andar

Para echarlo a andar debemos escribir esto en consola:

sudo /opt/lampp/lampp start

Y debería aparecer lo siguiente

Starting XAMPP 1.6.5a...
LAMPP: Starting Apache...
LAMPP: Starting MySQL...
LAMPP started.


Listo! Tenemos XAMPP andando en http://localhost/

Más información en http://www.apachefriends.org/en/xampp-linux.html#374

Si trabajas en Windows

Según mi experiencia la mejor solución para instalar un servidor de este tipo es el ultra conocido proyecto AppServ.

Para este software tenemos siempre dos versiones, donde es posible optar por la ultima versión de PHP4 o la ultima de PHP5. Actualmente PHP5 no tiene muchas complicaciones y viene con muchas más funciones, por tanto para nuestro caso vamos a utilizar la versión que tiene PHP5.

1º Descargar el instalador y al comenzar a instalar aparecerá lo típico, el comienzo del Wizard de instalación donde te informa que versión va instalar y lo que incluye la licencia de uso (presionar Next, y luego bajar la barra de scroll y presionar I Agree).

2º Elegir la carpeta de destino, les recomiendo usar otra unidad ya que por seguridad al momento de formatear evitaremos perder las bases de datos y las paginas.

3º El paquete de Appserv incluye Apache HTTP Server, MySQL Database, PHP Hypertext Procesor y adicionalmente phpMyAdmin que es una utilidad para administración de las bases de datos realizadas en MySQL.

4º La configuración básica de Apache consta de determinar el nombre del servidor, el correo del administrador del servidor y el puerto donde se podrá ingresar a los sitios web. Por defecto los exploradores abren las páginas en el puerto 80, por tanto dejen ese puerto como tal.

5º La configuración de MySQL se realiza indicando la password de administración del servidor más algunas adicionales. El set de caracteres por defecto en la instalación es UTF-8, uds. dirán como vamos a utilizar UTF-8 si estamos bajo Windows, pero la verdad es que es la mejor opción ya que al subir los sitios a los servidores de producción, estos trabajan por defecto en Linux y es ahí donde se producen los problemas de caracteres al cargar la base de datos. Por tanto, si nuestra misión es llegar a subir el portal en un servidor real, les recomiendo usar este por defecto.

6º La instalación.

7º La partida de los servicios.

Finalmente basta con abrir nuestro servidor en http://localhost/ que es la dirección por defecto encontrada en http://127.0.0.1/ en el puerto 80.

En la siguiente entrega de esta guía veremos las herramientas necesarias para comenzar a programar en PHP, HTML Y CSS.

Saludos!