Herramientas de Desarrollo Web

TECNOLOGÍAS EMERGENTES
 

Son definidas como innovaciones científicas que pueden crear una nueva industria o transformar una existente. Cada una de estas tecnologías ofrece un amplio campo de oportunidades lo que proporciona la motivación para hacer inversiones de  riesgo, el problema que plantean estas nuevas tecnologías a las empresas o directivos de las mismas es que puede dar o no resultado. Las tecnologías emergentes surgen a que debido las herramientas de gestión tradicional no son capaces de resolver con éxito los nuevos desafíos.

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello que debemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes. Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos también están disponibles en Windows.

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque Windows no fue diseñado para los desarrolladores, sino para personas que no tienen muchos conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida mucho más fácil, la ventaja de esto es que son libres.

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo web.

• Diseño: El diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.
• Maquetación HTML/CSS: La maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no.
• Programación cliente: La programación cliente consiste básicamente en Javascript. Una web puede no tener necesidad de hacer programación cliente, como puede ser una pequeña web corporativa con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.
• Programación servidor: En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.
• Depuración: Esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.
• Pruebas en local: En nuestro servidor local haremos todas las pruebas posibles.
• Subir ficheros al hosting: Una vez nuestra web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversión. Yo aconsejo usar Subversión si así lo permite el servidor, por su comodidad y rapidez, además de por su principal utilidad, que es la de control de versiones.
• Pruebas en hosting: Realizaremos las últimas pruebas en el servidor del hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuración que el servidor del hosting.

Herramientas de desarrollo web más utilizadas

Las fases de un desarrollo web, así como los lenguajes de programación usados, son muy extensos y variados, y por ello se necesitan herramientas específicas para cada una de ellas.

En el desarrollo web existen herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello se debe elegir la más adecuada según las necesidades y capacidades.

 

Frameworks de desarrollo

Un Framework es un concepto sumamente genérico, se refiere a “ambiente de trabajo”, por ejemplo .NET es considerado un framework para desarrollar aplicaciones sobre Windows. En general los frameworks son soluciones completas que contemplan herramientas de apoyo a la construcción (ambiente de trabajo o desarrollo) y motores de ejecución (ambiente de ejecución). Framework se refiere a una estructura de software de componentes personalizables e intercambiables para el desarrollo de una aplicación.

Es una aplicación genérica incompleta y configurable a  la que se pueden añadir las últimas piezas para construir una aplicación concreta.

Objetivos de un Framework

·          Desarrollo rápido.

·          Desarrollo estructurado.

·          Reutilización de código.

·          Disminución del esfuerzo en el desarrollo.

·          Aprovechar las funcionalidades ya implementadas.

·         Concentrarse directamente en la solución del problema.

Algunos ejemplos de Framework son:

§  Para Java:

·         Struts

·         Java Server Faces.

·         Spring.

§  Para HTML y CSS:

·         HTML5 Boilerplate.

·         Blueprint.

·         960 Grid System.

·         Bluetrip.

·         YAML.

·         Inuit.

 

Tecnología AJAX

El término AJAX es un acrónimo de Asynchronous JavaScript + XML, que se puede traducir como "JavaScript asíncrono + XML".

“Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.”

Las tecnologías que forman AJAX son:

·         XHTML   y CSS, para crear una presentación basada en estándares.

·         DOM,  para la interacción y manipulación dinámica de la presentación.

·         XML,  XSLT y JSON, para el intercambio y la manipulación de información.

·         XMLHttpRequest,  para el intercambio asíncrono de información.

·         JavaScript,  para unir todas las demás tecnologías.

Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores. En las aplicaciones web tradicionales, las acciones del usuario en la página desencadenan llamadas al servidor. Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.

 

 

 En la figura se puede visualizar una comparación gráfica del modelo tradicional de aplicación web y del nuevo modelo propuesto por AJAX.

Esta técnica tradicional para crear aplicaciones web funciona correctamente, pero no crea una buena sensación al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con los cambios solicitados. Si la aplicación debe realizar peticiones continuas, su uso se convierte en algo molesto.

AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano. Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía esperando la respuesta del servidor.

Utilización de librerías

Los las librerías y los Framework específicos para el desarrollo de aplicaciones con JavaScript han surgido por dos razones:

En primer lugar, porque las aplicaciones comerciales deben funcionar correctamente e igual de bien en al menos cinco navegadores diferentes: Internet Explorer 6 y 7, Firefox, Opera y Safari.

En segundo lugar, el tiempo disponible para el desarrollo de cada nueva característica se reduce cada vez más por la necesidad continua de incluir novedades en las aplicaciones antes de que las incluya la competencia.

Algunas librerías son:

·         PROTOTYPE. Facilita el desarrollo de aplicaciones web con JavaScript y AJAX. Su autor original es Sam Stephenson, las últimas versiones incorporan código e ideas de muchos otros programadores. Es la base de muchos otros Frameworks y librerías.

·         SCRIPTACULOUS. Es una de las muchas librerías que han surgido para facilitar el desarrollo de aplicaciones. Su autor es Thomas Fuchs.

 La librería está dividida en varios módulos:

§  Efectos: Permite añadir efectos especiales a cualquier elemento de la página.

§  Controles: Define varios controles que se pueden añadir directamente a cualquier aplicación web. Los tres controles que forman este módulo son: arrastrar y soltar, autocompletar y editor de contenidos.

§  Utilidades: La utilidad principal que incluye se llama builder, que se utiliza para crear fácilmente nodos y fragmentos complejos de DOM.

·         JQUERY. Su autor original es John Resig, recibe contribuciones de decenas de programadores. Su diseño interno tiene diferencias drásticas respecto a Prototype.

Herramientas: desarrollo en PHP

Las herramientas básicas para el desarrollo de una web en PHP, en sus diferentes fases de diseño e implementación.

Fases: diseño y maquetación

• Adobe Photoshop: Esta aplicación sólo está disponible en Windows, y es el más caro, aunque es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que poder contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes que usemos en la maquetación.
• GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual que en Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML. También disponible en Windows

Fase: maquetación

• Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla, incluso para aquellos que no tengan demasiados conocimientos en edición gráfica digital.
• Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita como es Inkscape.

Fases: maquetación, programación cliente

• Dreamweaver, Aptana, Amaya: Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptada la opción más profesional para la programación cliente (Javascript).

 

Fase: programación servidor

• Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es. Además es posible descargarlo desde la web de Zend para probarlo durante 30 días. Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP. Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox), además de otras funciones más complejas, como alertas configurables para que nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de ejecución, por ejemplo.

Fase: prueba local

• Apache Instalar un servidor web Apache en la máquina donde desarrollamos es fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP, vamos al navegador, actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

• Firefox / Firebug / Web Developer Extensión: Firefox es sin duda la mejor herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox sus dos extensiones más útiles para nuestra profesión: Firebug y Web Developer.

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes, javascripts, hojas de estilo, así como sus tamaños, etc. Y Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez concluido todas las fases y nuestro proyecto esté listo, deberemos subirlo al servidor del hosting.

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar el FTP y copiar y pegar los directorios que queramos subir.