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