Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax
Upcoming SlideShare
Loading in...5
×
 

Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax

on

  • 13,580 views

Introducción a Ajax desde el punto de vista de un desarrollador web.

Introducción a Ajax desde el punto de vista de un desarrollador web.

Statistics

Views

Total Views
13,580
Views on SlideShare
13,244
Embed Views
336

Actions

Likes
6
Downloads
492
Comments
1

23 Embeds 336

http://accesible20ymas.blogspot.com 118
http://tifloweb20.blogspot.com 82
http://tifloweb20.blogspot.com.es 26
http://www.slideshare.net 20
http://www.webgox.com 16
http://accesible20ymas.blogspot.mx 12
http://savio.jsnat.com 11
http://accesible20ymas.blogspot.com.ar 9
http://personalpaqui.blogspot.com 9
http://accesible20ymas.blogspot.com.es 8
http://tifloweb20.blogspot.mx 6
http://www.htmleando.com 3
http://tifloweb20.blogspot.com.ar 3
http://www.blogger.com 2
http://egox.tumblr.com 2
https://www.linkedin.com 2
http://accesible20ymas.blogspot.ru 1
http://www.linkedin.com 1
http://accesible20ymas.blogspot.it 1
http://www.citynice.com 1
http://webcache.googleusercontent.com 1
http://localhost 1
http://tifloweb20.blogspot.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax Introducción a los lenguajes de programación de la plataforma Web 2.0: Ajax Presentation 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
  • Participación Reducir barreras 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
  • Asynchronous JavaScript
  • Asynchronous JavaScript And
  • Asynchronous JavaScript And XML
  • Asynchronous ¿ ? JavaScript And XML
  • 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
  • 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
  • Edición en línea
  • Carga asincrónica
  • Formularios asincrónicos
  • Calificación de contenidos
  • Aplicaciones que usan Ajax
  • 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#
  • • 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éame Accesibilidad 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
  • Posibles valores de readyState • 0 = sin inicializar • 1 = cargando • 2 = cargado • 3 = interactivo • 4 = completado
  • ¿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 Ajax puede funcionar con cualquier tipo de datos • Texto plano • CSV • JSON • Fragmentos HTML • Datos en binario, imágenes...
  • 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ácticas Mantengamos 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
  • Una petición normal Cliente Servidor (navegador) Petición HTTP (normal) Análisis de la petición Respuesta HTML
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (normal) Análisis de la petición Respuesta HTML
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (normal) Análisis de la petición Respuesta HTML
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (normal) Análisis de la petición Respuesta HTML
  • En la práctica... Utilizamos una cabecera HTTP para “marcar” la petición Ajax
  • Comprobando del lado del servidor (PHP)
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (ajax) XMLHttp Análisis de la petición Respuesta XML JavaScript
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (ajax) XMLHttp Análisis de la petición Respuesta XML JavaScript
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (ajax) XMLHttp Análisis de la petición Respuesta XML JavaScript
  • Diálogo HTTP Cliente Servidor (navegador) Petición HTTP (ajax) XMLHttp Análisis de la petición Respuesta XML JavaScript
  • 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. Prioridad 1 WAI WCAG punto 6.3
  • 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
  • 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
  • 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 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
  • 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 • Hoy en día se utilizan muchos frameworks y entornos de desarrollo para Web Veremos dos ejemplos • Drupal • Ruby On Rails
  • 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
  • Veamos un vídeo
  • 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 :-)