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.
