¿Ansioso por HTML 5?

29/sep/2009 7

Con la aparente decisión de que el nuevo estándar a ser adoptado por la comunidad desarrolladora web será HTML 5, existen ansias de disfrutar luego todas su bondades, aunque siento aún lejano su total uso dado lo lento que suele ser por parte de los usuarios la actualización de sus navegadores a uno más moderno y que soporte estas nuevas especificaciones, que ya han ido apareciendo. Pero eso no quita que desde ya comencemos a jugar un poco con él.

Ya he comentado sobre las características de este nuevo estándar, y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y sus nuevas posibilidades. Es interesante saber que podemos utilizar elementos de HTML 5 en estos momentos aunque la mayoría de los browsers aún no lo soporten; esto se debe a que CSS puede dar estilo a cualquier etiqueta, aunque ésta prácticamente no exista (aún). Por ejemplo, si me da la gana puedo inventar una etiqueta propia y darle estilos:

<jorge></jorge>
jorge {
display: block;
width: 300px;
height: 100px;
border: 1px solid #666
}

Aunque semánticamente no va a tener valor alguno para los buscadores (y menos para los usuarios). Pero en este artículo comencemos a armar una estructura completamente en HTML 5:

<header>
<p>Header</p>
</header>
<nav>
<p>Menu</p>
</nav>
<section>
<p>Section</p>
<article>Article</article>
<article>Article</article>
</section>
<footer>
<p>Footer</p>
</footer>

CSSLab.cl - HTML 5 Markup

Por defecto CSS asume que un elemento es inline. Para elementos definidos en HTML 4 como <div> ó <fieldset>, los estilos predeterminados por el browser para estas etiquetas los sobreponen y los hacen bloques, pero por esta vez lo haremos manualmente para las nuevas etiquetas HTML 5 que vayamos a utilizar:

header, nav, section, article, footer {
display: block;
}

Luego podremos definir los estilos para crear la estructura que nos convenga:

header {
width: 90%;
overflow: hidden;
}
nav {
width:20%;
float: left;
margin-right: 1%;
}
section {
width:67%;
float: left;
}
article {
background: #999;
}
footer {
width:90%;
overflow: hidden;
clear:both;
}

Ver ejemplo 1

Los browsers modernos no tendrán problemas hasta ahora; sin embargo los hechos en Redmond se rehusarán a mostrar los estilos CSS hasta que tengamos que enseñarles a comportarse como se debe. Por suerte con una pequeña ayuda de Javascript crearemos estos elementos para que IE sepa qué hacer con ellos y los estilos ya definidos:

document.createElement("header"); 
document.createElement("nav");
document.createElement("section"); document.createElement("article"); document.createElement("footer");

Ver ejemplo 2 (En IE)

Ahora un ejemplo utilizando la nueva etiqueta <video />, la que (por estos momentos) utiliza el codec Ogg Theora para comprimir los videos (necesitarás Quicktime ó similar para poder exportarla en este formato). Con un poco de JS podremos manejar los botones de comando y la línea de tiempo de las películas sin mayores complicaciones, como en el siguiente ejemplo:

function Play(str) {
var video = document.getElementById(str)
video.play();
}

Ver ejemplo 3 (en Safari 4, Opera 10+, Firefox 3.5+, Chrome 2+)

Links:

Comentarios

  1. ¿Ansioso por HTML 5? [#]

    […] CssLab Publicado en HTML, Programación | Etiquetas: css, HTML, Javascript var […]

  2. Alexis Diaz [#]

    Ojala todas las personas tuvieran la descendencia de actualizar su navegador… para que nosotros nos evitemos tantos atados.

  3. mario loyola [#]

    alexis, desgraciadamente en algunas empresas(por no decir todas), los usuarios comunes tienen permisos restringidos y solo los encargados de TI son los que actualizan……la tarea no es tan simple

  4. OMG.cl [#]

    mario tiene toda la razón, los pobres empleados tienen IE6, incapaces de actualizar o bajarse un mozilla u chrome..

    nosotros lo que debemos hacer es simplemete seguir insistiendo..
    haganlo como yo, yo cuando tengo que hacer un trabajo y veo que el browser es muy viejo, cobro mas caro.. y listo.. y la paja de hacerlo es mas tranquila, sabiendo que la recompenza es aun mayor.
    Ahora lo lamentable es que si trabajas con algun CMS tendras que mamarte todas las hojas de estilo.

  5. jorge [#]

    Sí, HTML5 sigue en su camino de una semántica y etiquetados simples y directos, en donde hace mejorar nuestro trabajo y la usabilidad del sitio, lo mejor es que los navegadores actuales como crhome, safari opera como también firefox le dan con actualizar y mejorar sus servicios de estandarización, se nota que están comprometidos en avanzar, y bueno como desarrolladores web tenemos que cambiar la perspectiva de nuestros clientes, aunque si diseñamos y damos soporte para IE, solo nos queda insentivar a quien visita la web en IE a que cambie su navegador, como lo que hace csslab y en mi web.

    Muy bueno el artículo me gustó!

  6. El flashero [#]

    me pareció muy bueno, y sigue así con los scripts, muy bien explicados, salu2

  7. Diseño de Páginas Web Gratis | CSSLab. Características del nuevo estándar HTML5 y CCS3 [#]

    […] Un laboratorio de ideas para la web en español Related Articles […]

Responder a Diseño de Páginas Web Gratis | CSSLab. Características del nuevo estándar HTML5 y CCS3 ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab