Kopuz: un completo reproductor de música para Linux con soporte para Jellyfin, Spotify y más

Kopuz

Kopuz es un reproductor de música de código abierto que busca reunir en una sola aplicación tanto la colección local del usuario como diferentes servicios y servidores musicales. Desarrollado en Rust y basado en el framework Dioxus, el proyecto apuesta por una interfaz moderna y multiplataforma, con versiones para Linux, Windows, macOS y Android.

Su propuesta va bastante más allá de reproducir archivos almacenados en el ordenador. La aplicación puede organizar música local y conectarse a servicios como Jellyfin, Navidrome y otros servidores compatibles con Subsonic, además de integrar plataformas como YouTube Music, SoundCloud, Spotify, Apple Music y Nextcloud. Todo ello se presenta dentro de una biblioteca común desde la que es posible navegar por artistas, álbumes, géneros, canciones y listas de reproducción.

Kopuz quiere unificar la música local y los servicios en una sola aplicación

La principal característica de Kopuz es precisamente su capacidad para funcionar con múltiples fuentes de música. Un usuario puede añadir carpetas locales y combinarlas con un servidor personal o con servicios online, evitando tener que utilizar una aplicación diferente para cada biblioteca.

Las fuentes conectadas se integran dentro de la biblioteca del reproductor y pueden gestionarse desde una interfaz común. Esto permite acceder a artistas, álbumes, canciones, favoritos y listas sin que la aplicación esté limitada exclusivamente a los archivos almacenados en el equipo.

El enfoque resulta especialmente interesante para quienes mantienen una colección local pero también utilizan servidores domésticos. Jellyfin, Navidrome y otros servicios compatibles con la API de Subsonic pueden actuar como fuentes de música dentro de la misma aplicación.

Un reproductor de música moderno desarrollado en Rust

El proyecto está desarrollado en Rust y utiliza Dioxus para construir su interfaz. La combinación busca ofrecer una aplicación ligera y moderna, con una arquitectura capaz de funcionar en diferentes sistemas operativos.

La biblioteca, las listas de reproducción, los favoritos y diferentes ajustes se almacenan localmente mediante una base de datos SQLite. Esta infraestructura permite mantener organizada la información del usuario y actualizar la interfaz cuando se producen cambios en las fuentes o en la biblioteca.

El reproductor también cuenta con integración nativa con los controles multimedia de cada plataforma. En Linux utiliza MPRIS, por lo que puede aparecer en los controles del entorno de escritorio y responder a las teclas multimedia habituales.

Kopuz inclluye soporte para letras sincronizadas y diferentes opciones de reproducción

Entre las funciones disponibles se encuentra el soporte para letras sincronizadas, incluyendo letras convencionales y sistemas que muestran el texto siguiendo la reproducción de la canción. Las versiones más recientes también han ampliado esta parte con letras sincronizadas palabra por palabra y diferentes efectos visuales.

Kopuz incorpora además listas de reproducción, favoritos, navegación por géneros, búsqueda y un sistema de temas para modificar la apariencia de la aplicación. El usuario puede utilizar los temas incluidos o crear otros personalizados modificando las variables visuales disponibles.

También cuenta con un mini reproductor que permite mantener visibles los controles principales sin tener que utilizar la ventana completa. Otra función disponible en los sistemas de escritorio es la posibilidad de minimizar la aplicación a la bandeja del sistema para mantener la reproducción activa en segundo plano.

Un ecualizador de diez bandas y funciones adicionales

La aplicación incluye un ecualizador de diez bandas con ajustes predefinidos y configuraciones personalizadas. Esta función permite modificar el sonido directamente desde el reproductor sin depender necesariamente de un ecualizador externo.

La biblioteca también permite identificar de forma visual el tipo de archivo utilizado por las pistas locales. Los formatos pueden mostrarse junto a las canciones, facilitando diferenciar rápidamente entre archivos como MP3, FLAC o WAV.

Además de la reproducción, el programa incorpora funciones relacionadas con la gestión de colecciones. Es posible marcar canciones como favoritas, crear listas y añadir pistas o álbumes completos. En determinados servicios conectados, los favoritos y las listas también pueden sincronizarse con el servidor.

Jellyfin, Navidrome y Subsonic forman parte de su enfoque

Una de las ventajas para los usuarios de Linux es la integración con servidores musicales autohospedados. Kopuz puede conectarse a Jellyfin y a servicios compatibles con Subsonic, una categoría en la que también se encuentra Navidrome.

Esto permite utilizar la aplicación como cliente para una biblioteca musical almacenada en otro equipo o servidor. El usuario puede así mantener su colección centralizada y acceder a ella desde diferentes dispositivos.

La combinación de reproducción local y servicios autohospedados encaja especialmente bien con el ecosistema del software libre. En lugar de obligar al usuario a elegir entre los archivos de su ordenador y un servidor personal, ambas fuentes pueden convivir dentro de la misma biblioteca.

Kopuz también se conecta con servicios musicales online

El proyecto ha ido ampliando sus posibilidades mediante diferentes servicios de streaming. Entre ellos se encuentran YouTube Music, SoundCloud y Spotify, aunque cada integración cuenta con sus propios requisitos y limitaciones.

En el caso de Spotify, la aplicación utiliza las APIs y herramientas oficiales del servicio. La reproducción local mediante el reproductor integrado depende del Web Playback SDK y requiere una cuenta Premium, además de una configuración inicial por parte del usuario.

YouTube Music también puede utilizarse como fuente musical, mientras que SoundCloud permite acceder al servicio desde el propio reproductor. Estas integraciones convierten a Kopuz en una alternativa bastante distinta de un reproductor tradicional centrado únicamente en archivos locales.

Apple Music y Nextcloud amplían las fuentes disponibles

Las novedades más recientes del proyecto han añadido nuevas posibilidades a la aplicación. Una de ellas es la integración con Apple Music, que permite acceder al catálogo y a la biblioteca del usuario, además de sincronizar determinados elementos y trabajar con listas y favoritos.

Otra incorporación es Nextcloud, que puede utilizarse mediante WebDAV para acceder a archivos musicales almacenados en el servidor. El usuario puede seleccionar las carpetas que formarán parte de su biblioteca y reproducir o descargar las pistas según las posibilidades disponibles.

Con estas incorporaciones, Kopuz continúa ampliando la variedad de fuentes compatibles. La idea es que la aplicación pueda actuar como un punto central para diferentes formas de consumir y almacenar música.

Linux cuenta con varias opciones de instalación

Los usuarios de Linux pueden instalar Kopuz mediante diferentes métodos. El proyecto ofrece versiones preparadas en varios formatos, incluyendo paquetes DEB, RPM, Flatpak y AppImage.

La aplicación también puede instalarse desde Cargo y cuenta con soporte para Nix y NixOS. En Arch Linux existe además un paquete disponible en AUR, por lo que los usuarios de esta familia de distribuciones pueden integrarlo con las herramientas habituales de su sistema.

La disponibilidad de varios métodos de distribución facilita utilizar el reproductor en diferentes distribuciones sin depender exclusivamente de una única tecnología de empaquetado. Para muchos usuarios de escritorio, Flatpak puede ser la opción más sencilla, mientras que otros pueden preferir los paquetes nativos o la versión AppImage.

Un reproductor multiplataforma que también está disponible para Android

Aunque Linux es una de las plataformas importantes para el proyecto, Kopuz no está limitado al escritorio. El reproductor también dispone de versiones para Windows, macOS y Android, permitiendo que la misma aplicación esté disponible en diferentes dispositivos.

La recuperación del soporte para Android ha sido una de las novedades recientes del proyecto. Esto abre la posibilidad de utilizar el reproductor en ordenadores y dispositivos móviles, especialmente para quienes quieren mantener una experiencia similar entre varias plataformas.

El desarrollo multiplataforma también puede resultar útil para usuarios que utilizan más de un sistema operativo. Una biblioteca conectada a un servidor personal puede accederse desde diferentes dispositivos utilizando la misma familia de aplicaciones.

Una alternativa diferente dentro de los reproductores de música para Linux

Linux cuenta con numerosos reproductores musicales, desde aplicaciones ligeras centradas exclusivamente en archivos locales hasta centros multimedia y clientes para servicios concretos. Kopuz intenta ocupar una posición diferente al combinar varios de estos conceptos dentro de una sola interfaz.

Su capacidad para reunir archivos locales, servidores autohospedados y servicios online es una de sus características más destacadas. A esto se suman las letras sincronizadas, los temas, el ecualizador, la gestión de listas y la integración con los controles multimedia del escritorio.

El proyecto todavía continúa evolucionando rápidamente, pero su propuesta resulta especialmente interesante para quienes buscan un reproductor de música moderno y flexible. Con soporte para diferentes fuentes, múltiples plataformas y varias opciones de instalación en Linux, Kopuz se presenta como una alternativa de código abierto que quiere convertirse en el centro desde el que organizar buena parte de la música del usuario.


Thunderbird 155 llega con OAuth personalizado para servidores IMAP y SMTP

Thunderbird 155

Thunderbird 155 ya está disponible como la nueva versión del cliente de correo electrónico de Mozilla, incorporando importantes mejoras en la configuración de cuentas, autenticación OAuth y compatibilidad con servidores de correo personalizados. El lanzamiento llega además en un momento de cambio para el proyecto, que a partir de septiembre ha comenzado a adoptar un ciclo de desarrollo mucho más rápido, con nuevas versiones estables cada dos semanas.

La nueva versión mantiene la evolución de Thunderbird hacia un cliente de correo más flexible y preparado para servicios modernos. Entre sus novedades destaca especialmente el soporte de OAuth personalizado para servidores IMAP y SMTP, junto con nuevas posibilidades para que las extensiones puedan modificar los proveedores de autenticación utilizados por determinados dominios. También se incluyen numerosas correcciones de errores, mejoras de estabilidad y actualizaciones de seguridad.

Thunderbird 155 mejora la autenticación OAuth

La principal novedad de Thunderbird 155 está relacionada con la autenticación. La nueva versión incorpora soporte para configurar proveedores OAuth personalizados en servidores IMAP y SMTP, algo especialmente interesante para organizaciones y proveedores de correo que utilizan sistemas de autenticación propios.

Hasta ahora, la configuración de cuentas en Thunderbird dependía en mayor medida de los proveedores OAuth integrados en el propio cliente. Con la nueva versión, el sistema es más flexible y permite definir configuraciones específicas para servidores y dominios que no utilizan necesariamente los proveedores contemplados de forma predeterminada.

La mejora resulta especialmente relevante en entornos empresariales, educativos o administrados, donde el servidor de correo puede utilizar una infraestructura de autenticación diferente de la que emplean los grandes servicios comerciales.

Las extensiones pueden modificar los proveedores de autenticación

Thunderbird 155 también amplía las posibilidades de las extensiones relacionadas con OAuth. Los complementos pueden ahora sobrescribir las configuraciones integradas para determinados dominios y nombres de host.

Esto permite desarrollar extensiones capaces de proporcionar mecanismos de autenticación específicos sin tener que esperar necesariamente a que cada proveedor sea incorporado directamente al código principal de Thunderbird.

El cambio también mejora la capacidad de Thunderbird para adaptarse a servicios especializados. En lugar de tratar todos los servidores de correo de una misma forma, el cliente puede utilizar diferentes configuraciones dependiendo del dominio o servidor con el que esté trabajando.

La configuración manual de cuentas es más completa

Otra de las mejoras está relacionada con el proceso de configuración manual de cuentas. Thunderbird 155 simplifica este flujo y añade soporte para Exchange, Microsoft Graph y OAuth personalizado dentro de la misma experiencia.

Esto es especialmente importante porque Thunderbird está ampliando progresivamente su compatibilidad con Microsoft Exchange. El proyecto lleva meses trabajando en la integración de Microsoft Graph para sustituir progresivamente diferentes componentes de la antigua implementación basada en EWS.

Con Thunderbird 154 ya se había habilitado Microsoft Graph para Microsoft 365, mientras que la versión 155 continúa desarrollando la infraestructura necesaria para configurar y autenticar este tipo de cuentas de forma más sencilla.

OAuth incorpora PKCE y autenticación mediante navegador externo

Thunderbird 155 añade además campos específicos para configurar PKCE y el uso de un navegador externo dentro de los parámetros de OAuth personalizado.

PKCE, siglas de Proof Key for Code Exchange, añade una capa de protección al flujo de autorización y está especialmente orientado a clientes que no pueden mantener secretos de cliente de forma segura. Su utilización se ha convertido en una práctica habitual en aplicaciones modernas que emplean OAuth.

El soporte de navegador externo también encaja con la evolución que Thunderbird ya había iniciado en versiones anteriores. Desde Thunderbird 153, el inicio de sesión OAuth de las cuentas de correo puede abrirse en el navegador predeterminado del sistema, en lugar de realizar todo el proceso dentro de la propia aplicación.

Mejoras en S/MIME

La nueva versión incorpora también una mejora para los usuarios que utilizan S/MIME. El cuadro de información correspondiente muestra ahora detalles adicionales sobre las firmas y el cifrado de los mensajes.

Entre la información que puede consultarse aparecen el algoritmo utilizado para la firma, el algoritmo de resumen o digest, el algoritmo de cifrado y el tamaño de las claves.

Esta información permite comprobar con mayor precisión las características criptográficas de un mensaje firmado o cifrado y ofrece más transparencia a los usuarios que necesitan verificar cómo se ha protegido una comunicación.

Más correcciones para IMAP, Exchange y calendarios

Thunderbird 155 llega acompañado de una extensa lista de correcciones. Entre ellas se solucionan problemas relacionados con la sincronización de etiquetas IMAP, la búsqueda global de mensajes y los filtros de archivos adjuntos.

También se corrigen diferentes problemas relacionados con Exchange y CalDAV. Por ejemplo, eliminar una cuenta de Exchange podía dejar configurada la información correspondiente al servidor de salida, mientras que determinados calendarios CalDAV podían dejar de sincronizar completamente sus eventos cuando se utilizaba el modo offline.

El cliente también soluciona un problema que podía provocar la pérdida silenciosa de cambios realizados sobre archivos ICS almacenados en caché cuando Thunderbird volvía a conectarse.

Numerosos fallos de estabilidad también quedan corregidos en Thunderbird 155

La actualización incluye varias correcciones de errores que podían provocar cierres inesperados del programa. Entre los problemas solucionados aparecen diferentes fallos relacionados con la gestión de memoria de la base de datos y con la carga de carpetas de correo.

También se ha corregido un bloqueo que podía producirse durante el cierre de Thunderbird mientras el cliente esperaba la introducción de una contraseña OAuth2.

Estos cambios pueden ser menos visibles que las nuevas funciones, pero resultan especialmente importantes en un cliente de correo que permanece abierto durante largos periodos y que gestiona continuamente mensajes, carpetas, calendarios, contactos y bases de datos locales.

Con Thunderbird 155 comienza una nueva etapa con versiones más frecuentes

El lanzamiento de Thunderbird 155 tiene además una particularidad importante: forma parte del nuevo calendario de publicación acelerado adoptado por Mozilla y Thunderbird.

El proyecto ha decidido pasar de un ciclo de cuatro semanas a uno de aproximadamente dos semanas para las versiones de escritorio. Thunderbird 155 es una de las primeras versiones que se beneficia de este cambio, que busca permitir que las mejoras terminadas lleguen a los usuarios con mayor rapidez.

El equipo ha explicado que este modelo no pretende obligar a los desarrolladores a trabajar al doble de velocidad. Las características que no estén preparadas podrán continuar su desarrollo y esperar a una versión posterior, mientras que las mejoras que sí estén listas tendrán más oportunidades de llegar rápidamente a la rama estable.

Versiones más pequeñas y frecuentes

El nuevo calendario implica que Thunderbird tendrá que acostumbrarse a una sucesión de versiones con intervalos mucho más cortos. En lugar de concentrar un gran número de cambios en una actualización mensual, las mejoras podrán repartirse entre varias versiones más pequeñas.

La estrategia sigue el cambio anunciado previamente para Firefox, que también ha comenzado a experimentar con un ciclo de lanzamiento de dos semanas. Thunderbird mantiene además una numeración sincronizada con Firefox, de modo que Thunderbird 155 se basa en Firefox 155.

Para los usuarios, el funcionamiento habitual del actualizador no cambia. Las nuevas versiones continuarán llegando mediante los mecanismos de actualización de Thunderbird o a través de los repositorios de las diferentes distribuciones Linux.

Thunderbird 155 refuerza su apuesta por Exchange

La evolución del soporte de Exchange sigue siendo uno de los proyectos técnicos más importantes de Thunderbird. El equipo lleva meses trabajando para ampliar la compatibilidad con Microsoft Graph y acercarla a las capacidades que anteriormente proporcionaba EWS.

Thunderbird 155 se beneficia de ese trabajo al integrar Exchange y Graph dentro del flujo de configuración manual de cuentas. La combinación de este soporte con OAuth personalizado permite que el cliente pueda adaptarse a un número mayor de configuraciones empresariales.

El proyecto también ha confirmado que el trabajo sobre Graph no termina con el correo electrónico. Una vez consolidada la compatibilidad con el correo, Thunderbird continuará desarrollando otras partes de la integración con Exchange, incluyendo futuras mejoras relacionadas con calendarios.

Una actualización importante para el cliente de correo de Mozilla

Thunderbird 155 representa una actualización especialmente centrada en autenticación, configuración de cuentas y compatibilidad con diferentes infraestructuras de correo. El soporte de OAuth personalizado para IMAP y SMTP es probablemente su incorporación más relevante, mientras que PKCE, el navegador externo y las mejoras para extensiones completan una renovación importante de esta parte del programa.

La versión también incorpora mejoras de S/MIME, nuevas políticas para administradores y numerosas correcciones relacionadas con IMAP, Exchange, CalDAV, búsquedas, filtros y estabilidad. Todo ello llega mientras Thunderbird comienza una nueva etapa de lanzamientos más frecuentes.

Con el paso a un ciclo de aproximadamente dos semanas, el proyecto pretende reducir el tiempo que transcurre entre la finalización de una mejora y su llegada a los usuarios. Thunderbird 155 es, por tanto, algo más que una actualización de mantenimiento: es también una muestra de la nueva estrategia de desarrollo con la que el cliente de correo de Mozilla afronta los próximos meses.


Cómo actualizar KDE Linux cuando Discover decide no hacerlo

Actualizar KDE Linux desde el terminal

KDE Linux es el sistema operativo en el que el proyecto KDE está trabajando en la actualidad. Ahora mismo ya se puede probar en máquinas virtuales, y podemos echarle un vistazo para ver como funciona y todo lo nuevo que van añadiendo. Pero aún no está ni cerca de ser estable, y podemos encontrarnos con problemas. Por ejemplo, Discover puede quedarse comprobando las actualizaciones y no finalizar el proceso, por lo que es imposible actualizar el sistema o los programas. Bueno, imposible no.

En Linux se usa mucho el terminal. No es necesario para la mayoría de tareas, pero sí suele venir bien para solucionar algunos problemas. Cuando el centro de software de KDE no funciona, en Kubuntu se puede tirar de sudo apt update, y en Fedora hacerlo con DNF, pero los sistemas inmutables son diferentes. En algunos, sudo ni siquiera está disponible por defecto, pero en KDE Linux sí lo está y se puede actualizar el sistema con él.

Actualizar KDE Linux desde Terminal

El proceso es sencillo, pero hay que saber qué comando usar. Como comentábamos, no se puede usar ni APT, ni DNF ni siquiera el Pacman de Arch, sistema en el que se basa KDE Linux. Hay que usar otro comando:

sudo systemd-sysupdate update

Si no hemos usado sudo nunca antes, nos avisará de los peligros. Los usuarios de Linux ya sabemos qué puede pasar (básicamente podemos cargarnos hasta la raíz del sistema con el comando adecuado). Pero en casos como los de actualizar, los peligros no suelen ser muy grandes.

Cuando finalice el proceso de actualización, podemos reiniciar manualmente o con:

systemctl reboot

Al reiniciar, el sistema operativo estará actualizado.

¿Y los programas?

KDE Linux, como la gran mayoría de distribuciones inmutables, obtiene la mayoría de su software de Flathub, de donde se descargan paquetes flatpak. Si Discover no respondía, es posible que con el comando anterior y reiniciando se haya arreglado todo. Pero en caso contrario se puede ir al terminal y usar flatpak update, como siempre. Así se actualizarán los programas.

Y esto sería todo. Se espera que cuando el sistema sea más estable todo esto funcionará mejor. Y si no lo hace, el terminal siempre puede ayudar.


Firefox 155 carga las páginas más rápido y activa la ventana inteligente en Norteamérica y Francia

Firefox 155

Firefox 155 ya está disponible. Llega dos semanas después de la versión anterior, lo que va a ser normal a partir de ahora (nueva versión cada dos semanas). Con este movimiento, Mozilla espera añadir las nuevas funciones más pronto. Y hablando de novedades, la versión 155 del navegador del panda rojo llega con una de esas que creo que o amarás u odiarás, y no es otra que la ventana inteligente.

Cabe destacar que esta «Smart Window» sólo está activa por defecto en Estados Unidos, Canadá y Francia, pero se puede activar desde about:config. A día de hoy, yo sigo sin encontrarle demasiado sentido, pero Mozilla decidió realizar cambios internos y abrazar a la IA con ganas, por lo que se esperan más novedades de este tipo en las próximas semanas. Quién sabe, a lo mejor al final termina encantándome.

Novedades de Firefox 155

  • Smart Window ya está disponible para todos los usuarios de Estados Unidos, Canadá y Francia. Además, Firefox 155 incluye varias novedades: nuevos iniciadores personalizados para retomar conversaciones que permiten volver rápidamente a temas en los que se estaba trabajando.
  • El asistente ahora responde mucho más rápido y utiliza fuentes de búsqueda web de Exa para ofrecer citas que aportan información precisa y fiable, reduciendo el tiempo de respuesta aproximadamente a una quinta parte.
  • Organizar pestañas ahora sugiere agrupaciones más adecuadas para las pestañas relacionadas y proporciona a cada grupo un nombre más claro y descriptivo.
  • Firefox ahora muestra en la barra de direcciones cuántos rastreadores ha bloqueado, haciendo más visibles las protecciones de privacidad integradas durante la navegación. El recuento puede ocultarse desde los ajustes sin desactivar el bloqueo de rastreadores.
  • Nintendo Switch Pro y los mandos compatibles de otros fabricantes ahora funcionan completamente en los juegos web de Windows, con la cruceta y los sticks analógicos correctamente asignados.
  • Ahora es posible reordenar los contenedores desde los ajustes, y el nuevo orden se utiliza en todos los lugares donde aparecen los contenedores.
  • La función de traducción ahora es compatible con maratí y urdu.

Para desarrolladores

  • Firefox limita ahora CSS a 75 niveles de bloques y funciones anidados, evitando los bloqueos que puede provocar una anidación extremadamente profunda en determinadas circunstancias. Las reglas y valores con una profundidad mayor ya no se procesan.
  • Firefox utiliza ahora firefox-portal-detection.com en lugar de detectportal.firefox.com para detectar portales cautivos y comprobar la conectividad de red, por lo que las listas de permitidos de red que hagan referencia al dominio antiguo deben actualizarse.
  • Firefox ahora abre los enlaces mailto: únicamente como respuesta a una acción explícita del usuario, de modo que las páginas ya no pueden abrir el cliente de correo predeterminado sin solicitarlo.
  • Al imprimir archivos PDF más pequeños que el tamaño del papel, ahora es posible ampliarlos para que ocupen toda la hoja estableciendo una escala superior al 100 %.
  • La función CSS attr() ahora admite valores de cualquier tipo, lo que permite utilizar valores de atributos en cualquier propiedad, en lugar de limitarse a cadenas de texto en la propiedad content.
  • Firefox ahora es compatible con la función CSS progress().
  • Firefox ahora es compatible con la función CSS alpha(), una función de color relativo que permite modificar únicamente el componente alfa de un color determinado.
  • Firefox ahora es compatible con los métodos Promise.allKeyed y Promise.allSettledKeyed de la propuesta de diccionario await, que reciben un objeto de promesas y lo resuelven en un objeto de resultados con las mismas claves.
  • Firefox ahora es compatible con la propuesta WebAssembly Compact Import Section, que puede reducir el tamaño de los módulos WebAssembly con muchas importaciones.
  • Firefox ahora es compatible con la propuesta WebAssembly Wide Arithmetic, que añade instrucciones aritméticas de 128 bits para mejorar el rendimiento en criptografía y cálculos de precisión arbitraria.
  • Firefox ahora es compatible con QUIC versión 2 para conexiones HTTP/3 y la utiliza cuando el servidor la selecciona mediante una negociación de versiones compatible.
  • La compatibilidad con el pseudoelemento no estándar ::-webkit-scrollbar, añadido en Firefox 153, ahora está limitada a una pequeña lista de sitios en lugar de aplicarse de forma universal.
  • Los elementos <a> de SVG ahora exponen las mismas propiedades de URL que los enlaces HTML, incluidas protocol, host, pathname y search.
  • SVGGraphicsElement.getBBox() ahora tiene en cuenta su argumento options, por lo que los cuadros delimitadores pueden incluir trazos, marcadores y recortes.
  • La propiedad font-width ahora es compatible como nombre estándar de font-stretch.
  • Una llamada dinámica a import() que falla debido a un error de red o HTTP ya no se almacena como un fallo en el mapa de módulos, por lo que volver a intentar utilizar el mismo especificador puede tener éxito.
  • WebTransport ahora admite grupos de envío mediante createSendGroup() para controlar cómo se comparte el ancho de banda entre flujos, flujos de datagramas de escritura mediante createWritable() y exportKeyingMaterial() para derivar claves vinculadas a la sesión TLS. También añade una promesa draining y negociación de subprotocolos mediante la opción protocols del constructor y la propiedad protocol.

Otras novedades

  • Firefox 155 admite RTCError para fallos de canales de datos, RTCSctpTransport.maxChannels, identificadores de extensiones de cabecera RTP de dos bytes y estadísticas RTCTransportStats más precisas, mejorando la interoperabilidad de WebRTC.
  • La vista de reglas ahora ofrece controles para emular la función multimedia prefers-reduced-motion. Las opciones de emulación también se han trasladado a un nuevo panel situado detrás del botón de reglas @.
  • El depurador de las herramientas para desarrolladores ahora dispone del atajo de teclado Ctrl+Alt+B, o Cmd+Alt+B en macOS, para activar o desactivar todos los puntos de interrupción simultáneamente.
  • El visor JSON ahora muestra documentos JSON Lines (JSONL/NDJSON), incluidos errores en línea para las líneas no válidas.
  • Se ha corregido un problema por el que el panel Almacenamiento mostraba junto a las cookies de la página inspeccionada las procedentes de ventanas privadas, contenedores y otras particiones.
  • Las excepciones no capturadas que no son de tipo Error ahora muestran sus nombres de propiedades en la consola en lugar de mostrar únicamente Object.
  • Se ha corregido un problema que hacía desaparecer el texto en Microsoft 365 Word Online y otras aplicaciones web en Linux al escribir con determinadas distribuciones de teclado.
  • Se ha corregido la aparición innecesaria de una confirmación al pegar mediante el atajo de teclado para pegar sin formato en Google Docs.
  • Firefox 155 se recupera cuando la barra de herramientas y la barra de pestañas quedan sin responder porque la plataforma no finaliza correctamente una sesión de arrastre de pestañas.
  • Se ha corregido un problema que impedía seleccionar o copiar el texto dentro de los botones, lo que impedía copiar mensajes directos en X y comentarios de YouTube.
  • Se ha corregido un problema que hacía que las transmisiones de audio en directo, como las emisoras de radio por Internet, se detuvieran al reproducirse en segundo plano.
  • Se ha corregido la desaparición del indicador de sonido de una pestaña trasladada a otra ventana, que impedía saber qué estaba reproduciendo contenido o silenciarlo.
  • Se ha corregido un problema que impedía que los sistemas Linux entraran en suspensión después de una sesión de navegación prolongada.
  • Se ha corregido la aparición de bandas negras alrededor del contenido a pantalla completa en MacBook con notch de cámara, especialmente al reproducir vídeo.
  • Se ha corregido el desplazamiento mediante las teclas de dirección y AvPág/RePág que no funcionaba en algunas páginas con contenido incrustado procedente de otros sitios.
  • Se ha corregido la aparición de caracteres de algunos sistemas de escritura menos comunes como cuadros vacíos en páginas web en Windows.
  • Se ha corregido un bloqueo de WebCodecs VideoEncoder en macOS al codificar un VideoFrame en formato NV12.
  • Se han corregido diversos problemas de seguridad.
  • Para los usuarios que tienen activadas las pestañas verticales, es posible que la barra lateral no se conserve después de reiniciar Firefox. Las pestañas verticales pueden volver a activarse haciendo clic en el botón de la barra lateral. Hay una solución en desarrollo.
  • Algunos sitios pueden cargarse lentamente o no llegar a cargarse en redes que bloquean UDP. Esto puede afectar, por ejemplo, a redes corporativas en las que un proxy o cortafuegos bloquea QUIC como parte de la inspección TLS. Como solución temporal, se puede establecer network.http.happy_eyeballs_enabled en false mediante la directiva Preferences. Está prevista una solución para Firefox 155.0.1, cuyo lanzamiento tendrá lugar como muy tarde el 8 de septiembre.

Firefox 155 ya disponible

El lanzamiento de Firefox 155 es oficial desde hace unos instantes y ya se puede descargar desde su página web o desde las notas de este lanzamiento. En las próximas horas/días aparecerá la actualización en los repositorios oficiales de la mayoría de distribuciones Linux, y se actualizarán los paquetes Snap y Flatpak.


Firefox 155 llega con conexiones más rápidas, IA opcional y un montón de novedades

Firefox 155

Mozilla ha puesto a disposición del público los binarios de Firefox 155, una actualización que llega con más miga de lo que suele ser habitual. Aunque el anuncio oficial está previsto para el dentro de unas hora, los archivos ya se pueden descargar, y la lista de cambios es bastante extensa. La compañía ha querido dar un empujón tanto a la velocidad de carga como a la experiencia de usuario, sin olvidarse de los desarrolladores.

Lo primero que llama la atención es que esta versión no se limita a retoques menores. Hay una apuesta clara por optimizar la conexión a internet, una incursión en la inteligencia artificial para el escritorio y un buen puñado de correcciones que llevaban tiempo pidiéndose. Vamos a desgranar lo más destacado de esta entrega.

Para el que se esté preguntando por qué Firefox 155 llega tan pronto tras Firefox 154, la respuesta es que Mozilla ha cambiado su calendario y lanzará versiones mayores cada dos semanas desde el lanzamiento de hoy.

Una conexión más lista y rápida en Firefox 155

El plato fuerte es, sin duda, el nuevo sistema de selección de conexiones. Firefox 155 estrena la tercera generación de Happy Eyeballs, un mecanismo que ahora es capaz de probar varias rutas a la vez. Ya no se limita a comparar IPv4 e IPv6, sino que también echa mano de los registros DNS modernos para saber qué protocolos soporta el servidor y lanzar pruebas simultáneas con HTTP/2 y HTTP/3. La idea es que el navegador se quede con la primera opción que responda, evitando esperas innecesarias cuando una vía es más lenta o está bloqueada. En la práctica, esto puede notarse en páginas que antes tardaban un poco más en arrancar.

Relacionado con esto, la nueva versión incorpora soporte para QUIC v2 en las conexiones HTTP/3. No es que lo fuerce, sino que lo utiliza cuando el servidor lo elige durante la negociación. Esto permite que la navegación siga siendo compatible con infraestructuras más antiguas, pero aprovecha las mejoras de este protocolo cuando está disponible. Es un paso más para que la web cargue de forma más fluida, especialmente en redes con cierta congestión.

La IA se asoma al escritorio en Firefox 155

Otra de las novedades que ha dado que hablar es Smart Window (actívala en Linux), una ventana de navegación opcional impulsada por inteligencia artificial. Esta función, que de momento está disponible para usuarios de Estados Unidos, Canadá y Francia, permite acceder a las pestañas abiertas y al historial, pero siempre con el permiso explícito del usuario. Es una forma de darle al navegador un papel más activo a la hora de organizar la información, aunque habrá que ver cómo se adapta a los hábitos de cada uno. Lo bueno es que es opcional, así que quien no quiera usarla, no tiene por qué activarla.

Correcciones y novedades para el día a día

La actualización también trae una solución para un problema que afectaba a los usuarios de Linux. Al parecer, el sistema no entraba en suspensión después de una sesión larga de navegación, lo que podía gastar batería de forma innecesaria. Con este parche, el equipo debería comportarse con normalidad. Además, se ha añadido la posibilidad de reordenar los contenedores directamente desde los ajustes, un detalle que muchos llevaban tiempo pidiendo.

En el apartado de privacidad, Firefox 155 ahora muestra en la barra de direcciones el número de rastreadores que ha bloqueado. Es una forma rápida y visual de ver el trabajo que está haciendo el navegador. También se ha restringido la apertura de enlaces mailto: para que solo se ejecuten cuando el usuario hace clic explícitamente, evitando sustos. Y para los que juegan con mando, hay una sorpresa: soporte para el controlador de Nintendo Switch Pro y otros compatibles en Windows.

Un festín para los desarrolladores

Los desarrolladores también tienen motivos para estar contentos. Firefox 155 incluye soporte para WebAssembly Compact Import Section y para WebAssembly Wide Arithmetic, lo que permite trabajar con instrucciones aritméticas de 128 bits. En el terreno del CSS, se ha estandarizado la propiedad font-width como nombre oficial de font-stretch, y se ha añadido soporte para la función progress(). La interoperabilidad de WebRTC también ha mejorado, lo que debería traducirse en llamadas y videollamadas más estables dentro del navegador.

Con esta mezcla de optimizaciones de red, funciones de IA opcionales y un buen puñado de ajustes para desarrolladores, Firefox 155 se presenta como una de las actualizaciones más completas de los últimos tiempos. La selección inteligente de rutas y la compatibilidad con QUIC v2 buscan exprimir al máximo la conexión, mientras que la ventana con IA y los cambios en la interfaz intentan hacer la navegación más cómoda y transparente. Sin duda, una versión que merece la pena probar.


