Informatik · Klasse 7

Ideen für aktives Lernen

Bilder und Medien einbinden

Aktives Ausprobieren hilft den Schülerinnen und Schülern, die technischen Zusammenhänge zwischen Bildern, Medien und HTML zu verstehen. Indem sie selbst Attribute setzen und Effekte testen, erkennen sie, warum bestimmte Entscheidungen wichtig sind. Die direkte Anwendung macht abstrakte Konzepte greifbar und fördert das selbstgesteuerte Lernen.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Werkzeuge bedarfsgerecht einsetzen

• 25–50 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Projektbasiertes Lernen
• 30 Min. · Partnerarbeit

Paararbeit: Bildattribute variieren

Paare fügen ein Bild mit <img src="" alt=""> ein und testen Attribute wie width, height und alt in einem HTML-Editor. Sie verändern Werte, laden die Seite neu und notieren Auswirkungen auf Darstellung und Barrierefreiheit. Abschließend vergleichen sie Screenshots.

Analysiere die verschiedenen Attribute, die zur Steuerung von Bildern und Medien in HTML verwendet werden.

Moderationstipp

Geben Sie den Paaren in der Paararbeit konkrete Dateien vor, damit sie gezielt mit src, alt, width und height experimentieren können.

Worauf zu achten ist

Die Schüler erhalten ein HTML-Snippet mit einem Bild-Tag. Sie sollen den Zweck des alt-Attributs erklären und eine alternative Beschreibung für das Bild vorschlagen. Zusätzlich sollen sie eine Frage formulieren, die sich auf die Einbindung eines Videos bezieht.

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

Aktivität 02

• Projektbasiertes Lernen
• 45 Min. · Kleingruppen

Stationenrotation: Medien einbetten

Richten Sie Stationen ein: Bild einfügen, Video mit controls, Audio mit loop und Performance-Test mit verschiedenen Dateigrößen. Gruppen rotieren alle 10 Minuten, bauen Code auf und präsentieren ein Ergebnis.

Entwerfe eine Webseite, die Bilder und ein eingebettetes Video enthält.

Moderationstipp

Stellen Sie bei der Stationenrotation sicher, dass jede Station klare Aufgabenstellungen und die benötigten Materialien enthält, um Zeitverlust zu vermeiden.

Worauf zu achten ist

Stellen Sie den Schülern zwei identische Webseiten-Screenshots vor, die sich nur durch die Ladezeit unterscheiden. Fragen Sie: 'Welcher Faktor, den wir heute besprochen haben, könnte die Ladezeit beeinflussen und wie?' Lassen Sie die Schüler ihre Vermutungen kurz aufschreiben.

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

Aktivität 03

• Projektbasiertes Lernen
• 50 Min. · Ganze Klasse

Gemeinsame Webseite erweitern

Die Klasse erweitert eine Vorlage gemeinsam: Jeder fügt ein Medium ein, teilt Code via Padlet und diskutiert Verbesserungen. Testen Sie Ladezeiten mit Browser-Tools und optimieren Sie kollektiv.

Beurteile die Bedeutung von Dateiformaten und Dateigrößen für die Performance einer Webseite.

Moderationstipp

Beobachten Sie bei der gemeinsamen Webseite erweiterung, wie die Schülerinnen und Schüler ihre Code-Fragmente integrieren und ob sie dabei typische Fehler wie korrekte Pfade oder Attribute machen.

Worauf zu achten ist

Die Schüler tauschen ihre erstellten Webseiten-Entwürfe (mit Bild und Video) aus. Jeder Schüler prüft den Entwurf des Partners auf folgende Punkte: Ist das Bild mit einem alt-Text versehen? Sind die Video-Steuerelemente sichtbar? Gibt es eine kurze Notiz zur Optimierung der Dateigröße?

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

Aktivität 04

• Projektbasiertes Lernen
• 25 Min. · Einzelarbeit

Individual: Optimierungs-Challenge

Jeder Schüler wählt ein Bild/Video, bindet es ein und reduziert Dateigröße mit Tools wie TinyPNG. Vergleichen Sie Ladezeiten vor/nach und dokumentieren Attribute für beste Performance.

Analysiere die verschiedenen Attribute, die zur Steuerung von Bildern und Medien in HTML verwendet werden.

Moderationstipp

Bereiten Sie für die Individual: Optimierungs-Challenge verschiedene Dateigrößen und Formate vor, damit die Schülerinnen und Schüler messbare Unterschiede erkennen und dokumentieren können.

Worauf zu achten ist

Die Schüler erhalten ein HTML-Snippet mit einem Bild-Tag. Sie sollen den Zweck des alt-Attributs erklären und eine alternative Beschreibung für das Bild vorschlagen. Zusätzlich sollen sie eine Frage formulieren, die sich auf die Einbindung eines Videos bezieht.

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

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrene Lehrkräfte setzen auf das Prinzip des entdeckenden Lernens: Schülerinnen und Schüler sollen selbst herausfinden, warum bestimmte Attribute notwendig sind. Vermeiden Sie lange Frontalphasen, sondern lassen Sie die Lernenden direkt experimentieren und Fehler machen. Nutzen Sie gezielte Impulsfragen, um Reflexion anzuregen, z.B. 'Was passiert, wenn das alt-Attribut fehlt?'. Feedback sollte immer an konkrete Beobachtungen anknüpfen, nicht an abstrakte Bewertungen.

Am Ende der Einheit sollten die Lernenden Bilder und Medien technisch korrekt einbinden können. Sie verstehen den Zweck von Attributen wie alt, width oder controls und berücksichtigen dabei Barrierefreiheit und Performance. Die erstellten Webseiten zeigen, dass sie die Inhalte praktisch umsetzen und reflektieren können.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der Paararbeit: 'Der alt-Text ist nur für die Optik und kann weggelassen werden.'

  Fordern Sie die Paare auf, eine Webseite ohne alt-Text mit einem Screenreader zu testen und die Unterschiede in der Barrierefreiheit zu dokumentieren. Besprechen Sie im Anschluss, warum der alt-Text essenziell ist.

• Während der Stationenrotation: 'Größere Dateien laden schneller, weil sie mehr Details enthalten.'

  Lassen Sie die Schülerinnen und Schüler in der Station mit Dateikompression zwei identische Bilder in unterschiedlichen Größen laden und die Ladezeiten vergleichen. Die gemessenen Unterschiede machen den Zusammenhang zwischen Dateigröße und Performance deutlich.

• Während der Stationenrotation: 'Alle Formate wie JPG, PNG oder SVG funktionieren gleich gut auf jeder Webseite.'

  Geben Sie den Gruppen verschiedene Dateiformate vor und lassen Sie sie in unterschiedlichen Browsern testen. Die Schülerinnen und Schüler sollen dokumentieren, welche Formate in welchen Browsern Probleme verursachen und warum.

---

In dieser Übersicht verwendete Methoden

• Projektbasiertes Lernen