Esta es la clase 05 de los "5 días de HTML5", que termina la serie de sesiones dedicadas a los estándares de la web abierta en el curso gratuito de EscuelaIT. Estuvo dedicada a la compatibilidad de las características de HTML5 todo tipo de navegadores con y fue impartida por Miguel Angel Alvarez @midesweb.

Cuando realizamos un sitio web queremos que sea lo más impactante posible, que utilice la mayor cantidad de recursos avanzados y presentes en las webs modernas, pero también queremos que se pueda usar desde navegadores antiguos, quizás no con la misma experiencia de usuario, pero sí al menos una suficientemente digna.

Para ello aplicaremos HTML5 y alguna de las técnicas que vamos a conocer en esta clase y que ahora os resumimos. Al final del texto encontrarás el vídeo de la clase, así como los ejemplos y las diapositivas utilizadas.

Plantillas front-end

Como primer item de esta clase nos referimos rápidamente a la plantilla front-end "Boilerplate" que es un conjunto de ficheros que conforman un punto de partida común para cualquier proyecto front-end. En realidad tienes un archivo index.html y una serie de elementos adicionales que deberían estar presentes en cualquier sitio web, como hojas de estilo css, archivos de Javascript, librerías Javascript, etc.

Podemos usarla como base para crear proyectos sólidos, donde estamos usando aquellos módulos o piezas más deseables. Pero ojo, que no es para usarla tal cual. Lo bueno de plantillas como éstas es que te permite saber qué cosas podrían ser deseables en un proyecto, de modo que de entrada ya sabes qué "ingredientes" ponerle a tu sitio web. Sin embargo, todo lo que está en Boilerplate tiene un motivo para estar ahí, por lo que lo bonito de usar este paquete es que tengas la iniciativa y curiosidad para explorarlo bien y saber qué es cada cosa, tener libertad para cambiarlas, configurarlas quitar unas y poner otras y en definitiva, tomar un control consciente sobre lo que estás haciendo.

Entre algunas de las cosas que Boilerplate se preocupa es de la compatibilidad con navegadores antiguos y las herramientas que utiliza son justamente las que os explicamos en esta clase.

Por qué nos preocupan los navegadores antiguos

Cuando trabajamos con HTML5 estamos incorporando tecnologías muy diversas, para items como semántica, CSS3, APIs javascript para el control de dispositivos, almacenamiento de datos en el navegador, etc. Cada una de esas tecnologías tiene un estado de especificación determinado y a lo largo del tiempo va cambiando, hasta que se convierten en candidatas a recomendación y es cuando los navegadores las empiezan a implementar en su "core".

Existen en HTML5 muchas tecnologías con grados distintos de especificación y también existen muchos navegadores en el mercado y todo ello nos provoca que haya un abanico muy grande de situaciones, que además van variando a lo largo del tiempo.

Para resolver nuestras dudas y saber hasta que punto una de las cosas que incorpora HTML5 está o no adoptada por la mayoría de los navegadores, tenemos el sitio caniuse.com ("can i use", puedo usar), que nos ofrece un listado de características y el grado de implementación en navegadores.

Técnicas para aplicar compatibilidad

¿Debemos adaptarnos a navegadores antiguos? ¿O mejor adaptarnos a los navegadores modernos? realmente lo que buscamos es la compatibilidad de un sitio en los dos entornos, de modo que al menos se pueda usar correctamente. Para ello tenemos principalmente dos técnicas que podemos seguir para que el sitio o la aplicación web se adapte a todo tipo de navegadores.

Progressive enhancement:
Un producto sencillo con intención de ser altamente compatible al que le aplicas mejoras para aquellos navegadores que las soportan. Es decir, partes de un sitio en el que te has preocupado por ofrecer una funcionalidad y experiencia de usuario básica, de modo que funcione en todo el panorama de navegadores. Luego a ese sitio le vas aplicando mejoras que harás solamente disponibles para los navegadores que las pueden interpretar.

Graceful degradation:
Un producto complejo pensando en navegadores modernos en el que aplicas alternativas para aquellos navegadores que no son compatibles. De entrada haces tu sitio pensando en las características más modernas y deseables. Luego, para los navegadores que no las soportan creas alternativas o respuestas a fallos que posibiliten el uso de tu aplicación o sitio web.

Nosotros animamos más a implementar Graceful degradation porque el producto que vas a conseguir está más adaptado a los tiempos que corren. No te interesa diseñar o desarrollar para navegadores antiguos, porque así es difícil que tu producto llegue a tener un resultado impactante, acorde con los tiempos que corren. Aplicar graceful degradation te permite aprovechar las características del HTML5 y definir las alternativas necesarias para ofrecer a los usuarios de navegadores antiguos una experiencia de usuario digna.

Ten en cuenta también que no todo en la web, y en el uso de HTML5, debe requerir compatibilidad necesariamente. Aceptamos que los navegadores tienen características distintas y que una web no debe necesariamente de verse igual en todos los navegadores que la puedan llegar a reproducir. La propia corriente del diseño "responsive", que vimos en la clase 3 de este curso, por la cual se procura que los sitios web se adapten a todas las dimensiones y resoluciones de las pantallas, te implica que una página no se va a ver nunca igual en dispositivos o pantallas diferentes. Lo que hacemos es adaptarnos. De eso también se trata la compatibilidad del HTML5 que queremos explicaros.

Por qué Modernizr

Modernizr es una librería de Javascript que nos sirve para realizar compatibilidad con características de HTML5. Nos permite implementar "graceful degradation" que es la técnica de compatibilidad que encontramos más acertada.

También permite algo que es importante y tendencia desde hace muchos años, que es la detección de capacidades. Antiguamente, para saber si podemos hacer una cosa o no, detectábamos si el navegador del usuario era Internet Explorer, o Firefox (o Opera, Chrome, o más antiguamente, Netscape). Sin embargo hace tiempo los desarrolladores se dieron cuenta cuenta que no era una buena práctica. Observa que, lo que un día puede no soportar un navegador, al cabo de un tiempo y en una versión más moderna, puede que esté perfectamente incorporado y soportado.

Por ello, lo que se hace con Modernizr y en el mundo del desarrollo está más comúnmente aceptado, es preguntar por las características. Osea, al navegador le pregunto si tiene el elemento tal o cual y si están disponibles. Si era así quiere decir que puedo usar esas características sin preocupaciones. Si no era así quiere decir que no se pueden usar esas partes del HTML5 en el navegador del usuario y por tanto debo implementar vías alternativas que funcionen para él.

Prácticas de compatibilidad

Dedicamos 45 minutos, osea 3 cuartas partes de la clase de la hora de duración, a hacer prácticas relacionadas con la compatibilidad de navegadores y con el uso de Modernizr. Entre todas las cosas que puedes hacer con la librería nos centramos en varias que resultan bastante útiles, pero que no revisten demasiada complejidad. De ese modo creemos que es más sencillo entender la potencia e idoneidad de Modernizr como aliado a HTML5 en cuanto a compatibilidad se refiere.

1.- Compatibilidad con etiquetas semánticas: vimos que los navegadores antiguos no aceptan las etiquetas nuevas como header, nav, article, etc. Solamente con incluir la librería Modernizr (si la descargamos con el componente html5shiv) permite que esas etiquetas sean comprendidas por los navegadores como Internet Explorer 8 o inferiores.

2.- Estilos alternativos: vimos cómo podemos aplicar CSS diferente si un navegador no soporta una característica determinada. Esto lo conseguimos gracias a las class de CSS que nos incorpora Modernizr al documento cuando encuentra o no ciertas características.

3.- Mostrar un mensaje de error cuando no encuentra algo: esta práctica nos permite mostrar unos contenidos u otros cuando se encuentra o no con ciertas características de HTML5. Esto nos puede ayudar para mostrar mensajes de error que solo verán usuarios de navegadores no compatibles o quizás ocultar algunos componentes que no tenga sentido que los vean los usuarios de ciertos navegadores que no los soportan.

4.- Cargar un polyfill: cómo incorporar una librería para los navegadores que no tienen cierta funcionalidad. En un primer caso mostramos cómo implementar un fallback para el elemento canvas para Internet Explorer.

5. Cargar un polyfill con Modernizr.load(): Acabamos la clase práctica viendo cómo nos facilita la labor Modernizr.load y la carga condicionar de scripts Javascript con un ejemplo sencillo para aplicar la utilidad conocida como "placeholder" en navegadores que la soportan, por medio de jQuery.

Ejemplos, diapositivas y vídeo de la clase

Los ejemplos de la clase los puedes ver y descargar en github. Date cuenta que es todo el Boilerplate, en el que hemos modificado tan solo algunos archivos.

Las diapositivas también las puedes descargar, por si te apetece verlas con calma o tenerlas para tu documentación.

Por último puedes aquí reproducir el contenido completo de la clase.