Curso Desarrollo Web con JavaScript - AJAX

Cursos relacionados

Enlaces informativos

Documentos con informacion del curso

HTML - XHTML

• Definicion de etiquetas y atributos
• Estructuras de paginas HTML y XHTML
• Codificacion de paginas : ISO-8859-1 vs UTF-8
• Manejo de texto
• Comentarios HTML para deshabilitar bloques de contenido
• Incluir imagenes en las paginas
• Formatos de imagenes : GIF vs JPG vs PNG
• Utilizacion de Hipervinculos
• Etiquetas depreciadas de uso comun
• Manejo de espacio en blanco
• Manejo de caracteres especiales y reservados mediante el uso de entidades HTML
• Uso de listas para organizar la informacion
• Utilizar tablas HTML para listados y ordenamiento de elementos
• Manejo de colores : Por nombre, Hexadecimal, RGB, selectores de colores (color pickers) y generadores de colores
• Utilizar rutas absolutas y relativas para definir la ubicacion de contenido
• Complementos para trabajr con paginas HTML : Code Burner, Clear Cache Button y View Source With
• Complementos para trabajar con paletas de colores : ColorZilla, Rainbow, Eye Dropper

CSS - Hojas de estilo en cascada

• Utilizar CSS para definir la presentacion de los elementos de una aplicacion web
• Tipo de CSS : En linea, incorporados y externos
• Definicion de los estilos mediante reglas y selectores
• Aplicar los estilos : Por tipo de elemento, por calse y por identificador (id)
• Agrupar selectores
• Utilizacion de DIV's y SPAN's
• Margenes
• Espaciado
• Caracteristicas del fondo de un elemento : Color, imagen, posicion, etc.
• Manejo de fuentes (fonts)
• Caracteristicas del texto : Color, alineacion, etc.
• Definir los estados de los Hipervinculos
• Manejo de los bordes un element o: Grosor, estilo, color, etc.
• Dfinir caracteristicas de listas : Tipo de marcador, imagenes como marcadores, etc.
• Definir el tipo de apuntador o cursor del raton
• Editores especializados en CSS (gratuitos y comerciales)
• Referencias de CSS en linea
• Complementos para trabajar CSS : CSS Viewer, cssscan, Code Burner y Firebug

Internet Explorer

• Configuracion de Internet Explorer para trabajar con JavaScript
• Se cubren las versiones 6, 7, 8 y 9
• Habilitar notificacion de errores de JavaScript
• Descativar advertencias de ejecucion de JavaScipt local
• Complementos para desarrollo : Developer Toolbar y DebugBar

Firefox

• Configuracion de Internet Explorer para trabajar con JavaScript
• Se cubren las versiones 3.5, 3.6 y 4
• Habilitar y deshabilitar JavaScript
• Utilizar la consola de errores de JavaScript
• Complementos para desarrollo : Web Developer y FireBug

Safari

• Configuracion de Safari para trabajar con JavaScript
• Se cubren la version 5
• Habilitar y deshabilitar JavaScript
• Habilitar el menu oculto de Desarrollo
• Uso del Inspector Web para examinar los errores de JavaScript

Google Chrome

• Configuracion de Google Chrome para trabajar con JavaScript
• Habilitar la consola de JavaScript para examinar los errores

Opera

• Configuracion de Opera para trabajar con JavaScript
• Se cubren la version 10.6
• Habilitar y deshabilitar JavaScript
• Utilizar la consola de errores de JavaScript
• Uso de Dragonfly para examinar los errores de JavaScript

Introduccion a JavaScript

• Agregar codigo JavaScript a las paginas HTML
• La etiqueta <noscript> para cuando no esta disponible JavaScript
• Despleagr informacion en el navegador con JavaScript
• Motores de renderizado de los navegadores : Trident, Gecko, WebKit, Presto
• Motores de JavaScript : JScript, Chakra, TraceMonkey, Nitro, V8, Carakan
• Medir el desepeño de los navegadores : SunSpider, V8 Behcmark, Dromaeo, Cracken
• El desempeño de los navegadores a traves de sus diferentes versiones
• Complementos utiles : JSView

Depuracion de errores

• Errores tipicos al programar con JavaScript
• Deteccion y depuracion - debugging - de errores
• Manejo de la Consola de errores para facilitar la depuracion

El lenguaje de programacion JavaScript

