Phase 1: Planen

Webseitenprojekt · Phase 1 von 4 · Meilenstein M1

Ziel dieser Phase

Am Ende dieser Phase weißt du genau, was du baust und für wen. Du hast einen ausgefüllten Projektplan und eine Skizze, die du mit deiner Lehrkraft besprichst (Meilenstein M1).

Warum erst planen?

Lena fängt sofort an. Nach drei Stunden hat sie eine schöne Startseite mit einem großen Bild. Dann merkt sie: Für die Unterseiten hat sie kaum Inhalte, das Menü passt nicht aufs Handy, und das Bild darf sie gar nicht verwenden. Sie fängt fast von vorne an.

Welche Fragen hätte Lena vorher klären sollen? Sammle drei, bevor du weiterliest.

Ein Plan kostet am Anfang Zeit. Er spart aber viel mehr Zeit, weil du Probleme auf Papier findest und nicht erst im fertigen Code.

Schritt 1: Ein Thema wählen

Schritt 1: Thema entscheiden leicht

1. Notiere drei mögliche Themen. Ideen findest du im Überblick.
2. Bewerte jedes Thema mit einer kleinen Entscheidungstabelle: Gib für jedes Kriterium 0 bis 2 Punkte.

Kriterium	Thema A	Thema B	Thema C
Es interessiert mich.
Ich habe genug eigene Texte und Bilder dafür.
Es passt zu den Anforderungen (mehrere Seiten, Daten, Formular).
Ich schaffe es in der verfügbaren Zeit.
Summe

3. Entscheide dich und begründe deine Wahl in einem Satz im Projektplan (Abschnitt 1).

Die Tabelle nimmt dir die Entscheidung nicht ab. Sie hilft dir aber, nicht nur nach dem ersten Gefühl zu wählen. Ist das Ergebnis knapp, frage dich: Welches Thema würde ich auch nach zehn Stunden noch gern bearbeiten?

Schritt 2: Ziel und Zielgruppe

Schritt 2: Ziel und Zielgruppe beschreiben mittel

Beschreibe im Projektplan (Abschnitt 1):

• das Ziel der Seite in ein bis zwei Sätzen: Was sollen Besucher nach dem Besuch wissen oder getan haben?
• die Zielgruppe: Wer besucht die Seite? Wie alt? Was wissen die Menschen schon? Mit welchem Gerät kommen sie meistens?

Tipp 1

Ein gutes Ziel beschreibt, was die Besucher davon haben, nicht was du programmierst. „Eine Seite mit drei Unterseiten“ ist kein Ziel. „Neue Mitglieder finden schnell heraus, wann und wo trainiert wird“ ist eins.

Tipp 2

Stell dir eine bestimmte Person vor, die deine Seite öffnet. Was will sie dort? In welcher Lage ist sie gerade: im Bus am Handy, zu Hause am Laptop?

Beispiel ansehen (erst nach deinem eigenen Versuch)

Ziel: Schülerinnen und Schüler erfahren, was die Schulgarten-AG macht, sehen, was gerade im Garten wächst, und können sich für einen Gartentermin anmelden.

Zielgruppe: vor allem Schülerinnen und Schüler der Klassen 5 bis 8 und ihre Eltern. Sie wissen wenig über Gartenarbeit. Die meisten öffnen die Seite am Handy, zum Beispiel über einen Aushang mit QR-Code.

Folge für die Planung: einfache Sprache, große Bilder, Handy-Ansicht zuerst, Anmeldung mit wenigen Feldern.

Schritt 3: Anforderungen sammeln

Eine Anforderung beschreibt, was die fertige Seite können oder enthalten muss. Sortiere sie in zwei Gruppen:

• Muss: Ohne das ist das Projekt nicht fertig.
• Kann: schön, wenn Zeit bleibt.

Dazu kommen die Anforderungen, die für alle Projekte gelten. Sie stehen in den Checklisten von Phase 2 und Phase 3.

Schritt 3: Muss und Kann festlegen mittel

Entwickle für dein Projekt mindestens drei Muss- und zwei Kann-Anforderungen, die zu deinem Thema gehören. Trage sie im Projektplan (Abschnitt 2) ein.

Formuliere jede Anforderung so, dass man am Ende überprüfen kann, ob sie erfüllt ist.

Tipp 1

„Die Seite sieht modern aus“ lässt sich nicht überprüfen. „Auf dem Handy stehen die Menüpunkte untereinander und sind mit dem Finger gut zu treffen“ schon.

Tipp 2

Gehe dein Ziel aus Schritt 2 durch: Was braucht die Zielgruppe, damit das Ziel erreicht wird? Daraus werden die Muss-Anforderungen. Alles, was nur „nett“ ist, wird eine Kann-Anforderung.

