voltar ao arquivoback to the archive

Arquivo Material · Exposição de Projetos 2025–26 Material Archive · Project Exhibition 2025–26

Ficha técnica e créditos Imprint and credits

Quem fez o Arquivo Material, com que meios e em que termos. Este arquivo digital interativo acompanha a exposição anual do Mestrado em Design Gráfico e Projetos Editoriais e liga os projetos entre si: pelas pessoas, pelos temas, pelos formatos e pela matéria de que são feitos.

Who made Material Archive, with what means and on what terms. This interactive digital archive accompanies the annual exhibition of the Master in Graphic Design and Editorial Projects and connects the projects to one another: through people, themes, formats and the matter they are made of.

1Ficha técnicaImprint

exposiçãoexhibition
Arquivo Material — Exposição de Projetos 2025–26Material Archive (Arquivo Material) — Project Exhibition 2025–26
mestradomaster’s program
Mestrado em Design Gráfico e Projetos Editoriais (MDGPE)Master in Graphic Design and Editorial Projects (MDGPE)
instituiçãoinstitution
Faculdade de Belas Artes da Universidade do Porto (FBAUP)Faculty of Fine Arts, University of Porto (FBAUP)
localvenue
Galeria do Museu · Edifício Central · Piso 3 — inauguração a 2 de outubro de 2026, às 17:00Museum Gallery · Main Building · Floor 3 — opening on October 2, 2026, at 5 pm
conceitoconcept
Pedro Amado (FBAUP / i2ADS) arquivo interativo inspirado em Valence, de Ben Fry interactive archive inspired by Ben Fry’s Valence
design gráficographic design
Catarina Marques, Hugo Costa, Inês Teixeira, Joana Teles, Letícia Santos e Rafael Pinho Catarina Marques, Hugo Costa, Inês Teixeira, Joana Teles, Letícia Santos and Rafael Pinho estudantes do MDGPE MDGPE students
códigocode
Claude Opus 5.5 (Anthropic) modelo claude-opus-5-5, no Claude Code 2.1.280–2.1.281 (app Claude para macOS), de 24 a 27 de setembro de 2026, a partir das indicações de Pedro Amado model claude-opus-5-5, in Claude Code 2.1.280–2.1.281 (Claude app for macOS), September 24–27, 2026, following Pedro Amado’s instructions
projetosprojects
Os autores de cada projeto — estudantes do MDGPE —, que enviaram textos, imagens e dados técnicos pelo formulário de submissão da exposição.The authors of each project — MDGPE students — who submitted texts, images and technical details through the exhibition’s submission form.
traduçãotranslation
Versões inglesas da interface e dos dados dos projetos: Claude (Anthropic), a partir dos originais em português. O texto «Sobre» tem versão inglesa própria.English versions of the interface and of the project data: Claude (Anthropic), from the Portuguese originals. The About text has its own English version.
endereçoaddress
mdgpe.fba.up.pt/expo/2026

2InspiraçãoInspiration

O ponto de partida é Valence, de Ben Fry: uma série de programas experimentais, iniciada em 1999 na sua tese de mestrado no MIT (Organic Information Design), em que grandes massas de informação — o texto de um livro, um genoma — se organizam no espaço consoante as suas relações. O Arquivo Material segue a mesma ideia: ninguém desenha a forma do arquivo, que resulta das ligações partilhadas pelos projetos e que os aproximam ou afastam em tempo real.

A identidade visual da aplicação segue o cartaz da exposição: folhas sobrepostas, dobras ponteadas, manículas e a EB Garamond em caixa alta espaçada.

The starting point is Ben Fry’s Valence: a series of experimental programs, begun in 1999 for his master’s thesis at MIT (Organic Information Design), in which large bodies of information — the text of a book, a genome — arrange themselves in space according to their relationships. Material Archive follows the same idea: no one draws the shape of the archive; it results from the connections the projects share, which pull them together or apart in real time.

The application’s visual identity follows the exhibition poster: overlapping sheets, dotted folds, manicules and widely spaced EB Garamond capitals.

benfry.com/valence

3Informação técnicaTechnical information

aplicaçãoapplication
Aplicação web estática: HTML, CSS e JavaScript (módulos ES), sem frameworks, sem base de dados e sem serviços externos. A mesma versão corre online e, sem ligação à internet, no ecrã tátil da galeria.Static web application: HTML, CSS and JavaScript (ES modules), with no frameworks, no database and no external services. The same version runs online and, offline, on the gallery’s touch screen.
visualizaçãovisualization
Grafo de forças tridimensional em WebGL, com three.js, 3d-force-graph e d3-force-3d. Os rótulos são desenhados em canvas com os tipos de letra da exposição; as ligações são tracejadas como pontos de costura.Three-dimensional force-directed graph in WebGL, built with three.js, 3d-force-graph and d3-force-3d. Labels are drawn on canvas in the exhibition typefaces; links are dashed like stitches.
dadosdata
Um único ficheiro JSON bilingue (português e inglês), gerado a partir das submissões dos autores e verificado com scripts em Python. As ligações entre projetos, pessoas, temas e matérias são calculadas no browser.A single bilingual JSON file (Portuguese and English), generated from the authors’ submissions and checked with Python scripts. The connections between projects, people, themes and materials are computed in the browser.
imagensimages
JPEG até 2400 px, com miniaturas de 480 px, a partir das imagens e dos PDF enviados pelos autores; vídeos em MP4; códigos QR em PNG e SVG.JPEG up to 2400 px, with 480 px thumbnails, from the images and PDFs submitted by the authors; videos in MP4; QR codes in PNG and SVG.
privacidadeprivacy
Sem cookies, sem estatísticas de visitas e sem rastreadores. A língua e o tema escolhidos ficam guardados apenas neste browser.No cookies, no visitor analytics and no trackers. Your chosen language and theme are stored only in this browser.
acessibilidadeaccessibility
Português e inglês; modo claro e escuro; pesquisa, botões e carrossel de imagens utilizáveis com o teclado; alvos de toque amplos; menos animações na interface quando o sistema pede movimento reduzido.Portuguese and English; light and dark modes; search, buttons and image carousel usable from the keyboard; large touch targets; fewer interface animations when the system asks for reduced motion.
requisitosrequirements
Browser atual com WebGL (Chrome, Edge, Firefox ou Safari). Pensado para o ecrã tátil 4K da galeria; funciona também em computador, tablet e telemóvel.A current browser with WebGL (Chrome, Edge, Firefox or Safari). Designed for the gallery’s 4K touch screen; also works on desktop, tablet and phone.

4Bibliotecas e licençasLibraries and licenses

O ficheiro assets/lib/vendor.bundle.js junta, minificado com o esbuild, o código das bibliotecas abaixo — exatamente as que o esbuild indica ter incluído. São todas software livre, com licenças permissivas (MIT, ISC ou BSD-3-Clause) que pedem que se mantenham os avisos de direitos de autor. Esses avisos e as licenças completas estão em THIRD-PARTY-NOTICES.txt.

The file assets/lib/vendor.bundle.js combines the code of the libraries below, minified with esbuild — exactly the ones esbuild reports as included. All are free software under permissive licenses (MIT, ISC or BSD-3-Clause) that require their copyright notices to be preserved. Those notices and the full license texts are in THIRD-PARTY-NOTICES.txt.

