Ajax
Ajax
Ajax

Ajax: Un nuevo acercamiento a las aplicaciones web

AJAX parece ser la palabra de moda en el mundo del desarrollo de aplicaciones Web, AJAX no es una tecnología, sino la unión de varias tecnologías que juntas pueden lograr cosas realmente impresionantes.

Hace un tiempo AJAX parece ser la palabra de moda en el “mundo” del desarrollo de aplicaciones Web; de hecho muchos lo escuchan nombrar pero pocos saben que es realmente y, menos aún, saben en donde buscar información clara sobre que es esta nueva “maravilla” de la tecnología que Jesse James Garret publicó en un artículo en Inglés excelente que vale la pena traducir por completo.

¿Por qué es tan interesante AJAX? Porque en realidad AJAX no es una tecnología, sino la unión de varias tecnologías que juntas pueden lograr cosas realmente impresionantes como GoogleMaps, Gmail el Outlook Web Access ( ref ) o algunas otras aplicaciones muy conocidas.

AJAX, en resúmen, es el acrónimo para Asynchronous JavaScript + XML y el concepto es: Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en background, los datos que son usados para actualizar la página solo re-renderizando la página y mostrando u ocultando porciones de la misma.

La traducción completa a continuación:

Ajax: Un Nuevo acercamiento a las Aplicaciones Web

Si algo del actual diseño de interacción puede ser llamado glamoroso, es crear Aplicaciones Web. Después de todo, ¿cuando fue la ultima vez que escuchaste a alguien hablar de diseño de interacción de un producto que no esté en la Web? (Okay, dejando de lado el iPod). Todos los nuevos proyectos cool e innovadores están online.

Dejando de lado esto, los diseñadores de interacción Web no pueden evitar sentirse envidiosos de nuestros colegas que crean software de escritorio. Las aplicaciones de escritorio tienen una riqueza y respuesta que parecía fuera del alcance en Internet. La misma simplicidad que ha permitido la rápida proliferación de la Web también crea una brecha entre las experiencias que podemos proveer y las experiencias que los usuarios pueden lograr de las aplicaciones de escritorio.

Esa brecha se está cerrando. Échenle una mirada a las Google Suggest. Mira la forma en que los términos sugeridos se van actualizando a medida que uno tipea casi instantáneamente. Ahora mire Google Maps. Hace zoom. Usen el cursor para agarrar el mapa y navegarlo un poco. Otra vez, todo sucede casi instantáneamente, sin esperar que las paginas se recarguen.

Google Suggest y Google Maps son dos ejemplos de un nuevo acercamiento a las aplicaciones Web, que nosotros en Adaptative Path hemos denominado AJAX. El nombre es una abreviación o acrónimo para Asynchronous JavaScript + XML, y ello representa un cambio fundamental en que es posible en la Web.

Definiendo Ajax

Ajax no es una tecnología. Es realmente muchas tecnologías, cada una floreciendo por su propio mérito, uniéndose en poderosas nuevas formas. AJAX incorpora:

El modelo clásico de aplicaciones Web funciona de esta forma: La mayoría de las acciones del usuario en la interfaz disparan un requerimiento HTTP al servidor web. El servidor efectúa un proceso (recopila información, procesa números, hablando con varios sistemas propietarios), y le devuelve una pagina HTLM al cliente.

Este es un modelo adaptado del uso original de la Web como un medio hipertextual, pero como fans de “The Elements of User Experience” sabemos, lo que hace a la Web buena para el hipertexto, no la hace necesariamente buena para las aplicaciones de software.

Ajax

Figura 1: El modelo tradicional para las aplicaciones Web (izq.) comparado con el modelo de AJAX (der.).

Este acercamiento tiene mucho sentido a nivel técnico, pero no lo tiene para una gran experiencia de usuario. Mientras el servidor esta haciendo lo suyo, que esta haciendo el usuario? Exacto, esperando. Y, en cada paso de la tarea, el usuario espera por mas.

Obviamente, si estuviéramos diseñando la Web desde cero para aplicaciones, no querríamos hacer esperar a los usuarios. Una vez que la interfaz esta cargada, porque la interacción del usuario debería detenerse cada vez que la aplicación necesita algo del servidor? De hecho, porque debería el usuario ver la aplicación yendo al servidor?

Cómo es diferente AJAX

