In den letzten Jahren fand ich es immer wieder schön, dass sehr viele Menschen und Organisationen im Bildungsbereich zum Jahresende hin Online-Adventskalender gestaltet haben. Hinter jedem Türchen fand sich dann eine Bildungsinspiration.

Im Kontext von KI wäre es nun sicherlich ein leichtes, ein beliebiges Sprachmodell zu öffnen und sinngemäß zu prompten: „Erstelle mir einen Adventskalender als Web-App. Hinter jedem Türchen soll ein möglichst kreativer und spannender Denkanstoß zu Bildung und Digitalisierung zu finden sein.“

Viel mehr Freude als solch ein KI-Slop (= schnell gepromptete Inhalte, die Qualität, Weiterdenken, Hinterfragen sowie gemeinsames Nachdenken und ein spezifisches Anliegen vermissen lassen), dürfte aber eine eigene Gestaltung von Inhalten (egal ob mit oder ohne KI-Interaktion) machen. Dazu teile ich in diesem Blogbeitrag eine einfache Vorlage.

In den Vorjahren konnte hierfür z.B. eine Vorlage auf der Plattform Glitch genutzt werden. Glitch bietet inzwischen aber kein Hosting mehr an. Darum gibt es nun diese Alternative.

Zu den Vorzügen von KI gehört, dass man in Interaktion mit KI-Sprachmodellen eigene Anliegen besser verfolgen kann. Somit konnte ich die frühere Vorlage benutzerfreundlicher gestalten. Sie ist nun Markdown-basiert, was hoffentlich die Gestaltung von Inhalten vereinfacht.

Vorlage und Anleitung

Meine (unter Nutzung von KI-Sprachmodellen) gestaltete Vorlage findest du unter diesem Link. Am 24. Dezember wird der Adventskalender dann so aussehen:

Wenn du mit dieser Vorlage einen Online-Adventskalender gestalten und teilen möchtest, dann kannst du folgendermaßen vorgehen:

Schritt 1: Registrierung bei Codeberg

Du richtest dir einen kostenfreien Account auf Codeberg an. Das ist eine offene Infrastruktur zum gemeinsamen Coding. Wenn du den Dienst sympathisch findest, kannst du ihn mit einer Spende unterstützen.

Schritt 2: Vorlage kopieren

Du klickst rechts oben auf das Plus-Menü und wählst neue Migration aus:

Du klickst auf Git.

Du gibst als Klon/Migrations-URL ein:

https://codeberg.org/neleh/adventskalender-vorlage.git

Dann gibst du deinem Verzeichnis einen Namen. Zum Beispiel: mein-adventskalender.

Zuletzt klickst du auf Repository migrieren.

Schritt 3: Vorlage verstehen und anpassen

Es braucht ein paar Sekunden Zeit. Dann ist dein Verzeichnis fertig erstellt.

Du findest darin:

• Eine index.html Datei. Das ist die Startseite deines Adventskalenders. Darin findest du ein Grid mit 24 Türchen, die im Dezember nacheinander öffnen.
• Einen Ordner ‚content‘, in dem 24 Türchen zu finden sind – nummeriert miz 01.md bis 24.md
• Einen Ordner ‚Bilder‘, in den du weitere Bilder hochladen kannst, wenn du welche in deinem Adventskalender nutzen willst.
• Die Datei tag.html. Hier ist der ‚Rahmen‘ für deine Türchen gespeichert.

Am wichtigsten ist für dich nun der Ordner ‚Content‘. Hier kannst du nacheinander die Türchen öffnen und bearbeiten. Dazu klickst du rechts oben auf das Stift-Symbol und gelangst dann in einen Editor. Geschrieben wird mit Markdown, was nicht zu kompliziert zur Formatierung ist. Du kannst dich an dem Beispielinhalt orientieren, in dem du Regeln für Überschriften, Bilder. Links, Videos … findest und damit dann einfach deine Inhalte gestalten kannst. Wenn du speicherst (= Änderungen committen), dann siehst du deinen Inhalt schon relativ realitätsnah, aber noch nicht so, wie später im Kalender. Denn erstens werden z.B. Bilder und Videos hier noch nicht dargestellt (das ist also kein Fehler!). Zweitens wird dein Inhalt noch um den ‚Rahmen‘ aus der Datei tag.html ergänzt. Das bedeutet, dass immer Türchen #Nummer drüber stehen wird und es einen Link zurück zur Übersicht gibt.

