Die Idee:
Wie bereits im ersten Jahr wollte ich etwas mit Edinburgh machen. Damals hatte ich keine gute Idee. Doch dieses Mal wollte ich meinen vielen Bildern eine Plattform geben und mein Wissen teilen, welches ich mir über diese Stadt angeeignet habe. Daraus resultierte als erstes die Idee, einen Reiseführer zu schreiben. Doch irgendwie bin ich nicht so versiert im Programmieren. Bei meinem letzten Versuch, eine Website zu schreiben, bin ich doch an meine Grenzen gestossen. Die Idee einer eigenen Website liess mich nicht los und ich suchte mir jemanden, der mich beim Programmieren unterstützen konnte. Ich habe Lea meine Idee vorgestellt und sie hat mir zugesagt. Mir ist ein grosser Stein vom Herzen gefallen, denn mit Lea musste ich mir keine Gedanken machen, dass etwas nicht so geschrieben werden kann, wie es in meinem Kopf ausschaut. So hatte jede seinen Aufgabenbereich, Lea übernahm das Schreiben der Website und ich das Layout, Design und Erstellen von Content. Trotz der "Aufgabentrennung" unterstütze mich Lea, wenn ich Fragen hatte. (Lynn)
Layout und Design:
Als Vorlage nutze ich meinen Leistungsnachweis aus Mediengestaltung 1, als wir ein Layout für ein Magazin kreieren mussten. Die Schriften wollte ich genau so übernehmen (Playfair Display & Open Sans Condensed). Doch das Layout passte ich ein wenig an. Das Endresultat sollte minimalistisch, sauber, modern und strukturiert erscheinen. Ich entschied mich für einen weissen Background, um die Bilder ins Zentrum zu stellen, dabei versuchte ich auch bewusste Weissräume einzubauen. Die Schwarze Schrift unterstützt dies zusätzlich. Die Bilder habe ich mit einem Filter einheitlich bearbeitet, den ich privat für meine Fotografien nutze. Meine Vorstellungen skizzierte ich in Mockups, aus welchen Lea die Website programmierte. (Lynn)
Content:
Mein Ziel war es, Bilder und Infos spannend und modern darzustellen. Etwas vom Schwierigsten war es für mich, zu entscheiden, welche Orte ich thematisieren möchte, denn Edinburgh bietet so viel mehr, als ich hier präsentieren konnte. Am liebsten hätte ich über jeden noch so kleinen Ort geschrieben. Ich habe auch gefühlt von jedem Ort Fotos. Ich bin vielleicht etwas verrückt, was das Fotografieren in Edinburgh angeht - aber die Stadt ist einfach soooo fotogen! Die Selektion dauerte ihre Zeit und das Schreiben der einzelnen Beiträge ebenso. Jeder einzelne Beitrag besteht aus folgenden Elementen:
- Informationen über den Ort
- Kurzfassung des Haupttextes
- Bild Slider, der zeigt, wie es dort aussieht.
- Koordinaten und Wegbeschrieb
- Was gibt es Spannendes in der Nähe?
Diese Elemente können im Artikel zu oberst via Icons angewählt werden. (Lynn)
Programmierung:
Die technische Umsetzung dieses Projektes kann in fünf Schritte gegliedert werden.
1. Webdesign: Schon beim designen einer Webseite ist es wichtig im Hinterkopf zu haben, wie sich die Dinge umsetzen lassen. Deshalb war es sehr sinnvoll, dass Lynn das CICD des Projekt gemacht hat, ich dann aber das Designen der Webseite übernehmen konnte. So konnte ich sicherstellen, das alles was im Design ist, auch umsetzbar ist.
2. Theme erstellen: Ich habe schon viel Übung mit der Erstellung von Wordpress-Themes. Dennoch hat das erstellen dieses Themes viel Zeit gekostet. Das, da ich sehr viel Wert auf einen sauberen Code lege, so habe ich z.B. von Beginn an konsequent mit CSS-Variabeln gearbeitet und versucht ein schlaues System für verwendete Klassen zu haben. Ausserdem hat das erstellen der Karten (Kombi aus Bildern und einem SVG-Layer) und des Headers (manchmal alles in weiss, manchmal in Schwarz) viel Zeit gekostet. Entwickelt wurde lokal Visual Studio Code mit MAMP. Damit schon in der Entwicklungsphase erste Orte erfass werden konnten, habe ich die Webseite dann auf einen Live-Testserver gezügelt, auf den auch Lynn Zugriff hatte.
3. Mobileoptimierung: Da die Webseite schlussendlich als PWA laufen sollte, war mir eine exakte Mobileoptimierung sehr wichtig. Dadurch, dass ich mit CSS-Variabeln gearbeitet habe, ging das aber relativ gut. Das einzig etwas aufwändigere war die Umsetzung der Navigation.
4. PWA: Das ist das Herzstück der Webseite. Wir wollten nicht einfach eine Webseite machen, sondern noch ein Stück weiter gehen, deshalb haben wir uns für ein Progressive Web App entschieden. Die Elemente die hierfür nötig sind, habe ich nach der finalen Entwicklung der Seite implementiert, sprich das Manifest, die Icons und der Service Worker (dieser wurde selbst programmiert). Die Umwandlung der Webseite in ein PWA wäre alles in allem nicht so komplex gewesen, doch dadurch dass es sich um eine Wordpress-Webseite handelt, wurde vor allem der Offline-Teil zu einem ziemlichen "Chrampf". Ich musste schlussendlich alles was ich selber programmiert hatte (Manifest & Service Worker) wieder löschen und mit einem Plugin arbeiten, dass mich aber auch nicht zu 100% zufriedenstellt. Fazit für's nächste mal: Wordpress & PWA gehen noch nicht wirklich zusammen. Mit Seiten ohne CMS aber durchaus machbar.
5. Testing: Auch das war ein wichtiger Teil meiner Arbeit, wir wollten schliesslich dass die Anwendung +/- einwandfrei läuft. Desktop habe ich vorzu auf diversen Browsern (Safari, Brave, Firefox und Chrome) und Screengrössen bei mir am Laptop getestet. IOS konnte ich auf meinem Handy testen, für Andriod-Testings habe ich mir das Android-Studio heruntergeladen, auf welchem ich ein Android-Smartphone "faken" konnte. (Lea)
Kommunikation untereinander:
Für mich war das Zusammenarbeiten mit Lea sehr angenehm. Sie war jederzeit offen für meine Ideen und setzte alles so um, wie ich es mir vorgestellt hatte. Die Kommunikation war ebenfalls top, wir haben das Projekt jeweils in Meetings besprochen und uns gegenseitig stets via WhatsApp geupdatet. Zudem war es super, dass wir beide aus St.Gallen kommen - so konnten wir uns auch spontan treffen. (Lynn)
Durch die klare Aufgabentrennung hat sich die Arbeit sehr angenehm gestaltet. So konnten wir individuell in unserem Gebiet weiterarbeiten, und uns wenn nötig per WhatsApp oder Live austauschen. Auch die klare Terminsetzung, die wir uns von Beginn an vorgenommen haben, hat das arbeiten massiv erleichtert. (Lea)
