UV 8.3 Wir analysieren Webseiten und erstellen eigene Präsentationen für das Internet

Leitfragen: Wie werden Informationen auf Webseiten im Internet dargestellt und wie sind sie miteinander vernetzt? Aus welchen Bestandteilen sind Webseiten im WWW aufgebaut? Welche formalen Strukturen und Regeln lassen sich identifizieren und zur Gestaltung von eigenen Webseiten nutzen? Welche rechtlichen Aspekte müssen bei der Erstellung von Internetseiten berücksichtigt werden?

Ausschärfung der Inhaltsschwerpunkte: Analyse einfacher HTML-Seiten Vernetzte Informationsstrukturen, Hyperstrukturen Datei, Ordner, Baumdiagramme HTML als Auszeichnungssprache des WWW Syntax und Semantik von HTML-Anweisungen Interpretation von HTML-Ausdrücken durch einen Browser als Automaten Struktur, Inhalt, Layout Attribute, Attributwerte Textauszeichnung, Überschriften, Absätze Listen und Tabellen Verweise Bilder und Graphiken Rechtliche Aspekte, Recht am eigenen Bild, Urheberrecht Abschlussprojekt: Gestaltung einer gemeinsam erstellten Webpräsentation

Vorhabenbezogene Konkretisierung:

Für den Einstieg in dieses Unterrichtvorhaben werden gut strukturierte, aber einfach gestaltete und valide HTML-Seiten betrachtet, von denen einige Seiten auch Verweise auf CSS-Code enthalten. Auf eine Vertiefung der CSS-Aspekte wird in diesem Unterrichtsvorhaben aber verzichtet und kann erst im Rahmen eines Projektes im Jg. 10 genauer eingegangen werden.

Durch Ansicht der Seiten und Analyse des Quelltextes in der Browseransicht und einem Editor wird herausgearbeitet, in welchem Bereich der eigentliche Inhalt steht, welche Inhaltsteile auf ausgelagerte Teile verweisen, welche Teile das Aussehen steuern und welche formalen Strukturen dabei einzuhalten sind. Die Schülerinnen und Schüler kopieren dann den verwendeten Quelltext in einen einfachen Editor, entfernen alle Inhalts-Elemente und erhalten so einfache Seitenvorlagen. Diese Seitenvorlagen werden genutzt, um erste eigene "Hallo ich bin XYZ"-Dokumente zu erstellen, die in Rahmen des Unterrichtsvorhabens fortlaufend erweitert und miteinander vernetzt werden.

Die Schülerinnen und Schüler lernen zunächst typische Strukturierungselemente kennen und verändern so schrittweise ihre Dokumente und das Aussehen. Durch die Vernetzung mit unterschiedlichen eigenen Dateien, mit Bildern, mit Informationen aus dem Internet und durch die Erstellung einer Webseite für den Kurs entstehen im Laufe des Unterrichtsvorhabens komplexere Hypertexte, deren Verweisstrukturen in Diagrammen übersichtlich dokumentiert und analysiert werden.

Durch die Validierung der Dokumente von Beginn an lernen die Schülerinnen und Schüler einerseits die Notwendigkeit syntaktischer Korrektheit andererseits das Lesen und Interpretieren von Fehlermeldungen eines Systems. Inhaltsobjekte mit Umlauten und anderen Sonderzeichen werden in einem Browser mit unterschiedlichen Zeichenkodierungs-Einstellungen betrachtet . Da dieselben Attributwerte verschieden dargestellt werden, wird hier auf den Unterschied zwischen Daten und Information (im Sinne von interpretierten Daten) eingegangen.

