Ajax tsis

2,247 views
2,139 views

Published on

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

No Downloads
Views
Total views
2,247
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax tsis

  1. 1. Instituto Tecnológico de Parral Ingeniería en Sistemas Computacionales Tópicos Selectos de la Ingeniería de Software.
  2. 2. <ul><li>Titular: M.C. Edgar Omar Bañuelos Lozoya. </li></ul><ul><li>Elaborado por: </li></ul><ul><li>Juan Sotero de Jesús. </li></ul><ul><li>Oscar Omar Quiñones Garnica. </li></ul><ul><li>Fredy Ponce Holguín. </li></ul><ul><li>Iván Arturo Gardea Porras. </li></ul>
  3. 3. Agenda <ul><li>Concepto Ajax. </li></ul><ul><li>Antecedentes de Ajax. </li></ul><ul><li>Las tecnologías que forman Ajax. </li></ul><ul><li>Diferencia más importante entre una aplicación web tradicional y aplicación web Ajax. </li></ul><ul><li>Navegadores que permiten Ajax. </li></ul><ul><li>Navegadores que no permiten Ajax. </li></ul><ul><li>Aplicaciones más conocidas basadas en Ajax. </li></ul><ul><li>Desventajas Ajax. </li></ul><ul><li>Ventajas Ajax. </li></ul><ul><li>Librerías Ajax. </li></ul><ul><li>Ejemplos Ajax . </li></ul>
  4. 4. <ul><li>En realidad, el término AJAX es un acrónimo de Asynchronous JavaScript + XML , que se puede traducir como &quot;JavaScript asíncrono + XML&quot;. </li></ul>
  5. 5. Algunos definen a AJAX de la siguiente forma: <ul><li>Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes </li></ul>
  6. 6. AJAX CONCEPTO <ul><li>Cargar y renderizar una página, luego mantenerse en esa página mientras scripts y rutinas van al servidor buscando, en background , los datos que son usados para actualizar la página solo rerenderizando la página y mostrando u ocultando porciones de la misma. </li></ul>
  7. 7. Las dos capacidades en cuestión son: <ul><li>La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página. </li></ul><ul><li>La posibilidad de analizar y trabajar con documentos XML. </li></ul>
  8. 8. Antecedentes de Ajax <ul><li>A pesar de que el término «Ajax» fuese creado en 2005, la historia de las tecnologías que permiten Ajax se remonta a una década antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto . Sin embargo, las técnicas para la carga asíncrona de contenidos en una página existente sin requerir recarga completa remontan al tiempo del elemento iframe (introducido en Internet Explorer 3 en 1996) y el tipo de elemento layer (introducido en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla). </li></ul>
  9. 9. <ul><li>El Microsoft's Remote Scripting (o MSRS, introducido en 1998) resultó un sustituto más elegante para estas técnicas, con envío de datos a través de un applet Java el cual se puede comunicar con el cliente usando JavaScript. Esta técnica funcionó en ambos navegadores, Internet Explorer versión 4 y Netscape Navigator versión 4. </li></ul><ul><li>Desde que XMLHttpRequest está implementado en la mayoría de los navegadores, raramente se usan técnicas alternativas. </li></ul>
  10. 10. Las tecnologías que forman AJAX son: <ul><li>XHTML y CSS, para crear una presentación basada en estándares. </li></ul>
  11. 11. Las tecnologías que forman AJAX son: <ul><li>DOM, para la interacción y manipulación dinámica de la presentación. </li></ul><ul><li>XML, XSLT y JSON, para el intercambio y la manipulación de información. </li></ul>
  12. 12. Las tecnologías que forman AJAX son <ul><li>XMLHttpRequest, para el intercambio asíncrono de información. </li></ul><ul><li>JavaScript, para unir todas las demás tecnologías. </li></ul>
  13. 13. Tecnologías agrupadas bajo AJAX
  14. 14. Modelo de las aplicaciones web
  15. 15. Diferencia más importante entre una aplicación web tradicional y aplicación web AJAX
  16. 16.
  17. 17. Navegadores que permiten Ajax <ul><li>Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, K-Meleon, IceWeasel, Flock, Epiphany, Galeon y Netscape versión 7.1 y superiores. </li></ul>
  18. 18. Navegadores que permiten Ajax <ul><li>Navegadores basados en WebKit como Google Chrome de Google o Safari de Apple. </li></ul>
  19. 19. Navegadores que permiten Ajax <ul><li>Microsoft Internet Explorer para Windows versión 5.0 y superiores, y los navegadores basados en él. </li></ul>
  20. 20. Navegadores que permiten Ajax <ul><li>Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores y el Web Browser for S60 de Nokia tercera generación y posteriores </li></ul>
  21. 21. Navegadores que permiten Ajax <ul><li>Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores. </li></ul>
  22. 22. Navegadores que no permiten Ajax <ul><li>Opera 7 y anteriores </li></ul><ul><li>Microsoft Internet Explorer para Windows versión 4.0 y anteriores </li></ul><ul><li>Anteriores a Safari 1.2 </li></ul><ul><li>Dillo </li></ul><ul><li>Navegadores basados en texto como Lynx y Links </li></ul><ul><li>Navegadores para personas con capacidades especiales visuales (Braille) </li></ul><ul><li>Algunos navegadores de teléfonos móviles </li></ul><ul><li>Navegador de la PSP </li></ul>
  23. 23. Algunas de las aplicaciones más conocidas basadas en AJAX <ul><li>Gestores de correo electrónico: Gmail, Yahoo Mail, Windows Live Mail. </li></ul><ul><li>Cartografía: Google Maps, Yahoo Maps, Windows Live Local. </li></ul><ul><li>Aplicaciones web y productividad: Google Docs, Zimbra, Zoho . </li></ul>
  24. 24. Desventajas Ajax <ul><li>Las páginas con AJAX son más difíciles de desarrollar que las páginas estáticas. </li></ul><ul><li>Las páginas creadas dinámicamente mediante peticiones sucesivas AJAX, no son registradas de forma automática en el historial del navegador, así que haciendo clic en el botón de &quot;volver&quot; del navegador, el usuario no será devuelto a un estado anterior de la página, en cambio puede volver a la última página que visitó. Soluciones incluyen el uso de IFrames invisible para desencadenar cambios en el historial del navegador y el cambio de la porción de anclaje de la dirección (después de un #). </li></ul><ul><li>Los motores de búsquedas no entienden JavaScript. La información en la página dinámica no se almacena en los registros del buscador. </li></ul>
  25. 25. Desventajas Ajax <ul><li>El sitio con Ajax usa más recursos en el servidor. Recomendación: sólo usar las peticiones necesarias en Ajax, no desarrollar todo el sitio en AJAX. Con esto garantizamos menos recursos del servidor. </li></ul><ul><li>Es posible que páginas con Ajax no puedan funcionar en teléfonos móviles, PDA u otros aparatos. </li></ul><ul><li>Ajax no es compatible con todos los software para ciegos u otras discapacidades. </li></ul>
  26. 26. Ventajas Ajax <ul><li>1. Basado en los estándares abiertos </li></ul><ul><li>2. Usabilidad </li></ul><ul><li>3. Válido en cualquier plataforma y navegador </li></ul><ul><li>4. Beneficia las aplicaciones web </li></ul><ul><li>5. No es difícil su utilización </li></ul>
  27. 27. Ventajas Ajax <ul><li>6. Compatible con Flash </li></ul><ul><li>7. Adoptado por los “gordos” de la tecnología web </li></ul><ul><li>8. Web 2.0 </li></ul><ul><li>9. Es independiente del tipo de tecnología de servidor que se utilice </li></ul><ul><li>10. Mejora la estética de la web </li></ul>
  28. 28. Librerías Ajax
  29. 29. Estadisticas Ajax En Ajaxian publican una interesante estadística sobre la utilización de diversas librerías/frameworks para desarrollo AJAX. Las estadísticas se realizan a partir de consultas realizadas a usuarios de la propia web, independientemente de la validez o fiabilidad que cada uno pueda otorgar a este tipo de encuestas, puede ser interesante para al menos hacernos una idea de por donde van los tiros en esto del desarrollo AJAX.
  30. 30. Los Resultados Fueron Prototype 34.1% jQuery 29.3% Ext JS 22.5% Script.aculo.us 22.3% Mootools 14.3% YUI 13% raw AJAX 13% Dojo 11.9% BackBase 8.3%
  31. 31. Es un framework basado en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta que implementa las técnicas AJAX y su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails
  32. 32. Servicio de chat: Chat Prototype , y para el desarrollo de ésta aplicación ha usado: conexiones con Comet para mensajes en tiempo real, AJAX para escribir y recibir mensajes, y las librerías JavaScript prototype.js y script.aculo.us para la interacción. Adicionalmente, el desarrollador, creo una librería llamada phpSocketDaemon para este trabajo, de la cual explica y detalla en su blog.
  33. 33. Es un nuevo tipo de librerías de Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos desarrollar animaciones, y agregar interacción con la tecnología AJAX a nuestras páginas web. jQuery esta diseñado para cambiar la forma de escribir código JavaScript.
  34. 34. jQuery Alert Dialogs sustituye la funcionalidad básica proporcionada por las funciones estándar JavaScript: alert() , confirm() y prompt() . Estos cuadros de diálogos son personalizables a través de CSS y así darle un estilo profesional. Podemos incluso establecer un título para cada diálogo. A diferencia de los cuadros de diálogos estándar JavaScript, podemos usar HTML dentro del parámetro message , así podemos usar para una nueva línea: n ó <br />. Si se incluye el plugin jQuery UI Draggable podemos arrastrar y mover los diálogos desde su barra de título.
  35. 35. Es un framework del lado del cliente para el desarrollo de aplicaciones web. Tiene un sistema dual de licencia: Comercial y Opern Source. Este framework puede correr en cualquier plataforma que pueda procesar POST y devolver datos estructurados (PHP, Java, .NET y algunas otras).
  36. 36. Es una librería JavaScript que permite el uso de controles AJAX, drag & drop, y otros efectos visuales en una página web. Se distribuye mediante descargas en varios formatos de archivo, y también está incluido en Ruby on Rails y otros frameworks de desarrollo web.
  37. 37. mootools Es un framework JavaScript compacto y modular, orientado a objeto para la creación de aplicaciones web compatible con cualquier navegador.
  38. 38. Es un Framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web que utilicen tecnología AJAX. Contiene un sistema de empaquetado inteligente, los efectos de UI, drag and drop APIs, widget APIs, abstracción de eventos, almacenamiento de APIs en el cliente, e interacción de APIs con AJAX. Dojo resuelve asuntos de usabilidad comunes como pueden ser la navegación y detección del navegador, soportar cambios de URL en la barra de URLs para luego regresar a ellas(bookmarking), y la habilidad de degradar cuando AJAX/JavaScript no es completamente soportado en el cliente.
  39. 39. Es una biblioteca de clases de propósito general escrita en JavaScript que suministra características de otros lenguajes de programación como Python u Objective-C .
  40. 40. Es una librería de efectos Ajax disponible en OpenRico que permite simplificar el desarrollo de aplicaciones que utilicen esta tecnología. Mediante Rico es muy sencillo definir la operación básica de Ajax: enviar una solicitud al servidor para que devuelva información. Dispone también de algunos efectos gráficos, tablas actualizables y secciones de drag & drop.
  41. 41. Es un librería Javascript liviana y pequeña (3KB) con la cual podemos conseguir unos efectos muy interesantes. Trabaja con los frameworks Prototype y Mootools. Simple y fácil de usar. Podemos controlar ó modificar las propiedades CSS y los elementos HTML.
  42. 42. overlibmws DHTML Popup Library PlotKit - Javascript Chart Plotting qForms JavaScript API Zapatec AJAX Suite Rico Sajax Sardalya Spry Framework for Ajax Tacos TwinHelix Zebda Zephyr ZK
  43. 43. Otras Librerías Existen otras librerías también muy usuales y documentadas: AHAH AjaxAC JSAN - JavaScript Archive Network Ajax.NET Professional AjaxRequest Library ATLAS Bajax MochiKit   Code Snippets
  44. 44. DHTML API, Drag & Drop for Images and Layers DHTMLgoodies.com Dynamic Drive DynAPI Qooxdoo Engine for Web Applications JavaScript Libraries Javascript Toolbox Taconite JSL: JavaScript Standard Library Liberty moo.fx overLIB TurboWidgets
  45. 45. EJEMPLOS AJAX

×