Aug. 11, 2025

Willemstagram

Un panel de fotos 3D que revela historias

La semana pasada estuve con un cliente mirando la nueva página de inicio de willem.com, donde utilizo una narrativa para contar las cosas que hago. Este cliente es uno de los mejores pensadores creativos y visionarios, pero mi texto no pareció conectar con él. Pensando en esto, recordé una importante lección de psicología de la Universidad: necesitaba algo diferente, algo no lineal. ¡Este post trata sobre dar un golpe de efecto visual!

Pensamiento del hemisferio izquierdo frente al derecho

Una de las cosas geniales de mi formación en la Universidad de Ámsterdam fue que recibimos clases de diferentes facultades, formando una interesante mezcla de ciencia interdisciplinaria. Un libro clásico que discutimos fue "Mintzberg on Management", en el que el autor explica por qué diferentes personas prefieren diferentes cosas, la clásica dicotomía a menudo simplificada como pensadores del hemisferio izquierdo frente al derecho:

• El pensador lineal (el cerebro izquierdo): Este es el estado natural de las personas que aprecian una narrativa lógica que se construye de A a B a C. Personas típicas de este tipo son los narradores, arquitectos y programadores.
• El pensador no lineal (el cerebro derecho): Este es el estado de las personas que no siguen una línea recta. Escanean en busca de impresiones, sensaciones y conclusiones emocionales. Personas típicas de este tipo son las creativas, incluyendo artistas y pensadores visionarios.

Mi nueva página de inicio de willem.com funcionaba bien para los pensadores lineales como yo, la narrativa basada en texto se adapta al cerebro izquierdo. Pero, mi diseño se quedaba corto para las personas que se desenvuelven mejor con impresiones no lineales y llenas de ambiente. Necesitaba algo que expusiera los muchos elementos visuales de una manera rica y dinámica, viva y con una buena dosis de diversión interactiva.

Tablero Solari

Hace muchas lunas conocí a mi esposa en la Estación Central de Utrecht, justo debajo del gigantesco panel de información de salidas. El icónico panel de información azul de 7x4,20 metros, que pesaba alrededor de 3000 kilos, contaba con paneles mecánicos que giraban produciendo un sonido reconocible que se oía cada minuto aproximadamente en el vestíbulo central de la estación. Este tipo de pantalla de señalización se suele llamar "Tablero Solari", en honor a Solari di Udine, la empresa italiana que produjo estos iconos. Hoy en día, la estación de Utrecht cuenta con pantallas de información digitales, pero si quieres, todavía puedes verlo en Het Spoorwegmuseum.

Como aficionado a las metáforas (consejo de libro: Metaphors we live by), pensé que el Tablero Solari, con su "giro y cambio", sería una forma encantadora de permitir a los visitantes de willem.com "partir" hacia varios "destinos" (las historias) en el sitio. En lugar de usar texto, elegí deliberadamente usar las fotos y los elementos visuales de las entradas del blog como puertas de entrada a la sección de reflexiones. Al revelar aleatoriamente nuevos destinos, esto es perfectamente no lineal y, al hacerlo interactivo (se puede hacer clic y tocar), es más atractivo que el texto plano. Cada destino abre un "billete" que explica un poco lo que estás viendo. Si te gusta lo que ves, puedes pulsar el botón grande para abrir la historia justo en la posición de la imagen, que podría estar a mitad de una entrada de blog. Las historias se abren en nuevas ventanas del navegador, lo que te permite volver a la "estación" para encontrar un nuevo destino.

Implementación: ThreeJS y una API de imágenes personalizada

Anteriormente experimenté con el motor gráfico 3D ThreeJS para visualizar datos de entrenamiento. Es una biblioteca que utiliza el elemento estándar de HTML5 canvas para generar gráficos mediante computación espacial, una forma elegante de decir que te permite dibujar cosas en tres dimensiones (x, y, z) en lugar de dos, de ahí su nombre. Proporciona controles de cámara, luz y niebla y está diseñado para permitir animaciones basadas en la posición y rotación simuladas. Es bastante genial para jugar y muy capaz. Mira estas dos entradas anteriores sobre mis experimentos con ThreeJS:

El minimalista que hay en mí consideró brevemente usar animaciones, transformaciones y transiciones de CSS. Pero pensé que la perspectiva realista, donde los paneles más externos giran más inclinados, y la aleatoriedad en la selección de nuevas imágenes requerirían de todos modos el uso de JavaScript. Para maximizar su valor, quise integrarlo directamente en mi página de inicio. Pero, cargar un motor 3D completo no es algo que deba tomarse a la ligera. Para minimizar sus efectos en el tiempo de carga de la página de inicio, lo diseñé cuidadosamente para que se cargue de forma asíncrona y sea totalmente opcional (para personas con JS desactivado).

Para alimentar el "Diario Visual", diseñé una API personalizada que sirve imágenes altamente optimizadas y escaladas a 400x400px. Cada imagen tiene un título localizado y un enlace profundo con un ancla de hashtag (slug), lo que permite sumergirse en las historias. Me apoyo en mi propia plataforma lemmid para que me proporcione la infraestructura necesaria para llevar esto a cabo. En segundo plano, un servicio optimizado de NodeJS genera las imágenes utilizando imagemagick, jpegoptim y pngquant. Puedes consultar la API tú mismo en https://willem.com/es/images.json, que devuelve un array JSON como este:

[
  {
    "url": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
    "title": "An average fly is bigger than most screws inside the iMac",
    "target": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
  },
  {
    "url": "/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
    "title": "Using filler plates to make up for Chinese Precision",
    "target": "/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
  },
  {
    "url": "/en/2021-01-14_abandoning-my-own-tablet-os/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
    "title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
    "target": "/en/2021-01-14_abandoning-my-own-tablet-os/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
  },
  ...
]

Para evitar que esto sea solo un generador de enlaces aleatorios, he incluido deliberadamente una pequeña ventana emergente cuando tocas o haces clic en cualquier elemento visual. Utilizo los pies de foto que mantiene mi gestor de contenidos lemmid para revelar un poco de información que te permita decidir si crees que vale la pena abrir la historia.

Publicando el código fuente (AGPL)

Aunque estoy muy contento con cómo funciona el Diario Visual en mi sitio, creo firmemente en compartir. Es probable que tengas una idea aún mejor para algún panel giratorio tipo Solari. Por lo tanto, publico todo el proyecto como software libre/libre bajo la Licencia Pública General Affero de GNU (AGPL). Eso significa que puedes usarlo, modificarlo y distribuirlo tú mismo. Encuentra el código fuente, el readme y los archivos de ejemplo en https://source.willem.com/visual-journal/

Conclusión

A juzgar por cómo cautiva la curiosidad de mis hijos, estoy muy contento con el diario visual, al que en broma he apodado Willemstagram. Pero a diferencia del Instagram de Meta, este solo sirve imágenes para contar mis historias y su fuente es libre. Puedes echarle un vistazo en la página de inicio o pulsando el botón de abajo. ¿Qué destino elegirás?

Willemstagram

Esto fue escrito a mano. En una era de texto generado por IA, esta es mi forma sencilla de mostrar el pensamiento y el esfuerzo humano detrás de estas palabras. Para quienes sientan curiosidad, el manuscrito original (en inglés) está disponible para su descarga.

Manuscrito (PDF)