Idee
Wieder einmal waren wir auf der Zugfahrt von Chur Richtung Schaffhausen. Wir haben über das Studium gesprochen und unsere Bachelorarbeiten. Auf einmal kam Stephan in den Sinn, dass es nicht mehr lange dauern kann, bis in Schaffhausen der berühmte Glühweinstand öffnet. Jedoch dauerte es immer noch drei Wochen bis es endlich so weit sein würde. Die Suche im Internet nach anderen Märkten erwies sich als eher mühsam. Entweder fand man keine guten angaben, oder das Datum war nicht wirklich ersichtlich, geschweige denn, dass man den genauen Standort herausgefunden hat. Auch von „Responsive“ haben viele Webseiten noch nicht viel gehört. Aus diesem Grund hatten wir beschlossen, dass wir auf einer Webseite so viele Märkte und Stände sammeln wollen wie es nur geht.
Umsetzung
Zuerst gab es ein Brainstorming, welche Daten wir sammeln wollen und was alles auf der Webseite drauf sein soll. Danach hiess es suchen, suchen, suchen. Wir versuchten so viele Märkte etc. zu sammeln und deren Daten in eine Excel-Tabelle einzufügen. Als wir eine gewisse Anzahl gesammelt hatten, fügten wir alles in eine Datenbank ein und gingen über die Webseite zu erstellen.
Zuerst begannen wir mit dem Grundaufbau der Webseite mittels Bootstrap. Danach wurde die Karte von Google Map eingebunden und mit unserer Datenbank verbunden. Als diese eingefügt war, wurde die Liste auf der linken Seite erstellt und ebenfalls mit Daten aus der Datenbank gefüllt.
Da wir auf der Desktopansicht nun zwei Spalten hatten, mussten wir uns eine andere Lösung für die Mobile Version überlegen. Denn zwei Spalten nebeneinander sind unmöglich auf einem so kleinen Endgerät zu entziffern.
Dabei haben wir entschieden, dass die Karte gänzlich wegfällt und diese durch einen Button ersetzt wird, welcher den Standort in GoogleMaps aufruft.
Während die Filterfunktion am Entstehen war, wurde das Design ausgearbeitet und Umgesetzt. In der Zeit wurde die Datenbank immer weiter gefüllt mit neuen Weihnachtsveranstaltungen. Anschliessend wurde das Design für Mobile Geräte fertiggestellt und noch kleinere Anpassungen vorgenommen. Danach war die Webseite fertig.
Herausforderungen
Map
Bei der Map wollten wir ursprünglich, dass beim Anklicken eines Markers eine kleine Nikolausmütze auf dem Marker erscheint, dies war leider nicht möglich, da der Zugriff auf die Google Maps-Funktionen nur innerhalb der Funktion „initmap“ funktioniert. Deshalb konnten wir nicht auf die einzelnen Marker zugreifen und sie individualisieren. Nach einigen Stunden und vielen Fehlversuchen, beschlossen wir dieses Feature wegzulassen
Ein anderes ebenfalls grösseres Problem war, dass es lange Zeit nicht funktioniert hatte, die Karte zu fixieren. An was es schliesslich liegt wissen wir bis jetzt nicht, wir haben nun eine etwas unschönere Methode benutzt, die anstatt mit dem Scroll mitkommt einfach einen fixen Abstand nach oben einhält. Leider haben wir keinen anderen Lösungsweg gefunden. Dies führte auch dazu, dass wir unseren Header um einiges verkleinern mussten und die Checkboxen für die Auswahl der Kantone auf die linke Hälfte umplatziert wurden.
Akkordeon
Beim Akkordeon hatten wir zum Einen Probleme mit der Klickfunktion. Beim Klicken auf einen Titel blitze sie Seite einmal kurz auf. Dies hatte damit zu tun, dass bie jedem Klick die Seite neu geladen wurde. Das Neuladen der Seite konnte in der Klickfunktion untebunden werden.
Filter
Bei der Filterfunktion hatten wir grössere Schwierigkeiten vor allem mit der Map. Für jeden Marker wird ein eigener Eventlistener erstellt. Dies passiert durch den herkömmlichen Einsatz eines Arrays, welches eine Schlaufenfunktion durchläuft. Die Problematik bestand darin, dass der Eventlistener in der GoogleMaps API definiert wird. Dies geschieht aber erst in dem Moment, wenn der Klick ausgeführt wird. In diesem Augenblick ist die Schlaufe aber schon längstens beendet und es wird der letzte Wert des Arrays verwendet, anstelle der für den Marker expliziten ID. Folglich wurde immer das unterste Element im Akkordeon geöffnet, egal welcher Marker angeklickt wurde.
Die Lösung bestand in der Verwendung des “data-id”-Attributes, welches uns bis anhin auch unbekannt war.
Mobile
Das Responsive funktionierte lange Zeit nicht in allen Browsern. Vor allem Chrome bereitete uns grosse Schwierigkeiten. Während in allen anderen Browsern die Website richtig skaliert dargestellt wurde, verwarf es uns die komplette Webseite in Chrome. Dies lösten damit, dass wir dem Body und dem HTML-Element „width 100%“ gaben. Auch der Button für die Verlinkung zu Google Maps wollte nicht an seinen vorgesehenen Platz bleiben. Wir wollten den Button nur etwas kleiner darstellen lassen, da sprang er auf die Linkeseite. Auch der Link auf dem Button war auf einmal nicht mehr genügend gross. Als wir dies dann endlich behoben hatten, war der Link plötzlich zu gross und nun konnte man auf der ganzen Breite den Link anklicken. Um all diese Probleme zu lösen erstellten wir eine neue Klasse, der wir folgende Dinge zugeordnet haben:
width: 100%;
height: auto;
display: block;
text-align: right;
Danach wurde alles fast alles richtig dargestellt. Denn nun stellte es uns die Liste mit den Checkboxen (Kantonauswahl) nicht mehr richtig dar. Jedoch konnten wir dieses Problem lösen, nach einer gründlichen Suche im Internet.
Mit das grösste Problem, war die Browserkompatibilität auf den mobilen Geräten. Jeder Browser stellt die Webseite korrekt dar, bis auf Chrome. Bei diesem war auf der rechten Seite ein Bereich, der nicht gefüllt ist, der nun die Website nach rechts scrollbar macht. Nach einer langen Suche nach der Nadel im Heuhaufen fanden wir den Fehler und konnten ihn beheben.
Fazit
Es war ein sehr spannendes Projekt, welches wir Aufwandtechnisch weit unterschätzt hatten. Anstatt, dass wir die vorgesehenen drei Wochen an dem Projekt gearbeitet hatten, waren es schliesslich fünf Wochen. Es traten viele unvorhergesehene Probleme auf und oftmals, wenn etwas nach viel Nervenaufwand funktionierte, ging etwas Anderes wieder kaputt. Aber ansonsten war dieses Projekt sehr lehrreich für uns beide. Wir haben beide noch nicht viel mit Google Maps gearbeitet und aus diesem Grund war es eine spannende Erfahrung. Auch war dies eine gut Übung um das Wissen, welches wir uns im gesamten Studium angeeignet hatten, auf die Probe zu stellen und dieses auch zu vertiefen. Auch die Zusammenarbeit war sehr harmonisch und wir konnten trotz den vielen verbrauchten Nerven darüber spassen.
Auch möchten wir Nils Solanski und Myriam Frisano für ihre Unterstützung in diesem Projekt danken.