Begleitend zum Unterricht werden der Kurs, alle Schülerinnen und Schüler und die Lehrkraft fotografiert und diese Bilder für die persönliche Hypertextpräsentation der Schülerinnen und Schüler und weiter durch Verlinkung für eine Präsentation des gesamten Kurses benutzt. Da die digitalen Bilder in der Regel zu groß sind, müssen sie noch bearbeitet werden. Hier wird wiederholend (UV 7.2) über mögliche Grafikformate (jpeg, gif, png, ...) und ihre Verwendungszwecke eingegangen. Darüber hinaus müssen die Bilder bearbeitet werden, um Größe und Komprimierungsgrad für das Internet anzupassen. Dabei wird die Binärdarstellung von Bildern angesprochen. Durch die Veröffentlichung der eigenen Bilder, von Kursfotos auf der Schulhomepage und das mögliche Kopieren von fremden Inhalten auf die eigene Internetseite werden Fragen der Rechte und Pflichten im Zusammenhang mit Bildern und sonstigen Werken aufgeworfen (Recht am eigenen Bild, Urheberrecht).

Den Abschluss bildet ein Thema zur Gestaltung einer Präsentation im Internet mit Überlegungen zur Zielgruppe, der genauen Webseitenstruktur-Planung und der Beachtung von rechtlichen Aspekten.

Zeitbedarf: 18 Std.

Sequenzierung des Unterrichtsvorhabens:

Unterrichtssequenzen	Zu entwickelnde (inhaltsfeldbezogene konkretisierte) Kompetenzen	Vorhabenbezogene Absprachen / Beispiele, Medien, Materialien
Einstieg Analyse einiger einfacher HTML-Seiten Strukturierte Darstellung von Informationen Trennung von Inhalt und Aussehen Erstellung einer Seitenvorlage Erstellung einfacher Hypertextobjekte HTML als Auszeichnungssprache des WWW Vernetzte Informationsstrukturen, Hypertext, Hyperstruktur, Hyperlink Syntax von HTML-Anweisungen URL, Adressbeschreibungen von Webseiten Datei, Ordner, Baumdiagramme Interpretationen von HTML-Ausdrücken durch einen Browser Validieren einer Internetseite Attribute, Attributwerte Textauszeichnung Listen und Tabellen Attribute als Modifikatoren Einbinden von Links und Bildern Links und Bilder Formatierung und Komprimierung von Bildern Rechtliche Aspekte bei der Einbindung von fremden Texten, von Bildern und von Links auf Internetseiten Persönlichkeitsrechte, Urheberrecht	Die Schülerinnen und Schüler erläutern an Beispielen den Zusammenhang und die Bedeutung von Daten, Nachrichten und Informationen (IF1, A), verarbeiten Informationen mithilfe von Informatiksystemen (IF1, MI), erläutern, wie Daten in geeigneter Weise codiert werden, um sie mit dem Computer verarbeiten zu können (IF1, A), nennen Beispiele für die Codierung von Daten (Binärcode, ASCII) und beschreiben verschiedene Darstellungsformen von Daten (in natürlicher Sprache, formalsprachlich, graphisch) (IF1, DI), identifizieren und erläutern in ausgewählten Anwendungen Datentypen, Attribute und Attributwerte von Objekten und dokumentieren sie unter Verwendung geeigneter Darstellungsformen (IF1, DI).	Unterrichtsmaterialien und Tutorials Die SELFHTML-Dokumentationen stellen nützliche Hilfsmittel dar, aktuell insbesondere das SelfHTML-Wiki. Browser: Firefox, Opera, Chrome, Internetexplorer Editoren: phase5 Bildbearbeitung: Irfanview Über die Reinheit des WWW wacht das World Wide Web Consortium (W3C). Diese Standards sollten eingehalten werden. Zur Überprüfung von Internetseiten stellt das W3C einen Validierer zur Verfügung. In Firefox kann auch ein Addon eingebunden werden. Ausführliche Kursmaterialien sind unter http://inf-schule.de unter dem Stichwort „Informationsdarstellung im Internet“ zu finden.
Abschlussprojekt: Gestaltung einer kursbezogenen Webseite		Beispiel für eine Testaufgabe