HTML5: Analizando los cambios que trae la nueva versión del lenguaje estándar web
Y si bien se habla constantemente del flamante HTML5, poco o nada se dice de los cambios que conlleva, sin contar el hecho ya archiconocido por todos de que, justamente, permitirá la reproducción nativa de video. Aquí van entonces algunos de los cambios más importantes.
Audio y Video
La reproducción de video -y audio, no hay que olvidar, se lleva a cabo mediante etiquetas como en los siguientes ejemplos:
<video id="video" width="640" height="480" volume=".7" controls autoplay>
<source src="video.ogg" type="video/ogg"> </source>
</video>
y, en el caso del audio:
<audio>
<source src="music.oga" type="audio/ogg">
</audio>
Nueva estructura
Tomando en cuenta la utilización que damos a algunos elementos div con identificadores muy comunes, los desarrolladores crearon una nueva estructura de elementos que cambiarán la manera de elaborar el contenido (sobre todo de blogs) y la manera en que los buscadores lo analizan.
Se trata de las etiquetas :
- article : Una entrada independiente en un blog, sitio o revista.
- footer : El final de la página, donde se incluyen los modos de contacto, etc.
- header : No el elemento head, sino la cabecera de una determinada página.
- nav : Una colección de vínculos a otros sitios o páginas.
- section : Una sección determinada que incluye su propio encabezamiento.
Mark, Aside y Time
Mark se utilizará para indicar importancia a un determinado texto.
<p>La <mark>etiqueta mark</mark> es utilizada para llamar la atención.</p>
Quizás no hayan reinventado la rueda con esta etiqueta, pero con <aside> podremos definir un bloque semántico que representa una nota o explicación, relacionado con alguna otra parte del contenido.
Por otro lado, han creado una etiqueta que mejora el manejo de fechas y horas (esto se hacía en HTML4 mediante la etiqueta abbr):
<time datetime="2010-03-29">Marzo</time>.
<time>09:00</time>
Mejoras en <input type…>
Se han añadido varios nuevos tipos de ingreso de texto, pudiendo especificar si se trata de una url o un email, un entero, una fecha, etc. Algunos ejemplos:
<input type="email">
<input type="url">
<input list="title-list">
<datalist id="title-list">
<option value="...">
</datalist>
Además, la validación de los datos ingresados también será más sencilla gracias a otras nuevas etiquetas (no comentadas en este artículo).
Cuadro de diálogo
Con la etiqueta <dialog> podemos incluir, valga la redundancia, cualquier tipo de diálogo.
<dialog>
<dt> Usuario 1:
<dd> Hola!
<dt> Usuario 2:
<dd> Hola! :)
</dialog>
Barra de progreso, canvas y puntuación
Gracias a la etiqueta <progress> podremos incluir el progreso de una tarea cualquiera que se esté ejecutando, mas trabajando en conjunto con JavaScript podremos incluir también una barra de progreso visual.
<progress>
<span id="objprogress">76</span>%
</progress>
y con <meter> insertamos un valor fraccional de una medida escalar, que seguramente usaremos junto a JavaScript para incluir de manera muy simple el típico gráico de una a cinco estrellas.
Con <canvas>, implementado por primera vez por Apple para sus widgets, podremos dibujar gráficos dinámicos e interactivos.
Finalmente, la etiqueta <device> permitirá al cliente acceder a varios dispositivos, como puede ser una webcam, en tanto con <embed> podemos determinar contenido embebido, como por ejemplo un plug-in. Estos no son sólo más que algunos de los cambios más importantes que trae la quinta versión del lenguaje de marcado HTML, los que quieran continuar profundizando pueden visitar el sitio oficial del W3C.
Vía | Bitelia