How we made this - CMS
Die Ausgangssituation für die Entwicklung des Onlinemagazins format+ ist die Bachelorthesis von Lisa Kern. Sie konzipierte und gestaltete im Rahmen ihrer Thesis im Sommersemester 2019 ein Onlinemagazin von und für HfG Studierende. Als sie ihre Entwürfe an uns weitergab, war uns bewusst, dass es keine leichte Aufgabe werden würde, das teilweise experimentelle und stark angepasste Layout im Front-End umzusetzen. Gleichzeitig begeisterte uns das Projekt, da es eben keine Webseite werden sollte, die man mit drei Klicks aus dem Internet herunterladen und, leicht angepasst, direkt verkaufen könnte. Doch wie haben wir die Webseite nun im Detail umgesetzt? Und welche Tools haben wir integriert?
Nach einem Personalzuwachs zum Jahreswechsel 19/20 und einem kleinen Hackathon, entschieden wir uns dazu, das format+ Onlinemagazin mit dem Kirby CMS (Content Management System) als Back-End zu bauen. Das könnte manchem/r HfG'lerIn bekannt vorkommen, denn einige HfG Webseiten basieren auf eben diesem CMS.
Uns war bewusst, dass es keine leichte Aufgabe werden würde, das teilweise experimentelle und stark angepasste Layout im Front-End umzusetzen.
Prinzipiell sollte die Webseite, neben der reinen Darstellung von Content, noch weitere Funktionen erfüllen. Sie sollte beispielsweise allen beteiligten Parteien, die an der Aufrechterhaltung der Webseite und an den Inhalten mitwirken, einen reibungslosen Arbeitsablauf ermöglichen. Insbesondere die Mitglieder der Redaktion sollten ein nutzerfreundliches Back-End vorfinden.
Der Prozess wurde dabei in mehrere Schritte unterteilt: Zunächst besitzt die Webseite ein Rollensystem, mit dem es möglich ist, verschiedenen Usern unterschiedliche Rechte im System zuzuweisen. So gibt es AutorInnen, die Artikel im Back-End anlegen können. Dabei steht ihnen die Redaktion unterstützend zur Seite, welche die Texte auch korrekturliest. Am Ende können die ChefredakteurInnen den Artikel veröffentlichen.
Um diesen Prozess umzusetzen, hat sich das CMS-Team für die Kombination verschiedener Komponenten und Plug-Ins entschieden, die wir nachfolgend kurz anschneiden.
Die Webseite sollte einen Arbeitsprozess ermöglichen, der alle beteiligte Parteien an die Hand nimmt, und so die Arbeit der Redaktion reibungslos gestaltet.
Das CMS
Ein Content Management System (kurz CMS) ist eine Software, die zur Erstellung und Verwaltung von Inhalten in Text-, Bild-, Video- oder sonstiger Form verwendet wird. Für das Projekt haben wir uns für das Kirby-CMS entschieden, da es im Gegensatz zu anderen CM-Systemen, wie WordPress oder TYPO3 einfach zu installieren und ohne Datenbanken nutzbar ist.
Kirby CMS
Das Markup
Im Markup wird das Gerüst der Webseite gebaut. Oft wird hierfür HTML genutzt. Doch wie können einfache logische Operationen durchgeführt- oder Daten-Arrays dargestellt werden? Die Antwort hat vier Buchstaben: TWIG. TWIG ist eine Template-Engine für PHP. HTML wird also weiterhin benötigt. Es kann nur mit TWIG besser strukturiert werden. Somit ist die Trennung zwischen Code und Design perfekt möglich.
TWIG
Das Styling
Zum Schluss wird das Webseiten-Gerüst gestylt. Dafür wurde SCSS genutzt. SASS ist eine Meta-Sprache von CSS. Aus diesen .scss Dateien werden dann normale .css Dateien generiert. Der Vorteil von SASS liegt in den zusätzlichen Features, die es mit sich bringt, unter anderem Variablen und Mixins. Diese verkleinern den selbst geschrieben Code und ermöglichen vor allem eine saubere und einfache Verwaltung.
SASS
Um die Qualität nachhaltig zu sichern, haben wir uns für verschiedene Rückkopplungsmechanismen entschieden. Zum einen werden die BesucherInnenzahlen mit Hilfe von Google-Analytics analysiert, zum anderen führen wir in regelmäßigen Abständen verschiedene Webtests, wie beispielsweise den Lighthouse-Test von Chrome durch, um die Qualität der Website auf technischer Ebene im Blick zu behalten.
Wir analysieren Besucherzahlen und machen Webtests, um unsere Qualität nachhaltig zu sichern.
mit dem CMS-Team
Was war der lustigste Moment während der Entwicklungsphase?
In der letzten Woche vor dem Launch, also unmittelbar vor der Semesterausstellung, haben wir uns trotz nächtlicher Development-Sessions immer recht früh am Morgen getroffen. So kam es auch, dass Tobi drei Tage vor dem Launch, um 8:00 Uhr morgens, an der HfG war und dort weiter an der Webseite gearbeitet hat. Leider hat er kurz nach 8:00 Uhr bei einem Toilettengang seine Zutrittskarte zu den Arbeitsräumen "verlegt" und hatte sich somit ausgesperrt.
Heureka! Zum Glück hatte er sein Handy dabei, welches er sogleich nutzte, um Nils und mich anzurufen. Leider war auf beiden Nummern keiner erreichbar, denn wir lagen natürlich noch im Bett. Nach dem 18. Anruf wurde Tobi klar, dass er wahrscheinlich keinen mehr erreichen würde und fand sich mit seinem Schicksal ab, den ganzen Tag vor der Tür zu sitzen. Und wenn er nicht gestorben ist, dann sitzt er da noch heute.
Und wenn er nicht gestorben ist, dann sitzt er da noch heute.
Armer Tobi, aber gab es auch echte Tiefpunkte bei der Entwicklung?
Zwei Tage vor der Semesterausstellung, also unserem offiziellen Release, wollten wir das erste mal die Webseite auf den Server umziehen um zu testen, ob alles funktioniert. Bereits vollkommen übermüdet und kurz vor zwölf war die Übertragung fertig und es wäre auch zu schön gewesen, wenn alles auf Anhieb funktioniert hätte. Es klappte rein gar nichts. Eine Fehlermeldung nach der anderen. Nach etlichen Versuchen und Foren-Abfragen haben wir uns dann dafür entschieden es für die Nacht ruhen zu lassen und uns das Problem am nächsten Morgen noch einmal anzuschauen. Gesagt, getan - 30 Minuten, nachdem wir uns das Problem angeschaut haben, lief alles wie geplant. Beim Übertragen der Dateien haben wir einen Ordner vergessen. Froh waren wir darüber, dass es nur so ein einfaches Problem war.
Es klappte rein gar nichts. Eine Fehlermeldung nach der anderen.
Auf welche CMS-Aufgaben freut ihr euch im kommenden Semester?
Wir freuen uns natürlich besonders auf den Release der zwei neuen Sektionen, "International" und "Hören". Das bedeutet, dass wir in diesem Semester Podcasts einbinden. Generell möchten wir eine größere Vielfalt an Beiträgen und Beitragstypen schaffen, dabei steht immer die Nachhaltigkeit der Webseite im Vordergrund, sodass Sie über Jahre hinweg ein Mehrwert für die gesamte Hochschule und deren Besucher darstellt.
Release der zwei neuen Sektionen, International und Hören.
Ohne das perfekt funktionierende CMS-Team, wäre es in dem zeitlichen Rahmen nicht möglich gewesen die Webseite aufzubauen.
