Línea de Código

Vídeo en bucle

Víctor Cuervo — Wed, 23 Apr 2025 19:00:00 +0000

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.

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.

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.

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:

    
  Tu navegador no soporta el elemento 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 Línea de Código.

Descargar una imagen de un mapa de imágenes

Víctor Cuervo — Tue, 25 Feb 2025 14:00:00 +0000

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:

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.

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:

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:

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 Línea de Código.

HTML5 Doctype

Víctor Cuervo — Sat, 22 Feb 2025 14:00:00 +0000

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:

">

Para los transitorios:

">

Y para aquellos que tienen frames:

">

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:

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 Línea de Código.

Cortes en la descarga de vídeos HTML5

Víctor Cuervo — Thu, 20 Feb 2025 14:00:00 +0000

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.

  
	Tu navegador no soporta elementos de vídeo

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

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 Línea de Código.

Zoom en imágenes con el ratón en HTML5

Víctor Cuervo — Wed, 19 Feb 2025 14:00:00 +0000

Uno de los elementos que más aparecen en las páginas web son las imágenes. Bien sean decorativas o bien representativas. En el caso de hoy vamos a ver cómo podemos implementar el control de zoom en imágenes con el ratón en HTML5. La idea es que el usuario, cuando se posicione sobre una imagen pueda hacer zoom bien mediante la rueda del ratón o bien utilizando movimientos gestuales sobre un trackpad o una ventana visual.

Esto nos servirá mucho si tenemos algunos casos de uso como:

Detalles de productos en aplicaciones de e-commerce, donde los usuarios necesitan examinar minuciosamente las características y acabados de los artículos antes de realizar una compra.
Galerías de fotografías profesionales o artísticas, donde es importante apreciar los detalles finos y la composición de cada imagen con precisión.
Herramientas de Mapas interactivos, que requieren una navegación fluida para explorar diferentes niveles de detalle en la cartografía digital.
Revistas puestas como imágenes, permitiendo a los lectores examinar el contenido editorial y las ilustraciones con mayor detalle.

Colocando la imagen dentro de una capa

A la hora de implementar el control de zoom en imágenes con el ratón en HTML5 lo primero que haremos será poner una imagen dentro de la página web mediante el elemento img. Algo muy sencillo que haremos de la siguiente forma:

Pero, como queremos hacer zoom sobre la imagen y que esta se quede en un recuadro, es decir no queremos que la imagen crezca de forma indiscriminada por la página, lo que haremos será el poner la imagen dentro de un recuadro que representaremos como una capa de un elemento div.

Lo siguiente para implementar el control de zoom en imágenes con el ratón en HTML5 será ajustar el estilo de esta capa para que tenga un tamaño concreto mediante las propiedades width y height de CSS y sobre todo vamos a indicar que oculte el desborde de la imagen por la capa, ya que cuando crezca la imagen se producirá un desborde. Esto lo conseguimos mediante la propiedad overflow.

.zoom-container {
	width: 300px;
	height: 300px;
	overflow: hidden;
	border: 2px solid #000;
	position: relative;
}

Manejar el evento onwheel para controlar el zoom en imágenes con el ratón en HTML5

Lo siguiente para poder implementar el control de zoom en imágenes con el ratón en HTML5 será manejar el evento de scroll.

Así que una vez que tenemos la imagen insertada dentro de la página web pasaremos a controlar el evento de zoom. El evento de zoom es el evento onwheel y lo registramos asociado a la imagen.

Es por ello que recuperamos un puntero sobre la imagen que hemos insertado utilizando su id y el método getElementById() .

const img = document.getElementById('zoomImage');
img.onwheel = function(event) { ... };

Ahora pasamos a codificar las acciones con el zoom.

Cambiando el tamaño de la imagen mediante scale

Para poder cambiar el tamaño de la imagen y asociarlo al evento tenemos que conocer dos partes. Por un lado el valor del ratón, para ello tenemos el interface WheelEvent con la propiedad deltaY que ofrece un valor en punto flotante sobre cómo va creciendo o decreciendo el valor. Por otro está la escala de la imagen, es decir, como es el alto y ancho de una imagen, esto lo podemos manipular mediante la propiedad transform de los estilos y la función scale().