• Declaracion de variables
• Tipos de datos de las variables
• Verificacion de tipos de datos
• Conversion de tipos de datos
• Operadores : Aritmeticos, de comparacion, logicos (boleanos), de asignacion
• Estatutos condicionales : if...else, switch
• Ciclos : while, for, for in
• Definicion y llamado de funciones
• Alcance (scope) de las variables
• Curiosidades de JavaScript : Funciones duplicadas y manejo de argumentos (parametros)
• Tipos de funciones : Procedurales, Variables, Anomimas, Auto-ejecutables
• Objetos predefinidos del lenguaje : Strings, Math, Number, Date, Array, Object
• Manejo de strings : Obtener longitud, buscar sub cadenas, eleminar espacios, etc.
• Objeto Math : Generar valores aleatorios, obtener los valores mas altos o bajos, etc.
• Objeto Number : Lidiar con la propiedad NaN de un valor
• Objeto Date : Obtener la fecha actual, generar fechas, obtener partes de una fecha
• Objeto Array, trabajar con arreglos : Definir, agregar o quitar elementos, arreglos asociativos y multidimensionales

Document Object Model (DOM)

• Organizacion de objetos en el navegador mediante El BOM y el DOM
• Objetos del BOM - Browser Object Model -
• Objetos del DOM - Docment Object Model -
• Moverse en el DOM para referenciar objetos de la paginas
• Referenciar elementos : Por numero, por nombre y por identificador (ID)
• Eficientar las referencias a los elementos
• Referencias por Nombre vs Por ID
• Referneciar elementos cuyo nombre contiene caracteres no permitidos
• Manipular los atributos de los elementos : Leerlos, asignarlos, cambiarlos y eliminarlos
• Manejo de Eventos en el DOM
• Asignacion de Manejadores de Eventos - Event Handlers -
• Eventos Cancelables y No Cancelables
• JavaScript No Invasivo - Unobtrusive JavaScript - vs JavaScript Invasivo
• Mejorar la legibilidad y organizacion del codigo con JavaScript No Invasivo
• Una alternativa menos popular para manejar eventos : Event Listeners
• Event Handlers vs Event Listeners

DOM - Formas HTML

• Definicion de una Forma HTML
• Utilizando Formas para capturar datos
• Botones
• Cajas de texto
• Grupos de opciones (Radio Buttons)
• Casillas (Checkboxes)
• Listas y menus de opciones
• Utilizar imagenes en lugar de botones
• Juegos de campos (Fieldset)
• Manipular Formas con JavaScript
• Envio de formularios via codigo
• Manipular cajas de texto : Solo lectura, deshabilitar, obtener valores, asignar foco, etc.
• Casillas y grupos de seleccion : Organizar por arreglo y por por nombre individual
• Trabajar con casillas y grupos : Validar seleccion, obtener valores, definir si opciones esta marcada o no, etc.
• Listas y Menus : Obtener valores de opciones seleccionadas, detectar cuando cambian las opciones, etc.
• Modificar dinamicamente listas y menus : Agregar o quitar opciones, pasar opciones de una lista a otra
• Referencias genericas de elementos del DOM con keyword - this -
• Funciones procedurales para validar captura : Numeros enteros, con decimales, negativos, valores vacios, eliminar espacios en blanco, etc.
• Bloquear el Copiar/Pegar en cajas de texto
• Deteccion de teclas oprimidas : Controlar la captura con Listas Negras y Listas Blancas
• Limitar el numero de caracteres en un area de texto

Manipular CSS con JavaScript

• Manipular dinamicamente las propiedades CSS de los elementos en el DOM
• Bordes
• Fondo (Background)
• Fuente y Texto
• Alto y ancho
• Margenes y espaciado
• Ocultar y mostar elementos
• Asignacion simultanea de varias propiedades
• Asignar y quitar multiples clases CSS a los elementos

DOM - Manipular Tablas HTML con JavaScript

• Jerarquia de objetos de una tabla HTML
• Obtener las colecciones de renglones y celdas de una tabla
• Recorrer programaticamente una tabla
• Coloreo alternado de los renglones
• Resaltar un renglon cuando el apuntador del raton pasa sobre el mismo
• Asignacion dinamica de manejadores de eventos
• Seleccionar y de-seleccionar renglones con un click
• Obtener los valores de celdas individuales de un renglon
• Modificar dinamicamente una tabla : Aregar, quitar y modificar renglones y celdas
• Ordenamiento (sort) dinamico de los renglones directamente en el navegador sin utilizar SQL

XML

• Introduccion al XML
• Cargar documentos XML con el XML DOM
• Diferencias del XML DOM entre Internet Explorer y los otros navegadores
• Limitaciones del XML DOM de Safari y Google Chrome
• Cargar y procesar un documento XML en el navegador
• Procesar documentos XML simples y complicados
• Uso de validadores de XML para detectar problemas con los documentos

JSON

