Artículos de Diseño Gráfico y Diseño y Desarrollo Web - Ajax
Diseño Web y Desarrollo Web, informatica, programacion, paginas web
Desde hace unos meses viene rondando por el mundo del desarrollo web la palabra Ajax, sin que los programadores sepan distinguir muy bien si se trata de equipo de fútbol o una nueva tecnología de desarrollo. En realidad se trata de un conjunto de tecnologías y estándares, ya utilizados por muchos programadores en los últimos años, que se conjuntan por un objetivo común que revolucionará el mundo de Internet en un futuro muy próximo. Ajax es el nombre escogido para acortar algo que se antoja demasiado compliado: Asynchronous JavaScript + XML . Sí, ya sé que muchos son reacios a poner nombres a tecnologías, o grupos de ellas, ya existentes y preferirían llamarlo de esa manera, pero yo me quedo con Ajax, más sencillo y suficientemente aclaratorio.
Su funcionamiento se basa en el uso de JavaScript para implementar un motor que se comunica con el servidor mediante peticiones HTTP realizadas en XML usando algo que se llama XMLHttpRequest. Todo esto hace que la aplicación intercambie datos al servidor de manera asíncrona respecto del usuario, que jamás verá interrumpida su interacción con la misma (ya no más esperas con pantallas en blanco o puntero de reloj mientras el servidor procesa los datos). En resumen, se trata de conjuntar muchas tecnologías y estándares ya existentes e independientes entre sí (XHTML, CSS, DOC, XML, XSLT, XMLHttpRequest y Javascript) para conseguir un objetivo en común.
Todo este boom se produjo a raíz del uso que Google hizo de estas herramients para el desarrollo de sus últimos proyectos (como GMail, Google Suggest o Google Maps). Para explicar mejor lo que es Ajax, he decidido traducir un estupendo artículo publicado en febrero por uno de los gurús en este campo: Jesse James Garrett, de Adaptive Path.
Si hay algo del actua diseño interactivo que puede llamarse “glamorosoâ€, es la creación de aplicaciones Web. Desués de todo, ¿cuando fue la última vez que escuchaste a alguien hablar de un diseño interactivo que no estuviera orientado a la Web? (Vale, sin contar al iPod). Todos los nuevos proyectos más interesantes e innovadores son aplicaciones online.
A pesar de todo, los desarrolladores Web no pueden evitar sentirse algo envidiosos de sus colegas del software de escritorio. Las aplicaciones de escritorio tienen una riqueza y una respuesta que siempre ha parecido imposible de alcanzar en la Web. La misma simplicidad que permitió a la web un desarrollo tan rápido crea un agujero difícil de esquivar entre lo que se puede ofrecer y la experiencia conseguida en las aplicaciones de escritorio.
Pero este agujero se está cerrando. Echa un vistazo a Google Suggest . Mira cómo se muestran los términos sugeridos mientras tecleas, casi instantáneamente. Ahora mira Google Maps . Haz zoom. Utiliza el cursor para arrastrar el mapa y juega un rato con él. De nuevo, todo ocurre casi instantáneamente, sin esperar la recarga de página alguna.
Google Suggest y Google Maps son dos ejemplos de un nuevo acercamiento a las aplicaciones web que aquí en Adaptive Path llamamos Ajax. El nombre es un acrónimo de Asynchronous JavaScript + XML, y representa un cambio de rumbo fundamental en las posibilidades de la Web.
Ajax no es una tecnología. Es en realidad un conjunto de ellas, cada una de ellas independiente, agrupándose en nuevas y poderosas formas. Ajax incorpora:
El modelo tradicional de aplicaciones Web funciona de la siguiente manera: muchas de las acciones del usuario envían una petición HTTP al servidor, el cual realiza algunos procesos (extrae los datos, realiza algunos cálculos, “habla†con los distintos sistemas…) y devuelve una página HTML al cliente. Es un modelo adaptado a partir del uso original de la Web como medio de hipertexto, pero, como saben todos los defensores de The Elements Of User Experience (Los Elementos de la Experiencia del Usuario), lo que hace a la Web buena para el hipertexto, no necesariamente la convierte en buena para las aplicaciones software.
Figura 1: El modelo tradicional de aplicaciones Web (izquierda) frente al modelo Ajax (derecha).
Este acercamiento tiene sentido en el sentido técnico, pero no lo tiene para una óptima experiencia del usuario. Mientras el servidor procesa los datos, ¿qué hace el usuario? Eso es, esperar. Y en cada paso de cada tarea, espera un poco más.
Lógicamente, si hubiéramos diseñado la Web desde el principio orientada a aplicaciones, no habríamos querido hacer esperar a los usuarios. Una vez la interfaz es mostrada, ¿por qué razón tendría el usuario que interrumpir la interacción con el programa cada vez que éste necesita algo del servidor? De hecho, ¿por qué tendría el usuario que ver simplemente cómo la aplicación acude al servidor?
Una aplicación Ajax elimina esas paradas en la ejecución introduciendo un intermediario (el motor Ajax) entre el usuario y el servidor. Parecería que añadir una capa a la aplicación le conferiría una peor respuesta, pero en realidad es al contrario.
En lugar de cargar una página web, al iniciar la sesión, lo que hace el navegador es cargar el motor Ajax (escrito en JavaScript y normalmente escondido en un marco oculto). Este motor es responsable tanto de mostrar la interfaz de usuario como de comunicarse con el servidor en nombre del usuario. El motor Ajax permite al usuario interactuar con la aplicación de manera asíncrona (independiente de la comunicación con el servidor). De esta manera el usuario no tiene que quedarse mirando a una página en blanco o un icono de reloj de arena, esperando a que el servidor haga algo.
Figura 2: El patrón de comunicación síncrona de una aplicación Web tradicional (arriba) comparado con el patrón asíncrono de una aplicación Ajax (abajo).
Toda acción del usuario que normalmente generaría una petición HTTP, adquiere la forma de una llamada JavaSript al motor Ajax. Cualquier acción del usuario que no requiera un viaje al servidor (tales como validación de datos, edición de datos en memoria e incluso la propia navegación) es procesada por él mismo. Si el motor necesita algún tipo de proceso en el servidor para generar la respuesta (enviar datos para procesamiento, carga de código de interfaz adicional o petición de datos nuevos) realiza las peticiones de manera asíncrona, normalmente usando XML, sin detener la interacción del usuario con la aplicación.
Google está realizando una profunda investigación en el desarrollo de aplicaciones Ajax. Todos los productos que está compañía ha sacado a la luz a lo largo de este último año ( Orkut , GMail , la última versión beta de Google Groups , Google Suggest y Google Maps ) son aplicaciones Ajax (para más información técnica acerca de estas aplicaciones, echa un vistazo a estos excelentes análisis de Gmail , Google Suggest y Google Maps ). Muchos otros están siguiendo este camino: muchas de las funcionalidades que la gente adora en Flickr dependen de Ajax, y el motor de busqueda A9.com de Amazon aplica técnicas similares.
Todos estos proyectos demuestran que Ajax no es solamente una teoría eficaz, sino que también es muy práctico para aplicaciones en el mundo real. No es otra de esas tecnologías que funcionan sólo en el laboratorio. Y las aplicaciones Ajax pueden ser de los más variados tamaños, desde el simple y monofuncional Google Suggest hasta el complejo y sofisticado Google Maps.
En Adaptive Path, hemos estado haciendo nuestros propios progresos con Ajax en los últimos meses, y nos hemos dado cuenta de que sólo hemos rascado en la superficie de la riqueza interactiva y respuesta que estas aplicaciones nos pueden aportar. Ajax supone un importante desarrollo en las aplicaciones Web, y su importancia no hace más que crecer. Y, dado que hay tantos desarrolladores ahí fuera que conocen el uso de estas tecnologías, esperamos ver muchas más organizaciones seguir los pasos de Google y sacar provecho a las ventajas que Ajax ofrece.
Los mayores retor en la creación de aplicaciones Ajax no son técnicos. El núcleo de las tecnologías Ajax es suficientemente maduro, estable y comprensible. El verdadero reto es para los desarrolladores: que olviden lo que piensan y saben acerca de las limitaciones de la Web, y comiencen a imaginar un rango más amplio y rico de posibilidades.
Será divertido.