Im Rahmen des Majors Journalismus Multimedial mussten wir ein Format entwickeln, welches wir mit journalistischen Inhalten bespielen würden. Wir suchten also nach einer Publikationsplattform für unsere Artikel. In der Formatentwicklung kamen Post-its als Gestaltungsidee auf, also die Idee dass auf der Webseite für jeden Artikel ein Post-it platziert wird. Daraus entstand ein Mock-up, welches vom Design-Team und dem Webseiten Team erstellt wurde. https://www.figma.com/proto/KMgvPzliMZacBNRDSyYslj/Wireframes?page-id=150%3A3&node-id=150-4&viewport=59%2C266%2C0.16&t=Kb4KHQlOXqCNJIeE-1&scaling=min-zoom&content-scaling=fixed Das Mock-up wurde nicht von mir alleine erarbeitet und soll deshalb auch nicht Gegenstand der Bewertung sein, es diente mir jedoch als Vorlage für das Projekt. Für die Umsetzung der Webseite standen wir dann vor einem Klinsch. Einerseits sollte das Design möglichst nahe am Mock-up sein. Dieses ist nicht ganz unkomplex. Andererseits sollte die Webseite möglichst bedienerfreundlich sein, damit unsere Autoren selbständig Artikel verfassen und veröffentlichen können. Designfreiheit sprach für selber coden, Bedienerfreundlichkeit sprach für ein CMS. Mit diesem Dilemma wandten wir uns in den Sommerferien an Beni, der uns das Konzept eines «headless-CMS» vorstellte. Dies klang nach einer perfekten Lösung, also machten wir uns daran. Meine Erfahrung aus den vergangenen Semestern zeigte: Beim coden bin ich kein guter Teamplayer. Also teilten wir uns so auf, dass Giacumin das WordPress aufsetzt und ich sämtlichen Code übernehme.
Meine erste Priorität war das Design der Homepage. Dass die verschiedenen Unterartikel über dem Themen-Hauptartikel liegen und sich in ihrer Höhe und Rotation zufällig anordnen war schon eine gewisse Herausforderung. Von Anfang an arbeitete ich regelmässig mit dem Co-Pilot von Claude Haiku. Beispielsweise gab ich ihm Bilder davon, wie ich mir das Design vorstelle, um es umsetzen zu lassen. Dies funktionierte im Ansatz gut brauchte aber immer noch einige Fein Justierungen. Nach einem Coaching mit Samuel war die Verbindung von der WordPress-API mit meinem Frontend relativ schnell erstellt. Dann kam die Einpflegung von den Daten aus WordPress. Hier war die Herausforderung, dass unsere Artikel einerseits thematisch geclustert werden sollten und andererseits in Übersichts- und Standard-Artikel unterteilt werden sollten. Dafür musste ich im Wordpress spezifische Kategorien anlegen. Das Format ist so gedacht, dass es zu jedem Thema zunächst ein Übersichtsartikel gibt, welcher generell in das Thema einführt und dann durch diverse reguläre Artikel zum Thema ergänzt wird. Allgemein stellten mich die Übersichtsartikel vor gewisse Herausforderungen. Beispielsweise die Spitzmarken und die Leads, welche auf der Homepage dargestellt werden, musste ich irgendwie im WordPress Artikel identifizieren und extrahieren, um sie separat darzustellen. Damit die Webseite möglichst schnell läuft, codete ich auf Samuels Empfehlung hin fast alles mit Php und relativ wenig mit JavaScript. Da ich zum ersten Mal mit dieser Php/HTML Kombination arbeitete, war einige Hilfe vom Co-Pilot nötig. Mit der Zeit lernte ich jedoch je länger, je mehr mit der KI zu arbeiten und mir von ihr Dinge erklären zu lassen. Dann war es eine Herausforderung, dass die Artikelseiten mit den Slugs sauber funktionieren. Das Design der Artikelseiten selber hingegen war relativ simpel. Einzig die schöne Darstellung der Autoren war mit etwas Arbeit verbunden. Auch hier musste ich eine möglichkeit finden um die Information im WordPress an zu geben und im Frontend darzustellen. Da ich nicht noch ein grösseres Chaos in den Categories wollte, entschied ich mich die Autoren in den Keywords erfassen zu lassen. Zum Abgleich erstellte ich eine Liste mit allen Teammitgliedern und den entsprechenden Bildern. Bei der AboutUs Seite war es mir ein Anliegen, dass ich die Seite mit JavaScript baue und nicht alles im html schreibe. Dies primär aus der Überlegung, dass allfällige Wechsel im Team, schnell angepasst werden könnten. Hier lernte ich vor allem wie unglaublich wichtig es ist die Bilder zu weboptimieren, zuvor lud die Seite jeweils minutenlang. Als die Seite langsam form annahm, gab ich sie immer wieder ins Team um Feedbacks abzuholen. Dies waren zumeist kleine Details im Design, denen ich immer wieder gerecht werden musste. Am Schluss, kurz bevor wir unsere ersten Artikel publizierten, war es mir noch ein Anliegen unser SEO etwas aufzubessern. Dies versuchte ich anhand der Vorlesung von Samuel mit einer Sitemap, einem .htaccess und einem robots.txt.
Als die Webseite fürs erste fertig war, war sie Ready, um befüllt zu werden. Damit meine Teamkollegen wussten, wie sie das CMS u bedienen haben, damit alles schön auf der Seite landet, erstellte ich ihnen ein Anleitungsvideo. https://fhgr.webex.com/webappng/sites/fhgr/recording/0bd8c36ca20b42b596a42e95be99394c/playback Password Recording: wGJBss8p Für mich war es eine spannende Erfahrung mal so eine Webseite «leben» zu sehen. In allen bisherigen IM Projekten war das Projekt mit dem letzten Push abgeschlossen und das wars. Hier kamen immer wieder Artikel dazu und damit teilweise auch wieder Bugs und Probleme. Beispielsweise war bei einem Artikel der Titel so lange, dass es mir die Ansicht der Artikel auf der Homepage völlig verzog. Ein anderes Beispiel ist, dass anfangs die Bubbles zu dunkel waren, wodurch sie das Leseerlebnis noch mehr beeinträchtigten. Auch dies optimierte ich nach einem Feedback.
Unsere LMNOP-Plattform ist inzwischen voll mit Artikeln verschiedenster Art und wird von uns allen auch als Portfolio genutzt, um unsere journalistischen Arbeiten zu zeigen. Deshalb ist es mir ein Anliegen, dass dort keine Testartikel darauf landen. Mir ist jedoch klar, dass das IM Team testen muss ob und wie die Mechanik mit dem Upload der Artikel funktioniert. Deswegen habe ich eine Kopie der Webseite erstellt. Die Zugangsdaten dazu findet ihr in der Moodle Abgabe mitsamt Repository. Gerne dürft ihr dort eigene Artikel erstellen und hochladen. Für diese Kopie habe ich dann auch die WordPress Seite selbständig erstellt. Den Teil der Giacumin im Original übernommen har, habe ich somit auch mal gemacht. Die IMV version ist unter im5.janicure.ch zu finden.
Es gibt einzelne Probleme, die mir bewusst sind, deren Ursache ich jedoch nicht herausfinden konnte. Mir wurde zurückgemeldet, dass bei gewissen Mac Ansichten das Alphabet im Header über das Logo geht. Da ich selber nicht mit Mac arbeite und es scheinbar nicht immer der Fall ist, konnte ich das Problem nicht mehr reproduzieren. Des Weiteren ist mir aufgefallen, dass vor allem auf der IM5 Version es sehr lange geht bis die Wordpressartikel online sind. Gemäss dem RestAPI json liegt das Problem beim Upload in Wordpress und nicht im Front-end. Sobald der Post in der API erscheint, wird er nämlich auch auf der Webseite richtig angezeigt. Bei der Validierung wird bemängelt, dass auf der Homepage die Spitzmarken als H6 angegeben werden ohne dass H3-5 verwendet werden. Das ist so, damit verwirrungen im Wordpress ausgeschlossen werden können. Ich nahm hier bewusst die niederste Überschrift, damit ich sicher gehen kann, dass die Spitzmarke die einzige Überschrift mit diesem Tag ist. Es gibt weitere Dinge, die ich an mir selber Kritisieren muss: Aus einer UX perspektive findet man auf der Webseite zu wenig Guidelines. Anhand der Homepage wird nicht klar ersichtlich, was das Angebot der Seite ist und wo ich was finde. Auch die schwebenden Bubbles sind eine Herausforderung für das Leseerlebnis. Auch nicht optimal ist, dass jeweils nur zwei Artikel erscheinen. Ich hatte anfangs noch versucht die Homepage so zu gestalten, dass bis zu 4 Artikel angezeigt werden können, scheiterte jedoch unter anderem an der Responsiveness. So wie es jetzt ist, gehen einzelne Artikel unter, da sie nur auf den Übersichtsseiten aufgelistet werden.
Ich glaube nicht, dass ich in diesem Studium je so viel für ein Projekt gelitten habe wie für dieses. Was heute nach einer einfachen Webseite scheint waren viele, nicht selten frustrierende, Arbeitsstunden. Heute bin ich aber auch auf kaum so ein Projekt so stolz wie dieses. Dass ich es irgendwie geschafft habe die Webseite visuell ansprechend und für die Autoren einfach bedienbar zu gestalten, zeigt mir was möglich ist beim coden. Ich hatte oft einen Sturen Grind und arbeitete stets nach dem Prinzip "In IM ist alles irgendwie möglich", wobei ich oft vergass wie komplex oder aufwändig dieses "irgendwie" sein kann. Dann aber zu sehen wie die Webseite schlussendlich aktiv genutzt, bespielt und gelesen wurde war schon ein geiles Gefühl.