Este documento introduce los lenguajes de programación de la plataforma Web 2.0, en particular Ajax. Explica qué es Ajax y cómo funciona mediante el uso de XMLHttpRequest para cargar datos de forma asincrónica. También cubre ejemplos prácticos de Ajax, buenas prácticas de desarrollo como separación de capas y accesibilidad, y el uso de Ajax con frameworks como Drupal y Ruby on Rails.
18. 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.
Jesse James Garrett
http://adaptivepath.com/publications/essays/archives/000385.php
22. Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data interchange and manipulation
using XML and XSLT
23. 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
24. 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.
36. http://www.basecamphq.com/
• Creada por 37 signals
• Sobre plataforma Rails
(Rails nació aquí)
• Pioneros en la
introducción de
elementos de interfaz
con Ajax
http://clientesdesimplelogica.projectpath.com/projects/600838/todos#
38. 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
44. 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
54. Peticiones HEAD
• Obtienen únicamente las cabeceras HTTP
de una respuesta
• Comprobar errores HTTP, comprobar si un
recurso se ha modificado (Last-modified)...
55. 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
75. 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
76. Una petición normal
Cliente
Servidor
(navegador)
Petición HTTP (normal)
Análisis de la
petición
Respuesta HTML
77. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (normal)
Análisis de la
petición
Respuesta HTML
78. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (normal)
Análisis de la
petición
Respuesta HTML
79. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (normal)
Análisis de la
petición
Respuesta HTML
82. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (ajax)
XMLHttp
Análisis de la
petición
Respuesta XML
JavaScript
83. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (ajax)
XMLHttp
Análisis de la
petición
Respuesta XML
JavaScript
84. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (ajax)
XMLHttp
Análisis de la
petición
Respuesta XML
JavaScript
85. Diálogo HTTP
Cliente
Servidor
(navegador)
Petición HTTP (ajax)
XMLHttp
Análisis de la
petición
Respuesta XML
JavaScript
86. 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
87. 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)
89. 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.
Prioridad 1
WAI WCAG punto 6.3
90. 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
92. Diversidad de
dispositivos
• Algunos agentes de
usuario no tienen
soporte JavaScript, o su
soporte es limitado
93. 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
94. Si ninguna de las anteriores te convence...
• 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
103. Una Web, tres capas
Información contenida en la
Contenido página junto a su estructura
¡no semántica!
Información sobre la
Presentación presentación visual y/o
auditiva de la página
Modificaciones a la forma
Comportamiento habitual de interactuar con la
página
112. ¿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
113. ¿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
114. Introducción a jQuery
• Ligera (20 Kb comprimida)
• Selectores CSS para el
DOM
• No es necesario saber
demasiadas cosas de
JavaScript
119. Ajax en plataformas
comunes de desarrollo
• Hoy en día se utilizan muchos frameworks y
entornos de desarrollo para Web
Veremos dos ejemplos
• Drupal
• Ruby On Rails
120. 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
121. Trabajando con Ajax y
Drupal
• Drupal sigue una estructura MVC sin utilizar
POO
• Facilita la incorporación de JavaScript, las
últimas versiones incorporan jQuery
122.
123.
124.
125. 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