LA WEB COMO PLATAFORMA CON Alex Fuentes http://www.jroller.com/afuentes

Agenda Presentador WEB 2.0 , AJAX , RIA,HTML 5 Javascript Engine Browser – Virtual Machine Dojo al rescate Ejemplo I Dojo + Cometd ( Real Time Solutions ) Ejemplo II MVC en el Browser

Presentador

WEB 2.0 , AJAX , RIA,HTML 5

Javascript Engine

Browser – Virtual Machine

Dojo al rescate

Ejemplo I

Dojo + Cometd ( Real Time Solutions )

Ejemplo II

MVC en el Browser

Presentador Ingeniero Eléctrico ( Telecomunicación y Electrónica ) 8 años de Experiencia en el Mundo TI Miembro Activo del Java User Group Chile Taller de Dojo + JEE ( Open Community 2008 ) Taller Introduccion a Groovy ( JugDay 2008 ) Charlas

Ingeniero Eléctrico ( Telecomunicación y Electrónica )

8 años de Experiencia en el Mundo TI

Miembro Activo del Java User Group Chile

Taller de Dojo + JEE ( Open Community 2008 )

Taller Introduccion a Groovy ( JugDay 2008 )

WEB 2.0

WEB 2.0 Aplicaciones que generen colaboración Une distintas fuentes de información Creadas para el usuario final Otra forma de interactuar con el usuario El usuario genera el contenido El usuario es el que crea los datos

Aplicaciones que generen colaboración

Une distintas fuentes de información

Creadas para el usuario final

Otra forma de interactuar con el usuario

El usuario genera el contenido

El usuario es el que crea los datos

AJAX Asynchronous JavaScript and XML.

AJAX Técnica que combina diferentes Tecnologías Permite comunicaciones asíncronas Mejora la interacción con el usuario Tecnologías XHTML CSS DOM ( Document Object Model) XML ( formato Transferencia ) XMLHttpRequest

Técnica que combina diferentes Tecnologías

Permite comunicaciones asíncronas

Mejora la interacción con el usuario

Tecnologías

XHTML

CSS

DOM ( Document Object Model)

XML ( formato Transferencia )

XMLHttpRequest

AJAX

RIA Rich Internet Applications

RIA Aplicaciones Web con el sabor de Aplicaciones Desktop Rich Controles ( Arboles , Menús desplegables , Grid ) Integración con medios ( Audio y Video)

Aplicaciones Web con el sabor de Aplicaciones Desktop

Rich Controles ( Arboles , Menús desplegables , Grid )

Integración con medios ( Audio y Video)

Ejemplos RIA Google Docs Gmail Wave

Google Docs

Gmail

Wave

HTML 5

HTML 5 HTML5 es la quinta versión de HTML Canvas TAG y Scalable Vector Graphics (SVG) Geolocation API HTML 5 Video tag HTML 5 sound tag Web workers HTML 5 WebSockets

HTML5 es la quinta versión de HTML

Canvas TAG y Scalable Vector Graphics (SVG)

Geolocation API

HTML 5 Video tag

HTML 5 sound tag

Web workers

HTML 5 WebSockets

JAVASCRIPT ENGINE

JavaScript Engine SquirrelFish - Safary StartMoonkey - Firefox V8 - Chrome Futhark - Opera IE Jscript -IE

SquirrelFish - Safary

StartMoonkey - Firefox

V8 - Chrome

Futhark - Opera

IE Jscript -IE

NAVEGADORES

Browser Minimalistas Simples

Minimalistas

Simples

BROWSER LA NUEVA VIRTUAL MACHINE

AL RESCATE

Que es Dojo Toolkit ? Proyecto Open Source nace el 2004 ( AFL y BSD ) Librería modular construida en JavaScript

Proyecto Open Source nace el 2004 ( AFL y BSD )

Librería modular construida en JavaScript

Porque nace Dojo Toolkit ? Para resolver las incompatibilidades de los Navegadores Aumenta la demanda por aplicaciones RIA Incompatibilidades en el cumplimiento de los estandares por parte de los Navegadores Hacer mas facil el desarrollo de aplicaciones mas complejas

