W3C logo
ONLINE TRAINING FOR
WEB DEVELOPERS
  • Home
  • W3C HTML5 Training

Curso del W3C sobre HTML5

Mobile Web bandera curso Aplicaciones

Aprende HTML5 y acércate a la Plataforma Web Abierta

HTML5 es la especificación que define la 5ª mayor revisión del lenguaje básico de la Web, el HTML (Hypertext Markup Language). HTML5 es la piedra angular de la Plataforma Web Abierta, un entorno de programación completo para aplicaciones multiplataforma, con acceso a las capacidades de los dispositivos; vídeo y animaciones; gráficos; estilo, tipografía, y otras herramientas de edición digital; amplias capacidades de red; y mucho más.

El curso de HTML5 te mostrará todas las novedades que se han introducido para ayudar a los desarrolladores a crear sitios web, todo ello de forma simple pero con un gran potencial. ¡HTML5 está aquí para quedarse! Con este curso, desarrolladores y diseñadores web podréis probar vuestros nuevos conocimientos y habilidades realizando ejercicios, interactuando con el resto de participantes y preparando las tareas asignadas a cada apartado.

Esta edición del curso presenta numerosas mejoras respecto a ediciones anteriores. Entre las nuevas secciones están:

  • Un apartado dedicado a JavaScript. La idea es servir como complemento útil en la formación y completar el temario. No se trata de un curso completo JavaScript, sino una serie de consejos y recordatorios que sirven de base y punto de partida.
  • Una sección más completa del elemento canvas de HTML5, en la que se tratan temas tales como la animación basada en el tiempo, etc. Además, se proporcionan numerosos ejemplos para explicar cosas tales como configurar la velocidad de fotograma de una animación y crear nuevas animaciones basadas en tiempo.
  • Una sección que describe en detalle las transformaciones 2D que se pueden aplicar sobre el elemento canvas, facilitando numerosos ejemplos al respecto.
  • Una sección completa sobre la API de Audio Web (útil para juegos o aplicaciones musicales).
  • Además, se han añadido nuevos ejemplos de formularios HTML5, aplicando la API de archivos, la API Drag and Drop, así como la nueva API XHR2 para manejar formularios HTML5 utilizando Ajax, incluyendo múltiples métodos para la carga de archivos. Los ejemplos incluyen el código fuente completo, tanto el necesario en el lado del cliente, como el de servidor (PHP, Java).

Candidatos a Recomendación: el 6 de agosto de 2013, el Grupo de Trabajo de HTML del W3C actualizó a este estado:

  • HTML5, que como ya se mencionó, pasará a ser la especificación que define la 5ª mayor revisión del lenguaje básico de la Web, el HTML (Hypertext Markup Language). Esta versión introduce nuevas características para ayudar en el desarrollo Web, aplicando en la definición de los nuevos elementos la investigación de las prácticas empleadas comunmente por los desarrolladores web, y prestando atención especial a la definición de criterios de conformidad sobre los agentes de usuario (con el objetivo de mejorar la interoperabilidad).
  • HTML Canvas 2D Context , que define el contexto 2D para el elemento canvas HTML. El contexto 2D proporciona objetos, métodos y propiedades para dibujar y manipular gráficos en el elemento Canvas.

¿Por qué realizar el curso?

Este curso HTML5 cubre todas las técnicas necesarias para crear páginas y aplicaciones Web, incluyendo:

  • Nuevos elementos semánticos y estructurales
  • HTML5 multimedia: audio y video
  • Dibujo, gráficos de animación con el elemento Canvas, interacción con vídeo, etc.
  • Formularios HTML5
  • APIs javaScript: DOM, geolocalización, orientación
  • Persistencia: Almacenamiento DOM, caché, IndexedDB

La duración del curso es de 6 semanas. Semana a semana se irán activando nuevos capítulos (generalmente junto con una tarea a realizar) y tendrás la oportunidad de interactuar con el resto de participantes y con el profesor, para tratar sobre el contenido del curso. Para tal fin dispondrás de un servicio de mensajería, además de un foro habilitado para tal fin.

Echando un vistazo a las secciones "¿quién debería asistir?" y "¿qué necesito?" , podrás obtener información sobre el perfil de público objetivo y los pre-requisitos para realizar este curso.

