Scrittura · 11 ago 2025
Willemstagram
Un tabellone 3D a palette con foto che raccontano storie
La settimana scorsa ero seduto con un cliente a guardare la nuova homepage di willem.com, dove uso una narrazione per raccontare quello che faccio. Questo cliente è una delle menti creative e visionarie migliori che conosca, eppure il mio testo non sembrava parlargli. Riflettendoci, mi sono ricordato di un'importante lezione di psicologia dell'università: mi serviva qualcosa di diverso, qualcosa di non lineare. Questo articolo parla di come dare un pugno visivo!
Pensiero emisfero sinistro contro emisfero destro
Una delle cose belle della mia formazione all'Università di Amsterdam era che seguivamo lezioni di facoltà diverse, un mix interessante di scienza interdisciplinare. Uno dei libri classici di cui abbiamo discusso era "Mintzberg on Management", in cui l'autore spiega perché persone diverse preferiscono cose diverse, la classica dicotomia spesso semplificata come pensatori dell'emisfero sinistro contro pensatori dell'emisfero destro:
- Il pensatore lineare (emisfero sinistro): è lo stato naturale di chi apprezza una narrazione logica che procede da A a B a C. Tipi così sono narratori, architetti e programmatori.
- Il pensatore non lineare (emisfero destro): è lo stato di chi non segue una linea retta. Cerca impressioni, atmosfere e sensazioni emotive. Tipi così sono i creativi, tra cui artisti e pensatori visionari.
La mia nuova homepage di willem.com funzionava bene per i pensatori lineari come me: la narrazione basata sul testo si adatta all'emisfero sinistro. Ma il mio design lasciava a desiderare per chi si trova meglio con impressioni non lineari, piene di atmosfera. Mi serviva qualcosa che mostrasse le tante immagini in modo ricco e dinamico, vivo e con una sana dose di divertimento interattivo.
Il tabellone Solari
Molto tempo fa ho conosciuto mia moglie alla stazione di Utrecht Centraal, proprio sotto il gigantesco tabellone delle partenze. L'iconico tabellone blu di 7x4,20 metri, del peso di circa 3000 chili, aveva pannelli meccanici a palette che producevano un suono inconfondibile, che nella hall centrale della stazione sentivi più o meno ogni minuto. Questo tipo di display viene spesso chiamato "tabellone Solari", dal nome della Solari di Udine, l'azienda italiana che produceva queste icone. Oggi la stazione di Utrecht ha display informativi digitali, ma se vuoi puoi ancora vederlo nello Spoorwegmuseum, il museo delle ferrovie.
Da appassionato di metafore (consiglio di lettura: Metaphors we live by), ho pensato che il tabellone Solari, con il suo "flip-flap", sarebbe stato un modo delizioso per permettere ai visitatori di willem.com di "partire" verso varie "destinazioni" (le storie) del sito. Invece del testo, ho scelto di proposito le foto e le immagini dentro gli articoli del blog come porte d'accesso alla sezione approfondimenti di willem.com. Rivelando nuove destinazioni a caso, il tutto è perfettamente non lineare, e rendendolo interattivo (si può cliccare e toccare) coinvolge più del semplice testo. Ogni destinazione apre un "biglietto" che spiega un po' che cosa stai guardando. Se ti piace quello che vedi, premi il grande pulsante per aprire la storia esattamente nel punto dell'immagine, che può trovarsi anche a metà di un articolo. Le storie si aprono in nuove finestre del browser, così puoi tornare alla "stazione" per cercare una nuova destinazione.
Implementazione: ThreeJS e un'API di immagini su misura
In passato ho sperimentato con il motore grafico 3D ThreeJS per visualizzare i dati degli allenamenti. È una libreria che usa l'elemento standard HTML5 canvas per produrre grafica generata con il calcolo spaziale, un modo elegante per dire che ti permette di disegnare in tre dimensioni (x, y, z) invece di due, da cui il nome. Offre controlli per camera, luci e nebbia ed è pensata per animazioni basate su posizione e rotazione simulate. È divertente da usare e molto capace. Guarda questi due articoli precedenti sui miei esperimenti con ThreeJS:
Il minimalista che è in me ha considerato per un attimo le animazioni, le trasformazioni e le transizioni CSS. Ma ho pensato che la prospettiva realistica, in cui i pannelli più esterni ruotano in modo più inclinato, e la casualità nella scelta delle nuove immagini avrebbero richiesto comunque JavaScript. Per sfruttarlo al massimo volevo integrarlo direttamente nella mia homepage. Ma caricare un intero motore 3D non è una cosa da prendere alla leggera. Per ridurre al minimo l'effetto sul tempo di caricamento della homepage, l'ho progettato con cura in modo che si carichi in modo asincrono e sia del tutto opzionale (per chi ha JS disattivato).
Per alimentare il "Visual Journal" ho progettato un'API su misura che serve immagini altamente ottimizzate, scalate a 400x400px. Ogni immagine ha un titolo localizzato e un deeplink con un'ancora hashtag (slug), che permette di tuffarsi nelle storie. Per l'infrastruttura necessaria mi affido alla mia piattaforma lemmid. In background un servizio NodeJS ottimizzato genera le immagini con imagemagick, jpegoptim e pngquant. Puoi provare l'API tu stesso su https://willem.com/en/images.json, che restituisce un array JSON come questo:
[
{
"url": "/it/2020-07-30_portare-un-imac-5k-da-27-pollici-a-14-terabyte/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": "/it/2020-07-30_portare-un-imac-5k-da-27-pollici-a-14-terabyte/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
},
{
"url": "/it/2019-06-25_montare-una-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": "/it/2019-06-25_montare-una-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
},
{
"url": "/it/2021-01-14_abbandono-il-mio-sistema-operativo-per-tablet/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": "/it/2021-01-14_abbandono-il-mio-sistema-operativo-per-tablet/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
},
...
]
Per evitare che fosse solo un generatore casuale di link, ho messo di proposito un piccolo popup che appare quando tocchi o clicchi un'immagine. Uso le didascalie delle immagini che il mio lemmid content manager gestisce per mostrare qualche informazione, così puoi decidere se vale la pena aprire la storia.
Rilascio del codice sorgente (AGPL)
Sono molto contento di come funziona il Visual Journal sul mio sito, ma credo fermamente nella condivisione. È probabile che tu abbia un'idea ancora migliore per un tabellone a palette. Per questo rilascio tutto come software libero sotto la GNU Affero General Public License (AGPL). Significa che puoi usarlo, modificarlo e distribuirlo da solo. Trovi il codice sorgente, il readme e i file di esempio su https://source.willem.com/visual-journal/
Conclusione
A giudicare da come cattura la curiosità dei miei figli, sono molto contento del Visual Journal, che per scherzo ho battezzato Willemstagram. Ma a differenza dell'Instagram di Meta, serve solo immagini per raccontare le mie storie e il suo sorgente è libero. Puoi vederlo sulla homepage o premendo il pulsante qui sotto. Quale destinazione sceglierai?
Questo testo è stato scritto a mano. In un'epoca di testi generati dall'IA, è il mio modo semplice di mostrare il pensiero e l'impegno umano dietro queste parole. Per i curiosi, il manoscritto originale (in inglese) è disponibile per il download.
Questo testo è stato scritto a mano. In un'epoca di testi generati dall'IA, il manoscritto originale (PDF) mostra il pensiero e la fatica umani dietro queste parole.