• Introduccion al JSON
• JSON vs XML
• Soporte a formato JSON en los navegadores
• Libreria externa json2.js vs Objeto nativo JSON vs eval()
• Definicion de un objeto JSON
• Convertir estructura JSON a un objeto de JavaScript
• Procesar objetos JSON simples, regulares y complicados
• Uso de validadores de JSON para detectar problemas con los objetos
• Aplicar formato legible a los objetos JSON para hacerlos mas legibles

Monitorear trafico HTTP entre Navegador y Servidor Web

• Descripcion general de una solicitud HTTP entre navegador y servidor
• Problemas comunes que se pueden presentar en el proceso
• Encabezados HTTP utiles para monitorear
• URL's de solicitud bien formados
• Codigo de estatus HTTP
• Tipos MIME
• Validar formato de resultados del servidor Web
• Servicios en linea utiles para examinar los encabezados HTTP
• Herramientas utiles para Internet Explorer : Web Development Helper, Fiddler, HttpWatch, IEWatch
• Nuevas herramientas de trabajo de Internet Explorer 9
• Herramientas utiles para Firefox : Live HTTP HEaders, HTTP Fox, Firebug
• Safari : Seguimiento de trafico con el Inspector Web
• Google Chrome : Seguimiento de trafico con las Herramientas del Desarrollador
• Opera : Seguimiento de trafico con las Dragonfly

AJAX - JavaScript Asincronico

• Introduccion a las tecnicas AJAX
• Consideraciones de seguridad
• Lidiar con conexciones Cross-Domain
• Permitir conexiones Cross-Domain con encabezados HTTP
• El objeto XMLHttpRequest
• Definir una solictud AJAX
• Solicitudes Sincronas vs Solicitudes Asincronas a los Servidores Web
• Monitorear estatus de solicitud
• Validar resultado de solictud
• Lidiar con problemas de conexion comunes
• Procesar informacion recibida del servidor Web
• Uso de animaciones o - spinners - para indicar el estatus de la solicitud
• Procesar texto simple, html, XML y JSON del servidor Web
• Manejo del tipo MIME de JSON en los navegadores
• Manejo de solicitudes multiples AJAX en la misma pagina
• Solicitudes via POST vs GET
• Complementos utiles : XML Tree, JSONView

Frameworks o Librerias de JavaScript

• Frameworks populares de JavaScript
• Criterios para evaluar y seleccionar un Framework
• Aplicaciones Web - nativas - vs Aplicaciones Web - RIA - (Richa Internet Applications)
• Librerias - ligeras - vs librerias - pesadas -
• Encuestas de uso de Frameworks de AJAXIAN.COM
• Estudio de Frameworks mas comunes de Pingdom.com
• Tendencias de uso de builtwith.com
• Tendencias de uso de Google Trends
• Comparativo de libros de Frameworks disponibles en Amazon.com
• Uso de los Frameworks de JavaScript en los lenguajes de servidor (PHP, ASP.NET, Ruby On Rails, Python, etc.)
• Uso de los Frameworks de JavaScript en aplicaiones Open Source populares (WordPress, Joomla, Drupal, Moodle, etc.)
• Complementos utiles : Library Detector, Chrome Sniffer, BuiltWith Profiler

Frameworks disponibles en el curso
El curso incluye - una - de las siguientes combinaciones de Frameworks:

• jQuery - jQuery UI
• Prototype - Script.acolo.us

jQuery

• Descargar jQuery
• Libreria normal vs Minificada - minified -
• Utilizar la Red de Distribucion de Contenido (CND) de Google vs Alojar al libreria localmente
• Simplificar el codigo JavaScript con jQuery
• Referenciar el DOM con jQuery
• Uso de selectores CSS para eficientar y agilizar las referencias al DOM
• Leer y asignar valores de formas HTML
• Modificar atributos de elementos del DOM
• Manejo de eventos
• Aplicar y remover propiedades CSS
• Mostrar y ocultar elementos aplicando efectos visuales
• Mejoras al lenguaje : Nuevas funciones para manipular strings y arreglos
• Manipular el contenido del DOM : Agregar contenido dentro de o alrededor de otros elementos
• Simplificaciones de solicitudes AJAX
• Solicitudes AJAX locales y globales
• Manejo de resultados de solictudes en formato texto simple, html, XML y JSON
• Solicitudes pre-autorizadas - Pre-Flighted -
• Solicitudes via POST y GET

jQuery UI

