![Page 1: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/1.jpg)
Introducción a los lenguajes de programación de la plataforma
Web 2.0:
Ajax
David Arango, Simplelógica
![Page 2: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/2.jpg)
![Page 3: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/3.jpg)
Web 2.0
![Page 4: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/4.jpg)
![Page 5: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/5.jpg)
Tecnologías pensadas para la
gente
![Page 6: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/6.jpg)
Participación
![Page 7: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/7.jpg)
Reducir barreras
Participación
Mejorar la interacción
![Page 8: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/8.jpg)
RIAs
• Rich Internet Applications
• Características de aplicaciones de escritorio
• Ajax y artificios JavaScript por todas partes
![Page 9: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/9.jpg)
Web 2.0 ≠ RIAs
![Page 10: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/10.jpg)
Nuestros nuevos amigos
• DOM Scripting
• Ajax
• Nuevos frameworks “nativos web”
• Ruby On Rails
• Django
• Cake PHP, Zend Framework...
![Page 11: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/11.jpg)
¿Qué es Ajax?
![Page 12: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/12.jpg)
![Page 13: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/13.jpg)
Asynchronous
![Page 14: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/14.jpg)
AsynchronousJavaScript
![Page 15: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/15.jpg)
AsynchronousJavaScript
And
![Page 16: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/16.jpg)
AsynchronousJavaScript
AndXML
![Page 17: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/17.jpg)
AsynchronousJavaScript
AndXML
¿ ?
![Page 18: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/18.jpg)
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
![Page 19: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/19.jpg)
![Page 20: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/20.jpg)
Standards-based presentation using XHTML and CSS
![Page 21: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/21.jpg)
Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object Model
![Page 22: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/22.jpg)
Standards-based presentation using XHTML and CSSDynamic display and interaction using the Document Object ModelData interchange and manipulation using XML and XSLT
![Page 23: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/23.jpg)
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
![Page 24: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/24.jpg)
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.
![Page 25: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/25.jpg)
![Page 26: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/26.jpg)
![Page 27: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/27.jpg)
![Page 28: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/28.jpg)
Mejor con ejemplos
![Page 29: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/29.jpg)
Autocompletado
![Page 30: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/30.jpg)
Autocompletado
![Page 31: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/31.jpg)
Edición en línea
![Page 32: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/32.jpg)
Carga asincrónica
![Page 33: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/33.jpg)
Formularios asincrónicos
![Page 34: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/34.jpg)
Calificación de contenidos
![Page 35: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/35.jpg)
Aplicaciones que usan Ajax
![Page 36: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/36.jpg)
• 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#
![Page 37: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/37.jpg)
• Actualización automática
• Formularios
• Validación
• Subida de archivos...
![Page 38: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/38.jpg)
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
![Page 39: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/39.jpg)
![Page 40: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/40.jpg)
¿Cómo funciona?
![Page 41: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/41.jpg)
Digg vs MenéameAccesibilidad Ajax en la práctica
![Page 43: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/43.jpg)
![Page 44: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/44.jpg)
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
![Page 45: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/45.jpg)
![Page 46: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/46.jpg)
![Page 47: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/47.jpg)
![Page 48: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/48.jpg)
• 0 = sin inicializar• 1 = cargando• 2 = cargado• 3 = interactivo• 4 = completado
Posibles valores de readyState
![Page 49: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/49.jpg)
![Page 50: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/50.jpg)
¿Dónde están los datos?
![Page 51: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/51.jpg)
Y una última cosa
![Page 52: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/52.jpg)
Hagamos una petición GET sencilla
![Page 53: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/53.jpg)
Haciendo peticiones POST
![Page 54: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/54.jpg)
Peticiones HEAD
• Obtienen únicamente las cabeceras HTTP de una respuesta
• Comprobar errores HTTP, comprobar si un recurso se ha modificado (Last-modified)...
![Page 55: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/55.jpg)
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
![Page 56: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/56.jpg)
Vamos a probar esto
![Page 57: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/57.jpg)
No sólo XML
• Texto plano
• CSV
• JSON
• Fragmentos HTML
• Datos en binario, imágenes...
Ajax puede funcionar con cualquier tipo de datos
![Page 58: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/58.jpg)
HTML
![Page 59: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/59.jpg)
HTML
• AHAH
• Mucho más simple
• Uso intensivo de InnerHTML
![Page 60: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/60.jpg)
![Page 61: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/61.jpg)
![Page 62: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/62.jpg)
XML
![Page 63: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/63.jpg)
![Page 64: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/64.jpg)
![Page 65: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/65.jpg)
JSON
![Page 66: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/66.jpg)
JSON
• Douglas Crockford
• JavaScript Object Notation
• Ligero
• Implementaciones en todos los lenguajes importantes
![Page 67: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/67.jpg)
![Page 68: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/68.jpg)
![Page 69: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/69.jpg)
¿Qué usar?
![Page 70: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/70.jpg)
• Depende de la aplicación, usa el sentido común
• XML está en declive, salvo en entornos Java
• JSON va en aumento
![Page 71: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/71.jpg)
Diferencias de implementación
Esta vez no podemos culpar a Microsoft!
![Page 72: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/72.jpg)
![Page 73: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/73.jpg)
![Page 74: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/74.jpg)
Buenas prácticasMantengamos la Web limpia
![Page 75: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/75.jpg)
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
![Page 76: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/76.jpg)
Cliente(navegador) Servidor
Petición HTTP (normal)
Respuesta HTML
Análisis de la petición
Una petición normal
![Page 77: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/77.jpg)
Cliente(navegador) Servidor
Petición HTTP (normal)
Respuesta HTML
Análisis de la petición
Diálogo HTTP
![Page 78: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/78.jpg)
Cliente(navegador) Servidor
Petición HTTP (normal)
Respuesta HTML
Análisis de la petición
Diálogo HTTP
![Page 79: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/79.jpg)
Cliente(navegador) Servidor
Petición HTTP (normal)
Respuesta HTML
Análisis de la petición
Diálogo HTTP
![Page 80: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/80.jpg)
En la práctica...
Utilizamos una cabecera HTTP para “marcar” la petición Ajax
![Page 81: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/81.jpg)
Comprobando del lado del servidor (PHP)
![Page 82: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/82.jpg)
Cliente(navegador) Servidor
Petición HTTP (ajax)
Respuesta XML
Análisis de la petición
JavaScript
XMLHttp
Diálogo HTTP
![Page 83: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/83.jpg)
Cliente(navegador) Servidor
Petición HTTP (ajax)
Respuesta XML
Análisis de la petición
JavaScript
XMLHttp
Diálogo HTTP
![Page 84: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/84.jpg)
Cliente(navegador) Servidor
Petición HTTP (ajax)
Respuesta XML
Análisis de la petición
JavaScript
XMLHttp
Diálogo HTTP
![Page 85: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/85.jpg)
Cliente(navegador) Servidor
Petición HTTP (ajax)
Respuesta XML
Análisis de la petición
JavaScript
XMLHttp
Diálogo HTTP
![Page 86: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/86.jpg)
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
![Page 87: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/87.jpg)
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)
![Page 88: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/88.jpg)
Buenas prácticas (2)Accesibilidad
![Page 89: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/89.jpg)
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
![Page 90: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/90.jpg)
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
![Page 91: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/91.jpg)
¿Porqué?
![Page 92: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/92.jpg)
Diversidad de dispositivos
• Algunos agentes de usuario no tienen soporte JavaScript, o su soporte es limitado
![Page 93: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/93.jpg)
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
![Page 94: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/94.jpg)
• 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...
![Page 95: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/95.jpg)
![Page 96: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/96.jpg)
Hazlo funcionar sin Ajax
![Page 97: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/97.jpg)
Hazlo funcionar sin Ajax
![Page 98: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/98.jpg)
Hazlo funcionar sin Ajax
Busca problemas de interacción
![Page 99: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/99.jpg)
Hazlo funcionar sin Ajax
Busca problemas de interacción
![Page 100: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/100.jpg)
Hazlo funcionar sin Ajax
Busca problemas de interacción
Modifica el DOM desde JS e incorpora Ajax
![Page 101: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/101.jpg)
Buenas prácticas (3)Separación entre capas
![Page 102: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/102.jpg)
Una Web, tres capas
![Page 103: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/103.jpg)
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
![Page 104: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/104.jpg)
Se trata de degradar adecuadamente
![Page 105: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/105.jpg)
¿Cuál es mejor?
![Page 106: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/106.jpg)
Separación entre capas
• Contenido y presentación
• Contenido y comportamiento
• Comportamiento y presentación
![Page 107: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/107.jpg)
![Page 108: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/108.jpg)
Buenas prácticas (4)Encapsula tu código para hacer amigos
e impresionar a la gente
![Page 109: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/109.jpg)
Di NO a las variables globales
![Page 110: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/110.jpg)
Object literal notation
![Page 111: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/111.jpg)
Librerías JavaScript
• jQuery
• Prototype + Script.aculo.us
• Dojo
• Moo Tools
• ...
![Page 112: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/112.jpg)
¿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
![Page 113: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/113.jpg)
¿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
![Page 114: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/114.jpg)
Introducción a jQuery
• Ligera (20 Kb comprimida)
• Selectores CSS para el DOM
• No es necesario saber demasiadas cosas de JavaScript
![Page 115: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/115.jpg)
![Page 116: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/116.jpg)
![Page 117: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/117.jpg)
![Page 118: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/118.jpg)
Menú de acordeón con jQuery
![Page 119: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/119.jpg)
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
![Page 120: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/120.jpg)
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
![Page 121: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/121.jpg)
Trabajando con Ajax y Drupal
• Drupal sigue una estructura MVC sin utilizar POO
• Facilita la incorporación de JavaScript, las últimas versiones incorporan jQuery
![Page 122: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/122.jpg)
![Page 123: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/123.jpg)
![Page 124: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/124.jpg)
![Page 125: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/125.jpg)
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
![Page 126: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/126.jpg)
Estructura de directorios de Rails
![Page 128: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/128.jpg)
![Page 129: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/129.jpg)
Problemas: inaccesibilidad
![Page 130: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/130.jpg)
Alternativas
• Javascript home-made
• Utilizar una librería
• Usar respond_to a fondo
• Plugins supuestamente accesibles (UJS)
![Page 131: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/131.jpg)
Conclusiones
• Hacer Ajax es fácil
• Hacerlo bien... no tanto
• Estamos haciendo muy mal algunas cosas
• Se puede hacer Ajax accesible
![Page 132: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/132.jpg)
Vamos a llevarnos bien
![Page 133: Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax](https://reader038.vdocuments.us/reader038/viewer/2022110120/557b610ad8b42a1f1a8b53ca/html5/thumbnails/133.jpg)
Gracias :-)