Notas importantes del curso:

  • Se proveerá una introducción a HTML5, CSS3 y JavaScript.
  • El curso ayudara a los estudiantes a adquirir habilidades básicas de programación usando HTML5/CSS3/JavaScript.
  • Este curso es un requisito de las rutas de adiestramiento para aplicaciones Web y aplicaciones para el "Windows Store".
  • El enfoque es utilizar HTML5/CSS3/JavaScript para implementar lógica de programación, definir y usar variables, crear "loops" y "branching", desarrollar interfaces para el usuario, capturar y validar la entrada de información por el usuario, guardar datos, y crear aplicaciones bien estructuradas.

Los escenarios de laboratorio en este curso fueron seleccionados para apoyar y demostrar la estructura de varios escenarios de apliaciones. Su proposito es enfocar los principios y componentes/estructuras de codificacion que son utilizados para crear una aplicacion de HTML5.

NOTA: Este curso se creo utilizando Visual Studio 2012, instalado en Windows 8. No es estrictamente necesario usar Windows 8 o la version pagada de Visual Studio, detalles mas adelante en el curso

 

Audiencia:

  • Este curso va dirigido a desarrolladores profesionales que tiene de 6 a 12 meses de experiencia en programacion y que estan interesados en desarrollar aplicaciones  utilizando HTML 5 con JavaScript y CSS3. (Estos conocimientos les serviran para desarrollar aplicaciones para el "Windows Store" en Windows 8 o para desarrollar aplicaciones web).
  • Este cuerso va dirigido tambien a estudiantes con la siguiente experiencia:
    • 1 – 3 meses de experiencia creando apliacaciones Web, incluyendo escribiendo codigo JavaScript simple.
    • 1 mes de experiencia creando aplicaciones para clientes Windows.
    • 1 mes de experiencia usando Visual Studio 2010 o 2012.
  • Este curso no va dirigido a desarrolladores que tengan 3 meses o mas de experiencia codificando con HTML5.

 

Al completar el curso los estudiuantes podrán:

  • Explicar como utilizar Visual Studio 2012 para crear y correr una aplicación Web.
  • Describir las nuevas funcionalidades de HTML5.
  • Crear y estilizar páginas con HTML5.
  • Añadir interactividad a una página HTML5 usando JavaScript.
  • Enviar y recibir datos hacia y desde un origen de datos remoto mediante el uso de objetos XMLHttpRequest y operaciones jQuery AJAX.
  • Ponerle estilo a las páginas HTML5 utilizando CSS3.
  • Crear código JavaScript bien estructurado y de fácil mantenimiento.
  • Utilizar el API comun de HTML5 en aplicaciones Web interactivas.
  • Crear aplicaciones Web que permiten las operaciones "offline".
  • Crear páginas web HTML5 que pueden adaptarse a diferentes dispositivos y factores de forma .
  • Añadir gráficos avanzados a una página HTML5 utilizando elementos de "Canvas", y mediante el uso de "Scalable Vector Graphics".
  • Mejorar la experiencia del usuario al agregar animaciones a una página HTML5.
  • Utilizar "Web Sockets" para enviar y recibir datos entre una aplicación Web y un servidor.
  • Mejorar la capacidad de respuesta de una aplicación web que realiza operaciones de larga duración mediante el uso de procesos de trabajo Web.


Esquema del curso:

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:
  1. Vistazo a HTML
  2. Vistazo a CSS
  3. Crear una aplicación Web utilizando Visual Studio 2012
  4. Laboratorio: Exploración de la aplicación Conferencia Contoso
  5. Tutorial de la Aplicación Conferencia Contoso
  6. Examen y modificación de la solicitud de la Conferencia de Contoso
  • Después de completar este módulo, los alumnos serán capaces de:
  1. Describir los elementos y atributos HTML básicas .
  2. Explicar la estructura de la CSS.
  3. Describir las herramientas disponibles en Visual Studio 2012 para crear aplicaciones Web .
 
Módulo 2: Creación y estilo de páginas HTML5 

Este módulo describe las nuevas características de HTML5, y explica cómo crear y páginas HTML5 de estilo.

  • Lecciones
  1. Creación de una página HTML5
  2. El estilo de una página HTML5
  3. Lab: Creación y Styling HTML5 Páginas
  4. Creación de páginas HTML5
  5. Styling HTML5 Páginas
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Crear páginas estáticas utilizando las nuevas características disponibles en HTML5.
  2. Utilice CSS3 para aplicar un estilo básico a 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
  1. Descripción general de la sintaxis JavaScript
  2. La programación del DOM HTML con JavaScript
  3. Introducción a jQuery
  4. Laboratorio: Visualización de datos y manejo de eventos mediante JavaScript
  5. Visualización de datos mediante programación
  6. Gestión de eventos
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Explica la sintaxis de JavaScript y describir cómo usar JavaScript con HTML5.
  2. Escribir código JavaScript que manipula el DOM de HTML y se ocupa de los eventos .
  3. 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 se explica cómo crear formularios para recopilar y validar la entrada del usuario mediante el uso de los nuevos atributos de HTML5 y código JavaScript.

  • Lecciones
  1. Visión general de las formas y tipos de entrada
  2. Validar los datos introducidos por el usuario mediante atributos de HTML5
  3. Validar la información del usuario mediante JavaScript
  4. Lab: Creación de un formulario y la validación de los datos del usuario
  5. Crear un formulario y validación de los datos de usuario mediante atributos de HTML5
  6. Validar la información del usuario mediante JavaScript
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Crear formularios que utilizan los nuevos tipos de entrada HTML5 .
  2. Validar la entrada del usuario y proporcionar información mediante el uso de los nuevos atributos de HTML5 .
  3. 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

 

