Aprende HTML5 con este curso gratis


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

 

Más sobre HTML5

 

Saludos,

El equipo de MSDN España

Comments (25)

  1. JOSE HINOSTROZA - PERU says:

    QUIERO INSCRIBIRME AL CURSO

  2. luisfer says:

    excelente curso, me intereza mucho.

  3. grayfox says:

    quiero entrar al curso.. info please… isc_joseoswaldo@hotmail.com

  4. esmsdn says:

    Podéis ir accediendo a las lecciones del curso por medio de los enlaces. No es necesario ningún tipo de registro.

    Un saludo a todos!

  5. teodoro says:

    gracias por compartir , me interesaria unirme al curso

  6. kren says:

    manden info del curso

    da4rk5@hotmail.com

  7. Klerly Godoy - Costa RIca says:

    No importa que seamos de otro país?

  8. Carlos Miguel says:

    De verdad me perdi el curso de Diplomado pero se que este me ayudara mucho…gracias… vere las 2 primeras lecciones..

  9. jose luis ranilla - PERÚ says:

    quiero inscribirme al curso

  10. esmsdn says:

    Gracias por vuestros comentarios, recalcar que NO hace falta registrarse al curso, desde el propio post tenéis enlaces a los contenidos. Por ahora están disponibles las lecciones 1 y 2

    Lección 1: msdn.microsoft.com/…/hh749020

    Lección 2: msdn.microsoft.com/…/hh749021

    Gracias por vuestro interés!

  11. Juan Pablo Vidal says:

    Excelenteeeeeeeeee hace rato que queria algo asi… porque desde que sali de estudiar no vilvi a tocar el  mundo web con html.. pues estoy ahora mas enfocado en infraestructura pero me sirve para mi Blog..

    Muchas gracias

  12. joaquin says:

    Está perfectamente estructurado y explicado, sin dejar de ser ameno. Muchas Gracias.

  13. Miguel says:

    Increíble, muchas gracias.

    Muy buen trabajo.

  14. luis says:

    ohhhhhh..muchas gracias por compartir este curso…megalike..

  15. Miguel Martínez-Losa says:

    Un curso, bien explicado, al grano y siempre centrándose en lo más importante. Además refresca ciertos conceptos que no deberíamos olvidar y otros que debemos aprender.

    Muchas gracias.

  16. Muy bueno says:

    quiciera saber si sepuede inprimir

    se que todos los que nos anotamo a este curso

    pasamo lo mismo es muy bueno, gracias por la oportunida

    de aprender, Maria

  17. Mariano Vallejo - Madrid says:

    Excelente curso, muy bien explicado, muy ameno y sobre todo practicando desde el principio.

    Gracias por este regalo.

  18. sarron87@hotmail.com says:

    un saludo cordial deseo inscribirme al curso .resido en colombia gracias

  19. José-Luis says:

    no puedo estar "enganchado" a la pantalla tanto rato. ¿Cómo se puede imprimir aunque sea capítulo a capítulo?

  20. Juan Francisco says:

    Muchas gracias por el curso. Una gran iniciativa, gracias otra vez.

  21. José_Cardoza says:

    Excelente curso, gracias por compartir con nosotros toda esa gama de conocimientos y sacarnos de la ignorancia. Gracias de nuevo por esa mano amiga.

    Que debo hacer para inscribirme en los cursos???

  22. Vicente Duarte says:

    Un aporte por tu parte valiosísimo.

    Una vez se termine de trabajar con todas las lecciones se puede conseguir algun certificado en HTML 5

    Saludos

  23. Excelente aporte para todos!

  24. pedro lopez says:

    muy buena informacion… ponga adsense o algo para apoyar esta web

  25. Alfonso says:

    Una pregunta, si no tienes ni idea de programación, y quieres hacer una página web enfocada a E-commerce. Es válido este curso de HTML5, o antes sería necesario dar algún otro tipo de curso de programación. Muchas gracias