Lo que vamos a definir también, en el código de control de zoom en imágenes con el ratón en HTML5, será un valor de escala inicial y otro de cambio de escala.

let scale = 1;
const scaleFactor = 0.1;

Ahora según vamos recibiendo valores de la propiedad deltaY lo que haremos es, si son negativos aumentar la escala y si son positivos decrementar la escala controlando que no podemos a dejarlo sin visualizarse.

if (event.deltaY < 0) {
  scale += scaleFactor;
} else {
  scale -= scaleFactor;
  if (scale < scaleFactor) {
    scale = scaleFactor;
  }
}

El valor final de la escala lo asociamos a la propiedad transform mediante la función scale():

img.style.transform = `scale(${scale})`;

Por lo que el código para hacer el zoom nos quedaría de la siguiente forma:

let scale = 1;
const scaleFactor = 0.1;

img.onwheel = function(event) {
	event.preventDefault();
	if (event.deltaY < 0) {
	  scale += scaleFactor;
	} else {
	  scale -= scaleFactor;
	  if (scale < scaleFactor) {
	    scale = scaleFactor;
	  }
	}
	img.style.transform = `scale(${scale})`;
};

De esta forma ya habremos conseguido tener nuestro código para implementar el control de zoom en imágenes con el ratón en HTML5.

La entrada Zoom en imágenes con el ratón en HTML5 aparece primero en Línea de Código.

Popover con cierre explícito en HTML5

Víctor Cuervo — Tue, 18 Feb 2025 14:00:00 +0000

En el artículo de hoy vamos a ver cómo crear un popover con cierre explícito en HTML5, es decir, que haya que cerrar mediante un botón o una imagen de un aspa la ventana emergente y que no sirva simplemente con pulsar fuera del mensaje. Ya hemos visto que la evolución del lenguaje HTML5 nos ha ofrecido nuevos elementos como popover para mostrar ventanas emergentes. Pero, en ese caso, vimos como aplicar un elemento popover con un cierre sencillo al pulsar fuera de la ventana emergente.

Crear un popover con cierre explícito en HTML5

Lo primero que tenemos que hace es utilizar el elemento popover para crear nuestro mensaje emergente. Si recordamos la sintaxis de este atributo de HTML vemos que hay varias formar de abrirlo.

popover = auto | manual | hint

Por defecto, el elemento popover se abre en un modelo “auto”, que es el que permite cerrar el mensaje emergente simplemente haciendo click fuera del mensaje. En este caso, para poder crear un popover con cierre explícito en HTML5 vamos a abrirlo con el tipo “manual”. Por lo tanto codificamos el elemento popover de la siguiente forma:


	Este es un popover de HTML5

Ahora lo que necesitamos es crear nuestro botón que permita mostrar el popover en la pantalla del navegador web. Para ello utilizamos el siguiente código que se apoya en el atributo popovertarget del elemento button:

Vemos que tanto el atributo id del elemento popover como el elemento popovertarget del elemento button coinciden.

Ya tenemos de un mensaje emergente, el cual, además, no puede cerrarse simplemente tocando fuera de él. Es por ello que tenemos que añadirle más elementos.

Gestión del cierre del popover en Javascript

Lo primero que haremos será crear un elemento button dentro del elemento popover. Y es que, este elemento botón, será el que nos ayude a cerrar la ventana emergente.


  Este es un popover de HTML5

En vez de este botón podríamos haber añadido una imagen con un aspa, un simple enlace o cualquier otro elemento que fuese accionable para poder realizar el cierre de la ventana.

Ahora lo que vamos añadir el es código Javascript que nos permite cerrar la ventana. Para ello tenemos que llamar al método hidePopover() sobre el elemento que contiene el mensaje emergente.

El método hidePopover() es un método del modelo DOM que se encuentra dentro del elemento base HTMLElement.

Para ello nos apoyamos en un evento onclick sobre el elemento button para poder asociar este cierre del mensaje.


  Este es un popover de HTML5

De esta forma ya habremos conseguido crear un popover con cierre explicito en HTML5 que cerramos mediante código Javascript.

La entrada Popover con cierre explícito en HTML5 aparece primero en Línea de Código.

Cambiar atributos de imágenes en WordPress

Víctor Cuervo — Mon, 17 Feb 2025 14:00:00 +0000

Volvemos a escribir algún artículo sobre la plataforma WordPress, el sistema de gestión de contenidos (CMS) más utilizado en Internet. En este caso vamos a ver cómo podemos cambiar atributos de imágenes en WordPress. En concreto, vamos a ver cómo podemos modificar su atributo class, para poder añadir una clase específica a todas las imágenes que haya en los contenidos de los posts de nuestro CMS.

¿Qué queremos a la hora de cambiar atributos de imágenes en WordPress?

Si avanzamos un poco más, vamos a ver el problema al que nos enfrentamos. El hecho en cuestión es que queremos que todas las imágenes de nuestro blog se vean de forma responsive o adaptativas.

El diseño responsive o diseño adaptativo es una técnica de diseño web que busca que las páginas se visualicen correctamente en diferentes dispositivos y tamaños de pantalla. Esto significa que los elementos de la página, incluidas las imágenes, se ajustan automáticamente para proporcionar una experiencia óptima al usuario, ya sea que esté utilizando un móvil, una tablet o un ordenador de escritorio.

Para esto nos hemos apoyado en el framework Bootstrap que nos ofrece la clase img-fluig, la cual, aplicada a un elemento img de HTML dentro de su atributo class convierte automáticamente la imagen en responsive.

Aunque pensemos que esto lo podemos hacer directamente en el editor visual de WordPress tenemos que saber que la estructura que nos ofrece WordPress cuando vuelca las imágenes es mediante el nuevo elemento de HTML5 llamado figure. Por lo que los valores del atributo class se aplican al elemento figure en vez de al elemento img.

Por lo tanto vamos a recurrir al uso del tema de WordPress y a sus hooks para poder modificar de forma general el comportamiento.

Alternativa get_image_tag_class

A la hora de empezar a codificar y conseguir cambiar atributos de imágenes en WordPress, una de las alternativas sería utilizar el hook get_image_tag_class. Si echamos un vistazo a la sintaxis de get_image_tag_class vemos lo siguiente:

apply_filters( ‘get_image_tag_class’, string $class, int $id, string $align, string|int[] $size )

Por lo que podemos modificar el valor del atributo class dándole un nuevo valor. De esta manera, el código en PHP nos quedaría de la siguiente forma:

function example_add_img_class( $class ) {	
	return $class . ' img-fluid';	
}

add_filter( 'get_image_tag_class', 'example_add_img_class' );

Lo que hacemos es añadir a las clases existentes, la clase img-fluid.

Si bien, el problema que tenemos con este hook es que no funciona con las imágenes que tengamos ya insertadas en los diferentes post del blog. Por lo que tenemos que buscar una alternativa diferente si queremos cambiar atributos de imágenes en WordPress.

Utilizando el hook the_content

Es por ello que vamos a recurrir al hook the_content para poder cambiar atributos de imágenes en WordPress. En este caso, revisando la sintaxis, vemos que podemos reemplazar el contenido de una página, pero TODO el contenido.

apply_filters( ‘the_content’, string $content )

Por lo que nos tocará trabajar sobre dicho contenido y buscar aquellos sitios dónde haya imágenes para poder modificar su atributo class. Quedándonos el siguiente código:

function add_img_fluid_class($content) {
	// Modificar el contenido
	return $content;
}

add_filter('the_content', 'add_img_fluid_class');

Utilizando expresiones regulares sobre el contenido

Ahora nos vamos a apoyar en expresiones regulares mediante la función preg_replace(). La función preg_replace() tiene la siguiente sintáxis:

preg_replace(
    string|array $pattern,
    string|array $replacement,
    string|array $subject,
    int $limit = -1,
    int &$count = null
): string|array|null

Dónde podemos ver que el primer parámetro es el patrón de búsqueda, la segunda es el contenido por el que vamos a sustituir el patrón y el tercero el contenido sobre el que aplicamos el patrón de búsqueda.

Por lo que vamos a utilizar 3 patrones:

/?)class=»(.?)»/ el cual nos permite buscar elementos img dónde el atributo class vaya entre comillas dobles.
/?)class=\'(.?)\’/ el cual nos permite buscar elementos img dónde el atributo class vaya entre comillas simples.
/])+>/ para aquellas imágenes que no tienen un atributo class y por lo tanto hay que crearlo.

