Inhaltsverzeichnis

Credits

Bei der Entwicklung dieser Webpräsenz haben mitgewirkt:

Der Lehrkörper des Gymnasiums Otterndorf
Daniel Omran
(Inzwischen ehemaliger) Schüler des Gymnasiums
Ceyhun Güney
Designer
Art+Code Studio
Das Team vom Art+Code Studio

Quellcode

Der Quellcode dieser Webpräsenz ist Open Source und lizensiert unter der freien GNU Affero General Public License (AGPL).

Das bedeutet, dass jeder den Quellcode dieser Webpräsenz unter Berückrücksichtigung dieser Lizenz nutzen, kopieren, ändern, zusammenführen, veröffentlichen und verteilen darf. Davon ausgenommen sind die Bilder, das Logo und die Texte dieser Webpräsenz, deren Copyright beim Gymnasium Otterndorf liegt.

Dadurch ermöglichen wir es beispielsweise anderen Schulen oder Organisationen, auf Basis dieses Quellcodes eigene Webpräsenzenzen zu entwickeln. Vielleicht bist du auch selbst Programmierer:in oder möchtest es werden, dann kannst du von dem Quellcode möglicherweise etwas lernen. Auch Schüler:innen am Gymnasium Otterndorf könnten auf diese Weise die Schule unterstützen und die Seite verbessern. So oder so: Neue Features, die dabei entstehen, können bei Bedarf in dieses Projekt zurückfließen, wovon sowohl du als auch dieses Projekt profitieren können.

Falls du etwas Entsprechendes vor- oder auch nur weitere Fragen hast, dann nimm gerne Kontakt mit uns auf oder erstelle direkt ein Pull Request auf Github.

API

API steht wörtlich für Anwendungs­programmier­interface und ist ein Programmteil, der von einem Softwaresystem anderen Softwaresystemen zur Anbindung zur Verfügung gestellt wird. Mit der öffentlichen API vom Gynmasium Otterndorf hast du also die Möglichkeit die Inhalte der Seite in einer anderen oder selbstentwickelten Software einzubinden. Denkbar wäre z. B. eine News-Reader-App, welche die Blog-Artikel oder den Kalender abfragt. Ein anderes Beispiel wäre eine Schüler:innen-Webseite, in der die Inhalte der Schüler:innen-Strapi-Instanz eingebunden werden soll, da die Schüler:innen hier auch eigene Inhalte anlegen dürfen.

Wie kann ich die API nutzen?

Für die APIs steht ein Playground zur Verfügung, in dem die API ausprobiert werden kann. Wenn du einfach nur Inhalte abfragen möchtest, sind dafür keine Zugangsdaten notwendig – du kannst also direkt loslegen. Es ist auch möglich, Daten anzulegen, zu ändern und zu löschen. Falls du auch diese Funktionen nutzen möchtest, dann nimm gerne Kontakt mit uns auf.

Sollten wir feststellen, dass die API ausgenutzt wird, dann werden wir den Zugriff für alle einschränken.

Strapi API für die Inhalte
REST-API Playground
GraphQL-API Playground
Strapi API für Schüler:innen-Inhalte
REST-API Playground
GraphQL-API Playground
API für die Suche, Suchvorschläge und den Kalender
REST-API Playground

Solltest du die GraphQL-API verwenden wollen, kannst du dir unsere GraphQL-Dateien im Quellcode anschauen und diese als Inspiration verwenden.

Technologien

Alle von diesem Projekt verwendeten Technologien sind ebenfalls Open Source und stehen unter freien Lizenzen.

Node.js
Node.js ermöglichst es, JavaScript auf dem Server zu verwenden. Hierzu gibt es eine schöne Podcast-Folge, die zwar noch aus den Anfangszeiten von Node.js stammt, aber trotzdem einen guten Überblick über das Potential von Node.js verschafft. Node.js führt in diesem Projekt die Serveranwendungen (Nest und Strapi) aus.
TypeScript
TypeScript ist quasi ein Aufsatz auf JavaScript und reichert es um Typesicherheit an. Der Podcast Working Draft beschäftigt sich in unterschiedlichen Folgen mit TypeScript.
Nest
Nest ist ein progressives Node.js-Framework zur Erstellung effizienter, zuverlässiger und skalierbarer serverseitiger Anwendungen. Nest kommt bei diesem Projekt für eigene APIs (zum Beispiel für die Kalenderabfrage oder die Suche) zum Einsatz und kümmert sich um das Rendern sowie Ausliefern der Webdaten. Hier gibt es eine interessante Podcast-Folge zu dem Framework.
Lunr.js
Lunr.js ist eine leichtgewichtige Such-Engine für Node.js, die keine zusätzliche Serveranwendung benötigt. Lunr.js kommt bei diesem Projekt für die Volltext-Suche im Header zum Einsatz und ist in die Nest-Anwendung integriert.
Strapi
Strapi ist ein Headless CMS für das Backend und die Inhaltspflege. Diese Seite betreibt zwei Instanzen von Strapi. Die erste verwaltet den Hauptinhalt der Seite. Nur die Betreiber dieser Seite haben Zugriff auf diese Instanz. Die zweite Instanz ist für Schüler:innen gedacht. Auf diese haben sie selbst Zugriff und können sie bei Bedarf in eine selbst entwickelte Webseite oder Software integrieren. Die Sprüche des Tages auf der Startseite werden ebenfalls in der Schüler:innen-Instanz gepflegt.
Riba
Riba ist ein leichtgewichtiges, aber mächtiges Frontend-Framework. Es ist vergleichbar mit anderen Frameworks zum Erstellen von Single-Page-Webanwendungen, hat aber einen Fokus auf native Browserfeatures wie beispielsweise Custom Elements. Riba kümmert sich um alles, was im Webbrowser irgendwie interaktiv ist – beispielsweise die Sidebar.
Bootstrap 5
Bootstrap 5 ist ein CSS-Framework für Responsive- und Mobile-First-Webanwendungen. Das Layout dieser Webpräsenz basiert zu großen Teilen auf Bootstrap 5, wurde aber an vielen Stellen z. B. durch SCSS-Variablen angepasst.
Git
Git ist eine Software zur verteilten Versionsverwaltung von Quellcodes. Portale wie Github nutzen diese Software zur Verwaltung von Software-Projekten. Auch dieses Projekt wird auf Github verwaltet. Dadurch kann jede Änderung, die wir von Anfang an an diesem Projekt gemacht haben, zurückverfolgt und angeschaut werden.
OpenStreetMap
OpenStreetMap ist ein internationales Projekt mit dem Ziel, eine freie Weltkarte zu erschaffen. Dafür sammeln alle beteiligten Helfer weltweit Daten über Straßen, Eisenbahnen, Flüsse, Wälder, Häuser und vieles mehr. Die OpenStreetMap wird in diesem Projekt für die Karte im Footer und den Routenplaner genutzt.
Podlove Web Player
Podlove Web Player ist ein Open-Source-Webplayer, der unter anderem Kapitelunterstützung, das Einbinden von Transkripten, Funktionen zum Teilen und Downloaden von Episoden sowie Unterstützung für verschiedene Audioformate und Livestreams bietet. Die Entwickler betreiben auch selbst einen Podcast, in dem sie mit verschiedenen Gästen über Features und Standardisierung diskutieren.
Und noch vieles mehr
Es kommen weitere Technologien wie beispielsweise GraphQL, Sass / SCSS, Pug, Webpack und Babel zum Einsatz. Doch es würde den Rahmen sprengen, alle Technologien hier aufzulisten. Wenn du dich dafür interessierst, dann durchstöbere einfach den Quellcode dieses Projekts.

Assets

Die meisten Grafiken sind selbst erstellt. Die wenigen, die es nicht sind, haben wir hier aufgelistet:

Als Schriftart verwenden wir: