Después de analizar mis tutoriales anteriores, que se enfocaban básicamente en enseñarles a los jóvenes principiantes más sobre el diseño web y ayudarles a mejorar sus habilidades para empezar un nuevo negocio, me di cuenta que realmente necesitaba profundizar lo más que puedo en lo básico. Y aunque he cubierto una suficiente parte para empezar, me di cuenta de que faltaban dos cosas muy importantes, que son introducciones a fondo sobre HTML5 y CSS3. Así que me voy a asignar la tarea de enseñarles sobre estas dos tecnologías, y después, crear varios tutoriales para ustedes. Por lo tanto, en el próximo periodo, voy a intentar cubrir aspectos del Diseño de Interfaz (Front-end web design), programación básica y tutoriales sobre ellos. ¡Abróchense los cinturones, y prepárense para ser mejores en programación!

¿Qué es HMTL5?

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web Consortium (W3C). El primer borrador fue publicado en el año 2008, pero no ocurrió nada grande hasta el 2011. En el año 2011, el HTML5  fue publicado y la gente empezó a utilizarlo y escribir acerca de él, pero su soporte en los diferentes navegadores todavía era mediocre. Hoy en día, todos los grandes navegadores web (Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer) ofrecen compatibilidad con HTML5, por lo tanto, la tecnología HTML más reciente está en su auge.

El HTML5 funciona en conjunto con CSS3 y todavía sigue en desarrollo. La W3C planea publicar una versión estable lo más pronto posible, pero parece que va a ser un largo camino. Desde su publicación, el HTML5 has estado en desarrollo continuo, con la adición de más y más características impresionantes, el desarrollo de este lenguaje no parece tener un fin, pero eso no es necesariamente malo.

El HTML5 es el sucesor del HTML 4.01, publicado por primera vez en el año 1999. El Internet ha cambiado significativamente desde entonces y la creación del HTML5 parecía ser necesaria. El nuevo "lenguaje de etiquetas" fue desarrollado en base a estándares preestablecidos:

• Las nuevas características deben estar basadas en HTML, CSS, DOM y JavaScript.
• La necesidad de plugins externos (como Flash) debe ser mínima.
• El manejo de errores debe ser más fácil que en las versiones anteriores.
• El Scripting tiene que ser sustituido por más de "etiquetas" o markup.
• El HTML5 debe ser independiente del dispositivo.
• El proceso de desarrollo debe ser público.

¿Qué hay de nuevo?

El HTML5 fue creado para hacer el proceso de programación más fácil y más lógico. Van a ver un momento más adelante que muchos sintaxis ya son obsoletos y pronto van a ser expulsados del "juego". Las características únicas e impresionantes con las que viene el HTML5 están en el departamento de multimedia. Muchas de las características que ofrece fueron creadas con la consideración de que los usuarios deben ser capaces de ejecutar contenido pesado en dispositivos de baja potencia. Las características sintácticas incluyen los nuevo elementos <video>, <audio> y <canvas>, pero también la integración de contenido gráfico en vectores (lo que se conocía antes como etiquetas <object>). Eso significa que la multimedia y el contenido gráfico en la web se manejará y se ejecutará más fácil y más rápido, sin la necesidad de plugins o APIs.

Hay un montón de nuevas sintaxis que se añaden, pero a continuación voy a nombrar y describir las más importantes. Pueden encontrar el resto siempre en la sección de HTML5 de la W3C.

• <article> – esta etiqueta define un artículo, un comentario o una entrada (post), por lo que es un elemento independiente del contenido.
• <aside> – esta etiqueda marca el contenido que está al lado del contenido principal. Por ejemplo una barra lateral (sidebar).
• <header>, <footer> – no tenemos que nombrar IDs para encabezado y pie de página (headers y footers), por que ahora tenemos etiquetas preestablecidas para eso.
• <nav> – la navegación puede ser puesta entre las etiquetas nav en nuestra maqueta, que automáticamente hará que nuestras listas actúen como menú de navegación.
• <section> – esta es otra sintaxis importante, ya que puede definir cualquier tipo de sección en nuestro documento. Funciona prácticamente como un div que separa nuestras secciones.
• <audio>, <video> –  estas dos obvias etiquetas marcan los contenidos audio o vídeo, que ahora son más fáciles de ejecutar por los diferentes dispositivos.
• <embed> – esta nueva etiqueta define un contenedor para contenidos interactivos (plugins) o aplicaciones externas.
• <canvas> – la etiqueta canvas es muy interesante, ya que permite dibujar gráficos vía programación o "scripting" (Javascript mayormente, pero algunos otros lenguajes pueden ser empleados también).

Lo más importante que tenemos que recordar es que las nuevas etiquetas del HTML5 no siempre funcionan como las de antes. Por ejemplo, las etiquetas header y footer no solamente marcan el comienzo y el fin de una página, sino también el comienzo y el fin de cada sección que contiene. Esto significa que éstas dos etiquetas podrían ser utilizadas más de una sola vez en la misma página. En la siguiente ilustración pueden ver a lo que me refiero.

 Y Sí, la declaración DOCTYPE finalmente tiene sentido. O, por lo menos, esta vez es mucho más simple y fácil de recordar que antes y no tendremos que ir a buscarla en la web para copiarla a cada sitio que vamos a empezar. <!DOCTYPE html> cerrando con </html> al final de la página es algo que hemos esperado mucho tiempo y finalmente está aquí.

Por otra parte, las declaraciones complejas de XHTML, que muchos de nosotros habíamos utilizado antes, pueden ser reemplazadas con <html lang="es"> y las declaraciones de programación largas simplemente pueden ser escritas de esta forma: <meta charset="utf-8">. ¿Podría esto ser más simple? ¡Definitivamente, no!

Las siguientes etiquetas del HTML 4.01 han sido eliminadas del HTML5, por lo tanto los navegadores web no las soportarán más. Eso significa que es buena idea echarle un vistazo a tus páginas HTML y verificar si los utilizaste, ya que pueden interrumpir el diseño en los navegadores de última generación.

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Lo que hay que saber acerca del HTML5

Es crucial recordar que el HTML5 es basado en el éxito de su versión anterior, HTML 4.01, que sin duda fue la mejor versión de todos los tiempos. Para ser mejores en HTML5 no tenemos que olvidarnos de todo lo que sabemos de la versión anterior. No estamos aprendiendo un lenguaje totalmente nuevo. Recordemos nuestras sintaxsis favoritas y guardemos la manera con la que estructurabamos nuestro código, solamente tenemos que empezar a construir nuestras nuevas habilidades sobre las que ya habíamos desarrollado.

En caso de no tener ningún conocimiento de HTML y quienes empezar ahora, te aconsejo empezar con HTML 4.01 y cuando lo domines ya puedes moverte al HTML5. Empezando con la última versión es como comenzar a correr antes de aprender a caminar, lo que es imposible hasta donde yo sé. HTML 4.01 todavía contiene las básicas del HTML5, por lo tanto, y en mi humilde opinión, deberías tener un fuerte conocimiento de la anteriores versiones de HTML para poder dominar HTML5.

La ventaja de aprender HTML5 ahora es que este nuevo lenguaje funciona de inmediato. Puedes hacer, básicamente, lo que quieras con él hoy, y es compatible con la mayoría de los principales navegadores web. Desde vídeo hasta geolocalización, almacenamiento local y anotaciones de microdata, HTML5 es algo que necesitamos y tenemos que empezar a usar.