Así que aplicamos estos tres patrones de la siguiente forma:

	
function add_img_fluid_class($content) {
	$content = preg_replace('/])+>/', '', $content);
	return $content;
}

add_filter('the_content', 'add_img_fluid_class');

Vemos que hemos añadido la clase img-fluid al conjunto de clases que tengan las imágenes.

Ya tendremos nuestro hook que nos permite cambiar atributos de imágenes en WordPress, para, en concreto, modificar el valor del atributo class.

Esto lo podríamos hacer para cualquier otro atributo. ¿Se te ocurre alguna otra aplicación? Déjanoslo en comentarios.

La entrada Cambiar atributos de imágenes en WordPress aparece primero en Línea de Código.

Mensajes emergentes con popover en HTML5

Víctor Cuervo — Sat, 15 Feb 2025 12:24:56 +0000

Los que hemos trabajado en el desarrollo web desde sus principios hemos vivido lo complejo que era gestionar una ventana emergente en una web. En este artículo vamos a ver lo sencillo que es crear mensajes emergentes con popover en HTML5 siguiendo un estándar.

Un poco de historia de los mensajes emergentes.

Y es que antes de que se estandarizase, y pudiésemos crear código en HTML5 para poder crear mensajes emergentes, hemos pasado por muchas épocas y alternativas diferentes.

En primer lugar teníamos las ventanas emergentes o pop-ups que se abrían mediante JavaScript. Y se podían mandar mensajes mediante funciones como alert() o prompt(). Incluso se lanzaban ventanas emergentes que se ponían en primer plano y que acababan bloqueando la ventana padre. Estas ventanas eran muy intrusivas, no cumplían ningún estándar de accesibilidad y acabaron siendo bloqueadas por los navegadores.

Después llegaron las librerías JavaScript, como el caso de desarrollos en jQuery, que nos permitían crear ventanas modales, popovers o lightboxes de una forma más elegante, pero seguían siendo soluciones propietarias que no seguían ningún estándar.

Finalmente, con HTML5 se ha introducido el atributo popover que nos permite crear mensajes emergentes de una forma nativa y estandarizada. Esta nueva característica nos ofrece una solución integrada directamente en el lenguaje HTML, sin necesidad de depender de librerías externas. Lo que nos facilita enormemente la creación de mensajes emergentes con popover en HTML5.

Además ha introducido otros elementos en HTML5 como dialog que también nos permiten crear ventanas emergentes de diálogo.

Casos de uso del elemento popover en HTML5

Antes de crear mensajes emergentes con popover en HTML5 vamos a ver qué casos de uso tenemos para poder aplicar esta solución. Los casos de uso más comunes para utilizar el elemento popover en HTML5 son múltiples y variados, permitiendo mejorar significativamente la experiencia del usuario en diferentes situaciones de interacción con la página web.

Menús contextuales: Ideales para mostrar opciones adicionales o acciones específicas relacionadas con un elemento de la página cuando el usuario interactúa con él. Estos menús pueden contener enlaces, botones o cualquier otro elemento interactivo que permita al usuario realizar acciones contextuales de manera eficiente y natural.
Ayuda contextual: Perfectos para proporcionar información adicional o explicaciones detalladas sobre elementos específicos sin interrumpir el flujo principal de la página. Esta funcionalidad es especialmente útil para mostrar definiciones, consejos o instrucciones paso a paso que ayuden al usuario a comprender mejor el contenido o la funcionalidad de la página.
Formularios flotantes: Útiles para presentar formularios secundarios o campos de entrada adicionales que no necesitan estar siempre visibles en la interfaz principal. Esta aproximación mejora significativamente la experiencia del usuario al mantener la interfaz limpia y ordenada, mostrando información adicional solo cuando es necesaria.
Paneles de configuración: Excelentes para mostrar opciones de configuración o preferencias que el usuario puede ajustar sin necesidad de navegar a otra página. Estos paneles pueden incluir múltiples controles y opciones de personalización, permitiendo a los usuarios modificar sus preferencias de manera rápida y conveniente mientras mantienen el contexto de su actividad principal.

Crear mensajes emergentes con popover en HTML5

Ahora ya nos vamos a poner a codificar para poder crear mensajes emergentes con popover en HTML5. Para ello, en HTML5, aparece el atributo general popover que nos sirve para poder crear mensajes emergentes. El funcionamiento de los popover en HTML5 tiene dos partes: por un lado, la forma en la que definimos el contenido del popover y por otro, cómo asociamos a un elemento la capacidad de mostrar el popover.

Para poder definir cuál es el elemento popover dentro de nuestra página web en HTML5 lo que hacemos es asignarle el atributo global popover:

Es muy importante que este elemento que tiene el atributo popover también tenga informado el atributo id dándole un identificador único en la página. Esto es debido a que el elemento que muestre el popover deberá de indicar el id del elemento que contiene el popover.

Así, podemos crear una capa mediante un elemento div que nos permita el mostrar un contenido con una imagen de la siguiente forma:


  Este es un popover de HTML5

La siguiente parte para crear mensajes emergentes con popover en HTML5 será asociar a un elemento la capacidad de mostrar el popover cuando se interactúe con dicho elemento. Por lo cual tiene que ser un elemento de acción, como puede ser un button o un elemento input. O bien asociar un comportamiento de interacción a un elemento mediante algún tipo de evento como onclick, onmouseover,…

En el caso de que tengamos un elemento de acción, vamos a utilizar el atributo popovertarget. Mediante el atributo popovertarget asociamos el id que contiene el elemento popover.

Por lo que en nuestro caso vamos a asignar a un elemento button la capa que acabamos de crear:

Vemos que utilizamos el id “pop1” que es el id que le habíamos asignado a nuestro elemento popover.

Otra forma de poder crear mensajes emergentes con popover en HTML5 sería mostrar el popover sería mediante código en Javascript. En este caso tendremos que asociar a un elemento un evento y en dicho evento mostrar el popover mediante el método .showPopover() del elemento HTMLElement.

let boton2 = document.getElementById("boton2");
let pop1 = document.getElementById("pop1");

boton2.onclick = function () {            
    pop1.showPopover();
}

En ambos casos, al pulsar sobre el botón, se mostrará el popover a pantalla completa.

Diferencia entre popover y dialog

Ahora que hemos visto cómo podemos crear mensajes emergentes con popover en HTML5 mediante el atributo popover y que sabemos cómo gestionar las ventanas emergentes mediante un elemento dialog, vamos a ver sus diferencias y cuándo utilizar cada uno de ellos.

Las principales diferencias entre el atributo popover y el elemento dialog radican en su propósito y comportamiento.

¿Cuándo utilizar dialog?

El elemento dialog está diseñado específicamente para interacciones modales que requieren una respuesta explícita del usuario. Es ideal para situaciones donde necesitamos que el usuario tome una decisión importante o complete una acción crítica, como confirmaciones de acciones irreversibles, formularios de registro importantes o ventanas de configuración esenciales. El elemento dialog bloquea intencionadamente la interacción con el resto de la página para asegurar que el usuario se centre en la tarea actual y proporcione la respuesta necesaria antes de continuar.

¿Cuándo utilizar popover?

El atributo popover está optimizado para presentar contenido informativo o contextual de manera más ligera y flexible. Es la opción perfecta cuando queremos mostrar información adicional, sugerencias, ayuda contextual o menús secundarios sin interrumpir significativamente la experiencia del usuario. A diferencia del dialog, el popover mantiene una interacción más natural y fluida con la página principal, permitiendo que el usuario pueda ignorarlo fácilmente si así lo desea y continuar con su actividad principal sin obstáculos. Esta característica lo hace especialmente útil para mejorar la experiencia del usuario sin crear interrupciones innecesarias en el flujo de trabajo.

Con esto ya habremos visto cómo podemos crear mensajes emergentes con popover en HTML5, en qué casos utilizarlo y cuáles son las diferencias entre los elementos dialog y popover.

La entrada Mensajes emergentes con popover en HTML5 aparece primero en Línea de Código.

Cambios de volumen en vídeos HTML5

Víctor Cuervo — Mon, 10 Feb 2025 22:36:09 +0000

En el artículo de hoy vamos a aprender cómo podemos controlar cambios de volumen en vídeos HTML5. Es decir, saber cuándo se cambia el volumen de un vídeo HTML5, ya sea para subir el volumen, bajar el volumen o apagarlo.

Por qué controlar cambios de volumen en vídeos HTML5

