3. Grundgerüst für neue Seite

In diesem Dokument wird das Grundgerüst für eine neue Seite eines Themas zur Verfügung gestellt. Wie damit umzugehen ist, wird danach erklärt.

3.1 Vorlagen

Für jeden Bereich gibt es je eine Vorlage, um den Brotkrumenpfad und die Farbgebung nicht auch noch händisch anpassen zu müssen. Der Farbcode für die einzelnen Blöcke muss leider derzeit noch manuell angepasst werden.

Klicke jeweils auf den Download-Button, um das Vorlagen-Dokument zu erhalten:

  • Technische Informatik Download PDF
  • Praktische Informatik Download PDF
  • Angewandte Informatik Download PDF
  • Theoretische Informatik Download PDF
  • Externe Partner und Angebote Download PDF
  • Lehrpläne Download PDF

3.2 Webseite Zip

Um die neuen Seiten testen zu können, braucht es einen Großteil der Webseite (CSS- und JavaScript-Dateien, Ordnerstruktur, ...). In der im folgenden verknüpften Zip-Archiv ist die Webseite mit allen notwendigen Dateien zu finden. Fügt eure erstellten Webseiten in den entsprechenden Unterordner und öffnet diese dann im Browser, um diese zu testen.

Hier ist der Downloadlink zum Zip-Archiv: Download Ziparchiv Aktuelle Version: 3.3, Stand 22.01.2026

Changelog

Neu in Version 3.3:

  • Inhalte von Kathleen (Binärzahlen) hinzugefügt
  • Thema Mikroprozessoren wurde entfernt
  • Inhalte von Otto (Programmieren mit Python) wurde aktualisiert
ACHTUNG: Fehler in Videowiedergabe von Youtube-Videos auf lokalem Rechner (nur im Browser, nicht im Editor) --> Fehler finden!

Neu in Version 3.2:

  • Inhalte von Kathleen (Theoretische Informatik) hinzugefügt und darin enthaltenen Link zur Binärkodierung korrigiert

Neu in Version 3.1:

  • Inhalte von Kathleen (Theoretische Informatik) hinzugefügt und fehlerhafte Webseite ausgetauscht (Binärzahlen umwandeln)
  • In der Praktischen Informatik: Erstes Kapitel zu Programmieren mit Greenfoot hinzugefügt

Neu in Version 3.0:

  • Inhalte von Kathleen (Theoretische Informatik) aktualisiert
  • Kacheln wurden wieder in der theoretischen Informatik eingefügt
    ACHTUNG: Alle Webseiten wurden im Kopf aktualisiert, bitte neu herunterladen!

Neu in Version 2.9:

  • Inhalte von Kathleen (Theoretische Informatik) aktualisiert
  • Link in neuen Tab öffnen wurde in Automaten ermöglicht
  • Vorlage für große Exkurse korrigiert, die Vorlage beinhaltete nicht das automatische Ausklappen

Neu in Version 2.8:

  • Prolog (die Kachel) wurde aus der Praktischen Informatik entfernt.
  • Menüzeile in allen HTML-Dokumenten (auch in den Vorlagen) angepasst, dass Theoretische Informatik direkt erreichbar ist
    ACHTUNG: Alle Vorlagen neu laden und dann weiter arbeiten!

Neu in Version 2.7:

  • Brotkrumenpfad in der Theoretischen Informatik angepasst
  • Menüzeile in allen HTML-Dokumenten (auch in den Vorlagen) angepasst, dass Theoretische Informatik direkt erreichbar ist
    ACHTUNG: Alle Vorlagen neu laden und dann weiter arbeiten!

Neu in Version 2.6:

  • Die Seite00 von Programmieren mit Python wurde durch python_uebersicht.html ersetzt und in allen Dokumenten korrekt verlinkt.
    Auf dieser Seite sind zwei große Kacheln, die zu den zwei Bereichen von Python führen.
    Die Art und Weise, wie navigiert wird, ist möglicherweise noch nicht endgültig und die Seiten enthalten Syntaxfehler, die jedoch vom Browser ignoriert werden.

Neu in Version 2.5:

  • Login für Lehrer wurde wieder funktionstüchtig gemacht, dafür war PHP notwendig
    Das Passwort ist vorübergehend "Lehrer123".
    Wenn die Funktion lokal getestet werden soll, muss ein PHP-server laufen, z.B. über XAMMP.
    Auf dem Server funktioniert es.

