Programming in HTML5 with JavaScript and CSS3

Programming in HTML5 with JavaScript and CSS3
DESCRIPCION MODULOS DE CAPACITACION
Módulo 1: Introducción a HTML y CSS
Este módulo proporciona una visión general de HTML y CSS, y describe cómo utilizar
Visual Studio 2012 para construir una aplicación web.
Lecciones
 Visión general de HTML
 Estudio de las CSS
 Crear una aplicación Web mediante Visual Studio 2012
Laboratorio: Explorando la Aplicación Conferencia Contoso
 Tutorial de la Aplicación Conferencia Contoso
 Examinar y modificar la aplicación Conferencia Contoso
Después de completar este módulo, los alumnos serán capaces de:
 Describir los elementos y atributos HTML básicas.
 Explicar la estructura de CSS.
 Describir las herramientas disponibles en Visual Studio 2012 para crear
aplicaciones Web.
Sistemas Informáticos del Valle
www.siv.com.co
Módulo 2: Creación y Styling HTML5 páginas
Este módulo describe las nuevas características de HTML5, y explica cómo crear y
páginas HTML5 estilo.
Lecciones
 Creación de una página HTML5
 El estilo de una página HTML5
Laboratorio: Creación y Styling HTML5 Páginas
 Creación de páginas HTML5
 Styling HTML5 Páginas
Después de completar este módulo, los alumnos serán capaces de:
 Crear páginas estáticas utilizando las nuevas características disponibles en
HTML5.
 Utilice CSS3 para aplicar el estilo básico de los elementos de una página
HTML5.
Módulo 3: Introducción a JavaScript.
Este módulo proporciona una introducción al lenguaje JavaScript, y muestra cómo
utilizar JavaScript para añadir interactividad a las páginas HTML5
Lecciones
 Visión general de la sintaxis JavaScript
 Programación del DOM HTML con Javascript
 Introducción a jQuery
Laboratorio: Visualización de datos y manejo de eventos mediante JavaScript
 Visualización de datos mediante programación
 Gestión de eventos
Sistemas Informáticos del Valle
www.siv.com.co
Después de completar este módulo, los alumnos serán capaces de:
 Explica la sintaxis de JavaScript y describir cómo usar JavaScript con HTML5.
 Escriba el código JavaScript que manipula el DOM HTML y gestiona los
eventos.
 Describir cómo utilizar jQuery para simplificar el código que utiliza muchas
APIs comunes de JavaScript.
Módulo 4: Creación de formularios para recopilar datos y Validar entrada de
usuario
Este módulo describe los nuevos tipos de entrada disponibles con HTML5, y explica
cómo crear formularios para recopilar y validar la entrada del usuario mediante el
nuevo HTML5 atributos y código JavaScript.
Lecciones
 Información general de las formas y tipos de entrada
 Validación de entrada de usuario mediante atributos de HTML5
 Validación de entrada de usuario mediante JavaScript
Laboratorio: Creación de un formulario y Validación de Datos del Usuario
 Crear un formulario y Validación de entrada de usuario mediante atributos de
HTML5
 Validación de entrada de usuario mediante JavaScript
Después de completar este módulo, los alumnos serán capaces de:
 Crear formularios que utilizan los nuevos tipos de entrada HTML5.
 Validar la entrada del usuario y proporcionar información mediante el uso de
los nuevos atributos de HTML5.
 Escriba el código JavaScript para validar la entrada del usuario y proporcionar
información en los casos en que no sea adecuado utilizar atributos de HTML5
Sistemas Informáticos del Valle
www.siv.com.co
Módulo 5: La comunicación con un remoto origen de datos
Este módulo describe cómo enviar y recibir datos hacia y desde una fuente de datos
a distancia mediante el uso de un objeto XMLHttpRequest y mediante la realización
de operaciones de jQuery AJAX.
Lecciones
 Envío y recepción de datos mediante el uso XMLHTTPRequest
 Envío y recepción de datos mediante operaciones jQuery AJAX
Laboratorio: Comunicación con un Remote Data Source
 Recuperación de datos
 Serialización y Transmisión de datos
 Refactorización del código utilizando el método ajax jQuery
Después de completar este módulo, los alumnos serán capaces de:
 Serializar, deserializar, enviar y recibir datos mediante el uso de objetos
