Después de haberse publicado numerosos bocetos, artículos y noticias acerca de HTML5, trataremos de analizar con un poco más de detalle qué es lo que realmente se nos viene encima a los desarrolladores web con HTML 5 y sus nuevas características, novedades que incrementarán nuestras posibilidades y que darán lugar a nuevas ideas para nuestros proyectos web.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.

Una evolución constante

La web está en constante evolución. A diario surgen nuevos proyectos que no dejan de mejorar lo conocido hasta entonces, cuando todo parece que está inventado aparecen nuevos trucos o ideas que dan una vuelta de hoja más a todo lo existente, impulsando y ampliando los límites de los recursos disponibles un poco más lejos de lo que actualmente están.

Si HTML 4 no estaba preparado ni concebido para el contenido multimedia, los desarrolladores nos hemos encargado de buscar la forma de implementar este tipo de contenido en nuestras webs, hemos por ejemplo utilizado objetos flash embebidos para los vídeos, hemos utilizado javascript para simular presentaciones powerpoint…

Como ocurre en cualquier entorno de desarrollo, los desarrolladores web nos hemos encargado de buscar y ampliar los límites de la tecnología y recursos existentes, definiendo el rumbo que deberían tomar las características y funcionalidades futuras.

Y es que HTML 5 y la mayoría de sus nuevas características no dejan de ser una evolución natural y necesaria de lo que actualmente estamos utilizando los desarrolladores. Necesitamos mayor estandarización en el contenido multimedia, nuevos tipos de etiquetas para la estructura de nuestros blogs, drag & drop, etc.

A continuación analizaremos algunas de las características y novedades más importantes en distintos puntos.

Nueva estructura, estandarizando lo existente

Una cabecera, un menú de navegación, una zona para el contenido, una barra lateral y por último un footer. ¿A cuántos de vosotros no os resulta familiar esta estructura? Como comentábamos en la reflexión inicial del artículo, HTML 5 es una evolución natural y necesaria de cómo se están usando utilizando actualmente los distintos elementos HTML, una imagen vale más que mil palabras:

Comparativa HTML 4 VS HTML 5

Con HTML 5 surgen nuevos elementos que dan mayor significado, coherencia y estandarización a nuestras estructuras web:

  • header: cabecera.
  • article: artículo publicado.
  • section: sección dentro del artículo.
  • footer: pie de página.
  • nav: menú de navegación.
  • aside: barra lateral o sidebar.

A priori para algunos esto puede no tener ningún significado o ventaja más allá de facilitarnos la escritura, pero como todo elemento HTML, estos elementos tienen su uso y significado. Un ejemplo claro y sencillo: los navegadores de distintos dispositivos podrán identificar perfectamente cuáles son las secciones del menú de navegación de una página web, esté localizado debajo de la cabecera, en un lateral o donde sea…

De cara a usabilidad y accesibilidad es realmente interesante.

Audio y Video: Mejorando el contenido multimedia

Actualmente la mayor parte del contenido multimedia está siendo transmitido mediante reproductores flash embebidos en nuestro código HTML.

Dependemos de una tecnología de terceros para poder compartir material audiovisual: Flash de la compañía Adobe. Sin entrar a valorar su rendimiento y ventajas / desventajas es evidente que es una barrera de entrada que un usuario no pueda visualizar en primera instancia todo este contenido hasta que instale en su navegador el plugin flash correspondiente.

Así pues tenemos estas dos nuevas etiquetas:

  • video
  • audio

Hasta ahora flash ha funcionado relativamente bien y está extendido en la mayoría de ordenadores. Sin embargo se han evidenciado algunas carencias o dificultades a la hora de customizar las interfaces en los distintos reproductores flash: barras de carga, botones de play y pause, control del volumen… y para los desarrolladores web no familiarizados con la tecnología flash es realmente incómodo y una gran pérdida de tiempo.

Otro de los problemas es el de comunicar correctamente el objeto flash con nuestra página web, existen distintas soluciones en las que por medio de javascript podemos comunicarnos con los objetos flash, pero nuevamente se está tratando de saltar restricciones que de inicio nos quitan mucho tiempo de desarrollo en algo que debería ser realmente sencillo: introducir contenido multimedia.

A pesar de la buena salud de la que goza flash a día de hoy, para los desarrolladores web supone una gran pérdida de tiempo el tener que customizar interfaces, comunicarnos con bases de datos, con nuestra aplicación web… etc.

Ahora con HTML 5, todo es mucho más sencillo, como debería haber sido siempre:

<video poster="imagenposter.jpg">
    <source src="video1.3gp" type="video/3gpp" 
    media="handheld">
    <source src="video1.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video1.mp4" type="video/mp4">
</video>
<audio>
  <source src="cancion1.oga" type="audio/ogg">
  <source src="cancion1.mp3" type="audio/mpeg">
</audio>

Podremos especificar distintas fuentes para un mismo video / audio, de forma que el navegador seleccione aquel formato que pueda reproducir.

Además, como comentábamos anteriormente, podremos customizar la interfaz y controlarla de forma cómoda y sencilla:

<video src="video1.mp4" id="video"></video>
<script>
	var video = document.getElementById("video");
</script>
<div>
	<button type="button" onclick="video.play();">Reproducir</button>
	<button type="button" onclick="video.pause();">Pausa</button>
