¡¡Ya puedes aprender HTML5 gracias a este curso gratuito online!!

Si deseas conocer las ventajas y novedades que ofrece este nuevo estándar es tu oportunidad. Sigue este curso gratuito y en español que se compone de 6 lecciones, en las que te enseñaremos desde qué es HTML5 hasta el uso de las nuevas APIs, como la de Drag&Drop. Junto con las lecciones se incluye código de ejemplo para seguir el curso y preguntas de repaso al final de cada lección.

No te quedes atrás, descárgate IE9, sigue el curso online y…¡evoluciona a HTML5!

Lecciones disponibles:

ATENCIÓN: No es necesario registro, las lecciones están online y accesibles desde los enlaces de más abajo o en la página general del curso aquí.

A continuación podéis ver un resumen del curso.

Ver Lección 1: Definición de HTML5

Objetivos: En esta lección los estudiantes aprenden las funcionalidades y características que forman parte de la especificación HTML5 y las tecnologías que involucran. También podrán aprender la diferencia entre la sintaxis de HMTL5 y la de HTML4 y/o XHTML 1.0. Por otra parte, al finalizar esta lección los estudiantes podrán identificar las principales características de HTML5, como los nuevos elementos HTML5, elementos multimedia, el elemento Canvas, formularios web, etc. Otro objetivo es que los estudiantes puedan distinguir entre funcionalidades que técnicamente forman parte de la especificación de HTML5 y otras que se consideran tecnologías relacionadas, como la Geolocalización, Arrastrar y Soltar y CSS3.

Beneficios de HTML5
Principales características
- Nuevos elementos de markup y presentación
- Los elementos <video>, <audio> y <canvas>
- Formularios Web
- Elementos revisados que se basan en HTML 4.0
Introducción a las APIs de HTML5 y tecnologías de apoyo
- Geolocation
- Web Workers
- Almacenamiento Web
- CSS3: Animaciones y transiciones
- CSS3: Fondos, bordes, colores RGBa, gradientes, sombreados y esquinas redondeadas
- Tipos de letra @font-face para la web
HTML5 todavía es un proyecto en fase de desarrollo
- Compatibilidad de navegadores
- Dónde se utiliza HTML5 actualmente

Ver Lección 2: Conceptos básicos de HTML, XHTML y CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de HTML, XHTML y CSS, necesarios para saber crear la estructura y estilo de sus páginas web. Aprenden cómo se utilizan los tipos de documento (DOCTYPE) para ayudarles a validar sus páginas web y utilizarlos como herramienta de resolución de errores. En esta lección, los estudiantes crean una página web sencilla que les sirve para saber cómo se insertan imágenes, cómo se crean enlaces y cómo pueden trabajar con hojas de estilos tanto internas como externas.

Introducción a la sintaxis de HTML
- Detalles de la sintaxis XHTML
La función de DOCTYPE
- Validación W3C y de página
Creación de una página HTML
- Definición de elementos HTML
- Inserción de imágenes en HTML
- Uso de atributos
- Creación de vínculos
El papel de las hojas de estilos CSS (Cascading Style Sheets)
- Aplicar estilos a una cabecera
- Clases de estilos y el elemento <span>
Tres formas de utilizar los estilos
- Internos
- Externos
- En línea
Cuándo utilizar hojas de estilo Internas o externas
Creación de una hoja de estilos externa
El concepto de "cascada" de CSS

Ver Lección 3: Introducción a la presentación en pantalla con CSS

Objetivos: En esta lección los estudiantes aprenden los conceptos básicos de presentación de elementos en pantalla con CSS, incluyendo una estructura visual de dos columnas con ancho fijo, utilizando HTML y CSS. Aprenden la función de un archivo de “reset” CSS y cómo se añade a la página Web. Esta lección incluye el uso del elemento <div> y las propiedades float y clear de CSS para crear columnas en la página.

El papel del archivo de reset CSS
- Añadir un enlace a una hoja de estilos de reset externa
Breve historia de las técnicas de disposición en pantalla de las páginas web
- Introducción a las opciones de presentación de las páginas
Creación de una estructura básica de dos columnas de ancho fijo con CSS
- El elemento DIV
- Asociación de IDs y clases CSS con elementos DIV
La propiedad float de CSS
- Creación de columnas con la propiedad float
Uso de la propiedad clear
Creación de una navegación basada en listas con directivas float
Uso de márgenes y rellenos para controlar la disposición de los elementos en pantalla
Imágenes de fondo con CSS
- Decoración de un pie de página con una imagen de fondo

Ver Lección 4: Uso de las etiquetas HTML5

Objetivos: En esta lección los estudiantes aprenden a utilizar los nuevos elementos HTML5 para lograr presentaciones en pantalla más avanzadas. Se revisan aquí los principales elementos de división en secciones y también se repasan las etiquetas de HTML4 que han sido objeto de actualización en HTML5. Los estudiantes aprenden a convertir una página existente que emplea elementos HTML4 en una página HTML5 sustituyendo elementos <div> por otros nuevos elementos HTML5. Además, en esta lección se aprende a trabajar con elementos de formulario HTML5 y a añadir contenidos multimedia con los elementos <video> y <audio>.

Revisión del concepto de semántica de las etiquetas HMTL
Fundamentos de HTML5
- Uso de la declaración DOCTYPE de HTML5
Diferentes categorías utilizadas para contenidos HTML5
- Contenidos de Metadatos
- Contenidos de Flujo
- Contenidos de Sección
- Contenidos de Cabecera
- Contenidos de Frase
- Contenidos embebidos
- Contenidos interactivos
El nuevo elemento <header>de HTML5
- Incorporar soporte para elementos HTML5 en los navegadores
Incorporación de elementos <nav> de HTML5
Esquema de documentos con HTML5
Incorporación de otros elementos de sección de HTML5
- Elemento <section>
- Elemento <article>
- Elemento <aside>
- Elemento <footer>
Otros elementos HTML5
- Elemento <figure>
- Elemento <figcaption>
- Elemento <time>
Elementos revisados de HTML 4.0
- La etiqueta <b> frente a <strong>
- La etiqueta <i> frente a <emphasis>
Uso de formularios HTML5
- Tipos de datos de entrada email y url
- Atributos required y placeholder
- Atributos autofocus y autocomplete
Uso de los elementos Video y Audio
- Uso del elemento <video> y sus atributos relacionados
- Uso del elemento <audio> y sus atributos relacionados
- Aspectos a tener en cuenta sobre los códecs de vídeo y audio al trabajar con contenidos multimedia

Ver Lección 5: Uso del elemento Canvas

Objetivos: En esta lección los estudiantes aprenden en qué consiste el elemento Canvas, el API de dibujo en dos dimensiones que incluye la especificación HTML5. En este tema se explica cómo se incorporan elementos de diseño gráfico a una página web, por ejemplo formas, textos, rellenos y trazos de colores, imágenes y animaciones sencillas con Javascript. Esta lección enseña también a los estudiantes los conceptos básicos de la interactividad con Javascript.

El papel de JavaScript en las aplicaciones HTML5
Conceptos básicos de JavaScript
- Eventos de JavaScript
- Ubicación del código JavaScript en un documento externo
- El DOM (Document Object Model)
El elemento Canvas
- Ventajas del elemento Canvas
Diseño gráfico con Canvas
- Dibujo de trazos
- Dibujo de rectángulos
- Dibujo de líneas y círculos
- Dibujo de curvas
Inserción de textos
Colores, estilos y gradientes
Inserción de imágenes
Creación de gráficos en el Canvas
- Uso de arrays de datos
Creación de animaciones con Canvas y Animation
- Uso de transformaciones
- Creación de un bucle de dibujo

Ver Lección 6: Funciones Drag y Drop de HTML5

Objetivos: En esta lección se enseña el uso de Drag and Drop, un API relacionada con la especificación HTML5. Concretamente, los estudiantes aprenden a crear una interfaz de carrito de la compra sencilla arrastrando y soltando objetos en pantalla.

Diferentes formatos de Drag y Drop en la web
- Ventajas de las funciones Drag y Drop
Compatibilidad de Drag y Drop entre distintos navegadores
- Uso de la función preventDefault
- Los eventos dragenter y dragover
- Convertir un elemento en "arrastrable" (draggable) en HTML5
- El atributo ondragstart
- Creación de la función dragStarted
- Medidas para la compatibilidad con diferentes navegadores
Transferencia de datos con una operación "Drag-and-Drop"
- Uso del objeto dataTransfer
- Uso de la función setData
- La propiedad innerHTML