Cómo recrear una infografía con Inteligencia Artificial

Infografía de ejemplo

Utilizando esta infografía como base, le pediremos a un modelo de Inteligencia Artificial que nos genere otra como base para la modificación.

En esta entrega de nuestra serie de artículos del mes veremos cómo recrear una infografía con Inteligencia Artificial logrando algo más parecido al original. Es parte de un grupo de posteos que continuará en septiembre y busca explicar cómo el software libre y de código abierto y los modelos de Inteligencia Artificial pueden ayudarnos a obtener resultados de calidad sin renunciar a la originalidad ni al toque humano.

Estoy dedicando una cantidad de espacio, que tal vez ustedes juzguen excesiva, a la descripción de cada parte del código que construye nuestra recreación de la infografía. Pero lo hago porque es la mejor forma de que nos familiaricemos con las instrucciones que usa SVG para trazar las imágenes.

Cuando llegue el momento, y prometo que llegará, de utilizar el software libre para construir nuestras propias imágenes, no será necesario buscar en Google ni preguntarle a un modelo cómo hacerlo. Ni mucho menos pedirle que lo haga.

Lo que aprendimos hasta ahora

Hasta este momento vimos que a menos que uno sea muy preciso con el prompt, el modelo no generará una recreación exacta. Solo tienen que comparar la infografía que aparece al principio del artículo con la que obtuve al pedirle a ChatGPT que la recreara.

Captura de pantalla de cómo se ve el SVG de la infografía en el navegador.

Como vemos, aunque es parecida, no es exactamente una recreación fidedigna. Yo le indiqué que eliminara los textos. Sin embargo, en la reproducción de ciertos elementos, como las manos estrechándose o las viñetas de crecimiento, no ha logrado un buen resultado. También ha desplazado de lugar a otros elementos.

No tiene importancia, porque yo fui deliberadamente impreciso en el prompt. Hay formas que veremos más adelante de lograr una recreación más precisa. También es buena práctica pedirle que la haga por partes. Primero los paneles y después cada icono en particular.

Más adelante vamos a utilizar Inkscape, el software de edición de gráficos vectoriales de código abierto, para eliminar los elementos de esta infografía que no reutilizaremos y agregar otros que servirán a nuestro propósito.

Antes de seguir con los componentes que nos falta analizar, repasemos lo que aprendimos hasta ahora.

Los círculos de colores

Al analizar el código que construye los círculos de colores que encabezan cada panel, aprendimos a trazar círculos y a rellenarlos con un estilo de gradiente que habíamos definido previamente al principio del código.

La bombilla

Para dibujar la bombilla tuvimos que utilizar curvas de Bézier y el comando Z, que cierra una figura trazando una línea recta entre el último punto dibujado y el punto de origen del dibujo. También utilizamos el atributo transform y el comando M para cambiar el sistema de coordenadas y mover un imaginario cursor dentro del lienzo. Además, aprendimos a darle color al fondo.

El diagrama de flujo

Acá empezamos a combinar comandos para construir figuras más complejas. El comando V para trazar líneas verticales, el comando L para trazar los lados del rombo, el comando rect para construir los rectángulos. También vimos otra forma de reutilizar estilos definidos anteriormente usando un método similar al de las hojas de estilo de los sitios web, que agrupa a las líneas dentro de una misma clase, asegurando que todas las líneas del dibujo mantengan un estilo consistente.

El gráfico de torta

En este gráfico aparece un nuevo comando que nos ayuda a dividir las porciones del círculo que trazamos. Es el comando A, de arco, que selecciona partes de la figura y, con ayuda de nuestros viejos amigos L y Z, construye triángulos que colorea con la ayuda de los comandos fill y stroke (este último indica el color y ancho de línea cuando no queremos usar uno definido previamente).

El gráfico de barras

Esta es una figura no demasiado novedosa, salvo por las técnicas que usamos para trazarlas.

  • Los ejes se trazaron con un solo path: Gracias al comando M podemos usar varias instrucciones en una misma línea, aunque no estén conectadas.
  • Las barras se crean con el comando rect: Esto puede parecer una obviedad, pero tiene muchas posibilidades. Imagina un script para Scribus, el programa de publicaciones de escritorio de código abierto, en el que, pasándole los valores, te genere el gráfico de barras en forma automática. Gracias al Todopoderoso lenguaje de programación Python, incluso sería posible importar los datos desde una planilla de cálculo.
  • Dibujo de la línea de tendencia: La trazamos combinando líneas trazadas con el comando L, unidas por un punto.
  • Creación de decoraciones simples: Así como decoramos el centro del gráfico de torta con un círculo, el extremo de la línea de tendencia son dos líneas que conforman una letra L invertida. La construimos utilizando una línea horizontal y otra vertical con los comandos H y L.
  • Coordinación de elementos: El uso inteligente del comando M nos permitió crear una imagen coherente a partir de la combinación de diferentes dibujos.

Cómo recrear una infografía con Inteligencia Artificial

El propósito de estos artículos no es recrear de manera fiel una infografía, sino tomar elementos de ella sin copiar ni pegar el original. De hecho, lo ideal es utilizar varias. El fondo de uno, la paleta de colores de otra y componentes de una tercera, cuarta o quinta para obtener un resultado completamente diferente. También sería ideal agregar alguna parte fruto de nuestra propia inspiración.

Como dije al principio, mi prompt fue deliberadamente vago.

Créame una imagen en formato para los gráficos de esta infografía, sin textos. Dame solo el código.

Podía haber obtenido una reproducción más fiel con el siguiente:

Reproduce esta imagen. Mantén las posiciones, dimensiones, proporciones, colores, espacios, formas, sombras y relaciones espaciales. Ignora el contenido de texto. No intentes representar conceptualmente la imagen. Intenta reconstruirla geométricamente.

La última frase es realmente útil, ya que, en lugar de tratar de hacer su propia versión de una parte del dibujo, por ejemplo, su propia versión de un sombrero, lo va a analizar como líneas, puntos, curvas y círculos. Esto puede producir algo más aproximado al original.

Una sugerencia. En Internet hay muchos tutoriales que enseñan a dibujar a mano a partir de la combinación de trazos. Es muy fácil transformarlos en instrucciones SVG, lo que permite generar imágenes con el toque humano.


OpenShot 4.0 llega con Qt6, nuevas herramientas de grabación y efectos de IA

OpenShot 4.0

El editor de vídeo de código abierto OpenShot ha dado un salto importante con el lanzamiento de su versión 4.0, que ya está disponible en GitHub. Esta actualización, que llega después de la versión 3.5.1, supone un cambio de base tecnológica al pasar de Qt5 a Qt6, lo que trae consigo mejoras en el rendimiento y en la compatibilidad con sistemas Linux, especialmente en lo que respecta a Wayland y al escalado fraccional de pantalla. Además, se han incorporado numerosas herramientas nuevas que buscan acercar el programa a un público más profesional.

Entre las novedades más destacadas se encuentra un nuevo dock de grabación que permite capturar audio, pantalla o webcam directamente dentro de un proyecto existente. Los clips se insertan en la línea de tiempo mientras se graba y se importan automáticamente al finalizar. También se ha añadido una vista de análisis y un sistema de plantillas para ComfyUI, que facilita tareas de limpieza y mejora de audio mediante inteligencia artificial. Todo ello se complementa con una serie de efectos visuales nuevos, como sombra, brillo, mapa de desplazamiento y grano de película.

Migración a Qt6 y mejoras de interfaz en OpenShot 4.0

La migración a Qt6 es el cambio más profundo de esta versión. Aunque no altera directamente el aspecto visual, sí mejora la estabilidad y el soporte para tecnologías modernas. Los desarrolladores han aprovechado para reorganizar la interfaz: ahora hay vistas simples, de color y de grabación, y se pueden crear y guardar diseños de espacio de trabajo personalizados. La vista avanzada ha desaparecido, pero se compensa con la posibilidad de definir tus propias distribuciones. Además, se han retocado los menús y se han eliminado opciones obsoletas, lo que hace que el programa se sienta más limpio y ordenado.

Herramientas de audio y efectos con IA

OpenShot 4.0 incorpora cuatro nuevos flujos de trabajo de ComfyUI para audio: reducción de ruido, mejora de voz, aumento de resolución de audio y reparación básica de clips dañados. Estos procesos se ejecutan en un servidor ComfyUI externo, al que OpenShot envía los archivos y recoge los resultados. En el lado local, la interfaz de los efectos de IA se ha simplificado: ahora los modelos se descargan automáticamente cuando se necesita y se muestra una vista previa en vivo para el enmascaramiento de objetos. También se ha añadido un selector de modelos YOLO para el filtro de detección de objetos, aunque esta función ya estaba disponible en versiones anteriores.

