introducción a los lenguajes de programación de la plataforma web 2.0: ajax

Introducción a los lenguajes de programación de la plataforma

Web 2.0:

Ajax

David Arango, Simplelógica

Web 2.0

Tecnologías pensadas para la

gente

Participación

Reducir barreras

Participación

Mejorar la interacción

RIAs

• Rich Internet Applications

• Características de aplicaciones de escritorio

• Ajax y artificios JavaScript por todas partes

Web 2.0 ≠ RIAs

Nuestros nuevos amigos

• DOM Scripting

• Ajax

• Nuevos frameworks “nativos web”

• Ruby On Rails

• Django

• Cake PHP, Zend Framework...

¿Qué es Ajax?

Asynchronous

AsynchronousJavaScript

AsynchronousJavaScript

And

AsynchronousJavaScript

AndXML

AsynchronousJavaScript

AndXML

¿ ?

Jesse James Garrett

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.

http://adaptivepath.com/publications/essays/archives/000385.php

Standards-based presentation using XHTML and CSS

Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object Model

Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object ModelData interchange and manipulation using XML and XSLT

Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object ModelData interchange and manipulation using XML and XSLTAsynchronous data retrieval using XMLHttpRequest

Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object ModelData interchange and manipulation using XML and XSLTAsynchronous data retrieval using XMLHttpRequestAnd JavaScript binding everything together.

Mejor con ejemplos

Autocompletado

Autocompletado

Edición en línea

Carga asincrónica

Formularios asincrónicos

Calificación de contenidos

Aplicaciones que usan Ajax

• Creada por 37 signals

• Sobre plataforma Rails (Rails nació aquí)

• Pioneros en la introducción de elementos de interfaz con Ajax

http://www.basecamphq.com/

http://clientesdesimplelogica.projectpath.com/projects/600838/todos#

• Actualización automática

• Formularios

• Validación

• Subida de archivos...

http://flickr.com/

• Empezó como un juego (literalmente)

• PHP como backend de la parte más “web”

• Ajax con moderación, gracias

• Un buen ejemplo de lo que es Web 2.0

¿Cómo funciona?

Digg vs MenéameAccesibilidad Ajax en la práctica

El objeto XMLHttpRequest

• Un objeto que nos permite cargar datos externos a la página web

• Desarrollado por Microsoft, luego adoptado por Mozilla, Safari, Opera, Kokeror...

• Working Draft del W3C desde 2006

• 0 = sin inicializar• 1 = cargando• 2 = cargado• 3 = interactivo• 4 = completado

Posibles valores de readyState

¿Dónde están los datos?

Y una última cosa

Hagamos una petición GET sencilla

Haciendo peticiones POST

Peticiones HEAD

• Obtienen únicamente las cabeceras HTTP de una respuesta

• Comprobar errores HTTP, comprobar si un recurso se ha modificado (Last-modified)...

Trabajando con XML

• Sólo disponible si la respuesta ES XML

• Atención al Content-Type

• XMLs mal formados no funcionan

• Si algo falla => responseXML = undefined

Vamos a probar esto

No sólo XML

• Texto plano

• CSV

• JSON

• Fragmentos HTML

• Datos en binario, imágenes...

Ajax puede funcionar con cualquier tipo de datos

HTML

HTML

• AHAH

• Mucho más simple

• Uso intensivo de InnerHTML

XML

JSON

JSON

• Douglas Crockford

• JavaScript Object Notation

• Ligero

• Implementaciones en todos los lenguajes importantes

¿Qué usar?

• Depende de la aplicación, usa el sentido común

• XML está en declive, salvo en entornos Java

• JSON va en aumento

Diferencias de implementación

Esta vez no podemos culpar a Microsoft!

Buenas prácticasMantengamos la Web limpia

Un URI por recurso

• En la Web todo objeto debería tener un URI

• El servidor debe encargarse de analizar las peticiones y servir el contenido más apropiado

Cliente(navegador) Servidor

Petición HTTP (normal)

Respuesta HTML

Análisis de la petición

Una petición normal

Cliente(navegador) Servidor

Petición HTTP (normal)

Respuesta HTML

Análisis de la petición

Diálogo HTTP

Cliente(navegador) Servidor

Petición HTTP (normal)

Respuesta HTML

Análisis de la petición

Diálogo HTTP

Cliente(navegador) Servidor

Petición HTTP (normal)

Respuesta HTML

Análisis de la petición

Diálogo HTTP

En la práctica...

Utilizamos una cabecera HTTP para “marcar” la petición Ajax

Comprobando del lado del servidor (PHP)

Cliente(navegador) Servidor

Petición HTTP (ajax)

Respuesta XML

Análisis de la petición

JavaScript

XMLHttp

Diálogo HTTP

Cliente(navegador) Servidor

Petición HTTP (ajax)

Respuesta XML

Análisis de la petición

JavaScript

XMLHttp

Diálogo HTTP

Cliente(navegador) Servidor

Petición HTTP (ajax)

Respuesta XML

Análisis de la petición

JavaScript

XMLHttp

Diálogo HTTP

Cliente(navegador) Servidor

Petición HTTP (ajax)

Respuesta XML

Análisis de la petición

JavaScript

XMLHttp

Diálogo HTTP

Usemos HTTP

• Enviemos los códigos HTTP que correspodan (a veces no es obvio, redirecciones)

• Usemos páginas de error personalizadas (Ajax también se beneficia)

• Usemos las cabeceras HTTP

• Hagamos clientes HTTP respetuosos

Beneficios

• No duplicamos la lógica de la aplicación

• Favorece el desarrollo ágil sin comprometer necesariamente la accesibilidad

• Muy REST, futuros frameworks funcionarán así (Rails ya lo hace)

Buenas prácticas (2)Accesibilidad

Ajax y accesibilidad

Asegúrese de que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los scripts, applets u otros objetos programados. Si esto no es

posible, proporcione información equivalente en una página alternativa accesible.

WAI WCAG punto 6.3

Prioridad 1

Ajax y accesibilidad

Haga los elementos de programación, tales como scripts y applets, directamente accesibles o

compatibles con las ayudas técnicas [Prioridad 1 si la funcionalidad es importante y no se presenta en otro

lugar; de otra manera, Prioridad 2.]

WAI WCAG punto 8.1

¿Porqué?

Diversidad de dispositivos

• Algunos agentes de usuario no tienen soporte JavaScript, o su soporte es limitado

JavaScript es un dolor

• Varios niveles de DOM

• La tecnología que más ha sufrido las Browser Wars

• Demasiadas diferencias de implementación

• Si tu JavaScript falla, tu aplicación queda totalmente inaccesible

• Google también es un agente de usuario (como un navegador)

• Google no sabe interpretar JavaScript (aún)

• Google no indexará tus contenidos si no son directamente accesibles

Si ninguna de las anteriores te convence...

Hazlo funcionar sin Ajax

Hazlo funcionar sin Ajax

Hazlo funcionar sin Ajax

Busca problemas de interacción

Hazlo funcionar sin Ajax

Busca problemas de interacción

Hazlo funcionar sin Ajax

Busca problemas de interacción

Modifica el DOM desde JS e incorpora Ajax

Buenas prácticas (3)Separación entre capas

Una Web, tres capas

Una Web, tres capas

Contenido

Presentación

Comportamiento

Información contenida en la página junto a su estructura ¡no semántica!

Información sobre la presentación visual y/o auditiva de la página

Modificaciones a la forma habitual de interactuar con la página

Se trata de degradar adecuadamente

¿Cuál es mejor?

Separación entre capas

• Contenido y presentación

• Contenido y comportamiento

• Comportamiento y presentación

Buenas prácticas (4)Encapsula tu código para hacer amigos

e impresionar a la gente

Di NO a las variables globales

Object literal notation

Librerías JavaScript

• jQuery

• Prototype + Script.aculo.us

• Dojo

• Moo Tools

• ...

¿Porqué usar una librería?

• Abstracción sobre las diferencias de implementación en navegadores

• Código normalmente muy contrastado

• Mejores métodos de acceso a DOM

• Abstracción sobre Ajax

• Efectos visuales incorporados

¿Porqué no usarlas?

• Demasiado código para hacer tareas sencillas

• Ningún método de acceso a DOM será más rápido que los propios de la API

• Las actualizaciones pueden dejar tu aplicación inaccesible

Introducción a jQuery

• Ligera (20 Kb comprimida)

• Selectores CSS para el DOM

• No es necesario saber demasiadas cosas de JavaScript

Menú de acordeón con jQuery

Ajax en plataformas comunes de desarrollo

• Drupal

• Ruby On Rails

Veremos dos ejemplos

• Hoy en día se utilizan muchos frameworks y entornos de desarrollo para Web

El patrón MVC en la Web

• Las aplicaciones web encajan muy bien

• Favorece la creación de recursos con URIs únicos y permite añadir funcionalidad de forma sencilla

Trabajando con Ajax y Drupal

• Drupal sigue una estructura MVC sin utilizar POO

• Facilita la incorporación de JavaScript, las últimas versiones incorporan jQuery

Trabajando con Ajax y Ruby On Rails

• Ruby On Rails incorpora Prototype en sus últimas versiones

• Dispone de una serie de helpers para trabajar con Ajax sin necesidad de saber JavaScript

• Estos helpers no son accesibles

Estructura de directorios de Rails

Veamos un vídeo

Problemas: inaccesibilidad

Alternativas

• Javascript home-made

• Utilizar una librería

• Usar respond_to a fondo

• Plugins supuestamente accesibles (UJS)

Conclusiones

• Hacer Ajax es fácil

• Hacerlo bien... no tanto

• Estamos haciendo muy mal algunas cosas

• Se puede hacer Ajax accesible

Vamos a llevarnos bien

Gracias :-)