HTML5 lleva varios años en el mundo del desarrollo Web. Entre sus características se destacan nuevas etiquetas y atributos, pero también la introducción de un conjunto de APIs que mediante JavaScript han revolucionado el trabajo de los desarrolladores Web. En este artículo vamos a analizar 10 de las APIs y características que han llegado con HTML5 (y sus versiones siguientes).
Canvas
La aparición de esta API junto con HTML5 fue un revolución. En este aspecto es importante señalar que <canvas> no es solo una etiqueta, sino que viene acompañada por mucho JavaScript. Su potencial permite a los desarrolladores crear desde simples gráficos, hasta complejas animaciones multimedia. En este contexto, uno de sus puntos más destacados es su potencial para crear juegos y soluciones interactivas de gran calidad.
HTML5 2D Context es recomendación W3C desde 2015. Aquí también resulta importante destacar que Canvas, además, puede trabajar con el contexto de 3D mediante WebGL. Para saber más sobre esta tecnología podemos leer el siguiente artículo: WebGL trae el 3D a la Web. Ventajas y desventajas .
Lecturas recomendadas acerca de Canvas:
- 📰 10 Cosas que deberías saber sobre HTML5 Canvas: https://damiandeluca.com.ar/10-cosas-que-deberias-saber-sobre-el-elemento-canvas-de-html5 .
- 📰 Mi primer juego con HTML5 Canvas y Javascript: https://damiandeluca.com.ar/mi-primer-videojuego-con-html5-canvas-y-javascript .
- 📰 Canvas y performance: https://damiandeluca.com.ar/html5-canvas-y-la-performance.
Local Storage y Session Storage
También llamadas Web Storage, son una dupla que suelo recomendar mucho a mis alumnos cuando están comenzando a aprender HTML5 y JavaScript.
¿Qué pueden aportar estas características a nuestro proyecto? La respuesta es simple: almacenamiento local, guardado en el navegador.
Ambos se basan en el concepto de almacenar pares clave/valor. La diferencia es que, mientas Local Storage posibilita guardar información persistente, por su parte. Session Storage realiza un almacenamiento no persistente, es decir que no quedará guardado cuando se cierre el navegador.
Web Storage (segunda edición) es recomendación W3C desde el año 2016: https://www.w3.org/TR/webstorage/.
IndexedDB
IndexedDB es una base de datos no relacional, orientada a objetos, que incorpora HTML5 y nos permite almacenar información en el navegador de manera persistente. Basada en índices y punteros, tendremos fácil acceso y manipulación de los datos mediante JavaScript.
Entre sus características debemos tener en cuenta que es una API para trabajar con métodos asíncronos. Por su robustez, es una alternativa interesante para almacenar colecciones de datos estructurados como objetos. Para aquellos que estén familiarizados con el formato JSON, les será simple comprender el trabajo y la manipulación de información con esta API.
Su popularidad y compatibilidad ha ido creciendo y hoy en día cuenta con muy buen soporte en la mayoría de los navegadores modernos que se encuentran en el mercado.
Es importante señalar que IndexedDB 2 es recomendación W3C desde 2018 y podemos conocer más sobre esta versión en esta nota: https://damiandeluca.com.ar/indexeddb-2.
Workers
Los Workers, nos permiten separar procesos de nuestra aplicación Web en hilos. Web Worker puede interactuar con su creador, mientras que Shared Worker puede trabajar con otras páginas que pertenezcan a ese mismo domino.
Por su parte Service Worker es uno de los más potentes de esta familia, ya que puede actuar como un proxy entre el navegador, la red, y un caché que podemos especificar y almacenar localmente. Gracias a esta característica podremos crear aplicaciones Web que funcionan offline.
History
La API de historial ofrece la posibilidad de guardar y acceder a la información de historial de navegación del sitio. Esta característica puede resultar muy útil para manejar la navegabilidad de un sitio y ofrecer opciones al usuario.
En el contexto de un mismo dominio, el usuario se podrá mover entre páginas, hacia anteriores o posteriores. También podrá dar saltos de a uno o más, dependiendo de como se configure la característica en el código.
Cabe destacar que las virtudes de esta API pueden ser muy bien aprovechadas también en Single Page Application (SPA).
Audio y Video
Las etiquetas <audio> y <video> han representado un avance muy valorado en el mundo del desarrollo Web, ya que antes de su llegada se debía recurrir siempre a un complemento o plugin para que el navegador pudiera reproducir contenido multimedia.
Siempre menciono en mis clases que estas etiquetas son sencillas de implementar en su modo básico, pero es para destacar que cuentan con APIs de JavaScript que posibilitan interactuar de una manera más avanzada con ellas.
Para conocer más sobre estas API es recomendable leer los siguientes artículos:
- 📰 Audio y video con HTML5: https://damiandeluca.com.ar/audio-y-video-con-html5 .
- 📰 La etiqueta video de HTML: https://damiandeluca.com.ar/la-etiqueta-video-de-html5 .
- 📰 Introducción a video de HTML5: https://damiandeluca.com.ar/introduccion-a-html5-video .
- 📰 Web Audio API: https://damiandeluca.com.ar/web-audio-api .
- 📰 Stream de video con HTML5: https://damiandeluca.com.ar/stream-de-video-con-html5.
Fullscreen
Pasar nuestra Web a modo pantalla completa, o una parte de ella, es posible mediante esta API. En palabras sencillas, podremos ofrecer al usuario un botón para que toda la página se vea en pantalla completa o bien un elemento en particular de la página (que podría ser una imagen, un video o una caja de texto).
De fácil implementación es una característica que, por el momento, tiene mayor compatibilidad en navegadores Desktop.
Podemos conocer más sobre sus características en el siguiente documento de Living Standard: https://fullscreen.spec.whatwg.org/ .
Drag and Drop
La API que nos permite establecer que elementos HTML pueden ser arrastrados y soltados. Una característica muy valorada que antes de la llegada de HTML5 no tenía una interfaz estándar para manipularla.
Introduce nuevos eventos y mecanismos con JavaScript para poder desplazar elementos y controlar la interacción con el mouse.
Es importante señalar que, al momento de escribir este artículo, la mayor compatibilidad de esta API está dada en navegadores Desktop.
Microdata
Una característica que nos permite asignar más significado a nuestros contenidos HTML.
Importante para el SEO moderno, podremos incorporar atributos en nuestros elementos HTML o bien optar por estructuras JavaScript puras usando JSON-LD y así ofrecer mayor riqueza a los buscadores respecto a nuestro contenido.
Podremos saber más sobre sus avances en el siguiente documento el W3C: https://html.spec.whatwg.org/multipage/microdata.html#microdata.
Web Notifications
Los pedidos de notificaciones en el navegador son habituales en el día a día de las personas que navegan por Internet. Desde hace algunos años esta API está disponible para los desarrolladores Web y se ha popularizado en gran medida.
Si bien visualmente pueden variar en algunos sistemas y navegadores, la implementación de esta API ayuda a la estandarización de su uso, para facilitar la labor de los desarrolladores.
Web notifications es estándar W3C desde 2015: https://www.w3.org/TR/notifications/.
Para completar, vale decir que la ubicación de las APIs en el listado no busca ordenarlas por importancia en un Ranking. Cada API mencionada tiene su relevancia en su ámbito de aplicación y son muy útiles en la actualidad del desarrollo Web.