Unterrichtsbeispiel: Meine erste Webseite

Am Beispiel einer Unterrichtseinheit zur Erstellung einer eigenen Webseite wird auf dieser Seite vorgestellt, wie ein aus dem Alltag der Schülerinnen und Schülern frei gewähltes Thema mit den inhaltsbezogenen Kompetenzbereichen verknüpft werden kann und so eine Unterrichtssequenz unter Berücksichtigung der didaktischen Leitlinien entsteht.

Motivation und Begründung der Themenwahl

  • SuS nutzen Webseiten und -anwendungen täglich, so dass vielfältige Anknüpfungspunkte an die Lebenswirklichkeit der SuS bestehen.

  • Moderne Content-Management-Systeme „versperren“ den Blick auf die technischen Grundlagen. Die Kenntnis dieser Grundlagen erlaubt aber erst die Auseinandersetzung mit Fragen der IT-Sicherheit und der gesellschaftlichen Auswirkungen dieser Technologie.

  • Die Gestaltungsmöglichkeiten, die das Internet bietet, werden von SuS in Form von Beiträgen in sozialen Netzwerken nicht einmal ansatzweise ausgeschöpft, womit die Grundidee des kollaborativen Mediums verloren geht.

  • Die Vorstellung des Internets oder von Internetdiensten wie E-Mail oder Cloudspeichern ist bei SuS meist sehr diffus. Durch die Auseinandersetzung mit diesem Thema im Schulunterricht kann das Internet entmystifiziert werden.

  • Die explizite Auseinandersetzung mit Urheber- und Persönlichkeitsrechten bei der Veröffentlichung von Daten (im Internet) sensibilisiert die Schülerinnen und Schüler für den Umgang mit solchen Daten im außerschulischen Alltag.

Einordnung des Themas in die Fachanforderungen

Das Erstellen einer Webseite orientiert sich in seinem Prozess (wie alle Handlungsprodukte) am iterativen Vorgehen bei der Softwareentwicklung, das in den prozessbezogenen Kompetenzen abgebildet ist. Das gemeinsame Erstellen eines Handlungsprodukts fördert in besonderem Maße die Fähigkeiten der Kommunikation und Kooperation.

Die Auseinandersetzung mit dem kulturellen Wandel und das Kommunizieren über informatische Inhalte allgemein kann unter anderem bei der Betrachtung existierender Webanwendungen und in besonderem Maße bei der Auseinandersetzung mit Urheber- und Persönlichkeitsrechten explizit thematisiert werden.

Das Thema eignet sich folglich alle prozessbezogenen Kompetenzen der Fachanforderungen abzudecken. Die folgende Auflistung zeigt zudem auf, welche inhaltsbezogene Kompetenzen der Fachanforderungen in den Unterrichtsgang integriert werden können. Sie ist weder abschließend noch sortiert.

  • Webserver und Webbrowser

    • Was ist eigentlich dieses Internet? (N15, N17, N18)

    • DNS, URL und IP (N16)

  • Auszeichnungs- und Programmiersprachen

    • Vom Textdokument zur Webseite mit HTML (D14, D15, D16, N19)

    • Formatierung mit CSS (D21, D22)

    • Nachträgliches Verändern des DOM mit Javascript (A13, A14, A16)

  • Bilder und Grafiken

    • Speicherort und Pfadangaben (D6, D7)

    • Raster- oder Vektorgrafiken (D13, D23, D24, D25)

    • Urheber- und Persönlichkeitsrecht (N20, N21, N22)

  • Kollaboratives Arbeiten

    • Einrichten der Arbeitsumgebung (I10, I13, I15)

    • Versionskontrolle (D8, D9, I21)

    • Fehlerbehebung (I17, I18, I19, I20)

Die Auswahl der zu fördernden inhaltsbezogenen Kompetenzen hängt eng mit der Länge der angestrebten Unterrichtseinheit zusammen. Im Folgenden wird ein exemplarischer Unterrichtsgang auf Basis der dargestellten Vorüberlegungen skizziert.

Nr. Inhaltsbezogene Kompetenzen
Die Schülerinnen und Schüler...		 Umsetzung in der Unterrichtseinheit
Daten und Information
D6 ... wenden typische Operationen auf Dateien an  
D7 ... entwerfen zu einem Verwendungszweck passende Verzeichnisstrukturen und ordnen Dateien systematisch in diese ein  
D8 ... beschreiben und verwenden Sicherheitskopien und Dateiversionierungen auch mithilfe einer Versionsverwaltung  
D14 ... untersuchen Textdokumente hinsichtlich Struktur und Format  
D15 ... entwickeln aus einer Problemstellung eine passende Dokumentstruktur  
D16 ... verwenden Formatvorlagen zweckmäßig und sparsam  

D21

… beschreiben Elemente von Dokumenten und Dateisystemen als Objekte mit Attributen und Werten

 

Netzwerke und Internet

 

N16

… erklären die Adressierung im Internet

 

N19

… verwenden einen Webserver zur Veröffentlichung von Informationen

 

Informatiksysteme

 

I13

… verwenden grundlegende Funktionen des Betriebssystems zur Bewältigung typischer Aufgaben

 

I15

… konfigurieren Software zielorientiert und ergonomisch

I17

… beschreiben Fehler

 

I19

… verwenden Hilfen zur Fehlerdiagnose

I21

… nennen Strategien zum Vermeiden von Datenverlust

 

