ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Parece que después de años de espera, JPEG XL empieza a tener una oportunidad real en la web.

Mozilla ha anunciado su intención de activar JPEG XL por defecto en Firefox, con el objetivo de llevarlo a la versión 157, prevista para finales de septiembre. Y lo interesante es que Chromium también ha iniciado su propio proceso para activar el formato. Safari, por su parte, ya lleva tiempo soportándolo desde Safari 17.

¿Y por qué importa tanto?

Porque JPEG XL no es simplemente otro formato de imagen para sustituir al JPG. Está pensado para conseguir archivos más pequeños manteniendo una buena calidad, algo especialmente interesante para páginas web donde cada KB cuenta. Además, incorpora características como HDR, transparencia, animación y, sobre todo, renderizado progresivo: una imagen puede empezar a mostrarse mientras todavía se está descargando.

Para diseñadores y desarrolladores web esto puede ser bastante interesante. Imágenes más ligeras significan menos transferencia de datos, mejores tiempos de carga y, potencialmente, mejores Core Web Vitals.

También tiene una característica bastante curiosa: puede comprimir imágenes JPEG existentes de forma reversible. Es decir, puedes convertir un JPEG a JPEG XL y recuperar posteriormente el JPEG original sin pérdida. Esto lo convierte también en una opción interesante para almacenamiento y archivo.

El problema de JPEG XL hasta ahora no ha sido precisamente la tecnología, sino el soporte de los navegadores. Chrome eliminó inicialmente el soporte y durante años el formato quedó en una especie de limbo. En 2026 Chromium recuperó el decodificador detrás de una opción experimental y Firefox también ha ido avanzando con su implementación.

Ahora la situación empieza a cambiar de verdad.

Si Chrome y Firefox terminan activándolo por defecto, JPEG XL pasará de ser ese formato que conocían principalmente los aficionados a la imagen y los desarrolladores a convertirse en una alternativa real para las páginas web.

Eso sí: todavía no es momento de borrar WebP o AVIF de tus proyectos. La compatibilidad sigue evolucionando y, mientras no exista una cobertura amplia, lo sensato es utilizar JPEG XL como una opción adicional y mantener un formato alternativo para navegadores que no lo soporten.

Pero la noticia es buena. Después de mucho tiempo dando vueltas, JPEG XL parece que por fin puede tener aquello que necesitaba para despegar: que los principales navegadores lo activen de serie.

Y si eso ocurre, el viejo JPG podría empezar a tener, por fin, un sucesor de verdad.

https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/

#JPEGXL #JPEG #DiseñoWeb #DesarrolloWeb #Programación #WebPerformance #Frontend #WebDesign #OptimizaciónWeb #Imágenes #Firefox #Chrome #Safari #CoreWebVitals

Google quiere que Gemini se convierta en algo más que un chatbot para estudiantes. En su propuesta Gemini for Students, la IA se utiliza como una especie de compañero de estudio capaz de trabajar directamente con tus propios apuntes, temarios y materiales de clase.

Una de las funciones más interesantes son los Study Notebooks, que permiten subir material de una asignatura y convertirlo en planes de estudio, resúmenes, cuestionarios personalizados o herramientas para preparar un examen. También puedes pedirle que te explique un problema paso a paso, revise tus cálculos o te dé feedback sobre un trabajo.

Y aquí viene la parte llamativa: Google ofrece un año gratuito de Google AI Pro para estudiantes que cumplan los requisitos. El plan incluye límites de uso 4 veces superiores en Gemini, 5 TB de almacenamiento, Gemini Spark y acceso a Gemini Omni durante un año.

Para quienes estudian diseño, programación o cualquier disciplina técnica puede resultar especialmente útil. Puedes trabajar con documentación, pedir explicaciones de conceptos complicados, generar material de estudio o utilizar las capacidades visuales de Gemini para entender mejor determinados contenidos.

En definitiva, si eres estudiante y puedes acceder a la promoción, es una de esas ofertas de IA que merece la pena probar antes de que se acabe.

Ver Gemini para estudiantes

Tags

#Gemini #GoogleGemini #GoogleAI #InteligenciaArtificial #IA #Estudiantes #Educacion #DiseñoGrafico #Programacion #Tecnologia #AI #Productividad #GoogleAIPro

Si te gustan las interfaces limpias, ordenadas y con ese aspecto de «todo está en su sitio», esta skill para Cursor te puede interesar bastante.

Scandinavian Design sirve para aplicar automáticamente un sistema visual inspirado en el diseño escandinavo a un proyecto web. La idea es sencilla: quitar ruido visual y conseguir una interfaz mucho más limpia, con una base en blanco y negro, tipografías sans-serif, espacios generosos y un uso más cuidado de las imágenes.

Vamos, llevar un poco de ese estilo IKEA al desarrollo web. 😄

Lo interesante es que no se limita a decirle a la IA «hazlo minimalista». La skill está pensada para trabajar sobre un código existente y rediseñar su aspecto visual. El repositorio incluye además diez demos utilizadas para probar y corregir el resultado tanto en escritorio como en móvil.

Para instalarla solo tienes que ejecutar:

npx skills add ericzakariasson/scandinavian-design

Después puedes invocar /scandinavian-design sobre la superficie que quieras rediseñar.

Puede ser especialmente útil cuando tienes una web funcional pero visualmente demasiado cargada y quieres darle una vuelta rápida sin empezar el proyecto desde cero.

Eso sí, minimalismo no significa simplemente poner todo blanco y quitar elementos. Lo interesante está en conseguir que la jerarquía visual, los espacios, la tipografía y las imágenes trabajen juntos para que la interfaz respire.

Una herramienta bastante curiosa para quienes estamos utilizando IA para acelerar el diseño y desarrollo de interfaces.

Ver Scandinavian Design en GitHub

#DiseñoWeb #DiseñoMinimalista #ScandinavianDesign #Cursor #IA #InteligenciaArtificial #WebDesign #Frontend #Programacion #UX #UI #GitHub #DesarrolloWeb

Encontrar una buena tipografía puede cambiar por completo un diseño. A veces no necesitas complicarte con composiciones imposibles ni llenar el proyecto de recursos gráficos: una fuente bien elegida puede hacer prácticamente todo el trabajo.

Esta colección reúne varias tipografías modernas con estilos diferentes, pero con algo en común: funcionan especialmente bien cuando buscamos diseños actuales, limpios y con personalidad.

Son fuentes que pueden encajar perfectamente en proyectos de branding, diseño editorial, carteles, redes sociales, presentaciones o páginas web. Algunas pueden funcionar como protagonistas de un diseño, mientras que otras son más interesantes para titulares, logotipos o pequeños detalles que necesitan destacar.

Una de las ventajas de trabajar con tipografías de este estilo es que permiten conseguir un aspecto contemporáneo sin caer necesariamente en el típico diseño minimalista que parece hecho con la misma plantilla de siempre. Cambiar el peso, el tamaño, el espaciado entre letras o combinar una tipografía llamativa con otra más sencilla puede dar resultados muy diferentes.

Y aquí está la gracia: no se trata simplemente de descargar muchas fuentes y tenerlas instaladas en el ordenador. Lo interesante es aprender a elegir la tipografía adecuada para cada proyecto.

Una fuente geométrica puede transmitir tecnología y precisión, mientras que una tipografía más experimental puede aportar personalidad y convertirse prácticamente en el elemento principal de la composición. También podemos jugar con mayúsculas, tamaños exagerados y mucho espacio en blanco para conseguir ese aspecto editorial que tanto se está utilizando actualmente.

Si trabajas habitualmente con Photoshop, Illustrator, Figma, Canva o cualquier otra herramienta de diseño, tener una pequeña colección de buenas tipografías modernas puede ahorrarte bastante tiempo cuando necesitas encontrar rápidamente una fuente que funcione.

Eso sí, antes de utilizarlas en un proyecto comercial conviene revisar siempre la licencia de cada tipografía. Que una fuente pueda descargarse gratis no significa necesariamente que pueda utilizarse libremente en trabajos comerciales.

En definitiva, una buena colección de fuentes no consiste en tener cientos de tipografías que nunca vas a utilizar. Consiste en encontrar aquellas que realmente pueden aportar algo a tus diseños y saber cuándo utilizarlas.

kanile

Bino Fimenk

Zegion

Regaris

Kovela

#Tipografias #Fuentes #Tipografia #DiseñoGrafico #Diseño #GraphicDesign #Typography #Fonts #DiseñoWeb #Branding #Figma #Illustrator #Photoshop #RecursosDeDiseño #DiseñoDigital

Se acabó el piloto automático, gracias al piloto automático.

Claude Code tiene un modo llamado Auto Mode que, básicamente, permite que Claude deje de preguntarte cada dos minutos si puede hacer algo.

¿Puedo abrir este archivo? Sí/No.
¿Puedo modificar este script? Sí/No.
¿Puedo ejecutar este comando? Sí/No.

Cuando activas Auto Mode, Claude puede tomar esas decisiones de forma automática. Pero aquí viene la parte interesante: no está completamente solo. Hay un agente clasificador que analiza las acciones y determina si pueden ser destructivas o peligrosas.

Hasta ahora, en modo manual, la última palabra la tenías tú. Con Auto Mode, la tiene otro agente.

Y a partir del 14 de agosto, Auto Mode llegará activado por defecto en las sesiones Pro, Max y Team.

¿Y por qué dice Anthropic que automatizar las aprobaciones puede ser más seguro?

Porque hay un pequeño problema con los humanos: nos cansamos.

Si Claude te pregunta constantemente «¿puedo hacer esto?», llega un momento en el que tu cerebro entra en modo automático y empiezas a responder que sí sin leer realmente qué está haciendo.

Sí.
Sí.
Sí.
Sí.

Es exactamente lo mismo que hacemos con las políticas de privacidad y los términos y condiciones. Nadie los lee. Ves el botón, pulsas «Aceptar» y a otra cosa.

Anthropic ha puesto números al asunto. En una prueba con más de 1.053 testers profesionales, solo el 13,6 % consiguió detectar un comando peligroso, mientras que el agente clasificador lo identificó en el 89 % de los casos.

Y aquí está lo realmente interesante.

La discusión no es simplemente si debemos confiar más o menos en la IA. Es si tiene sentido mantener a una persona tomando decisiones de seguridad que, después de cientos de confirmaciones, probablemente acabará aceptando sin mirar.

Porque un «sí» humano dado por pura inercia tampoco es precisamente un mecanismo de seguridad.

La lectura importante para quienes trabajamos con IA es bastante sencilla: si vas a supervisar a un agente, supervisa de verdad. Lee lo que hace, entiende las consecuencias y presta atención.

Pero si sabes que después de 200 confirmaciones vas a empezar a pulsar «sí» como un NPC, quizá sea mejor delegar esas decisiones en un sistema especializado.

Eso sí: un agente también puede equivocarse.

Así que el futuro no parece ser «la IA lo hace todo y nosotros miramos». Más bien parece ser decidir qué merece nuestra atención y qué podemos dejar que la IA gestione por nosotros.

Y eso sí que tiene bastante más sentido que pasarnos el día pulsando «Sí, Claude, hazlo».

#Claude #ClaudeCode #Anthropic #AutoMode #InteligenciaArtificial #IA #Programación #DesarrolloSoftware #AgentesIA #AIcoding

Qué ocurre cuando mezclas a Chostakóvich, una horda de soldados surgida de las tinieblas y una animación visualmente espectacular? El resultado es DANSE MACABRE, un cortometraje dirigido por Hisko Hulsing que convierte la guerra en una auténtica pesadilla visual.

Durante sus cinco minutos, el corto nos mete de lleno en un desfile de violencia, batallas y destrucción. La música de Dmitri Chostakóvich acompaña las imágenes como si fuera una marcha inevitable hacia el caos. Y lo interesante es que no habla únicamente de guerras del pasado: la película busca representar también los conflictos actuales y los que todavía están por llegar.

Pero si algo llama especialmente la atención desde el punto de vista del diseño y la animación es su técnica. Más de 80 personas, repartidas entre cuatro estudios de animación, trabajaron para crear estas imágenes combinando pintura al óleo, rotoscopia, animación 2D y 3D. Una mezcla poco habitual que consigue un acabado oscuro, pictórico y muy físico.

El resultado parece por momentos un cuadro en movimiento, pero también tiene la energía de una superproducción de animación. Una demostración de cómo diferentes técnicas pueden combinarse para conseguir una identidad visual muy potente.

DANSE MACABRE es una de esas piezas que merece la pena ver no solo por lo que cuenta, sino por cómo está hecha. Y hay tiempo para hacerlo: el cortometraje está disponible hasta el 24 de agosto de 2026.

#DANSEMACABRE #Animación #Animation #HiskoHulsing #Cine #Cortometraje #Diseño #Arte #Rotoscopia #Animación2D #Animación3D #PinturaAlÓleo #Guerra

Diseñar una interfaz en una herramienta y después pasarla al desarrollador siempre ha tenido un pequeño problema: el diseño y el código viven en mundos distintos. pen.dev propone eliminar ese salto y poner el diseño directamente donde ya estamos programando.

La idea es bastante sencilla y, a la vez, muy interesante: pen.dev es un canvas de diseño basado en IA que vive dentro del entorno de desarrollo. El proyecto se guarda en el propio código y permite trabajar con el diseño y la implementación prácticamente uno al lado del otro. Actualmente funciona con entornos como Cursor y VS Code, además de otros IDE compatibles.

Aquí entra la parte que más nos interesa si programamos. Puedes diseñar una pantalla o un componente visualmente y después pedirle a la IA que genere el código correspondiente. La documentación muestra ejemplos como convertir un diseño en un componente React, generar una página de Next.js o crear componentes utilizando Tailwind CSS. También permite hacer el camino inverso: llevar código existente al canvas para trabajar sobre él visualmente.

Todo esto se apoya en un formato de diseño abierto basado en archivos .pen, pensado para vivir dentro del propio proyecto. Es decir, el diseño deja de ser un archivo perdido en otra herramienta y pasa a formar parte del workflow de desarrollo.

Y aquí está probablemente lo más interesante de pen.dev: no intenta ser simplemente otro Figma. Su planteamiento es bastante más cercano al de un entorno de programación con capacidades de diseño. La IA puede ayudarte a crear pantallas, explorar diferentes propuestas y trabajar en varios flujos en paralelo.

Además, existe una aplicación de escritorio para Windows, macOS y Linux, extensiones para diferentes IDE y una CLI que permite utilizar las capacidades de diseño asistidas por IA desde el terminal.

¿Va a sustituir a las herramientas tradicionales de diseño? Todavía es pronto para decirlo. Pero el concepto resulta muy interesante: diseñar, programar y utilizar IA dentro del mismo flujo de trabajo, sin estar continuamente exportando diseños, copiando medidas o intentando explicar al desarrollador cómo debería quedar una interfaz.

Para quienes mezclamos diseño gráfico, UI y programación, pen.dev es una herramienta que merece la pena tener en el radar.

Web: pen.dev

#penDev #DiseñoWeb #DiseñoUI #UX #Programacion #IA #InteligenciaArtificial #Frontend #WebDevelopment #React #Cursor #VSCode #DiseñoDigital #DesignToCode #AIDesign

Si te gustan los gradientes pero acabas perdiendo más tiempo buscando una combinación de colores decente que utilizándola en tu proyecto, Gradient Studio merece un vistazo.

Esta herramienta creada por Amit Gajare funciona como un generador de gradientes CSS procedurales. En lugar de ofrecerte simplemente una colección de degradados para copiar, genera nuevas combinaciones y les añade diferentes tratamientos de luz para conseguir fondos bastante más interesantes.

Puedes trabajar con paletas completas, duotono o monocromáticas y después aplicar efectos como mesh glow, aurora, bokeh, film grain, holográfico, prismas, nubes o rayos. Hay más de 24 tratamientos disponibles, así que las posibilidades son bastante amplias.

Lo mejor llega cuando encuentras uno que funciona. Puedes bloquear la paleta, probar diferentes efectos, navegar por el historial de resultados y, cuando lo tengas, copiar directamente el código. Gradient Studio permite exportarlo como CSS, Tailwind o SCSS, por lo que no tienes que reconstruir el gradiente a mano en tu proyecto.

Es especialmente interesante para diseñar fondos de hero sections, landing pages, portfolios, webs de agencias o interfaces en modo oscuro. También puede servir como punto de partida para una identidad visual o simplemente para generar rápidamente una atmósfera visual que luego puedas desarrollar en Figma, Photoshop o tu editor de código.

Además, es gratis, no requiere crear una cuenta y sus gradientes pueden utilizarse tanto en proyectos personales como comerciales.

En resumen, Gradient Studio es una de esas pequeñas herramientas que merece estar en los marcadores de cualquier diseñador web o desarrollador frontend. Generas, ajustas, copias el código y sigues trabajando. Sin complicaciones.

#GradientStudio #Gradientes #CSS #WebDesign #UI #UX #Frontend #TailwindCSS #SCSS #GraphicDesign #WebDevelopment #DesignTools

Si trabajas con JavaScript o TypeScript y necesitas meter gráficos en una aplicación, seguramente ya te hayas encontrado con un montón de librerías que hacen prácticamente lo mismo. TanStack Charts intenta darle otra vuelta al asunto.

El proyecto forma parte del ecosistema TanStack y propone una forma bastante flexible de construir visualizaciones a partir de una especie de “gramática” de gráficos. En lugar de limitarte a configurar un tipo de gráfico concreto, puedes combinar diferentes elementos, escalas e interacciones para crear visualizaciones más personalizadas.

La idea está basada en TypeScript y utiliza primitivas de D3 cuando necesitas funcionalidades más avanzadas. Puedes empezar con gráficos habituales como barras o líneas y, si el proyecto se complica, añadir escalas o algoritmos específicos de D3 sin tener que cambiar completamente de sistema.

Otro punto interesante es que la definición del gráfico es independiente del framework. El mismo gráfico puede utilizarse con React, Vue, Angular, Svelte, Solid, Preact, Lit, Alpine e incluso con JavaScript sin framework. También contempla renderizado mediante SVG y, de forma opcional, Canvas.

Además, no se queda únicamente en pintar barras y líneas. TanStack Charts incorpora responsive design, márgenes automáticos, temas, tooltips, animaciones, interacción, accesibilidad, renderizado en servidor (SSR) y exportación. Es decir, intenta cubrir buena parte de lo que necesitas cuando un gráfico pasa de ser una simple demo a formar parte de una aplicación real.

Eso sí, hay una advertencia importante: TanStack Charts 0.6.5 está actualmente en fase pre-alpha y su API puede cambiar, por lo que sus propios responsables indican que todavía no está preparado para producción.

Aun así, es un proyecto muy interesante para seguir de cerca, especialmente si trabajas con TypeScript y necesitas visualizaciones que vayan más allá del típico gráfico de barras. Y si ya conoces el ecosistema TanStack, merece la pena echarle un vistazo.

Puedes consultar el código en GitHub de TanStack Charts y la documentación oficial en TanStack Charts.

#TanStack #TanStackCharts #TypeScript #JavaScript #D3js #DataVisualization #DataViz #WebDevelopment #Frontend #React #Angular #Vue #Svelte #WebDesign #Programming

Copiar un diseño puede salir muy caro. Y no hablamos solo de la reputación, sino también del bolsillo. El Ayuntamiento de Don Benito ha sido condenado a pagar 6.500 euros al diseñador Francisco Javier Torres tras considerar la Justicia que el cartel utilizado para promocionar su Carnaval de 2025 era, en esencia, un plagio del cartel que el artista creó para el Carnaval de Santa Cruz de Tenerife en 2016.

La sentencia, que salió hace unos días, deja claro que cambiar algunos colores, modificar el fondo o añadir pequeños detalles no convierte una obra copiada en una creación original. Lo importante es la composición, la idea visual y los elementos que hacen reconocible el trabajo del autor. En este caso, el tribunal concluyó que las diferencias eran superficiales y que el diseño mantenía la estructura y personalidad de la obra original.

Además de la indemnización, el Ayuntamiento deberá retirar el cartel, destruir las copias existentes y publicar la resolución judicial. Un desenlace que refuerza algo que muchos diseñadores llevan años reclamando: el trabajo creativo está protegido por la Ley de Propiedad Intelectual y utilizar una obra ajena sin permiso puede tener consecuencias legales importantes.

Lo curioso es que las propias bases del concurso del Carnaval de Don Benito exigían expresamente que las obras presentadas fueran originales y no supusieran copia o plagio de trabajos de otros autores.

Este caso también sirve para recordar que, en plena era de la inteligencia artificial, los bancos de imágenes y las referencias constantes en internet, inspirarse no significa copiar. Tomar ideas es parte del proceso creativo, pero reproducir una obra con cambios mínimos sigue siendo plagio. La creatividad no consiste en cambiar el color de un dibujo, sino en aportar una propuesta propia.

#DiseñoGráfico #Plagio #PropiedadIntelectual #DerechosDeAutor #Creatividad #Diseño #Carnaval #Carteles #Branding #Diseñadores

Fuente: graffica