So sieht Türchen 1 später im veröffentlichten Adventskalender mit dem unveränderten Beispielsinhalt aus:

Bei der Bearbeitung kannst du dir unter dieser URL einen Eindruck von deinem Adventskalender verschaffen: deinbenutzername.codeberg.page/deinverzeichnisname

Bitte beachte: Wenn du Änderungen vornimmst, kann es bis zu 5 Minuten dauern, bis diese auch auf der ‚richtigen‘ Website sichtbar werden.

Schritt 4: Weitere Anpassungen vornehmen

Wenn du bei der Rahmengestaltung weitere Änderungen vornehmen willst, dann kannst du dazu die Dateien index.html und tag.html öffnen und bearbeiten. Sehr einfach wäre es z.B. die Überschrift und Unterüberschrift deines Adventskalender zu verändern. Dazu suchst du in der index.html Datei den <header> und änderst den Text darin:

 <header>
        <h1>🎄 Adventskalender 🎄</h1>
        <p>Am jeweiligen Tag im Dezember, kannst du auf die Türchen klicken, um sie zu öffnen!</p>
    </header>

Darüber hinaus kannst du im <style>-Bereich z.B. Farben anpassen. Hier kann ein KI-Sprachmodell hilfreich sein und dich bei gewünschten Änderungen im Code unterstützen.

(Auch hier wieder beachten: Es braucht bis zu 5 Minuten bis die Änderungen sichtbar werden.)

Schritt 5: Testmodus ausstellen

Wenn dein Adventskalender fertig ist, möchtest du sicherlich die Türchen erst einmal alle schließen. Sie sollen ja erst im Dezember eines nach dem anderen geöffnet werden können. Dazu öffnest du die index.html Datei und stellst den Test-Modus aus.

Dazu suchst du diesen Code in Zeile 120ff:

 // ⚙️ TEST-MODUS: Setze testMode auf true zum Testen und auf false fürs Teilen
    const testMode = true;
    const testDay = 24;    // Wieviele Türchen sollen im Testmodus geöffnet sein?

Hier änderst du jetzt true in false (also: const testMode = false;) Damit wird der Test-Modus deaktiviert. Nach spätestens 5 Minuten sollten alle Türchen geschlossen sein. Du kannst deinen Adventskalender teilen. (Änderungen sind natürlich weiterhin noch möglich).

Feedback und Weiternutzung

Die Vorlage steht unter der Lizenz CC0 1.0. Du kannst sie also beliebig weiternutzen und anpassen ohne Notwendigkeit von Lizenzhinweisen. Wenn du Vorschläge zur Verbesserung der Vorlage hast, dann freue ich mich, von dir zu lesen. Du kannst diese natürlich auch direkt auf Codeberg vorschlagen.

Ich freue mich auf viele spannende und schöne Adventskalender im Dezember! :-)

PS. Wenn du selbst oder deine Institution (z.B. innerhalb von Moodle oder WordPress) über H5P verfügt, dann ist dieser Inhaltstyp eine gute Alternative, um einen eigenen Adventskalender zu gestalten.

---

Beitrag weiternutzen und teilen

Dieser Beitrag steht unter der Lizenz CC BY 4.0 und kann somit gerne offen weitergenutzt und geteilt werden. Hier kannst du dir den Beitragslink und/oder den Lizenzhinweis kopieren. Wenn du den Beitragslink in das Suchfeld im Fediverse (z.B. bei Mastodon) eingibst, wird er dir dort angezeigt und du kannst ihn kommentieren.

---