XMLHttpRequest.
 Simplifique código que serializa, deserializa, envía y recibe datos mediante el
método ajax jQuery
Módulo 6: El estilo de HTML5 utilizando CSS3.
Este módulo describe cómo el estilo de las páginas HTML5 y elementos mediante el
uso de las nuevas características disponibles en CSS3
Lecciones
 Styling texto
 Styling Bloquear elementos
 CSS3 Selectores
 Mejora de efectos gráficos utilizando CSS3
Sistemas Informáticos del Valle
www.siv.com.co
Laboratorio: El estilo de texto y Block Elementos utilizando CSS3
 El estilo de la barra de navegación
 El estilo de la Cabecera de página
 El estilo de la página Acerca de
Después de completar este módulo, los alumnos serán capaces de:
 Elementos de texto estilo de una página HTML5 utilizando CSS3.
 Aplicar el estilo para bloquear elementos utilizando CSS3.
 Utilice los selectores CSS3 para especificar los elementos que deben de estilo
en una aplicación web.
 Implementar efectos gráficos y transformaciones mediante el uso de las
nuevas propiedades de CSS3.
Módulo 7: Creación de objetos y métodos mediante el uso de JavaScript.
Este módulo explica cómo escribir código JavaScript bien estructurado y de fácil de
mantener, y cómo aplicar los principios orientados a objetos para el código JavaScript
en una aplicación web.
Lecciones
 Escribiendo JavaScript bien estructurados
 Creación de objetos personalizados
 Extendiendo Objetos
Código de Refinación de mantenibilidad y extensibilidad: Lab
 Heredando desde objetos
 Refactoring código para utilizar objetos
Después de completar este módulo, los alumnos serán capaces de:
 Describir
los beneficios de la estructuración de código JavaScript
cuidadosamente para ayudar mantenibilidad y extensibilidad.
 Explicar las mejores prácticas para la creación de objetos personalizados en
JavaScript.
Sistemas Informáticos del Valle
www.siv.com.co
 Describir la forma de extender los objetos personalizados y nativas para
agregar funcionalidad.
Módulo 8: Creación de páginas interactivas utilizando APIs de HTML5
Este módulo describe cómo utilizar algunas APIs de HTML5 comunes para agregar
características interactivas a una aplicación web. Este módulo también explica cómo
depurar y el perfil de una aplicación web.
Lecciones
 Interacción con Archivos
 Incorporación Multimedia
 Reaccionando a Navegador Ubicación y contexto
 Depuración y perfilar una aplicación Web
Laboratorio: Creación de páginas interactivas utilizando HTML5 API
 Incorporación de vídeo
 La incorporación de Imágenes
 Uso de la API de geolocalización
Después de completar este módulo, los alumnos serán capaces de:
 Utilice el arrastrar y soltar, y las API de archivos de interactuar con archivos en
una aplicación web.
 Incorporar audio y vídeo en una aplicación web.
 Detectar la ubicación del usuario que ejecuta una aplicación web mediante la
API de geolocalización.
 Explique cómo depurar y el perfil de una aplicación web mediante el uso de la
API de sincronización Web y las herramientas de desarrollo de Internet
Explorer.
Sistemas Informáticos del Valle
www.siv.com.co
Módulo 9: Adición Desconectado Soporte a Aplicaciones Web
En este módulo se describe cómo añadir soporte offline a una aplicación web, para
permitir la aplicación para continuar funcionando en el navegador del usuario, incluso
si el navegador está desconectado de la red.
Lecciones
 La lectura y escritura de datos localmente
 Adición de soporte offline utilizando la memoria caché de aplicaciones
Laboratorio: Adición Desconectado Apoyo a una aplicación Web
 La implementación de la caché de la aplicación
 La implementación de almacenamiento local
Después de completar este módulo, los alumnos serán capaces de:
 Guardar y recuperar datos de forma local en el ordenador del usuario mediante
el uso de la API de almacenamiento local.
 Proporcionar apoyo en línea para una aplicación web mediante el uso de la
API de caché de la aplicación.
Módulo 10: Implementación de una interfaz de usuario adaptable
Este módulo describe cómo crear páginas HTML5 que pueden detectar y adaptarse a
diferentes dispositivos y factores de forma dinámica.
Lecciones
 Apoyo a los factores de forma múltiple
 Creación de una interfaz de usuario adaptable