Para resolver las incompatibilidades de los Navegadores

Aumenta la demanda por aplicaciones RIA

Incompatibilidades en el cumplimiento de los estandares por parte de los Navegadores

Hacer mas facil el desarrollo de aplicaciones mas complejas

Características Dojo Toolkit Construido por paquetes que son utilizados ondemand Manipulacion de DOM ( Document Object Model ) Efectos ( Fade In , Fade Out ) Manejo de Ajax y Cometd Manejo de Eventos Drag and Drop Componedentes Reutilizables ( dijit = dojo widget ) API Draw 2D and 3D ( gfx ) Graficos ( pie , barra , plot , etc ) Util library

Construido por paquetes que son utilizados ondemand

Manipulacion de DOM ( Document Object Model )

Efectos ( Fade In , Fade Out )

Manejo de Ajax y Cometd

Manejo de Eventos

Drag and Drop

Componedentes Reutilizables ( dijit = dojo widget )

API Draw 2D and 3D ( gfx )

Graficos ( pie , barra , plot , etc )

Util library

Estructura de Dojo Toolkit Dojo : Core de framework Dijit : Todos los componentes reutilizables que permiten la interacción con el usuario Dojox: Dojo Experimental y de otros proveedores Util : Librerias utilitarias del Framework

Dojo : Core de framework

Dijit : Todos los componentes reutilizables que permiten la interacción con el usuario

Dojox: Dojo Experimental y de otros proveedores

Util : Librerias utilitarias del Framework

Funcionalidades de Dojo Toolkit Sistema de Paquetes dojo Dojo esta organizado en paquetes igual como esta estruturado java Package System/Bootstrap Language Utilities Event System Widget System AJAX Utilities Custom Widget

Sistema de Paquetes

Dojo API dojo.require("package.*"); Similar al keyword import de java Carga dinamica de modulos dojo.require('modulename') Carga las dependencias necesarias de cada script Previene la carga recursiva de script Permite la carga de modulos en cross-domain Objeto dojo es cargado en forma automatica XmlHttpRequests Sincronicos dojo.require("package.*");

dojo.require("package.*");

Similar al keyword import de java

Carga dinamica de modulos dojo.require('modulename')

Carga las dependencias necesarias de cada script

Previene la carga recursiva de script

Permite la carga de modulos en cross-domain

Objeto dojo es cargado en forma automatica

XmlHttpRequests Sincronicos

dojo.require("package.*");

Dojo API dojo dojo.byId() : Funcion que retorna el nodo del objeto DOM. dojo.body() : Me retorno el objeto body del documento actual dojo.fadeIn() : Permite la animacion dojo.xhr() : Permite el soporte para la comunicacion AJAX dojo.xhrGet() : Envia un requerimiento HTTP GET al server dojo.xhrPost() : Envia un requerimiento HTTP POST al server dojo.query : seleccion de conjunto de Nodos dojo.place : colocar nodos dentro del DOM dojo.declare: Declara nuevos componentes dojo.extend : Permite extender un componente ya creado dojo.destroy : Permite la destruccion de Nodos dojo.*

dojo

dojo.byId() : Funcion que retorna el nodo del objeto DOM.

dojo.body() : Me retorno el objeto body del documento actual

dojo.fadeIn() : Permite la animacion

dojo.xhr() : Permite el soporte para la comunicacion AJAX

dojo.xhrGet() : Envia un requerimiento HTTP GET al server

dojo.xhrPost() : Envia un requerimiento HTTP POST al server

dojo.query : seleccion de conjunto de Nodos

dojo.place : colocar nodos dentro del DOM

dojo.declare: Declara nuevos componentes

dojo.extend : Permite extender un componente ya creado

dojo.destroy : Permite la destruccion de Nodos

dojo.*

Integrando Dojo <html> ... <script type=&quot;text/javascript&quot; src=&quot;http://localhost:8080/dojo-release-1.2.3/dojo/dojo.js&quot; djConfig=&quot;isDebug: false, parseOnLoad: true&quot; ></script> </html>

