pistolenclub-hallau.ch - Die Philosophie dahinter
Dieser Artikel beleuchtet die Philosophie hinter der Webseite pistolenclub-hallau.ch; Von der Konzeption, über die Gründe der gewählten Technik, hin zu praktischen Erfahrungswerten.
Die Ausgangslage
Der Pistolenclub Hallau, eigenständiger Verein seit mitte 80er-Jahre (davor als Pistolen-und Revolversektion von Hallau bekannt), hatte lange keine Internetpräsenz. Lange wurde es nicht als notwendig erachtet, lange hatte man aber auch niemanden, der sowas realisieren konnte.
Da ich als relativ frisches Mitglied im Vorfeld bereits erste Erfahrungen mit Webdesign sammeln konnte (mit WordPress), habe ich mich freiwillig gemeldet, eine Webseite zu gestalten.
Da es partout keine Vorlage für meine Vision gab, war ich dazu gezwungen, recht viel selbst Hand anzulegen und mich in den Sog von CSS zu begeben. Im Nachhinein war das vorteilhaft, ich habe sehr viel über CSS gelernt (und auch über Eigenheiten von WordPress).
Die Probleme der alten Infrastruktur
Lange ging es mit WordPress gut, allerdings fingen mich mit der Zeit gewisse Dinge an zu nerven. Die Resultate mussten von Hand à jour gehalten werden, das Archiv war manuell gehandhabt, die mobile Darstellung war sehr garstig umzusetzen und zuguterletzt häzften sich die Probleme im Hintergrund: Bilder und Dokumente weigerten sich partout, hochgeladen zu werden - ein unglaublich mühsames Gebastel wurde nötig, dieses Problem zu umgehen.
Das ging so nicht weiter.
Die Gründe für die gewählte Technik
Zwischenzeitlich habe ich mir JavaScript beigebracht und erste kleine Projekte gebaut. Ich wollte mich aber sowieso in React und dem Next.js-Framework einarbeiten - die Frustration mit der WordPress-Webseite des Pistolenclub Hallau bot sich dabei als Übungsprojekt hervorragend an.
JavaScript, React und Next.js standen schnell fest, ich habe mit einigen Libraries und Frameworks experimentiert und die Kombination React & Next.js war für mein Hirn am logischsten aufgebaut.
Die Webseite war dann auch relativ schnell erstellt - ich habe mich am Design der WordPress-Webseite orientieren können.
Was Kopfzerbrechen bereitete war mein Wunsch, das Hochladen und Darstellen der Dokumente (vor allem für die Resultate) weitestgehend zu automatisieren. Erst dachte in an simples FTP, das war mich dann aber doch zu krude - eine Cloud-Lösung musste her. Nur welche?
Als erstes habe ich mir Dropbox angeschaut. Das API zu Dropbox war verständlich für jemanden, der gerade erst mit APIs beginnt. Die Problematik lag dann aber in der Authentifizierung - Dropbox nutzt Session-Tokens, und mir war das damals zu hoch.
Einige andere Cloud-Lösungen wurden unter die Lupe genommen, darunter Exoscale, Box und auch Amazon S3, aber alle krankten an sehr mangelhafter API-Dokumentation. Für einen Anfänger ungeeignet.
Eine Cloud tat sich aber hervor: Infomaniak kDrive. Nachdem ich anfangs fälschlicherweise von CORS-Problemen ausgegangen bin, habe ich mich aus lauter Verzweiflung nochmals rangewagt - zum Glück.
Infomaniak bietet eine exzellente und verständliche Dokumentation und arbeitet mit Bearer-Tokens - perfekt!
Die einzige Herausforderung war jetzt noch das automatische Darstellen, was stellenweise sehr verschachtelten Code hervorbrachte. Aber: Es funktionierte.
Zwar muss man einige Sekunden warten, nachdem man auf ein Dokument geklickt hat. Jeder Klick fragt nämlich das gewollte Dokument separat beim Server an. Mir war diese Option lieber als eine längere Wartezeit beim Seitenladen.
Die Seiten selbst werden mittels Incremental Static Regeneration erstellt, man muss also nur die Dokumente in die Enstprechenden Ordner hochladen, der Rest passiert automatisch - sogar das Jahreswechselaufräumen.
Der Rest der Webseite ist statisch aufgebaut, mangels Erfahrung mit Next.js und APIs. Da sich der Inhalt aber abgesehen von den Dokumenten kaum ändert, ist das vernachlässigbar - eine Implementierung eines Content Management Systems ist zwar geplant, aber keine akute Notwendigkeit.
Die Gründe für das Design
Die Farbgebung mit Weiss und Grün, sowie Lichtgrau als Blickfängerfarbe basiert einerseits auf dem Grunddesign der ersten Webseite sowie den Farben des Pistolenclub Hallau. Warum die aber Weiss und Grün sind, kann ich nicht beantworten.
Das allgemeine Kredo der Webseite (und eigentlich allen meinen Webseiten) ist, mit möglichst wenigen Klicks zur gewünschten information zu kommen.
Als Hauptzielgruppen sind die Vereinsmitglieder sowie externe Schützen, die das Schwabenkrieg-Erinnerungsschiessen des Pistolenclub Hallau besuchen wollen, identifiziert.
Vereinsmitglieder möchten vor allem schnell zum Jahresprogramm und den Resultaten gelangen. Dies kann entweder über den Menübalken, oder die grossen Knöpfe auf der Hauptseite geschehen.
Für externe Schützen weist ein grosser Knopf auf das Schwabenkrieg-Erinnerungsschiessen hin. In der Desktop-Ansicht ist dieser unter den anderen Knöpfen, auf dem Natel aus Platzgründen strategischerweise an oberster Stelle.
Für nicht sofort wichtige Bereiche (Vereinsinformationen, Statuen) navigiert man über die Menüleiste.
Potentiell interessierte Neumitglieder kommen über die Frontseite in den "Mitmachen"-Bereich, der erklärt, wie man am ehesten Kontakt zum Verein knüpft.
Das Grunddesign hat sich seit der ersten Konzeption mit WordPress kam verändert, nur die Farbgebung änderte vom anfangs dominierenden Grau zu Grün, da das Grau stellenweise sehr monoton wirkte.
Mit Next.js war aber sehr viel mehr feinarbeit möglich als mit WordPress.
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 jeweiligen Schiessen 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.
