Spanish (Español) translation by Valentino (you can also view the original English article)
HTML 5 proporciona algunas funciones nuevas y excelentes para los diseñadores web que desean codificar diseños legibles y semánticamente significativos. Sin embargo, el soporte para HTML 5 aún está evolucionando e Internet Explorer es el último en agregar soporte. En este tutorial, crearemos un diseño común utilizando algunos de los nuevos elementos semánticos de HTML 5, luego usaremos JavaScript y CSS para hacer que nuestro diseño sea compatible con versiones anteriores de Internet Explorer. Sí, incluso IE 6.
Detalles del tutorial
- Tecnología: HTML
- Versión: 5
- Dificultad: intermedia
- Tiempo estimado de finalización: 1 hora
¿Prefieres un tutorial en video?
Descripción rápida de los elementos HTML 5
El Borrador de trabajo de HTML 5 proporciona un nuevo conjunto de elementos semánticamente significativos elementos para describir un diseño de página web típico. Usar elementos que son "significativos" (es decir, describen el contenido que contienen) le facilita la lectura y la organización de su código, y facilita que los motores de búsqueda y los lectores de pantalla lean y organiza tu contenido.
Los elementos HTML 5 que usaremos son:
- encabezamiento
- pie de página
- nav
- artículo
- hgroup
Con solo leer los nombres de los elementos, deberías tener una idea bastante clara de para qué sirven, ¡y ese es el punto! Ahora puedes dejar de abusar de en todos tus diseños sin tablas y, en tu lugar, crear encabezados con "<header>" y pies de página de "<footer>" s.
El único elemento que puede no ser obvio es <hgroup>. Este elemento simplemente define un grupo de elementos de encabezado (<h1> -<h6>) para que puedas agrupar el título y el subtítulo de una publicación de blog, por ejemplo. Piensa en ello como no en el encabezado de la página, pero el encabezado de la sección de contenido.
Paso 1: el HTML
Vamos a recrear el diseño más común en la Web, el diseño de 2 columnas:
Este diseño generalmente se combina con una cascada de elementos (o, shudder, una <table>), pero con HTML 5 puedes codificar esta página de forma bastante natural.
1 |
<!DOCTYPE html>
|
2 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
3 |
|
4 |
<html>
|
5 |
<head>
|
6 |
<title><!-- Your Title --></title> |
7 |
</head>
|
8 |
|
9 |
<body>
|
10 |
<header>
|
11 |
<!-- ... -->
|
12 |
</header>
|
13 |
|
14 |
<nav>
|
15 |
<!-- ... -->
|
16 |
</nav>
|
17 |
|
18 |
<div id="main"> |
19 |
<!-- ... -->
|
20 |
</div>
|
21 |
|
22 |
<footer>
|
23 |
<!-- ... -->
|
24 |
</footer>
|
25 |
</body>
|
26 |
</html>
|
Y para redondearlo, dentro del elemento "principal", voy a agregar algunas plantillas de publicación simples:
1 |
<article>
|
2 |
<hgroup>
|
3 |
<h2>Title</h2> |
4 |
<h3>Subtitle</h3> |
5 |
</hgroup>
|
6 |
|
7 |
<p>
|
8 |
<!-- --->
|
9 |
</p>
|
10 |
</article>
|
Ahora tenemos un esqueleto de diseño completo en HTML que solo usa etiquetas significativas para todo el contenido. Fácil de leer, fácil de analizar, fácil de diseñar.
Algunos lectores más experimentados pueden preguntar "¿por qué no usó <section> en lugar de <div> para la columna principal? No seria más "significativo"? Ciertamente podría, y sería "válido", pero el elemento no está diseñado para esto. tipo de función de diseño. De la especificación:
El elemento de sección no es un elemento contenedor genérico. Cuando se necesita un elemento con fines de peinado o para facilitar la creación de scripts, se anima a los autores a utilizar el elemento <div>en su lugar. Una regla general es que el elemento de sección es apropiado solo si el contenido del elemento se enumeraría explícitamente en el esquema del documento.
Paso 2: el CSS
Posicionar estos elementos sería fácil si fueran todos <div>s: sabemos cómo los maneja cada navegador, por lo que sabemos cómo escribirles CSS. Sin embargo, este es solo el caso porque cada navegador aplica una hoja de estilo predeterminada a una página. Incluso si no has especificado uno, hay CSS en funcionamiento cada vez que una página que has escrito se carga en Firefox o IE.
Por ejemplo, aquí está el estilo aplicado a un <div> en el archivo "html.css" predeterminado que viene con Firefox:
1 |
html, div, map, dt, isindex, form { |
2 |
display: block; |
3 |
}
|
Pero, ¿qué sucede cuando un navegador encuentra un elemento que no reconoce? No podemos estar seguros. Puede que no tenga estilo puede heredar un estilo predeterminado, es posible que no se muestre en absoluto. Por lo tanto, nos aseguramos de dar cuenta de cualquier todo el estilo de nuestros nuevos elementos en nuestro propio CSS. Sin suposiciones.
1 |
/* Make HTML 5 elements display block-level for consistent styling */
|
2 |
header, nav, article, footer, address { |
3 |
display: block; |
4 |
}
|
Ahora podemos tratar estos elementos como <div>s, con la seguridad de que se muestran de forma coherente.
El problema
Echemos un vistazo a nuestro diseño hasta ahora. He reunido una versión más completa de este código y la he probado en algunos navegadores. Echa un vistazo a nuestro diseño en Safari 4:
Sin embargo, mira lo que sucede en Internet Explorer 6:
Qué está mal con esta imagen? Configurando explícitamente display: block; en CSS, deberíamos tener comunicó al navegador nuestras intenciones para ese elemento.
Desafortunadamente, IE ignora los elementos que no reconoce, independientemente del CSS. Nuestro contenido queda flotando en su contenedor de los padres, como si los elementos HTML 5 no existieran. De alguna manera, necesitamos que IE represente elementos desconocidos, y diseñarlos apropiadamente no lo va a hacer.
Paso 3: JavaScript
Afortunadamente, hay una manera de hacer que IE reconozca nuevos elementos a través de un simple JavaScript.
Leí por primera vez sobre esta técnica en el blog de John Resig; él lo llamó el "HTML 5 Shiv".
Simplemente implica llamar a document.createElement () para cada elemento nuevo no reconocido.
Tradicionalmente, haría esta llamada para inyectar un elemento directamente en alguna rama del DOM; en otras palabras, en un contenedor existente dentro de la etiqueta <tag>. También puedes hacer eso para solucionar este problema de elementos desconocidos. Sin embargo, este truco también funciona llamando a document.createElement () en la etiqueta <head>, ¡sin referencia a un elemento contenedor! Eso hace que sea mucho más fácil de leer y escribir:
1 |
document.createElement("article");
|
2 |
document.createElement("footer");
|
3 |
document.createElement("header");
|
4 |
document.createElement("hgroup");
|
5 |
document.createElement("nav");
|
Para hacer las cosas aún más convenientes, Remy Sharp ha lanzado un "Secuencia de comandos de habilitación de HTML 5", que hace lo mismo que nuestro código anterior, pero para todos los elementos HTML 5.
Dado que HTML5 está recibiendo más atención al marcar nuestras nuevas páginas, y la única forma de hacer que IE reconozca los nuevos elementos, como <article>, es usar HTML5 shiv, rápidamente armé un mini script que habilita todos los elementos nuevos ...
Ahora que hemos agregado nuestro JavaScript, veamos eso nuevamente en Internet Explorer, con nuestro nuevo código JS:
Perfecto. Internet Explorer 6 ahora está procesando código HTML 5 tan bien como Safari 4.
Conclusión
HTML 5 es emocionante para cualquier diseñador web que desees crear un código limpio, fácil de leer y semánticamente significativo. Y con solo un par de sencillos pasos, una línea de CSS y una línea de JS por elemento, podemos empezar a utilizar HTML 5 hoy mismo.
¿Tienes más consejos para exprimir todo el HTML 5 que puedas en tu código de producción? ¡Háznoslo saber en los comentarios!
Escribe un tutorial Plus
¿Sabías que puedes ganar hasta $ 600 por escribir un tutorial PLUS y / o un screencast para nosotros? Buscamos tutoriales detallados y bien escritos sobre HTML, CSS, PHP y JavaScript. Si tienes la capacidad, comunícate con Jeffrey en nettuts@tutsplus.com.
Ten en cuenta que la compensación real dependerá de la calidad del tutorial final y del screencast.
- Síganos en Twitter o suscríbate a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web.
By
