Aunque algunos desarrollos en AJAX ya existían desde hace mucho tiempo, fue Google quien nos cautivó con GMail al implementarlo tan bien que vimos las posibilidades reales de una aplicación de escritorio corriendo en la web.
Luego de eso fueron surgiendo más aplicaciones, pero sobre todo técnicas implementadas en éste conjunto de tecnologías que mejoraron la experiencia del usuario, y el desarrollo web, que me gustaría enumerar algunas en éste artículo junto a enlaces con scripts gratuitos para que cualquier otro desarrollador pueda implementarlo en su siguiente aplicación.
Autocompletado
Esto nos ha sido de gran ayuda para completar formularios, la primera vez lo ví con Google Suggest que ofrecía sugerencias de posibles búsquedas, también lo incluye GMail para ayudarnos a ingresar direcciones de correo.
Scripts con ejemplos y tutoriales para su implementación:
- Auto completado desde una base de datos.
- Implementación utilizando script.aculo.us.
- Sugerencias con AJAX.
- Autocompletado con AJAX.
Información en pestañas
Mejoró la forma de presentar la información en un sitio web haciéndolo más ordenado, es común que ahora las barras laterales de un sitio contengan al menos un módulo de éste tipo.
- Pestañas utilizando JQuery.
- MooTabs utilizando Mootols.
- Ejemplo de Pestañas que se pueden arrastrar y soltar para reordenarlas.
- Tabber, una de las implementaciónes más ligeras
Calificar un artículo o elemento
Youtube nos enseñó a calificar los videos 😉 , es una forma práctica de lograr que los usuarios nos den retroalimentación sobre lo que publicamos para luego tomar decisiones en base a ello o sencillamente mostrar lo más popular a nuestros visitantes
Validación al enviar formularios
Atrás quedaron los tiempos en los que se enviaba un formulario y la página se recargaba diciéndo que no habíamos ingresado algún dato, lo que a veces ocasionaba que se perdiera la información y tuviéramos que llenar de nuevo todos los campos, ahora con AJAX se valida y muestra de forma útil cuando hemos cometido algún error.
Muy buena recopilación de recursos.
De la lista extrañe los ‘lightbox’, ‘Toaster messages’ y otro tipos de notificaciones que ayudan a evitar los popups, alertas intrusivas (alert por ejemplo) y mejoran la velocidad de la navegación.
Olvide mencionar que en mis marcadores de delicious tengo más recursos como estos por si te interesan http://delicious.com/diciembre7/javascript+recursos
Muy útil. Gracias!
Muy buen artículo @Oscar como lo dices AJAX nos trajo un mundo de posibilidades ayudando sobre todo a Velocidad con la que trabaja un sitio, antes si era un martirio eso que te equivocabas en algun dato en el formulario de 40 campos jajaja y tenías que volver a capturar todo :/
Saludos
@diciembre7 Tenés razón con Lightbox ayuda muchísimo para notificaciones y a veces en galerías de imágenes, gracias por el Link de tu delicious.
@electrorichard Sin duda hay que agradecer por la validación vía AJAX, además mejoró la usabilidad.
Saludos
@electrorichard lo de volver a ingresar todo en un formulario de muchos campos, depende de que tan buen programador está detrás… como mínimo debería volverte a dar los datos que ya llenaste correctamente.
Pues en realidad no veo tanto de AJAX en estos ejemplos y sí bastante Javascript del lado del cliente.
Sugerencias -> Para muchos tipos de formulario se puede hacer con una lista precargada (por ejemplo, nombres de ciudades) sin necesidad de AJAX.
Pestañas -> generar la información de la página dependiendo de JS es bastante malo para la accesibilidad, además de bastante lento (cada vez que cambio de pestaña hay que recargar los datos, no hay mucha ventaja). Por otro lado, organizar varios DIV en pestañas no requiere conexión con el servidor
Votaciones -> aquí sí tiene sentido AJAX
Validaciones -> no necesitamos enviar nada al servidor para mostrar que un campo es requisito. A lo sumo para los registros de usuario sirve para mostrar rápidamente que el usuario está disponible
Yo más bien diría que hemos (los desarrolladores web han) empezado a utilizar la tecnología disponible para agregar una buena cantidad de controles que ayudan a la usabilidad del sitio, lo cual por supuesto siempre es de agradecer, pero no solamente es gracias a AJAX.
A propósito: la validación sin Javascript de este mismo formulario es bastante fea 😀
Saludos.
Pienso que AJAX ha revolucionado en gran manera el desarrollo de nuestras aplicaciones pero creo que javascript es el que ha mejorado la usabilidad, ajax es sola la comunicación entre el explorador y el servidor todo lo demas es javascript.
saludos
Algunos recursos de AJAX:
http://www.ajaxian.com
http://www.ajaxrain.com
Frameworks para desarrolladores:
Prototype-Scriptaculous
JQuery
Mootools
La verdad AJAX comenzo marcando un antes y un despues en la web. Cada vez son mas los sitios que lo usan, y cada vez quedan mas obsoletos los frames o iframes.. Realmente es buenisimo y siempre uso AJAX.. (con FireFox por supuesto =P).
Es una colección grande, tiene aspectos fundamentales. Gracias Oscar. Pero ya aprovecho, tiro de vuestra gran sabiduría con humildad 😛 y ruego ayuda en lo que sigo buscando… Los calendarios con multiselección y pudiendo listar años completos (para aplicaciones de vacaciones, organización de eventos,…) Estoy usando ahora mismo cosas que mejor calificar no aptas para adultos o si acaso del pleistoceno medio.
Y es verdad que no todo lo que brilla es verdaderamente AJAX. Pero es la moda y pinta muy bien decir que tu sitio es lo último en la web 2.0. Paciencia, las aguas volverán a su cauce.
Hola a todos
Que buen aporte los revisare para poder aprender mas de ellos.
Saludos.
Muy buen articulo, me gusta.
Como programador (principiante) de JS pienso que gracias a esto nuestras webs están mejores.
Saludos
Me parece un buen articulo, aunque coincido con alvlin en cuanto a que en estos ejemplos no se usa mucho AJAX sino JS, tal vez con Div ocultos. JS es super para esto conjugado con CSS, se logran cosas muy muy convenientes.
Ralph
http://donstudio.com
Me parece un buen articulo, aunque coincido con alvlin en cuanto a que en estos ejemplos no se usa mucho AJAX sino JS, tal vez con Div ocultos. JS es super para esto conjugado con CSS, se logran cosas muy muy convenientes.
Siempre me ha sorprendido mucho la confusión que existe entre mucha gente sobre lo que es y no ajax. Es un fenómeno curioso como el Dom Scripting se ha convertido en “ajax” para muchas personas, de modo que si ven una animación, un menú desplegable, un rollover o cualquier cosa paresia, lo llaman ajax. No creo que esto sea un problema en si, pero si me gustaría que se hiciera más énfasis en la diferencia entre ajax y DOM scripting. De cualquier modo, el articulo le puede ser útil a más de uno y eso es lo bueno de todo esto.
Nada más no se les olvide que la validación de formularios del lado del cliente está para la conveniencia del visitanta. De todos modos hay que revalidar los valores del lado del servidor y protegerse de inyeccioines sql.
Me gusta la recopilacion de datos sobre ajax, y bueno estoy aprendiendo mas cada dia, pero me gustaria un articulo donde esruviera la explicacion paso a paso, y en español, y que aunque sea se tomen ese pequeño trabajo en vez de mandarnos a nuestra suerte en otra buen. Espero esto no ofenda.. chaoo
Muy bueno el material muchas gracias.
aca les dejo otro sitio que les puede ser de mucha utilidad es un directorio javascript de plugins gratuitos , con descripciones en español
http://www.ajaxshake.com