Jorge Iván Villay Daniela Vélez Vélez

Presentación del tema: "Jorge Iván Villay Daniela Vélez Vélez"— Transcripción de la presentación:

1 Jorge Iván Villay Daniela Vélez Vélez
Ajax y jQuery Jorge Iván Villay Daniela Vélez Vélez

2 CONTENIDO Historia. Características. Instalación. Arquitectura.
Temas propios de cada tecnología. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

3 ¿QUÉ ES AJAX? Técnica de desarrollo web para crear aplicaciones interactivas, ejecutables en el navegador y con una comunicación asincrónica con el servidor. Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: (en la parte de AJAX).

4 HISTORIA Y ANTECEDENTES
Jesse James Garrett (2005). Microsoft's Remote Scripting. Iframe. Alex Hopmann (1998) - Exchange 2000. HTML estáticas Vs. DHTML. XMLHTTP. Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: y (en la parte de los antecedentes). Entre estas dos paginas se saca toda la información de historia.

5 AJAX es una combinación de diferentes tecnologías.
CARACTERÍSTICAS AJAX es una combinación de diferentes tecnologías. Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: y (en la parte de tecnologias incluidas).

6 INSTALACIÓN AJAX no requiere ningún tipo de instalación o elemento adicional para funcionar. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

7 AJAX VS. TRADICIONAL Ajax y JQuery Daniela Vélez y Jorge Iván Villay
Para la exposición leer: Aquí se va a hablar sobre la arquitectura de AJAX y sobre las diferencias.

8 AJAX VS. TRADICIONAL Ajax y JQuery Daniela Vélez y Jorge Iván Villay
Para la exposición leer: Aquí se va a hablar sobre la arquitectura de AJAX y sobre las diferencias.

9 XMLHTTPREQUEST Interfaz empleada para realizar peticiones HTTP(S) a servidores Web que proporcionan contenido dinámico y actualizaciones asíncronas en las páginas. Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer:

10 XMLHTTPREQUEST Ajax y JQuery Daniela Vélez y Jorge Iván Villay
Para la exposición leer:

11 XMLHTTPREQUEST Ajax y JQuery Daniela Vélez y Jorge Iván Villay
Para la exposición leer:

12 ESTADOS XMLHTTPREQUEST
Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer:

13 JQUERY Biblioteca JavaScript rápido, pequeño y con funciones.
Simplifica la interacción con documentos HTML. Manejo de eventos Desarrollo de animaciones Interacción con AJAX. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

14 HISTORIA Creador: John Resig Primera versión: 26 de Agosto del 2006
Sorprendió porque simplificaba la programación de código de JavaScript. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

15 HISTORIA Ha evolucionado solucionando bugs, optimizando su código y ampliando funcionalidades. Última versión: 1.11 Lanzamiento: 24 enero de 2014. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

16 CARACTERÍSTICAS Modificar la apariencia y contenido de la página
Crear efectos visuales y animaciones Manipular la hoja estilos CSS AJAX Ajax y JQuery Daniela Vélez y Jorge Iván Villay

17 CARACTERÍSTICAS Manejar eventos de elementos de la página
Soporta extensiones Interactividad y modificaciones del árbol DOM Ajax y JQuery Daniela Vélez y Jorge Iván Villay

18 INSTALACIÓN Entrar a www.jquery.com Ajax y JQuery
Daniela Vélez y Jorge Iván Villay

19 INSTALACIÓN 2. Darle clic al botón “Download jQuery” Ajax y JQuery
Daniela Vélez y Jorge Iván Villay

20 INSTALACIÓN 3. Escoger la versión que desea instalar y dar clic para descargar Diferencia entre 1.x y 2.x es que la última no funciona con los navegadores Internet Explorer 6, 7 y 8. Ejecución más rápida Ajax y JQuery Daniela Vélez y Jorge Iván Villay