Módulo 5: La comunicación con una fuente de datos remotos

En este módulo se describe cómo enviar y recibir datos hacia y desde un origen de datos remoto utilizando un objeto XMLHttpRequest y mediante la realización de operaciones de jQuery AJAX.

  • Lecciones
  1. Envío y recepción de datos mediante el uso XMLHTTPRequest
  2. Envío y recepción de datos mediante operaciones jQuery AJAX
  3. Laboratorio: Comunicación con un Remote Data Fuente
  4. Recuperando datos
  5. La serialización y transmisión de datos
  6. Refactorización del código utilizando el método ajax jQuery
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Serializar , deserializar , enviar y recibir datos mediante el uso de objetos XMLHttpRequest.
  2. Simplificar el código que serializa , deserializa , envía y recibe datos utilizando el método ajax jQuery

 

Módulo 6: Styling 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
  1. Styling texto
  2. Styling Bloquear Elementos
  3. CSS3 Selectors
  4. Mejora de efectos gráficos utilizando CSS3
  5. Laboratorio: El estilo de texto y elementos de bloque usando CSS3
  6. El estilo de la barra de navegación
  7. Labrar el encabezado de página
  8. El estilo de la página Acerca de
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Elementos de texto del estilo en una página HTML5 utilizando CSS3 .
  2. Aplicar el estilo de bloquear elementos utilizando CSS3 .
  3. Utilice los selectores de CSS3 para especificar los elementos que se han labrado en una aplicación web .
  4. Implementar efectos gráficos y transformaciones utilizando las nuevas propiedades de CSS3 .

 

Módulo 7: Creación de objetos y métodos mediante JavaScript

En este módulo se explica cómo escribir bien estructurado y de fácil de mantener el código JavaScript y cómo aplicar los principios orientados a objetos para el código JavaScript en una aplicación web

  • Lecciones
  1. Escribiendo JavaScript bien estructurada
  2. Creación de objetos personalizados
  3. Extendiendo objetos
  4. Laboratorio: Código de Refinación de mantenibilidad y extensibilidad
  5. Heredando desde objetos
  6. Refactorización de código para utilizar objetos
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Describir los beneficios de la estructuración de código JavaScript cuidadosamente para ayudar a la mantenibilidad y extensibilidad.
  2. Explicar las mejores prácticas para la creación de objetos personalizados en JavaScript.
  3. Describir la forma de extender los objetos personalizados y nativas para agregar funcionalidad .

 

Módulo 8: Creación de páginas interactivas utilizando las API de HTML5

En este módulo se 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 perfil de una aplicación web .

  • Lecciones
  1. Interacción con Archivos
  2. Multimedia incorporación
  3. Reaccionando a la ubicación del navegador y Contexto
  4. Depuración y perfiles de una aplicación Web
  5. Laboratorio: Creación de páginas interactivas utilizando APIs de HTML5
  6. La incorporación de vídeo
  7. La incorporación de imágenes
  8. Uso de la API de geolocalización
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Utilice el arrastrar y soltar, y las API de archivo para interactuar con archivos en una aplicación web .
  2. Incorporar audio y vídeo en una aplicación web.
  3. Detectar la ubicación del usuario que ejecuta la aplicación web mediante la API de geolocalización .
  4. Explique cómo depurar y perfil de una aplicación web mediante el uso de la API de sincronización Web y las herramientas de desarrollo de Internet Explorer .

 

Módulo 9 : Añadiendo soporte offline para aplicaciones Web

En este módulo se describe cómo agregar compatibilidad sin conexión 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
  1. La lectura y escritura de datos localmente
  2. Adición de soporte offline mediante el caché de la aplicación
  3. Laboratorio: Adición Desconectado Apoyo a una aplicación Web
  4. La implementación de la caché de la aplicación
  5. Implementar almacenamiento local
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Guardar y recuperar datos de forma local en el ordenador del usuario mediante el uso de la API de almacenamiento local .
  2. 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: Implementar una interfaz de usuario adaptable