Neu in Version 2.4:

  • Thema Kryptologie wurde von Mirko aktualisiert und ist eingefügt worden
    Noch ändern:
    Hauptüberschriften auf mehrere Seiten verteilen
    Titel (Kryptografie) ist nicht gleich dem Thema (Kryptologie)
  • Vorlage für Theoretische Informatik wurde angepasst (Pfade zu den CSS- und Script-Dateien wurde angepasst)
    Hinweis: Alle eingefügten Blöcke müssen nach dem Einfügen manuell überprüft werden, ob die Pfade zu den Bildern, etc passen
  • Das Problem mit den versetzten Zeilennummern in Codeblöcken wurde behoben.
    Der Code wird jetzt standardmäßig in Courier new dargestellt.

Neu in Version 2.3:

  • Der Bereich Theoretische Informatik wurde von Kathleen bearbeitet und erweitert.

Neu in Version 2.2:

  • Das Thema Kryptologie wurde in der Angewandten Informatik hinzugefügt und mit der Webseite von Mirko verknüpft.
    Hinweis: Die Formatierung ist noch von eienr anderen Seite, hier geht es erstmal um die Inhalte, das Design wird künftig noch angepasst.

Neu in Version 2.1:

  • Die Inhalte von Kathleen (Automaten Zwischenstand) und Otto (Programmieren mit Python) wurden eingefügt und hochgeladen
  • Die Zwischenseite theoretische-informatik.html wurde entfernt, da inhaltlich eine Unterteilung derzeit nicht nötig ist.
  • Bei Kathleen wurde einmal der Rahmen farblich angepasst, da er noch practical statt theoretical als Attribut besaß. Alle Verknüpfungen mussten bei allen drei Seiten angepasst werden, da es nun keine theoretische-informatik.html mehr als Zwischenseite gibt.
  • Bei Otto habe ich die Verlinkung wie gewünscht angepasst und die Nummerierung weggelassen.
    Der Editor hat viele Fehler angezeigt, auf der seite09.html habe ich einige versucht zu beheben, jedoch mit geringem Erfolg.
    Die Seitennavigation sollten wir gemeinsam noch einmal ansehen und besprechen.

Neu in Version 2.0:

Diese Version erhält die Nummer 2.0, da sie nun einen Zwischenstand markiert, der in allen Blöcken maximal fehlerfrei ist und alle bisherigen Wünsche umgesetzt wurden.

  • Anpassung der Video- und Exkurs-Blöcke, sodass Ein- und Ausklappen fehlerfrei funktioniert
  • iFrames können mit extra Wrapper-Klasse umgeben werden, um bei zu kleinen Bildschirmen das Scrollen zu ermöglichen
  • kleinere Fehler im Code wurden behoben (Maskierung von Sonderzeichen, Entfernen unnötiger Attribute)
  • CC-Block wurde per CSS in der Fußzeile hinzugefügt. Dadurch sind keine Änderungen in HTML notwendig!
    Die Positionierung und die Größe stehen noch zur Debatte.
  • Noch zu besprechende Änderungen (Vorschläge):
    • Statt Blocksatz lieber nur linksbündig + Silbentrennung?
    • Aufgabe-Symbol ändern (statt ? ein !)?
    • Statt "Lösung" lieber "Lösungsvorschlag" in den Übungen verwenden?
  • Verbleibendes Problem: Spiel mit Binärzahlen funktioniert nicht mehr, dies muss sowieso selbst geschrieben werden und wurde daher entfernt.

Neu in Version 1.12:

  • Die Codeblöcke vergrößern nun nicht mehr den Fensterinhalt und Code wird automatisch umgebrochen. Eine automatische Einrückung des Codes ist leider nicht möglich, daher wird empfohlen, den Code von Hand umzubrechen, dass er eine gewisse Breit enicht überschreitet.
    Eine alternative gäbe es noch: Nur der Codeblock wäre seitlich scrollbar, so bleiben die Zeilen, wie sie sind, jedoch hat man ggf. nicht alles auf einen Blick.
  • geplante Änderung: CC-Block in der Fußzeile hinzufügen
  • geplante Ergänzung: Beispielblock für iFrames
  • Noch zu besprechende Änderungen (Vorschläge):
    • Statt Blocksatz lieber nur linksbündig + Silbentrennung?
    • Aufgabe-Symbol ändern (statt ? ein !)?
    • Statt "Lösung" lieber "Lösungsvorschlag" in den Übungen verwenden?
  • Noch ausstehendes (bekanntes) Problem: Codefenster verbreitern den Content-Bereich und es muss horizontal gescrollt werden.

