introducción a los lenguajes de programación de la plataforma web 2.0: ajax
DESCRIPTION
Introducción a Ajax desde el punto de vista de un desarrollador web.TRANSCRIPT
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
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 :-)