Nuevos efectos y mejoras de exportación

Entre los efectos de vídeo nuevos se incluyen sombra, brillo, mapa de desplazamiento y grano de película, además de un efecto de visualización de audio que permite superponer formas de onda, barras o espectros sobre el clip. También se han añadido nuevos ajustes preestablecidos de cámara y animación en el menú de movimiento, y se ha mejorado la visualización de formas de onda con opciones de pico y RMS. Para las redes sociales, se han incluido filtros de exportación específicos para TikTok, Snapchat y otras plataformas. La documentación también se ha actualizado para reflejar todos estos cambios.

En conjunto, OpenShot 4.0 representa una actualización muy completa que, por primera vez en mucho tiempo, no ha provocado fallos durante las pruebas. Aunque la fiabilidad puede variar según el sistema, esta versión parece haber corregido muchos de los problemas que históricamente han afectado al programa. Con la migración a Qt6, las nuevas herramientas de grabación y los avances en IA, OpenShot se posiciona como una opción sólida para editores de vídeo que buscan una herramienta gratuita y de código abierto.


Linux 7.3-rc1 ya está disponible: novedades y un enorme incremento de código AMD

Linux 7.3-rc1

El pasado domingo, Linus Torvalds anunciaba la disponibilidad de Linux 7.3-rc1, cerrando así una ventana de fusión de dos semanas que, como es habitual, ha traído una gran cantidad de novedades. Este primer candidato a versión estable ya se puede probar a través de Git, y aunque el propio Torvalds ha comentado que «nada destaca especialmente», lo cierto es que el volumen de cambios es de los más grandes que se recuerdan, con un diff que no es el mayor de la historia pero que se sitúa entre los primeros.

La lista de mejoras es extensa: nuevas optimizaciones para CPUs híbridas de Intel, más soporte para las futuras plataformas AMD Zen 6, mejoras de rendimiento en Btrfs, soporte en Nouveau para Vulkan Video, controlador para el mando de Steam de 2026, soporte inicial para los chips M3 Ultra/Pro/Max de Apple, y habilitación de los gráficos Intel Xe3P con Nova Lake, entre otros. También se ha integrado FailFS, un modo de baja latencia para USB4STREAM, y se han eliminado varios controladores obsoletos, algo que Torvalds atribuye al ruido generado por agentes de IA/LLM.

El peso del código AMD en Linux 7.3-rc1

Uno de los aspectos que más ha llamado la atención es el enorme incremento del código relacionado con las GPU de AMD. Según ha explicado el propio Torvalds en su anuncio, el registro de registros de AMD DCN6 supone aproximadamente un tercio de todo el parche de rc1. Se trata de una nueva generación de cabeceras de registro que, como es costumbre, se incluyen como definiciones de C, lo que infla considerablemente el tamaño del diff. Si se excluye ese bloque, el resto de cambios se comporta con normalidad.

Un análisis más detallado, realizado con la herramienta cloc sobre el árbol de Git en v7.3-rc1, revela que el kernel alcanza casi 41 millones de líneas de código, concretamente 40,98 millones, de las cuales 30,9 millones son líneas de código efectivo. En comparación, la versión 7.2 tenía 40,42 millones. El directorio drivers/gpu/drm/amd, que incluye los controladores AMDGPU y AMDKFD, así como el código de display, suma 6,52 millones de líneas, lo que supone alrededor del 16% del kernel. Esto representa un aumento respecto a los 6,35 millones de la versión anterior.

El kernel de Ubuntu 26.10

Torvalds, en su mensaje habitual, ha bromeado sobre su propia torpeza al hacer una actualización del sistema en medio de la ventana de fusión, lo que le causó algún que otro problema. Aun así, ha asegurado que todo ha salido bien y que espera que el resto del ciclo sea tranquilo, aunque reconoce que «casi seguro no será pequeño». El anuncio oficial se ha publicado en la lista de correo del kernel, y ya se puede acceder a la versión rc1 a través de Git.

En resumidas cuentas, Linux 7.3-rc1 llega cargado de novedades y con un crecimiento notable del código, especialmente en el apartado gráfico de AMD. Los desarrolladores y entusiastas ya pueden probar esta versión y contribuir con sus pruebas para afinar el kernel de cara a la versión final. La comunidad espera que, a pesar del tamaño, el ciclo de desarrollo transcurra sin sobresaltos y que las nuevas funcionalidades se estabilicen correctamente.


Explicando los componentes de una infografia

Captura de pantalla de cómo se ve el SVG de la infografía en el navegador.

En este artículo estaré explicando los componentes finales de nuestra infografía en formato SVG. La infografía fue creada con la ayuda de un modelo de Inteligencia Artificial sobre la base de una imagen de una infografía vista en Internet.

En los artículos anteriores me extendí bastante sobre las ventajas del formato SVG y de por qué usarlo en lugar de pedirle a un modelo que haga la infografía como la queremos. No voy a extenderme en eso.

En este artículo sí voy a insistir en la importancia de conocer lo que estamos haciendo. Permítanme hacer menos densa esta explicación de código con una pequeña historia.

Héctor Ricardo García fue un exitoso empresario de los medios de comunicación en Argentina. Además de fundar uno de los diarios más vendidos del país, fue un pionero de la televisión nacional. García atribuía su éxito a haber empezado desde abajo y pasado por todas las áreas relacionadas con la publicación, tanto en la imprenta como en la redacción.

Comentaba García que la gran ventaja de eso era que, cuando un empleado le decía que algo no podía hacerse, él le demostraba cómo hacerlo. Nunca más ese empleado volvía a discutirle.

El reverso de la moneda de García era Henry Ford. No sabía absolutamente nada de ingeniería. Se limitaba a pedirle a los empleados lo que se le ocurría y presionaba para conseguirlo. La Ford estuvo años sin obtener ganancias.

Volviendo al tema que nos ocupa, los modelos de Inteligencia Artificial funcionan mejor con los García que con los Ford. Cuanto más sabes del tema sobre el que estás consultando, mejores resultados obtendrás. Por eso insisto tanto en la descripción del código SVG.

Explicando los componentes de una infografía

El gráfico de barras

Las instrucciones ubicadas entre las líneas 148 y 159 dibujan un gráfico de barras compuesto por 4 barras de colores diferentes, sobre dos ejes. Encima de las barras habrá una línea de tendencia ascendente con una flecha en la punta. Es el clásico icono que se usa para representar crecimiento o análisis de datos.

La línea 148 indica como posición de inicio del gráfico las coordenadas X=511, Y=295 del lienzo principal. Estas pasan a ser las coordenadas 0,0 para el resto del dibujo.

Dibujo de los ejes

De acuerdo a las instrucciones de las líneas 149 y 150, se indica un path que traza una línea vertical y una horizontal que actuarán como ejes de los gráficos.

  • M-43 35: Indica que se comenzará a dibujar en el extremo izquierdo del eje horizontal.
  • H47: Dibuja una línea horizontal hasta X=47, lo que equivale a 90 píxeles hacia la derecha. Esta línea será el eje horizontal del gráfico.
  • M-43 35: Mueve el inicio del dibujo al punto de inicio de la línea anterior.
  • V-39: Dibuja una línea vertical hasta Y=-39 (sube 74 píxeles). Este será el eje vertical del gráfico de barras.
  • class=»ln»: Aplica las reglas CSS que establecimos para las líneas al principio del código (sin relleno y esquinas redondeadas).
  • stroke=»#708991″ stroke-width=»3″: Las líneas tendrán un color gris azulado oscuro y un grosor de 3 píxeles.

Las barras del gráfico

La barra de color azul

Es la más baja y las instrucciones para dibujarla están en la línea 151.

Se hace con un rectángulo que se traza con las siguientes coordenadas:

  • x=»-32″ y=»15″: Establece la esquina superior izquierda en (-32, 15).
  • width=»14″ height=»20″: Indica que el rectángulo tendrá 14 píxeles de ancho y 20 píxeles de alto.
  • fill=»#66aee0″: Rellena el rectángulo con un color azul.
  • stroke=»#4d99c8″: Establece un color azul oscuro para las líneas del rectángulo.
Barra de color verde

Le sigue en tamaño y sus características se describen en la línea 152.

El rectángulo de la barra tendrá las siguientes características:

  • x=»-12″ y=»2″: Dado que la barra es más alta, empieza en las coordenadas (Y=2).
  • width=»14″ height=»33″: Se mantiene el ancho del rectángulo anterior, pero, como dijimos, es más alta.
  • fill=»#70c99d» stroke=»#4cae86″: Rellena la barra con un color verde claro y uno un poco más oscuro para el borde.
Barra amarilla

