Willemstagram

Resumen

La semana pasada estuve con un cliente mirando la nueva página de inicio de willem.com, donde uso una narrativa para contar lo que hago. Este cliente es uno de los mejores pensadores creativos y visionarios que conozco, y aun así mi texto no parecía llegarle. Dándole vueltas, recordé una lección importante de psicología de la universidad: necesitaba algo diferente, algo no lineal. ¡Este artículo trata de dar un golpe visual!

Texto completo

Pensamiento del hemisferio izquierdo frente al derecho

Una de las cosas geniales de mi formación en la Universidad de Ámsterdam fue que recibíamos clases de distintas facultades, lo que formaba una mezcla interesante de ciencia interdisciplinar. Un libro clásico que comentamos fue "Mintzberg on Management", en el que el autor explica por qué personas distintas prefieren cosas distintas, la dicotomía clásica que a menudo se simplifica como pensadores del hemisferio izquierdo frente a los del derecho:

• El pensador lineal (el hemisferio izquierdo): es el estado natural de las personas que aprecian una narrativa lógica que va de A a B y a C. Personas típicas de este tipo son los narradores, los arquitectos y los programadores.
• El pensador no lineal (el hemisferio derecho): es el estado de las personas que no siguen una línea recta. Buscan impresiones, sensaciones y conclusiones emocionales. Personas típicas de este tipo son la gente creativa, incluidos artistas y pensadores visionarios.

Mi nueva página de inicio de willem.com funcionaba bien para pensadores lineales como yo: la narrativa basada en texto encaja con el hemisferio izquierdo. Pero mi diseño se quedaba corto para quienes se mueven mejor con impresiones no lineales, llenas de ambiente. Necesitaba algo que mostrara los muchos elementos visuales de una forma rica y dinámica, viva y con una buena dosis de diversión interactiva.

Tablero Solari

Hace muchas lunas conocí a mi mujer en la estación central de Utrecht, justo debajo del gigantesco panel de información de salidas. Aquel icónico panel azul de 7 x 4,20 metros, que pesaba unos 3000 kilos, tenía láminas mecánicas que se volteaban y producían un sonido inconfundible, que se oía más o menos cada minuto en el vestíbulo central de la estación. A este tipo de panel de señalización se le suele llamar "tablero Solari", por Solari di Udine, la empresa italiana que fabricaba estos iconos. Hoy la estación de Utrecht tiene pantallas digitales, pero si quieres todavía puedes verlo en Het Spoorwegmuseum.

Como aficionado a las metáforas (libro recomendado: Metaphors we live by), pensé que el tablero Solari, con su ruido de láminas que se voltean, sería una forma encantadora de dejar que los visitantes de willem.com "salgan" hacia distintos "destinos" (las historias) del sitio. En lugar de usar texto, elegí a propósito las fotos y los elementos visuales de los artículos del blog como puertas de entrada a la sección de reflexiones de willem.com. Al revelar destinos nuevos de forma aleatoria, es perfectamente no lineal, y al ser interactivo (se puede hacer clic y tocar) resulta 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 el punto de la imagen, que puede estar a mitad de un artículo. Las historias se abren en ventanas nuevas del navegador, así que puedes volver a la "estación" para buscar otro destino.

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

Hace un tiempo experimenté con el motor gráfico 3D ThreeJS para visualizar datos de entrenamiento. Es una biblioteca que usa el elemento estándar canvas de HTML5 para sacar gráficos generados con 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. Ofrece controles de cámara, luz y niebla, y está pensada para animaciones basadas en una posición y una rotación simuladas. Es divertida para trastear y bastante potente. Mira estos dos artículos anteriores sobre mis experimentos con ThreeJS:

El minimalista que llevo dentro consideró un momento usar animaciones, transformaciones y transiciones de CSS. Pero me di cuenta de que la perspectiva realista, en la que los paneles más externos giran más inclinados, y la aleatoriedad al elegir imágenes nuevas me obligarían a usar JavaScript de todos modos. Para sacarle el mayor partido quería integrarlo directamente en mi página de inicio. Pero cargar un motor 3D completo no es algo para tomarse a la ligera. Para que afecte lo menos posible al tiempo de carga de la página de inicio, lo diseñé con cuidado para que se cargue de forma asíncrona y sea totalmente opcional (para quien tenga JS desactivado).

Para alimentar el "Diario Visual" diseñé una API propia que sirve imágenes muy optimizadas, escaladas a 400x400px. Cada imagen tiene un título localizado y un enlace profundo con un ancla de hashtag (slug), que permite sumergirse en las historias. Para la infraestructura necesaria me apoyo en mi propia plataforma lemmid. En segundo plano, un servicio optimizado de NodeJS genera las imágenes con imagemagick, jpegoptim y pngquant. Puedes ver la API tú mismo en https://willem.com/en/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 que no sea solo un generador de enlaces al azar, le añadí a propósito una pequeña ventana emergente que aparece al tocar o hacer clic en cualquier imagen. Uso los pies de foto que mantiene mi gestor de contenidos lemmid para mostrar un poco de información que te ayude a decidir si merece 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 muy posible que tengas una idea aún mejor para otro tablero Solari de láminas giratorias. Por eso publico todo el proyecto como software libre bajo la Licencia Pública General de GNU Affero (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 código es libre. Puedes verlo en la página de inicio o pulsando el botón de abajo. ¿Qué destino elegirás?

[action1]

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

[download1]