Madeira – ein digitales Tagebuch

Madeira - ein digitales Tagebuch

Madeira ist eine kleine Insel im atlantischen Ozean, die zu Portugal gehört. Während den Semesterferien verbrachte ich eine Woche auf dieser Insel und erkundete sie mit dem Auto. Dabei entstanden zahlreiche Bilder. Da nicht alle in mein Fotoalbum passten, erstellte ich ganz einfach noch ein digitales Tagebuch.

Schnell entschied ich mich, eine Webseite von Grund auf zu programmieren, um meine Web-Fähigkeiten aufzufrischen. So entstand ein interaktives Tagebuch meiner Reise.

Doch diese Webseite ist nicht nur einfach eine simple Galerie. Während du durch den Text mit den Bildern scrollst, siehst du in der Desktop-Ansicht auf der rechten Seite eine Landkarte von Madeira. Diese zeigt dir auf einen Blick an, wo die Fotos entstanden sind.

Hier geht’s zur Webseite: https://madeira.dariogartmann.ch

(mou)

00 | Idee
Meine Urlaubsbilder klebte ich in ein analoges Album. Doch nach tagelangem Sortieren waren immer noch Unmengen an Bildern übrig, die es nicht ins Album geschafft hatten. Deshalb kam mir die Idee, diese digital auf einer Webseite darzustellen. Die Idee mit der Landkarte kam mir, da wir einen Roadtrip auf einer sehr überschaubaren Insel gemacht hatten. So kann der Benutzer sich die Insel viel besser vorstellen.

01 | Umsetzung
Die Bilder schoss ich anfangs September auf meiner Reise nach Madeira. Diese bearbeitete ich anschliessend zu Hause. Dann begann dieses Projekt für mich mit der Planung der Inhalte. Ich rief mir unsere Roadtrip-Route wieder in Erinnerung. Basierend auf der Route markierte ich die wichtigsten Stopps auf der Karte und suchte mir meine Lieblingsfotos der jeweiligen Orte aus. Danach begann die grafische Umsetzung. Mit Illustrator habe ich eine schematische Karte der Insel mit allen relevanten Ortsangaben erstellt. Diese exportierte ich als SVG, um sie mit Javascript manipulieren zu können.

In meiner ersten Version erstellte ich für die Reiseroute einen Pfad und programmierte eine Funktion, welche diesen basierend auf der momentanen Scroll-Position füllt. Doch nach einfügen des Texts und sämtlicher Bilder merkte ich, dass der Pfad dann nicht mit dem momentan dargestellten Text übereinstimmt. Ich entschied mich, diese Programmierung komplett neu zu entwickeln.
Dazu gehörte auch, dass ich in Illustrator den Pfad in mehrere Teile unterteilte. Nun gab ich jedem «Kapitel» bzw. jedem Abschnitt der Route eine Id, um sie zu verbinden. Nun passte der Pfad immer zu dem Text. Dies war die grösste Challenge dieses Projekts, doch ich finde ich habe eine sehr gute Lösung programmiert. Das Javascript versuchte ich so sauber und modular wie möglich zu schreiben. So kann man zum Beispiel ganz einfach ein neues Kapitel und einen neuen Pfadabschnitt einfügen, und das Script übernimmt es automatisch. Dies ermöglicht es mir auch, diesen Code für zukünftige Projekte zu verwenden.

02 | Learnings
In diesem Projekt konnte ich – ganz im Sinne des Modulnamens – viele Aspekte der kreativen Arbeit anwenden: Fotografie, Grafik-Design und Webentwicklung. Mir gefiel es sehr, eine Webseite samt allen Elementen vom Grund aus aufzubauen. Hier zwei konkrete Learnings, die mir definitiv in Erinnerung bleiben werden:

  • Um Pfade mit Javascript manipulieren zu können, müssen sie ein «Compound-Path» sein.
  • Saubere Organisation und Unterteilung der Funktionen in JS ist sehr wichtig.
  • Man braucht nicht für alles jQuery 😉 Diese Webseite ist 100% Vanilla-Javascript.