La línea 153 indica el trazado de la tercera barra. También se trata de un recuadro con las siguientes coordenadas.

  • x=»8″ y=»-10″: El rectángulo empieza aún más arriba (Y=-10).
  • width=«14» height=«45»: Se mantiene el mismo ancho, pero se cambia el alto.
  • fill=»#f2bf51″ stroke=»#dca93f»: Se mantiene la misma combinación de un color amarillo claro para el relleno y uno más oscuro para el borde.
La barra naranja

La línea 154 traza la última de las barras. Usa estas coordenadas.

  • x=»28″ y=»-27″: Empieza más alto que las demás.
  • width=»14″ height=»62″: Seguimos con el mismo ancho, pero un mayor alto para el rectángulo.
  • fill=»#e99a62″ stroke=»#d98252″: Mismo esquema de color. Naranja claro para el relleno y naranja un poco más oscuro para el borde.

Si prestaste atención a la posición de las coordenadas X, verás que hay un espaciado de 20 píxeles entre cada una.

La línea de crecimiento

Se describe en el path de las líneas 155 y 156. Dibuja una línea quebrada que conecta los puntos sobre cada barra, indicando la tendencia.

  • M-39 5: El dibujo empieza en (-39, 5), sobre la primera barra.
  • L-17-8: Se traza una línea hasta (-17, -8), que es un punto ubicado sobre la segunda barra.
  • L1-2: Tiende una línea hasta el punto (1, -2), que está sobre la tercera barra.
  • L22-24: Lleva la línea hasta (22, -24), encima de la cuarta barra.
  • L43-34: Con esta línea que va hasta (43, -34), llegamos hasta la última barra.
  • stroke=»#e0ae3f» stroke-width=»3″: Asigna el mismo color y ancho para la línea de tendencia.
La flecha en la punta

El path de la línea 157 finaliza este dibujo con la punta de flecha que termina en la línea de crecimiento.

  • M36-34: Lleva el origen del dibujo a (36, -34), una ubicación justo antes del final de la línea.
  • H43: Traza una línea horizontal hasta X=43, que es el punto final de la línea de tendencia.
  • V-27: Dibuja una línea vertical hasta Y=-27, que es un largo de 7 píxeles.
  • stroke=»#e0ae3f» stroke-width=»3″: Asigna el mismo color y ancho para la línea de tendencia.
  • class=»ln»: Asigna los estilos indicados para las líneas al principio del código.

En este gráfico vimos algunas de las posibilidades que tiene SVG para crear gráficos estadísticos para presentaciones. En los siguientes artículos terminaremos con los símbolos y empezaremos a modificar nuestro diseño.


Más explicaciones sobre el código SVG

Imagen SVG en un visor de imágenes.

En el cuarto artículo de esta serie voy a dar más explicaciones sobre el código SVG que estoy usando de ejemplo sobre cómo combinar Inteligencia Artificial y software libre.

Aunque suene tedioso y repetitivo que me extienda tanto, es necesario para entender después las modificaciones que vamos a hacer.

El resto de los componentes de la infografía

Captura de pantalla de cómo se ve el SVG de la infografía en el navegador.

Esta es la captura de pantalla de una infografía que un modelo de Inteligencia Artificial construyó inspirada en otra que le proporcioné. La imagen original no la puedo subir por limitaciones de nuestro gestor de contenidos.

La imagen con la que estamos trabajando está en formato SVG, que consiste en una serie de instrucciones sobre cómo trazar los diferentes componentes de la imagen. Las instrucciones son estas.

Habíamos dejado la explicación en el trazado de la bombilla. Continuaremos ahora con el resto de los componentes.

El diagrama de flujo

Las instrucciones para el trazado del dibujo están entre las líneas 114 a 121.

La línea 114 establece el punto de inicio del dibujo y el color y ancho del trazo.

  • transform=»translate(144 299)»: Mueve todo el dibujo a la posición X=144, Y=299 del lienzo principal, colocándolo debajo de la bombilla.
  • stroke=»#4a9fc9″ y stroke-width=»1.7″: Establece el color y el ancho del trazo para todos los elementos del dibujo, salvo que expresamente se indique lo contrario.

La línea 115 traza las líneas conectoras.

  • M0-26: Mueve el lápiz a (0, -26), debajo de la rosca de la bombilla.
  • V-8: Dibuja una línea vertical hasta Y=-8 (18 píxeles de largo). Esta línea conecta la rosca de la bombilla con la imagen del rombo que todavía no dibujamos.
  • M0 8 V22: Traza una línea vertical.
  • M0 8: Mueve el lápiz a (0, 8), justo debajo del rombo que todavía no dibujamos.
  • V22: Dibuja una línea vertical hasta Y=22 (baja 14 píxeles). Es la línea que conectará el rombo con la línea horizontal que dibujamos antes.
  • M-39 22 H39: Traza la línea horizontal que conectará las tres cajas todavía no dibujadas.
  • M-39 22: Mueve el lápiz a (-39, 22), en el extremo izquierdo.
  • H39: Dibuja una línea horizontal hasta X=39 (recorre 78 píxeles hacia la derecha).

Un detalle importante es que los comandos V y H solo necesitan un parámetro, ya que la otra coordenada permanece inalterada.

En la línea 116 se dibuja la caja superior.

  • x=»-11″ y=»-42″: Posición de la esquina superior izquierda. Está calculada para que, con el ancho que establecemos después, la imagen quede centrada horizontalmente.
  • width=»22″ height=»17″: Establece que la imagen tendrá un tamaño de 22 x 17 píxeles.
  • rx=»2″: Redondea ligeramente los bordes.
  • fill=»#a9def3″: Rellena la caja con un color azul claro.

No se establecieron características para el borde, por lo que se usará el estilo general.

La línea 117 traza el rombo.

  • M0-4: Establece la posición del punto superior del rombo.
  • L10 5: Traza una línea diagonal hacia abajo y hacia la derecha como primer lado del rombo.
  • L0 14: Traza una línea diagonal hacia abajo y hacia la izquierda como el otro lado de la parte superior del rombo.
  • L-10 5: Traza una línea diagonal hacia abajo y hacia la izquierda como primer lado de la parte inferior del rombo.
  • Z: Cierra la figura completando la parte inferior.
  • fill=»#f8c55a»: Relleno amarillo/dorado.

Voy a saltarme las líneas 124 a 135 porque el dibujo de lo que deberían haber sido dos manos estrechándose no resultó bien logrado y lo eliminaremos posteriormente.

El diagrama de torta

Ocupa las líneas 138 a 145.

La línea 138 establece el punto de origen del dibujo.

transform=»translate(327 300)»: Establece como punto de origen X=327, Y=300 del lienzo principal. Este punto será el centro del gráfico y todo se dibujará alrededor.

La línea 139 traza el círculo base.

  • r=»39″: Establece el radio de 39 píxeles. No se establecen los parámetros cx ni cy porque se usarán las coordenadas indicadas como punto de inicio.
  • fill=»#e9f9f1″: Rellena el círculo con un color verde claro.
  • stroke=»#54b993″ stroke-width=»2″: Establece para el trazo un borde verde un poco más oscuro y un ancho de 2 píxeles.

A continuación se dibujan las porciones del gráfico de torta. Para esto introducimos un nuevo comando: A, que es la letra inicial de Arc (arco). Esto es bastante explícito por sí mismo respecto de lo que hace.

La sintaxis de este comando es:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Donde:

  • rx ry: Indican los radios X e Y del arco. Si queremos trazar un círculo, debemos establecer valores iguales para ambos radios.
  • x-axis-rotation: Indica la rotación del eje del arco. En un círculo perfecto, este valor no afecta al resultado visual.
  • large-arc-flag: 0 para un arco pequeño (hasta 180°), 1 para un arco grande (más de 180°).
  • sweep-flag: 0: traza el arco en sentido contrario a las agujas del reloj; 1: lo traza en el sentido de las agujas del reloj.
  • x y: Indican el punto final del arco.

Veamos las porciones de nuestra torta.

La línea 140 traza la porción de color verde de arriba a la derecha.

  • M0 0: Pone como comienzo del dibujo las coordenadas que establecimos antes.
  • V-39: Traza una línea vertical hacia arriba hasta (0, -39), que es el punto más alto del círculo.
  • A39 39 0 0 1 33 20: Crea un arco pequeño con radio 39 en X e Y, sin rotación. El arco se traza en el sentido de las agujas del reloj y termina en las coordenadas (33, 20).
  • Z: Cierra la forma trazando una línea hasta el origen.
  • fill=»#56bd98″: Rellena la figura con el color verde.