El tiempo medio de dedicación al curso serán unas 6-8 horas por la semana. Es posible que algunos temas puedan implicar más o menos trabajo que otros, pero en cuanquier caso, no deberías necesitar más de esas 7 horas de media.

Durante este curso podrás:

  • Conocer las nuevas etiquetas HTML5
  • Practicar con los elementos <audio> y <video>
  • Dibujar y animar gráficos Web
  • Descubrir las nuevas características de los formularios HTML5
  • Practicar con la API de geolocalización, con la de orientación, etc.
  • Conocer el modo offline de HTML5

Esquema del curso

Semana 1: Introducción a HTML5 y los nuevos elementos estructurales y semánticos

Comenzaremos el curso mostrando y explicando los nuevos elementos estruturales y semánticos que define HTML5. En concreto veremos:

  • Los nuevos elementos estructurales, mapa del documento, etc
  • Nuevos elementos con carácter semántico (time, summary, details, mark, etc.)
  • Nuevos atributos: data-*, download, translate, etc
  • Microdatos

Esta semana la terminaremos con una tarea que te permitirá llevar a la práctica el uso de estos nuevos elementos.

Semana 2: vídeo y audio HTML5

El objetivo de esta semana es la familiarización con los medios HTML5 y sus capacidades, pudiendo manipularlos en nuestra página o aplicación Web. Para ello os facilitaremos bastantes ejemplos. Principalmente nos centraremos en:

  • Información sobre el "estado del arte" en cuanto a audio y video antes de HTML5
  • El elemento de vídeo: cómo utilizarlo, sus atributos, soporte de codecs, etc
  • La DOM API asociada al elemento video: propiedades, métodos, eventos
  • CSS3 y el elemento de video: transformaciones, filtros de imagen, etc
  • Interacciones vídeo-canvas: obtener una instantánea, modificar en tiempo real el contenido de vídeo, incrustación de vídeo, etc
  • Vídeo en directo: la API getUserMedia (control de la webcam)
  • Añadir subtítulos con el elemento track
  • El elemento audio: visión general, sus atributos, soporte de codecs, etc
  • La DOM API asociada al elemento audio: propiedades, métodos, eventos
  • Introducción a la API de Audio Web (para audio en tiempo real, juegos, aplicaciones Web para los músicos)

Semana 3: Dibujo y Animación con HTML5 Canvas

La etiqueta <canvas> es una de las características de HTML5 que podríamos considerar como "Flash killer". Durante esta semana nos centraremos en las principales capacidades de dibujo que ofrece el elemento canvas de HTML5, lo cual incluye:

  • Uso básico, guía de inicio rápido con la API JavaScript de Canvas
  • Dibujo de líneas, arcos, caminos, curvas, imágenes
  • Colores, gradientes, patrones, sombras, y configuración de otros elementos de dibujo
  • Dibujo imágenes, imágenes capturadas del vídeo en tiempo real, recorte
  • Técnicas avanzadas: transformaciones geométricas, guardar y recuperar contextos
  • Control de niveles de los píxeles del contenido canvas, modos de dibujo, etc
  • Capas, eventos asociados al canvas, animar el contenido

Esta semana terminará con una tarea que te permitirá crear dibujos y aplicar animaciones.

Semana 4: Formularios en HTML5

Esta semana veremos los formularios en HTML5. HTML5 ofrede 13 nuevos tipos de campos de entrada, atributos y otros elementos relacionados con los formularios, así como una nueva API de JavaScript para validación. Vamos a ver todas estas características en esta sección del curso:

  • Nuevos tipos de entrada: color, date, range, etc
  • Nuevos atributos: required, pattern, placeholder, formnovalidate, etc.
  • Nuevos elementos de formulario: datalist, output, meter, progress, etc
  • Validación: pseudo-clases CSS para tener feedback visual, API de validación, etc

Semana 5: HTML5 nuevas API - API DOM, geolocalización, WebWorkers, orientación y deviceMotion

