Lo que se viene: HTML 5

21/Ago/2007 2307

Por primera vez en este milenio, nuevos elementos son agregados a HTML. Nuevas etiquetas de estructura, nuevos elementos de línea, nuevas maneras de agregar objetos y nuevos elementos interactivos son algunas de sus promisorias bondades.

El desarrollo de HTML quedó estancado en 1999 con HTML 4. Desde ahí hasta ahora, la guerra de browsers no ha terminado: IExplorer con una gran parte de la cancha cubierta y Firefox y Opera dando la batalla por ganarse su merecido espacio. Desafortunadamente han dejado de lado una buena parte de los consejos de la W3C sobre los estándares, y se han esforzado en ofrecer tabs, password managers y lectores de RSS integrados, aparte de agregar skins y temas customizables. Era hora de hacer algo por el fondo mismo: el código fuente.

Viendo que nada pasaba por parte de la W3C (quienes siguen enfocados con SVG, XForms y MathML), recientemente, 3 de los mayores fabricantes de browsers: Apple, Mozilla y Opera se unieron para desarrollar una versión mejorada del clásico HTML. Más reciente aún, la W3C despertó y escuchó al grupo y la nueva HTML 5 porfin ve una luz.

Pero no se preocupen, no han reinventado la rueda.

Permanecen nuestros viejos amigos <p>, <div> y <strong> pero se incluyen nuevas etiquetas que refuerzan la semántica: <section>, <header>, <footer> y <nav>, entre otros. Nada de otro mundo, pero muy útiles. Seguro que te preocupa si Netscape 4 aún reconocerá esos nuevos elementos. Pues esto fue pensado para ser degradable, o sea, ser reconocido por versiones antiguas de navegadores. Si no, dificilmente se haría la migración.

Estructura

La idea es que a través de nuevas etiquetas, las que no asustan para nada ya que tienen nombres muy obvios, construímos nuestros sitios antes llenos y colapsados de div’s. Ahorraremos bastantes ahora. Con el siguiente ejemplo, recrearemos lo que usualmente hacemos hasta ahora:

<html>
     <head>
          <title>Ejemplo</title>
     </head>
     <body>
          <div id="contenedor">
               <div id="encabezado">
                    <h1>Titulo de este ejemplo</h1>
               </div>
               <div id="contenido">
                    <div id="menu">
                         <ul>
                              <li><a href="" title="Ir a Uno">Uno</a></li>
                              <li><a href="" title="Ir a Dos">Dos</a></li>
                              <li><a href="" title="Ir a Tres">Tres</a></li>
                         </ul>
                    </div>
                    <div id="columna">
                         <p>Proin at eros non eros.........</p>
                    </div>
               </div>
               <div id="pie">
                    <p>copyleft</p>
               </div>
          </div>
     </body>
</html>

Bastantes div’s para una página simple, con un contenedor donde cabe mi encabezado, mi contenido con un menú con listas y un pie de pagina. A través de CSS se le da luego el posicionamiento y los estilos, pero esto no es importante ahora. Me interesa la estructura, el esqueleto.

Ahora, cómo sería con HTML 5:

<html>
     <head>
          <title>Ejemplo</title>
     </head>
     <body>
          <header>
               <h1>Titulo de este ejemplo</h1>
          </header>
          <section>
               <nav>
                    <ul>
                         <li><a href="" title="Ir a Uno">Uno</a></li>
                         <li><a href="" title="Ir a Dos">Dos</a></li>
                         <li><a href="" title="Ir a Tres">Tres</a></li>
                    </ul>
               </nav>
               <article>
                         <p>Proin at eros non eros.........</p>
               </article>
          </section>
          <footer>
               <p>copyleft</p>
          </footer>
     </body>
</html>

Ningún div. En vez de utilizarlos (son etiquetas separadoras, lineal, y no tienen significado semántico) estamos reemplazándolas por nuevas etiquetas que sí le dan significado a nuestra estructura. ¿Un acercamiento a la Web 3.0?

Revisemos estas nuevas etiquetas:

  • <header> El encabezado; no confundir con el aún vigente y fiel <head>.
  • <nav> Navegación, una colección de links a otras páginas.
  • <section> Como un capítulo en un libro, puede albergar uno o varios <article>
  • <article> Un artículo.
  • <footer> El pie de pagina, la firma, el email de contacto… enfin.

Media

Video y audio en la web no lo para nadie, pero todo es propietario. Youtube usa Flash, Microsoft usa Windows Media y Apple utiliza Quicktime. Actualmente se utiliza <embed> y <param> al mismo tiempo para insertar un swf, lo que hace no validar el HTML. Pero la promesa viene con una etiqueta de video y otra para audio que permite insertarlos independiente del formato:

<video src="video.mov" />
<audio src="../musicas/growl.mp3" autoplay="autoplay" />

Esto es sólo un resumen, se viene mucho más. Ojalá esto permita que se construya una mejor web, para el bien de todos.

Links

Comentarios

  1. Loredophertarry [#]

    free slots no deposit casino

  2. DavidMesse [#]

    online gambling play casino

  3. CarlosBub [#]

    online casino gambling free casino

  4. DiedraEcope [#]

    casino game real casino slots

  5. Hazellelax [#]

    slots online play casino

  6. Skinconsehick [#]

    play slots online gambling

  7. SharylSet [#]

    vegas slots online best online casino

CSSLab