Digital Humanities in der ewigen Stadt

Mein Praktikum am Deutschen Historischen Institut Rom

Jana Klinger

Diesen Sommer habe ich ein sechswöchiges Praktikum in der Digital Humanities-Abteilung des Deutschen Historischen Instituts Rom (DHI Rom) absolviert. Dort erhielt ich Einblicke in den Arbeitsalltag am DHI im Allgemeinen und der Digital Humanitites-Abteilung im Besonderen. Finanziell wurde mein Praktikum durch den DAAD im Rahmen eines Kurzstipendiums unterstützt.

Bei meiner Ankunft wurde ich am DHI sehr freundlich in Empfang genommen. Zunächst wurden mir von der Verwaltung die Schlüssel für mein Zimmer ausgehändigt. Da es am DHI Rom ein Gästehaus gibt, in dem Räume für Stipendiat:innen und Praktikant:innen zur Verfügung stehen, entfiel im Vorfeld die Suche nach einer Unterkunft. Während des Praktikums war es dann sehr angenehm direkt neben dem Institut mit den anderen Praktikant:innen und Stipendiat:innen zusammen zu wohnen.

An meinem ersten Tag hatte ich einen Termin mit Jörg Hörnschemeyer, meinem Praktikumsbetreuer aus der Digital Humanities-Abteilung am DHI Rom. In einem ersten Gespräch haben wir uns über die Geschichte des DHI, die Digital Humanities-Projekte am DHI Rom, sowie über meine eigenen Forschungsinteressen und Studienschwerpunkte ausgetauscht. Auf dieser Grundlage hat Herr Hörnschemeyer mir die Aufgabe gegeben, die mich die nächsten Wochen begleitet hat: Die Weiterentwicklung eines Prototyps der Visualisierung von Geodaten zur Präsenz deutscher Einheiten in Italien 1943-1945.

Das Projekt: Visualisierung von Geodaten mit Javascript

Die Datenbank, auf der die Visualisierung basieren sollte, wurde zwischen 2000 und 2004 von Carlo Gentile im Auftrag des DHI erarbeitet und wird von Historiker:innen regelmäßig zu Forschungszwecken konsultiert. Da das Interface und das dahinterliegende Backend inzwischen etwa 20 Jahre alt und somit etwas in die Jahre gekommen sind, ist eine Neuauflage dieser Datenbank in Form einer Visualisierung der Geodaten geplant. Donata Gerhards hatte im Rahmen ihres Praxisprojektes im Masterstudiengang “Digitale Methodik in den Geistes- und Kulturwissenschaften (M.A.)” der Johannes Gutenberg-Universität Mainz am DHI Rom schon einen ersten Prototypen erstellt, der auf der Javascript-Bibliothek OpenLayers und dem Datenstandard KML[1] basiert. Im Zuge dessen hatte sie auch die Daten aus Carlo Gentiles Datenbank mit Geodaten angereichert.

Mit den von Frau Gerhards angereicherten Daten und dem Prototypen als Orientierungshilfe sollte ich nun eine Visualisierung entwickeln, die auf der Javascript-Bibliothek Leaflet basiert. Leaflet ist „designed with simplicity, performance and usability in mind.“[2] Da ich bislang wenig Erfahrung in der Arbeit mit Javascript hatte, schien die Arbeit mit dieser Bibliothek eine gute Wahl um einen ersten Eindruck von der Funktionsweise dieser Programmiersprache zu bekommen. Die ersten Tage meines Praktikums verbrachte ich damit mich in die Welt von Leaflet einzuarbeiten, indem ich die Tutorials von Leaflet bearbeitete, mich in die Dokumentation einlas und überlegte, wie ich das Gelernte für die Erarbeitung einer Visualisierung der vorliegenden Daten nutzbar machen kann.

Zuerst habe ich den Rahmen der Visualisierung erstellt. Dazu zählten für mich zunächst ein Header und eine Karte, die die gesamte Seite ausfüllt (siehe Abb. 1). Für den Header habe ich auf Bootstrap 5 als Framework zurückgegriffen und die Karte mit Hilfe eines, dank Leaflet sehr kurzen, Javascripts eingebunden.[3] Im Anschluss habe ich mich daran gemacht, die Seite mit Inhalten zu füllen. Dabei stieß ich jedoch schnell an Grenzen, da ich merkte, dass die bisherige Datengrundlage in Form von KML sich nicht gut mit Leaflet verträgt. Bei der Programmierung der Webanwendung mit Leaflet war das JSON-Format die bessere Wahl. Bei der Arbeit mit Geodaten bietet sich ferner die Spezifikation GeoJSON an, um Daten mit Javascript zu verarbeiten.

Abb. 1: Die Grundlage der Visualisierung besteht aus einem Header und der Karte, die klar im Zentrum steht.

Mit dem Ziel vor Augen, die Visualisierung mit möglichst geringem Aufwand zu realisieren, sobald mir die Daten im richtigen Format vorliegen, habe ich ein XSLT-Skript erstellt, mit dessen Hilfe ich die Daten in GeoJSON transformieren konnte. Und tatsächlich: Die GeoJSON-Daten ließen sich ohne großen Aufwand in Form von Markern auf der Karte in meiner Webanwendung darstellen! Jedoch kam sofort sas nächste Problem auf: Sobald ich nicht ALLE in der GeoJSON-Datei enthaltenen Daten gleichzeitig abbilden wollte, stieß ich an Grenzen. Denn Datensätze innerhalb eines JSON-Dokuments lassen sich nicht mit Javascript abfragen, wie dies zum Beispiel bei einem XML-Dokument und einem XPath-Ausdruck möglich ist.

Die Lösung für dieses Problem fand ich in dem eBook Introduction to Web Mapping von Michael Dorman. Dank seiner Tutorials zu Leaflet und der Arbeit mit GeoJSON fand ich heraus, dass ich durch das Laden der GeoJSON-Daten in eine per SQL API abfragbare Datenbank mein Problem würde lösen können. Der Anhang von Michael Dormans eBook beinhaltet eine auf den ersten Blick recht komplizierte und auf mich zunächst einschüchternd wirkende Anleitung mit dem Titel Setting up an SQL API. Nach einigen weiteren erfolglosen Versuchen doch irgendwie ohne SQL API bestimmte Datensätze aus der GeoJSON-Datei herauszufiltern, entschloss ich mich schließlich dazu, einen Versuch zu unternehmen eine SQL API einzurichten. Dormans Disclaimer zu Beginn seiner Anleitung habe ich mir dabei stets vor Augen gehalten:

These instructions are more advanced than the material given in the main part of the book. If you are not familiar with the software components being used, be prepared for some amount of trial and error, which is part of the learning process.[4]

Es hat nichts auf Anhieb funktioniert und ich habe nicht alles zu 100% so umgesetzt, wie in Dormans Anleitung vorgegeben war, da ich erstmal alles nur bei mir lokal auf dem Rechner ans Laufen bringen wollte und daher nicht auf einen Cloud Service zurückgegriffen habe. (Das erste Kapitel der Anleitung direkt zu überspringen hat sich falsch angefühlt, aber am Ende hat es trotzdem funktioniert!). Aber nach „some amount of trial and error, which is part of the learning process“ hatte ich eine funktionierende SQL API, mit deren Hilfe ich in meinem Projekt weiterarbeiten konnte. Durch Nutzung der SQL API war ich nun in der Lage in meinem Javascript mittels SQL-Abfragen spezifische Teile der Daten liefern und auf der Karte anzeigen zu lassen (z.B. alle Orte an denen eine bestimmte Einheit zwischen 1943 und 1945 stationiert war oder alle Einheiten der Gattung „Luftwaffe“, siehe Abb. 2).

Abb. 2: Hier werden nur Marker angezeigt, die die Position von Einheiten der Gattung ‘Luftwaffe’ markieren.

Nachdem die größte technische Hürde genommen war, konnte ich dann recht unkompliziert mit Hilfe der Tutorials in Dormans eBook (besonders durch die Kapitel über Non-Spatial Queries und Spatial Queries) sowie das GeoJSON Tutorial von Leaflet Marker mit nach Einheiten spezifizierten Stilen setzen und Pop-Ups erstellen, die beim Klick auf einen Marker erscheinen und weitere Informationen geben (siehe Abb. 3). Features wie Menüs in der Sidebar in Kombination mit funktionalen Checkboxen konnte ich ebenfalls aus den Daten generieren lassen, sodass beim Anklicken einer Box in der Liste von Gattungen und Einheiten die entsprechenden Marker auf der Karte erscheinen. Sogar einen ersten Prototypen einer Umkreissuche konnte ich ohne großen Aufwand implementieren (siehe Abb. 4).

Abb. 3: So sehen die Pop-Ups aus, die nach Klick auf einen Marker weitere Informationen zu der an dem markierten Ort stationierten Einheit liefern.
Abb. 4: Um eine Umkreissuche durchzuführen, muss im Dropdown-Menü in der linken unteren Ecke der Karte die gewünschte Kilometerzahl ausgewählt werden. Beim Klick auf die Karte wird die angeklickte Stelle durch einen blauen Marker markiert und die Marker aus dem gewählten Umkreis erscheinen auf der Karte.

Das Drumherum: Meine Zeit in Rom

Am DHI habe ich mir mit zwei anderen Praktikant:innen ein Büro geteilt. Im Rahmen eines Praktikums am DHI Rom ist eine Arbeitszeit von vier Stunden am Tag vorgesehen. So bleibt neben dem eigentlichen Praktikum genügend Zeit für eigene Forschungsprojekte und Entdeckungstouren durch Rom. Unser Alltag sah meist so aus, dass wir bis zum Mittag zunächst die Arbeit für das Praktikum erledigten und uns danach noch einige Stunden eigenen Aufgaben widmeten. Hierbei konnten wir z.B. auf die Literatur in der sehr gut ausgestatteten Bibliothek des DHI Rom zurückgreifen.

Nachmittags und abends sind wir dann regelmäßig gemeinsam ins centro storico gefahren. So haben wir zum Beispiel zusammen die Galleria Borghese besucht und dort Berninis Statuen bewundert oder sind an Ferragosto über die Via Appia aus Rom herausspaziert. Darüber hinaus war das Essen in Rom ein besonderes Highlight. Während meiner sechs Wochen in Rom habe ich unglaubliche Mengen an Pizza und Pasta verzehrt und trotz meiner Aversion gegen das Kochen habe ich mir fest vorgenommen bei der nächsten Gelegenheit für meine Wuppertaler WG Spaghetti cacio e pepe zuzubereiten.

Impression von unserem Ausflug zur Via Appia.

Fazit

Die sechs Wochen am DHI haben mir großen Spaß gemacht. Die Arbeit an dem hier vorgestellten Projekt war spannend und ich konnte meine technischen Kompetenzen in Bereichen ausbauen, die z.B. auch für meine anstehende Master-Thesis nützlich sein werden. Bei Fragen und Problemen konnte ich mich jederzeit an meinen Praktikumsbetreuer, Jörg Hörnschemeyer, wenden. Gleichzeitig hatte ich die Freiheit, selbstständig an dem Projekt zu arbeiten. Auch abseits der Arbeit hatte ich eine sehr schöne Zeit in Rom. Durch die gemeinsame Unterkunft im Gästehaus des DHI sowie das gemeinsame Büro habe ich schnell engen Kontakt zu den anderen beiden Praktikant:innen geknüpft, was uns die Möglichkeit eröffnete, spontan gemeinsame Unternehmungen zu machen. Insgesamt kann ich am Ende des Praktikums auf eine tolle und lehrreiche Zeit zurückblicken. Ich freue mich sehr, dass ich die Chance hatte, in der Digital Humanitites-Abteilung des DHI Rom ein Praktikum zu absolvieren und kann daher allen Studierenden mit Interesse an Geschichte und Digital Humanities nur empfehlen, sich ebenfalls dort auf ein Praktikum zu bewerben.

[1] KML ist die Abkürzung für “Keyhole Markup Language”. Dabei handelt es sich um einen XML-basierten Standard für die Beschreibung von Geodaten. Die Dokumentation kann hier eingesehen werden: https://www.ogc.org/standards/kml. Zuletzt abgerufen am 12.09.2022.

[2] Leaflet: https://leafletjs.com. Zuletzt abgerufen am 01.09.2022.

[3] Siehe: Leaflet Quick Start Guide. https://leafletjs.com/examples/quick-start/. Zuletzt abgerufen am 01.09.2022.

[4] Dorman, Michael. Introduction to Web Mapping. Kapitel H.1 Setting up an SQL API, Introduction. Zuletzt aktualisiert am 11.07.2022. https://geobgu.xyz/web-mapping2/setting-up-an-sql-api.html#introduction-12. Zuletzt abgerufen am 01.09.2022.

Lehre @DH-BUW // Hello World! Webtechnologien für Geisteswissenschaftler*innen // Wintersemester 2021/2022 (hybrid)

Nadine Sutor

Im vergangenen Wintersemester hat sich der Lehrstuhl für Digital Humanities am Standort Wuppertal dazu entschieden eine praktische Übung für interessierte Studierende aus allen geisteswissenschaftlichen Disziplinen anzubieten, die einen ersten Einblick in die drei gängigen Webtechnologien HTML, CSS und JavaScript lernen, oder diese überhaupt erst einmal verstehen erhalten wollen.

Anspruch und Ziel der Übung

Der Fokus der Veranstaltung lag auf dem Entwurf, der Entwicklung und der Gestaltung einer kleinen, aber feinen interaktiven Webanwendung. Diese drei Stufen gliederten die alle zwei Wochen abgehaltene Übung und bildeten einen Workflow ab, in dem die jeweils passende Technologie vorgestellt, erlernt, diskutiert und ausprobiert wurde. Angefangen von den Basics in HTML und CSS über JavaScript bis hin zu Design-Tools sollten die Studierenden einen Einblick in die Frontend-Webentwicklung bekommen und deren Grundfunktionen und Zusammenspiel kennenlernen. Ziel war es, ein allgemeines Grundverständnis für Sinn und Zweck sowie Bedeutung (abseits der „normalen“ Webentwicklung im Berufsfeld der IT) dieser Technologien mit Blick auf die Umsetzung primär geisteswissenschaftlicher Forschungsprojekte zu schaffen. Denn man weiß, dass jedes Interface, welches Informationen bereitstellt und mit seinen Nutzer*innen in Kontakt tritt, nicht nur funktionell und interaktiv, sondern auch „gut aussehen“ und optisch ansprechend sein sollte. Darüber hinaus muss es seinen Inhalten, dem bereits wissenschaftlich erschlossenen und digital aufbereiteten Kulturerbe, in seiner digitalen Präsentation gerecht werden.

Exkurs: Was ist ein „Backend“?

Der Fokus der Übung lag klar auf der Oberflächengestaltung der Webanwendung. Damit die Anwendung reibungslos funktioniert und erreichbar ist, muss klar sein, was „hinter den Kulissen“ passiert. Daher wurde in einem kleinen Exkurs das sogenannte Backend als technische Infrastruktur thematisiert. Stephan Makowski, Wissenschaftlicher Mitarbeiter in den Digital Humanities an der Bergischen Universität Wuppertal (BUW), erläuterte das Client-Server Prinzip am Beispiel unseres Lehrstuhl-Servers. Anschließend erklärte er, was es mit dem sogenannten OSI-Modell auf sich hat, welches einem „Schicht-Prinzip“ folgt und sowohl den Netzzugriff, die Verbindung, als auch die Kommunikation zwischen Client, z.B. einem Browser, und dem Webserver abbildet. Darüber hinaus diskutierten wir einige gängige Protokolle wie HTTP zur Übertragung von Daten auf der Anwendungsschicht über ein Rechnernetz und SSL, ein Netzwerkprotokoll zur sicheren Übertragung von Daten.

HTML und CSS: Basics der Frontend-Webentwicklung

Anhand der Frankfurter Postzeitung [1], eine der ersten und langlebigsten Zeitungen im Erscheinungszeitraum von 1615 bis 1866, ging es in den ersten Einheiten darum ein HTML-Grundgerüst für den Dokumentenaufbau zu entwickeln. Jede*r der Teilnehmer*innen sollte je eine der vierseitigen Ausgaben aus dem Jahrgang 1618 und 1619 auf Basis von HTML so aufbereiten, dass sich die Inhalte via CSS einfach layouten und gestalten ließen.

Interaktive Komponenten mit JavaScript

Um die Anwendung mit einigen dynamischen Komponenten auszustatten und auf diese Weise  zu erweitern, sollten gemeinsam einige leicht umsetzbare Features entwickelt werden: Die Implementierung eines Buttons für das automatisierte Highlighting bestimmter Textstellen, sowie das ein- und ausblenden des Faksimiles und/oder der Transkription. Wie beim Zusammenspiel von HTML und CSS ging es in dieser Einheit um eine ähnliche Frage: Wie beeinflusst JavaScript die Dokumentstruktur und wie lässt sich diese manipulieren? Sowohl den Theorieblock, als auch die hands-on Session leitete Lena Stahn, Wissenschaftliche Mitarbeiterin des Lehrstuhls und Teil des Akademieprojekts „Niklas-Luhmann Archiv“. Die Studierenden sollten in mehreren praktischen Einheiten lernen, wie sie das DOM, das Document Object Model, anreichern und auf diese Weise bestimmte Elemente interaktiv gestalten.

Einzelobjektdarstellung des Jahrgangs 1618, Ausgabe 9. Transkription und Digitalisat wurden mit HTML, CSS und JavaScript umgesetzt und visualisiert.

GitHub-Repository und Versionierung

Direkt zu Beginn der Übung ging es uns, abseits der praktischen Arbeit am Code, um die Vermittlung des Mehrwerts und der Notwendigkeit eines Versionskontrollprogramms. Nach Aufsetzen eines projekteigenen GitHub-Repositorys versionierten und aktualisierten die Studierenden ihre Daten nach Abschluss der produktiven Arbeit mit dem GitHub-Client. Auf diese Weise blieb jede Änderung stets nachvollziehbar. 

Mockup-Design mit Figma

Als Alternative beziehungsweise Vorstufe zur unmittelbaren produktiven Arbeit am Code haben wir uns das Design-Tool Figma angesehen. Eine detailliert getreu ausgearbeitete Vorlage, ein Entwurf, ein sogenannter Mockup, dient als Orientierung im Entwicklungsprozess der späteren Website. Die Ausarbeitung eines solchen Mockups ist ein gängiger Schritt im UI/UX-Design und soll den Entwickler*innen in Form eines vorgefertigten Prototyps als Unterstützung dienen, um von dem Ursprungsdesign nicht abzuweichen.

Mit Figma erstellter Entwurf einer Startseite für die digitale Präsentation der Frankfurter Postzeitung.

Fazit

Das eingeholte Feedback von den Studierenden fiel überwiegend positiv aus Es entstand der Eindruck, dass vor allem die JS-Komponente für viele eine neue Thematik darstellte. Denn HTML und CSS hat jede*r „irgendwo schon einmal gehört“. Für einige war der Einstieg und die anschließende Weiterentwicklung des Datenmodells schwieriger. Mit angeleiteten Übungen, der eigenständigen praktischen Arbeit am Nachmittag und einigen Wiederholungseinheiten versuchten wir, ausreichend Hilfestellung zu geben und jede*n dort abzuholen, wo er/sie feststeckte. Aufgrund der überschaubaren Teilnehmerzahl gelang uns eine gute Einzelbetreuung. Kritik wurde bezüglich des Umfangs der behandelten Technologien geäußert. Die Anzahl der Tools und Programme wirkte vereinzelt überfordert und nach Meinung einiger Teilnehmer*innen bliebt zu wenig Zeit für eine tiefergehende Einarbeitung. Eine Fortsetzung und/oder thematische Erweiterung der Übung ist vorstellbar und könnte durch ein regelmäßiges Angebot weitere interessierte Geisteswissenschaflter*innen anlocken. In Abwechslung zu den bis dato behandelten Frontend-Technologien wäre die Konzeption einer Veranstaltung denkbar, die sich ausschließlich auf das Backend beschränkt und beispielsweise die in den Digital Humanities relevanten Datenbanksysteme und Server behandelt – abhängig vom jeweiligen Forschungsinteresse.


[1] Link zu den Digitalen Sammlungen der ULB Bremen: https://brema.suub.uni-bremen.de/zeitungen17/periodical/titleinfo/934741 (03.03.2022)

Webinar “eXist-db und XQuery”

Am kommenden Mittwoch und Donnerstag findet per Zoom eine interne Fortbildung zu dem Thema “eXist-db und XQuery” statt. Der Schwerpunkt am Mittwoch wird vor allem im Bereich der nativen XML-Datenbanken liegen. Primär soll erläutert werden, was Datenbanken sind und welchen Mehrwert diese bieten. Hierzu werden verschiedene einschlägige Datenbanken vorgestellt und deren Vor-/Nachteile erläutert. Der Fokus wird aber bei der eXist-db liegen. Im zweiten Teil des Mittwochs erfolgt dann eine kurze Einführung in XQuery sowie XPath.
Der Donnerstag wird dann vollumfänglich dazu genutzt die explizite Verwendung von XQuery anhand eines Beispiels exemplarisch durchzugehen. Hierzu wurde eine authentische Test-App erstellt, um praktisch die Verwendung von XQuery zu üben und nachvollziehen zu können. Der Nachmittag soll der Umsetzung und Beantwortung von speziellen Wünschen der Teilnehmer dienen.

Mittwoch

9:00 – 10:30h Einführung in native XML-Datenbanken
10:30 – 11:00h Pause
11:00 – 12:30h Einführung in XQuery & XPath

Donnerstag

9:00 – 10:30h Exemplarisches Beispiel für die Verwendung von XQuery
10:30 – 11:00h Pause
11:00 – Open End Benutzerspezifische Fragen (Facettierung, Github-Workflow, etc)


Vortragende: Lena Stahn, Stephan Makowski

Kontakt: Stephan.Makowski@uni-wuppertal.de

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search