Integrando Dojo Parametros variable dfConfig ParserOnLoad : variable que permite el parser del DOM Tree , para utilizar el atributo dojoType, para la definicion de Dijit isDebug : Activa el logging en la aplicacion ( FireBug )

Parametros variable dfConfig

ParserOnLoad : variable que permite el parser del DOM Tree , para utilizar el atributo dojoType, para la definicion de Dijit

isDebug : Activa el logging en la aplicacion ( FireBug )

Themes Dojo <html> ... <style type=&quot;text/css&quot;> @import &quot;http://localhost:8080/dojo-release-1.3.2/dijit/themes/tundra/tundra.css&quot;; @import &quot;http://localhost:8080/dojo-release-1.3.2/dojo/resources/dojo.css&quot;; </style> <body class=&quot;tundra&quot; > .....

Dojo upload <script> dojo.addOnLoad(function() { dojo.console(“ready”); }); </script>

Dijit

Dijit Declarados <script type=&quot;text/javascript&quot;> dojo.require(&quot;dijit.dijit&quot;); // optimize: load dijit layer dojo.require(&quot;dijit.form.Button&quot;); dojo.require(&quot;dojo.parser&quot;); </script> <body> <button id=&quot;1467&quot; dojoType=&quot;dijit.form.Button&quot; onClick='console.log(&quot;clicked simple&quot;)'> View </button> </body>

</body>

Dijit Programados <script type=&quot;text/javascript&quot;> dojo.require(&quot;dijit.dijit&quot;); // optimize: load dijit layer dojo.require(&quot;dijit.form.Button&quot;); dojo.require(&quot;dojo.parser&quot;); var widget2 = new dijit.form.Button({ label: &quot;hello!&quot;, name: &quot;programmatic&quot; }); widget2.placeAt(&quot;buttonContainer&quot;); // place in page </script>

Custom dijit dojo.provide(&quot;school.Clock&quot;); .... dojo.declare(&quot;school.Clock&quot;, [dijit._Widget, dijit._Templated], { templateString: &quot;<div ><span dojoAttachPoint=&quot;clock&quot;></span></div>&quot;, postCreate : function() { this._update(); }, _update : function(){ var timeVal=dojo.date.locale.format(new Date(), {selector:'time', timePattern: 'HH:mm:ss'}); this.clock.innerHTML = timeVal setTimeout(dojo.hitch(this, &quot;_update&quot;),1000) } } // end school.Clock );

Dojo gfx

DOJO GAME Ejemplo I

COMET + DOJO ( Real Time Solutions )

( Real Time Solutions )

COMET Técnica de Long Pooling Permite al servidor enviar información al cliente Utilizada por Gmail , Facebook para las funcionalidades de chat.

Técnica de Long Pooling

Permite al servidor enviar información al cliente

Utilizada por Gmail , Facebook para las funcionalidades de chat.

COMET

Bayeux Protocol Creado para soportar 2 flujos de interacción Server to Client Client to server Client to Client Protocolo para transportar mensajes asíncronos sobre HTTP Utiliza JSON para el intercambio de Mensajes

Creado para soportar 2 flujos de interacción

Server to Client

Client to server

Client to Client

Protocolo para transportar mensajes asíncronos sobre

HTTP

Utiliza JSON para el intercambio de Mensajes

Dojo + Bayeux Protocol + Jetty dojo.comet.init dojo.comet.subcriber dojo.comet.publish

RICH CONSOLE Ejemplo II

MVC en el Browser Client Side – Server Side

DOJO makes Javascript OOP possible

PREGUNTAS

RECURSOS Dojo Toolkit http://www.dojotoolkit.com/ Dojo Campus http://www.dojocampus.org/ Noticias de mundo ajax http://www.ajaxian.com Sitepen http://www.sitepen.com

Dojo Toolkit

http://www.dojotoolkit.com/

Dojo Campus

http://www.dojocampus.org/

Noticias de mundo ajax

http://www.ajaxian.com

Sitepen

http://www.sitepen.com