5. 5
Introducción al fenómeno “Web 2.0”
Termino acuñado por Dale Dougherty de O’Really Media en un “brainstorming”
para preparar una presentación.
Pretende hacer énfasis en el desarrollo y avance sufrido por la tecnología de
programación Web, que está permitiendo que las aplicaciones Web estén
sustituyendo a las aplicaciones de escritorio en muchos usos.
Desde un punto de vista social, se considera que las aplicaciones “Web 2.0”
serían aquellas que, dada su capacidad de interacción, permiten una mayor
participación de los usuarios y animan a la colaboración entre ellos, y por tanto
a la creación de lo que se llaman “Aplicaciones Sociales”.
En esta presentación se abordarán este tipo de aplicaciones desde el punto de
vista de la tecnología empleada y no por su funcionalidad o utilidad de cara a la
sociedad.
En definitiva los dos puntos de vista convergen en que esta nueva generación
de aplicaciones se caracterizan por mejorar y potenciar lo que se denomina
como “User Experience”
¿Qué es la “Web 2.0”?
6. 6
Introducción al fenómeno “Web 2.0”
Todas se basan en hacer que el navegador albergue la capa cliente como
una aplicación en si misma, también conocida como RIA (Rich Internet
Application), y no sólo como un mero escaparate de contenido que se
muestra (capa de presentación).
Principales tecnologías responsables
Java Applet Flex / Laszlo
Ejemplo: ThinkFree Ejemplo: LzPix / LaszloMail
7. 7
Introducción al fenómeno “Web 2.0”
Google:
Google Maps. GMail, Google Calendar, Writely, Google Spreadsheet, Google
Suggest
Otros aplicaciones de referencia:
Netvibes: Pagina de inicio.
Blinklist: Aplicación de gestión de marcadores (bookmarks) sociales.
Ejemplos de aplicaciones “Web 2.0” desarrolladas con Ajax
Ejemplos de aplicaciones “Web 2.0”
La cantidad de aplicaciones disponible es ingente, tanto de forma gratuita
como de pago y como muestra el siguiente link:
415 aplicaciones GRATUITAS Web 2.0
9. 9
Fundamentos técnicos de la tecnología AJAX
Son la siglas de Asynchronous Javascript And XML
En realidad AJAX es un concepto que engloba un conjunto de técnicas
tradicionales en el mundo de la programación Eeb, pero utilizadas de una
forma distinta.
Estas tecnologías son Javascript, DOM (Document Object Model) y CSS
(Cascading Style Sheets).
La combinación de estas tres tecnologías se conocía con el nombre de DHTML
(Dynamic HTML).
El objeto XMLHttpRequest es la piedra angular donde convergen todas estas
técnicas para dar lugar a lo que hoy conocemos como AJAX.
Fue creado por Microsoft para lo que denominaban “Remote Scripting” y fue
incluido en su librería MSXML.
El resto de navegadores han incorporado este objeto en el motor Javascript,
convirtiéndolo en un estándar de facto.
Actualmente se encuentra en proceso de estandarización por el W3C.
¿Qué es AJAX?
10. 10
Fundamentos técnicos de la tecnología AJAX
Introduce el modelo de aplicación Web asíncrona.
¿Qué es AJAX?
11. 11
Fundamentos técnicos de la tecnología AJAX
Ligero
No hay problemas con clientes que no sean navegadores, como robots de
búsquedas.
No depende de código propietario, ni plug-ins.
Su naturaleza abierta hace que la comunidad de desarrolladores Ajax crezca
muy deprisa y por tanto que la oferta de librerías sea enorme y que su
evolución sea igual de rápida.
Los desarrolladores pueden reutilizar todos sus conocimientos previos en
programación Web.
Características positivas:
12. 12
Fundamentos técnicos de la tecnología AJAX
Tiene restricciones en lo que se refiere a conceptos como: capacidades
multimedia, almacenamiento local de datos, gráficos en tiempo real e
interacción con hardware como impresoras o webcams.
No permite peticiones del tipo Multipart-request para realizar uploads.
Los efectos visuales no son tan refinados y fluidos como los que se logran
con gráficos vectoriales.
Las aplicaciones AJAX pueden llegar a ser difíciles de depurar y probar.
La falta de estandarización.
El botón “backward” de los navegadores pierde el sentido, ya que este hace
referencia a la última petición no-ajax realizada.
Es fácil abusar de su uso y saturar el servidor de peticiones.
Otras que no lo son tanto:
13. 13
Fundamentos técnicos de la tecnología AJAX
Mozilla Firefox 1.0 and above.
Netscape version 7.1 and above
Apple Safari 1.2 and above.
Microsoft Internet Exporer 5 and above.
Konqueror.
Opera 7.6 and above
Navegadores que soportan el objeto XMLHttpRequest:
14. 14
Fundamentos técnicos de la tecnología AJAX
Este objeto es el que permite solicitar información de forma asíncrona a un
servidor usando para ello el protocolo HTTP. Actualmente, los navegadores
(excepto Internet Explorer que utiliza el método original) incorporan este
objeto como parte del propio motor.
En Internet Explorer, el acceso al objeto se realiza como a cualquier otra
biblioteca: mediante la creación de un objeto ActiveX. El resto de los
navegadores sin soporte de ActiveX incorporan el objeto directamente en la
API.
Esta diferencia obliga a realizar una pequeña comprobación para crear el
objeto:
El objeto XMLHttpRequest:
// ¿ Existe en la API ?
if (window.XMLHttpRequest) {
// Usar API
http = new XMLHttpRequest();
} else {
// Usar ActiveX (IE)
http = new ActiveXObject("Microsoft.XMLHTTP");
}
15. 15
Fundamentos técnicos de la tecnología AJAX
Funciones básicas:
open(método, URL, [asincrono], [usuario], [clave]): Permite abrir un canal de
comunicación con un servidor.
send(datos): Realiza una petición sobre una conexión ya abierta. Si el parámetro
datos no es nulo, se enviará esa información mediante un método POST al
servidor.
abort(): Permite cancelar una petición previa.
Respuestas:
responseText: Información devuelta por el servidor. Se trata del texto que ha
retornado el servidor.
responseXML: Es una función equivalente a la anterior pero devuelve un
documento DOM. Sólo es válida si la respuesta es un documento XML
status: Respuesta del servidor (código HTTP)
statusText: Respuesta del servidor asociada al status (mensaje de texto)
onreadystatechange: Sirve para indicar la función (callback) a la que hay que
llamar cuando finalice la descarga de una petición asíncrona (cierto en el tercer
parámetro de open).
El objeto XMLHttpRequest:
16. 16
Fundamentos técnicos de la tecnología AJAX
Estados de la petición (Ciclo de vida):
0 - UNINITIALIZED
1 - LOADING
2 - LOADED
3 - INTERACTIVE
4 - COMPLETE
Una vez creado el objeto su uso es sencillo:
El objeto XMLHttpRequest:
// Crear el objeto...
http = ...
// Registrar la función de finalización
http.onreadystatechange = targetFunction;
// Abrir la conexión a la página de forma asíncrona
http.open("GET", "http://dirección de datos", true);
// Enviar la petición sin datos adicionales
http.send(null);
17. 17
Fundamentos técnicos de la tecnología AJAX
En AJAX las peticiones se realizan de forma asíncrona para no bloquear la
interfaz. Cuando se finaliza la descarga de la información, la función
targetFunction es directamente invocada.
El objeto XMLHttpRequest:
function targetFunction() {
// Se comprueba el fin de la carga
if ( http.readyState == 4 ) {
// Descarga correcta (código HTTP 200)
if (http.status == 200) {
// Proceso de datos
} else {
// Ha fallado la descarga:
// mostrar mensaje de error
// (http.statusText)
} // if
} // if
}
20. 20
“Old technologies, new tricks”
Los Frameworks Javascript te hacen:
Escribir menos código.
Hacer código más elegante.
Depurar errores de forma más rápida y sencilla.
Sufrir menos y odiar menos programar en Javascript.
Los Frameworks Javascript permiten:
Concentrarte en tu aplicación
y no en las particularidades o bugs de los navegadores.
En definitiva son esenciales para realizar aplicaciones “Cross-browser”
Frameworks Javascript
21. 21
“Old technologies, new tricks”
Prototype es una librería Javascript escrita por Sam Stephenson.
Proporciona un framework javascript que se ha convertido en el código
base de la capa cliente en cualquier desarrollo web.
Prototype
Funciones de utilidad.
Ajax Object.
Extiende la funcionalidad de los tipos de objetos nativos (String p.e.).
Transparencia en el manejo de eventos.
Muchas cosas más
y …
Una documentación muy pobre.
Características Prototype
26. 26
“Old technologies, new tricks”
Lenguaje formal usado para definir la presentación (“Look & Feel”)de un
documento HTML.
Actualmente son tan potentes que también permiten definir la disposición
(“Layout”) de los distintos elementos que componen la página (Ver
ZenGarden p.e.).
Para más información, esta es una web muy recomendable:
http://meyerweb.com/eric/css/
CSS (Cascading Style Sheets)
No usar “display:none” en un fichero css externo.
Impediría que no podríamos cambiar su valor de forma dinámica y
siempre se quedaría a “none”.
Lo mejor es usar el atributo style en su lugar:
Regla de oro usando CSS para aplicaciones Web 2.0
…
<div style=“display: none;”/>…</div>
…
27. 27
“Old technologies, new tricks”
Es la forma de representar un documento HTML y
mostrarlo al motor Javascript de nuestro navegador.
Actualmente está estandarizado por el W3C y lo
soportan todos los navegadores.
Los elementos de la página se representan en forma
de árbol.
Para garantizar que todos los navegadores generan el
mismo árbol DOM es muy recomendable programar las
páginas en XHTML
DOM (Document Object Model)
<?xml version="1.0" encoding=“ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
…
Importante asignar un ID unívoco a los elementos que
queramos manejar.
28. 28
“Old technologies, new tricks”
Javascript proporciona una serie de métodos para interactuar con el árbol
DOM:
document.getElementById(“id”): Devuelve la referencia a un nodo
document.getElementsByTagName(“elementType”): Devuelve las
referencias a todos los elementos de la página cuya etiqueta se corresponda
con el argumento.
document.createElement(“elementType”): crea un nuevo elemento en el
documento y del tipo que le especifiquemos.
document.createTextNode(“texto"): crea un elemento de texto.
También proporciona métodos para manejar cada unos de los elementos
del árbol:
element.childNodes(): devuelve los elementos hijos.
element.appendChild(childElement): añade un elemento al padre.
Otros…
Usando Javascript para interactuar con el árbol DOM
29. 29
“Old technologies, new tricks”
Ejemplo
Obtiene un elemento por ID
Obtiene los hijos
Crea un elemento de tipo DIV
Crea un elemento de tipo texto
Añade el elemento de tipo DIV
Añade un elemento de tipo texto
30. 30
“Old technologies, new tricks”
Una es document.getElementById(“elementId”) o en prototype $
(elementId), para obtener el elemento que vamos a manejar.
Función element.innerHTML():
Función muy potente que permite asignar a un elemento de una forma muy
simple, nuevo contenido HTML y regenerar el árbol DOM.
No está estandarizada por el W3C, pero es un estándar de facto.
Rendimiento muchísimo mayor que usar los métodos de DOM.
En el ejemplo anterior en elemento <div> y el nodo de texto anidado,
puede añadirse con una sola instrucción:
Funciones fundamentales para manejar DOM
…
function addListItemUsingInnerHTML(el,text){
el.innerHTML+="<div class='programmed'>"+text+"</div>";
}
…
Muy recomendable generar HTML en servidor (como siempre) y actualizar el
árbol DOM utilizando esta función.
31. 31
“Old technologies, new tricks”
Javascript tiene más capacidades de Orientación a objetos de las que
suelen conocer y usar.
Json es una manera de declarar un objeto en Javascript.
Ejemplo:
JSON (Javascript Object Notation)
…
var myPet = {
color: 'black',
legCount: 4,
communicate: function(repeatCount){
for(i=0;i<repeatCount;i++)
alert('Woof!');
}
};
…
En el ejemplo se declaran dos variables y un método.
32. 32
“Old technologies, new tricks”
¿Cómo se usa?
JSON (Javascript Object Notation)
…
alert('my pet is ' + myPet.color);
alert('my pet has ' + myPet.legCount + ' legs');
//if you are a dog, bark three times:
myPet.communicate(3);
…
Más información en:
http://www.sergiopereira.com/articles/advjs.html
34. 34
Recomendaciones
Permiten al usuario conocer el estado de la conexión, ya que de otra
forma el usuario no sabe si la petición se ha realizado o no.
El criterio para que indicador mostrar se base en las variables
“readyState” y “status” del objeto XMLHttpRequest.
Usando prototype sería algo tan simple como:
En la pagina HTML:
En Javascript, para una petición concreta:
Proporcionar indicadores de actividad
…
new AjaxRequest(‘url’,{
onLoading: function() {$(‘indicator’).show();},
onComplete: function() {$(‘indicator’).hide();}
});
…
…
<img id=“indicator” src=“/img/indicator.gif”/>
…
35. 35
Recomendaciones
En Javascript, para todas las peticiones:
Si necesitas generar un indicador de actividad:
AjaxLoad.info
Proporcionar indicadores de actividad
…
Ajax.Responders.register({
onCreate: function() {
if($('indicator') && AJax.activeRequestCount > 0) {
Effect.Appear('indicator',{duration: 0.5});
}
},
onComplete: function() {
if($('indicator') && AJax.activeRequestCount == 0) {
Effect.Fade('indicator',{duration: 0.5});
}
}
});
…
36. 36
Recomendaciones
Si funciona en este navegador te aseguras de cumplir los estándares.
Para lo que no funcione en otros, habrá que desarrollar un “workaround”
(parche).
Durante el desarrollo usar Firefox
FIrebug
Web developer: Barra de herramientas para el desarrollador Web.
Venkman Javascript Debugger
Live HTTP Headers
Tamper Data: Otra herramienta para las cabeceras.
Usar también las extensiones de Firefox
37. 37
Recomendaciones
Incorpora un Javascript debugger.
Barra de estado con icono que informo si hay algún error en la página.
Una consola que muestra errores Javascript y CSS.
Habilita la posibilidad de introducir mensajes de log en nuestro código
Javascript, para que aparezcan en la consola. Adiós a los “alert()”!!;
Una linea de comandos Javascript. Ya no hace falta usar la barra de
URL.
Permite espiar el tráfico XMLHttpRequest.
Inspeccionar HTML, eventos, layout y DOM.
Mozilla FireBug Debugger
38. 38
Recomendaciones
Herramientas de Internet Explorar para desarrollar:
Microsoft Script Debugger.
Internet Explorer Developer Toolbar.
Herramientas de Safari para desarrollar:
Safari Web Inspector
Probar después para el resto de navegadores que hay que soportar
40. 40
Frameworks AJAX para Java
Herramientas y Framework de AJAX
Librerías Javascript del lado cliente
Remoting via proxy
AJAX-enabled JSF components
Wrapper
Traductor de Java a Javascript/HTML
Frameworks de aplicaciones Web con extensiones AJAX
Y otros más.
42. 42
Frameworks AJAX
Remoting Abstraction Layer:
Oculta el manejo del objeto XMLHttpRequest e IFrames
Proxy:
Maneja el lado cliente del RPC (Remote Procedure Call) como comunicación.
Widgets and Components
Proporciona widgets de UI de uso inmediato como calendario, botones, etc
Javascript Event Handler
Proporciona lógica del lado cliente
Capas de la arquitectura (Lado Cliente)
43. 43
Frameworks AJAX
Server side technology agnostic
La tecnología del lado servidor puede ser Java EE, .Net, PHP, Ruby on Rails,
etc.
Debe ser accesible en tiempo de ejecución tanto localmente como a
través de URL
No se genera código Javascript dinámico
Puedes usarlas combinadas en una única aplicación
Puede que quieras usar widgtes de múltiples librerías.
Características de las librerías Javascript del lado cliente
44. 44
Frameworks AJAX
Maneja comunicación asíncrona remota (remoting)
Oculta el nivel bajo de la operación XMLHttpRequest
Maneja incompatibilidades de navegadores
No tienes porqué llenar el código de instrucciones if/else
Usa IFrame si el navegador no soporta XMLHttpRequest
Proporciona botones de navegación
Botones de adelante y atrás
Índices
Razones técnicas para usar librerías JavaScript del lado cliente
45. 45
Frameworks AJAX
Proporciona widgets listas para usar
Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc.
Proporciona utilidades DOM listas para usar
Son más sencillas de usar que las originales DOM APIs
Proporciona utilidades JavaScript
Ejemplo: Manejo de tablas, Timer, etc
Proporciona enlaces de manejo de errores
Más fácil de añadir manejadores de errores
Proporciona un manejo de errores más flexible
DOM node based, Function call based, AOP style
Razones técnicas para usar librerías JavaScript del lado cliente
46. 46
Frameworks AJAX
Proporciona características avanzadas de UI
Animación
Drag and drop
Fade out and Fade in
…
Generalmente anima a la programación OO
Te ayuda a escribir un código Javascript mejor
Razones técnicas para usar librerías JavaScript del lado cliente
47. 47
Frameworks AJAX
Comprobado en el mercado
Generalmente es de mayor calidad que el tuyo propio
Establecido en la comunidad de desarrolladores y usuarios
La comunidad sigue mejorando/añadiendo características
Es fácil obtener ayuda de los foros de la comunidad
Fácil de usar
Sólo debes tenerlas en el directorio raíz de tu aplicación Web o facilitar una
URL
Tool support
Los IDE comienzan a integrarlas.
Razones económicas para usar librerías Javascript del lado cliente
48. 48
Frameworks AJAX
DOJO Toolkit
Tiene el apoyo de las mejores empresas (Sun, IBM)
http://dojotoolkit.com/
Prototype
Usada por otras librerías
http://prototype.conio.net/
Librerías JavaScript de lado cliente
49. 49
Frameworks AJAX
Script.aculo.us
Construida con Prototype
Conjunto de efectos visuales y controles (Drag & Drop).
http://script.aculo.us/
Rico
Construdia con Prototype
Ricos componentes AJAX y efectos
http://openrico.org/
DHTML Goodies
Múltiples scripts DHTML y AJAX
http://www.dhtmlgoodies.com/
Librerías JavaScript de lado cliente
50. 50
Frameworks AJAX
Pros
Puedes usarlas con cualquier tecnología del lado servidor
Widgets de múltiples fuentes
Contras
El desarrollador aún tiene que aprender JavaScript
Cada librería usa una sintaxis diferente
Cuando usarlas
Cuando necesitas trabajar con múltiples tecnologías del lado servidor
Cuando quieres usar widgets de múltiples fuentes (jMaki ayudará aquí
asumiendo que usas Java EE)
Pros y contras
53. 53
Frameworks AJAX
Similar a los esquemas generales de comunicación RPC
Permite RMI (Remote Method Invocation) como sintaxis del código
Javascript del lado cliente. (RMI like).
El framework genera el client stub (Proxy), que es código Javascript y el
código de servidor.
El framework maneja la organización de parámetros y la devolución de
valores
Características del Framework “Remoting via Proxy”
54. 54
Frameworks AJAX
Direct Web Remoting (DWR)
Diseñado específicamente para las aplicaciones backend de Java
http://getahead.ltd.uk/dwr
JSON-RPC
Lightweight remote procedure call protocol similar a XML-RPC
http://json-rpc.org/
Hay implementaciones de lenguaje específico
JSON-RPC-Java
– http://oss.metaparadigm.com/jsonrpc/
Implementaciones de Remoting via Proxy
55. 55
Frameworks AJAX
Pro's
Permite exponer la interfaz de tu lógica de negocio a Ajaz con un mínimo
esfuerzo
Te permite usar una sintaxis parecida a RMI en el código Javascript.
Con's
Los Hackers pueden ver que métodos de tu sistema que están disponibles.
Custom converters (mashaller and unmarshaller) han de ser creados para
traducir a objetos Java.
Cuando usarlo
Cuando quieres mostrar la capa de lógica de negocio a Ajax con un mínimo
esfuerzo.
Pro's And Con's
56. 56
Frameworks AJAX
AJAX-enabled JSF components eliminan toda la complejidad de la
programación AJAX
El desarrollador no necesita saber Javascript.
Son los desarrolladores de componentes los que hacen todo el trabajo…que
no es poco.
Componentes JSF son reusables
La comunidad JSF esta desarrollando cada vez más componentes.
AJAX-enabled JSF Components
58. 58
Frameworks AJAX
Pro's
Poder usar 3rd-party AJAX-enabled JSF components.
Con's
Construir tus propios AJAX-enabled JSF no es una tarea trivial.
Falta de madurez en la plataforma.
Cuando usarlos
Cuando quieres construir aplicaciones JSF con AJAX
Pro's And Con's
59. 59
Frameworks AJAX
Blueprint AJAX-enabled JSF components
http://developers.sun.com/ajax/componentscatalog.jsp
Ajax4jsf
http://livedemo.exadel.com/vcpDemo/demo.jsf (commercial version based on
open source ajax4jsf)
ICEFaces
http://www.icesoft.com/products/demos_icefaces.html
Running Demos de varias implementaciones JSF/AJAXRunning Demos de varias implementaciones JSF/AJAX
60. 60
Frameworks AJAX
Javascript Wrapper framework para la plataforma Java
The name, jMaki, was derived from "j," for Java, and "Maki," a Japanese word
for wrap.
Orientado a componente o widget.
Permite usar los widgets que proporcionan otros frameworks o toolkits
AJAX usando JSP y JSF tags.
jMaki?
61. 61
Frameworks AJAX
Es un framework que proporciona un wrapper que NO está orientado a
componente, si no a Zonas.
El wrapper toma la forma de un Filtro.
Es el menos intrusivo.
Se integra tanto con JSP como JSF.
El código Javascript necesario es ínfimo.
El desarrollador sólo tiene que separar las página en las diferentes zonas
AJAX que necesite y AjaxAnywhere se encarga de refrescar las zonas que
se le indique de forma programática, bien en el lado del cliente como en el
lado del servidor.
Es la única que realmente es capa de “AJAXizar” cualquier aplicación
JavaEE existente sin que sea un proceso traumático.
AjaxAnywhere
63. 63
Frameworks AJAX
Desarrolla y depura aplicicones AJAX usando tu IDE habitual.
Cuando despliegas tu aplicación, el compilador GWT traduce el código
Java a código Javascript y HTML.
Java Code To JavaScript/HTML Translator: GWTJava Code To JavaScript/HTML Translator: GWT
64. 64
Frameworks AJAX
Pro's
No necesitas aprender Javascript.
Es de Google (Good momentum + Good document + Good tutorials +
Comprehensive)
Con's
Pierdes el control del código que se genera, pero lo mismo pasa con los
componentes JSF, los tags JSP y los frameworks “Remoting via Proxy”.
Cuando usarlo
Muy recomendable cuando el desarrollador tiene experiencia programando
Swing o Swt.
Pro's And Con's