En esta semana introduciremos varias APIs nuevas que no se asocian necesariamente con un elemento HTML5 en concreto:

  • La API DOM, la cual se ha ampliado y actualizado con getElementsByClassName, querySelector, querySelectorAll, la interfaz classlist, etc.
  • La nueva API de geolocalización, ya implementada por la mayoría de los navegadores web modernos. Los datos de ubicación se obtienen de diversas maneras: GPS, triangulación GSM/3G, Wifi, dirección IP, etc,
  • Las APIs de orientación y deviceMotion, dirigidas a los dispositivos móviles,
  • La API WebWorker para añadir multi-threading para el código JavaScript en aplicaciones web HTML5.

Esta semana se completará con una tarea en la que poner en práctica los formularios HTML5 y la API de geolocalización.

Semana 6: Arrastrar y soltar y la persistencia

Durante la última semana de este curso, vamos a abordar la API de Drag and Drop, utilizada con frecuencia junto con la API de archivos. También vamos a mirar a otras API de persistencia como la de Local Storage (Almacenamiento Local), Sesión Storage (Almacenamiento de Sesión), la API de caché y la base de datos IndexDB.

  • La API de almacenamiento DOM: local storage y session storage
  • La nueva API de caché: visión general y ejemplos
  • IndexedDB: visión general, conceptos básicos, trabajo con datos, etc

Terminará la semana con una tarea de persistencia.

¿Cómo puedo obtener el certificado de finalización del curso?
El curso incluye 4 tareas prácticas que será necesario completar satisfactoriamente si deseas obtener un certificado de finalización.

¿A quién va dirigido?

  • Desarrolladores web y autores de contenido que buscan actualizar sus conocimientos con HTML5
  • Diseñadores web
  • Desarrolladores de web móvil
  • Programadores con conocimientos intermedios que quieren adquirir nuevas habilidades

¿Por qué HTML5 es digno de su tiempo?

  • HTML5, CSS y JavaScript son base para desarrolladores y diseñadores
  • HTML5 es HTML + nuevos elementos y atributos + muchas APIs JavaScript + CSS3

¿Qué necesito?

Además del equipo informático, deberías tener acceso a:

  • Un editor de texto (para HTML, CSS, Javascript). Existen numerosos editores, con versiones gratuitas o de pago, si bien, te recomendamos que utilices tu favorito.
  • Posibilidad de tener documentos online. La mayoría de los ejemplos de este curso están alojados en el http://jsbin.com. Puedes utilizar este servicio u otro para publicar la mayoría de las tareas a realizar en el curso.  
    Te recomendamos utilizar uno de los muchos servicios de alojamiento web gratuito disponible como x10hosting y el Área de Libre Web Hosting (hay muchos otros para elegir también). Algunos servicios ofrecen cuentas gratuitas limitas, pero con suficiente capacidad para lo que puedas necesitar en el curso.

También es necesario estar familiarizado con:

  • HTML: ser capaz de crear un documento HTML, utilizar identificadores y clases, y otras tareas básicas.
  • CSS: para este curso es necesario estar familiarizado con CSS, si bien, no es necesario ser diseñador.
  • DOM: no es necesario un amplio conocimiento del DOM, pero se requiere la capacidad de trabajar con algunos de los métodos más básicos (getElementById, appendChild, etc.)
  • JavaScript: con un conocimiento básico es suficiente, como por ejemplo para integrar un fragmento de código en una página Web, controlar eventos y aplicar un procesamiento básico de DOM. Ten en cuenta que para ayudarte en este tema se ha añadido un apartado con específico en el temario.

Puedes obtener más información consultando la sección ¿cómo funciona? (en inglés)

Términos y Condiciones

  • W3C ofrecerá el curso de acuerdo con la descripción publicada para la tarifa publicitada.
  • El pago debe hacerse en su totalidad en el momento de la inscripción.
  • El pago se realizará mediante tarjeta de crédito o una cuenta PayPal.
  • Los reembolsos sólo se realizarán si el participante se retira antes del inicio de la segunda semana del curso.
  • El material del curso se mantendrá disponible para los participantes registrados durante al menos 2 meses después de la finalización del curso.
  • Todo el material, incluyendo el producido por los participantes en las tareas, tiene o se considera con copyright y no se puede copiar, duplicar, publicar en otro sitio Web, o utilizar de cualquier otra manera sin el consentimiento del autor original. Las conversaciones y los mensajes enviados son privadas y no se pueden copiar, duplicar, enviados o transmitidos a terceros sin la autorización del autor original.