Diseño web con HTML5

HTML5 nos abre un repertorio de posibilidades que en algunos casos sólo podían usarse con lenguajes propietarios como Flash, o métodos no demasiado ortodoxos, como es el caso de los embed para incrustar elementos multimedia como videos.

Así que si no lo has hecho ya, es el momento es de aprender HTML5 y experimentar con él.

¿Qué es HTML5?

HTML5 es un lenguaje de marcado que se utiliza para el desarrollo de contenidos para la red mundial y es un elemento muy importante del Internet moderno. En pocas palabras, es el lenguaje que se encarga de describir cómo debe lucir una página en base a su estructura.

HTML5 es el más emocionante paso adelante que se ha dado en los últimos años en lo que ha desarrollo web se refiere, ya que desde el lanzamiento de XHTML 1.0 no había existido un avance de tal magnitud.

Comparación con HTML4

En comparación con HTML5, la versión 4 de HTML es limitada en funciones y al utilizarlo los desarrolladores tenían que depender de Flash o Java plugins para añadir contenido rico a sus sitios web.

HTML5 tiene entre sus objetivos el no utilizar plugins de Flash, lo que ahorra en gran escala el consumo de CPU.

Introducción a diseñar una web con HTML5

Hasta hace un par de años para poder hablar a profundidad sobre HTML se necesitaba desempolvar libros y manuales escritos hace ya más de una década.

Historia de HTML5

El lenguaje de marcado, que da origen a todas las páginas web en su estructura fundamental, fue abandonado y apartado de innovación desde finales de la década de los 90s, por lo que su uso se volvió más una obligación que una solución.

En 2004 la W3C estableció la necesidad de contar con un nuevo estándar para la web, por lo que se propuso crear una nueva versión del estándar XHTML que se había venido utilizando desde principios de la década de los 2000s.

En ese momento XHTML representó una solución para muchos de los problemas que se presentaban con HTML, permitió dar un paso importante para la evolución de otros lenguajes y creación de frameworks, sin embargo no era realmente utilizado por todos y no desarrollar en base a sus reglas era algo que al navegador no le importaba, por lo que la propuesta de un nuevo estándar fue necesaria y eso llevo a la primera edificación de XHTML2.

Por su parte empresas como Apple, Mozilla y Opera decidieron retomar el proyecto abandonado para la creación de una quinta versión de HTML, y empezaron a trabajar sobre ello para lograr una mejor compatibilidad con las tecnologías de la actualidad.

Fue en 2006 cuando la W3C volvió a interesarse en HTML5 y finalmente en 2007 se unió al grupo que se encontraba trabajando en esta versión, para así unificar proyectos. Sin embargo, en la W3C aún existía rechazo hacia esta versión, por lo que también se siguió trabajando en XHTML2 de forma paralela, llevando así una carrera por ser el nuevo estándar de la web.

El entusiasmo por XHTML2 fue desapareciendo por el lento desarrollo y HTML5 tomo mucha fuerza impulsado por las compañías que estuvieron detrás de su desarrollo, contando con varias presentaciones y sitios que fueron hechos únicamente para mostrar su potencial, finalmente en 2009 no se renueva el proyecto para desarrollar XHTML2 y en 2010 se da la popularización de HTML5.

Ventajas y desventajas de usar HTML5

HTML5 tiene muchas nuevas y poderosas características, las cuales pueden llegar a tener un gran alcance, tanto para los desarrolladores como para los usuarios.

Al igual que cualquier otro software, tiene también inconvenientes las cuales tienen que ser tomadas en consideración a la hora de desarrollar una aplicación web.

Ventajas:

• No hay necesidad de utilizar plugins los cuales pueden llevar a la desaceleración de la computadora y consumen la batería del dispositivo.
• Se puede tener acceso al hardware del dispositivo, como por ejemplo el micrófono, la cámara o datos como la ubicación del usuario
• Se tiene un código base para poder aplicarse en muchas plataformas

Desventajas:

• Poca disponibilidad de herramientas para la edición y creación de contenidos interactivos.
• Peor rendimiento en comparación con las aplicaciones nativas.

¿Se puede usar HTML5 hoy?

HTML5 ha sido una de las tecnologías de moda en estos últimos años, cientos de artículos, documentos e inclusivo sitios enteros se han creado para explicar su funcionamiento y los beneficios que su aplicación puede traer.

Sin embargo, su desempeño muchas veces se ha puesto en tela de juicio, principalmente por su problema de compatibilidad, lo que ha obstaculizado su total aceptación por parte de los diseñadores y desarrolladores web. A día de hoy, la compatibilidad de navegadores ya no es un problema.

Gracias a la constante promoción de empresas como Google y decisiones como las que tomó Apple de no dar soporte a Flash en sus nuevos dispositivos móviles, el mundo web empezó a moverse a HTML5 y considerarlo un proyecto más serio.

Debido a este respaldo proporcionado por varias empresas grandes, otras se vieron atraídas por la tecnología y muchos más empezaron a unirse a este soporte.

Características de HTML5

Los formularios son optimizados y su validación se vuelve más sencilla, se incluye el soporte a elementos de tipo audio y video sin tener que recurrir a plugins o flash. Es en este grupo donde se encuentran las características que más soporte tienen en los navegadores actuales.

También existen otras características que si bien son parte del estándar, necesitan de la implementación de otros lenguajes como JavaScript para un correcto funcionamiento, tal es el caso del almacenaje local, funcionamiento offline de las aplicaciones y mensajería. Estos son temas un poco más avanzados por lo que trataremos de verlos a fondo más adelante.

A la par con HTML5 se han venido desarrollando otra clase estándares que van de la mano con esta versión y aumentan la genealidad de los diseños web, tal es el caso del lenguaje CSS3, imágenes SVG2 y la geolocalización, los cuales han causado que en más de una ocasión se les considere como características de HTML5, sin embargo son proyectos totalmente independientes que se han aunado al progreso producido en forma de conjunto.

A lo largo de este manual trataremos de ir analizando cada una de estas características y adentrarnos por completo al estudio de este nuevo estándar que ha maravillado a la comunidad de la Web.

Casos de uso

Puedes intentar elaborar juegos utilizando Canvas, pero es posible que te llegues a encontrar con algunos problemas, como el rendimiento del elemento cuando los juegos son complejos. Una solución puede consistir en reescribir algunas partes y utilizar algún DOM renderer y para mejorar el rendimiento puedes utilizar animaciones con sprites.

Se pueden utilizar características de HTML5 que te permitan tener toda una aplicación guardada localmente en caso de no tener conectividad.

Se pueden utilizar etiquetas de vídeo y audio para reproducir archivos y contenido que no se encuentre en línea.

Fundamentos de uso de HTML5

Debido a su relativa reciente incorporación al mundo del desarrollo, son pocos los que conocen a ciencia exacta las propiedades completas de este nuevo lenguaje.

Es por ello que en este artículo nos hemos decidido a mencionar las principales características de este lenguaje de marcado, para así establecer las bases necesarias para un correcto desarrollo.

Son varios los nuevos elementos que incluye este lenguaje, los cuales en la actualidad son compatibles con todos los navegadores populares en sus versiones más modernas. Firefox, Chrome, Safari y Opera han dado soporte a este lenguaje desde tiempo atrás, mientras que Internet Explorer dio soporte desde septiembre de 2010 con la versión beta de IE9.

HTML 5 y el contenido multimedia

La etiqueta “video” trae consigo varios atributos, entre los cuales encontramos “control”, “autoplay”, “src”, “height”, “width”, “loop”, “preload” y “audio”, lo que nos da la oportunidad de modificar el reproductor a nuestro gusto sin necesidad de recurrir a CSS o Javascript.

Además de esto, “video” nos permite la adición de texto entre la apertura y cierre de la etiqueta.

Por su parte, la etiqueta “audio” funciona de manera similar para el contenido de sonido y tiene cinco atributos por su propia cuenta, “autoplay”, “controls”, “loop”, “preload” y “src”.

Estructura del sitio con HTML 5

Con nuevas etiquetas como “section”, “footer”, “header”, “nav”, “article”, “aside” y “figure”, HTML5 establece nuevos niveles de estructuración. Estas etiquetas se encargan de definir las distintas secciones de una página web, y muchas de ellas vienen con su propia posición en la página definida.

El diseño web en HTML5 es más semántico

Personalmente me gusta mucho toda la parte de semántica que se le ha añadido al código HTML con la llegada de HTML5.

Esa simplicidad por medio de etiquetas como <header> <article> o <footer> va a ahorrar a muchos diseñadores web la famosa divitis, o lo que es lo mismo, el usar divs para todo de manera excesiva. Ya no va a hacer falta poner algo como:

<div id="header">
    Contenido del encabezado de la página
</div>

En HTML5 será esto lo que usemos:

<header>
    Contenido del encabezado de la página
<;/header>

Como vemos, el diseño de una página web en HTML5 va a dotar al código fuente de mayor simplicidad y significado.

Ya tan sólo el doctype que se usa al diseñar en HTML5 nos puede dar una idea de lo que han buscado con esta nueva versión: hacer las cosas sencillas, y sobre todo sencillas de entender.

El doctype típico en HTML o XHTML es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Y este es el que se usa al diseñar con HTML5:

<!DOCTYPE html>

Como se puede apreciar, claramente simplificado.

Tiene sus ventajas como el hecho de usar un sólo tipo de DOCTYPE (<!DOCTYPE html>), implementar el getElementByClassName en el DOM, y las ya mencionadas etiquetas de estructura.

Utilizando estas etiquetas HTML5 pretende crear una estructura de vistas más homogeneizada y que el manejo de metadata sea mejor, tratando de emigrar a lo que en algún tiempo se denomino como “web semántica”.

Los que ven desventajas en el hecho de manejar tantas capas (a lo que muchos llaman “etiquetas inservibles”, “divitis”, etc.), les será de agrado la nueva forma de maquetar una página web que implementará HTML 5.

Como comento, al momento de manejar alguna herramienta semántica esto ayudará en gran medida.

Formularios con HTML 5

En total son veintitrés los tipos de “input” que podemos utilizar en un formulario, entre los cuales podemos encontrar los tipos “date,” “datetime,” “datetimelocal”, “time”, “month”, “week”, “url”, “range”, “number” y “email” que fueron incluidos con esta versión.

Con esto no habrá necesidad de declarar un input tipo “text”, condicionar los caracteres que recibe con Javascript y después validar del lado servidor el valor que realmente estamos esperando, basta con definir bien el tipo y el propio navegador se encargará de procesar correctamente los datos.

Elementos inline

Las etiquetas “meter”, “time”, “mark” y “progress” fueron incluidas para ser usadas en representaciones de figuras, fechas, hora, listas o barras de progreso, y asi lograr una mejor estructura semántica.

Generalmente se utilizan para envolver contenido similar, y como su propio nombre lo dice cada una de ellas tiene un tipo de contenido relacionado.

Diseñar gráficos con HTML5

La etiqueta “canvas” nos permite mostrar gráficos mediante código plano, a igual que nos da la oportunidad de definir una altura y anchura para el área de trazo, permite el uso de eventos HTML5 y al momento de combinarlo con Javascript se puede crear magia pura.

Su accedemos a esta etiqueta a través de las funciones de trazo de Javascript, nos sirve como superficie de dibujo en 2D para la presentación de gráficos, juegos, animaciones y composiciones de imágenes.

Elementos HTML5 interactivos

Para esta función se presentan etiquetas como “datagrid”, la cual puede ser utilizada para proporcionar un conjunto interactivo de datos. También contamos con la etiqueta “details” nos permite proporcionar consejos y otra información útil.

La etiqueta “menu”, que previamente había sido declarada obsoleta, vuelve con una nueva funcionalidad. Cuenta con dos atributos, los cuales son “label” y “type”, y se utiliza para definir las listas de menú con elementos de mando.

Cambios en los atributos de elementos ya existentes en HMTL 5

HTML5 agregó algunos atributos nuevos a los elementos que ya existían en la versión anterior del lenguaje.

Por ejemplo, los elementos de tipo anclaje como “a” y los elementos de tipo “area” han recibido un nuevo atributo que lleva por nombre “media”, el elemento “base” ahora tiene un atributo “target” y el elemento “meta” tiene a “charset” como atributo.

Por otra parte hay ciertos atributos que se deprecaron, tal es el caso del atributo “language” de la etiqueta “script”, “border” de la etiqueta “inc”, “name” de los tipo anclaje “a” y “type” como atributo de “style” y “script”,

Elementos deprecados en HTML 5

Existen varios elementos que quedaro al margen de esta nueva versión, etiquetas tradicionales como “font” pasaron a mejor vida, acompletan la lista las etiquetas “acronym” “applet”, “basefont”, “big”, “center”, “dir”, “font”, “frame”, “frameset”, “isindex”, “noframes”, “noscript”, “s”, “strike”, “tt” y “u”.

Ser un diseñador web preparado para HTML5

El caso es que los diseñadores web, las agencias de diseño web profesional, si no lo han hecho ya,  tienen que empezar a adaptarse a los cambios e ir integrando con cautela esta valiosa herramienta en sus desarrollos, en los servicios que se ofrecen a los cliente.

Los diseñadores web debemos prepararnos para diseñar en HTML5, así que para abrir boca, os dejo el link a una cheatsheet (chuleta) de HTML5 con las etiquetas principales, su uso y atributos.

Como no, no podemos olvidarnos de los maravillosos, resets de CSS, que nos hacen la vida mucho más fácil a la hora de maquetar una web. En este caso, ya tenemos reset para HTML5.

Renovarse o morir

No cabe duda que la incursión total de HTML5 es imparable, gracias al apoyo de compañías como Google que incluyó la codificación de su proyecto Google Wave en HTML5, el estándar logró ganar su primera batalla y ahora se proyecta para desbancar a otros productos de licencia como Flash.

Lo cierto es que HTML5 en combinación con otro relativamente nuevo estándar, como CSS3, puede generar un paquete de herramientas muy potente para el lado cliente que ayudará a todo el mundo informático, tanto a los usuarios, servidores, vendedores, buscadores y sobre todo a los desarrolladores.

No olvidarse de CSS3

Cosas que hasta ahora necesitaban de uso de imágenes, javascript o incluso flash, ralentizando nuestras páginas web.