JavaScript y las APIs HTML5

En nuestro curso de JavaScript y jQuery hemos sustituido el apartado dedicado a cookies por el uso de la API Web Storage. Mientras las cookies trabajan en la parte del servidor web, esta API se implementa en la parte cliente (navegador) y proporciona algunas ventajas, como mayor capacidad de almacenamiento o proporcionarnos persistencia más allá del cierre de la sesión por parte del usuario.

Para entender mejor el contexto a la hora de explicar Web Storage, incluimos un apartado de introducción a las APIs HTML 5, que publicamos en este post.

¿Qué es una API?

Una API (Application Program Interface) es una Interfaz de Programación de Aplicaciones.

Al igual que utilizamos interfaces gráficas para interaccionar con nuestro navegador o procesador de texto, pulsando botones o seleccionando opciones de menú, una API implementa ese tipo de comunicación, pero entre aplicaciones.

En vez de una interfaz ‘usuario-aplicación’, una API implementa una interfaz ‘aplicación-aplicación’, lo que permite automatizar esa interacción mediante programas o scripts.

De hecho, la capacidad de interaccionar con JavaScript con el navegador o la página web son básicamente APIs, conformadas por objetos con una serie de métodos y propiedades que son accesibles por nuestros programas para manipularlos u obtener información de ellos. Por ejemplo, el objeto ‘document‘ implementa el DOM (Document Object Model), que no es sino una API que nos permite interaccionar con todos los elementos del documento o página HTML, exponiendo (haciendo accesibles) una serie de métodos que podemos llamar desde JavaScript.

Pues bien, en la última versión del estándar HTML, la versión HTML5, se han incluido una serie de APIs que permiten extender las funcionalidades de una página Web utilizando la programación con JavaScript.

Este es un tema bastante extenso, pero para aquellos que no lo conozcan, queríamos dar una visión general de las posibilidades que abre.

Algunas API HTML5

Como hemos dicho, son numerosas las API que introduce HTML5, aunque es cierto que algunas que asociamos a este estándar no son parte de la especificación oficial. En cualquier caso sigue utilizándose como denominación genérica para todas ellas. Mencionaremos algunas para hacernos una idea del potencial que suponen para nuestras páginas Web.

Canvas

Esta API nos proporciona un rectángulo en nuestra página web en el que podemos dibujar cualquier cosa que imaginemos usando JavaScript, proporcionándole incluso animación e interactividad. Para ello, la API nos expone un conjunto de métodos o funciones que podemos utilizar para definir y crear formas, gradientes, trazados o aplicar diversas transformaciones.

Puedes encontrar en la Web muchos ejemplos creados con Canvas y JavaScript. Insertamos uno de esos ejemplos donde puedes mover, estirar y romper con el ratón una especie de tela. El efecto es espectacular:

Indexed DB, Web Storage y File APIs

La Indexed DB API nos permite el almacenamiento y recuperación de información en una base de datos local que reside en el equipo del usuario.

La API Web Storage (o localStorage), tiene unas funcionalidades más simples pero con un objetivo parecido. En el curso de JavaScript vemos varios ejemplos, como su uso para guardar los datos que ha introducido un usuario en un formulario que no termina de enviar. Al acceder nuevamente a él, puede recuperar con un botón los  datos que ya había incluido anteriormente.

La File API permite cargar un documento en el navegador, leerlo e interaccionar con él, aunque la posibilidad de escritura en un fichero local se ha descartado por ahora.

Web Workers

Permite ejecutar scripts en segundo plano (background), sin ser interrumpidos por eventos producidos por interacciones del usuario con la interfaz.

Los script en background son recomendables para tareas que pueden ser costosas, en término de duración y/o consumo de recursos ya que pueden correr en paralelo a otros scripts que se estén ejecutando en la página.

Drag and Drop

Posibilita que el usuario pueda arrastrar y soltar elementos, por ejemplo una imagen en la página web. En HTML5 Rocks tienes una explicación detallada desarrollando un ejemplo. Aquí vemos uno donde puedes cambiar de posición los items (rectágulos) en una columna arrastránolos con el ratón:

Geolocalización

La API Geolocation nos permite averiguar la posición del usuario, en términos de coordenadas geográficas de latitud y longitud, siempre que éste de el permiso para compartir esa información con la página Web. Se implementa con el objeto geolocation, que es una propiedad del objeto navigator.

En el curso de JavaScript y jQuery hemos también descrito esta API de Geolocalización e incluido algún ejemplo, dada las multiples aplicaciones que puede tener. Podemos sacar aún más partido utilizándola en conjunto con la API de Google Maps, para visualización en mapas y otra serie de funcionalidades.

Otras APIs y ejemplos

Hay más APIs disponibles, como por ejemplo esta lista de 15 APIs destacadas.

En la página HTML5 Please tienes un listado de las nuevas API y su grado de implementación en los diferentes navegadores, así como posibles soluciones alternativas utilizando pollyfills (los describimos más abajo). Incluye también los nuevos elementos HTML5 y propiedades CSS3.

En cuanto a ejemplos o demos en los que inspirarte o aprender puedes encontrar muchos en CodePen, como los dos ejemplos que hemos insertado en este post, en HTML5demos o en Github.

En cuanto a documentación de las APIs, aparte de las especificaciones oficiales tienes una buena introducción (aunque en inglés) en el libro online Dive into HTML5 de Mark Pilgrim.

Detección de funcionalidades: Modernizr

Debido a que las especificaciones de estas API son relativamente recientes, no todas las versiones de los distintos navegadores las tienen implementadas.

Lógicamente, mientras más antigua sea la versión de un navegador es más probable que no de soporte a las nuevas API, aunque afortunadamente esto es un problema cada vez menor. Si hablamos de los navegadores más utilizados (Chrome, Firefox, Safari, Edge, Opera…) y de sus versiones más modernas, la mayoría de estas nuevas funcionalidades van a estar habilitadas de una manera más o menos uniforme (puedes consultarlo en la web Can I use…)

Si vamos a utilizar alguna de estas APIs en un script, podemos incluir en él una comprobación que detecte si el navegador del usuario implementa esa funcionalidad. Para realizar esta tarea disponemos de una librería JavaScript de código abierto y gratuita de gran utilidad: Modernizr, que podemos descargar desde su sitio web: https://modernizr.com/

Nota: Modernizr también puede comprobar si el navegador soporta nuevos elementos o propiedades de los estándares HTML5 y CSS3.

En realidad, ya no descargamos la librería en su totalidad sino que para optimizar tamaños, elegimos las funcionalidades que queremos detectar y nos genera una versión según nuestras necesidades. Por ejemplo, en la imagen mostramos la selección de la API Geolocalización. Solo tenemos que pincharla con el ratón y quedará añadida a la librería. Cuando hayamos acabado de añadir las APIs que nos interesa detectar, generaremos el fichero con el botón ‘Build’ situado en la parte superior derecha.

En la sección HEAD de la página web que estamos creando, incluimos la línea correspondiente para que cargue ese fichero Javascript externo en la forma habitual:

Para detectar por ejemplo si la API de geolocalización está soportada, utilizaremos un condicional en nuestro código:

 

Pollyfills

Si una funcionalidad no está presente en un navegador, podemos utilizar un pollyfill.

Los pollyfills son scripts, a modo de plugins de JavaScript, que podemos cargar en nuestra página Web y que proporcionan esas funcionalidades ausentes.

Modernizr, mantiene una numerosa base de enlaces a ‘Polyfills’ que puedes ver en ese enlace. También te recomendamos consultar la página HTML5 Please que ya enlazamos.

---

Créditos imagen/sticker: HTML5 Logo by W3C con licencia Creative Commons Attribution 3.0