LA WEB COMO  PLATAFORMA CON Alex Fuentes http://www.jroller.com/afuentes
Agenda <ul><li>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 </li></ul>
Presentador <ul><li>Ingeniero Eléctrico ( Telecomunicación y Electrónica )
8 años de Experiencia en el Mundo TI
Miembro Activo del Java User Group Chile </li></ul><ul><li>Taller  de Dojo + JEE ( Open Community 2008 )
Taller  Introduccion a Groovy ( JugDay 2008 ) </li></ul>Charlas
WEB 2.0
WEB 2.0 <ul><li>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  </li></ul>
AJAX  Asynchronous JavaScript and XML.
AJAX <ul><li>Técnica que combina diferentes Tecnologías
Permite comunicaciones asíncronas
Mejora la interacción con el usuario
Tecnologías </li><ul><li>XHTML
CSS
DOM ( Document Object Model)
XML  ( formato Transferencia )
XMLHttpRequest  </li></ul></ul>
AJAX
RIA Rich Internet Applications
RIA <ul><li>Aplicaciones Web con el sabor de Aplicaciones Desktop
Rich Controles ( Arboles , Menús desplegables , Grid )
Integración con medios ( Audio y Video) </li></ul>
Ejemplos RIA <ul><li>Google Docs
Gmail
Wave </li></ul>
HTML 5
HTML 5 <ul><li>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 </li></ul>
JAVASCRIPT ENGINE
JavaScript Engine <ul><li>SquirrelFish  - Safary
Upcoming SlideShare
Loading in...5
×

La web como Plataforma con Dojo Toolkit

7,851

Published on

Presenta una visión actual del fenómeno web y las tendencias de los principales borwser del mercado y la industria. Detalla los desafíos del desarrollo de aplicaciones RIA y como Dojo Toolkit permite la creación de aplicaciones RIA de manera fácil y ágil.. Además muestra como Comet, permite el desarrollo de soluciones Real Time sobre la Web.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,851
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
171
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Presentacion
  • La web como Plataforma con Dojo Toolkit

    1. 1. LA WEB COMO PLATAFORMA CON Alex Fuentes http://www.jroller.com/afuentes
    2. 2. Agenda <ul><li>Presentador
    3. 3. WEB 2.0 , AJAX , RIA,HTML 5
    4. 4. Javascript Engine
    5. 5. Browser – Virtual Machine
    6. 6. Dojo al rescate
    7. 7. Ejemplo I
    8. 8. Dojo + Cometd ( Real Time Solutions )
    9. 9. Ejemplo II
    10. 10. MVC en el Browser </li></ul>
    11. 11. Presentador <ul><li>Ingeniero Eléctrico ( Telecomunicación y Electrónica )
    12. 12. 8 años de Experiencia en el Mundo TI
    13. 13. Miembro Activo del Java User Group Chile </li></ul><ul><li>Taller de Dojo + JEE ( Open Community 2008 )
    14. 14. Taller Introduccion a Groovy ( JugDay 2008 ) </li></ul>Charlas
    15. 15. WEB 2.0
    16. 16. WEB 2.0 <ul><li>Aplicaciones que generen colaboración
    17. 17. Une distintas fuentes de información
    18. 18. Creadas para el usuario final
    19. 19. Otra forma de interactuar con el usuario
    20. 20. El usuario genera el contenido
    21. 21. El usuario es el que crea los datos </li></ul>
    22. 22. AJAX Asynchronous JavaScript and XML.
    23. 23. AJAX <ul><li>Técnica que combina diferentes Tecnologías
    24. 24. Permite comunicaciones asíncronas
    25. 25. Mejora la interacción con el usuario
    26. 26. Tecnologías </li><ul><li>XHTML
    27. 27. CSS
    28. 28. DOM ( Document Object Model)
    29. 29. XML ( formato Transferencia )
    30. 30. XMLHttpRequest </li></ul></ul>
    31. 31. AJAX
    32. 32. RIA Rich Internet Applications
    33. 33. RIA <ul><li>Aplicaciones Web con el sabor de Aplicaciones Desktop
    34. 34. Rich Controles ( Arboles , Menús desplegables , Grid )
    35. 35. Integración con medios ( Audio y Video) </li></ul>
    36. 36. Ejemplos RIA <ul><li>Google Docs
    37. 37. Gmail
    38. 38. Wave </li></ul>
    39. 39. HTML 5
    40. 40. HTML 5 <ul><li>HTML5 es la quinta versión de HTML
    41. 41. Canvas TAG y Scalable Vector Graphics (SVG)
    42. 42. Geolocation API
    43. 43. HTML 5 Video tag
    44. 44. HTML 5 sound tag
    45. 45. Web workers
    46. 46. HTML 5 WebSockets </li></ul>
    47. 47. JAVASCRIPT ENGINE
    48. 48. JavaScript Engine <ul><li>SquirrelFish - Safary
    49. 49. StartMoonkey - Firefox
    50. 50. V8 - Chrome
    51. 51. Futhark - Opera
    52. 52. IE Jscript -IE </li></ul>
    53. 53. NAVEGADORES
    54. 56. Browser <ul><li>Minimalistas
    55. 57. Simples </li></ul>
    56. 58. BROWSER LA NUEVA VIRTUAL MACHINE
    57. 59. AL RESCATE
    58. 60. Que es Dojo Toolkit ? <ul><li>Proyecto Open Source nace el 2004 ( AFL y BSD )
    59. 61. Librería modular construida en JavaScript </li></ul>
    60. 62. Porque nace Dojo Toolkit ? <ul><li>Para resolver las incompatibilidades de los Navegadores
    61. 63. Aumenta la demanda por aplicaciones RIA
    62. 64. Incompatibilidades en el cumplimiento de los estandares por parte de los Navegadores
    63. 65. Hacer mas facil el desarrollo de aplicaciones mas complejas </li></ul>
    64. 66. Características Dojo Toolkit <ul><li>Construido por paquetes que son utilizados ondemand
    65. 67. Manipulacion de DOM ( Document Object Model )
    66. 68. Efectos ( Fade In , Fade Out )
    67. 69. Manejo de Ajax y Cometd
    68. 70. Manejo de Eventos
    69. 71. Drag and Drop
    70. 72. Componedentes Reutilizables ( dijit = dojo widget )
    71. 73. API Draw 2D and 3D ( gfx )
    72. 74. Graficos ( pie , barra , plot , etc )
    73. 75. Util library </li></ul>
    74. 76. Estructura de Dojo Toolkit <ul><li>Dojo : Core de framework
    75. 77. Dijit : Todos los componentes reutilizables que permiten la interacción con el usuario
    76. 78. Dojox: Dojo Experimental y de otros proveedores
    77. 79. Util : Librerias utilitarias del Framework </li></ul>
    78. 80. Funcionalidades de Dojo Toolkit <ul><li>Sistema de Paquetes </li></ul>dojo Dojo esta organizado en paquetes igual como esta estruturado java Package System/Bootstrap Language Utilities Event System Widget System AJAX Utilities Custom Widget
    79. 81. Dojo API <ul><li>dojo.require(&quot;package.*&quot;); </li></ul><ul><li>Similar al keyword import de java
    80. 82. Carga dinamica de modulos dojo.require('modulename')
    81. 83. Carga las dependencias necesarias de cada script
    82. 84. Previene la carga recursiva de script
    83. 85. Permite la carga de modulos en cross-domain
    84. 86. Objeto dojo es cargado en forma automatica
    85. 87. XmlHttpRequests Sincronicos </li></ul><ul><li>dojo.require(&quot;package.*&quot;); </li></ul>
    86. 88. Dojo API <ul><li>dojo </li></ul><ul><li>dojo.byId() : Funcion que retorna el nodo del objeto DOM.
    87. 89. dojo.body() : Me retorno el objeto body del documento actual
    88. 90. dojo.fadeIn() : Permite la animacion
    89. 91. dojo.xhr() : Permite el soporte para la comunicacion AJAX
    90. 92. dojo.xhrGet() : Envia un requerimiento HTTP GET al server
    91. 93. dojo.xhrPost() : Envia un requerimiento HTTP POST al server
    92. 94. dojo.query : seleccion de conjunto de Nodos
    93. 95. dojo.place : colocar nodos dentro del DOM
    94. 96. dojo.declare: Declara nuevos componentes
    95. 97. dojo.extend : Permite extender un componente ya creado
    96. 98. dojo.destroy : Permite la destruccion de Nodos </li></ul><ul><li>dojo.* </li></ul>
    97. 99. 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>
    98. 100. Integrando Dojo <ul><li>Parametros variable dfConfig </li><ul><li>ParserOnLoad : variable que permite el parser del DOM Tree , para utilizar el atributo dojoType, para la definicion de Dijit
    99. 101. isDebug : Activa el logging en la aplicacion ( FireBug ) </li></ul></ul>
    100. 102. Themes Dojo <html> ... <ul><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; > ..... </ul>
    101. 103. Dojo upload <ul><script> dojo.addOnLoad(function() { dojo.console(“ready”); }); </script> </ul>
    102. 104. Dijit
    103. 105. Dijit Declarados <ul><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> <li></body> </li></ul>
    104. 106. Dijit Programados <ul><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> </ul>
    105. 107. 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 );
    106. 108. Dojo gfx
    107. 109. DOJO GAME Ejemplo I
    108. 110. COMET + DOJO <ul><li>( Real Time Solutions ) </li></ul>
    109. 111. COMET <ul><li>Técnica de Long Pooling
    110. 112. Permite al servidor enviar información al cliente
    111. 113. Utilizada por Gmail , Facebook para las funcionalidades de chat. </li></ul>
    112. 114. COMET
    113. 115. Bayeux Protocol <ul><li>Creado para soportar 2 flujos de interacción </li><ul><li>Server to Client
    114. 116. Client to server
    115. 117. Client to Client </li></ul><li>Protocolo para transportar mensajes asíncronos sobre
    116. 118. HTTP
    117. 119. Utiliza JSON para el intercambio de Mensajes </li></ul>
    118. 120. Dojo + Bayeux Protocol + Jetty <ul>dojo.comet.init </ul><ul>dojo.comet.subcriber </ul><ul>dojo.comet.publish </ul>
    119. 121. RICH CONSOLE Ejemplo II
    120. 122. MVC en el Browser Client Side – Server Side
    121. 123. DOJO makes Javascript OOP possible
    122. 124. PREGUNTAS
    123. 125. RECURSOS <ul><li>Dojo Toolkit </li><ul><li>http://www.dojotoolkit.com/ </li></ul><li>Dojo Campus </li><ul><li>http://www.dojocampus.org/ </li></ul><li>Noticias de mundo ajax </li><ul><li>http://www.ajaxian.com </li></ul><li>Sitepen </li><ul><li>http://www.sitepen.com </li></ul></ul>
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×