Una aplicación AJAX elimina la naturaleza “arrancar-frenar- arrancar-frenar” de la interacción en la Web introduciendo un intermediario -un motor AJAX- entre el usuario y el servidor. Parecería que sumar una capa a la aplicación la haría menos reactiva, pero la verdad es lo contrario.

En vez de cargar un pagina Web, al inicio de la sesión, el navegador carga al motor AJAX (escrito en JavaScript y usualmente “sacado” en un frame oculto). Este motor es el responsable por renderizar la interfaz que el usuario ve y por comunicarse con el servidor en nombre del usuario.

El motor AJAX permite que la interacción del usuario con la aplicación suceda asincrónicamente (independientemente de la comunicación con el servidor). Así el usuario nunca estará mirando una ventana en blanco del navegador y un icono de reloj de arena esperando a que el servidor haga algo.

Figura 2: El patrón de interacción sincrónica de una aplicación Web tradicional (arriba) comparada con el patrón asincrónico de una aplicación AJAX (abajo).

Cada acción de un usuario que normalmente generaría un requerimiento HTTP toma la forma de un llamado JavaScript al motor AJAX en vez de ese requerimiento. Cualquier respuesta a una acción del usuario que no requiera una viaje de vuelta al servidor (como una simple validación de datos, edición de datos en memoria, incluso algo de navegación) es manejado por su cuenta.

Si el motor necesita algo del servidor para responder (sea enviando datos para procesar, cargar código adicional, o recuperando nuevos datos) hace esos pedidos asincrónicamente, usualmente usando XML, sin frenar la interacción del usuario con la aplicación.

¿Quién está usando Ajax?

Google está haciendo una significativa inversión en el acercamiento Ajax. Todos los grandes productos que Google ha introducido en el ultimo año (Orkut, Gmail, la última versión de Google Groups, Google Suggest, y Google Maps ) son aplicaciones Ajax. (Para datos más técnicos de estas implementaciones Ajax, lean estos excelentes análisis de Gmail, Google Suggest, y Google Maps.) Otros están siguiendo la tendencia: muchas de las funciones que la gente ama en Flickr dependen de Ajax, y el motor de búsqueda de Amazon A9.com aplica tecnologías similares.

Estos proyectos demuestran que Ajax no es solo técnicamente importante, sino también prácticos para aplicaciones en el mundo real. Esta no es otra tecnología que solo trabaja en un laboratorio. Y las aplicaciones Ajax pueden ser de cualquier tamaño, de lo más simple, funciones simples como Google Suggest a las muy complejas y sofisticadas como Google Maps.

En Adaptive Path, estuvimos haciendo nuestro propio trabajo con Ajax en los últimos meses, y estamos descubriendo que solo raspamos la superficie de la rica interacción y respuesta que que las aplicaciones Ajax puede proveer. Ajax es un desarrollo importante para las aplicaciones Web, y su importancia solo va a crecer. Y como hay tantos desarrolladores que ya conocen como usar estas tecnologías, esperamos ver mas empresas y organizaciones siguiendo el liderazgo de Google en explotar la ventaja competitiva que Ajax provee.

Mirando adelante

Los mayores desafíos al crear aplicaciones Ajax no son técnicas. Las tecnologías centrales son maduras, estables y bien conocidas. En cambio, los desafíos son para los diseñadores de estas aplicaciones: olvidar lo que creemos saber sobre las limitaciones de la Web, y comenzar a imaginar un rango más amplio y rico de posibilidades.
Va a ser divertido.

Nota: Artículo original escrito por Jesse James Garrett, uno de los fundadores de Adaptive Path y traducido por Mariano Amartino (Denken Uber).

Jesse James GarrettJesse James Garrett para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: Twitter @maestros | Facebook Fan page

191 comentarios

Comentarios

