msvs.ch - Die Philosophie dahinter

Dieser Artikel beleuchtet die Philosophie hinter der Webseite msvs.ch; Von der Konzeption, über die Gründe der gewählten Technik, hin zu praktischen Erfahrungswerten.

Die Ausgangslage

Die Matchschützenvereinigung Schaffhausen hatte bereits früh eine Internetpräsenz: Seit mindestens Februar 2001 (der erste Snapshot vom Internet Archive ist auf den 06. März 2001 datiert) unterhielt Peter Müller (panoramanet.ch) die Homepage. 

Langsam fiel die Technik aber aus der Zeit (pures HTML mit Frames, dadurch sehr bedingt mobile-fähig und ohnehin im "neuen" Standard HTML5 nicht vorgesehen), was in einem Hauptversammlungsprotokoll erwähnt wurde - eine Anpassung auf mobile Bildschirme wurde gewünscht.

Dies war aber mit der verwendeten Technik kaum möglich, weshalb ich mich damals 2021 meldete, die Webseite neu zu gestalten. Ein (vordergründig angegebenes) Missverständnis seitens Hoster führte dann dazu, dass die alte Webseite von einem Tag auf den anderen gelöscht wurde - eigentlich sollte nur die Domain transferiert und die neue Webseite parallel entwickelt werden. Die Löschung führte dazu, dass möglichst rasch etwas auf die Beine gestellt werden musste.

Mit WordPress war das möglich - damals "konnte" ich auch nur WordPress. So entstand innert eines Tages die neue Webseite des MSVS.

Snapshot der MSVS-Webseite im Januar 2013
Snapshot der MSVS-Webseite im Januar 2013
Ein Screenshot der WordPress-Webseite. Genutzt wurde das Hueman-Theme.
Ein Screenshot der WordPress-Webseite. Genutzt wurde das Hueman-Theme.

Die Probleme der alten Infrastruktur

WordPress eignete sich gut, um schnell eine funktionale Webseite zu erstellen, erwies sich aber bald als für die Bedürfnisse absolut ungeeignet.

Die Internetseite der MSVS besteht hauptsächlich aus Dokumenten - Resulate von Schiessanlässen, Einladungen, Reglemente, und so weiter. Dies sortiert nach Anlässen, Kategorien und Durchführungsjahren.

Dies bedeutete für WordPress, dass jedes Dokument einzeln von Hand hochgeladen und in der entsprechenden Unterseite an der richtigen Stelle eingepflanzt werden musste. Ende Jahr hiess es dann, alles manuell zu archivieren und die Unterseiten für das neue Jahr bereit zu machen.

Das war ein grosser Aufwand und konnte aufgrund der fehlenden Affinität für Technik der Mitglieder nur von mir durchgeführt werden - keine befriedigende Situation. Auch musste ich dies jeweils an einem Computer erledigen, da übers Natel solche Dokumentenpflege überaus frustrierend war. 

Dies führte irgendwann zu Unmut seitens der MSVS, da die Dokumente teilweise sehr zeitverzögert aufgeschaltet wurden.

Eine neue Lösung musste her.

Die Gründe für die gewählte Technik

Zwischenzeitlich habe ich mich weitergebildet und konnte so eine Webseite ganz von Grund auf selbst aufbauen, exakt zugeschnitten auf Bedürfnisse, Wünsche und Limitationen der MSVS und mir.

Da ich mir JavaScript und React beigebracht habe und mir das Framework Next.js liegt, habe ich mich für diese Technik als Basis entschieden. 

Das "Hauptproblem" war das Dokumenthandling. Es musste gleichwohl so automatisiert wie möglich erfolgen, als auch so einfach zu bedienen sein, dass auch Leute, die mit Computern wenig Erfahrung haben, bequem Dokumente selber hochladen können.

Eine Lösung mittels FTP fiel bald weg, da das Setup eines FTP-Programmes erstens nicht für jeden zugänglich ist und zweitens ein Computer mit dem FTP-Programm und den relevanten Zugansdaten vorhanden sein muss.

Da ich für die Webseite des Pistolenclub Hallau die Infomaniak kDrive-Cloud als automatisierte Resultatespeicher bereits nutzte, lag ein Ausbau dieser Funktionalität auf der Hand.

Es musste nur eine einheitliche Ordnerstruktur erdacht werden, die gleichermassen einfach für die Programmierung der Dokumentenabfragelogik, als auch für den Menschen, der die Ordner füttert sein soll. Insbesondere dahingehend, dass nicht alle Dokumente die gleiche Grundstruktur haben.