En este módulo se describe cómo crear páginas HTML5 que pueden detectar de forma dinámica y adaptarse a diferentes dispositivos y factores de forma .

  • Lecciones
  1. Apoyo a múltiples factores de forma
  2. Creación de una interfaz de usuario adaptable
  3. Laboratorio: Implementación de una interfaz de usuario adaptable
  4. Creación de una hoja de estilos para imprimir
  5. Adaptación de diseño de página para ajustar a un factor de forma diferente
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Describir la necesidad de detectar las capacidades del dispositivo y reaccionar a los diferentes factores de forma en una aplicación web .
  2. Crear una página Web que puede adaptarse dinámicamente su configuración para que coincida con diferentes factores de forma.

 

Módulo 11: Creación de Gráficos Avanzados

En este módulo se describe cómo crear gráficos avanzados para una aplicación web HTML5 usando un elemento Canvas , y mediante el uso de gráficos vectoriales escalables .

  • Lecciones
  1. Creación de gráficos interactivos por el uso de gráficos vectoriales escalables
  2. Programación Dibujar gráficos utilizando un lienzo
  3. Laboratorio: Creación de Gráficos Avanzados
  4. Creación de un mapa interactivo Sede por el uso de gráficos vectoriales escalables
  5. 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 :
  1. Utilice gráficos vectoriales escalables para agregar gráficos interactivos a una aplicación.
  2. Dibujar gráficos complejos en un elemento HTML5 Canvas utilizando código JavaScript .

 

Módulo 12: La animación de la interfaz de usuario

En este módulo se describe la forma de mejorar la experiencia del usuario en una aplicación web HTML5 , añadiendo animaciones.

  • Lecciones
  1. Aplicando CSS Transitions
  2. La transformación de los elementos
  3. Aplicando CSS Animaciones de fotogramas clave
  4. Elementos de la interfaz Animación de usuario: Lab
  5. Aplicar transiciones a Elementos de la interfaz de usuario
  6. Aplicando Animaciones de fotogramas clave
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Aplicar transiciones CSS para elementos en una página HTML5, y escribir código JavaScript para detectar cuándo se ha producido una transición.
  2. Describir los diferentes tipos de transiciones 2D y 3D disponibles con CSS3
  3. Implementar animaciones complejas mediante el uso de CSS key-frames y el código JavaScript .

 

Módulo 13 : Implementación de "Real-Time Communications" mediante el uso de "Web Sockets"

En este módulo se explica cómo utilizar Web Sockets para transmitir y recibir datos entre una aplicación web HTML5 y un servidor.

  • Lecciones
  1. Introducción a la Web Sockets
  2. Envío y recepción de datos mediante Web Sockets
  3. Laboratorio : Implementación de Real- Time Communications mediante el uso de Web Sockets
  4. Recepción de datos de Web Socket
  5. Envío de datos a un objeto Socket Web
  6. Enviar varios Tipos de mensajes hacia o desde un Socket Web
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Explicar el funcionamiento de Web Sockets y describen la forma de enviar y recibir datos a través de un Socket Web.
  2. Use la Web Socket API con JavaScript para conectarse a un servidor 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 de Web

En este módulo se 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:
  1. Introducción a los Web Workers
  2. Realización de procesamiento asincrónico mediante el uso de un Trabajador Web
  3. Lab: Creación de un proceso de trabajo de Web
  4. Mejorar la respuesta mediante el uso de un Trabajador Web
  • Después de completar este módulo, los alumnos serán capaces de :
  1. Describir la finalidad de un proceso de trabajo Web , y cómo puede ser utilizado para llevar a cabo el procesamiento asincrónico , así como proporcionar aislamiento para operaciones sensibles .
  2. Utilice las API trabajadores Web de código Javascript para crear, ejecutar y monitorear un proceso de trabajo Web.

 

Requisitos previos:

  • Tener por lo menos tres meses de experiencia en el desarrollo profesional.
  • Tener una combinación de conocimientos prácticos y conceptuales relacionados con la programación HTML5. Esto incluye los siguientes requisitos previos :
  1. Comprender la estructura básica del documento HTML:
  2. Cómo utilizar las etiquetas HTML para mostrar el contenido del texto .
  3. Cómo utilizar las etiquetas HTML para mostrar gráficos .
  4. Cómo utilizar las API de HTML.
  • Entender cómo el estilo de los elementos comunes de HTML con CSS , incluyendo:
  1. Cómo separar la presentación del contenido
  2. Cómo administrar el flujo de contenido.
  3. Cómo controlar la posición de los elementos individuales .
  4. Cómo aplicar un estilo CSS básico .
  • Entender cómo escribir código JavaScript para añadir funcionalidad a una página web
  • ¿Cómo o ​​crear y usar variables
  • Como utilizar:
  1. operadores aritméticos para realizar cálculos aritméticos que implican una o más variables
  2. operadores relacionales para poner a prueba la relación entre dos variables o expresiones
  3. operadores lógicos para combinar expresiones que contienen operadores relacionales
  • ¿Cómo controlar el flujo del programa mediante el uso de declaraciones if ... else .
  • Cómo poner en práctica iteraciones mediante el uso de "loops".
  • Cómo escribir funciones simples.