Introduccin a los lenguajes de

programacin de la plataforma
Web 2.0:

Ajax
David Arango, Simplelgica
Web 2.0
Tecnologas
pensadas
para la
gente
Participacin
 Participacin

Reducir barreras

Mejorar la interaccin
 RIAs

Rich Internet Applications

Caractersticas 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
Asynchronous
JavaScript
Asynchronous
JavaScript
And
Asynchronous
JavaScript
And
XML
Asynchronous

?
JavaScript
And
XML
 Ajax no es una tecnologa.
Es realmente muchas
tecnologas, cada una
floreciendo por su propio
mrito, unindose en
poderosas nuevas formas.
Jesse James Garrett
http://adaptivepath.com/publications/essays/archives/000385.php
Standards-based presentation using
XHTML and CSS
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data interchange and manipulation
using XML and XSLT
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data interchange and manipulation
using XML and XSLT
Asynchronous data retrieval using
XMLHttpRequest
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data interchange and manipulation
using XML and XSLT
Asynchronous data retrieval using
XMLHttpRequest
And JavaScript binding everything
together.
Mejor con ejemplos
Autocompletado
Autocompletado
Edicin en lnea
Carga asincrnica
Formularios
asincrnicos
Calificacin de
contenidos
Aplicaciones que usan
Ajax
 http://www.basecamphq.com/

Creada por 37 signals

Sobre plataforma Rails
(Rails naci aqu)
Pioneros en la
introduccin de
elementos de interfaz
con Ajax

http://clientesdesimplelogica.projectpath.com/projects/600838/todos#
 Actualizacin automtica
Formularios
Validacin
Subida de archivos...
http://flickr.com/

Empez como un juego

(literalmente)
PHP como backend de la parte
ms web
Ajax con moderacin, gracias
Un buen ejemplo de lo que es
Web 2.0
Cmo funciona?
 Digg vs Mename
Accesibilidad Ajax en la prctica
 El objeto
XMLHttpRequest
Un objeto que nos permite cargar datos
externos a la pgina web
Desarrollado por Microsoft, luego adoptado
por Mozilla, Safari, Opera, Kokeror...
Working Draft del W3C desde 2006
Posibles valores de readyState

0 = sin inicializar
1 = cargando
2 = cargado
3 = interactivo
4 = completado
Dnde estn los datos?
Y una ltima cosa
Hagamos una peticin
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

Slo disponible si la respuesta ES XML

Atencin al Content-Type
XMLs mal formados no funcionan
Si algo falla => responseXML = undefined
Vamos a probar esto
 No slo XML
Ajax puede funcionar con cualquier tipo de datos

Texto plano
CSV
JSON
Fragmentos HTML
Datos en binario, imgenes...
HTML
 HTML

AHAH
Mucho ms 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 aplicacin, usa el sentido
comn
XML est en declive, salvo en entornos Java
JSON va en aumento
 Diferencias de
implementacin

Esta vez no podemos culpar a Microsoft!

Buenas prcticas
Mantengamos la Web limpia
 Un URI por recurso

En la Web todo objeto debera tener un URI

El servidor debe encargarse de analizar las
peticiones y servir el contenido ms
apropiado
 Una peticin normal
Cliente
(navegador) Servidor

Peticin HTTP (normal)

Anlisis de la
peticin

Respuesta HTML
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (normal)

Anlisis de la
peticin

Respuesta HTML
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (normal)

Anlisis de la
peticin

Respuesta HTML
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (normal)

Anlisis de la
peticin

Respuesta HTML
 En la prctica...
Utilizamos una cabecera HTTP para marcar
la peticin Ajax
Comprobando del lado
del servidor (PHP)
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (ajax)

XMLHttp

Anlisis de la
peticin

Respuesta XML

JavaScript
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (ajax)

XMLHttp

Anlisis de la
peticin

Respuesta XML

JavaScript
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (ajax)

XMLHttp

Anlisis de la
peticin

Respuesta XML

JavaScript
 Dilogo HTTP
Cliente
(navegador) Servidor

Peticin HTTP (ajax)

XMLHttp

Anlisis de la
peticin

Respuesta XML

JavaScript
 Usemos HTTP