So ist beispielsweise die Luftpistolensaison jahresübergreifend, und der Kantonalcup hat verschiedene Turnierstufen pro selbem Jahr.

Schlussendlich folgen die Strukturen dem Aufbau:

Anlass - Jahr/Saison - Dokumente

Wobei der Kantonalcup als

Anlass - Jahr - Startlisten

und

Anlass - Jahr - Resultate

gegliedert ist.

Die Logik der automatisierten Darstellung kann im Github-Repo eingesehen werden.

Mittels der kDrive-Cloud kann nun jedermann einfach und bequem Dateien einfach in den entsprechenden Ordner hochladen. Entweder via Browser, via Natel App oder via Desktop PC als Netzwerkordner.

Dank der Incremental Static Regeneration erscheinen die Dokumente in der entsprechenden Kategorie auf der entsprechenden Unterseite voll automatisch - dies sogar inklusive Bilder.

A propos: Selbst die Bildergalerie läuft über die kDrive-Cloud.

Die Gründe für das Design

Die Farbgebung mit Gelb und Schwarz, sowie Grün als Blickfängerfarbe basiert einerseits auf dem Grunddesign der ersten Webseite sowie den Farben des Kantons Schaffhausen - Gelb und Schwarz das Wappen, Grün und Schwarz die Kantonsfarben.

Das allgemeine Kredo der Webseite (und eigentlich allen meinen Webseiten) ist, mit möglichst wenigen Klicks zur gewünschten information zu kommen.

Die Webseite der MSVS hat zwei Zielgruppen: Die Mitglieder der MSVS selbst sowie die Teilnehmer des von der MSVS organisierten Kantonalcups. Dies sind sämtliche Schaffhauser Gewehr- und Pistolenschützen, die an dem Turnier jeweils teilnehmen.

So wurde auf der Startseite ein Knopf platziert, der direkt zu den Kantonalcup-Dokumenten führt, was insbesondere auf mobilen Geräten vorteilhaft ist, da dann nicht erst das Menü ausgeklappt werden muss.

In einer Sidebar werden Neuigkeiten angezeigt, häufig sind das Benachrichtigungen über ein neu hochgeladenes Dokument.

Auf den Unterseiten selber werden jeweils die Dokumente in ihren Kategorien unterteilt dargestellt - sofern für das aktuelle Jahr auch etwas vorhanden ist.

Die Theme-Wahl der ersten Neugestaltung mit WordPress fiel auf Hueman - dies deshalb, weil mit anderen Themes desselben Entwicklers bereits in der Vergangenheit gute Erfahrungen gemacht wurden.

Die zweite Neugestaltung orientiert sich dabei sehr an dem damaligen WordPress-Theme, mit einigen Abweichungen im Design. Die Sidebar wurde beibehalten, zeigen aber nurmehr die neu hochgeladenen Dokumente. Mit Klick darauf erhält man sofort das Dokument angezeigt, statt wie früher erst auf die entsprechende Unterseite weitergeleitet zu werden.

Da Einladungen und Resultate präferiert abgerufen werden, wurden andere Inhalte zur MSVS (wie Vorstandszusammensetzung, interne Dokumente, Bilder etc) zusammengefasst unter dem Menüpunkt "Die MSVS".

Praktische Erfahrungen

Die neue Infrastruktur erleichtert den Umgang mit den Dokumenten gewaltig - so können sogar während dem Spaziergang mit dem Hund die Resultate der ersten Runde des Kantonalcups innert Sekunden hochgeladen werden.

Eine manuelle Archivierung entfällt völlig, da die Cloud an sich als Archiv amtet und auf den unterseiten jeweils einfach die Dokumente des aktuellen Jahres anzeigt. 

Neuerdings möglich - während der alpinen Wanderung die Einladung für den Freundschaftsmatch hochladen, Netzabdeckung vorausgesetzt. - Image by <a href="https://pixabay.com/users/pasja1000-6355831/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3315120">❄️♡💛♡❄️ Julita ❄️♡💛♡❄️</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3315120">Pixabay</a>
Neuerdings möglich - während der alpinen Wanderung die Einladung für den Freundschaftsmatch hochladen, Netzabdeckung vorausgesetzt. - Image by ❄️♡💛♡❄️ Julita ❄️♡💛♡❄️ from Pixabay