Juan Manuel 4 de diciembre de 2007 a las 14.13
   Imprimir artículo
elWebmaster.com

HTML 5 ¿Qué novedades trae la nueva versión de este lenguaje?


La web evoluciona constantemente. Sitios innovadores se crean cada día, llevando más allá los límites del HTML. Sin embargo son también restringidos por este lenguaje. Alrededor de una década pasó desde la salida del HTML 4 y hoy en día se busca mejorar en gran medida la funcionalidad y la interactividad de usuarios y aplicaciones. HTML 5 presenta una amplia gama de mejoras en controles para formularios, APIs, multimedia y también en la estructura y la semántica.

El trabajo en HTML 5 comenzó en el 2004 y es un esfuerzo conjunto entre el W3C HTML WC y el WHATWG. Muchos aportan su participación, como Apple, Mozilla, Opera, Microsoft y un sinnúmero de personas y empresas.

Pero el trabajo aún se está llevando a cabo y todavía falta un tiempo hasta que esté terminado. Las características comentadas a continuación pueden variar, pero servirán para que los webmasters tengan una idea de lo nuevo que se viene en este lenguaje.

Novedades en la estructura de HTML 5

Será mucho más fácil crear la estructura de un sitio con HTML 5. Con la versión anterior se crean páginas que incluyen estructuras comunes como headers, footers y columnas y es común usar divs para darles una id descriptiva o clase.

El uso de divs es muy común porque las actuales versiones de HTML 4 carecen de la semántica necesaria para describir estas partes de manera específica.

HTML 5 soluciona esto incluyendo nuevos elementos que representan cada una de las diferentes secciones de un sitio.

En la nueva versión, los divs se podrán reemplazar por nuevos elementos: header, nav, section, article, aside y footer.

El código en HTML 5 quedaría de la siguiente manera:

Muchas son las ventajas de usar estos elementos. En conjunto con headings (h1 a h6) nos dan la posibilidad de marcar secciones anidadas con niveles de headings, más allá de los seis niveles posibles en versiones anteriores de HTML. Además incorpora un algoritmo detallado para generar un outline que toma la estructura de estos elementos y los hace compatibles con versiones previas del lenguaje. Puede ser usado en navegadores para generar tablas de contenido para ayudar a los usuarios a navegar el documento.

Veamos el siguiente ejemplo (sección anidada con h1)

Al identificar las secciones en la página usando estos elementos los usuarios podrán navegar con mayor facilidad, por ejemplo, podrán saltar a la barra de navegación o ir de un artículo a otro, no haciendo falta que el webmaster agregue links. Además el código será más prolijo.

El header representa la cabecera de una sección, pero puede incluir, entre otras cosas, información del historial de la versión o “bylines”.

Otros ejemplos de inclusiones dentro de los elementos:

Footer:

Nav:

Aside:

Section:

Article:

Audio y video en HTML 5

En los últimos años el auge del video y el audio en la web fue desplazando cada vez más al HTML, que carece de medios suficientes como para incrustar y controlar multimedia por sí mismo. La gran mayoría optó por Flash, mientras YouTube, Viddler, Revver y MySpace siguen creciendo.

Si bien es posible incrustar multimedia usando varios plug-ins (como QuickTime, Windows Media, etc.), Flash es el único que provee un servicio multiplataforma compatible con las APIs que cada vez son más.

El plan es incluir en los navegadores soporte para video y audio incrustado y proveer DOM APIs para scripts que controlen la reproducción.
Los nuevos elementos video y audio lo harán realmente fácil. La mayoría de las APIs son compartidas por ambos elementos.

Opera y WebKit lanzaron ya builds con soporte parcial para el elemento video. Te puedes descargar la versión experimental del build de Opera (clic aquí) o la de WebKit (clic aquí) para probar estos ejemplos.

La manera más simple de incrustar video es usar el elemento video y permitir al navegador proveer una interfaz de usuario por defecto. El atributo controls indica cuándo el autor quiere esta UI por defecto en “on” o en “off”.

El atributo opcional poster puede ser usado para especificar una imagen que se mostrará en lugar del video antes de que se empiece a reproducir (MPEG-4 soporta su propio poster, pero no sucede lo mismo con otros formatos).

El elemento audio es igual de fácil de usar y comparte los mismos atributos que video salvo, obviamente, los atributos width, height y poster.

HTML 5 incluye el elemento source para especificar archivos de video y audio alternativos que el navegador puede elegir basándose en formato o códec que soporte.

Para los que quieran ganar mayor control de la interfaz del usuario para que encaje en el diseño de la página, la API extensiva provee varios métodos y eventos para que los scripts controlen la reproducción. Los más simples son play(), pause() y currentTime que se puede setear para que rebobine el archivo hasta el comienzo.

Hay muchos otros atributos y APIs disponibles para elementos de audio y video.

Representación del documento en HTML 5

A diferencia de versiones previas de HTML y XHTML, definidas en téminos de su sintaxis, HTML 5 se define en términos del Document Object Model (DOM), el árbol usado por los navegadores para representar el documento. Por ejemplo, imaginemos un documento muy simple que consista en un título, heading y paragraph. El árbol del DOM se vería así:

El árbol del DOM incluye el elemento title en head y h1 y p en body.

Fuente: alistapart


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. IRAIS dice:

    esta muy bien lo que piensan hacer

  2. Juan Esteban dice:

    Muchísimas gracias por la información esta super completa…

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder