Resumen del curso HTML5

  • Artículo

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 la lección 1

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 la lección 2

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 la lección 3

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 la lección 4

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 la lección 5

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

Ver la lección 6

 

 

Windows, PowerPoint, Visual Studio, Visual Web Developer son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para Microsoft por Avlade: www.Avlade.com

©2011 Microsoft Corporation.

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html