{
 "id": 37197,
 "slug": "2025-08-11_willemstagram",
 "url": "https://agents.willem.com/pt/posts/2025-08-11_willemstagram/",
 "source_url": "https://willem.com/pt/2025-08-11_willemstagram/",
 "language": "pt",
 "date": "2025-08-11",
 "published": "2025-08-11T00:00:00+02:00",
 "created": "2025-08-12T05:44:59.016000+02:00",
 "updated": "2026-10-20T09:32:31.683000+02:00",
 "title": "Willemstagram",
 "subtitle": "Painel de fotos 3D em flip-flap que mostra histórias",
 "summary": "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!",
 "topics": [
  "art",
  "data",
  "design",
  "people",
  "programming",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell (pt_PT)",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "pt",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/en/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/en/2025-08-11_willemstagram/"
  },
  {
   "language": "nl",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/nl/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/nl/2025-08-11_willemstagram/"
  },
  {
   "language": "de",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/de/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/de/2025-08-11_willemstagram/"
  },
  {
   "language": "es",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/es/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/es/2025-08-11_willemstagram/"
  },
  {
   "language": "fr",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/fr/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/fr/2025-08-11_willemstagram/"
  },
  {
   "language": "it",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/it/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/it/2025-08-11_willemstagram/"
  },
  {
   "language": "pap",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/pap/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/pap/2025-08-11_willemstagram/"
  },
  {
   "language": "fy",
   "title": "Willemstagram",
   "url": "https://agents.willem.com/fy/posts/2025-08-11_willemstagram/",
   "source_url": "https://willem.com/fy/2025-08-11_willemstagram/"
  }
 ],
 "image": "https://willem.com/global/images/9e0e38da7b14.webp",
 "image_width": 2560,
 "manuscript_pdf": "https://willem.com/global/manuscript/da33ca1cee50.pdf",
 "images": [
  {
   "url": "https://willem.com/global/images/334ea770c6c7.webp",
   "description": "O grande painel mecânico azul de partidas da Estação Central de Utrecht (foto: cc/maurits90)",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37197_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/c32ce6e2d76f.webp",
   "description": "Esboço do conceito do Diário Visual: imagens em flip-flap com ligação direta a páginas do willem.com, como um painel Solari mecânico",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37197_images-2.png"
  },
  {
   "url": "https://willem.com/global/images/8a20e248d096.webp",
   "description": "O Diário Visual, apelidado de “Willemstagram”, em ação",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37197_images-3.png"
  },
  {
   "url": "https://willem.com/global/images/837bfdd7ff30.webp",
   "description": "O popup permite-te decidir entre mergulhar na história ou continuar a explorar outras imagens",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37197_images-4.png"
  }
 ],
 "text": "Pensamento do hemisfério esquerdo versus direito\nUma 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:\n- 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.\n- 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.\nA 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.\nPainel Solari\nHá 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.\nComo 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.\nImplementação: ThreeJS e API de imagens à medida\nJá 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:\nO 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).\nPara 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:\n```\n[\n{\n\"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\",\n\"title\": \"An average fly is bigger than most screws inside the iMac\",\n\"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\"\n},\n{\n\"url\": \"/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg\",\n\"title\": \"Using filler plates to make up for Chinese Precision\",\n\"target\": \"/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision\"\n},\n{\n\"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\",\n\"title\": \"You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...\",\n\"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\"\n},\n...\n]\n```\nPara 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.\nPublicar o código-fonte (AGPL)\nEmbora 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/\nConclusão\nA 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?\n*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.*",
 "word_count": 1041,
 "markdown_url": "https://agents.willem.com/pt/posts/2025-08-11_willemstagram/post.md"
}