Beispiel ansehen (erst nach deinem eigenen Versuch)

Muss:

• Die Startseite zeigt den nächsten Gartentermin mit Datum und Treffpunkt.
• Die Seite „Pflanzen“ zeigt einen Kalender: welche Pflanze in welchem Monat gesät und geerntet wird. Die Daten stehen in einer JSON-Datei.
• Man kann die Pflanzen nach „jetzt erntereif“ filtern.
• Ein Anmeldeformular fragt Vorname, Klasse und Termin ab und meldet fehlende oder falsche Angaben verständlich.

Kann:

• eine Bildergalerie mit Vorher-Nachher-Fotos der Beete
• ein kleines Quiz „Welches Gemüse ist das?“

Schritt 4: Der Seitenplan

Ein Seitenplan zeigt, welche Seiten es gibt und wie man von einer zur anderen kommt. So siehst du früh, ob jede Seite genug Inhalt hat und ob das Menü überschaubar bleibt.

Schritt 4: Seitenplan zeichnen leicht

Zeichne den Seitenplan deines Projekts: auf Papier oder im Projektplan (Abschnitt 3). Schreibe zu jeder Seite den Dateinamen und in Stichworten, was dort steht.

Überprüfe: Hat jede Seite genug eigenen Inhalt? Erreicht man jede Seite über das Menü?

Beispiel ansehen (erst nach deinem eigenen Versuch)

Seitenplan der Beispielseite: Von der Startseite aus erreicht man drei Unterseiten.

Drei Unterseiten reichen. Mehr Seiten bedeuten nicht mehr Qualität. Wichtig ist, dass jede Seite eine klare Aufgabe hat.

Schritt 5: Die Skizze

Eine Skizze zeigt den Aufbau einer Seite mit einfachen Kästen: Wo steht das Menü, wo das Bild, wo der Text? Farben, Schrift und genaue Texte kommen später. Auf Englisch heißt so eine Skizze Wireframe.

Zeichne zuerst die Handy-Ansicht. Dort ist wenig Platz, also musst du entscheiden, was wirklich wichtig ist und oben steht. Für den breiten Bildschirm verteilst du dieselben Bereiche dann nebeneinander (Mobile First, siehe IT 11.7, Einheit 7).

Schritt 5: Startseite skizzieren mittel

Skizziere die Startseite deines Projekts zweimal: für das Handy und für einen breiten Bildschirm. Verwende Kästen und beschrifte sie. Bilder zeichnest du als Kasten mit Kreuz, Textzeilen als Striche.

Fotografiere die Skizzen und lege sie im Ordner bilder ab, oder beschreibe die Bereiche im Projektplan (Abschnitt 4).

Tipp 1

Beginne mit der Reihenfolge von oben nach unten: Was sieht man zuerst, ohne zu scrollen? Das sollte zu deinem Ziel aus Schritt 2 passen.

Tipp 2

Auf dem breiten Bildschirm werden aus Bereichen, die auf dem Handy untereinander stehen, oft Spalten oder Kacheln nebeneinander. Die Reihenfolge im HTML bleibt dieselbe.

Beispiel ansehen (erst nach deinem eigenen Versuch)

Skizze der Startseite: links auf dem Handy, rechts auf einem breiten Bildschirm. Kästen statt fertiger Gestaltung.

Auf dem Handy steht der nächste Termin direkt unter dem Bild, weil er für die Zielgruppe das Wichtigste ist. Auf dem breiten Bildschirm stehen Bild und Text nebeneinander, darunter drei Kacheln.

Schritt 6: Meilensteine und Besprechung

Schritt 6: Termine eintragen und Plan besprechen leicht

1. Trage die Termine für die Meilensteine M1 bis M4 ein, die deine Lehrkraft nennt (Projektplan, Abschnitt 5).
2. Lass eine Mitschülerin oder einen Mitschüler deinen Plan lesen. Sie oder er soll ohne deine Erklärung sagen, worum es auf deiner Seite geht und für wen sie ist. Passt das zu deinem Ziel?
3. Lies die Kriterien, nach denen dein Projekt am Ende beurteilt wird. Fehlt in deinem Plan etwas dafür?
4. Bespreche Plan und Skizze mit deiner Lehrkraft (M1). Notiere Änderungen im Plan.

Checkliste für M1

• Thema gewählt und begründet
• Ziel und Zielgruppe beschrieben
• mindestens drei Muss- und zwei Kann-Anforderungen, alle überprüfbar
• Seitenplan mit Dateinamen
• Skizze der Startseite für Handy und breiten Bildschirm
• Termine der Meilensteine eingetragen
• Quellen für Bilder geklärt: Habe ich eigene Bilder oder solche mit freier Lizenz?

Weiter geht es mit Phase 2: Grundstufe.