Programming in HTML5 with JavaScript and CSS3

Transcripción

1

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

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

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

5 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. 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 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 Styling texto Styling Bloquear elementos CSS3 Selectores Mejora de efectos gráficos utilizando CSS3

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

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

8 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. 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 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. Apoyo a los factores de forma múltiple Creación de una interfaz de usuario adaptable

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

10 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. 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 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. Introducción a la Web Sockets Envío y recepción de datos mediante Web Sockets

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

12