• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ajax
 

Ajax

on

  • 1,971 views

Formación sobre ajax de una hora de duración.

Formación sobre ajax de una hora de duración.

Statistics

Views

Total Views
1,971
Views on SlideShare
1,968
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 3

http://www.linkedin.com 2
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax Ajax Presentation Transcript

    • AJAX I Seminario Jorge Nieves 1 Diciembre 2010 Duración: 1 hora.
    • me Jorge Nieves 1 Diciembre 2010
    • ¿ AJAX ? … ¿ El qué ? … Jorge Nieves 1 Diciembre 2010
    • ¿? Jorge Nieves 1 Diciembre 2010
    • ¿? Jorge Nieves 1 Diciembre 2010
    • Ahora sabemos qué NO es AJAX.. ;) Jorge Nieves 1 Diciembre 2010
    • Técnica de desarrollo Web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes… AJAX (Asynchronous JavaScript And XML) Lenguaje?? Tecnología?? Plataforma?? Jorge Nieves 1 Diciembre 2010
      • JavaScript - Para manejar el objeto XMLHttpRequest y DOM para tratar los datos recibidos.
      • HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor.
      • CSS - Define el aspecto de cada elemento y dato de la aplicación. Look and feel de la aplicación.
      • XML (Json)- Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados.
      • Lenguaje de servidor - Genera la información útil en XML y la envía al navegador.
      Jorge Nieves 1 Diciembre 2010
    • Caso de uso, caso de éxito Jorge Nieves 1 Diciembre 2010
    • AJAX : Funcionamiento Jorge Nieves 1 Diciembre 2010
      • El usuario accede a la web que es enviada por el servidor al navegador (cliente) en formato HTML, JavaScript y CSS.
      AJAX : Funcionamiento AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo ACCEDO A LA PÁGINA WEB Jorge Nieves 1 Diciembre 2010
    • AJAX : Funcionamiento 2. El usuario realiza alguna acción en la pantalla (Clicka en un enlace que dispara una acción mediante ajax). AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> CLICK! Jorge Nieves 1 Diciembre 2010
    • AJAX : Funcionamiento 3. En ese momento, el código JavaScript cargado en la web pide al servidor (mediante el objeto XMLHttpRequest) los datos que quiere mostrar AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> NAVEGADOR CLIENTE SERVIDOR PETICIÓN RESPUESTA .....................ESPERA....... Jorge Nieves 1 Diciembre 2010
    • AJAX : Funcionamiento 4. El servidor ejecuta un código de lado de servidor que envía al navegador los datos en formato XML, Html o Json (Encapsulamientos de información). AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo Hola Iasoft! Estos datos han sido recibidos mediante AJAX !! <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> var cajaRespuesta = document.getElementsById(“caja-respuesta”); cajaRespuesta.innerHtml(respuesta); Jorge Nieves 1 Diciembre 2010
    • Jorge Nieves 1 Diciembre 2010
    • AJAX : ¿Cómo lo implementamos? function createRequestObject (){ var req; if( window.XMLHttpRequest ){ req = new XMLHttpRequest(); } else if(window.ActiveXObject){ //For IE 5+ , IE…A lovely browser… req = new ActiveXObject (&quot;Microsoft.XMLHTTP&quot;); } else{ } return req; } //Make the XMLHttpRequest Object var http = createRequestObject(); function sendRequest ( method , url){ if(method == 'get' || method == 'GET'){ http. open (method,url); http.onreadystatechange = handleResponse; /*call back función que controla cambios de estado*/ http. send (null); } } function handleResponse (){ /*readyState: estado actual de la llamada (si realizada) 0 - Sin inicializar, siempre será: 1 - Abierto (acaba de llamar open) 2 – Enviado 3 – Recibiendo 4 - A punto*/ /*status: Estado genérico de la conexión HTTP 200: Completado con éxito 404: No se encontró URL*/ if(http. readyState == 4 && http.status == 200){ var response = http.responseText; /*responseText: contenido devuelto: xml, html, json, texto plano*/ if(response){ document.getElementById(&quot; ajax_res &quot;).innerHTML = response; } } } Jorge Nieves 1 Diciembre 2010
    • Frameworks que lo implementan Jorge Nieves 1 Diciembre 2010
    • AJAX : Lenguajes JSP?? ASP NET?? PHP?? Jorge Nieves 1 Diciembre 2010
    • AJAX : Cielo o Infierno?? Jorge Nieves 1 Diciembre 2010
      • Incrementa la usabilidad de las páginas web
      • Creamos webs con un interfaz muy visual sin flash
      • Optimiza el uso del ancho de banda
      • Aumenta la velocidad de visualización de datos en una web.
      • Parecerse a las aplicaciones de escritorio .
      • Evitar los tiempos de espera al usuario.
      • Porque las soluciones anteriores fallaban en algo: Java Applets, FLASH, …
      • Mejorar rendimiento .
      Jorge Nieves 1 Diciembre 2010
      • Las páginas con AJAX son más tediosas y complejas de desarrollar.
      • Restricción de ajax (Seguridad): Uso entre nombres de dominios distintos.
      • Sitios con Ajax usa más recursos en el servidor. (Se usa más veces el servidor no aumenta el uso del ancho de banda).
      Jorge Nieves 1 Diciembre 2010
    •  MALAS NOTICIAS: CUESTA MÁS HACER UNA WEB.  BUENAS NOTICIAS: EL USUARIO FINAL ESTARÁ MÁS SATISFECHO DEL PRODUCTO.  Jorge Nieves 1 Diciembre 2010
    • ¿Funciona igual en todos los navegadores?
      • http://www.w3schools.com/ajax/default.asp
      Jorge Nieves 1 Diciembre 2010
    • AJAX = ¿Moda? Jorge Nieves 1 Diciembre 2010
    • EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010
    • EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010
    • AJAX : Traza de código Jorge Nieves 1 Diciembre 2010
      • Ajax no necesita ningún plugin (flashplayer) para ser visualizado en el navegador y se acerca más a los estándares de la W3C.
      • Las herramientas de desarrollo de flash no son libres ( Licencias ).
      • Generalmente las páginas que contienen o usan Flash se cargan más despacio .
      • La mayor parte del contenido cargado por flash no posiciona bien en buscadores . (Aunque se han hecho adelantos).
      AJAX vs. FLASH… Jorge Nieves 1 Diciembre 2010
    • AJAX : Accesibilidad Jorge Nieves 1 Diciembre 2010
    • AJAX : Casos de uso Carrito de la compra con ajax: http:// icondock.com /icons/ http:// citysurfshops.co.uk http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php Web realizada por ajax (tabs): http:// nettuts.s3 . amazonaws.com /011_ jQuerySite / sample / index.html#terms http://www.glassbox-js.com/#about Gmaps http:// www.wikimapia.org /#lat=25.7998912&lon=0.3515625&z=11&l=3&m= b&tag =4979 (Gmaps) Validación y envío de formularios por ajax: http:// demo.tutorialzine.com /2009/08/ creating -a- facebook - like - registration - form - with - jquery / (registro en línea) http:// midmodesign.com / downloads /ajaxcontactformv1/ (registro en línea) http:// res.nodstrum.com / autoComplete / index.htm (auto completar) http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin Captcha con ajax: Ventanas deslizantes (Envío de datos de configuración mediante ajax): ( http://my.yahoo.com/ ) (My Yahoo!) http:// yensdesign.com / tutorials / shoutbox / ( Chat) http://jquery.com/demo/thickbox/ ( Ventanas modales) http:// www.mysqlajaxtableeditor.com /Example1. php (Filtrados, ordenaciones y listados más vistosos) http:// www.ajaxf1 . com /demo/ ajaxupload / (Upload) Jorge Nieves 1 Diciembre 2010
    • CONSIDERACIÓN FINAL: “ PIENSA EN LO QUE NECESITA EL USUARIO” Jorge Nieves 1 Diciembre 2010
    • “ Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo” — Benjamín Franklin Jorge Nieves 1 Diciembre 2010
    • Gracias por venir! ;) Jorge Nieves 1 Diciembre 2010
      • Bibliografía y referencias:
      • http:// www.openajax.org / whitepapers / Introducing %20Ajax%20and% 20OpenAjax . php
      • http://www.w3schools.com/ajax/default.asp
      • http://web-kreation.com/all/101-free-photo-image-galleries-ajax-flash-php/
      • http://www.w3schools.com/htmldom/default.asp
      • http://www.softwaresecretweapons.com/jspwiki/javascriptrefactoringforsaferfasterbetterajax
      • http://www.adaptivepath.com/ideas/essays/archives/000385.php
      • http:// ajaxpatterns.org/wiki/index.php?title = AJAXFrameworks
      • http:// www.nosolousabilidad.com / articulos / experiencia_del_usuario.htm
      • http:// www.usolab.com / wl /2008/01/el-iceberg-de-la-experiencia- d.php
      • http://www.torresburriel.com/weblog/2010/01/25/proyecto-rediseno-de-solmeliacom/
      AJAX : ¿Algo más? Jorge Nieves 1 Diciembre 2010