Rotterdam Blog
Wer kennt es nicht: Die Reiseplanung vor dem Trip steht bevor und auf den verschiedensten Seiten sucht man sich die besten Sehenswürdigkeiten, Restaurants oder einfach die schönsten Orte raus. Um es den Studierenden nach uns zu vereinfachen, haben wir einen Travel-Guide für eine Reise nach Rotterdam zusammengestellt.
Im vierten Semester reisen die Studierenden im Modul Visualisieren nach Rotterdam, um eine Projektwoche durchzuführen. Dieses Programm nennt sich Sketchcity und ist Teil des von der EU geförderten Forschungsprojekt in der Lehre Erasmusplus.
Damit es die Studierenden nach uns einfacher haben, die Reise nach Rotterdam und ihre Zeit in Rotterdam zu planen, haben wir einen Reiseblog für alle zukünftigen MMP-Rotterdam-Trips gestaltet. Diese Tipps gehen von Restaurants, über Bars, bis zu Aktivitäten und den passenden Unterkünften. Auf einen Blick sollen die Studierenden ihre Rotterdam-Reise im Modul Visualisieren planen können.
Wir wünschen viel Spass!
Hier geht es zu der Webseite:
732614-5.web.fhgr.ch
(dbo)
Vorbereitung
Als uns die Idee gekommen ist, ein Rotterdam Blog zu erstellen, mussten wir uns als Erstes in die Thematik einlesen. Wir haben verschiedene Recherchen über die Stadt durchgeführt und haben uns im Voraus bereits einige Sehenswürdigkeiten, Restaurants und Bars, sowie auch Läden herausgesucht. Wir wollten vor unserer Reise nach Rotterdam bereits vieles erledigt haben, damit wir danach nur noch die Bilder sowie die finalen Texte abfüllen mussten. So konnten wir vor der Reise bereits vieles vorbereiten und erfassen so, dass wir uns zum Schluss hin nur noch um das Finish kümmern mussten.
Adobe XD
Bevor wir uns an die Webseite gesetzt haben, erstellten wir mit Adobe XD einen Prototyp. Dies diente uns zur einfachen Visualisierung unserer Idee und zur Überprüfung der Usability der Webseite.
Der Prototyp finden Sie unter diesem Link:
https://xd.adobe.com/view/1ce19bc0-6b1a-435c-8f49-adf71fe86855-49b2/?fullscreen
Inhalt verfassen
Um die Webseiten auch befüllen zu können, brauchten wir natürlich Texte sowie auch die passenden Bilder dazu. Da wir das Ganze bereits vor der Reise gut geplant haben, wussten wir bereits welche Inhalte wir auf die Webseite aufnehmen würden. So haben wir die Texte vorbereitet und konnten sie in Rotterdam lediglich noch anpassen.
Zwischendurch haben wir uns die Zeit genommen und sind die verschiedenen Orte, Restaurant und Läden abgelaufen, um das Ganze zu besichtigen und zu fotografieren. Leider war es uns aber nicht möglich, alle ausgewählten Sehenswürdigkeiten und Restaurants zu besuchen. Da die Zeit dafür nicht ausgereicht hat.
Umsetzung
Dank des Prototyps, welchen wir vorgefertigt hatten, konnten wir direkt nach der Installation der Webseite mit der WordPress Installation anfangen. Für die Seite selbst haben wir uns für den Divi Theme Builder entschieden. Bevor wir damit starten konnten, mussten wir uns aber einlesen und einige Tutorials dazu anschauen. Nachher ging es einfach ans probieren und erkunden dieses Websitebuilder.
Im Divi Builder arbeitet man mit Sektionen, Zeilen und Modulen. Diese können per Drag-and-drop an die gewünschten Stellen platziert werden. Das Geniale an diesem Builder ist, dass man in Echtzeit das Design entwerfen kann und sofort das Ergebnis sieht. Nichtsdestotrotz kann auch mit einem eigenen CSS das Design erweitert werden.
Zu Beginn haben wir die CI/CD Seite erstellt, auf welcher wir die Farben und alle Schriften für die Überschriften und den Fliesstext gesetzt. Sobald das erledigt ist, kann man das fertige CI/CD automatisch auf die nächsten Seiten adaptieren und so muss man nur einmal auf der ganzen Webseite die Schriftarten definieren. Ein weiteres Tool Element sind die globalen Elemente. Diese benutzt man für den Header, Footer oder Elemente, die auf gewissen Seiten immer gleich dargestellt werden sollen. Diese Funktion haben wir beim Footer verwendet. Wenn sich also je mal etwas ändern würde im Footer, muss das nur einmal anpasst werden.
Als das Design stand, haben wir alle Texte nochmals überarbeitet, korrigiert und dann an den entsprechen Positionen eingefügt. Das Gleiche gilt für die Bilder. Alle Bilder, die wir in Rotterdam gemacht haben, wurden im Lightroom überarbeitet, in Photoshop auf die richtige Grösse zugeschnitten und dann in der passenden Qualität fürs Web exportiert.
Danach wurden alle Button-Verlinkungen eingefügt und zum Schluss noch die Anpassungen für die Mobile-Version vorgenommen. Diese Einstellungen, musste man bei den verschiedenen Modulen einzeln vornehmen. Als dann alles stand, ging es an die Überprüfung auf den verschiedenen Geräten. Die Fehler wurden aber korrigiert und nun steht eine zu 98 % fertige Webseite zur Verfügung.
Zukunft
Die Webseite ist noch nicht ganz fertig, denn es fehlt der richtige Domain-Name und das Hosting. Aktuell läuft das Hosting über den Webserver der Fachhochschule Graubünden. Dies soll in Zukunft aber noch geändert werden, weshalb die Website nur zu 98% fertig ist.
Warum wir das erst in Zukunft machen werden?
Der Grund ist ganz einfach, wir haben beide noch keine anderen Webseiten erstellt und daher auch noch kein Hosting. Wir beide wollen aber in Zukunft unsere eigene Webseite erstellen und dann wird auch jeder von uns ein geeignetes Hosting haben. Wenn dies der Fall ist, werden wir die Seite über unser Hosting nehmen, und uns eine passende Domain kaufen. Somit ist der Reiseblog auch in ein paar Jahren noch vorhanden und wird nach unserer Studienzeit nicht gelöscht.
Fazit
Das Projekt war sehr aufwendig und hat einiges an Zeit und vor allem Vorbereitung gekostet. Da wir beide nicht in diesem Bereich arbeiten, war es auch eine Herausforderung die Webseite so aufzubauen. Da die Rotterdam Woche auch erst sehr spät im Semester stattfand, hatten wir das darauffolgende Wochenende noch einiges zu tun, bevor wir es abschliessen konnten. Auch wenn wir im Voraus bereits einiges vorbereiten konnten, standen noch ein paar Aufgaben vor uns, die erst am Ende fertiggestellt werden konnten. Aus diesem Projekt durften wir sehr viele Learnings bezüglich WordPress, Webserver, und allgemein Webseiten Builder mitnehmen. Diese Learnings dienen uns aber als sehr gute Grundlage für zukünftige Webseitenprojekte.