Análisis de las herramientas y tecnologías implicadas en la web 2.0
Ajax y patrones de diseño
Fernando Blat & Álvaro Ortiz
The Cocktail
Web 2.0 - Patrones de diseño
AJAX
¿Qué es Ajax?
- características
- uso de estándares web para la presentación (XHTML y CSS)
- interacción y presentación dinámica usando el DOM
- intercambio y manipulación de datos usando XML y XSLT
- recuperación asíncrona de datos usando el objeto XMLHttpRequest
- uso de JavaScript para unir todo lo anterior
- Ajax: A New Approach to Web Applications
- En la práctica:
- el usuario puede actualizar partes de una página sin tener que recargar la página entera
- las interacciones son más rápidas (porque lo son realmente, o porque se perciben así)
- el uso se asemeja a una aplicación de escritorio
El interfaz 2.0: Nuevas posibilidades y retos.
- Preponderancia de: las acciones, del usuario y del sistema, sobre elementos de la página.
- Foco en: los distintos componentes que conforman la página.
- Permitir y animar a: editar elementos, modificar la composición de la página, revelar o mostrar elementos ...
- Sin olvidar que:
- para el usuario no experto todo puede ser "un poco demasiado" novedoso.
- los errores pasados están esperando a que los volvamos a cometer.
¿Cómo?
En base a: acciones del usuario + comunicación con el servidor + eventos periódicos.
- Modificaremos: la apariencia de ciertos elementos, reemplazaremos texto, colores, etc..
- Reestructuraremos: la página, para añadir, quitar y desplazar elementos.
Patrones de diseño
Live forms
- Formularios que realizan comprobaciones en el servidor en tiempo real.
- Por ejemplo, en procesos de registro, comprobamos la disponibilidad de nombre de usuario mientras se teclea.
- ¿Quién lo hace?
Consultamos al servidor al modificarse el campo e insertamos el resultado de la comprobación en el DOM, junto al correspondiente campo.
Microenlaces
Un enlace que revela información en la misma página, bien mediante llamadas al servidor e inserción en DOM, bien mediante ocultación/muestra de contenido de la página.
Ver fuente Tabtastic
Ver fuente simple "toggle"
Alteramos la propiedad "display" de los elementos que deseamos revelar/ocultar.
Barra de progreso
En procesos largos, como mientras se realiza una búsqueda, podemos mostrar un indicador animado de progreso.
Live Search
Cuándo una usuario teclea los términos de búsqueda, mostramos una vista previa de los resultados y la refinamos conforme se teclean más caracteres.
Iluminación momentánea de un objeto en la página.
Objetivo: Feedback sobre qué partes de la página han cambiado.
Tras la modificación, alteramos la propiedad backgroundColor del contenedor apropiado a un color resaltado (convención, amarillo pálido). Después recorreremos en pocos pasos las distintas gradaciones entre el color de resaltado y el de fondo original.
Ver código fuente
Popup suaves.
Contrapuestos a los "popups fuertes", las nuevas ventanas.
Funcionalidades contextuales, contenidas en capas que se revelan por una acción del usuario sobre un elemento
Podemos dar al usuario una serie de opciones sobre el recurso representado.
Documentación
Frameworks
- Dojo
- Mochikit
- scriptaculous
- Rico
- moo.fx
Ajax y el diseño de interacción
- Cambio de paradigma, de la página al widget
- Cuando usar y cuando no usar Ajax
- Problemas