Neu in Version 1.11:

  • Der Darstellungsfehler, der durch die Einbindung von iFrames aufgetreten ist, wurde behoben. iFrames müssen mit einem "Wrapper-Tag" umgeben werden, um ordentlich angepasst zu werden. Ein entsprechender Beispielblock wird demnächst hinzugefügt.
  • geplante Änderung: CC-Block in der Fußzeile hinzufügen
  • Noch zu besprechende Änderungen (Vorschläge):
    • Statt Blocksatz lieber nur linksbündig + Silbentrennung?
    • Aufgabe-Symbol ändern (statt ? ein !)?
    • Statt "Lösung" lieber "Lösungsvorschlag" in den Übungen verwenden?
  • Noch ausstehendes (bekanntes) Problem: Codefenster verbreitern den Content-Bereich und es muss horizontal gescrollt werden.

Neu in Version 1.10:

  • Inhalte aus der technischen Informatik wurden aktualisiert (Binärzahlen).
  • Inhalte aus der praktischen Informatik wurden aktualisiert (Programmieren mit Python).
    Das Inhaltsverzeichnis wurde etwas angepasst, indem Nummerierungen eingefügt wurden.
    Die Überschriften im Inhaltsbereich haben entsprechende Nummerierungen erhalten.
    Die farbliche Hervorhebung des aktuellen Abschnitts wurde angepasst.
  • geplante Änderung: CC-Block in der Fußzeile hinzufügen
  • Noch zu besprechende Änderungen (Vorschläge):
    • Statt Blocksatz lieber nur linksbündig + Silbentrennung?
    • Aufgabe-Symbol ändern (statt ? ein !)?
    • Statt "Lösung" lieber "Lösungsvorschlag" in den Übungen verwenden?
  • Noch ausstehendes (bekanntes) Problem: Manche Elemente beanspruchen mehr Platz als andere und verbreitern das Fenster dadurch übermäßig (bekannt ist das Codefenster, hier müssen im Code derzeit manuell Zeilenumbrüche eingefügt werden, dass der Code-Block nicht ausufert).

Neu in Version 1.9:

  • Inhalte aus der technischen Informatik wurden aktualisiert.
  • Noch ausstehendes Problem: Manche Elemente beanspruchen mehr Platz als andere und verbreitern das Fenster dadurch übermäßig (bekannt ist das Codefenster, hier müssen im Code derzeit manuell Zeilenumbrüche eingefügt werden, dass der Code-Block nicht ausufert).

Neu in Version 1.8:

  • Fehler behoben: Das Bild in der Kopfzeile war falsch verlinkt. Da die Änderung im CSS erfolgt, muss keine Seite angepasst werden.
  • Inhalte aus der technischen Informatik wurden aktualisiert.
  • Fehlerhafte Darstellung der Binär-Tabelle bereinigt (Tabellenköpfe haben keine Linien, daher td statt th verwenden)
  • Noch ausstehendes Problem: Manche Elemente beanspruchen mehr Platz als andere und verbreitern das Fenster dadurch übermäßig (bekannt ist das Codefenster, hier müssen im Code derzeit manuell Zeilenumbrüche eingefügt werden, dass der Code-Block nicht ausufert).

Neu in Version 1.7:

  • Die Blöcke auf der Startseite und den Unterthemen wurden so angepasst, dass der ganze Block angeklickt werden kann und gleichzeitig wurde der Linktext entfernt.
  • Ein neues Tool wurde erstellt: Der Pfad-Generator. Damit können die relativen Pfade zwischen den Webseiten und Dateien automatisch generiert werden. Der Download ist unten im Punkt "3.4 Hilfsprogramme" zu finden.
  • Programme, die zum Erstellen der Webseite hilfreich sind, haben einen eigenen Punkt in diesem Dokument bekommen, sodass hier zentral heruntergeladen werden kann.

