Your SlideShare is downloading. ×
Barcelona Workshop 2008
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Barcelona Workshop 2008

2,201
views

Published on

AJAX, make a lifting to your web pages

AJAX, make a lifting to your web pages


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,201
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. Hazle un lifting a tus páginas Jaume Bosch (jaume.bosch@terra.es) Software Engineer and Developer at Atrapalo.com Jordi Roura (jordi@imestre.com) Web Analyst and Developer at Atrapalo.com
  • 2. php | Ajax
    • Introducción
      • Jaume Bosch
        • 27 años, 6 años de experiencia con PHP y Javascript
        • Software Engineer and Developer at Atrapalo.com
      • Jordi Roura
        • 30 años,
        • Web Analyst and Developer at Atrapalo.com
    • Objetivos
      • Conocer el origen, ventajas funcionamiento de Ajax
      • Presentar las diferentes librerias que existen (Prototype, jQuery, ExtJS yYUI)
      • Conocer las herramientas que nos ofrece YUI
      • Usar YUI para modernizar unas páginas
    • Metodología del Taller
      • Duración: 1 hora y media
        • Ponencia: 30 minutos
        • Parte Práctica: 1 hora
      • Guiado a través de Ejercicios Prácticos
  • 3. php | Ajax
    • ¿Qué es AJAX?
  • 4. php | Ajax
    • ¿Qué es AJAX?
      • AJAX = Asynchronous Javascript And XML
        • Definición estricta de AJAX
        • Uso del Objeto XMLHttpRequest (XHR) para recuperar datos en XML
      • Ajax
        • Conjunto de tecnologías que nos permiten dar mayor interacción a nuestras aplicaciones web, creando interfaces más dinámicos y mostrando datos al usuario sin necesidad de recargar la página mediante el uso de tecnicas en Javascript
    • Orígenes de AJAX
      • El término AJAX fue creado en 2005 (J. J. Garrett), pero las tecnologías en que se basa existen desde 1995 (Scripting Remoto)
      • En 1996 Internet Explorer 3 introdujo el elemento <iframe>, que junto con el <layer> de Netscape 4.0 (1997) permitían la carga de datos remotos de forma asíncrona
      • En 1998 Microsoft sustituyó estas técnicas por el Microsoft Remote Scripting (MSRS), envío de datos a través de un applet de Java
      • La comunidad de desarrolladores web, que en un principio colaboraba con MSRS para conseguir resultados similares en diferentes navegadores, creó en 2002 una modificación del MSRS que remplazaba el applet de Java por XMLHttpRequest.
  • 5. php | Ajax
    • Ventajas de Ajax
      • Crear una navegación más rica para el usuario
      • Disminuir el tiempo de carga y el ancho de banda necesarios
      • Desarrollar más rápidamente utilizando frameworks
      • Multiplataforma, multitecnología y multinavegador
      • Comunidades en auge
      • Usado por los “grandes” Google, Yahoo, Amazon, Flickr, ...
    • Desventajas de Ajax
      • Dificultad de integrar el botón &quot;Atrás&quot;
      • Problemas si el usuario tiene deshabilitado el uso de Javascript
      • Dificultad para ofrecer links directos a contenidos generados dinámicamente
      • Más Ajax (javascript) = Mayor carga de CPU en el navegador
      • Dificultad para “trackear” las páginas vistas por el usuario (Analítica Web)
      • Ajax != Web 2.0
  • 6. php | Ajax
    • Como funciona Ajax
    Servidor Modelo clásico Cliente Petición inicial HTTP Petición HTTP Servidor Cliente Petición inicial HTTP Petición JS Modelo Ajax Motor Ajax XMLHttpRequest
  • 7. php | Ajax
    • Prototype, jQuery, ExtJS, YUI, …
      • Prototype
        • Buena para manejar DOM
        • Poca documentación, faltan ejemplos
        • Librería por defecto en Ruby on Rails
      • jQuery
        • Ligera y rápida
        • Facilidad para manipular DOM
        • Buenos efectos
      • ExtJS
        • Muy rápida
        • Bien diseñada y extensible
        • Soporte comercial disponible
      • YUI (Yahoo! User Interface)
        • Documentación enorme, foros, videos, ejemplos
        • Creciendo rápidamente en características y usuarios
        • No es la más rápida ni ligera pero lo compensa con otras virtudes
      • Conclusión
        • No existe una librería mejor que otra, tenemos que analizarlas para nuestro caso
        • No tenemos que cerrarnos a una sola librería, podemos combinar varias en un mismo proyecto
        • Existen infinidad de librerías (Dojo, Mochikit, Mootools, Rico, … ) pruébalas!
  • 8. php | Ajax
    • ¿Porqué mola YUI?
        • Connection Manager
        • Event
        • AutoComplete
        • DataTable
        • Container
        • TabView
  • 9. php | Ajax
    • Connection Manager
      • Componente para hacer peticiones HTTP usando XMLHttpRequest
    <!-- Dependency --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js&quot;>< /script > <!-- Used for Custom Events and event listener bindings --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/event/event-min.js&quot;> </script > <!-- Source file --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js&quot;>< /script > var div = document.getElementById( &quot;container&quot; ); var handleSuccess = function (o){ div.innerHTML = o.responseText; } var handleFailure = function (o){ div.innerHTML = &quot;Error&quot; ; } var callback = { success:handleSuccess, failure:handleFailure, }; function AjaxRequest(){ var sUrl = &quot;examples/connection.php?userid=0&quot; ; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); } Requisitos mínimos Ejemplo básico
  • 10. php | Ajax
    • Event
      • Permite añadir acciones a eventos en objetos DOM, controlando si están o no renderizados
    <!-- Dependency --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js&quot;>< /script > <!-- Used for Custom Events and event listener bindings --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/event/event-min.js&quot;> </script > var  oElement = document.getElementById( &quot;elementid&quot; ); function  fnCallback(e) { alert( &quot;click&quot; ); } function  fnCallback2(e) { alert( &quot;mouseover&quot; ); } YAHOO.util.Event.addListener(oElement,  &quot;click&quot; , fnCallback);  YAHOO.util.Event.addListener(oElement, &quot;mouseover&quot; , fnCallback2); Requisitos mínimos Ejemplo básico
  • 11. php | Ajax
    • AutoComplete
      • Widget que nos permite mostrar sugerencias mientras el usuario escribe en un inputbox
    var  myServer =  &quot;./someScript.php&quot; ; var  mySchema = [ &quot;ResultItem&quot; ,  &quot;KeyDataField&quot; ]; var  myDataSource = new YAHOO.widget.DS_XHR(myServer, mySchema);  var  myAutoComp = new YAHOO.widget.AutoComplete( &quot;myInput&quot; , &quot;myContainer&quot; , myDataSource);  <!--CSS file (default YUI Sam Skin) --> < link  type = &quot;text/css&quot;  rel = &quot;stylesheet&quot;   href =&quot;http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete.css&quot;>   <!-- Dependency --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&quot;>< /script > <!-- OPTIONAL: Connection (required only if using XHR DataSource) --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js&quot;>< /script > <!-- Source file --> < script   src =&quot;http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-min.js&quot;>< /script >   Requisitos mínimos Ejemplo básico
  • 12. php | Ajax
    • AutoComplete 2
    <div id = &quot;myAutoComplete&quot; > <input type = &quot;text&quot; id = &quot;myInput&quot; > <div id = &quot;myContainer&quot; ></div> </div> HTML necesario
  • 13. php | Ajax
    • DataTable
      • API con la que podremos crear tablas estilo “hoja de cálculo” con reescalado del ancho de las columnas, reordenacion por columna, paginación y edición.
    <!--CSS file (default YUI Sam Skin) --> < link  type = &quot;text/css&quot;  rel = &quot;stylesheet&quot;   href =&quot;http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css&quot;>   <!-- Dependency --> < script src = &quot;http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&quot;>< /script > < script src = &quot;http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js&quot;>< /script > < script  src = &quot;http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js&quot; > < /script > <!-- OPTIONAL: Connection (enables XHR) -->  < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js&quot;>< /script > <!-- Source file --> < script   src =&quot;http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js&quot;>< /script >   Requisitos mínimos
  • 14. php | Ajax
    • DateTable 2
    YAHOO.example.XHR_JSON = new function () { var myColumnDefs = [ {key: &quot;Title&quot; , label: &quot;Name&quot; , sortable:true}, {key: &quot;Phone&quot; }, {key: &quot;City&quot; }, {key: &quot;AverageRating&quot; , label: &quot;Rating&quot; , sortable:true} ]; this.myDataSource = new YAHOO.util.DataSource( &quot;assets/php/ylocal_proxy.php?&quot; ); this.myDataSource.connMethodPost = true; this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML; this.myDataSource.responseSchema = { resultNode: &quot;Result&quot;, fields: [&quot;Title&quot;,&quot;Phone&quot;,&quot;City&quot;,&quot;AverageRating&quot;] }; this.myDataTable = new YAHOO.widget.DataTable( &quot;xml&quot; , myColumnDefs, this.myDataSource, {initialRequest: &quot;query=pizza&zip=94089&results=10&quot; }); Ejemplo básico
  • 15. php | Ajax
    • Container
      • Control para generar paneles, cuadros de dialogo y “tooltips”
    <!--CSS file (default YUI Sam Skin) --> < link  type = &quot;text/css&quot;  rel = &quot;stylesheet&quot;   href =&quot;http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css&quot;>   <!-- Dependency --> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&quot;>< /script > <!-- Source file --> < script   src =&quot;http://yui.yahooapis.com/2.5.2/build/container/container-min&quot;>< /script >   YAHOO.example.container.panel = new YAHOO.widget.Panel( &quot;panel&quot; , {  width: &quot;320px&quot; , visible:false, draggable:false, close:false } ); YAHOO.example.container.panel2.setHeader( &quot;Panel from Script&quot; ); YAHOO.example.container.panel2.setBody( &quot;This is a dynamically generated Panel.&quot; ); YAHOO.example.container.panel2.setFooter( &quot;End of Panel&quot; ); YAHOO.example.container.panel2.render( &quot;container&quot; );  Requisitos mínimos Ejemplo básico
  • 16. php | Ajax
    • TabView
      • Este componente nos da la posibilidad de crear sistemas de navegación basados en pestañas
    <!--CSS file (default YUI Sam Skin) --> < link  type = &quot;text/css&quot;  rel = &quot;stylesheet&quot;   href =&quot;http://yui.yahooapis.com/2.5.2/build/tabview/assets/skins/sam/tabview.css&quot;> <!-- Dependency -> < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&quot;> < /script > < script  src =&quot;http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js&quot;>< /script > <!-- Source file --> < script   src =&quot;http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js&quot;>< /script >   Requisitos mínimos
  • 17. php | Ajax
    • TabView 2
    var tabView = new YAHOO.widget.TabView(); tabView.addTab( new YAHOO.widget.Tab({ label: 'lorem', content: '<p>Lorem ipsum dolor sit amet</p>', active: true })); tabView.addTab( new YAHOO.widget.Tab({ label: 'ipsum', content: '<ul><li><a href=&quot;#&quot;>Lorem ipsum dolor sit amet.</a></li>' })); tabView.addTab( new YAHOO.widget.Tab({ label: 'dolor', content: '<form action=&quot;#&quot;><fieldset><legend>Lorem Ipsum</legend><label for=&quot;foo&quot;> <input id=&quot;foo&quot; name=&quot;foo&quot;></label><input type=&quot;submit&quot; value=&quot;submit&quot;></fieldset></form>' })); tabView.appendTo('container'); Ejemplo básico