¿Ansioso por HTML 5?

29/Sep/2009 365

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. stromectol [#]

    what’s a medical doctor http://ivermectinhumans.com – stromectol

  2. viagra pas cher [#]

    who makes kirkland signature hearing aids http://sansordonnancefr.com – cialis sans ordonnance

  3. nuvigilvsprovigil [#]

    modafinil dosage buy modafinil reddit

  4. Anthonyslany [#]

    viagra professional o superactive safest sites to buy viagra – viagra syd

  5. curry shoes [#]

    I enjoy you because of your own labor on this blog. My mom really loves engaging in investigations and it’s really obvious why. My partner and i learn all of the compelling tactic you produce practical techniques through your website and recommend contribution from visitors on the content so my child is in fact being taught a great deal. Have fun with the remaining portion of the year. You’re the one doing a brilliant job.

  6. kd shoes [#]

    I intended to compose you a little bit of observation to finally say thanks a lot over again considering the great information you’ve shared on this website. This is so remarkably generous of you to present unhampered what many of us would’ve distributed for an ebook to end up making some cash for their own end, precisely now that you could have done it if you ever wanted. These good ideas likewise acted like the great way to realize that some people have the same keenness much like mine to grasp a little more with reference to this problem. I believe there are lots of more fun instances up front for many who browse through your site.

  7. kyrie 7 [#]

    I must express appreciation to you for bailing me out of this particular incident. Because of scouting through the the web and seeing principles which are not productive, I assumed my life was well over. Existing devoid of the approaches to the problems you have solved as a result of your entire site is a crucial case, and those which could have negatively damaged my career if I had not encountered your site. Your own natural talent and kindness in taking care of all areas was very useful. I don’t know what I would’ve done if I hadn’t come upon such a stuff like this. It’s possible to at this time relish my future. Thanks for your time so much for the reliable and amazing help. I won’t hesitate to suggest your web sites to anyone who will need recommendations about this situation.

  8. yeezy [#]

    I’m also writing to make you be aware of what a beneficial discovery my child found viewing your webblog. She mastered numerous things, not to mention how it is like to have an ideal coaching mood to make the mediocre ones without difficulty have an understanding of certain impossible topics. You undoubtedly exceeded visitors’ desires. Thanks for rendering the precious, trustworthy, revealing and in addition fun tips about that topic to Tanya.

  9. bape hoodie [#]

    I intended to send you a very little word to give thanks as before for these lovely tactics you have documented above. It was quite particularly generous with people like you to present extensively exactly what a few individuals could have made available for an electronic book in order to make some money for themselves, most notably given that you could possibly have done it in case you desired. Those pointers likewise worked like the good way to comprehend other individuals have the same dreams like my very own to realize much more concerning this condition. I’m certain there are a lot more enjoyable sessions ahead for individuals that go through your blog post.

  10. supreme clothing [#]

    I wish to get across my affection for your kind-heartedness for men and women that need assistance with in this study. Your real dedication to passing the message across had become especially important and have in most cases permitted ladies like me to get to their objectives. Your personal valuable facts means so much to me and extremely more to my office workers. With thanks; from each one of us.

  11. kyrie 5 [#]

    I have to express my affection for your generosity giving support to folks that need assistance with this particular content. Your very own dedication to passing the solution along turned out to be incredibly powerful and have without exception allowed associates just like me to realize their targets. Your own useful help and advice denotes a great deal to me and still more to my office workers. Thank you; from everyone of us.

  12. jordans [#]

    I wanted to draft you one bit of word to help say thanks a lot as before relating to the exceptional thoughts you have shown on this page. It is quite pretty generous of you giving freely what a few individuals would have offered for an e-book to get some cash on their own, primarily considering the fact that you might well have tried it in case you desired. The good tips as well acted as a fantastic way to comprehend other people have a similar eagerness like my personal own to realize a lot more when it comes to this condition. I know there are several more pleasurable opportunities in the future for folks who discover your blog post.

  13. modafinil200mg [#]

    https://getmodafinilnow.com/ modafinil interactions

  14. Anthonyslany [#]

    viagra 50mg pills viagra cialis levitra trial pack – where to buy viagra in chicago

  15. GustavoVet [#]

    write my essay online
    cpm homework help cc2

CSSLab