Ajax

Rodolfo Campos@camposer

github.com/camposer

Madrid, Marzo 2013

La Web 1.01

Algunas características:●Sitios estáticos. Contienen información que puede ser útil, pero no cambia, por lo que los usuarios no tienen razones por las que volver. ●Sitios no interactivos. Los usuarios sólo pueden visitar estos sitios, no pueden contribuir o cambiar su contenido.●Aplicaciones propietarias.

Algunos elementos de diseño:●El uso de framesets.●El uso de tablas para posicionar elementos.●Elementos HTML anacrónicos, como: BLINK o MARQUEE.●Trazas de logs.●Botones GIF promocionando otras páginas●Formularios HTML para enviar correos.

La Web 2.02

El término está asociado con aplicaciones Web que:●Facilitan la compartición de información participativa●Consideran la interoperabilidad●Consideran diseños centrados en los usuarios●Fomentan la colaboración

Un sitio Web 2.0 permite a los usuarios interactuar y colaborar con otros a través de redes sociales como creadores de contenido (UGC) en una comunidad virtual.

Algunos ejemplos: sitios de redes sociales, blogs, wikis, sitios de compartición de vídeos, servicios externos, aplicaciones Web, mashups y folksonomy.

Características de la Web 2.03

●Diseño centrado en el usuario. ●Múltiples fuentes. ●La Web como plataforma. ●Colaboración. ●Descentralización de poder.●Contenido dinámico.●Software como Servicio (SaaS). ●Experiencia de usuario enriquecida.

Tecnologías relacionadas - Web 2.02

●Lenguaje de Marcado Extensible (XML)●JavaScript y XML asíncrono (Ajax)●Adobe Flash y Flex●Notación de Objetos de JavaScript (JSON)●Modelo de Objetos de Documento (DOM)●Sindicación Realmente Simple (RSS)●Transferencia de Estado Representacional (REST)●...

Arquitectura - Web 2.04

Consideraciones:●Usualmente son utilizadas a través de navegadores Web●Responden a acciones de sus usuarios, de forma bastante similar a las aplicaciones de escritorio.●Utilizan interfaces bastante ricas en elementos y componentes.

Web 1.0 Web 2.0

Arquitectura - Web 2.04

HTML y XHTML5

●El Lenguaje de Marcado de Hipertexto (HTML) es la lingua franca para publicar hipertexto en la World Wide Web. ●Es un formato no propietario basado en el Estándar de Lenguaje de Marcado Generalizado (SGML).●Puede ser creado y procesado por una gran cantidad de herramientas, desde editores de texto sencillos (Ej. Bloc de notas) hasta herramientas sofisticadas WYSIWYG (Ej. Dreamweaver).

●El Lenguaje Extensible de Marcado de Hipertexto (XHTML) incluye un subconjunto de etiquetas HTML e incluye algunas extensiones, reformuladas en XML en lugar de SGML.●La familia de tipos de documentos XHTML está basada en XML y ha sido desarrollada para funcionar con agentes de usuario (user agents) basados en XML.●El estándar XHTML 1.0 es el sucesor del HTML 4.01.

CSS11, 12

●CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML)●La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.●La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

JavaScript22

●JavaScript (alias JS) es un lenguaje orientado a objetos, liviano, y normalmente conocido como el lenguaje de scripting para páginas Web.●JavaScript es utilizado para crear efectos y aplicaciones web enriquecidas. ●JavaScript está compuesto de diferentes elementos, los más destacados: el lenguaje per se (ECMASciprt) y DOM.●ECMAScript define:

● La sintaxis del lenguaje.● Manejo de errores.● Tipos de datos.● Objetos globales.● Mecanismo de herencia basada en prototipos.● Objetos y funciones predefinid@s.● Soporte de modo estricto.

●DOM define la estructura del documento, arborescente, y cómo interactuar con ésta.

JSON26

●La Notación de Objetos de JavaScript (JSON) es un formato de intercambio de datos. ●Con JSON se pueden representar números, booleanos, strings, conjuntos vacíos (null), vectores y objetos (compuestos de todos los tipos de datos comentados).●Con JSON no se pueden representar -de forma nativa- tipos de datos complejos, como: funciones, expresiones regulares, fechas, entre otros.

