Blog sobre programación, tecnología, humor y un poco más…
Dec
07
27

Un vistazo al HTML 5

Por: DarkPaladin

Encontre un excelente articulo en ingles que habla sobre las caracteristicas que estan desarrolladas para el HTML 5 hasta el momento, aunque aun falta mucho para que el desarrollo finalize. Esto es un extracto de lo que lei:

El HTML 5 introduce una serie de nuevos elementos para facilitar la estructuracion de una pagina.

Esta es la estructura basica de una pagina en HTML 4:

Div html4
Como ven todo esta hecho con divs con sus atributos id para identificarlos

Bueno pues el HTML 5 introduce nuevos elementos para estructurar una web:
Div HTML5
Estos son: header, nav, section, article, aside, y footer.

El codigo HTML seria este:

HTML:
  1.   <header>...</header>
  2.   <nav>...</nav>
  3.   <article>
  4.     <section>
  5.       ...
  6.     </section>
  7.   </article>
  8.   <aside>...</aside>
  9.   <footer>...</footer>
  10. </body>

El autor explica cada etiqueta

Header: El Header representa la cabecera de la pagina, no solo puede tener una cabecera, si no que puede tener varias por ejemplo para incluir una subcabecera:

HTML:
  1. <header>
  2.   <h1>Vistazo del HTML 5</h1>
  3.   <p class="byline">Por Lachlan Hunt</p>
  4. </header>
  5. <header>
  6.   <h1>Blog de Ejemplo</h1>
  7.   <h2>Subcabecera.</h2>
  8. </header>

Footer: Este elemento contiene el pie de pagina y generalmente contiene los creditos del autor, datos de copyright, etc.

© 2007 Derechos Reservados.

Nav: Contiene la lista de navegacion, como enlaces del sitio y tabla de contenidos

HTML:
  1. <nav>
  2.   <ul>
  3.     <li><a href="/">Inicio</a></li>
  4.     <li><a href="/products">Productos</a></li>
  5.     <li><a href="/services">Servicios</a></li>
  6.     <li><a href="/about">Acerca de</a></li>
  7.   </ul>
  8. </nav>

Aside: GGeneralmente es usada para los sidebars, muy usados en esto de los blogs.

HTML:
  1. <aside>
  2.   <h1>Archives</h1>
  3.   <ul>
  4.     <li><a href="/2007/09/">September 2007</a></li>
  5.     <li><a href="/2007/08/">August 2007</a></li>
  6.     <li><a href="/2007/07/">July 2007</a></li>
  7.   </ul>
  8. </aside>

Section: Representa una seccion del documento, como puede ser capitulos o secciones. En los blogs vendria siendo cada entrada

HTML:
  1. <section>
  2.   <h1>Capitulo 1</h1>
  3.   <p>Habia una vez....</p>
  4.   <p>Entonces....</p>
  5.   <p>Por ultimo....</p>
  6. </section>

Article: Representa una seccion especifica de la pagina, por ejemplo los comentarios, entradas, etc.

HTML:
  1. <article id="comment-2">
  2.   <header>
  3.     <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
  4.         by <a href="http://noexiste.com/">Juan Perez</a></h4>
  5.     <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  6.   </header>
  7.   <p>!Que gran articulo!</p>
  8. </article>

Incluso tambien contiene elementos especiales, como para iinsertar videos o musica en la pagina

Video:

HTML:
  1. <video src="video.ogg" id="video"></video>
  2.   var video = document.getElementById("video");
  3. </script>
  4. <p><button type="button" onclick="video.play();">Play</button>
  5.    <button type="button" onclick="video.pause();">Pause</button>
  6.    <button type="button" onclick="video.currentTime = 0;">
  7.    <<Rewind</button></p>

Este codigo muestra como se puede insertar un video en la pagina, y mediante los metodos play(), pause(), y el atributo currentTime se puede controlar los aspectos basicos de un video

Pues es todo, estas son unas de las pocas caracteristicas que de seguro introducira el HTML 5 a la web. Espero que les haya agradado.

Web del autor



Trackback URI | Comentarios RSS

Deja tu comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Diseño completamente por DarkPaladin. 2008 Todos los derechos reservados.
Creative Commons License
dpaladin theme by Francisco Javier is licensed under a Creative Commons Atribución-No comercial-No Derivadas 2.5 México License.

Valid XHTML 1.0 Strict ¡CSS Válido!