Translate

jueves, 7 de marzo de 2013

MANUAL DE HTML5 (2da PARTE)

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.
  1. Comprueba si determinadas propiedades existen en objetos genéricos o globales (como window o navigator).
    Ejemplo: comprobar soporte para la “Geolocalización”.
  2. Crear un elemento, luego comprobar si determinadas propiedades existen en ese elemento.
    Ejemplo: comprobar soporte para canvas.
  3. 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.
  4. 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

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.

Geolocalización

La geolocalización es la forma de suponer donde te encuentras en el mundo y si quieres, compartir información con gente de confianza. Existen muchas maneras de descubrir donde te encuentras, por tu dirección IP, la conexión de red inalámbrica, la torre de telefonía móvil por la que habla tu teléfono móvil (celular), o GPS específicos que reciben las coordenadas de longitud y la latitud de satélites que están en el cielo.