Ajax29

●Es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications).●Estas aplicaciones se ejecutan en el cliente, es decir: en el navegador de los usuarios mientras se mantiene comunicación asíncrona con el servidor en segundo plano.●Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.●Básicamente, es una combinación de las siguientes tecnologías:

● XHTML (o HTML)● CSS● DOM (especialmente el objeto XMLHttpRequest).● XML● JavaScript

Ajax30

Ajax30

Entornos de trabajo - Ajax

Ajax puede ser utilizado a través de los siguientes métodos:●Sin entorno de trabajo. Utilizando el objeto XMLHttpRequest31 directamente.●Utilizando un entorno de trabajo. Algunos de los más destacados: Prototype32, jQuery33 y Dojo Toolkit34.

Ejemplos - Ajax●Utilizando el objeto XMLHttpRequest directamente. Clic aquí.●Utilizando Prototype. Clic aquí.●Utilizando jQuery. Clic aquí.●Utilizando Dojo Toolkit. Clic aquí.

REST35

●La Transferencia de Estado Representacional (REST) es una arquitectura de sofwtare para Sistemas Hipermedia distribuidos como la Web.●Fue descrita por primera vez en la tesis doctoral de Roy Fielding, uno de los principales autores de la especificación del protocolo HTTP.●REST utiliza XML, HTTP, JSON, entre otros, de forma simple como formato de intercambio de información, en lugar de otros protocolos de abstracción de datos como SOAP.●Los sistemas que siguen los principios REST suelen llamarse RESTful.●REST se basa en los métodos HTTP para identificar las acciones:

● GET. Para obtener información● PUT. Para agregar información● POST. Para modificar o agregar información● DELETE. Para eliminar información

REST y Java35

●En Java se puede utilizar REST gracias a la especificación JAX-RS de la versión empresarial.●Existen varios entornos de trabajo que facilitan el uso de REST, uno de los más utilizados: Jersey.●Jersey es un proyecto abierto y que además de ofrecer a los desarrolladores una API bastante completa y sencilla de usar, puede ser extendido.

Referencias

Fundamentos

1. Wikipedia. “Web 1.0”. Extraído de: http://en.wikipedia.org/wiki/Web_1.0 el 25 de Noviembre de 2011.

2. Wikipedia. “Web 2.0”. Extraído de: http://en.wikipedia.org/wiki/Web_2.0 el 25 de Noviembre de 2011.

3. Sharma, P. “Core Characteristics of Web 2.0 Services”. Extraído de: http://www.techpluto.com/web-20-services/ el 25 de Noviembre de 2011.

4. Jacobs, S. “Web 2.0 application architecture”. Extraído de: http://www.javascriptworkshop.com/wp-content/uploads/pdf/web20_architecture.pdf el 25 de Noviembre de 2011.

HTML y XHTML

5. W3C. “XHTML2 Working Group Home Page”. Extraído de: http://www.w3.org/MarkUp/ el 25 de Noviembre de 2011.

6. Ragget, D. “Getting started with HTML”. Extraído dehttp://www.w3.org/MarkUp/Guide/ el 25 de Noviembre de 2011.

Referencias

7. Ragget, D. “More advanced features”. Extraído de http://www.w3.org/MarkUp/Guide/Advanced.html el 25 de Noviembre de 2011.

8. HTML Tidy Library Prohect. http://tidy.sourceforge.net/ (Embellecedor y corrector de HTML)

9.Tejedores del Web. “Guía principiante HTML”. Extraído de http://www.tejedoresdelweb.com/w/Gu%C3%ADa_principiante_HTML el 25 de Noviembre de 2011.

10. HTML.net. “Tutorial HTML”. Extraído de http://es.html.net/tutorials/html/ el 25 de Noviembre de 2011.

CCS

11. W3C. “Cascading Style Sheets Home Page”. Extraído de: http://www.w3.org/Style/CSS/ el 25 de Noviembre de 2011.

12. Wikipedia. “Hojas de estilo en cascada”. Extraído de: http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada el 25 de Noviembre de 2011.