La línea 141 se encarga de la porción amarilla que está abajo a la derecha.

  • M0 0: Indica que el comienzo del dibujo será en el punto de origen establecido.
  • L33 20: Traza una línea hasta el punto donde termina la porción anterior.
  • A39 39 0 0 1 -24 31: Traza un arco hasta las coordenadas (-24, 31).
  • Z: Cierra la figura trazando una línea hasta el centro.
  • fill=»#f3bf51″: Rellena la figura resultante con un color amarillo.

La línea 142 traza la porción azul ubicada abajo a la izquierda.

  • M0 0: Otra vez comenzamos desde el centro establecido para el dibujo.
  • L-24 31: Traza una línea hasta donde terminamos la porción amarilla.
  • A39 39 0 0 1 -39 0: Traza un arco hasta (-39, 0), que es el punto más a la izquierda.
  • Z: Cierra la figura.
  • fill=»#65aee0″: La rellena con un color azul.

La línea 143 dibuja la porción que nos falta, de color verde claro, ubicada arriba a la izquierda.

  • M0 0: Una vez más comenzamos desde el centro.
  • L-39 0: Traza una línea horizontal hacia la izquierda.
  • A39 39 0 0 1 0-39: Traza un arco hacia arriba, hasta las coordenadas (0, -39).
  • Z: Cierra la figura.
  • fill=»#bfe7d6″: Rellena la figura con un color verde claro.

La línea 144 traza el círculo decorativo del centro.

  • circle r=»2.5″: Traza un círculo con un radio de 2,5 píxeles.
  • fill=»#718b95″: Lo rellena con un color azulado.

En el próximo artículo completaremos el trazado de los componentes que nos faltan para empezar la modificación.


Explicando cómo funciona nuestro código SVG

Código de una imagen SVG

En este artículo voy a seguir explicando cómo funciona el código SVG que venimos utilizando en la serie de artículos de este mes. Esta serie está dedicada a cómo combinar Inteligencia Artificial y programas de software libre para la creación de contenidos. Estoy poniendo énfasis en la creación de imágenes porque es mi talón de Aquiles. También puede funcionar genial en contenido con formato texto.

A riesgo de resultar cansador, insisto con que solo pedirle a nuestro modelo preferido que haga algo es desperdiciar sus posibilidades. Cuando sabemos qué es lo que queremos y podemos describirlo adecuadamente, mejores resultados lograremos.

Imagino la objeción que me plantearás si no leíste los artículos anteriores. ¿Para qué el software libre si podemos darle al modelo un prompt más completo y que haga todo el trabajo?

Hay tres respuestas: calidad, economía y privacidad.

  1. Calidad: Los resultados del contenido generado por Inteligencia Artificial se terminan pareciendo. Puedes probar modificando parámetros o con diferentes prompts, pero a la larga te termina tomando mucho tiempo. Por otra parte, ya Anthropic, la empresa detrás de la familia de modelos Claude, empezó a poner marcas de agua a los contenidos que genera. Y la gente está empezando a valorar más los contenidos creados por seres humanos.
  2. Economía: La generación de imágenes usando modelos de Inteligencia Artificial es muy exigente en el consumo de recursos. Eso hace que en los modelos gratuitos existan límites bajos y en los de pago sea más costoso. Al trabajar con código en lugar de píxeles, el consumo de recursos es menor.
  3. Privacidad: Al trabajar con un formato de imágenes que permite ser creado o modificado por código, podemos utilizar modelos locales sin necesidad de tener un hardware potente.

Explicando cómo funciona nuestro código SVG

Tomando como base una plantilla de infografía, le pedí a ChatGPT que creara una versión en formato SVG. Dado que no fui específico en el prompt, no obtuve una recreación exacta, pero sí adecuada para mis propósitos. Esta es la infografía sobre la cual vamos a trabajar.

Captura de pantalla de cómo se ve el SVG de la infografía en el navegador.

Y este es el código del archivo SVG:

La bombilla eléctrica

Habíamos dejado nuestra explicación del código en el trazado de los paneles. Vamos a continuar con el contenido interior de los mismos.

Líneas 86 a 99

En estas líneas se trazan los círculos numerados que vemos en cada panel. Las líneas 87 a 92 son las que construyen los círculos de colores. Siendo:

  • cx: Ubicación en píxeles a partir del margen izquierdo.
  • cy: Ubicación en píxeles a partir del margen superior.
  • fill: El color de relleno del círculo (a cada uno se le asigna un color de gradiente que definimos al inicio).
  • stroke: El color del borde del círculo.
  • stroke-width: El ancho del borde del círculo.

Las líneas 92 a 98 le asignan un único color y opacidad a los círculos interiores.

Acá es donde la cosa se empieza a poner interesante.

Líneas 102 a 112

En la línea 102 le indica al programa que, para este grupo de instrucciones, tiene que tomar como origen las coordenadas 144, 223 a partir de la esquina superior izquierda del lienzo.

En las líneas siguientes tenemos la instrucción path d. Path es un comando SVG que se usa para definir una ruta mientras que el atibuto d controla el trazado de esa ruta.

Los parámetros son:

  • M (Move to o mover a): Mueve el cursor a una coordenada sin dibujar nada.
  • L (Line to o línea hasta): Dibuja una línea recta desde donde está el cursor hasta la coordenada que se le indica.
  • H (Horizontal line o línea horizontal): Dibuja una línea recta horizontal, solo cambiando la coordenada x.
  • C (Cubic Bézier curve o curva cúbica de Bézier): Traza una curva suave indicándole el punto de control 1, el punto de control 2 y la coordenada final.
  • Z (Close path o cierre de la ruta): Completa el dibujo trazando una línea recta desde el punto actual hasta el punto de comienzo.

Entre las líneas 103 a 106 sucede lo siguiente:

  1. M-19 4: Mueve el cursor hacia el lugar de comienzo del dibujo. Recuerda que movimos el origen del dibujo con el comando anterior, por lo que las nuevas coordenadas son en relación con el nuevo origen.
  2. C-19-13 -8-26 7-26: Traza una curva hacia arriba y a la derecha; de esta forma, dibuja el lado izquierdo superior de la bombilla.
  3. C22-26 31-14 31 1: Traza la curva que forma la parte superior redondeada o cabeza de la bombilla.
  4. C31 11 26 18 18 25: Esta curva que baja comienza a construir el lado derecho de la bombilla, empezando a estrecharse.
  5. C13 29 12 34 12 38: Dibuja la curva que termina de cerrar el lado derecho.
  6. H-8: Dibuja una línea horizontal hacia el lado izquierdo para trazar la base plana de la bombilla.
  7. C-8 31 -10 28 -15 23: Traza una curva que sube por el lado izquierdo de la base.
  8. C-18 19 -19 13 -19 4: Traza la curva que cerrará el lado izquierdo de la bombilla, retornando casi al punto de partida.
  9. Z: Completa el dibujo trazando una línea recta.
  10. fill=»#e8f8ff» stroke=»#4b9ec9″ stroke-width=»2.5″: Rellena la bombilla con un color azul claro, establece para el borde un color un poco más oscuro y establece el ancho del dibujo en 2,5 píxeles.

A la línea 107 le corresponde dibujar la rosca de la bombilla. Tenemos las siguientes instrucciones:

  1. M-7 39: Ubica el lápiz debajo de la base plana que acabamos de trazar.
  2. H12: Traza una línea horizontal que será la primera rosca del casquillo.
  3. M-5 45: Baja un poco el cursor para trazar la segunda rosca.
  4. H9: Dibuja una línea horizontal más corta para la segunda rosca.

La línea 108 dibuja el filamento de la bombilla. Las instrucciones son:

  1. M-5 8: Mueve el punto de origen del dibujo a una posición adentro de la bombilla.
  2. L2 0: Línea en diagonal hacia arriba a la derecha.
  3. L7 9: Continúa el zigzag trazando una línea diagonal, pero esta vez hacia abajo y hacia la derecha.
  4. L15 0: Completa el zigzag dibujando una línea en sentido diagonal hacia arriba a la derecha.
  5. class=»ln»: Aplica al dibujo trazado estilos que definimos al principio del código.
  6. stroke=»#78909c»: Le da a los filamentos un color gris azulado.
  7. stroke-width=»3″: Establece el ancho de las líneas en 3 píxeles.

Y finalizamos con la línea 169, donde se dibujan los rayos exteriores con las siguientes indicaciones.

M-30-8 L-40-13: Dibuja una línea corta en la esquina superior izquierda apuntando hacia abajo.

M-31 13 L-42 18: Dibuja una línea corta en la esquina inferior izquierda apuntando hacia arriba.

M28-9 L39-14: Dibuja una línea corta en la esquina superior derecha apuntando hacia abajo y a la derecha.

M30 13 L42 18: Dibuja una línea corta en la esquina inferior derecha apuntando hacia abajo y a la izquierda.

En el próximo artículo continuaremos analizando el código de la infografía para entender cómo modificarlo a nuestro gusto.