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

            Ajax
       David Arango, S...
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 tod...
Web 2.0 ≠ RIAs
Nuestros nuevos amigos
• DOM Scripting
• Ajax
• Nuevos frameworks “nativos web”
 • Ruby On Rails
 • Django
 • Cake PHP, Ze...
¿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, un...
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 inte...
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data inte...
Standards-based presentation using
XHTML and CSS
Dynamic display and interaction
using the Document Object Model
Data inte...
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
  int...
• 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 moderac...
¿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 Micro...
Posibles valores de readyState

       • 0 = sin inicializar
       • 1 = cargando
       • 2 = cargado
       • 3 = inter...
¿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
  r...
Trabajando con XML


• Sólo disponible si la respuesta ES XML
• Atención al Content-Type
• XMLs mal formados no funcionan
...
Vamos a probar esto
No sólo XML
Ajax puede funcionar con cualquier tipo de datos

 • Texto plano
 • CSV
 • JSON
 • Fragmentos HTML
 • Datos en...
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
   impo...
¿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
  peticione...
Una petición normal
  Cliente
                                         Servidor
(navegador)

        Petición HTTP (normal...
Diálogo HTTP
  Cliente
                                         Servidor
(navegador)

        Petición HTTP (normal)




 ...
Diálogo HTTP
  Cliente
                                         Servidor
(navegador)

        Petición HTTP (normal)




 ...
Diálogo HTTP
  Cliente
                                         Servidor
(navegador)

        Petición HTTP (normal)




 ...
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)

               ...
Diálogo HTTP
       Cliente
                                                    Servidor
     (navegador)

               ...
Diálogo HTTP
       Cliente
                                                    Servidor
     (navegador)

               ...
Diálogo HTTP
       Cliente
                                                    Servidor
     (navegador)

               ...
Usemos HTTP
• Enviemos los códigos HTTP que
  correspodan (a veces no es obvio,
  redirecciones)
• Usemos páginas de error...
Beneficios

• No duplicamos la lógica de la aplicación
• Favorece el desarrollo ágil sin comprometer
  necesariamente la ac...
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 sc...
Ajax y accesibilidad

  Haga los elementos de programación, tales como
     scripts y applets, directamente accesibles o
c...
¿Porqué?
Diversidad de
              dispositivos

• Algunos agentes de
  usuario no tienen
  soporte JavaScript, o su
  soporte es...
JavaScript es un dolor

• Varios niveles de DOM
• La tecnología que más ha sufrido las
  Browser Wars
• Demasiadas diferen...
Si ninguna de las anteriores te convence...


• Google también es un agente de usuario
  (como un navegador)
• Google no s...
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
           ...
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 normal...
¿Porqué no usarlas?

• Demasiado código para hacer tareas
  sencillas
• Ningún método de acceso a DOM será más
  rápido qu...
Introducción a jQuery

• Ligera (20 Kb comprimida)
• Selectores CSS para el
  DOM
• No es necesario saber
  demasiadas cos...
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 ...
El patrón MVC en la Web




• Las aplicaciones web encajan muy bien
• Favorece la creación de recursos con URIs
  únicos y...
Trabajando con Ajax y
        Drupal

• Drupal sigue una estructura MVC sin utilizar
  POO
• Facilita la incorporación de ...
Trabajando con Ajax y
     Ruby On Rails
• Ruby On Rails incorpora Prototype en sus
  últimas versiones
• Dispone de una s...
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 accesible...
Conclusiones

• Hacer Ajax es fácil
• Hacerlo bien... no tanto
• Estamos haciendo muy mal algunas cosas
• Se puede hacer A...
Vamos a llevarnos bien
Gracias :-)
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

9,623 views

Published on

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

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
9,623
On SlideShare
0
From Embeds
0
Number of Embeds
384
Actions
Shares
0
Downloads
527
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

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

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

×