Dieses Digezz-Projekt entstand eigentlich aus dem Modul “Visualisieren” heraus. Dort konnten wir uns eines von ungefähr 20 Projekten aussuchen, die wir mit realen Auftraggebern realisieren durften. Nach einer längeren und sehr intensiven Debatte haben wir uns schlussendlich zu dritt für das Thema “Elektroschrott” entschieden. Hinter dem Projekt stand das SRI (Sustainable Recycling Industries), eine staatliche Arbeitsgruppe, die bei der Empa angesiedelt ist. Sie kümmern sich besonders um nachhaltige Lösungen in der E-Waste-Problematik. Denn viele elektronische Geräte, die es bei uns nicht ins Recycling schaffen, kommen anderswo auf der Welt in Umlauf und landen dann plötzlich in irgendwelchen Fabriken auf der ganzen Welt, wo alles andere als nachhaltig recycelt wird.
Um den Einstieg in ihre Internetseite ein wenig zu vereinfachen, wollten sie auf der Startseite ein Kachelsystem mit den SDGs (Sustainable Development Goals) einbinden, mit einer Möglichkeit, zu jedem einzelnen SDG mit einem Klick mehr Informationen zu erhalten, wie zum Beispiel, was das SRI konkret zur Erreichung dieses SDGs beiträgt.
In der ersten Blockwoche stellte sich dann aber heraus, dass die Vorstellungen des Auftraggebers und die Vorschläge unserer Dozenten viel zu stark auseinandergehen. Da wir aber keine ungenügende Note riskieren wollten, beschlossen wir, uns im Modul Visualisieren als Gruppe rein auf eine visuelle Konzeption zu beschränken und ich alleine im Rahmen von Digezz genau das umsetze, was der Auftraggeber sich gewünscht hat. Die Publikation im Digezz hatte unter anderem noch den Vorteil, dass man auf dieser Plattform noch mehr Menschen erreichen, sie über die Arbeit des SRI aufklären und die Sensibilisierung zum Thema E-Waste steigern kann.
Ursprünglich dachte ich, dass das Projekt kein grosser Aufwand werden würde. Man muss ein paar Kacheln darstellen und ein paar Klickevents programmieren und hat dann schon die Hälfte. Dann noch ein WordPress-Plugin drumherum packen und gut ist. Tja, falsch gedacht.
Ein erstes Template mit Overlay hatte ich nach etwa zwei Tagen zusammen, dieses sah genauso aus wie der visuelle Photoshop-Entwurf aus dem Modul Visualisieren. Dann stellte mich eine Anforderung des Auftraggebers aber bereits vor das erste Problem. Er wollte nämlich kachelübergreifende Links, also dass man, wenn eine Kachel offen ist, Links einbinden kann, die dann die Kachel wechseln und eine andere anzeigen. Das Problem war aber, dass ich mit Vue.js gearbeitet habe und die Texte nicht im HTML eingebunden waren, sondern lediglich als JSON vorlagen. Ausserdem war das mein erstes Projekt mit Vue.js und ich war noch nicht so wirklich in dem Mindset drin. Um den Anforderungen des Auftraggebers gerecht zu werden, hätte man die JSON-Texte kompilieren müssen, aber das lässt Vue.js nicht zu, wie ich nach längerem Probieren herausgefunden hatte. Die ganzen Texte direkt ins HTML einzubinden, erschien mir aber auch extrem unprofessionell. Schlussendlich habe ich es geschafft, mit jQuery einen Workaround zu entwickeln, bei dem einfach ein Klick auf eine andere Kachel simuliert wird. Meiner Meinung nach immer noch nicht ganz ideal, aber immerhin besser, als die Links ganz weglassen zu müssen.
Eines der grösseren Probleme entstand, als ich sichergehen wollte, dass meine lokale Entwicklung sich auch in der WordPress-Umgebung so verhalten wird, wie sie soll. Lokal hatte ich natürlich keinerlei externen CSS-Einfluss und ich konnte sauber programmieren. Auf der “richtigen” Seite gab es aber nicht nur fremdes HTML, sondern auch fremde Stylesheets, die mir teilweise die Formatierung verpfuscht haben. Das habe ich gemerkt, als ich mit der Software Burp den Client-Server-Verkehr so verändert habe, als wäre mein Plugin schon eingebunden. Da ich zu diesem Zeitpunkt 1) die Zugangsdaten für den Server noch nicht hatte und ich 2) nicht auf einem Produktivsystem entwickeln wollte, das Problem aber trotzdem irgendwie lösen musste, versuchte ich, in meiner Standalone-Version wenigstens möglichst praxisnahe Bedingungen zu schaffen. Ich habe dieselben Container um meine Entwicklung gehauen, wie sie auch auf der richtigen Seite vorkommen und habe die echten Stylesheets eingebunden. Und siehe da: Die gleichen Formatierungsfehler, die mir auch beim ersten Test aufgefallen sind, flogen mir wieder um die Ohren. Das meiste konnte ich mit ein paar gezielten Handgriffen am CSS lösen, einer war aber ein bisschen schwerwiegender und musste mit Javascript gelöst werden.
Doch das Projekt bereitete mir nicht nur Schwierigkeiten, sondern sorgte auch für viele Aha-Erlebnisse. Zu diesen gehört zum Beispiel ein längerer Nachmittag mit Fluchen und Schimpfen, der mit der Erkenntnis endete, dass es Vue.js gar nicht gefällt, wenn man ein <ul> Element in ein <p> Element setzt (nur wird das einem in der Fehlermeldung nicht so direkt gesagt).
Aber auch das Entwickeln eines WordPress-Plugins gehört in diese Kategorie. Im vorherigen Semester Interaktive Medien hatten wir das Thema zwar schon gestreift, aber so eine produktive Entwicklung ausserhalb des schulischen Umfelds ist dann doch noch etwas anderes. Zum Glück gibt es auf der WordPress-Seite eine sehr gute Dokumentation, wo vor allem der Einstieg in die Pluginprogrammierung sehr gut beschrieben ist. Bei etwas exotischeren Anforderungen muss man dann aber doch etwas genauer suchen.
Was mich auch noch aufgestellt hat, war eine Nachricht des Auftraggebers, welche ich gegen Ende des Projektes bekommen habe. Das Plugin muss bei ihnen ziemlich die Runde gemacht haben, das Tool ist nämlich bis zur belgischen Königin vorgedrungen. Diese ist SDG-Botschafterin und wird an der nächsten Konferenz sprechen. Dort wird sie auch das SRI, welches durch mein Plugin visualisiert wird, aufgreifen.
Wenn ich das Projekt ein zweites Mal machen würde, würde ich mehr Zeit einplanen für die Standalone-Version. Diese ist leider nicht ideal geworden, unter anderem ist sie nicht wirklich responsive. Das Plugin lokal zu entwickeln hingegen hat gut funktioniert, ich würde nur von Anfang an das fremde CSS einbinden, damit ich sofort merke, wenn sich irgendwas mit meinem eigenen Stylesheet beisst.
Alles in allem habe ich bei diesem Projekt sehr viel gelernt und wertvolle Erfahrungen vor allem mit Vue.js gesammelt, welche mir in Zukunft sicher sehr helfen werden. Es hat sich auch gelohnt, sich mal mit WordPress-Plugins auseinanderzusetzen. Mit der Standalone-Applikation bin ich nicht komplett zufrieden, aber das Plugin kann sich wirklich sehen lassen.
