¿Por qué es importante HTML5?

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters
y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos
que están reiventando mercados y generando tráfico e ingresos.
Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en
el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento
y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de superheroe
y que venden camisetas para apoyar al movimiento?

 

Nuevas etiquetas de HTML5

<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.

Atención <div> no está muerto:

 

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

 

Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Soporte HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener.
Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio
de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el
objeto XmlHttpRequest, más conocido como AJAX.

Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador
responsable de detener la innovación en los estándares web también es el creador de la innovación
más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían
sido inviables.

 

 

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de
que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE.
Gracias a los grandes hackers del mundo:

  • HTML5 Enabling Script1: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran
    divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible
    agregarles diseño a ellas o cualquier elemento dentro de ellas.
    Para utilizarlo debes incluir esta línea en el HEAD de tu documento.

  • IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes
    redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!
  • Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para
    multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o
    alternativa.

Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores
felices.

No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y
vivan el feliz mundo de HTML5.

One Reply to “¿Por qué es importante HTML5?”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *