Hike at Home
Das Auspowern in der Höhenluft und das Kommen und Gehen von einzigartigen Eindrücken ist Balsam für die Seele. Kein Wunder wird Wandern beliebter und gewinnt immer mehr Fans.
Auch wir sind begeisterte Berggänger. Allein im Churer Rheintal gibt es dutzende Gipfel und Aussichtspunkte, die man unserer Meinung nach gesehen haben muss. Um unseren Mitmenschen die Touren auf die Churer Hausberge schmackhaft zu machen, haben wir uns entschieden, auf unseren Wanderungen die schönsten Eindrücke fotografisch festzuhalten. Die einzelnen 360° Bilder haben wir in eine Tour umgewandelt und diese in unserer Website hikeathome.ch eingebunden.
Die virtuelle Wandertour soll zum einen Menschen von der Schönheit unserer Bergwelt begeistern. Touristen können das Churer Rheintal als Wanderparadies bereits im Voraus abchecken und sich einen konkreten Überblick verschaffen. Auch viele Einheimische waren selbst noch nie auf den Bergen, neben denen sie jede Nacht einschlafen. Mit unserer Tour wollen wir den Reiz dafür ankurbeln. Zum anderen soll es körperlich eingeschränkten Menschen die Möglichkeit geben, die Wanderung hautnah mitzuerleben. Durch die 360° Funktion in der virtuellen Tour kannst du dich vor Ort umsehen, von Spot zu Spot verschieben und die Umwelt wahrnehmen, als wärst du gerade dort.
Viel Spass beim Erkunden!
(bas)
Idee
Wie bereits ausgeführt, möchten wir mit «Hike at Home» alle Menschen ansprechen. Seien es begeisterte Bergsteiger:innen/Wandervögel oder Personen, die die Wanderung nicht machen können oder wollen und trotzdem in Genuss der wunderschönen Aussicht kommen möchten. Mit der virtuellen Tour, welche wir in unsere selbsterstellte Landingpage eingebunden haben, kann jede:r Interessierte unsere Wanderungen nachverfolgen und von Spot zu Spot hüpfen, um sich dort nach Belieben umzusehen.
Vorbereitung
Landingpage
Für die Landingpage galt es zuerst rauszufinden, mit welcher Library wir arbeiten möchten. Die gesamte Seite alleine zu “programmieren” wäre möglich gewesen. Trotzdem hatten wir das Wissen, dass es passende Lösungen für unsere Anforderung geben würde, welche uns viel Arbeit abnehmen könnten. Durch Recherche kamen wir zum Entschluss, dass fullPage.js die beste Lösung ist. Es ist eine der bekanntesten und bewährtesten Libraries für die Fullscreen Darstellung von Bildern und passt wunderbar zu unserem Projekt.
Tour
Für die Tour suchten wir nach einer Lösung, die möglichst benutzerfreundlich in der Handhabung ist und auch im Browser reibungslos funktioniert. Nach intensiver Suche und Vergleichen mit anderen Optionen haben wir uns für ein kostenpflichtiges Programm entschieden.
Umsetzung
Landingpage
Zuerst mussten wir uns mit der Library fullPage.js befassen und uns ins Handbuch einlesen. So konnten wir dann unsere Landingpage erstellen und auf unsere Bedürfnisse anpassen. Gewisse Punkte wie z.B. das «about» haben wir selbst mit unseren Javascript-Skills aus IM 2 programmiert. Zudem haben wir Graubünden Ferien mit den entsprechenden Wanderrouten im Header verlinkt, um so Interessierten die Suche ein wenig zu vereinfachen.
Beim Design haben wir uns für ein schwarzes Layout entschieden, damit die ganze Aufmerksamkeit den Bildern gilt. Das Logo funktioniert bestens weiss auf schwarz und wirkt schlicht und elegant. Am Schluss haben wir die ganze Seite noch responsive gemacht. Diesen Punkt haben wir gewaltig unterschätzt.
Tour
Vor der Erstellung der Tour mussten wir uns als erstes im neuen Programm zurechtfinden und das ein oder andere Tutorial schauen. Danach haben wir die einzelnen Bilder eingebunden, die besten Spots als Einstiegsmöglichkeiten definiert und die verschiedenen Punkte miteinander verbunden. So kann man von einem beliebigen Spot in die Tour einsteigen und sich von Bild zu Bild durchklicken und umsehen.
Nachdem die Tour erstellt war, haben wir nochmals alle Bilder in Photoshop geöffnet, um das Stativ und andere Unschönheiten zu entfernen. Im Anschluss galt es noch die fertige Tour zu exportieren und auf den Webserver zu laden.
Learnings
- Responsive Design nie vernachlässigen und genügend Zeit einplanen
- Website auf möglichst vielen verschiedenen Geräten testen
- Eine 360-Grad Tour zu erstellen, macht sehr viel Spass, es braucht allerdings Zeit, bis man die passenden Tools gefunden hat
Fazit
Das Kennenlernen des Tourprogramms und das Programmieren der Landingpage waren relativ anspruchsvoll und hat unsere Geduld einige Male auf die Probe gestellt. Das Projekt hat uns beiden viel abverlangt aber sehr viel Spass gemacht. Wenn wir auf unsere fertige Tour und Landingpage schauen, sind wir überaus zufrieden mit dem Resultat. Das Projekt werden wir auf jeden Fall weiterverfolgen, sei es im Rahmen eines weiteren Digezz-Projekts oder im privaten Rahmen.