Neu in Version 1.6:

  • Letzte funktionale Fehler behoben
  • Inhalte aus Technischer Informatik auf der Übersichtsseite angepasst und neu verlinkt
  • Inhalte von Kathleen zur technischen Informatik eingepflegt und an die neuen Scripte und CSS-Dateien angepasst

Neu in Version 1.5:

  • Problem des Überlagerns von Bildunterschriften mit darauf folgenden Texten wurde gelöst. Die Lösung funktioniert über das script.js, die Seiten müssen also inhaltlich nicht angepasst werden.
  • Die Farbgebung der Demoseite auf der Lehrwerks-Übersichtsseite war falsch und wurde korrigiert.

Neu in Version 1.4:

  • Der Changelog wurde übersichtlicher gestaltet (ausklappbare Box, neueste Änderungen oben)
  • Fehlende Farbdefinitionen für Lehrplan-Unterseiten wurden ergänzt.
  • Ein Block (zwei Varianten) für interaktive Übungen wurde hinzugefügt.
  • Tool, um HTML-Code-Elemente für den Code-Block zu maskieren wurde hinzugefügt und verlinkt (In der Erklärung zum Code-Block)

Neu in Version 1.3:

  • Codeblöcke können nun optional mit Zeilennummern versehen werden. Diese werden mit dem "Kopieren"-Button nicht mit kopiert.
    Achtung: Da sich ein Script geändert hat und auch zusätzliche CSS-Dokumente eingebunden wurden, haben sich auch die Vorlagen geändert! Bitte ggf. neu herunterladen und die neuen Versionen verwenden.
  • Es gibt nun für jeden Codeblock Minimal-Varianten, in denen der zu ersetzende Code in Eckigen Klammern gesetzt ist. Wo es mehrere Möglichkeiten gibt, z.B. bei den Tabellen wurde für jede Möglichkeit ein Beispielcode erstellt, um weniger unnltigen Code zu kopieren.
  • Im Übungsblock (Aufgaben-Block) wurde ein Hinweis eingefügt, wie die Kopfzeile optional gemacht werden kann (ist also nicht unbedingt nötig).
  • Es wurden Verlinkungen zwischen den Erklärungen und den Codebeispielen erstellt, um schneller hin- und herwechseln zu können.

Neu in Version 1.2:

  • Die Bilder in der Bilderreihe werden nun so verändert, dass die kleineren Bilder an die größeren angepasst werden. Das klappt aber nur bedingt, am Besten sollten die Bilder so gewählt werden, dass Bilder, die zusammen dargestellt werden sollen auch in etwa gleich groß sind.

Neu in Version 1.1:

  • Beim Übungsblock kann nun auch die Rahmenfarbe angepasst werden
  • Die Größe der Bilder in den Boxen mit Bild im Text können nun korrekt mit dem width-Attribut angepasst werden
  • Tabellen, die sich in anderen Tabellen befinden werden nun korrekt formatiert

Die Bilder für die jeweiligen Themen werden bitte in Unterordnern innerhalb des jeweiligen Themas abgelegt und verlinkt. Für die bereits eingepflegten Themen sind bereits Ordner vorgegeben, orientiert euch am besten an diesen und legt die Bilder immer im zugehörigen Ordner ab.

Die Vorlagen-Webseiten sind so vorbereitet, dass sie innerhalb eines Themas korrekt verlinkt sind (mit CSS und JavaScript-Dateien, sowie Pfaden zu Seiten und Bildern). Die Vorlagen können mit jedem beliebigen Editor bearbeitet werden, es wird aber empfohlen, die Datei zuerst in den entsprechenden Zielordner zu verschieben, um vernünftig testen zu können.

3.3 Workflow