Sistemas Informáticos del Valle
www.siv.com.co
Laboratorio: Implementación de una interfaz de usuario adaptable
 Crear una ampliación-friendly de estilos
 Adaptación del diseño de página para ajustarse a un Factor de forma diferente
Después de completar este módulo, los alumnos serán capaces de:
 Describir la necesidad de detectar las capacidades del dispositivo y reaccionar
a diferentes factores de forma en una aplicación web.
 Crear una página Web que se puede adaptar dinámicamente su disposición
para que coincida con diferentes factores de forma.
Módulo 11: Creación de Gráficos Avanzados
Este módulo describe cómo crear gráficos avanzados para una aplicación web HTML5
utilizando un elemento Canvas, y mediante el uso de gráficos vectoriales escalables.
Lecciones
 Creación de gráficos interactivos mediante el uso de gráficos vectoriales
escalables
 Programación Dibujo Gráficos utilizando un lienzo
Laboratorio: Creación de gráficos avanzados
 Creación de un mapa interactivo Lugar utilizando Scalable Vector Graphics
 Creación de una insignia del altavoz mediante el uso de un elemento canvas
Después de completar este módulo, los alumnos serán capaces de:
 Utilice gráficos vectoriales escalables para agregar gráficos interactivos a una
aplicación.
 Dibujar gráficos complejos en un elemento Canvas de HTML5 utilizando
código JavaScript.
Sistemas Informáticos del Valle
www.siv.com.co
Módulo 12: La animación de la interfaz de usuario
Este módulo describe la manera de mejorar la experiencia del usuario en una
aplicación web HTML5 añadiendo animaciones.
Lecciones
 Aplicación de transiciones CSS
 Transformando Elementos
 Aplicando CSS Animations Key-frame
Laboratorio: Elementos de la interfaz de usuario Animación
 Aplicación de transiciones a elementos de la interfaz de usuario
 Aplicando Animaciones Key-Frame
Después de completar este módulo, los alumnos serán capaces de:
 Aplicar transiciones CSS para elementos en una página HTML5, JavaScript y
escribir código para detectar cuando se ha producido una transición.
 Describir los diferentes tipos de transiciones 2D y 3D disponibles con CSS3
 Implementar animaciones complejas mediante el uso de CSS key-frames y
código JavaScript.
Módulo 13: Implementación de Real-Time Communications mediante el uso de
Web Sockets.
Este módulo explica cómo utilizar Web Sockets para transmitir y recibir datos entre
una aplicación web HTML5 y un servidor.
Lecciones
 Introducción a la Web Sockets
 Envío y recepción de datos mediante Web Sockets
Sistemas Informáticos del Valle
www.siv.com.co
Laboratorio: Implementación de Real-Time Communications mediante el uso de
Web Sockets
 Recepción de datos de Socket Web
 Envío de datos a un Socket Web
 El envío de múltiples tipos de mensajes para o de un Socket Web
Después de completar este módulo, los alumnos serán capaces de:
 Explicar el funcionamiento de Web Sockets y describen cómo enviar y recibir
datos a través de un Socket Web.
 Utilice la API Socket Web con JavaScript para conectarse a un servidor de
socket Web, enviar y recibir datos, y manejar los diferentes eventos que
pueden ocurrir cuando se envía o se recibe un mensaje.
Módulo 14: Creación de un proceso de trabajo Web
Este módulo describe cómo utilizar los procesos de trabajo Web para realizar
operaciones de larga duración de forma asíncrona y mejorar la capacidad de
respuesta de una aplicación web HTML5.
Lecciones
 Introducción a los Web Workers
 Realización de procesamiento asincrónico utilizando un Trabajador Web
Laboratorio: Creación de un proceso de trabajo Web
 Mejorar la respuesta mediante el uso de un Trabajador Web
Después de completar este módulo, los alumnos serán capaces de:
 Describir el propósito de un proceso de trabajo Web, y cómo puede ser
utilizado para realizar el procesamiento asincrónico, así como proporcionar
aislamiento para operaciones sensibles.
 Utilice las API trabajadores Web de código Javascript para crear, ejecutar y
monitorear un proceso de trabajo Web
Sistemas Informáticos del Valle
www.siv.com.co
Sistemas Informáticos del Valle
www.siv.com.co