La entrada service_publish_probe_c89c093a5f5cc4d3 aparece primero en .

La entrada service_publish_probe_68b0b942c9afe8f5 aparece primero en .

What works well

Recommendations are the strongest part. The weekly discovery mixes and daily playlists learn from what you save and skip, and after a couple of weeks they get noticeably better. Collaborative playlists are handy for trips and parties, and switching playback between devices takes one tap.

What could be better

The free plan has adverts and limited skips on mobile, and audio quality on the basic tiers is good rather than outstanding. Prices have also crept up over the last few years, so the family and duo plans are the better value.

Verdict

For most listeners Spotify is an easy choice: a huge library, smart recommendations and apps that just work. Try the free plan first and upgrade if the adverts get in the way.

La entrada Spotify Review 2026 aparece primero en .

Un vídeo en bucle es aquel que, cuando llega al final del vídeo, vuelve al principio y se continúa reproduciendo de forma infinita, o hasta que el usuario lo pare o se salga de la página web.

Vamos a utilizar código HTML5 para poder incrustar un vídeo dentro de nuestra página web y que este vídeo en bucle se reproduzca de forma infinita.

Incluir un vídeo HTML5.

Lo primero que tenemos que hacer es insertar un vídeo HTML5, para ello vamos a utilizar el elemento video que nos permite insertar los vídeos dentro de las páginas web.

<video>
  <!-- Aquí va un vídeo -->
</video>

Para indicar dónde se encuentra el vídeo y el formato que tiene, podríamos utilizar, junto con el elemento video, el elemento source. Además, el elemento source, nos permite indicar diferentes formatos de vídeos para conseguir que el navegador web reproduzca uno u otro.

Pero, en este caso, vamos a utilizar una forma más sencilla y nos apoyaremos en el atributo src para indicar la URL que contenga el vídeo.

<video src="url-con-el-video">
  <!-- Aquí va un vídeo -->
</video>

Atributo loop para bucles.

La parte más importante de este ejemplo para poder poner un vídeo en bucle es el manejo del atributo loop, ya que el manejo de este atributo es el que nos va a proporcionar la capacidad de poder ver el vídeo en bucle.

El atributo loop es un atributo booleano, del elemento video, dentro de HTML5 por lo que si el atributo no está presente se le asignaría un valor de false y si está presente sería un valor de true.

Por lo que si queremos reproducir un vídeo en bucle simplemente tendremos que añadir el atributo loop en el elemento video.

<video src="url-con-el-video" loop>
  <!-- Aquí va un vídeo -->
</video>

Código HTML5 para poner un vídeo en bucle.

Así que simplemente tendremos que poner la URL de un vídeo, en este caso en formato mp4. El código en HTML para poder poner un vídeo en bucle sería el siguiente:

<video id="video" src="tecla.mp4" controls loop>
  <!-- El atributo loop hace que el vídeo se repita en bucle -->  
  Tu navegador no soporta el elemento <code>video</code>.  
</video> 

En este caso hemos añadido un atributo adicional que es controls para poder ver los controles del vídeo.

La entrada Vídeo en bucle aparece primero en .

El uso del elemento area nos sirve para optimizar la carga y la visualización de imágenes, mostrando varias imágenes en una y generando áreas enlazables. En este artículo vamos a ver cómo podemos descargar una imagen de un mapa de imágenes utilizando código HTML5. Es decir, que cuando se pinche sobre un área enlazable, se descargue la imagen asociada a dicho área.

Caso de uso para descargar una imagen de un mapa de imágenes.

El poder descargar una imagen de un mapa de imágenes utilizando código HTML5 nos va a servir para crear galerías de imágenes que estén muy optimizadas, ya que descargamos una única imagen con todas las imágenes. Esto nos será útil para entornos en los que la descarga de elementos sea un hándicap, como puede ser el caso de uso de dispositivos móviles.

Pero ahora lo que haremos será el poder descargar de forma individual cada una de esas imágenes una vez que el usuario pulse sobre una imagen en cuestión. Siendo este momento el único en el que realmente se descarga la imagen en concreto.