Angenommene Unterrichtliche Voraussetzungen

  • Vorwissen im Bereich Anwendungsprogramme (speziell Textverarbeitung)

  • Sicherer Umgang mit dem Dateisystem und einem beliebigen Texteditor

  • Grundlegende Kenntnisse im Erstellen und Bearbeiten von Rastergrafiken

Unterrichtsbausteine

Der erste Teil der Unterrichtssequenz verläuft nach dem Prinzip Use-Modify-Create und basiert auf der Funktion von Textverarbeitungsprogrammen HTML-Quelltext ausgeben zu können. Durch die im vorangegangenen Unterricht erworbene Sicherheit im Umgang mit Textverarbeitungsprogrammen können die SuS gezielt HTML-Quelltext erzeugen und anschließend analysieren. Der Unterricht berücksichtigt damit automatisch unterschiedliche Arbeitsweisen und Leistungsstände der SuS.

  1. Die SuS erstellen ein strukturiertes Textdokument mit einem Textverarbeitungsprogramm und speichern dieses als HTML-Dokument. Sie betrachten den Quelltext und identifizieren durch Löschen und Ergänzen in der Entwicklungsumgebung des Browsers die Bedeutung einzelner HTML-Tags und der Baumstruktur des Dokuments.

  2. Die SuS identifizieren Formatierungen in HTML-Dokumenten, die von einem Textverarbeitungsprogramm erzeugt wurden. Sie erkennen CSS-Formatierungen als Attributwerte von HTML-Strukturelementen.

Hinweis: Textverarbeitungsprogramme erzeugen teilweise Formatierungen über HTML-Tags (z.B. <b>, <strong> oder <font>)

  1. Die SuS vergleichen direkt formatierte und mittels Formatvorlagen gestaltete Elemente im HTML-Dokument und erarbeiten so die Funktion und Bedeutung von Klassen in CSS.

Im zweiten Abschnitt der Unterrichtseinheit werden externe Dateien in den HTML-Quellcode eingebettet. Dies dient als Vorbereitung für die anstehende Projektarbeit, in der die SuS einzelne Arbeitsbereiche innerhalb der Gruppe aufteilen sollen, was durch die Trennung des Endprodukts in mehrere Dateien ermöglicht wird.

  1. Die SuS beschreiben die Idee hinter der Webseite http://csszengarden.com und binden exemplarische CSS-Dateien in ihre eigenen Dokumente ein.

  2. Die SuS binden mittels Textverarbeitungsprogramm lokale Bilder in HTML-Dokumente ein und entdecken Gemeinsamkeiten und Unterschiede zu der Verknüpfung zu CSS-Dateien aus dem Internet.

Im dritten Abschnitt der Sequenz führen die SuS ein Projekt durch. Dabei durchlaufen sie die Phasen der Projektmethode nach Frey. Die Projektinitiative wird dabei von der Lehrkraft eingebracht. Es bieten sich aktuelle Anlässe oder lokale Besonderheiten besonders an.

  1. Die SuS wählen ein gemeinsames Thema im Rahmen der Projektinitiative und treffen Absprachen um eine Webseite zu diesem Thema zu erstellen. (Eingrenzung)

  2. Die SuS recherchieren Inhalte aus verschiedenen Quellen, erarbeiten eine strukturierte Übersicht über die Verknüpfungen zwischen den Teilaspekten und entwickeln daraus einen Projektplan.

  3. Die SuS entwickeln im iterativen Prozess der informatischen Produktentwicklung über mehrere Stunden eine Webseite zu dem gewählten Thema.

In dieser Phase erarbeiten die SuS verschiedene Exkursthemen, die sie in der Präsentation ihres Produktes kurz vorstellen. Anregungen zu diesen Exkursthemen lassen sich aus der obigen Auflistung ableiten. Beispiele können sein:

  1. CSS-Animationen und -Transformationen

  2. Bildbearbeitung von eingebetteten Grafiken

  3. Vektorgrafiken mittels Inline-SVG

  4. Videos oder andere eingebettete Inhalte

  5. Javascript zur interaktiven DOM-Manipulation

  6. Urheberrechte und Creative Commons Lizenzmodelle

Kriterien für das Gelingen dieser Phase: …

Im Anschluss an die Präsentation der Ergebnisse kann die Bereitstellung der Webseiten über das Internet thematisiert werden. (siehe Auflistung oben)

Evaluation

Im Rahmen des Unterrichtsprojektes muss einerseits das Produkt und dessen Präsentation gewürdigt werden, andererseits ist im Projektunterricht der Arbeitsprozess selbst Unterrichtsgegenstand, so dass auch dieser eine Bewertung erfahren muss.

Eine zusätzliche Klausur am Ende der Einheit bewertet darüber hinaus den Kompetenzerwerb der einzelnen SuS. Dabei können die Exkursthemen in Form von optionalen Aufgaben eine stärkere Verbindlichkeit erlangen. Dies ist, wie alle Bewertungskriterien den SuS rechtzeitig transparent zu machen.

Kriterien für das Gelingen des Unterrichts

Erster Abschnitt

  • Neugier nicht bremsen

  • Kein Anspruch auf Vollständigkeit (Nachschlagewerke)

  • Auf Präzision achten

Zweiter Abschnitt

  • Arbeitsorganisation

Dritter Abschnitt

  • Arbeitsprozess in den Vordergrund stellen

  • Metainteraktion

  • Klare Zeitvorgabe, Anleitung zum Prototyping