Your SlideShare is downloading. ×
0
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax

13,571

Published on

I Xornadas de Programación Web en SwL

I Xornadas de Programación Web en SwL

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,571
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
846
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ajax & Prototype Tomás Vilariño Fidalgo OUSLI
  • 2. <ul><ul><li>¿Cómo podría implementar un chat por http? </li></ul></ul>
  • 3. Posible solución <ul><li>Iframe scripting </li></ul><ul><li>Un frame oculto se refresca por medio de javascript y se recuperan datos del servidor. </li></ul>Referencias: http://developer.apple.com/internet/webcontent/iframe.html http://www.bazon.net/mishoo/rpc.epl
  • 4. Iframe scripting es una solución compleja “PHPOpenChat”, solución de web chat empleando Iframe scripting.
  • 5. HTTP y aplicaciones en la Web <ul><li>HTTP presenta limitaciones: </li></ul><ul><li>Es un protocolo petición/respuesta </li></ul><ul><li>No existe un canal abierto de comunicación </li></ul><ul><li>Después de la respuesta el servidor cierra la comunicación </li></ul>
  • 6. Ejemplo petición HTTP
  • 7. AJAX: la solución elegante <ul><li>Jesse James Garrett “bautiza” esta nueva forma de comunicación entre cliente y servidor. </li></ul><ul><li>AJAX no es una tecnología. Son varias - A synchronous J avascript A nd X ml: </li></ul><ul><ul><li>XHTML y CSS </li></ul></ul><ul><ul><li>DOM </li></ul></ul><ul><ul><li>XML, XSLT, XPath </li></ul></ul><ul><ul><li>XMLHttpRequest (XHR) </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul>Referencias: http://adaptivepath.com/publications/essays/archives/000385.php
  • 8. Esquema de funcionamiento Modelo Clásico
  • 9. Esquema de funcionamiento Modelo AJAX
  • 10.  
  • 11. <ul><li>1. Usuario provoca un evento </li></ul><ul><li>2. Se crea y configura un objeto XMLHttpRequest </li></ul><ul><li>3. El objeto XMLHttpRequest realiza una llamada al servidor </li></ul><ul><li>4. La petición se procesa en el servidor </li></ul><ul><li>5. El servidor retorna un documento XML (xHTML, JSON, ...) que contienen el resultado </li></ul><ul><li>6. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado </li></ul><ul><li>7. Se actualiza el DOM (Document Object Model) de la página asociado con la petición con el resultado devuelto </li></ul>Esquema de funcionamiento Modelo AJAX
  • 12. Historia de Ajax <ul><li>Origen: </li></ul><ul><ul><li>Microsoft Remote Scripting (IE ActiveX Microsoft.XMLHTTP), permite trabajar con XML del servidor en el cliente IE. </li></ul></ul><ul><li>Port a otros navegadores: </li></ul><ul><ul><li>Mozilla incorpora un objeto Javascript que realiza la misma funcionalidad XMLHttpRequest </li></ul></ul><ul><li>XMLHttpRequest incluido en borrador w3c: </li></ul><ul><ul><li>En borrador incorporado a DOM v3 W3C Working Draft 27 February 2007 </li></ul></ul>Referencias: http://www.w3.org/TR/XMLHttpRequest/
  • 13. Conceptos previos <ul><li>DOM, Document Object Model. Desde ECMAScript se permite manipular HTML como si fuese XML. </li></ul><ul><ul><li><script language=”javascript”> </li></ul></ul><ul><ul><li>var elto = document.getElementById(“id_elemento”); </li></ul></ul><ul><ul><li>elto.innerHTML = “Hola mundo”; </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li><div id=”id_elemento”></div> </li></ul></ul><ul><li>Javascript y Orientación a Objetos. </li></ul><ul><ul><li>function miclase() { </li></ul></ul><ul><ul><ul><li>var private_var = 0; this.public_var = 1; </li></ul></ul></ul><ul><ul><ul><li>this.metodo = function(valor){ private_var = valor; } </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>var instancia = new miclase(); </li></ul></ul><ul><ul><li>instancia.metodo(2); </li></ul></ul><ul><ul><li>miclase.prototype.nuevapropiedad = “Hola”; </li></ul></ul><ul><li>JSON, JavaScript Object Notation. Notación de objetos literal en javascript. </li></ul><ul><ul><li>var obj = {id: 10, mi_array: ['nombre1', 'nombre2'], cadena: “cadena de texto”}; </li></ul></ul>
  • 14. DOM/BOM <ul><li>DOM manipula el árbol HTML, permite cambio de estilos CSS, renderizado de nuevo contenido, ... </li></ul>
  • 15. JSON <ul><li>Permite definir en una cadena una estructura de datos similar a un array asociativo, pero que no deja de ser un objeto y sus las ventajas. </li></ul><ul><li>Útil para transmitir datos con más expresividad que XML. </li></ul>Referencias: http://www.json.org
  • 16. JSONRequest <ul><li>Una posible alternativa a XMLHttpRequest </li></ul><ul><li>requestNumber = JSONRequest.post( </li></ul><ul><li>&quot;https://json.penzance.org/request&quot;, </li></ul><ul><li>{ </li></ul><ul><li>user: &quot;doctoravatar@yahoo.com&quot;, </li></ul><ul><li>t: &quot;vlIj&quot;, </li></ul><ul><li>zip: 94089, </li></ul><ul><li>forecast: 7 </li></ul><ul><li>}, </li></ul><ul><li>function (requestNumber, value, exception) { </li></ul><ul><li>if (value) { </li></ul><ul><li>processResponse(value); </li></ul><ul><li>} else { </li></ul><ul><li>processError(exception); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>); </li></ul><ul><li>POST /request HTTP/1.1 </li></ul><ul><li>Host: json.penzance.org </li></ul><ul><li>Content-Type: application/jsonrequest </li></ul><ul><li>Content-Length: 72 </li></ul><ul><li>Content-Encoding: identity </li></ul><ul><li>Domain: www.pirate.net </li></ul><ul><li>{&quot;user&quot;:&quot;doctoravatar@penzance.com&quot;,&quot;forecast&quot;:7,&quot;t&quot;:&quot;vlIj&quot;,&quot;zip&quot;:94089} </li></ul>
  • 17. Comet El cliente no deberá estar solicitando los cambios de la lista de usuarios, el servidor web es el que le envía los datos al cliente cuando cambia la lista de usuarios, esto reduce considerablemente el consumo de ancho de banda.
  • 18. ¿Donde puedo encontrar Ajax?
  • 19. Ajax en la vida real <ul><li>En el sitio menos pensado: </li></ul><ul><li>Gmail, GMaps,... </li></ul><ul><li>del.icio.us </li></ul><ul><li>Chuza, Meneame, digg, webeame, ... </li></ul><ul><li>Flickr, picassa, ... </li></ul><ul><li>Youtube (Ajax + Flash) </li></ul>
  • 20. ¿Quién fue el impulsor? G
  • 21. G mail G talk G oogle maps G oogle pages G ...
  • 22. Entorno de Trabajo <ul><li>3 Reglas básicas desarrollando aplicaciones AJAX (según Thomas Fuchs): </li></ul><ul><ul><li>Usar Firefox </li></ul></ul><ul><ul><li>Usar Firefox + extensiones </li></ul></ul><ul><ul><li>Probar en el resto de navegadores: Opera, IES4Linux, Konqueror, ... </li></ul></ul>
  • 23. <ul><li>Javascript Debugger </li></ul><ul><li>Logging para páginas web </li></ul><ul><li>DOM Inspector </li></ul><ul><li>Línea de comandos </li></ul><ul><li>Espía de peticiones Ajax (XMLHttpRequest) </li></ul><ul><li>Edición en vivo de javascript </li></ul><ul><li>CSS, edición en línea, tracking de estilos </li></ul><ul><li>Monitor de red </li></ul><ul><li>... </li></ul>Referencias: http://www.joehewitt.com/software/firebug https://addons.mozilla.org/firefox/1843/
  • 24. Firebug: funcionalidades desde la consola <ul><li>Niveles de logging: </li></ul><ul><ul><li>console.debug(“mensaje”, [,objects]); </li></ul></ul><ul><ul><li>Otros niveles: info, warn, error </li></ul></ul><ul><li>Assertions: </li></ul><ul><ul><li>console.assert(a, “mensaje”); // Si a es verdadero se muestra mensaje </li></ul></ul><ul><li>Funciones: </li></ul><ul><ul><li>$(“id”); // Atajo para document.getElementById </li></ul></ul><ul><ul><li>$x(“//div”); // Expresiones xpath </li></ul></ul><ul><ul><li>inspect(object); // mostrar el inspector para n objeto </li></ul></ul><ul><ul><li>dir(object); // Devolver un array de propiedades del objeto </li></ul></ul>
  • 25. Debugger de firebug
  • 26. Firebug sobre GMail
  • 27. Complementos a Firebug <ul><li>FirePHP, extensión Firefox para desarrollo PHP http://www.firephp.org/ </li></ul><ul><li>FireCake, helper para CakePHP http://bakery.cakephp.org/articles/view/227 </li></ul><ul><li>FireBug Lite, firebug para IE y Opera http://www.getfirebug.com/lite.html </li></ul><ul><li>Aptana http://www.aptana.org </li></ul>
  • 28. http://www.firephp.org/Reference/Developers/ExtendingFirebug.htm Extendiendo Firebug
  • 29. Extensiones firefox: otras <ul><li>Web Developer Toolbar: barra de herramientas que incluye diversas y útiles funcionalidades ( ¡imprescindible! ) </li></ul><ul><li>Tamper Data: herramienta para la monitorización de las peticiones HTTP, incluidas las realizadas con AJAX. </li></ul><ul><li>DOM Inspector: proporciona la representación de la página actual en forma de árbol DOM. </li></ul><ul><li>Consola Javascript: incluida con firefox, muestra los errores en los script </li></ul><ul><li>Otras: IETab, Colorzilla, All-In-One sidebar, MozGestures optimoz, Venkman Debugger , greasemonkey , ... (+extensiones en mozdev.org) </li></ul>Referencias: https://addons.mozilla.org/firefox/60/ (Web developer toolbar) http://tamperdata.mozdev.org/ (Tamper data) http://www.mozdev.org/projects/active.html (Otras extensiones)
  • 30. Web developer, ¡imprescindible! <ul><li>Opciones para trabajar con: </li></ul><ul><ul><li>Cookies: editar, información, ... </li></ul></ul><ul><ul><li>CSS: editar, deshabilitar, cambiar, ... </li></ul></ul><ul><ul><li>Forms: habilitar campos, ver passwords, ... </li></ul></ul><ul><ul><li>Images: imáges perdidas, información, ... </li></ul></ul><ul><ul><li>Deshabilitar funcionalidades navegador: java, javascript, cache, css, ... </li></ul></ul><ul><ul><li>Miscelánea: eliminar caché, cookies, ... </li></ul></ul><ul><ul><li>Diseño: cuadrícula, reglas, ... </li></ul></ul>
  • 31. Web Developer Toolbar
  • 32. Tamper Data <ul><li>Muy buena, monitorización de las peticiones HTTP. </li></ul>
  • 33. GreaseMonkey <ul><li>Permite por medio de pequeñas porciones de código javascript creadas por usuarios ( *.user.js ), modificar el comportamiento de páginas web específicas. </li></ul><ul><li>Con esta extensión es posible mejorar la experiencia de lectura de un sitio, hacerlo más usable, añadir nuevas funciones a páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más. </li></ul><ul><li>Útil en el proceso de desarrollo para cumplimentar formularios de forma automática, visualizar valores del servidor, eliminar imágenes, ... </li></ul><ul><li>http://localhost/view-session.user.js </li></ul>
  • 34. Anatomía de AJAX
  • 35. Anatomía de AJAX (I) <ul><li>Vamos a crear una clase AJAX que envuelva (clase wrapper) las funcionalidades específicas de cada navegador. </li></ul>
  • 36. Anatomía de AJAX (II) <ul><ul><ul><li>if ( window .XMLHttpRequest) { </li></ul></ul></ul><ul><li>_req = new XMLHttpRequest (); </li></ul><ul><li>_req.onload = displayState ; </li></ul><ul><li>_req.open( &quot;GET&quot; , url, true ); </li></ul><ul><li>_req.send( null ); </li></ul><ul><li>} else if ( window .ActiveXObject) { </li></ul><ul><li>_req = new ActiveXObject( &quot;Microsoft.XMLHTTP&quot; ) ; </li></ul><ul><li>if (_req) { </li></ul><ul><li>_req.onreadystatechange = displayState ; </li></ul><ul><li>_req.open( &quot;GET&quot; , url, true ); </li></ul><ul><li>_req.send(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  • 37. Anatomía de AJAX (III) <ul><li>/* Manejador del estado */ </li></ul><ul><li>function displayState() { </li></ul><ul><li>if (_req.readyState == 4) { </li></ul><ul><li>if (_req. status == 200 ) { </li></ul><ul><li>// Procesar datos </li></ul><ul><li>// ... </li></ul><ul><li>_res = _req.responseXML.documentElement ; </li></ul><ul><li>// Llamada al manejador concreto </li></ul><ul><li>_handler (_res); </li></ul><ul><li>} else { </li></ul><ul><li>alert ( &quot;Error recuperando datos: &quot; + _req.statusText); </li></ul><ul><li>_err += _req.statusText + ' ' ; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>/* Llamada al manejador concreto establecido en _hdl */ function _handler (response) { if (_hdl != null ) { _hdl(response); } }
  • 38. Usando el wrapper Ajax <ul><li>Incluir ajax.js: </li></ul><ul><ul><li><script src=&quot;ajax.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </script> </li></ul></ul><ul><li>Después definir la función &quot;manejador&quot; que será la encargada de trabajar con los datos XML de la respuesta. </li></ul><ul><ul><li><script language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><li>function miManejador (response) { </li></ul></ul><ul><ul><li>alert( response.getElementsByTagName('resultado')[0].firstChild.data); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><li>Instanciar la clase AJAX y establecer el manejador definido en el paso anterior </li></ul><ul><ul><li>var ajax = new Ajax(); </li></ul></ul><ul><ul><li>ajax.setHandler( miManejador ); </li></ul></ul><ul><li>Para desencadenar la llamada al manejador es necesario utilizar el método de ajax &quot;getXML&quot;. Para ello podemos utilizar los eventos de javascript: </li></ul><ul><ul><li>onclick=&quot;javascript:ajax. getXML ('server.php?q=1');&quot; </li></ul></ul>
  • 39. Usando el wrapper Ajax <ul><ul><li>function cargar_hora () { </li></ul></ul><ul><ul><ul><li>ajax.getXML('timeserver.php'); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>var idThread = null; </li></ul></ul><ul><ul><li>function init() { </li></ul></ul><ul><ul><ul><li>idThread = setInterval ( cargar_hora , 5000 ); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>El uso de temporizadores permite realizar peticiones al servidor de forma continua hasta que se destruya el temporizador. Esto permite emular una conexión persistente con el servidor.
  • 40. Usando el wrapper Ajax <ul><li>Para trabajar con AJAX y XSLT hay q incluir ajax.js: </li></ul><ul><li><script src=&quot;ajax.js&quot; language=&quot;javascript&quot; type=&quot;text/javascript&quot;> </script> </li></ul><ul><li>La transformación del documento XML en HTML gracias a XSLT se realiza con el siguiente método: ajax.transformXML(&quot;doc.xml&quot;, &quot;doc.xslt&quot;) </li></ul><ul><li>var ajax = new Ajax(); </li></ul><ul><li>var resultado = ajax.transformXML('menu.xml', “menu.xsl”); </li></ul><ul><li>El resultado obtenido del método transformXML es una cadena con la transformación realizada del documento XML a HTML por medio de XSLT. </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var con = document.getElementById('salida'); </li></ul><ul><li>con.innerHTML = resultado; </li></ul><ul><li></script> </li></ul><ul><li><div id=&quot;salida&quot; /> </li></ul>Referencias: http://devedge.netscape.com/viewsource/2003/xslt-js/
  • 41. Ajax + XSLT
  • 42. Esto es muy complejo. No existe un modo más sencillo de trabajar con Ajax?
  • 43. Frameworks AJAX <ul><li>Mediante reflexión determinan la interfaz de las clases del lado servidor y generan código javascript para invocar funcionalidades desde el cliente. </li></ul><ul><ul><li>JPSpan y Sajax, en PHP5. </li></ul></ul><ul><ul><li>DWR, en Java, posibilidad de integrar con otros frameworks como struts. DWR 2.0 introduce el concepto de Reverse Ajax (desde el servidor enviar javascript al cliente :-O ). </li></ul></ul><ul><ul><li>Ajax.NET. </li></ul></ul><ul><li>Librerías javascript que permiten funcionalidades AJAX: </li></ul><ul><ul><li>script.aculo.us, mejor dicho prototype </li></ul></ul><ul><ul><li>Dojo, integrada en DWR </li></ul></ul>
  • 44. <ul><li>PROTOTYPE ( http://prototype.conio.net/ ) es un framework desarrollado en JavaScript por Sam Stephenson para el desarrollo sencillo y dinámico de páginas WEB. </li></ul><ul><li>PROTOTYPE simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas. [def.wikipedia: http://es.wikipedia.org/wiki/Prototype ] </li></ul>Framework Prototype
  • 45. ¿Por qué Prototype? <ul><li>Ruby On Rails , Perl, Nitro, PHP, Java, Plone, Pylons, DotNet, Symfony, Seaside, AIDA/Web, OpenACS, Django, CakePHP </li></ul><ul><li>Sencillo y potente </li></ul><ul><li>OO y extensible </li></ul><ul><li>Herramientas integran prototype (Aptana) </li></ul>
  • 46. <ul><li>Métodos de utilidad: $(), $F(), $A(), $$(), ... </li></ul><ul><li>Ajax </li></ul><ul><li>Array, Hash, String </li></ul><ul><li>Class, Object, Function </li></ul><ul><li>Date, Element, Enumerable, Number </li></ul><ul><li>Event, Position </li></ul><ul><li>Form </li></ul><ul><li>Insertion, Template </li></ul><ul><li>PeriodicalExecuter, TimedObserver </li></ul><ul><ul><ul><li>http://www.prototypejs.org/api </li></ul></ul></ul>Framework Prototype
  • 47. Ejemplos con Prototype <ul><li>Facilita la programación OO: </li></ul><ul><ul><li>Helper = Class.create (); Helper.prototype = Object.extend (Helper, { initialize : function(element, url, options) { this.element = $(element); ... }}); </li></ul></ul><ul><ul><li>http://localhost/ajax/js/helper.js </li></ul></ul><ul><li>Extiende objetos básicos de Javascript para proporcionar nuevas funcionalidades: </li></ul><ul><ul><li>String, Array, Hash, ... </li></ul></ul>
  • 48. Ajax con Prototype, por fin <ul><li><div id=&quot; contenido &quot;></div> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>new Ajax . PeriodicalUpdater (' contenido ', ' timeserver.php ', </li></ul><ul><li>{method: 'get', frequency: 3, decay: 2}); </li></ul><ul><li></script> </li></ul><ul><li><?php </li></ul><ul><li>$hora = date(&quot;h:i:s a&quot;); </li></ul><ul><li>header('Content-type: text/xml'); </li></ul><ul><li>echo('<strong>'.$hora.'</strong>'); </li></ul><ul><li>?> </li></ul>
  • 49. Ajax con Prototype, por fin <ul><li>Ajax Options, opciones comunes de los distintos objetos Ajax </li></ul><ul><li>Ajax.PeriodicalUpdater </li></ul><ul><ul><li>new Ajax.PeriodicalUpdater(container, url[, options]) </li></ul></ul><ul><ul><li>Realiza unas llamadas de forma periódica actualizando el contenido “container” con la respuesta basada en texto. Ofrece un mecanismo de “decay” (decaer, putrefacción) que comprueba las respuesta e incrementa los períodos de petición automáticamente. http://prototypejs.org/api/ajax/periodicalUpdater </li></ul></ul><ul><ul><li>http://localhost/ajax/timeclient.htm </li></ul></ul><ul><li>Ajax.Request </li></ul><ul><ul><li>new Ajax.Request(url[, options]) </li></ul></ul><ul><ul><li>El objeto más básico y potente de petición AJAX. </li></ul></ul>
  • 50. Ajax con Prototype, por fin <ul><li>Ajax.Responders </li></ul><ul><ul><li>Ajax.Responders.register(responder) </li></ul></ul><ul><ul><li>Ajax.Responders.unregister(responder) </li></ul></ul><ul><ul><li>Es un repositorio global de monitores que notifican todos los pasos de las peticiones Ajax (Prototype). </li></ul></ul><ul><li>Ajax.Updater </li></ul><ul><ul><li>new Ajax.Updater(container, url[, options]) </li></ul></ul><ul><ul><li>Realiza una petición AJAX y actualiza el contenedor con el texto de la respuesta. </li></ul></ul>
  • 51. Script.aculo.us <ul><li>Script.aculo.us está implementado empleando prototype para proporcionar nuevas funcionalidades: </li></ul><ul><ul><li>Efectos (Effects) </li></ul></ul><ul><ul><li>Controles visuales (Controls) </li></ul></ul><ul><ul><li>Utilidades (Utils) </li></ul></ul><ul><ul><li>Pruebas (Testing) </li></ul></ul><ul><li>Uso: </li></ul><ul><ul><li><script src=&quot;javascripts/prototype.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul><ul><ul><li><script src=&quot;javascripts/scriptaculous.js&quot; type=&quot;text/javascript&quot;></script> </li></ul></ul><ul><ul><li><!-- scriptaculous.js?load=effects,dragdrop,builder,slider,controls --> </li></ul></ul>
  • 52. Script.aculo.us - Efectos <ul><li>Efectos de Entrada/Salida: </li></ul><ul><ul><li>Appear / Fade </li></ul></ul><ul><ul><li>BlindUp / BlindDown </li></ul></ul><ul><ul><li>SlideUp / SlideDown </li></ul></ul><ul><ul><li>Grow / Shrink </li></ul></ul><ul><li>Efectos de Salida </li></ul><ul><ul><li>DropOut </li></ul></ul><ul><ul><li>Fold </li></ul></ul><ul><ul><li>Puff </li></ul></ul><ul><ul><li>Squish </li></ul></ul><ul><ul><li>SwitchOff </li></ul></ul><script type=&quot;text/javascript&quot; language=&quot;javascript&quot;> Effect.Appear('element_id'); </script>
  • 53. Script.aculo.us - Efectos <ul><li>Efectos de atención: </li></ul><ul><ul><li>Highlight </li></ul></ul><ul><ul><li>Pulsate </li></ul></ul><ul><ul><li>Shake </li></ul></ul><ul><li>Efectos básicos (primitivas de los anterios): </li></ul><ul><ul><li>Effect.Scale, Effect.Move, Effect.MoveBy </li></ul></ul><ul><ul><li>Effect.Opacity, Effect.ScrollTo </li></ul></ul><ul><ul><li>Effect.Parallel </li></ul></ul><ul><ul><li>Effect.toggle </li></ul></ul><ul><ul><li>Effect.Queue s </li></ul></ul>
  • 54. Script.aculo.us - Efectos <ul><li>La última versión 1.7.0 añade nuevos efectos: Effect.Transform, Effect.Morph, ... inspirados en el framework de Bernie's: http://berniecode.com/writing/animator.html </li></ul><ul><li>Soporte para reproducir sonidos: Sound.play('blah.mp3'); </li></ul><ul><li>http://localhost/ajax/effects.php </li></ul>
  • 55. Script.aculo.us - Controles <ul><li>InPlaceEditor </li></ul><ul><li>Slider </li></ul><ul><li>Drag & drop </li></ul><ul><ul><li>http://localhost/ajax/controls.php </li></ul></ul><ul><li>Google suggest + Autocompleter = Mashup Un Mashup es un sitio web o una aplicación que combina contenidos/servicios de varias fuentes integradas de modo que parezca una única aplicación. (Flickr + Weblog + GMaps) http://localhost/ajax/google-suggest.php </li></ul>
  • 56. Script.aculo.us - Útiles <ul><li>Builder es una clase de script.aculo.us que permite manipular DOM de forma más sencilla sin tener que trabajar con document.createElement, document.createTextNode, .... http://localhost/ajax/builder.htm </li></ul>table = Builder.node('table', {width:'100%', cellpadding:'2', cellspacing:'0',border:'0'}); tbody = Builder.node('tbody'); tr = Builder.node('tr',{className:'header'}); td = Builder.node('td',[ Builder.node('strong','Category')]); tr.appendChild(td); tbody.appendChild(tr); table.appendChild(tbody); $('contenido').appendChild(table);
  • 57. Faíscas <ul><li>Proyecto de OUSLI empleando: prototype, scriptaculous, ADOdb, Smarty, MySQL, ... </li></ul><ul><li>Pizarra de trabajo colaborativo vía web </li></ul><ul><li>Un usuario puede publicar notas, en las distintas pizarras categorizadas por temas, y en tiempo real ver los post-it publicados por los otros usuarios. </li></ul><ul><li>http://localhost/brainstorming/login.php </li></ul>
  • 58. Ahora con CakePHP <ul><li>Extraído del tutorial: http://grahambird.co.uk/cake/tutorials/ </li></ul><ul><li>Lista de tareas pendientes </li></ul><ul><li>1.- Primero es necesario incluir las últimas versiones de prototype y script.aculo.us. Descargan script.aculo.us ya tenemos ambas incluidas. http://script.aculo.us/downloads </li></ul><ul><li>2.- Incluír en /app/views/layouts/default.thtml los tags para trabajar con script.aculo.us y prototype: </li></ul><ul><li><?php print $html->charsetTag(' UTF-8 ') ?> </li></ul><ul><li><?php print $javascript->link('prototype') ?> </li></ul><ul><li><?php print $javascript->link('scriptaculous.js?load=effects') ?> </li></ul><ul><li>3.- Creamos nuestra tabla: http://localhost/phpmyadmin </li></ul>
  • 59. CakePHP y Ajax <ul><li>4.- El modelo es el mismo que el empleado para el trabajo sin Ajax </li></ul><ul><li>5.- El controlador tiene en cuenta el layout con el que está trabajando a la hora de ejecutar el render. http://ajax.localhost/tasks_controller.phps </li></ul><ul><ul><li>function add() {... </li></ul></ul><ul><ul><li>$this->render('todo', 'ajax'); </li></ul></ul><ul><ul><li>...} </li></ul></ul>
  • 60. CakePHP y Ajax <ul><li>6.- En la vista es donde está (y donde debe estar) todo el meollo de Ajax. </li></ul><ul><li>http://ajax.localhost/tasks/ </li></ul>
  • 61. Conclusiones <ul><li>Ajax tiene detractores pero seguramente sea por desconocimiento. Razones para usar Ajax: </li></ul><ul><li>1.- Este modelo de trabajo es complementario al anterior. </li></ul><ul><li>2.- Inconvenientes de accesibilidad, “botón atrás”, “marcadores”, ... son solucionables </li></ul><ul><li>3.- Se mejora la usabilidad de la aplicación empleando Ajax: tiempos de respuesta, ... (Gmail) </li></ul><ul><li>4.- Se está trabajando en aplicaciones web offline. Apollo de Adobe, Dojo toolkit, Mozilla </li></ul><ul><li>5.- Google está trabajando con esta tecnología, por algo será!!! </li></ul><ul><li>6.- ... </li></ul>
  • 62. Teorías de conspiración (desvarios mentales propios) <ul><li>IExploter es el inconveniente más grande que evita la verdadera explosión de esta tecnología </li></ul><ul><li>M$ no le interesa que este tipo de aplicaciones avancen. Tiene mucho mercado en aplicaciones de escritorio (Office) </li></ul><ul><li>Aparecen nuevos frameworks que facilitan el trabajo en cliente y servidor en un mismo lenguaje: haXe, GWT, ... </li></ul><ul><li>Gracias a una oferta tan importante de herramientas en Software Libre sería muy raro que esto sólo sea una burbuja. </li></ul>
  • 63. Gracias por su atención Preguntas

×