Wie baue ich das eigentlich alles? Ein Blick unter die Haube
Hallo zusammen,
nach dem ersten Beitrag kam oft die Frage: „Und wie baust du das eigentlich alles?“ Hier kommt die Antwort, so verständlich wie möglich und gern auch zum Nachmachen im Informatikunterricht.
Kurz zu mir: Ich bin eigentlich Mathematiker, habe Informatik bis Klasse 10 unterrichtet und bin in Baden-Württemberg Lehrer für Informatik und für IMP (Informatik, Mathematik, Physik). Schon im Studium habe ich mich auf Webdesign spezialisiert. Das hat mir immer Spaß gemacht, und genau dieser Spaß steckt in Lehrzeug.
Ein Werkzeugkasten mit gemeinsamem Kern
Lehrzeug ist aufgebaut wie ein echter Werkzeugkasten. Es gibt einen gemeinsamen Kern, den alle Werkzeuge benutzen:
- PHP setzt auf dem Server jede Seite zusammen: Kopf, Fuß, Menü, Sicherheitsregeln.
- CSS sorgt für das Aussehen, in Hell und Dunkel, am Handy wie am Beamer.
- JavaScript macht die Werkzeuge lebendig: Drucken mit sauberen Seitenumbrüchen, QR-Codes, Timer, Speichern.
Jedes Werkzeug hat dann seinen eigenen Ordner mit einer kleinen index.php, einer HTML-Vorlage, einer JavaScript- und einer CSS-Datei. Ein zentrales Verzeichnis beschreibt alle Werkzeuge: Name, Kurzbeschreibung, Fächer, Klassenstufen, Unterrichtsphase. Daraus entstehen Startseite, Menü und Filter automatisch. Ein neues Werkzeug ist also ein neuer Ordner und ein neuer Eintrag.
Warum JSON?
Eure Eingaben, Klassenlisten oder Vorlagen speichert Lehrzeug im Browser, und zwar als JSON. Das ist ein einfaches Textformat, das Menschen und Programme gleichermaßen lesen können:
{"klasse": "7b", "thema": "Brüche", "kriterien": 4}
Der große Vorteil: Ihr könnt alles als kleine Datei sichern, auf einem anderen Gerät wieder laden oder an Kolleginnen und Kollegen weitergeben, ganz ohne Konto und ohne Server. Auf dem Server selbst liegen nur anonyme Zählwerte (wie oft ein Werkzeug genutzt wird) und die Live-Runden von Wortwolke und Co., die nach 24 Stunden automatisch gelöscht werden.
Die Datei, die niemand sehen darf
Jede Webseite hat Geheimnisse, zum Beispiel das Kennwort für die Verwaltung. Bei Lehrzeug stehen sie in einer config.php, und die liegt nicht im öffentlichen Webordner, sondern eine Ebene darüber. Über eine Internetadresse ist sie gar nicht erreichbar, und eine zusätzliche Sperrdatei verriegelt den Ordner doppelt.
Dazu kommen weitere Schutzschichten:
- Alles läuft verschlüsselt über HTTPS, und der Browser merkt sich, dass es nur so geht.
- Eine strenge Sicherheitsrichtlinie (Content Security Policy) erlaubt nur Code von Lehrzeug selbst: keine fremden Skripte, keine Werbenetzwerke, keine Google Fonts.
- Besucher bekommen keine Cookies. Darum gibt es auch keinen Cookie-Banner.
- Die Verwaltung ist mit einem langen Kennwort geschützt. Nach wenigen Fehlversuchen ist erst einmal Pause.
- Ein Dateiwächter kennt von jeder Datei eine Prüfsumme und meldet sofort, wenn sich auf dem Server etwas verändert hat, das ich nicht hochgeladen habe.
Oben auf jeder Seite unter „Mehr“ → „Sicher und privat“ könnt ihr die wichtigsten Punkte sogar live selbst prüfen.
Wie neue Versionen auf den Server kommen
Ich programmiere auf meinem Rechner in einem Quellordner. Ein kleines Python-Skript baut daraus das fertige Paket, prüft alle Dateien und erzeugt die Prüfsummen für den Dateiwächter. Danach laufen automatische Tests im Browser: Passt jede Seite aufs Handy? Lässt sich alles sauber als PDF drucken? Gibt es Fehler?
Erst dann geht es hoch, und zwar per SFTP, also verschlüsselt, mit einem starken Kennwort. Bei Updates lade ich nur die Dateien hoch, die sich wirklich geändert haben. Die config.php wird dabei nie überschrieben.
Und die Ideen?
Die kommen aus dem Unterricht, aus dem Kollegium und von euch. Beim Programmieren nutze ich inzwischen auch KI als Sparringspartner, ähnlich wie im Unterricht: Die Ideen, das Ausprobieren im Klassenzimmer und die Verantwortung bleiben bei mir.
Wenn ihr Fragen zur Technik habt oder das Ganze mit eurem Informatikkurs nachbauen wollt: Schreibt mir, ich helfe gern.
Euer Michael
