Idee
Die Idee zur Umsetzung eines eigenen Reiseführers hatte ich bereits vor Antritt der Reise. Ich suchte mir verschiedene Orte, welche ich besuchen möchte, und entschied mich dazu, jeweils verschiedene Fotos des Ortes zu schiessen. Die Umsetzung der Seite sollte einfach, verständlich und anwenderfreundlich sein. Das Layout einer Single Page erschien mir dazu am passendsten. Der Benutzer sollte mittels Einbindung von Google Maps die Möglichkeit haben, über die Karte die verschiedenen Aktivitäten anschauen zu können. Gleichzeitig dient die Karte dem Benutzer als Anhaltspunkt für verschiedene Routen und Entfernungen, sodass Tagesabläufe optimal geplant werden können.
Umsetzung
Der erste Teil der Umsetzung begann bereits in Prag selber. Von der Ausleihe hatte ich die Canon EOS 5D im Gepäck, mit welcher ich sämtliche Fotos für den Reiseführer schoss. Zum Schluss des Trips verfügte ich über ca. 500 Fotos, sowohl in Roh- als auch in JPEG-Format. Das Ordnen und Sortieren erledigte ich in Adobe Bridge, welches mit dem Überprüfungsmodus ein hervorragendes Tool dazu bietet. Anschliessend wurden die Fotos in Adobe Photoshop mittels Stapelverarbeitung und einer vordefinierten Aktion einheitlich bearbeitet. Gerne wäre ich dabei noch mehr ins Detail gegangen, was mich aber zu viel Zeit gekostet hätte.
Zur Umsetzung des Layouts des Reiseführers fertigte ich im Vorfeld einige Wireframes an. Somit konnte ich sicherstellen, sämtliche Elemente eingeplant zu haben. Ausserdem half es mir sehr bei der Programmierung der Seite. Durch einen Freund erfuhr ich von der Javascript-Softwarebibliothek «React», welche ein Grundgerüst zur Ausgabe von User-Interface-Komponenten von Websites zur Verfügung stellt. React wird unter anderem von Facebook, Instagram, Whatsapp, Yahoo und vielen weiteren, grossen Namen verwendet. Das Ziel war es, die Website mittels React dynamisch aufzubauen. Ausserdem gibt es keinen richtigen Seitenwechsel via Hyperlinks. Die Startseite sollte somit lediglich aus Titelbild und Logo bestehen, wodurch der User zum Scrollen animiert wird. Darunter sollte die Karte mit den ausgewählten Orten für den User sichtbar werden. Den unteren Bereich der Seite konnte ich mit einem Google-Konto, Google Maps und Snazzy Maps realisieren. Snazzy Maps ist eine Plattform, auf der verschiedene Styles für Google Maps Karten publiziert werden. Die jeweiligen Orte konnte ich mit dem entsprechenden Befehl und den zugehörigen Koordinaten in der Karte einbinden. Für weniger verspielte User erstellte ich zudem das Menü «Locations», über welches man sogleich eine Übersicht aller Orte erhält, die auf der Karte verfügbar sind. Alternativ zu der Google Maps Karte kann man auch über dieses Menü navigieren.
Fazit
Die Umsetzung der Seite stellte mich vor sehr viele Herausforderungen. Angefangen bei der Planung des Projekts bis hin zu der tatsächlichen Programmierung des Codes stolperte ich einige Male. Durch die ausführliche Auseinandersetzung mit Planung und Realisation des Projekts konnte ich jedoch einiges dazulernen, was ich in Zukunft anwenden kann. Gerne würde ich die Seite in Zukunft mit weiteren Destinationen weiterführen.