Los ejemplos en los que puede ser interesante controlar cambios de volumen en vídeos HTML5 son aquellos en los que queremos que un usuario no pueda bajar el volumen de un vídeo o mutearlo. Esto puede ser interesante si estás trabajando en una plataforma de elearning en la cual quieres “asegurarte” que el cliente está escuchando el vídeo.

Otro ejemplo interesante para controlar cambios de volumen en vídeos HTML5 es en aquellos escenarios dónde tengamos establecidos unos patrones de volumen bajo, medio y alto. Nos permitirá el ajustar a uno u otro independientemente de que el usuario esté modificando la barra del volumen del sonido.

Incluir el vídeo dentro de nuestra web

Así que, manos a la obra, vamos a empezar a construir nuestro código para controlar cambios de volumen en vídeos HTML5. Lo primero será el incluir nuestro elemento vídeo y el elemento source. El elemento vídeo nos crea un espacio para poder cargar el elemento multimedia y el elemento source nos permite indicar el archivo y tipo del archivo que queremos cargar con el vídeo.

  
  " type="video/ogg">
  Tu navegador no soporta el elemento video.

Para implementar correctamente esta funcionalidad, es crucial prestar atención a los detalles técnicos de la estructura HTML. En primer lugar, debemos asignar un identificador único al elemento video a través del atributo id. Este identificador actúa como un puente esencial entre la estructura HTML y nuestro código Javascript, permitiendo una manipulación precisa y eficiente del elemento multimedia.

Luego tenemos el elemento source. Este elemento es el componente fundamental para la carga del vídeo y requiere dos atributos críticos: la ruta del recurso multimedia y su formato, especificado mediante el atributo type. En nuestra implementación, hemos optado por utilizar el formato OGV (Ogg Video). Este formato, especificado como "video/ogg", ofrece una excelente relación entre calidad y compatibilidad, siendo especialmente valorado en la comunidad de desarrollo web.

Como complemento a la estructura principal, hemos incorporado un elemento div en nuestro código HTML. Este contenedor dinámico actuará como un panel de información en tiempo real, permitiéndonos mostrar de manera elegante y organizada todos los eventos y acciones relacionados con la reproducción del vídeo. Esta implementación no solo mejora la experiencia del usuario, sino que también facilita la depuración durante el desarrollo.

Controles externos para manipular el sonido del vídeo

Una vez que tenemos nuestro vídeo vamos a añadirle una serie de controles en los que insertaremos un elemento range que nos permitirá gestionar el volumen y un input de tipo checkbox para apagar el volumen.

Volumen: 
Mute

Estos controles los gestionaremos mediante código Javascript. Por un lado el elemento range ante un evento de cambio, que se registra con el evento onchange, asignará el valor del elemento sobre el volumen del vídeo. Al volumen del vídeo se puede acceder mediante la propiedad volume.

Por otro mediante el input de tipo checkbox controlaremos si ponemos el volumen a 0, nuevamente mediante su propiedad volume o si, por el contrario, volvemos a poner el volumen que tenía. Para ello guardamos en una variable savevolume el valor actual antes de apagarlo.

let mute = document.getElementById("mute");
let barra = document.getElementById("volumen");
let v = document.getElementById("mivideo");
let savevolume = 1;

mute.addEventListener("change",function(ev){
	if (ev.target.checked) {
		savevolume = v.volume;		
		v.volume = 0;
		barra.value = 0;
	} else {
		v.volume = savevolume;
		barra.value = savevolume;
	}
},true);

barra.addEventListener("change",function(ev){
	v.volume = ev.target.value;	
	mute.checked=false;
},true);

Uso del evento onvolumechange para controlar cambios de volumen en vídeos HTML5

A parte de la gestión del evento change tenemos otro evento que es el onvolumenchange el cual nos permite controlar cambios de volumen en vídeos HTML5. Así que volvemos a registrar una función para cuando se produzca el evento onvolumenchange.

mivideo.onvolumechange = function() {
	info.innerHTML = info.innerHTML + "Volumen cambiado a " + mivideo.volume + "
";
	barra.value = mivideo.volume;
};

Lo que hacemos el volcar sobre la capa de información el nuevo valor correspondiente al volumen que nos proporciona la propiedad volume. De esta manera sabemos en que posición se ha quedado el volumen. Además actualizamos la barra del elemento range para asignarle el nuevo valor.

