Abenteuer Dog Rose

IDEE

Bereits zu Beginn meiner Reise war mir klar, dass ich mein Abenteuer für andere erlebbar machen möchte. Jetzt fehlte nur noch das richtige Format.
Zuerst sollte es ein Video werden, danach eine Reportage, später ein Online-Tagebuch und zum Schluss eine sogenannte Scrollstory.

 

STARTSCHWIERIGKEITEN

Als die Idee einer Webseite stand, suchte ich nach guten Beispielen, an denen ich mich orientieren konnte. Nach dem ersten Gespräch mit Thomas Weibel leuchtete mir sein Rat, die Website selbst zu programmieren, total ein. «Ein bisschen HTML und CSS und dann noch ein bisschen Javascript» – easy, dachte ich.

Also machte ich mich hoch motiviert daran, die Scrollstory (und mein Portfolio) von Grund auf selbst zu bauen. Als ich nach über 30 Stunden noch wirklich nirgends war (sieh selbst: https://650996-12.web1.fh-htwchur.ch/scrollstory/), musste ich mein Vorhaben vorerst begraben. Sorry, Thomas. Das wird wohl nichts. An diesem Punkt musste ich nochmals viel Zeit in die Recherche für einen anderen Lösungsansatz investieren, damit ich mein Projekt dennoch im gewünschten Format umsetzen kann.

Da ich auch künftige Projekte auf meinem Portfolio zugänglich machen möchte, war nun ein CMS Grundvoraussetzung. Als ich bei meiner Recherche dann auf Divi Elegant Themes für WordPress stoss, ergab sich für mich die perfekte Kombination. Mit Divi kann ich mein Portfolio und die Scrollstory erarbeiten.

 

KONZEPT

Damit die Scrollstory in einem einheitlichen Style daherkommt, habe ich viel Zeit in die Erstellung eins Stylesheets gesteckt. So konnte ein visueller roter Faden für die gesamte Geschichte erarbeitet werden.

Neben dem visuellen Teil war auch das Storytelling enorm wichtig. Also habe ich mir zu Beginn klare Aussagewünsche aufgeschrieben. Mit dem im Sommer gesammelten Material (Bilder, Videos, Sprachnachrichten, Notizen), konnte ich der Geschichte an gewissen Stellen auditive sowie visuelle «Leckerli» einbauen.

 

UMSETZUNG

Text
Der Text war die Grundlage für die Erstellung der Scrollstory. Sie sollte persönlich, spannend und gleichzeitig informativ sein. Aus diesem Grund war es mir auch wichtig, dass ich den Text mehrfach zum Gegenlesen verschickte. Nur so konnte ich meine persönlichen Anforderungen erfüllen.

Schwierig fand ich, mein Erlebnis aus einer gewissen Distanz zu analysieren. Was erzähle ich, welche Infos sind unbedingt nötig und was ist überflüssig? Hier haben mir die zu Beginn definierten Aussagewünsche sowie eine Gliederung mit Stichpunkten sehr geholfen.

So konnte ich Absatz für Absatz eine stimmige Geschichte kreieren. Geholfen hat mir hier besonders der Blick einer aussenstehenden Person. Wo gibt es Unklarheiten, was fehlt dem Text und was ist zu viel.

Divi
Mit dem Builder von Divi konnte ich meine Seiten visuell so gestalten, wie es mir passt. Es gibt viele Funktionen für Animationen, mit denen praktisch jeder Baukasten angesprochen werden kann. Und das Beste: Ich sehe immer gleich, was passiert. Zudem bietet es die Möglichkeit, handgeschriebenen Code in die Webseite einzubinden.

Wo Thomas aber recht hatte, war beim Punkt, dass mich das Erlernen eines Tools auch sehr viel Zeit kostet. So «knübelte» ich zu Beginn ewig an gewissen Einstellungen. Es dauerte gefühlt genau so lange, bis ich verstand, wo ich was finde und welches Kästchen was beeinflusst.

Auch zum Schluss habe ich unwissend immer wieder irgendwelche Grundeinstellungen geändert. Sektionen waren zwar im Builder vorhanden, aber auf der Webseite nicht zu sehen. Mit nur einem falschen Klick konnte ich mir unbemerkt ein Haufen zusätzlicher Arbeit aufbrummen. Denn der Rückbau kostete mich dann jeweils sehr viel Zeit.

Zusätzliches CSS
Aufgrund meines Stylesheets wurden meine Programmierkenntnisse doch noch herausgefordert. Da in Divi dann doch nicht ganz alles möglich ist, habe ich den Style für meine Textboxen selbst programmiert. Hier stiess ich auf unterschiedliche Hürden. Zuerst musste ich herausfinden, wie ich das überhaupt mit CSS anspreche und welche Elemente es braucht. Als ich dann dank Hilfestellung endlich den Code hatte, kam die nächste Hürde. Beispielsweise kann ich aus irgendeinem Grund «Padding-Bottom» nicht ansprechen. So musste ich über die gesamte Site mit <br> arbeiten, damit der Frame/Border nicht über die letzte Textzeile läuft. Das einfach, weil meine Kenntnisse nicht ausreichen, um das grundlegende Problem zu erkennen und beheben.

Fotos/Illustrationen
Da ich mich für den minimalistischen Style entschied, grauste es mir davor, einfach alle möglichen Bilder in die Geschichte einzubauen. Es würde in meinen Augen einfach «zu wild» werden. So startete ich mit einigen Illustrationen und merkte schnell, dass dies der Rahmen sprengen würde.

Also entschied ich mich, die einzelnen Fotos in schwarz-weiss zu nutzen und mit den farbigen Rahmen einen einheitlichen Look zu schaffen.

Server-Struggle
Da ich mit dem Bau meiner Webseite auf einem Server der Fachhochschule begann, musste ich diese dann noch auf einen externen Server umziehen. Eigentlich hätte das in rund 10 Minuten – ohne Probleme – funktionieren sollen.

Aber nicht so bei mir. Da meine IP-Adresse des Servers nicht richtig eingestellt war, konnte ich meine Website nicht erreichen. Beim Installieren von WordPress erhielt ich stets eine Fehlermeldung. Auch der Versuch, die Installer.php aufzurufen blieb erfolglos. Ich versuchte unterschiedliche Möglichkeiten, meine Website umzuziehen. Und diese Möglichkeiten versuchte ich jeweils mehrmals. Ohne Erfolg. Nach Stunden der Verzweiflung nahm ich Kontakt mit dem Webhosting-Anbieter auf.

Nach zwei Telefonaten, unnötigen Stunden der Verzweiflung und meinem Entscheid, mich nicht mehr abwimmeln zu lassen, konnten sie mir endlich sagen, was das (banale, aber nervenaufreibende) Problem war.

 

LEARNINGS
Bei einem nächsten Projekt würde ich zu Beginn mehr auf mein Bauchgefühl hören. So hätte ich mir einige Stunden und Nerven (beim Programmieren) sparen können. Denn eigentlich wusste ich bereits von Anfang an, dass ich zu wenig Wissen, Interesse und Geduld habe, um allein ein Portfolio und eine Scrollstory zu programmieren.

Für allfällige Probleme finde ich gerne allein eine Lösung. Meistens funktioniert das auch gut. So verliere ich aber oft unglaublich viel Zeit und schaffe es dann sowieso nur mit Hilfe. Hier würde ich wohl speditiver vorankommen, wenn ich mich mal schneller an Drittpersonen wende, welche mich bei meinem Problem unterstützen.

Zudem habe ich mich oft in Details verloren und das Wesentliche vergessen, um rasch voranzukommen.

Ein «everlasting» Learning von mir ist das Zeitmanagement. Dieser Punkt begleitet mich in jedem Projekt. Auch wenn ich bereits früh beginne, drängen sich während der Entstehung andere modulbedingte Prioritäten in den Vordergrund. So hätte ich nicht unbedingt mehr Zeit investiert, aber das Erarbeiten hätte gewiss ohne oder zumindest mit weniger Zeitdruck sein können.

Ein wichtiges Hilfsmittel, welches ich auch künftig wieder so verwenden würde, ist das Stylesheet. Es ist eine gute Unterstützung und hilft, zielorientiert zu arbeiten. Teilweise hat es mich aber auch eingeschränkt. Besonders bei der Farbgebung und der Darstellung einzelner Elemente. Hier würde ich es mir künftig offenlassen, das Stylesheet stets anzupassen oder zu übergehen. So hätte ich während dem Bau der Webseite mehr Möglichkeiten in der Gestaltung und könnte technische Problem einfach umgehen.

 

NEXT
Da ich noch viel Material von meiner Reise habe, möchte ich dieses in einem nächsten Schritt gerne noch in die Scrollstory einarbeiten. So könnten noch mehr visuelle und auditive «Leckerli» eingebaut werden. Zudem würde ich die Scrollstory weiter verfeinern und mich noch stärker mit den Übergängen und Animationen auseinandersetzen. Weiter gibt es noch ein paar Kleinigkeiten, die ich anpassen möchte wie beispielsweise das Favicon oder die Dot-Navigationsleiste.