Schweizer Mülleimer

Idee
Für unser Digezz wollten wir eine Website unter anderem mit JavaScript programmieren, da wir dies im Semester zuvor im Modul Interaktive Medien gelernt haben. Wir wollten unsere gewonnenen Kenntnisse anwenden, vertiefen und Neues dazu lernen.

Die Idee des Mülleimers entstand, da uns auffiel, dass es im Internet keinen Ort gibt, auf dem man schnell und einfach an Informationen über das Thema kommt. Dadurch entwickelten wir die Idee einer Website, die voll mit Abfallgegenständen ist, welche herumgeschoben werden können. Zudem wollten wir über das Thema aufklären und haben daher mittels Pop-up Fenstern beschrieben, wie viel von den verschiedenen Gegenständen weggeschmissen werden und wie man diese richtig entsorgt. Die Webseite sollte spielerisch über das Thema informieren.

Umsetzung
Zunächst machten wir uns an die Abfallgegenstände. Dazu stellten wir eine Liste auf, mit Gegenständen, die möglichst aus verschiedenen Materialien bestehen, welche im Alltag weggeschmissen werden. Nachdem wir uns auf einen Stil für die Darstellungen geeinigt haben, illustrierten wir diese mit Illustrator. Danach gestalteten wir einen Prototyp unserer Website auf Adobe XD und besprachen, wie die Website aussehen soll.

Nachdem auch dies geklärt war, ging es ans Programmieren. Das war der langwierigste Prozess unseres Projekts. Nicht nur, weil es der Hauptteil unserer Arbeit ist, auch da wir immer wieder auf Probleme und Schwierigkeiten gestossen sind. Wir unterteilten die Programmierarbeit, um schneller voranzukommen.

Jedes der einzelnen Gegenstände musste einzeln mit CSS positioniert werden. Dies ging einige Zeit und war sehr aufwendig. Damit die einzelnen Gegenstände herumgeschoben werden können, programmierten wir zuerst einen eigenen JavaScript Code. Dies funktionierte, aber die Webseite wurde sehr schwerfällig und wir mussten nach einer anderen Lösung suchen. Dann stiessen wir auf die Library interact.js. Mit dieser funktionierte es gut, brachte aber auch Probleme mit sich. Die Webseite war weniger schwerfällig, doch sprangen die Gegenstände, sobald man auf sie klickte, umher und blieben nicht am Cursor haften. Nach einigen Tagen rumtüfteln und einem Coaching konnte dies behoben werden.

Wir überlegten uns zwischendurch, ob wir, anders als unser Prototyp, die Pop-up Fenster weglassen sollten. Dies, da wir Schwierigkeiten hatten, das Pop-up-Fenster nach unserer Vorstellung zu gestalten und zu programmieren. Stattdessen programmierten wir es so, dass sich bei einem Doppelklick auf den Gegenstand ein neues Fenster öffnet. Schlussendlich gelang es uns dann doch, das Pop-up Fenster so aufzubauen, wie wir es uns vorgestellt hatten.

Danach ging es ans zusammenführen der Pop-ups und der Gegenstände. Hier musste genau gearbeitet werden, da wir mit vielen ähnlichen IDs und Class Namen arbeiteten. Bei jedem kleinen Schreibfehler funktionierte die ganze Webseite nicht mehr und es dauerte lange, den Fehler zu identifizieren.

Zum Schluss haben wir uns noch an die Texte für die verschiedenen Abfallgegenstände gesetzt. Wir stellten einzelne Themen auf, die zu jedem Gegenstand recherchiert werden sollten (Zahlen und Fakten, Zusammensetzung, Entsorgung usw). Wir teilten die einzelnen Texte gleichmässig auf. Dazu haben wir Quellen im Internet gesucht, die sich auf die Abfallentsorgung in der Schweiz beziehen.

Fazit
Auch wenn wir uns einige Male über eine alternative Lösung unterhalten und zum Teil auch programmiert haben, ist unsere Website doch noch so geworden, wie wir es zu Beginn geplant hatten.

Dadurch, dass wir genug früh mit unserem Projekt angefangen haben, hatten wir trotz der Schwierigkeiten und den Umwegen keinen Zeitdruck. Wir konnten durch die Praxis im Programmieren unser Wissen umsetzen und haben viel Neues dazu gelernt.

Mit unserer Website sind wir sehr zufrieden, da wir sie schlussendlich so umsetzen konnten, wie wir uns es vorgestellt haben.