Your SlideShare is downloading. ×
Clase 5  AJAX - Desarrollo de aplicaciones móviles
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

Clase 5 AJAX - Desarrollo de aplicaciones móviles

1,033
views

Published on

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones. …

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.
Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model
1
(DOM).
Estas aplicaciones se ejecutan en el navegador (cliente) de los usuarios.

Published in: Education

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

  • Be the first to like this

No Downloads
Views
Total Views
1,033
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
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. Desarrollo de Aplicacionespara Móviles AJAX
  • 2. ¿Qué es AJAX? Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones.
  • 3. ¿Qué es AJAX? Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página.
  • 4. ¿Qué es AJAX?Estas aplicaciones se ejecutan en el navegador (cliente) de los usuarios.
  • 5. Tecnologías incluidas en AjaxAjax es una combinación detecnologías existentes: • XHTML (o HTML) • DOM • XMLHttpRequest • XML
  • 6. Tecnologías incluidas en Ajax XHTML o HTML y CSS Para crear una presentación basada en estándares
  • 7. Tecnologías incluidas en Ajax DOM - Document Object Model Para la interacción y manipulación dinámica de la presentación.
  • 8. Tecnologías incluidas en Ajax XMLHttpRequest Para intercambiar datos de forma asíncrona con el servidor web.
  • 9. Tecnologías incluidas en AjaxXMLFormato usado para la transferencia de datos solicitados al servidor,aunque cualquier formato puede funcionar, incluyendo HTMLpreformateado, texto plano,etc
  • 10. Tecnologías incluidas en AjaxJavaScriptPara unir todas las demás tecnologías.
  • 11. Tecnologías incluidas en AjaxAjax no constituye una tecnología en sí, sino que es untérmino que engloba a un grupo de estas que trabajanconjuntamente.
  • 12. Navegadores que permiten AjaxAlgunos de los navegadores que permiten AJAX son:• Navegadores basados en Gecko como Mozilla, Mozilla Firefox versión 7.1 y superiores• Navegadores basados en WebKit como Google Chrome de Google o Safari de Apple.• Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él• Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores.
  • 13. Aplicaciones basadas en AJAX• Gestores de correo electrónico: Gmail, Yahoo Mail, Windows Live Mail.• Cartografía: Google Maps, Yahoo Maps, Windows Live Local.• Aplicaciones web y productividad: Google Docs, Zimbra, Zoho.• Otras: Netvibes [metapágina], Digg [noticias], Meebo [mensajería], 30 Boxes [calendario], Flickr [fotografía
  • 14. Estructura de la aplicación• El núcleo de una aplicación AJAX esta compuesta de por componentes de Javascript, componentes de XML y un lenguaje del lado del servidor (http).• Para entender que hace una aplicación AJAX, lo vamos a comparar con una aplicación tradicional de comunicación entre el navegador y el servidor que nos sirve la información.
  • 15. Estructura de la aplicación
  • 16. Estructura de la aplicación• Cada pagina individual que puede contener textos, imágenes, formularios, representa un todo y deber cargarse y recargarse en su totalidad.• Ej Formulario: podemos completar datos, borrar, corregir pero hasta tanto no presionemos el botón ‘enviar’ la información no viaja al servidor. Al presionar el botón ‘enviar’ debemos esperar hasta poder ver la página actualizada.
  • 17. Estructura de la aplicaciónInconvenientes de este tipo de `conversación’: – Retrasos significativos al volver a cargar la página. – Interrupción del flujo de la información para el usuario. – Para poder ver la información actualizada, es necesario enviar toda la información de la página al servidor, y el servidor, nos debe devolver la información completa nuevamente.
  • 18. Estructura de la aplicación
  • 19. Estructura de la aplicaciónAJAX, hace uso de las páginas de manear interactiva. Responde a las tareas que lleve a cabo el usuario sin interrupción y llevando a cabo los procesos en segundo plano mientras que el usuario puede seguir usando la aplicación sin problemas. ¿Cómo lo hace?
  • 20. Estructura de la aplicación• Crea capa de procesamiento entre la página web del usuario y el servidor, llamada Motor AJAX.• Interceptar las peticiones del usuario y en un segundo plano maneja las comunicaciones con el servidor asincrónicamente.• Tanto las peticiones como las respuestas del servidor no necesitan coincidir con las acciones que lleve a cabo el usuario, pueden pasar en cualquier momento sin que el usuario tenga que estar esperando la respuesta para seguir usando la aplicación.
  • 21. Estructura de la aplicación• El navegador le permite al usuario seguir trabajando, mientras que en segundo plano AJAX lleva a cabo la petición.• AJAX usa XMLHttpRequest para llevar a cabo las peticiones y para que el motor AJAX en segundo plano siga la pista de lo que esta ocurriendo y sepa en que momento el servidor esta preparado para devolver la información al navegador.
  • 22. Estructura de la aplicación• Dentro de la aplicación AJAX, tenemos tres elementos: – Motor AJAX – El objeto XMLHTTPRequest – Procesamiento de los datos dentro del servidor (la comunicación le llega desde xmlhttpRequest como otra httprequest más)
  • 23. Estructura de la aplicación• Las aplicaciones AJAX no tienen en cuenta el lenguaje o SO que existen en el servidor.• La única condición, es que el motor AJAX del lado del cliente, reciba del servidor, una respuesta bien formateada, si es así. AJAX funcionara con cualquier lenguaje del lado del servidor.• AJAX tiene sentido para aplicaciones web que usan scrip del lado del servidor para su funcionamiento.
  • 24. Estructura de la aplicación ¿Cómo generamos o actualizamos una aplicación AJAX?
  • 25. Estructura de la aplicación
  • 26. Estructura de la aplicación1) Decidir que evento o que acciones del usuario serán las responsables de que se lleve a cabo el envió de una petición http asincrónica. Ej. Podemos decidir que cuando se lleve a cabo el evento onMouseOver sobre una imagen, de cómo resultado una petición al servidor para recuperar información sobre lo que contiene la imagen
  • 27. Estructura de la aplicación2) El gestor de eventos, crea una petición al servidor, que el motor AJAX envía mediante XMLHTTPRequest de modo asincrónico
  • 28. Estructura de la aplicación3) Una vez hecha la petición, es necesario crear una serie de rutinas con código javascript, para monitorear el progreso en esa petición, hasta que el servidor nos diga que la petición, se completo satisfactoriamente.
  • 29. Estructura de la aplicación4) Nuevamente necesitamos una serie de rutinas javascript para recuperar la información que nos devuelve el servidor y procesar los dicha información..
  • 30. Estructura de la aplicación5) Procesados los datos devueltos, se envían a la página web que se actualizara con esta nueva información
  • 31. Estructura de la aplicaciónVeamos el codigo:<html> <head> <title>Hola Mundo con AJAX</title></head> <body> Este primer ejemplo en ajax<br> obtiene un fichero del servidor web llamado passwords.txt y el contenido obtenido lo muestra con un alert en esta página web.<br><script type="text/javascript">objetoAjax = new XMLHttpRequest(); // Realizar peticion HTTP objetoAjax.open(GET, passwords.txt, false); objetoAjax.send(null); alert(objetoAjax.responseText);</script> </body> </html>
  • 32. Estructura de la aplicación<html> Lo que hace es: <head> <title>Hola Mundo con AJAX</title></head> • Instanciar el objeto ajax <body> • El método open contrario a lo que parece Este primer ejemplo en ajax<br> no hace mucho lo único que hace es preparar la petición. obtiene un fichero del servidor web llamado • La petición que consiste en traer el passwords.txt y el contenido obtenido lo contenido de un fichero de texto desde el muestra con un alert en esta página web.<br> servidor ajax<script type="text/javascript"> • El fichero se llama passwords.txtobjetoAjax = new XMLHttpRequest(); • El envió de la petición es realizado con // Realizar peticion HTTP send objetoAjax.open(GET, passwords.txt, false); • El resultado de la petición lo podemos objetoAjax.send(null); acceder con la propiedad responseText • Imprimir el resultado o en este caso alert(objetoAjax.responseText); mostrarlo en una ventana del tipo alert()</script> de javascript </body> </html>
  • 33. Estructura de la aplicaciónnew XMLHttpRequest(); crea una instancia XMLHTTPRequestPropiedades del objeto XMLHttpRequestreadystate:0 Sin estado1 configuramos la petición con open solamente2 petición enviada pero sin respuesta3 el servidor responde a la petición4 petición completada
  • 34. Estructura de la aplicaciónnew XMLHttpRequest(); crea una instancia XMLHTTPRequeststatus: Esta propiedad nos muestra los códigos del servidor a la petición ajax.200 petición procesada correctamente404 recurso no encontrado500 error del servidor403 sin permiso en el servidor405 problemas con el método Existen varios estados mas pero esto es en función del servidor pero a manera de ilustración tenemos los anteriores
  • 35. Estructura de la aplicaciónobjetoAjax.open(GET, passwords.txt, false); Este método configura la petición para su envió de momento no hace nada y tenemos como parámetros:tipo envió: GET o POSTurl: dirección de envió, ejemplo http://localhost/passwords.txt ó passwords.txtasíncrono: true ó false para una app síncrona (como esto es ajax es raro que tengamos peticiones del tipo síncrono)Adicionalmente el user y pass del servidor
  • 36. Estructura de la aplicaciónobjetoAjax.send(null); Este método envía la petición configurada con open. El parámetro que utiliza es opcional. Si utilizamos el tipo de datos POST: incluiremos información adicional. Si utilizamos el tipo de datos GET: será solo null
  • 37. Estructura de la aplicaciónalert(objetoAjax.responseText); Contiene en formato de texto la petición solicitada al servidor. Los valores status = 200 y readystate = 4 indican que la petición se proceso de manera correcta en el servidor y se encuentra finalizada .
  • 38. Estructura de la aplicaciónalert(objetoAjax.responseText); Contiene en formato de texto la petición solicitada al servidor. Los valores status = 200 y readystate = 4 indican que la petición se proceso de manera correcta en el servidor y se encuentra finalizada . Así quedaría la validación:function mostrar() { if(objetoAjax.readyState == 4) { if(objetoAjax.status == 200) { //alert(objetoAjax.responseText); document.write(objetoAjax.responseText); } }}
  • 39. Indicador de progreso Los indicadores Ajax son herramientas que ayudan a los usuarios a entender qué está sucediendo en el sistema y cuáles son las respuesta de éste. Los indicadores deberían mostrarse ni bien comienza el requerimiento y ocultarse cuando termina
  • 40. Indicador de progreso Los indicadores Ajax son herramientas que ayudan a los usuarios a entender qué está sucediendo en el sistema y cuáles son las respuesta de éste. Los indicadores deberían mostrarse ni bien comienza el requerimiento y ocultarse cuando termina
  • 41. Indicador de progresoIndicadores simples Indicadores de progreso Brindan una pista visual sobre que Si una operación necesita más tiempo una petición está siendo llevada a para ejecutarse deberías utilizar cabo. Se pueden mostrar como texto indicadores de progreso. simple, o como una imagen, usualmente animada: Este tipo de indicadores proveen una información real acerca del estado de Texto simple: Mostrar un mensaje progreso, usualmente mostrando cuánto significativo del tipo: “Enviando e- tiempo ha pasado y cuánto queda para mail”. que termine la petición. Imagen animada: Animaciones Los indicadores de progreso también rotativas. pueden mostrar un mensaje de estado explicando qué está pasando en el momento preciso.
  • 42. Indicador de progreso• Cualquiera sea la opción que selecciones, debes asegurarte que el indicador sea claramente visible.• Dependiendo del propósito, los indicadores pueden ser colocados dentro del mismo contexto que el elemento que comenzó la petición o pueden mostrarse en una única posición para todas las peticiones.• Ej: Google Mail ha centralizado los indicadores Ajax en la parte superior de la ventana que se revela ante cualquier petición Ajax. Visita: http://preloaders.net/
  • 43. Botones de retroceso• Utilizando la etiqueta anclaje <a> y el nombre del parámetro con un hash en la url, se obtiene la funcionalidad del retroceso.• En las pruebas realizadas, el código funciona con el botón de atrás, adelante y el botón de actualización
  • 44. Botones de retroceso Otro ejemplo es con-botones.htm que lo pueden encontrar dentro de la carpeta botón-retroceso.
  • 45. FEEDBACK¿Alguna duda? ¿Preguntas?
  • 46. La próxima clase vamos a ver: Diseño de interacción - Android • Convenciones de interacción de Android • La biblioteca jQTouch

×