Willemstagram

Resumen

Siman pasá mi a sinta ku un kliente ta wak e homepage nobo di willem.com, kaminda mi ta usa un relato pa konta tokante e kosnan ku mi ta hasi. E kliente aki ta un di e mihó pensadónan vishonario i kreativo ku tin, ainda mi testo no tabata papia ku dje. Ora mi a pensa tokante esaki, mi a kòrda un lès importante di sikologia for di Universidat: mi tabata mester di algu diferente, algu no lineal. E artíkulo aki ta trata di duna un golpi visual!

Teksto kompleto

Pensamentu di Lado Robes versus Lado Drechi

Un di e kosnan kla di mi estudio na Universidat di Amsterdam tabata ku nos tabata haña klas di diferente fakultat, formando un mishi interesante di siensia interdisiplinario. Un buki klásiko ku nos a diskutí tabata "Mintzberg on Management", kaminda e outor ta splika pakiko diferente hende ta prefer diferente kos. E dikotomia klásiko ei ta wòrdu simplifiká hopi bes komo pensadó di servi robes versus pensadó di servi drechi:

• E pensadó lineal (servi robes): Esaki ta e kondishon natural di hende ku ta apresiá un relato lógiko ku ta konstruí for di A pa B pa C. Hende típiko manera esaki ta kontadó di storia, arkitekto i programadó.
• E pensadó no lineal (servi drechi): Esaki ta e kondishon di hende ku no ta sigui un liña drechi. Nan ta skan pa impreshon, vibe i sintimentu ku nan ta kasha. Hende típiko manera esaki ta hende kreativo, inkluso artista i pensadó vishonario.

Mi homepage nobo di willem.com a funshoná bon pa pensadó lineal manera mi: e relato basá riba testo ta bon pa servi robes. Pero mi desèño tabata falta pa hende ku ta traha mihó ku impreshon no lineal, ku vibe. Mi tabata mester di algu ku ta eksponé e hopi imágen ku tin den un manera rikí i dinámiko, bibu, ku un dosis saludabel di plaser interaktivo.

Solari Board

Hopi luna pasá mi a konosé mi spos na Utrecht Centraal Station, mes bou di e tablèr gigante di informashon di salida. E tablèr azul ikóniko di 7x4,20M, ku ta pesa mas o menos 3000 kilo, tabatin panel mekániko ku tabata lanta i kai i ku tabata produsi un son ku bo ta rekonosé, ku bo tabata tende kada minüt mas o menos den e sala sentral di e stashon. E tipo di display aki ta wòrdu yamá hopi bes un "Solari Board", nómber di Solari di Udine, e kompania italiano ku a produsí e ikonnan aki. Awendia e stashon di Utrecht tin display digital di informashon, pero si bo ke, bo por wak e original ainda den Het Spoorwegmuseum.

Komo un aficionado di metáfora (konseho di buki: Metaphors we live by), mi a pensa ku e Solari Board, ku su "lanta-i-kai", lo ta un manera bunita pa laga bisitante di willem.com "sali" pa diferente "destinashon" (e storia nan) riba e website. Na lugá di usa testo, mi a skohe di manera deliberá pa usa e foto i e visual ku tin den e artíkulo di blog komo entrada pa e seshon di insights riba willem.com. Ora destinashon nobo ta aparesé di manera aleatorio, esaki ta perfekto no lineal, i ora mi hasi e interaktivo (por klik i por tuch) e ta mas atraktivo ku testo simpel. Kada destinashon ta habri un "tiket" ku ta splika un poko kiko bo ta wak. Si bo gusta loke bo ta mira, bo por primi e butòn grandi pa habri e storia mes na e lugá di e imágen, ku por ta na mei di un artíkulo di blog. Storia ta habri den ventana nobo di browser, asina bo por bolbe na e "stashon" pa haña un destinashon nobo.

Implementashon: ThreeJS i API di imágen propio

Promé mi a eksperimentá ku e motor gráfiko 3D ThreeJS pa visualisá dato di entrenamentu. Esaki ta un librería ku ta usa e elemento standard canvas di HTML5 pa duna gráfiko ku a wòrdu generá ku spatial computing, un manera elegante pa bisa ku e ta laga bo drama kosnan den tres dimenshon (x, y, z) na lugá di dos, di ketu su nòmber. E ta ofresé kontròl di kámara, lus i mishi i e ta konsibí pa hasi animashon basá riba posishon i rotashon simulá. E ta hopi bon pa wega ku dje i e ta kapas hopi. Wak e dos artíkulo di promé aki tokante mi eksperimentonan ku ThreeJS:

E minimalista den mi a konsiderá pa un ratu di usa animashon, transformashon i transishon di CSS. Pero mi a komprendé ku e perspektiva realista, kaminda e panelnan di afó ta rotá mas inkliná, i e elemento di asar den e selekshon di visual nobo, lo mester JavaScript tòg. Pa maksimalisá su balor, mi tabata ke integrá e direkto riba mi homepage. Pero karga un motor 3D kompleto no ta algu pa tuma na lihé. Pa minimalisá su efekto riba e tempu di karga di e homepage, mi a konsibí e kos asina ku e ta karga di manera asinkróniko i komplet opshonal (pa hende ku JS desaktivá).

Pa alimentá e "Visual Journal", mi a konstruí un API propio ku ta entregá imágen hopi optimisá ku medida di 400x400px. Kada imágen tin un título lokalisá i un deeplink ku un ankla di hashtag (slug), asina bo por drenta den e storia mes. Mi ta konta riba mi propio platforma lemmid pa duna mi e infrastruktura nesesario pa hasi esaki posibel. Den fondo un servisio NodeJS optimisá ta generá e imágen ku imagemagick, jpegoptim i pngquant. Bo mes por tuma un wak di e API riba https://willem.com/en/images.json, ku ta entregá un array di JSON manera:

[
  {
    "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"
  },
  ...
]

Pa evitá ku e kos aki ta so un generadó di link aleatorio, mi a pone di manera deliberá un poko popup den dje ora bo tuch of klik riba un visual. Mi ta usa e subtítulo di imágen ku mi lemmid content manager ta mantené pa mustra un poko informashon, asina bo por disidi si bo ta pensa ku bal la pena habri e storia.

Lansamentu di e kòdigo di fuente (AGPL)

Aunke mi ta hopi kontentu ku manera e Visual Journal ta funshoná riba mi website, mi ta kere hopi den kompartí. Ta posibel ku bo tin un idea ainda mihó pa algu di Solari ku ta lanta i kai. Pesei mi ta lansa henter e kos manera software liber/libre bou di e GNU Affero General Public License (AGPL). Esei ta nifika ku bo mes por usa, modifiká i distribuí e. Bo ta haña e kòdigo di fuente, e readme i e fileynan di ehèmpel riba https://source.willem.com/visual-journal/

Konklushon

Komo e ta kapturá e kuriosidat di mi yunan, mi ta hopi kontentu ku e visual journal, ku mi a yama na broma Willemstagram. Pero na diferensia di Instagram di Meta, esaki ta sirbi visual so pa konta mi storia, i su kòdigo ta libre. Bo por wak e riba e homepage of primi e butòn aki bou. Ki destinashon bo lo skohe?

[action1]

Video (mp4)

Esaki a wòrdu skirbí ku man. Den un epòka di testo generá pa AI, esaki ta mi manera simpel di mustra e pensamentu i esfuerso humano tras di e palabranan aki. Pa esnan ku tin kuriosidat, e manuskrito original (ingles) ta disponibel pa download.

[download1]