bibliotecalibrary versãoversion licençalicense direitos de autorcopyright
three.jsmotor 3D (WebGL)3D engine (WebGL)0.186.1MIT© 2010–2026 three.js authors
3d-force-graphgrafo de forças em 3D3D force-directed graph1.80.0MIT© 2017 Vasco Asturiano
d3-force-3dsimulação de forças: a física do grafoforce simulation: the graph physics3.0.6MIT© 2017 Vasco Asturiano
accessor-fn1.5.3MIT© 2017 Vasco Asturiano
@babel/runtime7.29.7MIT© 2014–present Sebastian McKenzie and other contributors
d3-array3.2.4ISC© 2010–2023 Mike Bostock
d3-binarytree1.0.2MIT© 2017 Vasco Asturiano
d3-dispatch3.0.1ISC© 2010–2021 Mike Bostock
d3-octree1.1.0MIT© 2017 Vasco Asturiano
d3-quadtree3.0.1ISC© 2010–2021 Mike Bostock
d3-scale4.0.2ISC© 2010–2021 Mike Bostock
d3-scale-chromatic3.1.0ISC© 2010–2024 Mike Bostock
© 2002 Cynthia Brewer, Mark Harrower, and The Pennsylvania State University
d3-selection3.0.0ISC© 2010–2021 Mike Bostock
d3-timer3.0.1ISC© 2010–2021 Mike Bostock
data-bind-mapper1.0.3MIT© 2024 Vasco Asturiano
float-tooltip1.7.5MIT© 2022 Vasco Asturiano
internmap2.0.3ISC© 2021 Mike Bostock
kapsule1.16.3MIT© 2017 Vasco Asturiano
lodash-es4.18.1MIT© OpenJS Foundation and other contributors
Based on Underscore.js, © Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
ngraph.events1.4.0BSD-3-Clause© 2013–2025 Andrei Kashcha
ngraph.forcelayout3.3.1BSD-3-Clause© 2013–2022 Andrei Kashcha
ngraph.graph20.1.2BSD-3-Clause© 2013–2026 Andrei Kashcha
ngraph.merge1.0.0MIT© 2013–2019 Andrei Kashcha
ngraph.random1.2.0BSD-3-Clause© 2013–2025 Andrei Kashcha
polished4.3.1MIT© 2016–Present Brian Hough and Maximilian Stoiber
preact10.29.8MIT© 2015–present Jason Miller
three-forcegraph1.43.4MIT© 2017 Vasco Asturiano
three-render-objects1.42.0MIT© 2018 Vasco Asturiano
tinycolor21.6.0MIT© Brian Grinstead
@tweenjs/tween.js25.0.0MIT© 2010–2012 Tween.js authors
Easing equations © 2001 Robert Penner
earcutincluído no three.js: triangulação de polígonosincluded in three.js: polygon triangulation3.0.2ISC© 2024 Mapbox
d3-forcebase do d3-force-3dbasis of d3-force-3d—ISC© 2010–2021 Mike Bostock
ler as licenças completas (texto original, em inglês)read the full licenses 

        
abrir como ficheiro de textoopen as a text file

      

    


    
    

      
5Tipos de letraTypefaces

      

        

          
EB Garamond 

          

            Georg Duffner eand Octavio Pardo · versãoversion 1.003 · SIL Open Font License 1.1 · © 2017 The EB Garamond Project Authors
            Textos de leitura, títulos e rótulos do grafo. A manícula ☞ que serve de ícone e de favicon é o glifo U+261E desta fonte.
            Reading texts, titles and graph labels. The manicule ☞ used as icon and favicon is this typeface’s U+261E glyph.
            github.com/octaviopardo/EBGaramond12
          

        

        

          
JetBrains Mono

          

            JetBrains, Philipp Nurullin eand Konstantin Bulenkov · versãoversion 2.211 · SIL Open Font License 1.1 · © 2020 The JetBrains Mono Project Authors
            Interface, etiquetas e metadados.
            Interface, tags and metadata.
            github.com/JetBrains/JetBrainsMono
          

        

      

      

        
As duas fontes vêm do repositório do Google Fonts. Foram reduzidas aos caracteres latinos e convertidas para WOFF2 com o fontTools, o que a licença permite; o texto da licença acompanha os ficheiros (assets/fonts/OFL.txt e assets/fonts/JetBrainsMono-OFL.txt).

        
Both typefaces come from the Google Fonts repository. They were subset to Latin characters and converted to WOFF2 with fontTools, as the license allows; the license text accompanies the files (assets/fonts/OFL.txt and assets/fonts/JetBrainsMono-OFL.txt).

      

      

        ler a SIL Open Font License (texto original, em inglês)read the SIL Open Font License
        

        
OFL.txt · JetBrainsMono-OFL.txt

      

    


    
    

      
6Ferramentas de produçãoProduction tools

      

        
Serviram para escrever o código e preparar os dados, as imagens e as fontes. Não fazem parte da aplicação publicada.

        
Used to write the code and to prepare the data, images and fonts. They are not part of the published application.

      

      

        

          
            

              ferramentatool
              versãoversion
              licençalicense
              usouse
            

          
          
            

              Claude Code Anthropic
              2.1.280–2.1.281
              proprietáriaproprietary
              escrita do código, com o modelo Claude Opus 5.5writing the code, with the Claude Opus 5.5 model
            

            

              Node.js · npm
              24.16.0 · 12.0.1
              MIT · Artistic-2.0
              ferramentas em JavaScript e instalação das bibliotecasJavaScript tooling and library installation
            

            

              esbuild
              0.28.2
              MIT
              junta e minifica as bibliotecas num só ficheirobundles and minifies the libraries into one file
            

            

              Python
              3.9.6
              PSF-2.0
              scripts de dados, imagens e códigos QRdata, image and QR code scripts
            

            

              PyMuPDF Artifex
              1.26.5
              AGPL-3.0 ou comercialAGPL-3.0 or commercial
              converte páginas de PDF em imagensrenders PDF pages as images
            

            

              Pillow
              11.3.0
              MIT-CMU
              redimensiona e comprime as imagensresizes and compresses the images
            

            

              pillow-heif
              1.1.1
              BSD-3-Clause
              abre as fotografias HEICopens HEIC photos
            

            

              fontTools · Brotli
              4.60.2 · 1.2.0
              MIT · MIT
              subconjuntos WOFF2 das fontes e extração da manículaWOFF2 font subsets and manicule extraction
            

            

              segno
              1.6.6
              BSD-3-Clause
              códigos QRQR codes
            

            

              php-wasm WordPress Playground
              3.1.55
              GPL-2.0-or-later
              servidor local de testes, com PHP 8.3 e 7.4 em WebAssemblylocal test server, with PHP 8.3 and 7.4 in WebAssembly
            

            

              Google Forms · Google Drive
              —
              serviço da GoogleGoogle service
              recolha das submissões e dos ficheiros dos autorescollecting the authors’ submissions and files
            

          
        

      

    


    
    

      