Referencias

13. W3C. “Cascading Style Sheets: articles and tutorials”. Extraído de http://www.w3.org/Style/CSS/learning el 25 de Noviembre de 2011.

14. Tejedores del Web. “CCS”. Extraído de http://www.tejedoresdelweb.com/w/CSS el 25 de Noviembre de 2011.

15. HTML.net. “Tutorial CCS”. Extraido de http://es.html.net/tutorials/css/ el 25 de Noviembre de 2011.

XML y XSL

16. W3C Oficina Española. “Guía Breve de Tecnologías XML”. Extraído de http://www.w3c.es/divulgacion/guiasbreves/tecnologiasxml el 25 de Noviembre de 2011.

17. W3C. “Extensible Markup Language (XML)”. Extraído de http://www.w3.org/XML/ el 25 de Noviembre de 2011.

18. W3C. “Extensible Stylesheet Language (XSL)”. Extraído de http://www.w3.org/TR/xsl/ el 25 de Noviembre de 2011.

19. W3Schools. “XLST Tutorial”. Extraído de http://www.w3schools.com/xsl/ el 25 de Noviembre de 2011.

Referencias

20. Mozilla Developer Network. “XSLT”. Extraído de https://developer.mozilla.org/en/XSLT el 25 de Noviembre de 2011.

21. Merelo, J. “Generación de páginas Web usando XSLT y XML”. Extraído de http://geneura.ugr.es/~jmerelo/XSLT/ el 25 de Noviembre de 2011.

JavaScript y JSON

22. Mozilla Developer Network. “JavaScript”. Extraído de https://developer.mozilla.org/en/JavaScript el 25 de Noviembre de 2011.

23. Ecma International. “ECMAScript Language Specification”. Extraído de http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf el 25 de Noviembre de 2011. Edición 5.1 / Junio 2011.

24. W3C. “DOM4”. Extraído de http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html el 25 de Noviembre de 2011. Draft 17.

25. Mozilla Developer Network. “JavaScript Guide”. Extraído de https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide el 25 de Noviembre de 2011.

Referencias

26. Mozilla Developer Network. “JSON”. Extraído de https://developer.mozilla.org/en/JSON el 25 de Noviembre.

27. WebEstilo. “JavaScript”. Extraído de http://www.webestilo.com/javascript/ el 25 de Noviembre de 2011.

28. W3Schools. “JavaScript Tutorial”. Extraído de http://www.w3schools.com/js/ el 25 de Noviembre de 2011.

AJAX

29. Wikipedia. “AJAX”. Extraído de http://es.wikipedia.org/wiki/AJAX el 25 de Noviembre de 2011.

30. Garret, J. “Ajax: A New Approach to Web Applications”. Extraído de http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications el 25 de Noviembre de 2011.

31. W3C. “XMLHttpRequest”. Extraído de http://www.w3.org/TR/XMLHttpRequest/ el 25 de Noviembre de 2011.

Referencias

32. Prototype. “Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications”. Extraído de http://www.prototypejs.org/ el 25 de Noviembre de 2011.

33. jQuery. “jQuery: The Write Less, Do More, Javascript Library”. Extraído de http://jquery.com/ el 25 de Noviembre de 2011.

34. Dojo Toolkit. “Ubeatable JavaScript Tools”. Extraído de http://dojotoolkit.org/ el 25 de Noviembre de 2011.

REST

35. Wikipedia. “Representational State Transfer”. Extraído de http://en.wikipedia.org/wiki/Representational_state_transfer el 30 de Noviembre de 2011.

36. Java Comunity Process. “JSR-000311 JAX-RS: The JavaTM API for RESTful Web Services”. Extraído de http://jcp.org/aboutJava/communityprocess/final/jsr311/index.html el 30 de Noviembre de 2011.

37. Jersey. “Jersey Home Page”. Extraído de http://jersey.java.net/ el 30 de Noviembre de 2011.

Referencias

38. Vogel, L. “REST with Java (JAX-RS) using Jersey – Tutorial”. Extraído de http://www.vogella.de/articles/REST/article.html el 30 de Noviembre de 2011.