Curso de AJAX con JQuery y Scriptaculous

Ajax sirve para brindar interactividad a las páginas web a través de interfaces gráficas más amigables e intuitivas para el usuario, que permitan mejorar la experiencia de navegabilidad.

Permite crear efectos como:

• Carrusel de imágenes 2D y 3D
• Calendarios visuales
• Menú dinámico e interactivo.
• Ordenamiento ascendente y descendente de datos en tablas
• Arrastrar y soltar elementos de la página
• Ventanas flotantes
• Álbum de imágenes

Las librerías y frameworks de JQuery y Scriptaculous son software libre y de código abierto las cuales permiten simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

JQuery es la librería web más popular escrita en JavaScript que implementa la tecnología AJAX y que ha permitido revolucionar el concepto de dinamismo en las páginas web a través de poderosas y fáciles funciones que logran efectos visuales sorprendentes y controles ricos (widgets) poderosos que hace 10 años eran imposibles de imaginar dentro de una página web.

Ejemplos de portales que implementan dicha tecnologías son: Google Maps, Facebook, Hotmail, Gmail, Yahoo, Amazon, NASA, CNN, NBC, DELL, Adobe y muchos más.

Objetivos del curso

Una vez concluido el curso, el participante podrá crear entre otras cosas:

• Crear páginas (X) HTML, CSS, JavaScript con validación de formularios en tiempo real.
• Producir efectos visuales y animaciones sencillas equiparables a las de Flash sobre elementos (X)HTML.
• Enviar formularios al servidor para ser procesados y actualizar la página con la respuesta generada del lenguaje de Servidor (JSP, PHP, ASP).

Ejercicios

El curso de AJAX se basa en ejercicios prácticos asignados por el instructor. De esta manera en el desarrollo del temario podrás, entre otras cosas:

• Crear un portal con solicitudes AJAX
• Incorporar mapa Google en portal con señalización de ubicación
• Implementar galería de Imágenes en portal con JQuery
• Desarrollar menús y banners para publicidad, desplazables en el portal
• Crear un formulario "Contáctame" AJAX
• Sitio de carrito de compras
• Foros en línea
• Autocompletar tipo Google
• Formularios con listas desplegables en cascada tipo: País-Estado-Municipio

Temario

El curso de AJAX contempla iniciar desde el punto más elemental ya que está dirigido a participantes que desconocen esta técnica de programación para sitios Web. Por este motivo, el temario del curso de AJAX incluye conceptos útiles, estructurados de la siguiente manera:

• Introducción a AJAX
  • ¿Qué es AJAX?
  • Web 2.0
  • Alcances de AJAX, aplicaciones
  • Rich Internet Applications
• Lenguajes para AJAX
  • JavaScript esencial para AJAX
  • CSS escencial para AJAX
  • XHTML escencial para AJAX
• El objeto XMLHttpRequest
  • Orígenes
  • Instanciación
  • Métodos
  • Implementación de mi primer hola Mundo AJAX
• Patrón de Diseño MVC
  • Implementación del MVC en AJAX
  • Implementación de un portal con AJAX
• Base de Datos con AJAX
  • Utilizar JSP o PHP con AJAX
• Introducción a Librerias y Frameworks AJAX
  • Prototype
  • Scriptacolus
  • JQuery
• Prototype y Scriptaculous
  • Interacción con las páginas: ocultar, mostrar, interacción formularios
  • Efectos Visuales avanzados
  • Controles Ricos: autocompletar, ventanas, paneles, rich text box, calendario visual
• JSON
  • Que es JSON
  • Sintaxis y utilización
• JQuery
  • Interacción con las páginas: animar, modificar CSS dinámico
  • Efectos Visuales avanzados
  • Controles Ricos: carrusel de imágenes, arrastrar y soltar, menú dinámico
• Funciones y Técnicas Avanzadas de las librerías
  • Generar URL bajo demanda
  • Refresco automático
  • Control de Cache
  • Arrastrar y Soltar
  • Un vistazo a Mootools, Yahoo User Interface (YUI)

Ventajas adquiridas

No sólo basta conocer las instrucciones y comandos que generan los efectos visuales, y validaciones de formularios, es por ello que nuestro curso integra las mejores técnicas de programación, basados en la experiencia de los patrones de diseño como el MVC (Modelo-Vista-Controlador), que mejoran el desarrollo e implementación de proyectos.

Para ello se enseña a lo largo del curso:

• Uso de mnemotécnicas y convenciones
• Principios de usabilidad en los sitios Web
• Diseños de Servicios Web basados en la reutilización, portabilidad, y escalabilidad

Cursos que siguen

Al aprobar el curso de AJAX con JQuery y Scriptaculous, el alumno puede estudiar por ejemplo

• Dreamweaver
• Diplomado Webmaster
• Java

Preguntas frecuentes

¿Cuál es la diferencia de AJAX y Flash?

AJAX está enfocado a brindar dinamismo a las páginas web, es software libre y código abierto, permite simplificar la manera de interactuar con los documentos XHTML mediante CSS y JavaScript, lo que te permite incorporar efectos visuales ya creados y parametrizados sin necesidad de diseñar la animación desde cero, además incorpora la funcionalidad de envío de formularios, cambiar el contenido de una página web sin necesidad de recargarla; mientras que Flash esta destinado a la producción y entrega de contenido interactivo y multimedia mediante animaciones tipo video y presentaciones ejecutivas; es software de paga, es decir, se debe comprar una licencia y se incrusta dentro de las pagina web, pero no se acostumbra para interactuar ni modificar los contenidos de las paginas HTML.

¿Es cierto que Dreamweaver puede crear elementos de tecnología AJAX como menús desplegables y acordeones?

Sí, aunque para sacar mayor provecho de la tecnología AJAX debemos profundizar en el tema a través del estudio de las librerías JQuery y Scriptaculous que se analizan el curso.

¿Qué editor se puede utilizar para Ajax?

Se puede utilizar desde un bloc de notas hasta un editor profesional como: Dreamweaver, Netbeans, Microsoft Visual Web Developer.