Offen lizenzierte Templates für Deine Website

In diesem Blog habe ich schon sehr viel zum Thema Open Educational Resources (OER) geschrieben. Es handelt sich dabei um Bildungsmaterialien, die durch ihre offene Lizenz weiter genutzt, angepasst und verändert werden können. Typische Formen von OER sind unter anderem Arbeitsblätter oder Präsentationen. Daneben lassen sich aber natürlich auch andere Produkte offen lizenzieren.

Neu entdeckt habe ich vor kurzem zum Beispiel sehr ansprechende und offen lizenzierte Website-Templates. Ein Website-Template ist ein gestalteter Rahmen für beliebige Online-Inhalte. Die offene Lizenzierung der Templates ermöglicht hier eine flexible Weiternutzung und Gestaltung, d.h. Du kannst Dir damit auf sehr einfache Art und Weise eine eigene Website gestalten. Die Templates sind alle responsiv. Das bedeutet, dass sie auf dem Smartphone ebenso funktionieren, wie auf dem Tablet oder am Laptop.

Was erhalte ich als Template?

Alle Templates finden sich auf der Website HTML5Up. Du kannst sie Dir ansehen, Dein Lieblings-Template auswählen und von dort direkt herunterladen. Du erhältst einen gezippten Ordner, in dem sich die Ordner 'assets' und 'images' befinden. Außerdem einzelne Dateien.

  • In dem assets-Ordner finden sich alle benötigten Programmierungen und Daten für das Design der Website. Insbesondere also die CSS-Datei, in der festgelegt ist, wie z.B. eine Überschrift genau gestaltet sein soll, welche Schriften verwendet werden etc. In der Regel musst Du Dich um die Inhalte des assets-Ordner nicht weiter kümmern, wenn Dir das Design grundsätzlich gefällt.
  • Der 'images' Ordner enthält alle Bilder der Website. In dem herunter geladenen Ordner handelt es sich hier zunächst um Platzhalter-Bilder, die Du im Verlauf der Gestaltung Deiner Website dann durch eigene Bilder ersetzen kannst.
  • Als einzelne Datei findest Du insbesondere die index.html. Diese beschreibt, was auf der Website zu sehen ist, d.h. welcher Text, in welcher Form und gegebenenfalls mit welchen Bildern. Geschrieben ist die Datei in HTML.

Wie entsteht aus dem Template meine Website?

Um das Template zu Deiner Website zu machen, musst Du es zunächst auf einen Server hochladen. Durch die Einfachheit des Templates brauchst Du keine Datenbank einrichten. Es reicht, wenn Du Dir ein Basis-Einstiegspaket eines Hosting-Dienstes besorgt, das Dir einen FTP-Zugang zur Verfügung stellt. (FTP steht für File Transfer Protocol - gemeint ist damit die Übertragung der Dateien von Deinem Laptop auf den Server im Internet).

Zur Übertragung nutzt Du ein FTP-Programm. Eine Open Source Lösung ist z.B. Filezilla. Dort erstellst Du im Severmanager einen neuen Server (mit den FTP-Angaben Deines Hosting-Anbieters), verbindest Deinen Rechner mit dem virtuellen Server, wählst alle Datein des entzippten Templates-Ordners aus und lädst sie hoch. Wenn Du jetzt Deine URL aufrufst, erscheint Deine Website mit dem noch unbearbeiteten Muster-Template.

Wie gestalte ich meine Inhalte

Um Deine Inhalte zu erstellen musst Du einfach die zunächst bereitgestellten Muster-Texte und -Bilder durch Deine Inhalte ersetzen. Dazu öffnest Du (in Filezilla mit einem Rechtsklick und dann 'Ansehen/ Bearbeiten) die index.html Datei. Wenn Du Dich bis dato noch nicht mit HTML beschäftigt hast, dann sieht der Code evtl. auf den ersten Blick etwas verwirrend aus. Am einfachsten findest Du Dich zurecht, wenn Du paralell das Beispiels-Template in Deinem Browser öffnest - und dann Schritt für Schritt die einzelnen Bereiche in der index.html Datei suchst und sie durch Deinen Text ersetzt.

Sobald Du etwas speicherst, wird Dich Dein FTP-Programm fragen, ob Du die geänderte Version auf Deinen Server laden willst. Das bestätigst Du und siehst auf Deiner Website dann direkt den geänderten Text. Probiere und erkunde einfach aus: Du kannst nichts 'kapputt' machen. Wenn Du etwas versehentlich löschst und die Website dann merkwürdig aussieht, kannst Du einfach die letzten Änderungen rückgängig machen.

Im HTML-Code wirst Du Verweise zu Bildern finden (< img >). Die Namen beziehen sich auf die Musterbilder im Ordner 'images'. Du kannst entweder Deine Bilder unter dem gleichen Namen abspeichern, diese dann hochladen und auf diese Weise die Musterbilder überschreiben. Oder Du benennst Deine Bilder anders, lädst sie hoch und schreibst dann den von Dir gewählten Dateinamen anstelle des ursprünglichen Namens in die index.html Datei.

Und der Lizenzhinweis?

Ein kurzer Credit ist im Footer des Templates standardmäßig erhalten. Wenn Du rechtlich auf der sicheren Seite sein willst, schreibst Du einen 'richtigen' Lizenzhinweis basierend auf der TULLU-Regel. Die Templates stehen alle unter Creative Commons Namensnennung (CC BY)

Kann ich Beispiele sehen?

Ich habe in der letzten Woche mit HTML5Up zwei Websites gestaltet: einmal den Aufruf zur GlOERchallenge - dem Wettbewerb zu freien Bildungsmaterialien zum globalen Lernen sowie eine Projekt-Vorstellungs-Website für meine geplante Initiative netzsouverän - ein Bildungsprojekt für mehr digitale Souveränität.

Ich wünsche Dir viel Spaß beim Ausprobieren und Gestalten Deiner eigenen Website mit HTML5up!

Und das wichtigste zum Schluss: Danke an @ajlkn fürs Teilen!