Website

Eine erste Version des Frontends ist seit dem 2026-10-03 erreichbar unter: Art History Facharbeit-1791143129366.webp Facharbeit-1791143109903.webp

Das Frontend ist mit Vite und TypeScript gebaut, ohne ein Framework wie React. Alle Anfragen an die API laufen über eine einzige Datei (api.ts), sodass klar ist, wo die Website mit dem Backend spricht. Die Typen der Daten wurden aus echten Antworten der API abgeleitet, und ein Test prüft, ob die API noch dazu passt. Veröffentlicht wird über GitHub Actions: Bei jedem Push laufen zuerst die Tests, erst dann wird die Website auf GitHub Pages aktualisiert. Für jeden Eintrag wird beim Veröffentlichen eine eigene Seite mit Titel, Beschreibung und Vorschaubild erstellt, damit Suchmaschinen und geteilte Links die Inhalte erkennen. Die Website setzt keine Cookies und funktioniert im hellen und dunklen Modus.

Da Frontend und Backend im selben Repository liegen, hätte GitHub Pages anfangs das ganze Repository veröffentlicht, auch den Code des Backends (etwa unter arthistory.piogino.ch/backend/README.md). Geheim ist dieser Code nicht, er ist auf GitHub ohnehin öffentlich, aber er gehört nicht auf die Website. Seither baut ein GitHub Actions Workflow nur das Frontend und veröffentlicht ausschliesslich dessen Ergebnis. Der Schlüssel von MapTiler ist kein Geheimnis im eigentlichen Sinn: Er steht im JavaScript der Website und kann von allen gelesen werden. Geschützt ist er dadurch, dass MapTiler ihn nur für Anfragen von arthistory.piogino.ch annimmt. Deshalb liegt er in GitHub als gewöhnliche Variable und nicht als Secret.

Funktionen

Kuratierte Startseite

Mit wachsender Bibliothek an Einträgen wurde es zunehmend wichtig, dass auf der Startseite nicht alles, sondern ein kuratierter Satz von Datenpunkten gezeigt wird. Seit 2026-10-15 lassen sich im CMS unter "Start views" kuratierte Startansichten erstellen und veröffentlichen. Die Startseite zeigt die erste veröffentlichte Ansicht mit einer Auswahl der weiteren, und die letzte eigene Auswahl wird als "Continue" angeboten. Unter "Explore everything" ist weiterhin alles erreichbar. Facharbeit-1792009039165.webpFacharbeit-1792009029894.webp Mit den wachsenden Bibliotheken wurden die Adressen der Startkarte, in denen die ganze Auswahl steht, sehr lang. Statt Einträge auszuschliessen, habe ich mich am 2026-10-15 für eine Kürzung entschieden: Ab 300 Zeichen erhält eine Ansicht einen kurzen Link (/?v=<code>).

Bewegungslinien und Crossed Paths

Das erste grosse Update der Website brachte die Bewegungslinien, die Markierung von "crossed paths" auf der Karte und deren Liste unter der Karte. Die Anzeige der Pfade schien zuerst nicht zuverlässig. Am 2026-10-06 stellte sich heraus, dass es ein Anwenderproblem war: Ich hatte einen Zeitraum ausgewählt, der keine Pfade beinhaltete. Ebenfalls am 2026-10-06 behoben wurde ein Fehler, bei dem sich der Hintergrund der Liste der Stationen verschob, wenn die Liste scrollbar war. Facharbeit-1791144891228.webp Facharbeit-1791144966981.webp

Eine der wertvollsten Funktionen der Karte ist es zu zeigen, wessen Wege sich gekreuzt haben. Die Website findet jedes Paar von Einträgen, die zur selben Zeit am selben Ort waren, zum Beispiel: "Arles · 23. Oktober – 25. Dezember 1888 · 9 Wochen — Paul Gauguin (lived in) und Vincent van Gogh (lived in)". Die Treffen erscheinen als Liste unter der Startkarte, als gelber Schimmer auf der Karte, im Popup eines Ortes und auf den Detailseiten. Mitgezählt werden Personen mit Personen und Personen mit Werken, etwa ein Gemälde, das an einem Ort entstand, während eine andere Künstlerin dort war. Ausgelassen werden triviale Paare wie ein Werk mit seiner eigenen Künstlerin. Ist ein Datum nur auf das Jahr genau bekannt, wird das Treffen als "possibly" markiert, denn "beide 1887 in Paris" kann auch Januar und Dezember bedeuten. Die Funktion ist nur so reich wie die datierten Orte in der Datenbank. Zu Beginn gab es genau ein echtes Treffen (Arles 1888), weil die meisten Einträge nur Geburts- und Sterbeort hatten. Hokusai und Hiroshige lebten beide jahrzehntelang in Edo, aber ohne datierte "lived in"-Einträge wird das nicht sichtbar. Jeder datierte Aufenthalt, den ich erfasse, kann neue Treffen sichtbar machen. Seit 2026-10-17 werden die Treffen in der Datenbank berechnet (siehe Räumliche Nähe). Das Beispiel des Porträts von Irène Cahen d'Anvers zeigt, dass die Crossed Paths immer noch viel eigenes Denken voraussetzen. Das Porträt wurde für die Familie gemalt und befand sich im Privatbesitz. Van Gogh hätte also trotz seiner zwei Jahre in Paris vermutlich keine Möglichkeit gehabt, das Bild zu sehen. Ausgeschlossen ist es aber nicht, und es ist besser, mehr Möglichkeiten anzuzeigen, die dann von Hand geprüft werden, als mit zu vielen Regeln Ausschlüsse vorab zu generieren.

Vorschaubilder

Damit die Listen schnell laden, wird bei Bildern von Wikimedia nicht die grosse Datei geladen, sondern eine von Wikimedia angebotene kleinere Version: 120 Pixel in den Listen (rund 6 KB statt 250 KB) und 500 Pixel auf der Seite eines Eintrags. Bei einigen Werken blieb das kleine Vorschaubild in den Listen jedoch leer, zum Beispiel beim "Aktsaal der Wiener Akademie". Ich vermutete zuerst, dass es Bilder betrifft, die nicht von Wikidata stammen. Die Ursache war genauer: Die Bilder liegen auf dem eigenen Server eines Museums, hier der Akademie der bildenden Künste Wien, und dieser verweigert die Art, wie die Website Bilder ohne Cookies lädt. Ein zweiter Versuch lief nur auf den Detailseiten, deshalb blieben die Karten in den Listen leer. Und selbst wenn es funktionierte, lud eine 70 Pixel kleine Karte ein Bild von 249 KB. Seit 2026-10-22 hat die API deshalb einen kleinen Dienst für Vorschaubilder. Er holt ein solches Bild einmal vom Server des Museums, verkleinert es mit sharp ins Format WebP und bewahrt es auf meinem Server auf. Die Karte des Aktsaals lädt nun ein Bild von rund 7,7 KB, und die Browser der Besucher:innen kontaktieren den Server des Museums gar nicht mehr. Der Dienst liefert nur Bilder, die in meiner Datenbank erfasst sind, sodass er nicht missbraucht werden kann, um beliebige Adressen abzurufen. Für Bilder von Wikimedia ändert sich nichts, ausser dass die Listen auch bei Originaldateien die kleine Version von Wikimedia laden. Schlägt ein Bild fehl, versucht es die Website nun auf jeder Seite ein zweites Mal. Die Datenschutzerklärung wurde entsprechend angepasst.

Zeitleiste der Stilepochen

Unter arthistory.piogino.ch/periods gibt es seit 2026-10-18 eine Zeitleiste der Stilepochen. Sie ist in drei Schritten entstanden.

Daten und Quellen

Die Daten wurden mit Unterstützung von Claude zusammengetragen. Britannica und die Timeline des Metropolitan Museum of Art blockieren automatisierte Zugriffe und konnten deshalb nicht verwendet werden. Alle 44 betroffenen Epochen sind daher als "to complete" markiert und erscheinen auf der Zeitleiste gestrichelt als "not yet reviewed", bis ich sie selbst geprüft habe.

Die Zeitleiste

Jede Region hat eine eigene Spur: zuerst Europa, dann die europäischen Regionen, dann Japan. Damit lassen sich auch die Zeitperioden unterschiedlicher Länder berücksichtigen. Unterepochen sind eingerückt und lassen sich ausblenden. Ungefähre Grenzen wie "ca. 1720" oder "spätes 18. Jahrhundert" laufen weich aus, statt scharf zu enden. Regionen lassen sich ein- und ausblenden, und die Zeitleiste kann gezoomt und verschoben werden. Die Einstellungen werden in der Adresse gespeichert, sodass eine Ansicht als Link geteilt werden kann.

Die Sammlung auf der Zeitleiste

Unter den Spuren ist für jede Epoche zu sehen, aus welchen Jahren die Kunstwerke der Datenbank stammen, mit einem Punkt pro Werk. Ein Werk zählt zu einer Epoche, wenn es direkt mit ihr verknüpft ist oder wenn seine Künstlerin oder sein Künstler zur Epoche gehört und das Werk in dieser Zeit entstanden ist. Ein eigenes Feld für die Epoche eines Werks gibt es also nicht, die Zuordnung ergibt sich aus diesen Verknüpfungen. Wählt man auf der Zeitleiste einen Zeitraum aus, werden die Epochen dieser Jahre und die Werke aus diesem Zeitraum aufgelistet. Damit lässt sich auch die Frage beantworten, welche Kunstwerke im selben Zeitraum entstanden sind, ebenso über das Zeitfenster der Startkarte und über die API mit /v1/artworks?from=…&to=…. Seit 2026-10-20 lässt sich die Zeitleiste zwischen "Works" und "Artists" umschalten. In der Ansicht der Künstler:innen erhält jede Künstlerin und jeder Künstler unter der Epoche eine dünne Linie von der Geburt bis zum Tod, mit den eigenen Werken der Epoche als Punkte darauf. Die Linie liegt in der Spur der Region, in der die Person während der Epoche lebte und arbeitete. Gehört jemand zu zwei Epochen, erscheint die Person unter beiden, wie ein Werk. Liegt ein Leben ganz ausserhalb des Zeitraums einer Epoche, ist die Linie rot umrandet und wird in einer Liste aufgeführt. Ein Beispiel ist Rogier van der Weyden, der starb, bevor die nördliche Renaissance in der französischen Spur beginnt. So lässt sich auch sehen, welche Künstler:innen zur selben Zeit gelebt haben: Ein gewähltes Zeitfenster listet alle Künstler:innen, die damals lebten. Klickt man auf den Punkt eines Werks, erscheint zuerst eine Vorschau. Ein zweiter Klick öffnet das Werk in einem neuen Tab, und die Zeitleiste bleibt, wo sie war.

Projektdokumentation auf der Website

Diese Dokumentation ist seit 2026-10-20 selbst Teil der Website, unter arthistory.piogino.ch/dokumentation, verlinkt im Fuss jeder Seite. Sie soll das Projekt transparent machen und die geleistete Arbeit belegen. Der Text wird im CMS unter "Pages" bearbeitet, im selben Markdown, das ich in Obsidian schreibe. Bilder werden wie in Obsidian über ihren Dateinamen eingebunden (![[Facharbeit-1790625525635.webp]]). Lade ich die Anhänge aus Obsidian mit ihren Namen hoch, findet jedes Bild seinen Platz von selbst. Beim Hochladen werden die Bilder ins Format WebP umgewandelt und auf höchstens 1600 Pixel verkleinert. Anders als die Bilder der Kunstwerke liegen sie in der Datenbank und sind damit Teil der nächtlichen Sicherung. Da die Dokumentation sehr lang geworden ist, wird sie in Kapitel aufgeteilt. Jede Überschrift der obersten Ebene ist ein Kapitel. Der Text bleibt dabei ein einziges Dokument, sodass ich ihn weiterhin als Ganzes aus Obsidian übernehmen kann. Im CMS bearbeite ich jeweils ein Kapitel, das beim Speichern an seine Stelle im Text zurückgesetzt wird. Auf der Website hat jedes Kapitel eine eigene Seite mit Inhaltsverzeichnis und Links zum vorherigen und nächsten Kapitel. Wie in Obsidian lässt sich auch auf eine Überschrift der Dokumentation verlinken, etwa mit [[#Vertrauliche Daten]] oder mit eigenen Worten [[#Vertrauliche Daten|die Zugangsdaten]]. Seit 2026-10-23 funktioniert das über alle Kapitel hinweg: Der Link öffnet das Kapitel, in dem die Überschrift steht, und springt zu ihr. Beim Schreiben im CMS erscheinen nach [[# die Überschriften aller Kapitel als Vorschläge, und nur jene dieser Seite. Kommt ein Name zweimal vor, wie "Funktionen" im Kapitel zum CMS und im Kapitel zur Website, wird die Überschrift darüber mitgeschrieben: [[#Website#Funktionen]]. Ein Link auf eine Überschrift, die es nicht gibt, erscheint im CMS rot markiert und auf der Website als gewöhnlicher Text. Weil ich sowohl im CMS als auch in Obsidian schreibe, lässt sich der Text als .md-Datei herunterladen und wieder hochladen. Wurde der Text im CMS seit dem letzten Herunterladen geändert, warnt das CMS, bevor die Datei diese Änderungen überschreibt. Während des Schreibens wird der Text laufend als Entwurf gespeichert, der erst mit "Save" auf der Website erscheint. Seit 2026-10-23 hebt das CMS diese noch nicht veröffentlichten Änderungen hervor: Unter dem Text zeigt es Wort für Wort, was sich gegenüber der Website geändert hat, gelöschte Wörter rot durchgestrichen, neue grün. Kapitel mit solchen Änderungen sind in der Übersicht markiert, und eine eigene Seite listet alle Änderungen zusammen auf, sodass ich sie prüfen kann, bevor sie auf der Website erscheinen. Die Übersicht und jedes Kapitel zeigen, wie viele Wörter und Zeichen mit Leerzeichen der Text hat, und wie lange das Lesen ungefähr dauert. Seit 2026-10-23 sind die Überschriften aller sechs Ebenen abgestuft gestaltet: die ersten drei in der Serifenschrift der Website, die Ebenen 4 bis 6 in der Schrift des Textes.

Changelog und Roadmap

Ebenfalls seit 2026-10-20 hat die Website einen öffentlichen Changelog unter arthistory.piogino.ch/changelog und eine Roadmap unter arthistory.piogino.ch/roadmap, beide auf Deutsch. Der Changelog hält pro Tag in kurzen Punkten fest, was neu, verbessert oder behoben wurde und welche Inhalte dazugekommen sind; er lässt sich auch als RSS-Feed abonnieren. Die Roadmap zeigt in vier Spalten, woran ich gerade arbeite, was als Nächstes und was später kommt und was erledigt ist. Wird ein Punkt der Roadmap im CMS als erledigt markiert, erscheint er automatisch im Changelog des Tages. Beides wird im CMS bearbeitet, mit automatisch gespeicherten Entwürfen und History. Die Geschichte des Projekts vom 23. September bis zum 20. Oktober wurde aus der Commit-Historie nachgetragen; Stand 2026-10-23 sind 24 Tage im Changelog veröffentlicht und 14 Punkte auf der Roadmap erfasst.