Thesis (28.01.2024)

KW 7 Dokumentationsvideo

KW 6 Ausstellung

Für die Bacheloraussstellung realisiere ich den Ausstellungsentwurf

KW 5 Verteidigung

Nach Abgabe der Thesis bereite ich mich auf die Präsentation und Verteidigung der Arbeit vor.
Für die Präsentation erstelle ich noch Infografiken und trage alles zusammen.

Hier noch ein Link zum Download der Präsentation als HTML mit Animationen und Videos:

https://www.dropbox.com/scl/fo/8m2zqyoe8m8lzoq79z8a2/h?rlkey=ph57ydcflc6wj8cq1yzwqflou&dl=0

KW 4 Abgabe Thesis

Die letzten zwei Wochen wurde nun das Projekt in der Thesis zusammengefasst und dokumentiert und die letzten Arbeiten am Projekt vorgenommen.

Es entsteht noch eine Landingpage auf der ein kurzes Intro gegeben wird.

KW 3

Da mein Plan, früh mit der Thesis fertig zu werden, nicht wirklich aufgegangen ist, heißt es jetzt schreiben, schreiben, schreiben.

Nachdem letzten mal Feedback im Seminar wurde angesprochen, doch noch eine sechste Storyline hinzuzufügen, die die Opfer des Kriegs beinhalten soll. Hierfür habe ich von Celina einen Kontakt zu Nancy Heller bekommen. Eine sehr nette und kooperative Stolperstein-Patin aus New York. Sie sendet mir erneut viel Material, welches ich durcharbeite und mich dazu entschließe die Geschichte ihres Vaters Kurt Wilhelm Freund zu erzählen.

KW 2

Für die letzte Besprechung im Seminar habe ich nun die Map und die fünf Storylines fertig. 

Für den Entspurt gibt es noch einige Kleinigkeiten auf der Website:

Intro/Starterpage

Navigation

Footer

Mute/Unmute -> O-Ton/Musik

Loading Screens

Neben der Ausarbeitung der Storylines in Webflow befasse ich mich mit Entwürfen für Ausstellung.

KW 1

Neues Jahr, neues Glück! Ich finde flourish.studio. Ein Tool, mit dem ich genau die Karte erstellen kann, die ich mir gewünscht habe, und das ohne Code.

Ich nutzte die „simple point map“ Vorlage und einen Timeslider. 
Hier kann ich nun die Daten aus meiner Datenbank einfügen und kann fast alle Elemente auf der Karte eigen gestalten.

Die standard Ansicht ist zeigt aufploppende Punkte über die Zeitleiste.

Ich teste auch noch eine zweite Variante, die später auch mit in die Website kommt. Hier sind die Punkte animiert und man kann die genauen Wege der Personen besser nachvollziehen.
Hierfür musste ich noch Linien einfügen die dauerhaft das Netz der Bewegungen aufzeigen.

Dafür habe ich mir geojson.io zur Hilfe genommen.

Mit geojson.io kann man Koordinaten eintragen und erhält daraus verbundene Linien und kann diese exportieren.

KW 52

Zu Weihnachten und dem Jahreswechsel nehme ich mir ein paar entspannte Tage und arbeite lediglich an der Datenbank der Mikrogeschichte weiter.

KW 51

Ich bin einige Tage krank und arbeite ein wenig an der Datenbank zur Mikrogeschichte weiter.

KW 50

Um die Audiospur auf der Website muten zu können, brauche ich einen Button der das ermöglicht. 
Über das Lautsprechersymbol und etwas Custom Code ist das möglich.

KW 49

Die erste Story von Albert Rodermund setzte ich nun in Webflow um, da ich testen möchte ob auch wirklich alles so funktioniert wie ich es mir vorstelle. Über ElevenLabs, ein KI Voice Generator, kann ich sehr gute Erzähler*innen für meine Geschichten erzeugen.

Da ich möchte, dass die Audiospur erst dann los geht, wenn man zu einem bestimmten Teil der Geschichte kommt, nutzte ich ein Embed-Element, in dem ich über einen Dropboxlink meine Audiofile einfügen kann.

Das Element wir dann auf der Seite positioniert und die Transparenz auf 0 gesetzt. So ist es nicht 'Hidden' und reagiert trotztdem, auch wenn es nicht sichtbar ist.

KW 48

In Figma erstelle ich eine erste statische Variante, wie eine der Geschichten im Web aussehen könnte und mache mir Gedanken über Font und Farben.

Da ich eine Karte mit einem Filter, bzw. Slider haben möchte, mit dem man die angezeigten Ereignisse definieren kann, muss gecodet werden. 

Hierfür habe ich das Beispiel für einen Timeline Slider von Mapbox her genommen und probiert, dies auf meine Datenbank anzuwenden. 

Alleine habe ich es leider nicht geschafft da ich nicht viel Erfahrung mit Coding habe. Allerdings hat mir Moritz geholfen und wir haben es geschafft meine Datenbank auf die Karte zu bringen. 
Aktuell kann man über den Slider auswählen, welches Ereignis angezeigt wird.
Der nächste Schritt ist es einen Zeitraum definieren zu können, der betrachtet werden kann.

Create a time slider

body {

margin: 0;

padding: 0;

}

map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

.map-overlay {

font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;

position: absolute;

width: 25%;

top: 0;

left: 0;

padding: 10px;

}

.map-overlay .map-overlay-inner {

background-color: #fff;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

border-radius: 3px;

padding: 10px;

margin-bottom: 10px;

}

.map-overlay h2 {

line-height: 24px;

display: block;

margin: 0 0 10px;

}

.map-overlay .legend .bar {

height: 10px;

width: 100%;

background: linear-gradient(to right, #fca107, #7f3121);

}

.map-overlay input {

background-color: transparent;

display: inline-block;

width: 100%;

position: relative;

margin: 0;

cursor: ew-resize;

}

.von-bis-wrapper {

display: flex;

column-gap: 20px;

}

Makrogeschichte von 1939 bis 1948

Von

Bis

// TO MAKE THE MAP APPEAR YOU MUST

// ADD YOUR ACCESS TOKEN FROM

// https://account.mapbox.com

mapboxgl.accessToken = 'pk.eyJ1IjoibW9yaXR6amFobiIsImEiOiJjbHA1eHQyZ3ExeHloMmlycGFvMmQyNTd0In0.P-XW3nOBZg7O-tJCSs4yZg';

const map = new mapboxgl.Map({

container: 'map',

// Choose from Mapbox's core styles, or make your own style with Mapbox Studio

style: 'mapbox://styles/moritzjahn/clpi8v6tt00kl01qteiu4hckb',

projection: 'winkelTripel',

center: [15, 40],

zoom: 3

});

/**

* DATES USAGE:

* dates.arr -> Array mit allen Daten 1:1 wie im Json

* dates.values[][] -> Erste Klammer => Eintrag 111 ; Zweite Klammer => [0] = YYYY ; [1] = MM ; [2] = DD

*/

let dates = {

arr: [],

values: []

};

let filteredDates = []

/* Filter Dependencies */

let zeitspanne = {

von: null,

bis: null

}

let addedOptionsYears = {

von: [],

von_ID: „zeitspanne_von“,

bis: [],

bis_ID: „zeitspanne_bis“

}

document.getElementById(addedOptionsYears.von_ID).addEventListener(„change“, (e) => {

zeitspanne.von = e.target.value

updateVonBis()

})

document.getElementById(addedOptionsYears.bis_ID).addEventListener(„change“, (e) => {

zeitspanne.bis = e.target.value

updateVonBis()

})

function updateVonBis(e) {

filteredDates = []

if(zeitspanne.von > zeitspanne.bis) {

alert('„Vor“ darf nicht nach „Bis“ sein!')

zeitspanneReset()

}

dates.values.forEach((element) => {

if (element[0] >= zeitspanne.von && element[0] {

d3.json(

'./data/map.geojson',

jsonCallback

);

});

function jsonCallback(err, data) {

if (err) {

throw err;

}

data.features = data.features.map((d) => {

dates.arr.push(d.properties.Wann + )

dates.values.push(d.properties.Wann.split(„-“))

d.properties.Wann +=

return d;

})

/**

* -----------------------------------

* FILTER AND VALUES READY

* -----------------------------------

*/

document.querySelector(„#slider“).setAttribute(„max“, dates.arr.length)

zeitspanneReset()

updateVonBis()

dates.values.forEach((element) => {

if(!addedOptionsYears.von.includes(element[0])) { // ist die Jahreszahl noch nicht hinzugefügt?

addedOptionsYears.von.push(element[0]) // zufügen, um sie beim nächsen mal zu skippen

let option = document.createElement(„option“) // erstellen html element

option.setAttribute(„value“, element[0]) //setzen value auf Jahr

option.innerHTML = element[0] + // setzen angezeigten Text auf Jahr

document.querySelector(„#“ + addedOptionsYears.von_ID).appendChild(option) // fügen das erstellte Element zur Selection hinzu

}

if(!addedOptionsYears.bis.includes(element[0])) {

addedOptionsYears.bis.push(element[0])

let option = document.createElement(„option“)

option.setAttribute(„value“, element[0])

option.innerHTML = element[0] +

document.querySelector(„#“ + addedOptionsYears.bis_ID).appendChild(option)

}

// gefilteres Array erstellen

if (element[0] >= zeitspanne.von && element[0] {

const sliderValue = parseInt(e.target.value);

filterBy(dates.arr[sliderValue]);

});

}

KW 47

Ich suche nach alternativen für Mapbox und stoße auf Framer und Pageflow. 

Leider stelle ich sehr schnell fest, dass mein Vorhaben die Möglichkeiten der beiden Programme überschreitet. 

Demnach geht es doch zu Webflow und ich teste in wie fern sich Audio, um meine Geschichten zu erzählen und eine atmosphärische Hintergrundmusik zu geben, einbinden lässt. 

Custom Code ist dabei leider unumgänglich, da sich keine Audiofiles in Webflow hochladen lassen. Doch über einen Dropbox Ordner ist es möglich.

Bisher ist mir allerdings noch nicht gelungen eine Audiodatei abzuspielen, sobald ich an einen bestimmten Punkt auf der Website komme. Hieran wird noch gearbeitet.

Neben Kepler teste ich andere Möglichkeiten meine Daten in eine Karte zu bekommen. Hierfür teste ich Datawrapper und suche noch andere Map-Tools wie altova.com, amcharts.com, tableau.com. 

Dabei finde ich leider heraus, dass ich nicht um eine eigen gecodete Karte vorbei komme. 

Demnach geht mein Weg hierfür in Mapbox GL JS weiter.

Auf meine Anfrage an das KZ Flossenbürg hat sich Michael Kempf gemeldet. Wir hatten ein Zoom-Gespräch und er hat mir Feedback zu meinem Vorhaben gegeben.

Er hat mir geraten auf das Persönlichkeitsrecht zu achten, damit sollte ich aber kein Problem haben, da mir die Personen aus eigenen Stücken das Material gegeben haben mit dem ich arbeite. Somit haben sie durch das übermitteln bereits eine Zustimmung zur Verwendung gegeben.

Er hat sich zudem positiv auf die KI Generative Ebene geäußert, das hat er bisher bei historischen Arbeiten noch nicht gesehen und ist der Meinung, dass es die erzählerische Ebene, die durch Erinnerungen ja auch manchmal etwas verschwommen ist, bestärkt. 

Eventuell muss ich die schrecklichen Taten der Nazis, in der Makrogeschichte, noch etwas mehr hervorheben. Manuel meinte, ich müsste aufpassen, dass diese Geschichten und Menschen von denen ich erzähle, nicht zu sehr als Opfer rüber kommen. Die wahren Opfer werden in meiner Arbeit nur wenig thematisiert. Es gibt auch eine gesellschaftliche Schuld. #FalseBalance

Input: 
Wer spricht denn da?
Auch im 3. Reich war 12 mal Spagelzeit
Unsere Mütter unsere Väter, Tom Schilling

Ich erweitere meine Datenbank mit den Erzählungen und gesammelten Dokumenten.

KW 46

Für die Mikrogeschichten beginne ich Medien für das Storytelling zu erproben.

Als erstes probiere ich ein Video mit Originalmaterial sowie KI generierten Illustrationen, die danach für das Video animiert werden.

Die Illustrationen erstelle ich mich Adobe Firefly, ein Referenzbild für den Stil und der richtige Promt ergeben einen einheitlichen Illustrationsstil.

Promptbeispiel:

Referenzbild:

Ich erweitere meine Datenbank mit den Erzählungen und gesammelten Dokumenten.

KW 45

Um den Geschichten und gesammelten Bildmaterial mehr leben einzuhauchen erprobe ich KI, die Bild animiert. 

Hierfür teste ich Runway.gl und Pika.

Die bereits eingetragenen Daten aus meiner Datenbank visualisiere ich erstmals auf einer Karte mit Kepler.gl

Hierbei habe ich zum einen die Makrogeschichte (rote Punkte) und die Mikrogeschichte (bunte Punkte, pro Person eine Farbe)

KW 44

Anfrage an Herr Prof. Dr. Skriebeleit aus Flossenbürg und Nina Lutz vom Dokumentationszentrum Nürnberg.

Ich beginne, die Makrogeschichte sowie die Geschichten der einzelnen in einer Datenbank zu erfassen.

Die Daten der Mikrogeschichte einzugeben, soll sich aber noch über mehrere Wochen ziehen.

Eine erste Idee, wie die Ausstellungssituation aussehen könnte habe ich kurz Skizziert.

Über Projektoren wird zum einen eine Karte angezeigt, auf der die globalen Zusammenhänge von Makro- und Mikrogeschichte dargestellt und interaktiv Erlebbar gemacht werden. Zum anderen bekommt man zu den Mikrogeschichten mehr Informationen und die Geschichten werden erzählt.

KW 43

Ich habe die Möglichkeit mit drei Zeitzeugen zu reden und mir Ihre Erinnerungen an den zweiten Weltkrieg anzuhören.

Hierfür überlege ich mir Fragen an sie.

Mein Archiv ist mittlerweile gewachsen.

KW 42

Auf meinen Aufruf habe ich von ca. 30 Leuten Daten, Hinweise oder Zeitzeugen bekommen. Diese heisst es nun zu digitalisieren, in eine erste Struktur zu bekommen Zeitzeugen zu kontaktieren und Interviews zu führen.

Aussschnitt der Daten auf einem Miroboard.

KW 41

Um weitere Geschichten zu sammeln starte ich einen Videoaufruf auf Sozial Media

Ausgangspunkt ist eine kleine Sammlung an Briefen aus der Kriegsgefangenschaft und Fotografien aus Frankreich, von meinem Opa, am Falkgeschütz.

Hier ein kurzer Einblick.

Expose