Willemstagram

Resumo

Na semana passada estive com um cliente a ver a nova página inicial do willem.com, onde uso uma narrativa para contar o que faço. Este cliente é um dos pensadores criativos e visionários mais brilhantes que conheço, e mesmo assim o meu texto parecia não lhe dizer nada. Ao pensar nisto, lembrei-me de uma lição importante de psicologia da universidade: eu precisava de algo diferente, algo não linear. Este artigo é sobre dar um murro visual!

Texto completo

Pensamento do hemisfério esquerdo versus direito

Uma das coisas fixes na minha formação na Universidade de Amesterdão era termos aulas de várias faculdades, o que formava uma mistura interessante de ciência interdisciplinar. Um livro clássico que discutimos foi “Mintzberg on Management”, em que o autor explica porque é que pessoas diferentes preferem coisas diferentes, a dicotomia clássica que muitas vezes se simplifica como pensadores do hemisfério esquerdo versus direito:

• O pensador linear (o hemisfério esquerdo): este é o estado natural de quem aprecia uma narrativa lógica que vai de A para B e para C. Pessoas típicas assim são contadores de histórias, arquitetos e programadores.
• O pensador não linear (o hemisfério direito): este é o estado de quem não segue uma linha reta. Estas pessoas procuram impressões, ambientes e sensações emocionais. Pessoas típicas assim são os criativos, incluindo artistas e pensadores visionários.

A minha nova página inicial do willem.com funcionava bem para pensadores lineares como eu, porque a narrativa em texto serve o hemisfério esquerdo. Mas o meu design falhava para quem funciona melhor com impressões não lineares, cheias de ambiente. Eu precisava de algo que mostrasse os muitos elementos visuais de forma rica e dinâmica, viva e com uma boa dose de diversão interativa.

Painel Solari

Há muitos anos conheci a minha mulher na Estação Central de Utrecht, mesmo debaixo do gigantesco painel de informação de partidas. O icónico painel azul de 7x4,20M, com cerca de 3000 quilos, tinha painéis mecânicos que faziam flip-flap e produziam um som inconfundível, que se ouvia mais ou menos de minuto a minuto no átrio central da estação. Este tipo de sinalética chama-se muitas vezes “painel Solari”, em honra da Solari di Udine, a empresa italiana que produzia estes ícones. Hoje a estação de Utrecht tem ecrãs digitais, mas, se quiseres, ainda o podes ver no Het Spoorwegmuseum.

Como apreciador de metáforas (dica de livro: Metaphors we live by), pensei que o painel Solari, com o seu “flip-flap”, seria uma forma deliciosa de deixar os visitantes do willem.com “partir” para vários “destinos” (as histórias) do site. Em vez de texto, escolhi de propósito usar as fotos e os elementos visuais dos artigos como portas de entrada para a secção de reflexões do willem.com. Ao revelar destinos novos ao acaso, é perfeitamente não linear, e ao torná-lo interativo (com clique e toque) fica mais envolvente do que texto simples. Cada destino abre um “bilhete” que explica um pouco aquilo que estás a ver. Se gostares do que vês, podes carregar no botão grande para abrir a história mesmo na posição da imagem, que pode ser a meio de um artigo. As histórias abrem em novas janelas do navegador, para poderes voltar à “estação” e encontrar um novo destino.

Implementação: ThreeJS e API de imagens à medida

Já antes tinha experimentado o motor gráfico 3D ThreeJS para visualizar dados de treino. É uma biblioteca que usa o elemento canvas do standard HTML5 para produzir gráficos gerados com computação espacial, uma forma elegante de dizer que permite desenhar coisas em três dimensões (x, y, z) em vez de duas, daí o nome. Oferece controlos de câmara, luz e nevoeiro e foi pensada para animações baseadas em posição e rotação simuladas. É muito fixe para brincar e bastante capaz. Vê estes dois artigos anteriores sobre as minhas experiências com ThreeJS:

O minimalista que há em mim ponderou por instantes usar animações, transformações e transições CSS. Mas percebi que a perspetiva realista, em que os painéis mais afastados rodam de forma mais inclinada, e a aleatoriedade na escolha de novos elementos visuais me obrigariam a usar JavaScript de qualquer modo. Para tirar o máximo partido, quis integrá-lo mesmo na minha página inicial. Mas carregar um motor 3D completo não é coisa para levar de ânimo leve. Para minimizar o efeito no tempo de carregamento da página inicial, desenhei a coisa com cuidado para carregar de forma assíncrona e ser totalmente opcional (para quem tem o JS desativado).

Para alimentar o “Diário Visual”, desenhei uma API à medida que serve imagens muito otimizadas, redimensionadas para 400x400px. Cada imagem tem um título localizado e uma ligação direta com uma âncora de hashtag (slug), que permite mergulhar nas histórias. Conto com a minha própria plataforma lemmid para me dar a infraestrutura necessária para isto. Em segundo plano, um serviço NodeJS otimizado gera as imagens com imagemagick, jpegoptim e pngquant. Podes ver a API tu mesmo em https://willem.com/en/images.json, que devolve um 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 a coisa seja apenas um gerador aleatório de ligações, pus de propósito um pequeno popup que aparece quando tocas ou clicas em qualquer imagem. Uso as legendas das imagens que o meu gestor de conteúdos lemmid mantém para revelar um pouco de informação, que te ajuda a decidir se vale a pena abrir a história.

Publicar o código-fonte (AGPL)

Embora esteja muito contente com o funcionamento do Diário Visual no meu site, acredito mesmo em partilhar. É provável que tenhas uma ideia ainda melhor para um flip-flap à Solari. Por isso publico a coisa toda como software livre sob a GNU Affero General Public License (AGPL). Isso significa que a podes usar, modificar e distribuir tu mesmo. Encontras o código-fonte, o readme e ficheiros de exemplo em https://source.willem.com/visual-journal/

Conclusão

A julgar pela curiosidade que desperta nos meus filhos, estou muito contente com o diário visual, a que chamei a brincar Willemstagram. Mas, ao contrário do Instagram da Meta, este serve apenas imagens para contar as minhas histórias, e o código-fonte é livre. Podes vê-lo na página inicial ou carregando no botão em baixo. Que destino vais escolher?

[action1]

Video (mp4)

Isto foi escrito à mão. Numa era de texto gerado por IA, esta é a minha forma simples de mostrar o pensamento e o esforço humanos por trás destas palavras. Para quem tiver curiosidade, o manuscrito original (em inglês) está disponível para transferência.

[download1]