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

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

¿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: https://es.wikipedia.org/wiki/AJAX (en la parte de AJAX).

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: https://librosweb.es/libro/ajax/capitulo_7.html y https://es.wikipedia.org/wiki/AJAX (en la parte de los antecedentes). Entre estas dos paginas se saca toda la información de historia.

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: https://librosweb.es/libro/ajax/capitulo_1.html y https://es.wikipedia.org/wiki/AJAX (en la parte de tecnologias incluidas).

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

AJAX VS. TRADICIONAL Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: https://librosweb.es/libro/ajax/capitulo_1.html. Aquí se va a hablar sobre la arquitectura de AJAX y sobre las diferencias.

AJAX VS. TRADICIONAL Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: https://librosweb.es/libro/ajax/capitulo_1.html. Aquí se va a hablar sobre la arquitectura de AJAX y sobre las diferencias.

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: https://es.wikipedia.org/wiki/XMLHttpRequest

XMLHTTPREQUEST Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: https://es.wikipedia.org/wiki/XMLHttpRequest

XMLHTTPREQUEST Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: https://es.wikipedia.org/wiki/XMLHttpRequest

ESTADOS XMLHTTPREQUEST Ajax y JQuery Daniela Vélez y Jorge Iván Villay Para la exposición leer: https://librosweb.es/libro/ajax/capitulo_7/metodos_y_propiedades_del_objeto_xmlhttprequest.html

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

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

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

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

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

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

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

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

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

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

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

¿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.

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

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

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

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

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

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

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

JQUERY UI ANIMACIONES animate(parámetros, duración, easing, callback) animate(parámetros, opciones) stop() AnimacionUI.html http://jqueryui.com/demos/ Ajax y JQuery Daniela Vélez y Jorge Iván Villay Informacion:http://codehero.co/jquery-desde-cero-animaciones-y-efectos/

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

¿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

BIBLIOGRAFÍA https://es.wikipedia.org/wiki/AJAX https://librosweb.es/libro/ajax/capitulo_7.html https://es.wikipedia.org/wiki/XMLHttpRequest http://goyorock.blogspot.com/2012/03/historia-de-jquery.html https://es.wikipedia.org/wiki/JQuery http://www.neoteo.com/jquery-los-mejores-desarrolladores/ http://es.slideshare.net/continuumslides/introduccin-a-jquery Ajax y JQuery Daniela Vélez y Jorge Iván Villay

BIBLIOGRAFÍA http://www.desarrolloweb.com/manuales/manual-jquery.html http://codehero.co/jquery-desde-cero-animaciones-y-efectos/ https://jquery.com/ http://happycoders.net/show.php?publication=como_instalar_jquery https://www.codecademy.com/courses/web-beginner-en-1NG7i/0/1 https://jqueryui.com/ http://librosweb.es/libro/fundamentos_jquery/capitulo_7/metodos_ajax_de_jquery.html http://www.funcion13.com/introduccion-a-las-peticiones-ajax-en-jquery/ https://api.jquery.com/append/ Ajax y JQuery Daniela Vélez y Jorge Iván Villay