Upload
camposer
View
333
Download
0
Embed Size (px)
Citation preview
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.