Páginas: « 1 [2]

  1. jmmcba

    AJAX es una tonteria … algo mas en donde una compania ha puesto una sigla para verder un producto…

    Existen “Miles” de páginas y portales que usan los famosos “Tuneles Ocultos” o iframes para actualizar asincronicamente pedacitos de HTML dentro de la pagina principal.

    Nosotros hace mas de 10 años que tenemos un Core en Javascript para interactuar a travez de frames ocultos.

    Señores ! un poco mas de respeto a todos los desarrolladores independientes que experimentaron y usaron tecnologias similares hace mucho tiempo ya ….

    Saludos a todos y disculpen mi enojo.

  2. jps

    Soy Ing d Sistemas y a decir verdad me ha ayudado mucho en la presentacion de proyectos web. es una maravilla. atte

  3. He estado leyendo los comentarios y me parece, que de lo que no se da cuenta la gente, es que la tecnologia que se use es lo de menos. Son los resultados los que cuentan y abra veces que funcionen una u otras.
    El atarse a una tecnologia en particular no es buena idea, por que ademas,, hoy en dia el desarrollo de aplicaciones web son tan rapidas, que no da tiempo a meditar sobre ellas.
    Precisamente por eso el concepto Ajax es tan expectacular, por que no se basa en una sola tecnologia, sino que a traves de todas ellas forma la aplicacion, por lo que da lo mismo que sea JavaScripts o XML o ruby, PHP, Asp, o Flash, FLEX o FLUX, sino lo que se necesite en ese preciso momento, ya que donde hay que dirijir los esfuerzos, es en obtener resultados, en el menor tiempo posible y precios competitivos, que el tiempo de desarrollo es lo mas caro. Y si se precisan herramientas o librerias que reduzcan el tiempo de desarrollo, son lo que abra que utilizar, si se quiere ser profesional. Y sino que mas da.

  4. Elias

    muy bueno

  5. me gusta ajax es muy bueno.. en serio…

  6. Mc A.J.

    Es algo complicado, en la red me topé con un programita para insertar ajax a mis paginas se llama myajax, aunque lo he visto muy básico, es bastante fácil de usar y funciona muy bien, lo encontre en ricksystems.com

  7. JUAN

    Soy desarrollador JAVA, VNET, JSP, SERVLET, y me parece muy interesante la aplicación de AJAX

  8. felo

    ajax es un equipo de futbol..no hablen guevadas…

  9. Yo ando peleandome con flex, pero soy programador php, creo que Ajax lo complementará bien a ambos.

    Un saludo! :D

  10. fernando jimenez

    Me gusto y me gustaria aprender ajax, donde puedo conseguir el programa, o que tengo que hacer para aprender, me pueden mandar información? gracias.

  11. Hola me parece bn..

  12. Luis Rubén

    Recuerdo cuando apenas eran 2GB, cómo han cambiado las cosas al día de hoy, ya son casi 8Gb y contando! Un gusto saber que contamos con estos avances hoy día…

  13. quitua

    realizarón – si así es la ortografía imagínense la traducción.

  14. Oye amigo, eres un crak entendi la teoria en este foro, pero con tu explicacion entendi la practica realmente muy simple voy a involucrarme mas en estilizar mis pantallas WEB con AJAX..

    Bien por tu valioso aporte.

    Sldos

Los comentarios de este post están cerrados. Si quieres seguir la discusión, debatir, criticar, sugerir o expandir el tema te invitamos a hacerlo en tu propio blog, en twitter o donde puedas publicar. No olvides enlazar a este post para que sigamos la conversación y se genere un trackback.

