5M de HTML5 – I

Durante unos días me gustaría hacer un post de 5 minutitos o menos de lectura respeto la nueva versión del lenguaje HTML.

Una de las patas de la WEB, el padre de todos los padres ha decido cambiar un poco su estructura en un momento donde la web esta suficientemente madura y es gran momento para empezar a solucionar alguno de los problemas que precedía de (X)HTML. Las principales ideas de HTML5 es su enfoque directo a la web semántica y a la accesibilidad, un punto cada vez mas importante si se quieren eliminar barreras en la navegación.

Por otro lado no hemos de olvidar que cada vez existen más páginas que se parecen mas a una aplicación que a una web, de aquí a que HTML5 está enfocada en base DOM (Document Object Model), para que nos entendamos sería la representación internat de la web con la que trabajaría el navegador, puramente dicho bloques de información (cabecera, menú, contenido…)

Hoy voy a intentar dar una pincelada respeto la estructura del HTML5 y sus nuevas etiquetas.

ESCRUCTURA

Todos aquellos que alguna vez hemos hecho alguna web o hemos creado el diseño de una web, habremos creado infinidad de etiquetas DIV y por lo tanto sabrán de lo que hablo, cada web es de su padre y de su madre. HTML5 lo que intenta es unificar estos div’s que creamos, de esta forma vamos a crear una web mucho más semántica, facilitando que algunas máquinas y a la vez aplicaciones, puedan seleccionar información de una web según su importancia.

Vamos a ver un ejemplo de como quedaría la estructura actual de un posible blog en HTML y como quedaría en HTML5.

En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos. Como veis se han estandarizado un conjunto de etiquetas.

Elementos interesantes:

• audio, video: Con estas etiquetas se puede introducir video y texto.  Lo mas interesante es que no hace falta plugins como flash u otros para poder reproducirlos.  Son etiquetas nativas,  por lo tanto se podrán añadir elementos en su interior, como por ejemplo imágenes o texto. Ahora por ahora esta etiqueta no está muy controlada, pero hay que esperar que grandes como Youtube las sepan potenciar al máximo. Como ya dije un día, flash podría llegar a desaparecer…
• embed: Sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas: Es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él, en un tiempo podremos llegar a ver páginas espectaculares.

Otros elementos interesantes:

• dialog: Sirve para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure: Este elemento sive para relacionar una imagen o video a un texto.
• mark: Como bien dice la etiqueta, nos servirá para resaltar un texto, sería como un “subrayado”.
• meter y progress: Estos dos elementos son complementos entre ellos. meter nos indicaría el tamaño de un elemento como por ejemplo una imagen o el % de carga. Por otro lado progress nos indica en que estado se encuentra una tarea. Estos dos elementos nos pueden servir para cuando queremos hacer tareas muy largas o costosas.
• time: Representa una fecha o una hora.
• command: Es un campo donde el usuario puede ejecutar un comando, personalmente creo que esta etiqueta puede ser peligrosa si no se sabe utilizar.
• output: Esta etiqueta te permite salir de una aplicación, o parar de realizar una acción.
• datagrid: Representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente. Personalmente creo que esta etiqueta será muy importante, pudiendo ejecutar una aplicación web sin estar conectado a internet.

No todos los navegadores web aceptan o estan preparados para interpretar estos elementos, en el siguiente enlace podéis ver que navegadores y a la vez SO aceptan estas etiquetas.

Como veis son muchas las cosas que se pueden llegar hacer en HTML5, creo que debe pasar un tiempo prudencial para que los programadores y diseñadores se encuentren comodos con estas etiquetas y sepan sacarle probecho.

Espero que estas pequeñas pinceladas os puedan ayudar a entender un poco mas lo que será la nueva web 3.0, donde la mayoría de las acciones van a recaer sobre el navegador del usuario y no sobre el servidor.

• Bookmark on Delicious
• Recommend on Facebook
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend