Las 15 APIs Más Populares De HTML5

Si si, ya habrás escuchado y/leído frases como “html5 ya no es el futuro, sino el presente”, pero seguramente después te enteres que la mayoría de los navegadores no soportan la funcionalidad que quieres utilizar. Aquí te dejo una lista de 15 APIs más populares de HTMl5 ya podemos implementar de alguna u otra forma en nuestros proyectos (y sus respectivaspolyfills).

Antes que nada: ¿Qué es un polyfill?

Antes que nada, me imagino que te estarás preguntando ¿qué es un polyfill?
Bueno, un polyfill es un código (también le podríamos llamar plugin) que nos proporciona la tecnología para tener las nuevas funcionalidades de HTML5 en aquellos navegadores que no las soportan de forma nativa.

1. classList

Ya que classList es una funcionalidad relativamente nueva de HTML5, no funciona en los navegadores más viejos, pero esto no debería preocuparnos ya que existe una polyfill llamada classlist.js. Aunque si estamos usando alguna librería javascript como jQuery, no necesitaremos esta API de forma nativa.

2. dataset

elem.dataset no es soportado por Internet Explorer ni por los navegadores móviles más antiguos. Para todos los navegadores no hay problema en utilizar atributos data-*. Pero lo que no conviene que usemos es elem.dataset.foo para obtener su valor en javascript, en vez de esto utilicemos elem.getAttribute(‘data-foo’). La polyfill que existe para esta API es HTML5 dataset support

3. DOM

Actualmente, un gran conjunto de las nuevas funcionalidades sobre el DOM puede ser “corregido”. Sin embargo, los “shims” o “correctores” actuales no están probados en un 100% y se pierden algunas funciones. Los polyfills existentes (ES5-DOM-shim y DOM-shim) se deben usar con precaución. Igual hay que recordar, que podemos utilizar cualquier librería que manipule el DOM como jQuery que posee selectores y funciones muy potentes como las nativas de HTML5. He escrito un artículo en este sitio sobre esta API y su relación con los selectores de jQuery.

4. Drag and Drop

La funcionalidad de Drag and Drop se ha estandarizado en HTML5 basandose en la implementación original de Internet Explorer (¡si, de IE!). Es por esto que ya tiene un soporte bastante amplio, pero muchos se sienten frustrados cuando usan este API. Por eso, se recomienda usar jQuery UI Draggable (u otra librería Javascript). Las polyfillsrecomendadas: dropfile, fileSaver, jDataView.

5. EventSource

Eventos enviados por el servidor (Server-Sent Events) son eventos en tiempo real emitidos por el servidor y recibidos por el navegador. EventSource.js provee de una alternativa y no depende de jQuery. Los polyfills que se recomiendan son EventSource.js,jQuery.eventsource

6. Geolocalización

El polyfill geolocation shim usa el servicio de IP-Geocoding de Google como alternativa para los navegadores que no soportan esta API. El otro polyfill se llama geo-location-javascript no usa el servicio del buscador, pero utiliza las APIs específicas de BlackBerry, WebOS y Google Gears. En la mayoría de los casos, no se debería exponer características de geolocalización en tu aplicación si esta característica no está presente nativamente.

7. Historial (History)

La API de historia provee a Javascript una forma de cambiar la URL mostrada en el navegador sin recargar la página. El plugin History.js suaviza algunas diferencias de implementación entre los navegadores y provee un hashchange alternativo para navegadores con HTML4. GitHub usa pjax (pushState + ajax).

8. IndexedDB

IndexedDB fue una especificación volátil por un año, pero se calmó. Además de Chrome y Firefox, IE10 también la va a soportar; Opera no lo ha implementado y Safari todavía no se ha comprometido con la misma.
El polyfill IDBWrapper ayuda a suavizar las diferencias entre los navegadores. Se puede considerar el uso de WebSQL cuando IndexedDB no es soportada, pero hay que recordar que la especificación de WebSQL fue abandonada.

9. localStorage

localStorage y sessionStorage son una muy buena forma de guardar datos sin tener que utilizar cookies. Incluso IE8 soporta a ambas así que es poco probable que necesites un polyfill. Si lo necesitas, el de Remy Sharp es muy bueno y fácil de implementar