El HTML5 definitivamente está aquí y vino para quedarse. Es creado para sostener las necesidades de hoy en día y sobre todo porque está en continuo desarrollo, y será capaz de sostener los cambios que se producirán en la industria por un buen tiempo. Una de las razones principales detrás de el tiempo que está tomando HTML5 para ser desarrollado es que la W3C tenía que analizar muchos factores y pensar en el futuro. Se tomaron su tiempo y finalmente nos entregan algo que puede ser etiquitado, fácilmente, como un producto de alta calidad.

Ejemplos

Con el fin de mostrar hasta qué punto podría llegar el HTML5, voy a listar algunos sitios web y aplicaciones hechos con el nuevo lenguaje de maquetado, para que puedan ver cuántas cosas se pueden hacer con él.

1. Read es un theme (tema) hecho en HTML5 para Wordpress. Es minimalista, muy fácil de entender y utilizar, carga rápido y nada caro.

2. SmartStart es otra plantilla increíblemente simple hecha en HTML5.

3. Heaven fue hecha también con HTML5, pero no es una simple plantilla o un tema para Wordpress. Heaven es desarrollada para funcionar con Drupal.

4. Empezando con las aplicaciones, muestro este simple Temporizador de Ciegas en Poker (Poker Blind Timer), hecho en HTML5.

5. Coolendar es una sorprendente aplicación desarrollada en HTML5, que puede ser encontrada para ordenadores y dispositivos móviles (Android e iOS).

6. Scribd es desarrollada en HTML5 también, y les permite a los usuarios tener un fácil y rápido acceso a diferentes archivos y documentos que otros usuarios suben.

Aparte de sitios web y aplicaciones, los desarrolladores también crearon juegos basados únicamente en HTML5 en lugar de Flash como se hacía antes. A continuación dejo uno de los que más me gustaron:

Agent 008 Ball

Es un juego de billar realmente divertido hecho en HTML5 y desarrollado con la ayuda de kbuild. Tienes que meter las bolas que puedas antes de que se acabe el tiempo utilizando tu mouse.

¿Por dónde empezar?

El HTML5 no puede ser aprendido en una breve introducción. Hay dos formas para aprenderlo hasta donde yo sé. Agárrate un buen libro sobre HTML5, o bien empieza a buscar en Internet y a practicar. Te recomiendo hacer ambas cosas. Personalmente he aprendido HTML y CSS desde Internet, pero también hay información muy valiosa que puedes encontrar leyendo un libro como también hay otra que puedes llegar a obtener solamente practicando. Si ya cuentas con una sólida experiencia en HTML 4.01, no te tiene que tomar más de dos semanas para obtener las habilidades necesarias del HTML5 desde un libro. Y después, el mundo es tuyo, puedes empezar a practicar.

Para ayudarles aún más, les voy a dejar un par de enlaces que deberían consultar. Espero que cuando empiece a publicar tutoriales ya tengan un poco más de experiencia con HMTL5. Así que por aquí tienen que empezar amigos:

HTML5 For Web Designers – Jeremy Keith

En este entretenido, Jeremy Keith va al grano con ejemplos prácticos y claros. Como había dicho en varios artículos anteriores, si estás en el mundo de la tecnología, especialmente la programación, hablar inglés es algo que debes hacer.

Para más guías y tutoriales sobre HTML5, no hay mejor que los que vienen de la gente que lo desarrolló, así que aquí les va la Introducción a HTML5 de W3C. Y recuerden que siempre pueden acudir a una librería y incluso a la de Sanborns y buscar libros relacionados con HTML5 para principiantes.

¿Qué sigue?

Después de la Introducción a CSS3 que publicaré pronto, vamos a empezar con tutoriales más complejos de HTML5/CSS3, así que manténte al tanto. Vamos a crear plantillas desde cero, menús, acordiones, formularios, tablas de precios y vamos a combinar todo con jQuery, vamos a hacer efectos sorprendentes. Vamos a hacer cosas maravillosas en los próximos meses. Afíliate a las redes sociales de Exp3rto.com y descargate nuestra App para Android y nuestra Extensión para Google Chrome.