La tecnología conocida como Web 2.0 ha sido introducida por varias de las
empresas con mayor presencia en la Internet como google, yahoo, Microsoft entre
otras. La idea es mejorar la experiencia del usuario adicionando interactividad a las
aplicaciones web, optimizando el uso del ancho de banda y componiendo la interfaz
con el usuario (GUI) de forma más eficiente, agradable y dinámica. Ajax es el
conjunto de herramientas (JavaScript, XML, XMLHttpRequest, DOM, CSS, etc) que
se perfilan como la próxima generación de herramientas para el desarrollo de
soluciones en la Web 2.0.
Objetivos
Conocer los fundamentos de Ajax enfocándose en la aplicación práctica de estas
tecnologías.
Comprender el DOM (modelo de objetos de documento) en la práctica y la
introducción de dinamismo e interacción mediante el uso de JavaScript y CSS.
Entender la interacción asincrónica de los datos del servidor hacia el cliente usando
tecnologías como XMLHttpRequest y XML, JSON.
Conocer los frameworks de Ajax más importantes y aplicarlos en el desarrollo de
proyectos para web 2.0.
Dirigido a
Programadores con conocimientos básicos de HTML y algún lenguaje de
programación web (ASP, JSP, PHP, Ruby, python, etc), se recomienda un
conocimiento básico de bases de datos SQL.
Duración: 45 Horas
PLAN DE ESTUDIOS
HTML Y EL MODELO DE OBJETOS DEL DOCUMENTO (DOM)
• Estructura jerárquica de un documento html.
• XML
• Estructura de XML
• DOM nodos y árboles.
• Estableciendo referencias a objetos (window, document, div).
• Introducción a propiedades y métodos de los elementos.
JAVASCRIPT
• JavaScript como lenguaje de script del lado del cliente.
• Variables, tipos de datos (textos, números).
• Operadores aritméticos, concatenación de cadenas.
• Operadores lógicos y relacionales
• Funciones de conversión.
• Condicionales y bucles.
• Arreglos en JavaScript.
• Funciones y archivos de funciones.
• Manejo y control de eventos.
• Generalización del concepto de objeto – propiedad – método.
• Herencia
• ExcepcionesJAVASCRIPT Y MANIPULACION DEL DOM.
• getElementById()
• getElementsByTagName()
• getElementsByName()
• Manipulación de la estructura de un documento (Crear, y eliminar nodos)
MODELO DE OBJETOS DEL NAVEGADOR BOM
• Objetos window, document, location, navigator, screen, history.
• Crear, mover, redimensionar y cerrar ventanas de navegador.
• Obtener información sobre el propio navegador.
• Propiedades de la página actual y de la pantalla del usuario.
• Gestión de cokies.
HOJAS DE ESTILO EN CASCADA (CSS)
• Que son las CSS.
• Aplicación de CSS a los componentes de un documento HTML.
• Identificación y agrupación de elementos (id, class).
• Elementos span y div.
• Posicionamiento y ubicación de elementos.
• Capas con la propiedad z-index.
• Ejemplos de aplicación (formularios, imágenes).
INTRODUCCION A AJAX
• El objeto XMLHttpRequest
• Solicitudes POST y GET al servidor
• Intercambio de información mediante texto simple, XML
• Verificación de estado de las solicitudes
• Manejo de solicitudes múltiples
• Ejemplos con div, span, formularios
• JSON
• Ejemplo de selects enlazados (departamentos, ciudades)
• Ejemplo de autocomplet.
PROTOTYPE
• Extensión del lenguaje con nuevos métodos y propiedades
• Simplificación del manejo de DOM y CSS
• Manipulación de elementos de formularios HTML: Habilitar, deshabilitar, etc.
• Manejo avanzado de eventos (detección de eventos globales y de elementos
específicos)
• Simplificación de solicitudes XMLHttpRequest
• Actualizar secciones de una pagina de manera continua y automática.
JQUERY
• Uso de selectores CSS para simplificar manejo del DOM
• Uso de selectores CSS para simplificar manejo de formas HTML
• Manejo avanzado de eventos
• Extensión del lenguaje con nuevos métodos y propiedades
• Simplificación del manejo de CSS
• Uso de efectos visuales
• Simplificación de solicitudes XMLHttpRequest
• Uso de diálogos y ventanas personalizadas
• Calendarios
• Dividir el contenido en pestañas o "tabs"
• Dividir el contenido en secciones o "acordeones"
• Arrastrar y dejar caer (drag and drop)
• Listas ordenables