En localStorage, los datos que se guardan son de tipo/valor (key/value), así que si se desea guardar datos más complejos, podemos hacerlo guardando JSON en forma de string (JSON.stringify(obj)) que luego parsearemos con JSON.parse(str), luego de obtener el registro guardado. Tampoco hay forma de saber (en los distintos navegadores) si se ha excedido la capacidad, así que conviene envolver nuestro código entre try/catch. Es seguro usar hasta 2.5 MB.

10. matchMedia

matchMedia es una API Javascript para ver si una “media query” va a tener exito. El polyfillMatchMedia.js nos permite utilizar esta API en todos los navegadores. Si necesitas una alternativa que es sensible al cambio de tamaño de la ventana, puedes usar este fork, aunque es limitado para navegadores que soportan transiciones CSS.
matchMedia es muy útil para trabajar en sitios que tiene diseño sensible a diferentes tamaños de pantalla (responsive design).

11. Microdata DOM API

Microdata es una nueva y liviana sintáxis semántica. Mediante el uso de atributos, nos permite definir grupos anidados de pares de datos del tipo nombre-valor, llamados microdata, que generalmente se basan en el contenido de la página. Nos brinda una nueva forma de agregar información semántica extra y de extender HTML5. Microdata está siendo usada actualmente por Google para extraer datos meta semánticos de nuestros sitios web (para más sobre esto, pueden ver schema.org).

La API DOM de Microdata es de ayuda porque puedes manipular items y propiedades en una página de forma programatica, tal vez para presentar la información de una manera “buscable/filtrable”, o enviarlo a otra aplicación en otro lado.

Esta API es soportada por Opera y está siendo implementada por Mozilla.

Para soporte en IE, se puede usar ES5/DOM shim.

12. requestAnimationFrame

requestAnimationFrame (rAF) es recomendada para animaciones, ya que se lleva muy bien con el uso de la batería y permite al navegador optimizar la performance de tus animaciones.

La especificación ha tenido algunos arreglos y se ha calmado. Además de Chrome y Firefox, lo tendrá también IE10. El polyfill recomendado es requestAnimationFrame polyfill

13. Web Workers

Los Web Workers pueden correr operaciones pesadas de forma paralela en muy buena forma, liberando así el “thread” o hilo de la UI para responder al input del usuario. Dependiendo de que caso de uso necesitemos web workers, deberías elegir no ofrecer esta funcionalidad si los workers no están presentes, o hacer que todo entre en el hilo de la UI.

14. WebGL

Hay polyfills y plugins para poder usar WebGL en IE, pero no deberías usarlos. Es aconsejable usar WebGL si está presente, sino se debería enviar al usuario a get.webgl.org

También podemos ofrecer al usuario descargar Google Chrome Frame si solo quieren un plugin. Casi todas las demos de WebGL usan este plugin si está disponible.

15. WebSockets

Hacer una app real-time (en tiempo real) es una gran mejora y los WebSockets brindan esta habilidad para agregar comunicación bi-direccional en una conexión persistente para tu aplicación, permitiendo incrementar la interactividad y el compromiso con el usuario.

web-socket-js es un polyfill para la API de Websockets de Javascript, transfiriendo datos a través de Sockets de Flash… siempre y cuando los WebSockets no estén disponibles.

Para usar WebSockets en Firefox, debemos usar el que tiene el prefijo: MozWebSocket. Aunque Firefox en su versión 11 ya soportará el estándar sin el prefijo.

Safari todavía no ha implementado la versión nueva (más segura) de Web Sockets, es por esto que debemos forzar a este navegador a que utilice una alternativa o a desactivar los WebSockets en Safari (al menos por el momento).

Para que los WebSockets sean más fáciles de usar, hay múltiples soluciones framework del lado del servidor (server-side).

Una de las más conocidas es Socket.io, una framework para Nonde.js que ayuda con transportes de bajo nivel para navegadores que carecen soporte nativo de WebSockets. ¡Este framework soporta IE6+!
Otra, es Sockjs, un framework que emula la API de WebSockets en los navegadores y tiene implementaciones en el servidor para node.js, Ruby, Erlang o tornado.

Para saber más sobre estas APIs y otras funcionalidades de HTML5 o CSS3 puedes visitarHTML5please.com, recurso muy recomendado, desarrollado por los creadores de HTML5 Boilerplate.