De forma visual vamos a recurrir a un mapa de imágenes con los logos de los navegadores web. Esto representará la galería de imágenes:

El funcionamiento será que cuando pulsemos sobre un logo en concreto, se descargará dicha imagen.

Creando el mapa con la imagen.

Lo primero que haremos para poder descargar una imagen de un mapa de imágenes utilizando código HTML5 será crear un mapa con la imagen en el cual insertemos las partes enlazables. Para ello, lo primero será insertar una imagen con el fichero que contenga todas las imágenes mediante un elemento img:

<img src="navegadores.png" alt="Navegadores" usemap="#navegadores" width="821" height="152"  />

Ademas, mediante la propiedad usemap vamos a decirle cual es el id que contiene el mapa de imágenes representado mediante un elemento map. Vemos que en este caso el mapa se llama “navegadores”. Así que pasamos a definir el mapa con el elemento map.

<map id="navegadores" name="navegadores">
</map> 

El elemento map es muy sencillo y lo que tiene es que tienes que indicar mediante el atributo id cual es el nombre que le damos y que sirve para asociarlo a la imagen anteriormente definida.

Definiendo áreas enlazables

Siguiendo con el ejemplo de descargar una imagen de un mapa de imágenes utilizando código HTML5 nos tocará definir cuales son las diferentes áreas o partes que nos podemos encontrar en la imagen y que representarán los elementos enlazables. Estas áreas se definen mediante el elemento area.

Para ello tenemos que controlar el atributo shape que indica la forma que tiene el área, ya sea un rectángulo, un círculo o un polígono y el atributo coords que contiene las coordenadas que forman los vértices del área que hayamos definido.

De esta manera si queremos trabajar con áreas que sean rectángulos para marcar las diferentes posiciones de nuestro mapa con logos de navegadores, hará que definamos el siguiente código en HTML:

<map id="navegadores" name="navegadores">
  <area shape="rect" coords="0,0,157,147" alt="Internet Explorer">
  <area shape="rect" coords="164,0,321,147" alt="Firefox">
  <area shape="rect" coords="340,0,497,147" alt="Google Chrome">
  <area shape="rect" coords="507,0,664,147" alt="Safari">
  <area shape="rect" coords="659,0,816,147" alt="Opera">
</map> 

Ya tendremos nuestras áreas definidas dentro del mapa asociado a la imagen.

Código para poder descargar una imagen de un mapa de imágenes

El siguiente paso es el más interesante para nuestro ejemplo, ya que es cuando vamos a añadir el código necesario para poder realizar la descarga de la imagen cuando pulsen sobre el logo. Para ello vamos a añadir dos atributos nuevos, por un lado href que nos servirá para enlazar con el fichero que contenga la imagen en concreto y otro que será download. El atributo download nos sirve para indicar que cuando se pulse sobre un enlace lo que se le indique al navegador es que tiene que empezar una descarga del fichero en vez de mostrarlo en pantalla. Dicho atributo puede funcionar solo o asociándolo el nombre que queremos que tenga el fichero que nos vamos a descargar.

Por consiguiente el código que nos queda para los áreas será el siguiente:

<map id="navegadores" name="navegadores">
  <area shape="rect" coords="0,0,157,147" href="explorer.png" alt="Internet Explorer" download="internet-explorer.png">
  <area shape="rect" coords="164,0,321,147" href="firefox.png" alt="Firefox" download="firefox.png">
  <area shape="rect" coords="340,0,497,147" href="google-chrome.png" alt="Google Chrome" download="google-chrome.png">
  <area shape="rect" coords="507,0,664,147" href="safari.png" alt="Safari" download="safari.png">                
  <area shape="rect" coords="659,0,816,147" href="opera.png" alt="Opera" download="opera.png">
</map> 

Hay que tener mucho cuidado ya que si este código lo pones en una página web que cargues dentro de tu navegador web en local no va a funcionar. Y esto es importante ya que el atributo download solo nos va a funcionar si lo utilizas en una página web que esté disponble a través de un servidor web.

De esta manera ya habremos terminado de desarrollar nuestro código para descargar una imagen de un mapa de imágenes utilizando código HTML5, lo que te permitirá realizar diseños mucho más eficientes para la descarga en móviles o entornos de poco caudal de datos.

La entrada Descargar una imagen de un mapa de imágenes aparece primero en .

Una de las preguntas que me hace la gente cuando realiza desarrollo web es relativa al HTML5 doctype y los doctypes existentes. Preguntas, por ejemplo, sobre ¿cuál es el doctype en HTML5? ¿Para qué sirve el doctype? ¿qué usos se hace el navegador web sobre el doctype?

¿Para qué sirve el doctype?

Lo primero, antes de entrar en el detalle del HTML5 doctype es saber para qué sirve el doctype dentro de un documento HTML.

El doctype es una declaración que se coloca al inicio de un documento HTML y tiene como función principal indicar al navegador web qué versión de HTML se está utilizando. Esto permite que el navegador web sepa cómo debe interpretar y renderizar el código HTML que contiene el documento.

“Modo quirks” en los navegadores

Sin esta declaración, los navegador web podrían entrar en «modo quirks» o modo de compatibilidad, lo que podría causar inconsistencias en la visualización de la página web.

El «modo quirks» (también conocido como «modo de compatibilidad») es un modo de renderizado especial que utilizan los navegador web para mantener la compatibilidad con páginas web antiguas. Cuando un navegador web entra en “modo quirks”, emula el comportamiento de navegadores web antiguos, específicamente aquellos anteriores al año 2000 entre los que nos encontrábamos el mítico Internet Explorer 5.

Este “modo quirks” afecta principalmente a:

• El modelo de caja CSS (box model)
• El manejo de dimensiones en elementos en línea
• La interpretación de ciertas propiedades CSS
• El procesamiento de algunos elementos HTML

Por esta razón, es crucial incluir siempre el doctype correcto al inicio de nuestros documentos HTML para asegurar que el navegador web opere en «modo estándar» y renderice la página de manera consistente según las especificaciones actuales de HTML y CSS.

De dónde venimos en la definición de doctypes

Antes de entrar a revisar cual es la definición formal del HTML5 vamos echar la vista atrás y ver de dónde venimos en la definición de doctypes. Hasta la versión de HTML5 teníamos diferentes doctypes para definir los tipos de documentos en HTML. Así nos podíamos encontrar:

• HTML 4.01 transitorio, que permitía el uso de elementos y atributos obsoletos para mantener la compatibilidad con versiones anteriores
• HTML 4.01 frameset, diseñado específicamente para documentos que utilizaban marcos (frames) para dividir la ventana del navegador en múltiples secciones
• HTML Estricto, que exigía el cumplimiento riguroso de las especificaciones HTML 4.01 y eliminaba todos los elementos y atributos obsoletos

Así nos podíamos encontrar las siguientes definiciones en los documentos. Para los estrictos:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "<http://www.w3.org/TR/html4/strict.dtd>">

Para los transitorios:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">

Y para aquellos que tienen frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""<http://www.w3.org/TR/html4/frameset.dtd>">

HTML5 Doctype

Pero al final llegó la especificación actual que es HTML5 simplificando la especificación del documento HTML dejando una sencilla definición en su cabecera en la que simplemente ponemos el elemento doctype con una exclamación delante, seguido de la palabra html. Todo ello dentro de los típicos símbolos menor y mayor de HTML que nos sirven para definir elementos.

Por lo tanto, el inicio de nuestros documentos web tendrán el html5 doctype definido de la siguiente manera:

<!doctype html>

Si nos fijamos en las anteriores definiciones se especificaba el DTD (Document Type Definition), que es un archivo que define la estructura y las reglas del documento HTML. Si bien, HTML5 ya se ha eliminado esa referencia.

Futuro del Doctype en HTML

Ya que sabemos todo lo relativo al HTML5 doctype vamos a hablar un poco sobre su futuro. El doctype es un elemento que seguirá siendo fundamental en las futuras versiones de HTML. Si bien su sintaxis se ha simplificado ya tanto que no tiene pinta que vaya a cambiar en el futuro. Si bien seguirá siendo fundamental para poder indicar al navegador web que lo que se encuentra para poder renderizarlo es un documento HTML. Los grupos de trabajo de W3C y WHATWG mantienen el compromiso de conservar esta declaración como parte esencial del estándar HTML.

