In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Im Produktionssemester des Master-Studiengangs »Interaktive Mediensysteme« bearbeiten wir die multimediale Aufbereitung von Geschichten und Schicksalen der Menschen im Dachauer Außenlagerkomplex Kaufering. Die aktuellen gesellschaftlichen Entwicklungen zeigen uns, wie wichtig es ist, einen interaktiven Erinnerungsort zu erschaffen, der auch zukünftige Generationen sensibilisiert.
Rund 23.000 Menschen wurden zwischen Juni 1944 und April 1945 in den Dachauer Außenlagerkomplex Kaufering transportiert. Eine interaktiven Karte visualisiert die Distanzen und die Masse an Menschen, die für das »Vorhaben Bunkerbau« deportiert wurden. Die Erinnerungen der Zeitzeugen an die Transporte, ihr Leben in den Lagern und das Arbeiten an den Bunkern wird, anhand von Bewegungsströmen, interaktiv zugänglich.
Für die Implementierung des Frontends wurde das Javascript-Framework VueJS verwendet. Dieses eignet sich zur performanten Erstellung von komponentenbasierten Singlepage-Webanwendungen. Das Frontend wurde mit dem Command Line Tool Vue CLI aufgesetzt. Routes wurden mit dem offiziellen VueJS Router definiert.
Herzstück der Applikation ist eine interaktive Karte des Anbieters »Mapbox«. Mapbox ist ein amerikanischer Anbieter, der das Erstellen von benutzerdefinierten Karten ermöglicht, um diese anschließend in Apps oder Web-Systeme einzubinden und zu erweitern.
»Mapbox GL JS« ist eine Javascript-Bibliothek, die auf »WebGL« basiert, um interaktive Karten zu rendern. Unter Einsatz des npm-Moduls »mapbox-gl« kann eine Karten-Instanz erzeugt werden.
Die Gestaltungselemente wurden nach dem Baukastensystem »Atomic Design« angelegt. Sowohl im Design als auch in der Programmierung wurden die Komponenten modular eingesetzt. Neben Buttons, Icons und Pop-Ups, existieren Komponenten zu den Kernelementen der Karte und Timeline.
eine kleine Demo findet ihr im untenstehenden Video: