Webseitenprojekt

Informationstechnik · Projektphase zu IT 11.7 Webdesign und IT 12.6 Webanwendungen · Einzelarbeit

Im Unterricht hast du Schritt für Schritt die Seite des Schülercafés gebaut. Jetzt baust du deine eigene Webseite zu einem Thema, das du selbst wählst. Du planst sie, setzt sie um, testest sie und stellst sie vor.

Du arbeitest allein. Gegenseitige Hilfe und Rückmeldung sind trotzdem ausdrücklich erwünscht.

Ablauf in vier Phasen

Jede Phase endet mit einem Meilenstein. Ein Meilenstein ist ein fester Zwischenstand mit Termin, an dem du mit deiner Lehrkraft kurz besprichst, wo du stehst.

Phase	Was du tust	Meilenstein
1 Planen	Thema, Ziel und Zielgruppe festlegen, Anforderungen sammeln, Seitenplan und Skizze zeichnen	M1 Plan und Skizze besprochen
2 Grundstufe	mehrere Seiten mit HTML und eigenem CSS, Handy-Ansicht, barrierearm	M2 Grundstufe fertig
3 Erweiterung	JavaScript mit DOM und Ereignissen, Daten als JSON, Formular mit Prüfung	M3 Erweiterung fertig
4 Testen und Präsentieren	alles prüfen, Rückmeldung einholen, vorstellen, zurückblicken	M4 präsentiert

Worauf es am Ende ankommt, steht in den Kriterien. Lies sie gleich zu Beginn.

Die Grundstufe passt zu IT 11.7 Webdesign, die Erweiterung zu IT 12.6 Webanwendungen. Wann du welche Phase bearbeitest und welche Termine gelten, sagt dir deine Lehrkraft.

Was du brauchst

• VSCodium (oder einen anderen Editor) und einen Browser.
• Die Erweiterung Live Server für die Erweiterungsstufe. Sie ist nötig, damit fetch deine JSON-Datei laden kann (siehe IT 12.6, Einheit 8).
• Die Startdateien und die Planungsvorlage:
  • projekt-start.zip: Startdateien mit index.html, seite2.html, quellen.html, style.css, Ordner bilder und projektplan.txt
  • projektplan.txt: die Planungsvorlage einzeln

Sichere deine Arbeit

Dein Projekt liegt nur in deinem Ordner. Maternet speichert nichts davon. Lege regelmäßig eine Kopie des ganzen Ordners an, zum Beispiel am Ende jeder Stunde mit dem Datum im Namen (projekt-2026-11-03).

Regeln für alle Projekte

1. Eigene Inhalte. Texte schreibst du selbst. Bilder sind eigene Fotos oder Zeichnungen oder haben eine freie Lizenz. Jede fremde Quelle steht auf deiner Seite quellen.html (siehe IT 11.7, Einheit 8).
2. Keine echten persönlichen Daten. Keine echten Namen, Adressen, Telefonnummern oder E-Mail-Adressen, auch nicht deine eigenen. Keine Fotos, auf denen Personen zu erkennen sind. Erfinde Beispieldaten, wenn du welche brauchst.
3. Keine Einbindungen von fremden Servern. Schriften, Bilder und Skripte liegen in deinem Projektordner. So funktioniert die Seite auch ohne Internet, und keine fremde Firma erfährt etwas über die Besucher.
4. Nicht veröffentlichen. Dein Projekt bleibt auf deinem Rechner und wird im Unterricht gezeigt. Wer eine Seite wirklich ins Internet stellt, muss rechtliche Pflichten beachten. Das gehört nicht zu diesem Projekt.
5. Ehrlich arbeiten. Du darfst Beispiele aus dem Unterricht, Vorlagen mit freier Lizenz und Hilfe von anderen nutzen. Schreibe in dein Arbeitstagebuch, woher etwas stammt. Du musst jede Zeile deines Codes erklären können.

Themenideen

Wähle ein Thema, das dich interessiert und zu dem du genug eigene Inhalte hast. Einige Ideen:

• dein Hobby oder Sport, zum Beispiel ein Trainingsplan zum Abhaken
• eine AG, ein Verein oder eine Veranstaltung der Schule (mit erfundenen Daten)
• ein Ratgeber, zum Beispiel „Erste Hilfe beim Fahrrad“ oder „Gemüse auf dem Balkon“
• ein erfundenes Unternehmen: Fahrradverleih, Food-Truck, Nachhilfe-Börse
• eine Sammlung: Rezepte, Lieblingsbücher, Ausflugsziele in der Region
• ein Lernangebot: ein Quiz oder Karteikarten zu einem Schulfach

Die Beispiele auf den nächsten Seiten nutzen eine erfundene Seite der Schulgarten-AG. Wähle für dein Projekt ein anderes Thema.

Weiter

Beginne mit Phase 1: Planen. Zum schnellen Ausprobieren gibt es den freien Code-Spielplatz.

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Projekt	eine Aufgabe mit Ziel, Anfang und Ende, die man selbst plant und umsetzt
Meilenstein	ein fester Zwischenstand mit Termin
Zielgruppe	die Menschen, für die die Seite gemacht ist
Anforderung	etwas, das die fertige Seite können oder enthalten muss
Seitenplan	Übersicht, welche Seiten es gibt und wie sie verlinkt sind
Skizze	einfache Zeichnung der Seite aus Kästen, noch ohne Farben und Details
Arbeitstagebuch	kurze Notizen nach jeder Stunde: geschafft, Problem, nächster Schritt
Soll-Ist-Vergleich	Vergleich zwischen dem, was geplant war, und dem, was entstanden ist