• Uso de la libreria de componentes de interfase de jQuery
• Personalizacion y descarga de jQuery UI : Componentes y temas
• Uso del componente de Dialogos
• Componente de Calendario
• Componente de Pestañas o - Tabs -
• Componente de Acordeon
• Componente de Auto-Completar
• Componente de Botones
• Componente de Barra de Progreso
• Componente de Desplazamiento - Slider -
• Implementacion de Arrastrar y Dejar Caer - Drag And Drop -
• Cambiar de tamaño elementos de la interfase
• Seleccionar elemetos elementos de la interfase
• Aplicar ordenamiento a listas - Sortable -
• Aplicar efectos visuales adicionales al ocultar o mostrar elementos
• Aplicar secuencias de animacion a los elementos de la interfase

Prototype

• Descargar Prototype
• Utilizar la Red de Distribucion de Contenido (CND) de Google vs Alojar al libreria localmente
• Protoaculous - libreria Minificada - minified -
• Simplificar el codigo JavaScript con Prototype
• Referenciar el DOM con Prototype
• Uso de selectores CSS para eficientar y agilizar las referencias al DOM
• Leer y asignar valores de formas HTML
• Manejar eventos con Form Observers
• Monitoreo de eventos periodicos y por eventos
• Simplificaciones de solicitudes AJAX con AJAX.Request
• Actualizacion automatica de contenido con AJAX.Updater
• Actualizaciones continuas con AJAX.PeriodicalUpdater
• Manejo de resultados de solictudes en formato texto simple, html, XML y JSON
• Solicitudes pre-autorizadas - Pre-Flighted -
• Solicitudes via POST y GET
• Modificar atributos de elementos del DOM
• Mostrar y ocultar elementos
• Aplicar y remover propiedades CSS
• Manipular el contenido del DOM : Agregar contenido dentro de o alrededor de otros elementos
• Mejoras al lenguaje : Nuevas funciones para manipular strings, arreglos y numeros

Script.acolo.us

• Uso de la libreria de efectos visuales de Prototype
• Descarga de Script.acolo.us
• Aplicar efectos simples a elementos del DOM
• Efectos en paralelo
• Combinar efectos multiples con Filas
• Componente de Auto-Completar
• Aplicar ordenamiento a listas - Sortable -
• Implementacion de Arrastrar y Dejar Caer - Drag And Drop -

Material extra

• NOTA
• Los temas extras se cubren conforme tiempo disponible e interes de los asistentes
• Si le interesa cubrir muchos de estos temas es necesario agendar tiempo - adicional -

BOM - Window

• Manejo de dialogos nativos del navegador
• Ventanas secundarias : Popup's
• Definir la interfase de las ventanas secundarias : Menues, barra de herramientas, etc.
• Comunicacion entre ventana principal y ventanas secundarias
• Uso de Dialogos Modales en los diferentes nevegadores
• Ejecucion de codigo con Tiempos Limit - Timeout's -
• Ejecucion de codigo con Intervalos de tiempo
• Trabajar con el Historial del navegador
• Marcos en linea - IFRAME's -
• Comunicacion entre iframe's y ventana principal
• Marcos tradicionales

BOM - Screen

• Obtener propiedades de resolucion de video
• Altura Maxima y Altura Maxima Disponible
• Ancho Maximo y Ancho Maximo Disponible
• Centrar ventanas secundarias

BOM - Navigator

• Obtener informacion del navegador
• Definir el idioma del navegador
• Definir si esta disponible Java y Cookies
• Detectar que navegador esta utilizando el visitante al sitio
• Examinar los valores - User Agent - de diferentes navegadores
• Deteccion del navegador : - Browser Sniffing -
• Deteccion del navegador : Deteccion de Capacidades u Objetos

BOM - location

• Obtener informacion del URL de la pagina cargada
• Refrescar pagian via codigo
• Redireccionar el navegador via codigo

BOM - Anclajes (Links)

• Examinar y modificar los atributos de un anclaje

Expresiones Regulares

• Beneficios de las expresiones regulares
• Definir una expresion regular
• Evaluar un valor contra una expresion
• Comparar contra un rango de caracteteres
• Comparar contra un rango de numeros
• Definir si un valor contiene caracteres fuera de un rango permitido
• Uso de clases predefinidas
• Calificadores : Definir el numero de ocurrencias de un valor en una expresion
• Delimitadores : Definir un numero exacto de ocurrencias de un valor en una expresion
• Agrupar expresiones
• Caracteres especiales : Inicio y final de un valor, comodines
• Alternar expresiones para evaluar un valor contra varias expresiones
• Validar captura numerica : Valores positivos, negativos, con y sin decimales, listas de numeros
• Validar captura de numeros telefonicos
• Validar captura de fechas
• Validar captura de nombres, listas alfabeticas, listas alfanumericas
• Validar captura de RFC's
• Validar captura de extensiones de archivos
• Validar captura de correos electrnicos
• Validar captura de URL's
• Validar captura de direcciones IP
• Complementos utiles : Regular Expression Tester, Regular Expression Checker