In diesem Abschnitt geht es um eine mögliche Arbeitsschrittfolge, um mit den Dateien zu arbeiten.

  1. Ziparchiv herunterladen und entpacken
    Zuerst muss die Webseite mit allen notwendigen Dateien heruntergeladen und entpackt werden. Dieser Schritt muss prinzipiell nur einmal getan werden, danach kann am eigenen Bereich gearbeitet werden.
  2. Neues Thema anlegen oder bereits existierendes öffnen
    Bevor eine neue Seite angelegt werden kann, muss das entsprechende Thema angelegt sein. Einige sind bereits angelegt worden, z.B. im Bereich Technische Informatik gibt es das Thema "Rechnerarchitektur". In dem gleichnamigen Ordner kann nun eine neue Seite angelegt werden. Wenn ein neues Thema angelegt werden soll, so kann dies durch Anpassung des entsprechenden HTML-Dokuments und Anlegen eines gleichnamigen Ordners getan werden. ACHTUNG: Diese Änderungen bitte unbedingt mitteilen, sonst gibt es Probleme beim Einfügen auf dem Server!
  3. Herunterladen der Vorlage
    Lade die entsprechende Vorlage herunter und füge sie in dem entsprechenden Thema ein. Nun kann sie mit einem Editor bearbeitet werden.
  4. Passe den Seitentitel an (Passend zum Thema)
    Der Titel kann bei allen Unterseiten des gleichen Themas gleich bleiben, aber er sollte nicht vergessen werden!
  5. Passe den Brokrumenpfad an
    Hier muss der Titel des aktuellen Themas stehen (auch hier nur einmal für alle Unterseiten gleich)
  6. Navigationsleiste anpassen
    Hier müssen die entsprechenden Hauptüberschriften und Unterüberschriften ergänzt werden. Dabei sind die Klassenangaben in den Tags wichtig, um die farbige Hervorhebung sicherzustellen.
    Die aktuelle Hauptüberschrift bekommt "active", Unterseiten "sub-item" und nicht-aktive Hauptüberschriften "main-item" als Wert. Dabei ist zu beachten, dass der Bereich die Farbgebung bestimmt, daher kpiert am besten die Beispiel-Überschriften und passt dann nur den Namen an.
    Zuletzt müssen auch die Pfade angepasst werden.
    WICHTIG: Wenn neue Seiten erstellt werden, müssen sie per Hand in den anderen Seiten in der Navigation hinzugefügt werden. Dies ist etwas mühselig aber im Moment nicht anders umsetzbar.
  7. Seiten einpflegen lassen
    Wenn ein Thema fertig ist (oder aktualisiert werden soll), dann schickt den Ordner mit dem Thema als Zip-Archiv an karsten (per Mail). Nach einer kleinen Kontrolle wird der Inhalt dann auf der Webseite eingepflegt.
  8. Zipachiv ggf. aktualisieren/neu laden
    Nachdem neue Seiten eingepflegt wurden, wird das Zip-Archiv aktualisiert und hochgeladen. Die Versionsnummer, bzw. das Datum wird dann angepasst. Dies ist insbesondere dann wichtig, wenn das eigene Thema angepasst wurde.
  9. Ergebnis auf Webseite überprüfen
    Nachdem die Seiten hochgeladen wurden, überprüft bitte eure Seiten, ob alles funktioniert und meldet ggf. Fehler.

3.4 Hilfsprogramme

Hier sind alle Hilfprogramme verlinkt, die beim Erstellen der Webseiten hilfreich sein können:

  • HTML-Bereiniger: Download PDF
    Um Code in die Code-Blöcke einzufügen ist es notwendig, dass HTML-spezifische Symbole maskiert werden. Diese Aufgabe übernimmt der HTML-Bereiniger. Oben wird der normale Code eingefügt und per Button in den unteren Bereich formatiert. Zusätzlich können automatisiert Einrückungen und Umbrüche eingefügt werden, jedoch ist diese Funktion noch experimentell.
  • Pfad-Generator: Download PDF
    An vielen Stellen müssen Verlinkungen zwischen den Seiten erstellt und Bilder oder andere Dateien verlinkt werden. Dazu sind relative Pfadangaben wichtig. Um diese schneller erstellen zu können, kann dieses Tool genutzt werden. Man wählt als Quellverzeichnis den Website-Ordner aus, danach durchsucht das Programm alle Inhalte des Ordners und zeigt sie in einer Baumstruktur an. Links wählt man nun den Startpunkt (immer eine html-Datei) und rechts das Ziel des Links. Wenn beides ausgewählt ist, erscheint unterhalb der entsprechende Pfad.
    Beim Schließen des Programms wird der Ordnerpfad und die geöffneten Ordner im Baum ggespeichert, sodass man beim nächsten Mald dort weiterarbeiten kann.