Forzar no poder subir el volumen del vídeo HTML5

Además de controlar el nuevo valor del volumen del vídeo. En los cambios de volumen en vídeos HTML5 podemos forzar a que el volumen no pase de un rango o bien a que se quede siempre en el mismo volumen.

Es por ello que cuando hemos registrado el evento onvolumenchange vamos a añadir también este forzado de volumen. Para ello añadimos la siguiente línea de código:

mivideo.onvolumechange = function() {
	info.innerHTML = info.innerHTML + "Volumen cambiado a " + mivideo.volume + "
";
	// Ajustamos la barra al volumen seleccionado en el vídeo				
	barra.value = mivideo.volume;

	// Podemos forzar a que no se suba el volumen
	mivideo.volume = 0.1;
};

Vemos que nuevamente acudimos a la propiedad volume para dicho forzado. De esta forma ya tendremos el código completo para controlar cambios de volumen en vídeos HTML5.

La entrada Cambios de volumen en vídeos HTML5 aparece primero en Línea de Código.

Aprende a programar. Episodio II.

Víctor Cuervo — Mon, 10 Feb 2025 09:19:35 +0000

Esta semana, en nuestra semana de Aprende a Programar, ha estado repleta de contenido variado y útil para programadores de distintos niveles. Desde técnicas avanzadas en HTML5 para mejorar la experiencia de usuario con vídeos, hasta trucos esenciales de Python para gestionar archivos y directorios, los artículos han cubierto aspectos clave del desarrollo web y la programación. También se ha profundizado en la optimización del diseño para impresión con CSS y se ha presentado un ejemplo práctico de WebSockets en Java EE.

Los artículos sobre HTML5 exploran cómo mejorar la interacción con vídeos, abordando tanto la búsqueda dentro de un vídeo como la gestión de cargas inestables. Por otro lado, los artículos de Python ofrecen soluciones prácticas para la manipulación de archivos y el uso de estructuras de control. Además, se destaca un artículo sobre CSS que explica cómo adaptar páginas web para su correcta impresión.

Artículos de la semana

Buscar por un vídeo en HTML5

Este artículo detalla cómo implementar una función de búsqueda dentro de un vídeo en HTML5. Se explican métodos para que los usuarios puedan encontrar fragmentos específicos dentro del contenido multimedia. También se presentan ejemplos de código para facilitar su implementación en proyectos web.

Cargas inestables de vídeos en HTML5

Se analizan las razones detrás de los problemas en la carga y reproducción de vídeos en HTML5. Desde problemas de red hasta formatos incompatibles, este artículo proporciona estrategias para mejorar la experiencia del usuario.

Páginas adaptadas para imprimir con CSS

Este artículo ofrece una guía sobre cómo diseñar hojas de estilo específicas para impresión. Explica la importancia de usar media queries para diferenciar el diseño en pantalla y en papel, eliminando elementos innecesarios y asegurando una correcta distribución del contenido para facilitar la lectura impresa.

10 primeros números impares en Python

A través de ejemplos prácticos, se muestra cómo generar y listar los primeros diez números impares utilizando bucles en Python. Se explican distintas estructuras de control como for, junto con consideraciones sobre eficiencia y buenas prácticas en la escritura de código.

Listar números del 1 al 10 en Python

Este artículo introduce los conceptos básicos de iteración en Python, mostrando cómo utilizar range() y distintos métodos de bucles para generar secuencias de números. Además, se incluyen ejercicios prácticos para reforzar el aprendizaje.

Websocket Echo en Java EE

Una introducción al uso de WebSockets en Java EE, explicando cómo crear una conexión en tiempo real donde el servidor responde con el mismo mensaje recibido. Se incluyen ejemplos prácticos y configuraciones necesarias para implementar esta funcionalidad en aplicaciones web modernas.

Borrar carpetas de forma recursiva en Python

Explica cómo eliminar directorios completos en Python, incluso cuando contienen múltiples archivos. Se presentan métodos utilizando el módulo shutil y os, con ejemplos detallados sobre cómo manejar excepciones y evitar errores en la eliminación de carpetas.

Imagen del blog por Freepik

La entrada Aprende a programar. Episodio II. aparece primero en Línea de Código.