21 INSTALACIÓN 4. Después se agrega el plugin en nuestro documento html tal como se muestra en el siguiente ejemplo: Ajax y JQuery Daniela Vélez y Jorge Iván Villay

22 INSTALACIÓN Nota: Si no desea descargar el plugin, se puede incluir de manera remota gracias a los CDN de Google y Microsoft Ajax y JQuery Daniela Vélez y Jorge Iván Villay

23 ARQUITECTURA Ajax y JQuery Daniela Vélez y Jorge Iván Villay

24 ¿DONDE SE PONE? El código de jQuery se debe de poner dentro de la función $(document).ready(function(){..}) ya que de esta forma detecta que la página puede ser manipulada de forma segura. Este código sólo correrá una vez que el DOM está listo para JavaScript a ejecutar.

25 SELECTORES Es una forma de permitirnos elegir un elemento (o varios) entre todos los que tenemos en nuestro documento HTML para acceder de una manera rápida y sencilla a uno o varios elementos de elementos del DOM y luego aplicar sobre ellos cualquier tipo de instrucción, evento, animación, etc. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

26 SELECTORES De etiquetas Por identificador Por clase Por varias clases
Asterisco “*” Concatenar varios selectores distintos Selectores.html Ajax y JQuery Daniela Vélez y Jorge Iván Villay

27 EVENTOS jQuery permite manejar los eventos de cualquier elemento de un documento HTML. El código casi siempre se ve así ó Ajax y JQuery Daniela Vélez y Jorge Iván Villay

28 EVENTOS Algunas funciones: click(): Eventos click
keypress(): Eventos de teclado hover(): Eventos para pasar el cursor por algún elemento change(): Cambios en estados de elementos HTML Eventos.html Ajax y JQuery Daniela Vélez y Jorge Iván Villay

29 ANIMACIONES Nos permite agregar efectos visuales, animaciones y efectos a la mayoría de los elementos de un documento HTML Ajax y JQuery Daniela Vélez y Jorge Iván Villay

30 ANIMACIONES Ejemplos: show() y hide(): Muestra u oculta elementos.
show(speed, callback): Especifica el tiempo de duración y el otro se llama cuando se termina. toggle(): Si está oculto se muestra o viceversa. fade(): Desvanece y aparece objetos. Animaciones.html Ajax y JQuery Daniela Vélez y Jorge Iván Villay

31 JQUERY UI EFECTOS Añade soporte para animación de colores y transiciones de clase y un conjunto de efectos personalizados están disponibles para su uso al mostrar y ocultar elementos o añadir un poco de atractivo visual. Ajax y JQuery Daniela Vélez y Jorge Iván Villay

32 JQUERY UI ANIMACIONES animate(parámetros, duración, easing, callback)
animate(parámetros, opciones) stop() AnimacionUI.html Ajax y JQuery Daniela Vélez y Jorge Iván Villay Informacion:

33 MANIPULACIÓN DOM CON JQUERY
Ejemplo: El método .Append () inserta el contenido especificado como el último hijo de cada elemento de la colección de jQuery Ejemplo: ManipulacionDOM.html Ajax y JQuery Daniela Vélez y Jorge Iván Villay

34 ¿Que vimos hoy? Definiciones de Ajax y jQuery Historias
Características Instalaciones Objeto XMLHttpRequest Estados XMLHttpRequest Ajax vs Tradicional Arquitectura Selectores Eventos Animaciones jQuery UI animaciones Manipulación DOM con jQuery Petición Ajax con jQuery Ajax y JQuery Daniela Vélez y Jorge Iván Villay

35 BIBLIOGRAFÍA https://es.wikipedia.org/wiki/AJAX
Ajax y JQuery Daniela Vélez y Jorge Iván Villay

36 BIBLIOGRAFÍA http://www.desarrolloweb.com/manuales/manual-jquery.html
Ajax y JQuery Daniela Vélez y Jorge Iván Villay