Una pregunta muy común en estos tiempos es: “¿Cómo puedo empezar a
utilizar HTML5 si existen navegadores antiguos que no lo soportan?” Pero
la pregunta en sí se ha formulado de forma errónea. El HTML5 no es una
cosa grande como un todo, sino una colección de elementos individuales,
por consiguiente lo que sí se pudrá, será detectar si los navegadores
soportan cada elemento por separado.
Cuando los navegadores realizan un render de una página, construyen un “Modelo de Objeto de Documento” (Document Object Model - DOM), una colección de objetos que representan los elementos del HTML en la página. Cada elemento - <p>, <div>, <span> - es representado en el DOM por un objeto diferente.
Todos los objetos DOM comparten unas características
comunes, aunque algunos tienen más que otros. En los navegadores que
soportan rasgos del HTML5, algunos objetos tienen una única propiedad y
con una simple ojeada al DOM podremos saber las características que soporta el navegador.
Existen cuatro técnicas básicas para saber cuando un navegador
soporta una de estas particulares características, desde las más
sencillas a las más complejas.
- Comprueba si determinadas propiedades existen en objetos genéricos o globales (como window o navigator).Ejemplo: comprobar soporte para la “Geolocalización”.
- Crear un elemento, luego comprobar si determinadas propiedades existen en ese elemento.Ejemplo: comprobar soporte para canvas.
- Crear un elemento, comprobar si determinados métodos existen en ese elemento, llamar el método y comprobar los valores que devuelve.Ejemplo: comprobar qué formatos de video soporta.
- Crear un elemento, asignar una propiedad a determinado valor, entonces comprobar si la propiedad mantiene su valor.Ejemplo: comprobar que tipo de <input> soporta.
MODERNIZR, una biblioteca para detectar HTML5.
Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que incluir en el <head> de tu página el siguiente <script> .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea una objeto global llamado Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librería Modernizr.canvas será “true”. Si tu navegador no soporta los elementos canvas, la propiedad Modernizr.canvas será “false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento
Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá actualizando y para utilizarla solo hay que incluir en el <head> de tu página el siguiente <script> .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función tipo: modernizr_init(). Cuando se ejecuta, se crea una objeto global llamado Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librería Modernizr.canvas será “true”. Si tu navegador no soporta los elementos canvas, la propiedad Modernizr.canvas será “false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento
Canva
HTML 5 define el elemento <canvas> como un rectángulo en la página donde se puede utilizar JavaScript para dibujar cualquier cosa. También determina un grupo de funciones (canvas API) para dibujar formas, crear gradientes y aplicar transformaciones.Texto Canvas
Si tu navegador soporta las API de canvas no quiere decir que pueda soportar las API para texto-canva. Las API de canva se han ido generando con el tiempo y las funciones de texto se han añadido posteriormente, por lo que algunos navegadores puede que no tengan integrado las API para texto.Video
El HTML5 ha definido un nuevo elemento llamado <video> para incrustar video en las páginas de la web. Actualmente insertar un video en la web era imposible sin determinados plugins como el QuickTime o el Flash.El elemento <video> ha sido diseñado para utilizarlo sin la necesidad de que tenga que detectar ningún script. Se pueden especificar múltiples ficheros de video y los navegadores que soporten el video en HTML5 escogerán uno basado en el formato que soporte.
Formatos de video
Los formatos de video son como los lenguajes escritos. Un periódico en inglés contiene la misma información que un periódico en español, aunque solo uno le será útil. Con los navegadores pasa lo mismo, necesitan saber en qué “idioma” está escrito el video.Los lenguajes de los videos se llaman “codecs” un algoritmo utilizado para compactar un video. Existen docenas de codecs en uso en todo el mundo, aunque dos son los más relevantes. Uno de estos codecs cuesta dinero por la licencia de la patente, y funciona en safari y los iphones. El otro codec es gratis y de código abierto y funciona en navegadores como Chromium y Firefox.
Aplicaciones OFFline
Leer página webs offline es relativamente sencillo. Te conectas a Internet, cargas una web, te desconectas y puedes sentarte tranquilamente a leer. ¿Pero qué sucede cuando son aplicaciones como Gmail o Google Docs? Gracias al HTML5 cualquiera puede crear una aplicación web que funcione offline.Las aplicaciones web offline se ejecutan como una aplicación online. La primera vez que se visita una web offline que esté disponible, el servidor web le dirá a al navegador los ficheros que necesita para poder trabajar desconecatdo. Estos ficheros pueden ser, HTML, JavaScript, imágenes y hasta videos. Una vez que el navegador ha descargado los ficheros necesarios podrás volver a visitar la web aunque no estés conectado a Internet. El navegador reconocerá que estás desconectado de Internet y utilizará los ficheros que había descargado con anterioridad. La próxima vez que te conectes, si has realizado cambios en la web offline, estos se subirán al servidor actualizándolo.