Trackbacks

  1. blog.solusan.com
  2. GUATEDEAWEB » Yahoo! Sin límites
  3. David Garca, noticias de Internet » Da del Programador Google
  4. CONCEPTO PANAL » Blog Archive » :: PANAL 2.0 :: comunicación inteligente ::
  5. La Web 2.0 « La Pipa de la Discordia
  6. ..::wWw.TigreBlanco.Net::..
  7. La Web 2.0 con ejemplos « AVANCES INFORMÁTICOS
  8. Recursos sobre AJAX « Un dia duro
  9. Web 2.0 | marianogaraffa.com.ar
  10. Recursos sobre AJAX « Alexander Jiménez
  11. Sesion 1 :: Miercoles 1° Ago « Ajax-Unap
  12. ¿Que es la Web 2.0? « Joker Land
  13. AJAX: una introducción // menéame
  14. pepeluiscomenta » Blog Archive » Libros gratuitos sobre Ajax, JavaScript, Symfony, CSS y XHTML
  15. Ajax
  16. Web 2.0 « Dream . Pzx
  17. web 2.0 « Harrods’s Weblog
  18. ¿Qué es la web 2.0?
  19. La nueva Web 2.0 Que es? como la usamos? « Elreves, las otras noticias.
  20. ¿Qué es la Web 2.0? « blogdelartistaweb
  21. Ponerse en el lugar del cliente para lograr tus objetivos | www.creafacil.cl
  22. Carlos Manzano, 10 años de experiencia en internet. » Blog Archive » ¿Que es la web 2.0?
  23. Primeros pasos para generar aplicaciones de Facebook | AplicacionesWeb
  24. Desarrollo y Diseño Web en AW » Blog Archive » Ponerse en el lugar del cliente para lograr tus objetivos
  25. G@bo » Article » Llego la beta del IE8
  26. Editores de Periodicos y Revistas » Blog Archive » Pero qué es la Web 2.0
  27. Blog LSIA UG » Web 2.0
  28. WEB 2.0 « Cecybarajasf’s Weblog
  29. Usando Yahoo! Pipes. | AlainAlemany
  30. Web 2.0
  31. AD Studio Blog - También Compartimos…
  32. Web 2.0 | Aveiro Peroni Estudio
  33. Qué es la Web 2.0? | Gamers Factory
  34. informatica » Blog Archive » QUE SON HERRAMIENTAS WEB 2.0
  35. Y tú, ¿que $#&@ sabes de Web 2.0? - Nimrod’s Sons
  36. Anem a saber més sobre la web 2.0 « Nunca consideres el estudio como una obligación, sino como una oportunidad para penetrar en el bello y maravilloso mundo del saber (Albert Einstein)
  37. Innovate…! » Blog Archive » Técnicas en AJAX que han mejorado la usabilidad en un sitio, y cómo implementarlas
  38. Tecnologías que engloban la Web 2.0 « WEB 2.0+TIC hacia donde vamos!
  39. Blog de PHP - FinderIT » Blog Archive » Ruby on Rails vs PHP: una falsa comparación
  40. Web 2.0 « Herramientas Web!
  41. Web 2.0 « Sistemas Operativos
  42. Diseño web 2.0 :: Buenas prácticas para aplicar en maquetación avanzada « Tripleclickgroup
  43. Nuevas Tecnologías « Buscadores Web 2.0
  44. Que es la web 2.0 ? « Digital Camp
  45. CONCEPTO DE LA BIBLIOTECA 2.0 « TECNOLOGIAS Y MUCHO MAS…!!
  46. Primeros pasos para generar aplicaciones de Facebook « Los temas del Pelado
  47. LAS CIENCIAS DE LA INFORMACIÓN: BIBLIOTECOLOGIA, BIBLIOGRAFÍA Y ARCHIVÍSTICA « ana_biblio_09
  48. Las 10 extensiones de Firefox más populares « El Blog de LC
  49. » ¿Qué es la Web 2.0?
  50. Técnicas en AJAX que han mejorado la usabilidad en un sitio, y cómo implementarlas - BBBlog
  51. Ruby on Rails vs PHP: una falsa comparación - BBBlog
  52. Cómo manipular la altura de capas paralelas con JQuery · BBBlog
  53. LA WEB 2.0 « Educarparalavida's Blog
  54. Zoombidopoolcreativo's Blog
  55. Artículo sobre Web 2.0 « NNTT en el aula
  56. interactivitat « Ninasuri's Blog
  57. David`s blog » Blog Archive » Web 2.0
  58. Kiogre » Blog Archive » “Web 2.0”
  59. Solo sé, que nada sé, y lo que sé, se me olvidó » Blog Archive » Web 2.0
  60. Nasa » Blog Archive » Web 2.0
  61. De To uN PoKiS XD » Blog Archive » tCnOlOgIa d lA WeB 2.0
  62. De To uN PoKiS XD » Blog Archive » wEb 2.0
  63. blog de Naruto » Blog Archive » web 2.0
  64. RAPHAEL » Blog Archive » wed 2.0
  65. La web 2.0
  66. 1 Bachillerato FIMA « Computation's Blog
  67. AJAX « Sabelita's Blog
  68. Bases de Datos
  69. Aprendiendo Web 2.0 « Ecmaquilon's Blog
  70. WEB 2.0 | Verorito's Blog
  71. Villada271's Blog
  72. Cómo crear aplicaciones en Facebook | Sistemas Perú
  73. Expertos en posicionamiento web » Blog Archive » Primeros pasos para generar aplicaciones de Facebook
  74. ¿Qué es la Web 2.0? « Ina Capa
  75. Primeros pasos para generar aplicaciones de Facebook « rodriguezgarciaandres
  76. aalejandro17
  77. jenniferzita