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.

1. Introducción a los lenguajes de
programación de la plataforma
Web 2.0:
Ajax
David Arango, Simplelógica

3. Web 2.0

5. Tecnologías
pensadas
para la
gente

6. Participación

7. Participación
Reducir barreras
Mejorar la interacción

8. RIAs
• Rich Internet Applications
• Características de aplicaciones de
escritorio
• Ajax y artificios JavaScript por todas
partes

9. Web 2.0 ≠ RIAs

10. Nuestros nuevos amigos
• DOM Scripting
• Ajax
• Nuevos frameworks “nativos web”
• Ruby On Rails
• Django
• Cake PHP, Zend Framework...

11. ¿Qué es Ajax?

13. Asynchronous

14. Asynchronous
JavaScript

15. Asynchronous
JavaScript
And

16. Asynchronous
JavaScript
And
XML

17. Asynchronous
¿ ?
JavaScript
And
XML

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

20. Standards-based presentation using
XHTML and CSS

21. Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model

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.

28. Mejor con ejemplos

29. Autocompletado

30. Autocompletado

31. Edición en línea

32. Carga asincrónica

33. Formularios
asincrónicos

34. Calificación de
contenidos

35. Aplicaciones que usan
Ajax

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#

37. • Actualización automática
• Formularios
• Validación
• Subida de archivos...

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

40. ¿Cómo funciona?

41. Digg vs Menéame
Accesibilidad Ajax en la práctica

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

48. Posibles valores de readyState
• 0 = sin inicializar
• 1 = cargando
• 2 = cargado
• 3 = interactivo
• 4 = completado

50. ¿Dónde están los datos?

51. Y una última cosa

52. Hagamos una petición
GET sencilla

53. Haciendo peticiones
POST

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

56. Vamos a probar esto

57. No sólo XML
Ajax puede funcionar con cualquier tipo de datos
• Texto plano
• CSV
• JSON
• Fragmentos HTML
• Datos en binario, imágenes...

58. HTML

59. HTML
• AHAH
• Mucho más simple
• Uso intensivo de InnerHTML

62. XML

65. JSON

66. JSON
• Douglas Crockford
• JavaScript Object
Notation
• Ligero
• Implementaciones en
todos los lenguajes
importantes

69. ¿Qué usar?

70. • Depende de la aplicación, usa el sentido
común
• XML está en declive, salvo en entornos Java
• JSON va en aumento

71. Diferencias de
implementación
Esta vez no podemos culpar a Microsoft!

74. Buenas prácticas
Mantengamos la Web limpia

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

80. En la práctica...
Utilizamos una cabecera HTTP para “marcar”
la petición Ajax

81. Comprobando del lado
del servidor (PHP)

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)

88. Buenas prácticas (2)
Accesibilidad

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

91. ¿Porqué?

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

96. Hazlo funcionar sin Ajax

97. Hazlo funcionar sin Ajax

98. Hazlo funcionar sin Ajax
Busca problemas de interacción

99. Hazlo funcionar sin Ajax
Busca problemas de interacción

100. Hazlo funcionar sin Ajax
Busca problemas de interacción
Modifica el DOM desde JS e incorpora
Ajax

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

102. Una Web, tres capas

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

104. Se trata de degradar
adecuadamente

105. ¿Cuál es mejor?

106. Separación entre capas
• Contenido y presentación
• Contenido y comportamiento
• Comportamiento y presentación

108. Buenas prácticas (4)
Encapsula tu código para hacer amigos
e impresionar a la gente

109. Di NO a las variables
globales

110. Object literal notation

111. Librerías JavaScript
• jQuery
• Prototype + Script.aculo.us
• Dojo
• Moo Tools
• ...

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

118. Menú de acordeón con
jQuery

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

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

126. Estructura de directorios de
Rails

127. Veamos un vídeo

129. Problemas:
inaccesibilidad

130. Alternativas
• Javascript home-made
• Utilizar una librería
• Usar respond_to a fondo
• Plugins supuestamente accesibles (UJS)

131. Conclusiones
• Hacer Ajax es fácil
• Hacerlo bien... no tanto
• Estamos haciendo muy mal algunas cosas
• Se puede hacer Ajax accesible

132. Vamos a llevarnos bien

133. Gracias :-)