Informatik · Klasse 7

Ideen für aktives Lernen

Projekt: Meine persönliche Webseite

Aktives Lernen funktioniert hier besonders gut, weil Schüler durch die konkrete Umsetzung von HTML und CSS ihr technisches Verständnis sofort anwenden und mit kreativen Ideen verbinden. Die Verbindung von Konzept, Code und Präsentation fördert sowohl logisches Denken als auch Gestaltungsfähigkeit in einem authentischen Kontext.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Produzieren und Präsentieren
• KMK: Sekundarstufe I - Werkzeuge bedarfsgerecht einsetzen

• 30–45 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Brainstorming-Karussell
• 30 Min. · Einzelarbeit

Brainstorming-Karussell: Konzeptentwurf

Jeder Schüler skizziert auf Papier Inhalte, Struktur und Farbschema für seine Webseite. Sammle Ideen zu Abschnitten wie 'Über mich', 'Hobbys' und 'Fähigkeiten'. Teile Skizzen in der Klasse und notiere erste HTML-Elemente.

Entwerfe ein Konzept für eine persönliche Webseite, die deine Interessen und Fähigkeiten widerspiegelt.

Moderationstipp

Während des Brainstormings darauf achten, dass Schüler konkrete Inhalte wie Hobbys, Fähigkeiten oder Projekte benennen, die sie auf der Webseite darstellen möchten.

Worauf zu achten ist

Schüler tauschen ihre Webseitenentwürfe aus. Jeder Schüler prüft die Webseite des Partners anhand einer Checkliste: Sind alle geforderten HTML-Elemente vorhanden? Sind mindestens drei CSS-Regeln zur Gestaltung angewendet? Gibt es einen Link zu einer externen Seite? Geben Sie dem Partner schriftlich zwei positive Rückmeldungen und eine konkrete Verbesserungsidee.

• Erinnern
• Verstehen
• Analysieren
• Beziehungsfähigkeit
• Sozialbewusstsein

Aktivität 02

• Projektbasiertes Lernen
• 45 Min. · Partnerarbeit

Paarprogrammierung: HTML und CSS umsetzen

In Paaren baut einer die HTML-Struktur, der andere fügt CSS hinzu, dann tauschen. Testet die Seite im Browser und passt Responsivität an. Wechselt Rollen nach 10 Minuten.

Analysiere die Herausforderungen bei der Gestaltung einer benutzerfreundlichen und ästhetisch ansprechenden Webseite.

Moderationstipp

Bei der Paarprogrammierung gezielt auf die Zusammenarbeit eingehen: Ein Partner schreibt Code, der andere beobachtet und nachdenkt, bevor er Vorschläge macht.

Worauf zu achten ist

Die Schüler erhalten ein Blatt mit zwei Fragen: 1. Nennen Sie ein HTML-Element, das Sie für Ihre Webseite verwendet haben, und erklären Sie kurz dessen Funktion. 2. Beschreiben Sie eine CSS-Regel, die Sie angewendet haben, und erklären Sie, wie sie das Aussehen Ihrer Seite verändert hat.

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Aktivität 03

• Projektbasiertes Lernen
• 30 Min. · Kleingruppen

Peer Review: Webseiten testen

Jede Webseite wird von zwei Mitschülern auf Funktionalität, Design und Standards geprüft. Nutzt eine Checkliste mit Kriterien wie Ladezeit und Barrierefreiheit. Gibt konstruktives Feedback.

Beurteile die eigene Webseite hinsichtlich ihrer Funktionalität, Ästhetik und Einhaltung der Webstandards.

Moderationstipp

Beim Peer Review die Checkliste gemeinsam durchgehen und sicherstellen, dass alle Schüler wissen, wonach sie suchen müssen.

Worauf zu achten ist

Der Lehrer zeigt eine einfache Webseite auf dem Beamer. Die Schüler identifizieren und benennen per Zuruf oder schriftlich mindestens drei verwendete HTML-Tags und zwei CSS-Eigenschaften, die sie erkennen können.

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Aktivität 04

• Projektbasiertes Lernen
• 40 Min. · Ganze Klasse

Galerie-Walk: Präsentation

Webseiten lokal hosten und als Galerie präsentieren. Schüler laufen herum, notieren Stärken und Verbesserungsvorschläge. Abschließende Plenumdiskussion.

Entwerfe ein Konzept für eine persönliche Webseite, die deine Interessen und Fähigkeiten widerspiegelt.

Moderationstipp

Beim Galerie-Walk klare Präsentationszeiten vorgeben und darauf achten, dass jeder Schüler mindestens eine Rückmeldung zu einer anderen Webseite gibt.

Worauf zu achten ist

Schüler tauschen ihre Webseitenentwürfe aus. Jeder Schüler prüft die Webseite des Partners anhand einer Checkliste: Sind alle geforderten HTML-Elemente vorhanden? Sind mindestens drei CSS-Regeln zur Gestaltung angewendet? Gibt es einen Link zu einer externen Seite? Geben Sie dem Partner schriftlich zwei positive Rückmeldungen und eine konkrete Verbesserungsidee.

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrene Lehrkräfte beginnen mit einem klaren Konzeptrahmen, der technische und gestalterische Aspekte verbindet. Sie vermeiden es, vorgefertigte Lösungen zu präsentieren, sondern nutzen Fehler als Lernchancen. Wichtig ist, dass Schüler selbst entdecken, wie HTML und CSS zusammenwirken, statt isolierte Regeln zu lernen. Reflektierende Gespräche über Designentscheidungen vertiefen das Verständnis.

Erfolgreiches Lernen zeigt sich, wenn Schüler eine funktionsfähige, individuelle Webseite erstellen, die sowohl technische Anforderungen erfüllt als auch persönliche Interessen widerspiegelt. Die Webseite ist klar strukturiert, optisch ansprechend und entspricht grundlegenden Webstandards.

---

Vorsicht vor diesen Fehlvorstellungen

• Während des Brainstormings könnte ein Schüler sagen: 'Webseiten müssen viele Animationen und Farben haben, um ansprechend zu sein.'

  Während des Peer Reviews testen die Schüler ihre Webseiten gegenseitig. Sie vergleichen, wie verschiedene Designs auf Lesbarkeit und Nutzerfreundlichkeit wirken. Die Lehrkraft lenkt die Aufmerksamkeit darauf, dass klare Strukturen oft ansprechender sind als überladene Effekte.

• Während der Paarprogrammierung könnte ein Schüler annehmen: 'HTML dient nur zum Text einfügen, CSS nur zur Farbgebung.'

  Während der Paarprogrammierung arbeiten die Schüler mit konkreten Code-Beispielen. Sie erkennen durch die gemeinsame Arbeit, wie HTML die semantische Struktur vorgibt und CSS das gesamte Layout und Design steuert. Die Lehrkraft zeigt gezielt, wie beide Sprachen zusammenwirken.

• Während des Peer Reviews könnte ein Schüler sagen: 'Webstandards wie Validität sind unwichtig für persönliche Seiten.'

  Während des Peer Reviews nutzen die Schüler Validator-Tools, um ihre HTML- und CSS-Dateien zu prüfen. Die Lehrkraft erklärt, dass Standards nicht nur für professionelle Seiten gelten, sondern auch die Kompatibilität und Zugänglichkeit der eigenen Seite sicherstellen.

---

In dieser Übersicht verwendete Methoden

• Brainstorming-Karussell
• Projektbasiertes Lernen