Enviemos los cdigos HTTP que
correspodan (a veces no es obvio,
redirecciones)
Usemos pginas de error personalizadas
(Ajax tambin se beneficia)
Usemos las cabeceras HTTP
Hagamos clientes HTTP respetuosos
 Beneficios

No duplicamos la lgica de la aplicacin

Favorece el desarrollo gil sin comprometer
necesariamente la accesibilidad
Muy REST, futuros frameworks funcionarn
as (Rails ya lo hace)
Buenas prcticas (2)
Accesibilidad
 Ajax y accesibilidad

Asegrese de que las pginas sigan siendo utilizables

cuando se desconecten o no se soporten los scripts,
applets u otros objetos programados. Si esto no es
posible, proporcione informacin equivalente en una
pgina alternativa accesible.
Prioridad 1

WAI WCAG punto 6.3

 Ajax y accesibilidad

Haga los elementos de programacin, tales como

scripts y applets, directamente accesibles o
compatibles con las ayudas tcnicas [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 tecnologa que ms ha sufrido las
Browser Wars
Demasiadas diferencias de implementacin
Si tu JavaScript falla, tu aplicacin queda
totalmente inaccesible
 Si ninguna de las anteriores te convence...

Google tambin es un agente de usuario

(como un navegador)
Google no sabe interpretar JavaScript (an)
Google no indexar tus contenidos si no son
directamente accesibles
Hazlo funcionar sin Ajax
Hazlo funcionar sin Ajax
 Hazlo funcionar sin Ajax

Busca problemas de interaccin

 Hazlo funcionar sin Ajax

Busca problemas de interaccin

 Hazlo funcionar sin Ajax

Busca problemas de interaccin

Modifica el DOM desde JS e incorpora

Ajax
Buenas prcticas (3)
Separacin entre capas
Una Web, tres capas
 Una Web, tres capas
Informacin contenida en la
Contenido pgina junto a su estructura
no semntica!

Informacin sobre la
Presentacin presentacin visual y/o
auditiva de la pgina

Modificaciones a la forma
Comportamiento habitual de interactuar con la
pgina
Se trata de degradar
adecuadamente
Cul es mejor?
Separacin entre capas

Contenido y presentacin
Contenido y comportamiento
Comportamiento y presentacin
Buenas prcticas (4)
Encapsula tu cdigo para hacer amigos
e impresionar a la gente
Di NO a las variables
globales
Object literal notation
 Libreras JavaScript

jQuery
Prototype + Script.aculo.us
Dojo
Moo Tools
...
 Porqu usar una
librera?
Abstraccin sobre las diferencias de
implementacin en navegadores
Cdigo normalmente muy contrastado
Mejores mtodos de acceso a DOM
Abstraccin sobre Ajax
Efectos visuales incorporados
 Porqu no usarlas?

Demasiado cdigo para hacer tareas

sencillas
Ningn mtodo de acceso a DOM ser ms
rpido que los propios de la API
Las actualizaciones pueden dejar tu
aplicacin inaccesible
 Introduccin a jQuery

Ligera (20 Kb comprimida)

Selectores CSS para el
DOM
No es necesario saber
demasiadas cosas de
JavaScript
Men de acorden con
jQuery
 Ajax en plataformas
comunes de desarrollo

Hoy en da se utilizan muchos frameworks y

entornos de desarrollo para Web

Veremos dos ejemplos

Drupal
Ruby On Rails
 El patrn MVC en la Web

Las aplicaciones web encajan muy bien

Favorece la creacin de recursos con URIs
nicos y permite aadir funcionalidad de
forma sencilla
 Trabajando con Ajax y
Drupal

Drupal sigue una estructura MVC sin utilizar

POO
Facilita la incorporacin 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 vdeo
 Problemas:
inaccesibilidad
 Alternativas

Javascript home-made
Utilizar una librera
Usar respond_to a fondo
Plugins supuestamente accesibles (UJS)
 Conclusiones

Hacer Ajax es fcil

Hacerlo bien... no tanto
Estamos haciendo muy mal algunas cosas
Se puede hacer Ajax accesible
Vamos a llevarnos bien
Gracias :-)