La entrada HTML5 Doctype aparece primero en .

Otro ejemplo para tener un control mayor sobre la descarga y visualización de los videos. En este caso vamos a ver cómo podemos controlar cortes en la descarga de vídeos HTML5.

La idea es poder realizar una gestión con los usuarios de nuestras páginas web en el caso de que se corte la descarga del vídeo hacia la página.

¿Por qué se puede suspender la descarga de un vídeo?

Antes de entrar a ver el detalle de cómo podemos codificar la implementación de establecer el control de cortes en la descarga de vídeos HTML5 vamos a ver lo motivos por los cuales nos lleve a tener que realizar dicha implementación cuando estemos desarrollando nuestras páginas web mediante código HTML5.

La descarga de un vídeo se puede suspender por diferentes motivos. Es importante entender estas causas para poder diagnosticar y resolver los problemas de reproducción. Los motivos más comunes que pueden interrumpir la descarga de contenido multimedia son:

• Una conexión lenta o inestable a Internet, que puede ser causada por problemas en la infraestructura de red o por la distancia al servidor.
• Problemas en el servidor que aloja el vídeo, incluyendo sobrecarga del servidor, mantenimiento programado o fallos técnicos inesperados.
• Saturación del ancho de banda del usuario, especialmente común cuando múltiples dispositivos comparten la misma conexión o durante horas pico de uso.
• Puede ocurrir cuando el navegador decide pausar la descarga para optimizar recursos o cuando hay interferencias en la red. Esto incluye situaciones donde el navegador prioriza otras tareas o cuando detecta problemas de rendimiento en el sistema.

Insertando el vídeo en una página HTML5

Manos a la obra, a estas alturas ya sabes cómo insertar un vídeo HTML5 en tu página. Pero, por recordar como hacerlo, dejamos el código mediante el elemento video para indicar que hay un vídeo y el elemento source para cargar el origen del vídeo e indicar su formato.

<video id="video" width="320" height="240" controls>
  <source src="tecla.mp4" type="video/mp4">
	Tu navegador no soporta elementos de vídeo
</video>

Además, vamos a añadir un capa para poder volcar mensajes al usuario. Esto lo realizamos mediante el elemento div.

<p id="error-message" style="color: red;"></p>

Gestionando el evento suspend para controlar cortes en la descarga de vídeos HTML5

Ahora pasamos al meollo de la cuestión que es la parte de controlar cortes en la descarga de vídeos HTML5. Para ello nos vamos a apoyar en el evento onsuspend. El evento onsuspend se lanza cuando la carga de un vídeo o de un audio se ha suspendido por alguno de los motivos que veíamos al prinicipio del artículo: conexión, saturación, el navaegador,… incluso el propio usuario, al parar el vídeo puede forzar a que el navegador suspenda la descarga del vídeo.

Así que lo que haremos será coger una referencia al vídeo y suscribirnos a su evento onsuspend:

const video = document.getElementById('video');

video.addEventListener('suspend', (event) => { });

Para suscribirnos al evento onsuspend hemos utilizado la función addEventListener() del DOM y le hemos asignado una función anónima de Javascript para poder gestionar este evento.

Lo que vamos a hacer en la gestión del evento, en este caso, será mostrar un mensaje de texto al usuario en la capa que habíamos creado a tal respecto.

const video = document.getElementById('video');
const errorMessage = document.getElementById('error-message');

video.addEventListener('suspend', (event) => {
    errorMessage.innerHTML = 'La carga del vídeo se ha suspendido. Por favor, inténtelo de nuevo más tarde.';
});

De esta manera ya tendremos el código que nos permite controlar cortes en la descarga de vídeos HTML5. ¿Se te ocurre en qué situaciones te puedes ver avocado a realizar un control de los cortes en la descarga de vídeos utilizando el evento onsuspend? Nos encantaría conocer tus opiniones, así que no dudes en dejárnoslas en los comentarios.

La entrada Cortes en la descarga de vídeos HTML5 aparece primero en .