Blog

JavaScript y las APIs HTML5

 03/08/2017
 Blog, Páginas web, Programación
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 hemos también descrito esta API 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:
 1 <script src="modernizr-custom.js"></script>
Para detectar por ejemplo si la API de geolocalización está soportada, utilizaremos un
condicional en nuestro código:

1 if (Modernizr.geolocation) {
2
3 //código a ejecutar si la expresión en 'true' porque ha detectado la funcionalidad en el navegador
4 }
5
6 else {
7
8 //acción o mensaje si no está soportada la geolocalización
9
10 }

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

htmlhtml5javascriptprogramacion web

¿Quieres compartirlo?
 Tweet
 Share
 Plus one
 Share
Etiquetas

ajaxalojamiento webandroidapacheBlenderblogbusqueda empleocevugcommunity

managercsscursosdiseño graficodiseño
 webdocumentacionERPestándaresgreenfoothostinghtmlinformáticainkscapeinstalacióninternetjavajav

ascriptjquerykompozerlinuxmysqlphpPOOposicionamientoprogramacionprogramacion webrecursos

didácticosredes socialesSEOsoftware libretecnologíatutorialesubuntuvideojuegoswebwordpresswubi

Archivos

 mayo 2018
 enero 2018
 noviembre 2017
 octubre 2017
 agosto 2017
 junio 2017
 marzo 2017
 febrero 2017
 enero 2017
 diciembre 2016
 noviembre 2016
 octubre 2016
 septiembre 2016
 julio 2016
 junio 2016
 mayo 2016
 marzo 2016
 febrero 2016
 enero 2016
 diciembre 2015
 noviembre 2015
 septiembre 2015
 agosto 2015
 junio 2015
 abril 2015
 marzo 2015
 febrero 2015
 enero 2015
 diciembre 2014
 noviembre 2014
 octubre 2014
 septiembre 2014
 julio 2014
 junio 2014
 mayo 2014
 marzo 2014
 febrero 2014
 enero 2014
 diciembre 2013
 noviembre 2013
 octubre 2013
 septiembre 2013
 agosto 2013
 julio 2013
 junio 2013
 mayo 2013
 abril 2013
 marzo 2013
 febrero 2013
 enero 2013
 diciembre 2012
 noviembre 2012
 octubre 2012
 septiembre 2012
 agosto 2012
 julio 2012
 junio 2012
 mayo 2012
 abril 2012
 marzo 2012
 febrero 2012
 enero 2012
 diciembre 2011
 noviembre 2011
 octubre 2011
 septiembre 2011
 agosto 2011
 julio 2011
 junio 2011
 mayo 2011
 abril 2011
 marzo 2011
 febrero 2011
 diciembre 2010
 noviembre 2010
 septiembre 2010
 junio 2010
 marzo 2010
 febrero 2010
 diciembre 2009
 noviembre 2009
 septiembre 2009
 abril 2009
 febrero 2009
 diciembre 2008
 septiembre 2008
 julio 2008
 junio 2008
 mayo 2008
 abril 2008
 marzo 2008
Me gusta FB
 Balance de últimas ediciones de Diseño Web, SEO y CM (y nuevo curso)
 Nuevo curso: crea y diseña tu web con WordPress, HTML y CSS
Digital Learning SL