5 API HTML5 más que no sabías que existían -

La revolución HTML5 nos ha proporcionado algunas API de JavaScript y HTML increíbles. Algunas son API que sabíamos que necesitábamos desde hace años, otras son ayudantes de última generación para dispositivos móviles y de escritorio. Independientemente de la solidez o el propósito de la API, cualquier cosa que nos ayude a hacer mejor nuestro trabajo es un paso en la dirección correcta. Recientemente compartí contigo5 API HTML5 que no sabías que existían con la esperanza de que algunas de ellas te inspiren a mejorar tus propias aplicaciones web. Me gustaría compartir con ustedes otras cinco API HTML5 menos conocidas. ¡Espero que algunas de ellas le resulten útiles!

API de pantalla completa

La impresionante API de pantalla completa permite a los desarrolladores iniciar mediante programación el navegador en modo de pantalla completa, pendiente de la aprobación del usuario:

// Encuentra el método correcto, llama a la función de elemento correcto launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { elemento.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { elemento.webkitRequestFullScreen(); }}// ¡Inicie pantalla completa para navegadores que lo admitan! lanzarPantallaCompleta(document.documentElement); // toda la páginalaunchFullScreen(document.getElementById("videoElement")); // cualquier elemento individual

Cualquier elemento se puede llevar a pantalla completa, e incluso hay una pseudoclase CSS para permitir cierto control sobre la pantalla mientras está en modo de pantalla completa. Esta API es especialmente útil para el desarrollo de juegos JavaScript; ¡Especialmente shooters en primera persona como BananaBread!

Leer tutorial

API de visibilidad de página

LaAPI de visibilidad de página proporciona a los desarrolladores un evento para escuchar, informándoles cuando el usuario se centra en la pestaña de una página y también cuando el usuario pasa a otra pestaña o ventana:

// Adaptado ligeramente de Sam Dutton// Establecer el nombre de la propiedad oculta y el evento de cambio de visibilidad// ya que algunos navegadores solo ofrecen soporte con prefijo del proveedorvar oculto, estado, visibilidadCambio; if (tipo de documento.oculto! == "indefinido") { oculto = "oculto"; cambio de visibilidad = "cambio de visibilidad"; estado = "visibilidadEstado";} else if (typeof document.mozHidden! == "undefinido") { oculto = "mozHidden"; visibilidadChange = "mozvisibilidadcambiar"; estado = "mozVisibilityState";} else if (typeof document.msHidden! == "undefinido") { oculto = "msHidden"; visibilidadChange = "msvisibilidadcambiar"; state = "msVisibilityState";} else if (typeof document.webkitHidden! == "indefinido") { oculto = "webkitHidden"; visibilidadChange = "webkitvisibilidadcambiar"; state = "webkitVisibilityState";}// Agregue un oyente que cambie constantemente el títulodocument.addEventListener(visibilityChange, function(e) { // Iniciar o detener el procesamiento según el estado}, false);

Cuando se usa correctamente, un desarrollador puede evitar tareas costosas (como sondeos o animaciones AJAX) cuando la pestaña no está enfocada.

Leer tutorial Ver demostración

API getUserMedia

La API getUserMedia es increíblemente interesante; ¡Esta API brinda acceso a los medios del dispositivo, como la cámara de su MacBook! ¡Con esta API, la etiqueta de video y el lienzo, puedes tomar hermosas fotos desde tu navegador!

// Coloca los detectores de eventos en placewindow.addEventListener("DOMContentLoaded", function() { // Toma elementos, crea configuraciones, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d") , video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Error de captura de video: ", error.code); }; // Poner oyentes de vídeo en su lugar if(navigator.getUserMedia) { // Estándar navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // navegador con prefijo WebKit.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); }}, false);

Esperamos poder utilizar esta API bastante en el futuro: ¡la interactividad dentro del navegador será la norma dentro de un año!

Leer tutorial Ver demostración

API de batería

La API de la batería se ha actualizado; ¡Lea la actualización de la API de la batería de JavaScript para ver el nuevo patrón de código!

La API de batería es obviamente una API dirigida a dispositivos móviles que proporciona información sobre el nivel y el estado de la batería del dispositivo:

// ¡Consigue la batería!var batería = navigator.battery || navegador.webkitBatería || navigator.mozBattery;// Algunas propiedades útiles de la bateríaconsole.warn("Carga de la batería:", batería.carga); // trueconsole.warn("Nivel de batería: ", nivel.batería); // 0.58console.warn("Tiempo de descarga de la batería: ", batería.dischargingTime);// Agregue algunos detectores de eventosbattery.addEventListener("cambio de carga", función(e) { console.warn("Cambio de carga de la batería: ", batería .cargando);}, falso);

Conocer la API y el estado de la batería puede indicarle a la aplicación web que no utiliza procesos que consumen mucha batería y similares. No es una API innovadora, pero sí útil.

Leer tutorial

Captación previa de enlaces

La captación previa de enlaces permite a los desarrolladores precargar silenciosamente el contenido del sitio para proyectar una experiencia web más fluida y fluida:

!-- página completa --link rel="prefetch" href="https://davidwalsh.name/css-enhancements-user-experience" //-- solo una imagen --link rel="prefetch" href=" https://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /

Leer tutorial

Hay cinco API HTML5 más para investigar y experimentar. Tenga en cuenta que estas API se utilizarán ampliamente en unos pocos años, por lo que cuanto antes se familiarice con ellas, mejor equipado estará para crear aplicaciones web de clase mundial. ¡Tómate unos minutos para explorar estas API y ver qué puedes crear!