</div>

Eso es mucho más cómodo que instalarse un editor flash y ponerse a estudiar el código de cada reproductor, ¿no crees? :) .

Nuevos controles para formulario

Otra de las cosas que se han echado en falta en los últimos años han sido nuevos tipos de controles, buena muestra de ello es la cantidad abrumadora de plugins para selección de fechas en calendario, cajas de búsqueda, validación de e-mails y urls… todas estas carencias han sido cubiertas con estos nuevos controles para nuestros formularios:

  • Fechas y horas
  • Email
  • Url
  • Búsqueda

Cabe esperar que además de validación, los navegadores implementen selectores de fechas por defecto (date pickers) entre otros para facilitar tanto a desarrollador como navegador su implementación / uso.

Elemento Canvas

Desde ahora el elemento canvas será un estándar más y nos permitirá entre otras cosas renderizar con detalle nuestras gráficas de datos, gráficos para videojuegos y otras imágenes al vuelo (en tiempo real).

A pesar de poder renderizar cualquier tipo de gráfico, en la definición recomiendan no utilizar canvas para lo que no ha sido creado, por ejemplo no tendría sentido utilizarlo para recrear una cabecera (header) de nuestra página web con nuestro logo, ya que en este caso tendríamos que emplear el elemento <h1>.

Cross-document messaging

Hasta ahora como comentaba mi compañero Iván los navegadores web no han permitido la interacción entre documentos alojados en distintos dominios, las razones han sido principalmente por seguridad y privacidad.

Si bien desactivar el “cross-site scripting” es una importante forma de asegurar seguridad y de prevenir problemas, está también impidiendo la comunicación entre scripts de documentos que en un principio deberían ser seguros. Por ejemplo, podríamos tener la necesidad de comunicarnos entre documentos de dos proyectos propios alojados en diferentes dominios.

Este caso o excepción es la que implementarán en HTML 5, asegurando igualmente la seguridad y privacidad de cara a agentes externos y que a buen seguro abrirá una nueva vía de cara a crear servicios web distribuídos entre diferentes dominios.

Elementos y Atributos obsoletos

Como ocurre en toda gran actualización se han eliminado algunos elementos y atributos que se han quedado obsoletos o que no cumplen con las bases de la nueva definición.

Los elementos eliminados son:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • s
  • strike
  • tt
  • u

Los atributos eliminados son:

  • rev y charset en <link /> y <a />
  • target en <link />
  • nohref en <area />
  • profile en <head />
  • version en <html />
  • name en <map />
  • scheme en <meta />
  • archive, classid, codetype, declare y standby en <object />
  • valuetype en <param />
  • charset en <script />
  • header, axis y abbr en <td /> y <th />
  • </body>

Otras mejoras y funcionalidades

La cantidad de especificaciones publicadas hasta el día 24 Noviembre es realmente numerosa, hemos tratado de analizar las que a priori nos han parecido más interesantes, pero os dejamos con una pequeña lista de otras novedades que nos han llamado especialmente la atención:

  • Almacenamiento en Base de Datos offline
  • Drag and Drop (arrastrar y soltar)
  • Edición de Documentos
  • Nuevos atributos: ping (en <a> y <area>), charset (en <meta>), async (en <script>)
  • Gestión de Historial del Navegador

Personalmente creo que la gestión del historial del navegador podrá dar mucho de sí, en muchas ocasiones me he preguntado y tratado de buscar cómo acceder al historial de páginas previas por las que ha pasado un usuario en mi aplicación :) .

Reflexión final

Como comentábamos anteriormente, es evidente que la definición del HTML 5 está muy marcada por las carencias y necesidades que los desarrolladores y usuarios nos hemos ido encontrando a lo largo de todos estos años con HTML 4.

Sin duda son buenas noticias para todos el hecho de estar basando la mayoría de nuevas funcionalidades y correcciones en base a esta experiencia previa, a fin de cuentas toda esta base de la nueva web debería durar unos cuantos años.

A pesar de todo este tiempo, son varios ya los años que HTML 5 lleva en definición, y es que no es fácil cambiar algo que afecta a tantos millones de personas.

Te sugerimos otras entradas relacionadas...

No hay entradas relacionadas para esta publicación.

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (6 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Mariajo

Y si no es mucho pedir, un articulo de CSS3 para aplicarlo al html5 estaría genial .

@Mariajo Es una buena idea! Ya la han comentado algunas personas… a ver si el próximo que publique trata como mínimo algunos ejemplos de lo nuevo con CSS 3 :)

Muy buen artículo :) A ver cuando se extiende, joder, que el cambio va a ser bestial, y para bien :D

La pregunta es ¿Cuándo podremos empezar a desarrollar en HTML 5?

YouTube tiene una versión en HTML 5 (dónde muestran un vídeo genial sobre una futura tecnología para navegadores) en plan de prueba, pero a mí solo me tira en el Safari 4 (FF 3.5 lo renderiza pero no funciona correctamente).

http://youtube.com/html5

Un saludo! ;)

@jofralogo Quizás dependa del tipo de audiencia al que van dirigidas tus aplicaciones… pero en cualquier caso HTML5 todavía no está completamente definido, sigue en revisión, etc. Pero eso no quita que no podamos empezar a experimentar con el y a ver qué podremos hacer en su momento ;)

Janeth Magaña