Reto HTML5: Primeros pasos con HTML5
HTML5 es una nueva definición del estándar para la construcción de páginas Web. Pese a que la definición no está completada ya hay una gran cantidad de componentes que podemos aprovechar en los navegadores modernos.
¿Qué necesito para empezar?
 |
WebMatrix. La nueva herramienta de desarrollo de Microsoft que incluye todo lo necesario para el desarrollo de sitios web. Desarrollar sitios web con HTML5 nunca ha sido tan fácil. Descargalo ya. |
|
Internet Explorer 9. Si no tienes instalado Internet Explorer 9 deberías probarlos. Puedes descargarlo desde aquí . |
|
Visual Studio. Si ya tienes VS instalado perfecto, pero por si acaso, aquí tienes el enlace de descarga de la versión gratuita express o de la Ultimate Trial. |
|
Web Standards Update for Microsoft Visual Studio 2010 SP1. Con esta extensión de Visual Studio tendrás acceso funcionalidades de soporte de HTML5 en el entorno de desarrollo. Haz clic aquí para descargarla. |
Si necesitas ayuda o tienes algún problema con cualquiera de los pasos de instalación o del reto, puedes añadir un comentario a este post, twitearnos un mensaje a @esmsdn o simplemente twitear con el hashtag #retosmsdn.
¿Por qué comenzar a utilizar HTML5?
HTML5 es el futuro de la Web. Esta revisión del estándar supone un enorme avance en términos de claridad y simplicidad, y nos permite la construcción de HTML más rico de forma más limpia y mantenible.
HTML5 se construye desde HTML4, es decir todo lo que ya tenemos sigue funcionando. Sin cambios. Si queremos explotar las ventajas y funcionalidades nuevas tendremos que hacer pequeños cambios, sobre todo simplificaciones.
Veamos qué tipo de simplificaciones. En estos fragmentos de código podemos ver frente a frente las estructuras básicas de una página HTML4 y HTML5.
HTML4 |
HTML5 |
|
|
Como podéis observar, las únicas diferencias entre ambas estructuras se refieren a la simplificación de los atributos para describir los elementos. Vamos a recorrerlos para entender las diferencias.
DOCTYPE
El elemento DOCTYPE queda reducido a la mínima expresión. Ya no se hace necesario declarar el esquema con un identificador público (``"-//W3C//DTD HTML 4.01 Transitional//EN"`` ), ni indicar una URI ("https://www.w3.org/TR/html4/loose.dtd"). Basta con nombrar el DOCTYPE como html. Se da por entendido que los navegadores saben de qué estamos hablando.
Este comportamiento, simplificar el lenguaje de marcado a base de no indicar lo evidente es el patrón habitual en HTML5.
Pasamos de largo sobre el elemento html dado que no se han producido cambios significativos.
head
Lo primero que observamos en este elemento es la reducción de los tags meta. En este caso podemos ver que la descripción del conjunto de caracteres de la página Web ha quedado reducido a la mínima expresión.
Se trata de un nuevo atributo de la etiqueta meta definido para HTML5 (https://www.w3.org/TR/html-markup/meta.html#meta). Los valores que se pueden asignar a este atributo son los habituales definidos por la IANA como nombres para los conjuntos de caracteres (https://www.iana.org/assignments/character-sets). Lo cierto es que utf-8 cubre completamente las necesidades de encoding que podamos tener y es soportado por las herramientas y navegadores habituales.
En el caso de la etiqueta link el uso del atributo type se hace opcional. Se supone que los navegadores pueden deducir por la extensión del archivo incluido el tipo de inclusión que debe hacerse.
La estructura del documento
En esta nueva versión del estándar encontraremos, entre otras cosas, un conjunto de etiquetas cuya misión es dar cierto contenido semántico a la estructura del documento.
Hasta ahora, hemos encontrado con frecuencia estructuras de páginas semejantes a la siguiente:
<html>
<head>
</head>
<body>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
HTML5 define una serie de etiquetas cuya única misión es dotar de contenido semántico a los elementos estructurales de la página. De esta forma, aplicaremos las etiquetas al contenido en función del propósito del contenido.
Por ejemplo, sobre una página como la siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="somecss.css" />
<title>html5, primer reto</title>
</head>
<body>
<div id="header">
<a href="home.htm" title="Home">
<img src="cosa.png" class="logo" />
</a>
<h1>Este es el encabezado de mi pagina</h1>
</div>
<div id="nav">
<a href="home.htm">Home</a>
<a href="Users.htm">Users</a>
<a href="Services.htm">Sevices</a>
</div>
<div id="content">
<div>Este es el titulo de un articulo
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div>Otro articulo mas
<p>Quisque iaculis placerat velit vestibulum ornare. </p>
</div>
<div>El tercero
<p>Nulla consectetur blandit enim eget elementum. Nam magna arcu, vehicula</p>
</div>
<div>El ultimo articulo
<p>Etiam fermentum, urna vitae gravida facilisis, felis eros sodales leo</p>
</div>
</div>
<div id="footer">Pie de pagina</div>
</body>
</html>
Aplicaríamos las nueva etiquetas de contenido semántico para reforzar la estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>html5, primer reto</title>
</head>
<body>
<header>
<a href="home.htm" title="Home">
<img src="cosa.png" class="logo" alt="logo" />
</a>
<h1>Este es el encabezado de mi pagina</h1>
</header>
<nav>
<a href="home.htm">Home</a>
<a href="Users.htm">Usuarios</a>
<a href="Services.htm">Servicios</a>
</nav>
<section>
<article>
<h1>Este es el titulo de un articulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h1>Otro articulo mas</h1>
<p>Quisque iaculis placerat velit vestibulum ornare.</p>
</article>
<article>
<h1>El tercero</h1>
<p>Nulla consectetur blandit enim eget elementum. Nam magna arcu, vehicula</p>
</article>
<article>
<h1>El ultimo articulo</h1>
<p>tiam fermentum, urna vitae gravida facilisis, felis eros sodales leo,</p>
</article>
</section>
<footer>
Pie de pagina
</footer>
</body>
</html>
Es decir reemplazaríamos las etiquetas de división por las correspondientes header, footer, section, article, aside, etc.
Al mismo tiempo se ha reforzado el papel semántico de las ya existentes etiquetas h1…h6, en este caso al encontrarse en el contenido de etiquetas article, estos títulos son considerados como elementos descriptivos dentro del artículo.
En el código encontramos, también, un ejemplo de uso de la nueva etiqueta nav. La misión de esta etiqueta es definir grupos de vínculos para navegación. Aunque los navegadores y lectores de pantalla no implementan, todavía, el reconocimiento de la etiqueta nav es conveniente tener en cuenta la semántica de la etiqueta.
Tu turno… ¡el Reto! – Aplícale HTML5 a tu site
Es el momento de ponerse manos a la obra. Toma tu propio site, tu blog, tu aplicación Web, lo que sea… y aplícale la estructura que acabamos de ver. Enseguida verás lo sencillo que resulta.
Recuerda las descargas:
· Web Standards Update for Microsoft Visual Studio 2010 SP1
Si teneis cualquier comentario que hacer en este post o en twitter (@esmsdn y el hashtag #retosmsdn) estaremos encantados de con vuestro feedback.
Boris Armenta -@borisarm- Developer Evangelist