7Direitos e responsabilidadeRights and responsibility

      

        
Os projetos apresentados nesta exposição e neste arquivo digital — incluindo o seu design, textos, imagens, tipografia, ilustrações e todos os outros elementos utilizados — são da exclusiva responsabilidade dos respetivos autores (os estudantes). Cabe inteiramente aos autores obter e assegurar as licenças, os direitos e as autorizações necessários para criar, reproduzir e publicar o seu trabalho no contexto académico, incluindo software, tipos de letra, imagens e fontes textuais.

        
Os organizadores da exposição obtiveram previamente o consentimento dos autores para utilizar, reproduzir e expor imagens dos seus trabalhos para fins expositivos, de arquivo e de comunicação, tanto no espaço físico da galeria como nesta interface digital.

        
Os textos originais, em português, são da inteira responsabilidade dos seus autores. As versões inglesas dos dados dos projetos foram traduzidas com inteligência artificial (Claude) e podem conter imprecisões: em caso de dúvida, prevalece o original em português.

        
Os nomes de programas, tipos de letra e marcas referidos pertencem aos respetivos titulares. QR Code é marca registada da DENSO WAVE INCORPORATED. Para pedir uma correção ou esclarecer uma questão de direitos, contacte o MDGPE através de mdgpe.fba.up.pt.

        
The projects presented in this exhibition and digital archive — including their design, texts, images, typography, illustrations and all other assets used — are the sole responsibility of their respective authors (the students). It is the authors’ full responsibility to acquire and secure any licenses, rights or permissions required to create, reproduce and publish their work within the academic environment, including software, typefaces, images and text sources.

        
The exhibition organizers have been granted prior consent by the authors to use, reproduce and display images of their work for exhibition, archival and communication purposes, both in the physical gallery space and on this digital interface.

        
The original texts, in Portuguese, are the full responsibility of their authors. The English versions of the project data were translated with artificial intelligence (Claude) and may contain inaccuracies; in case of doubt, the Portuguese original prevails.

        
Names of software, typefaces and brands mentioned here belong to their respective owners. QR Code is a registered trademark of DENSO WAVE INCORPORATED. To request a correction or raise a rights question, please contact MDGPE via mdgpe.fba.up.pt.

      

    


    
    

      
8Como creditarHow to credit

      

        
linha de créditos — tabelas, catálogo, página do mestradocredit line — wall labels, catalog, program website

        

          
Arquivo Material — conceito: Pedro Amado (FBAUP / i2ADS); design gráfico: Catarina Marques, Hugo Costa, Inês Teixeira, Joana Teles, Letícia Santos e Rafael Pinho; código: Claude Opus 5.5 (Anthropic). Mestrado em Design Gráfico e Projetos Editoriais, FBAUP, 2026.

          
Material Archive — concept: Pedro Amado (FBAUP / i2ADS); graphic design: Catarina Marques, Hugo Costa, Inês Teixeira, Joana Teles, Letícia Santos and Rafael Pinho; code: Claude Opus 5.5 (Anthropic). Master in Graphic Design and Editorial Projects, FBAUP, 2026.

        

        
      

      

        
referência — trabalhos académicosreference — academic work

        

          
Amado, P. (2026). Arquivo Material: arquivo digital interativo da Exposição de Projetos 2025–26 do Mestrado em Design Gráfico e Projetos Editoriais [Aplicação web; código: Claude Opus 5.5, Anthropic]. Faculdade de Belas Artes da Universidade do Porto. https://mdgpe.fba.up.pt/expo/2026/

          
Amado, P. (2026). Arquivo Material: Interactive digital archive of the 2025–26 Project Exhibition of the Master in Graphic Design and Editorial Projects [Web application; code: Claude Opus 5.5, Anthropic]. Faculty of Fine Arts, University of Porto. https://mdgpe.fba.up.pt/expo/2026/