Aufgaben: Eine Webseite oder einen Blog erstellen und veröffentlichen

Erkläre mit eigenen Worten den Unterschied zwischen einer Webseite und einer Website, indem du den Vergleich mit einem Buch verwendest: Was wäre jedes Blatt und was das ganze Buch? Nenne ein Beispiel für eine Website, die du kennst, und zwei ihrer Seiten.

Wenn du eine Website besuchst, sind zwei Programme beteiligt: der Browser auf deinem Computer und der Server, auf dem die Website liegt. Erkläre, was jedes der beiden tut (wer fragt die Seite an, wer speichert und sendet sie, wer zeigt sie an) und was passiert, wenn der Server ausgeschaltet ist.

Die Abbildung zeigt das typische Layout-Schema einer Webseite mit ihren vier Bereichen, aber der Name eines der Bereiche ist verdeckt.

Gib an, welcher Bereich verdeckt ist und was er normalerweise enthält, und erkläre, wozu jeder der anderen drei Bereiche der Seite dient.

HTML „programmiert“ die Seite nicht: Es beschreibt sie mit Tags, die markieren, was jedes Element ist. Erkläre, was ein HTML-Tag ist, indem du den Vergleich mit den farbigen Textmarkern verwendest, mit denen du eine Mitschrift markierst (das ist eine Überschrift, das ist ein Absatz), und sage, worin der Unterschied zwischen dem Inhalt und den Markierungen besteht.

Ordne jedes HTML-Tag dem zu, was es auf der Seite platziert: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, mit diesen Funktionen: ein Link zu einer anderen Seite, ein Bild, die Hauptüberschrift und ein Textabsatz. Sage anschließend, welches der vier immer eine Adresse benötigt, wo sich die Ressource befindet.

Heute kann man eine Website ohne Code erstellen, mit Website-Baukästen wie Google Sites oder WordPress. Erkläre, was ein Website-Baukasten ist, wie man darin arbeitet (Blöcke ziehen, Vorlagen auswählen) und welchen Vorteil er für Anfänger hat.

Die Klasse will die Website der Gruppe erstellen. Ordne diese Inhalte den Kategorien „darf veröffentlicht werden“ oder „darf nicht veröffentlicht werden“ zu und begründe jeden Fall: der Name der Schule, das Foto der Fassade der Schule, die vollständigen Vor- und Nachnamen aller Schülerinnen und Schüler, Klassenarbeiten, die nur mit dem Vornamen signiert sind, der persönliche Stundenplan eines Schülers und eine Beschreibung der Aktivitäten der Gruppe.

Ein Blog ist eine Website, die mit neuen Artikeln aktualisiert wird, vom neuesten zum ältesten sortiert. Erkläre, welchen Unterschied es zwischen einem Blog und einer „Schaufenster“-Website (der eines Geschäfts, die sich kaum ändert) gibt, und nenne je ein Beispiel für ein Thema, das gut dazu passen würde.

Lies dieses HTML-Fragment und beschreibe Element für Element, wie die Seite im Browser aussehen wird: <h1>Lenas Ecke</h1>, <p>Basteln und einfache Rezepte.</p>, <img> mit einem Foto von Keksen, <a> mit dem Text „Das ganze Rezept ansehen“. Gib an, welches Tag jeden Teil erzeugt.

Eine Konditorei möchte eine einfache Website mit: Vorstellung, Fotos ihrer Torten, Öffnungszeiten und einer Karte mit der Adresse. Entwirf ihre Struktur: Welche Bereiche hat die Startseite (Kopfbereich, Menü, Inhalt, Fußbereich), was kommt in jeden und welche zwei Unterseiten würdest du vom Menü aus verlinken?

Diese Schritte zum Veröffentlichen einer Website mit einem Website-Baukasten sind durcheinander: (a) prüfen, wie sie auf dem Handy und auf dem Computer aussieht, (b) eine Vorlage auswählen, (c) überlegen, welche Inhalte sie haben wird, (d) auf „Veröffentlichen“ klicken, um ihr eine Adresse im Internet zu geben, (e) die Texte und Bilder hinzufügen. Bringe sie in die richtige Reihenfolge und erkläre, warum die Prüfung vor dem Veröffentlichen erfolgen muss.

Die Abbildung zeigt den Tag-Baum einer sehr einfachen Webseite: wie manche Tags andere enthalten, wobei aber zwei Tags verdeckt sind.

Finde mithilfe der Hinweise unter jedem Kasten heraus, welche zwei Tags verdeckt sind, und erkläre mit eigenen Worten, was es bedeutet, dass ein Tag im Baum an einem anderen „hängt“.

Vergleiche das Erstellen einer Website durch Schreiben von HTML von Hand mit dem Erstellen in einem Website-Baukasten ohne Code: je ein Vorteil und eine Einschränkung beider Wege. Empfiehl anschließend für jeden Fall einen der beiden Wege: (a) die Website des Leseclubs, fertig in einer Woche; (b) lernen, wie das Internet von innen funktioniert.

Die Klasse erstellt einen Blog über die Stadtteile des Ortes oder der Stadt. Plane seine ersten drei Beiträge: Titel jedes Beitrags, zwei Inhalte, die er enthält (Text, Foto, Interview, Karte), und welchem Menüpunkt er zugeordnet wird. Erkläre, warum es sich lohnt zu planen, bevor man den Computer anfasst.

Auf der Website der Schule werden Fotos von Aktivitäten veröffentlicht. Formuliere drei Regeln für eine verantwortungsvolle Veröffentlichung auf dieser Website und beachte dabei: welche Schülerinnen und Schüler erkennbar sein dürfen, welche personenbezogenen Daten nicht zu den Fotos gehören dürfen und welche Erlaubnis von den Familien nötig ist. Begründe jede Regel.

Bilder auf einer Website haben einen Alternativtext (das Attribut „alt“), der das Foto beschreibt. Erkläre, wer ihn braucht (Menschen, die Screenreader nutzen), und schreibe einen guten Alternativtext für diese beiden Bilder aus dem Klassenblog: (a) das Foto der Siegermannschaft des Schachturniers und (b) ein Balkendiagramm mit der monatlichen Teilnahme am AG-Treffen.

Wähle die Website eines Geschäfts oder Vereins aus deinem Ort, die du kennst (oder erfinde eine realistische), und analysiere sie: Welche Bereiche hat die Startseite, welche Inhalte bietet sie, was fehlt und was ist überflüssig? Schlage drei konkrete Verbesserungen bei Struktur oder Inhalt vor und begründe sie.

Eine Schülergruppe hat diesen HTML-Code für die Seite der Futsal-Mannschaft der Schule erstellt:

<h1>Team Jugend</h1>

<img src="equipo.jpg">

<a href="calendario.html">Klicke hier</a>

Bei der Überprüfung der Seite wurden zwei Fehler festgestellt:

1. Wenn das Bild wegen eines Netzwerkfehlers nicht geladen wird, erscheint auf dem Bildschirm nur ein defektes Symbol ohne jede Erklärung.

2. Wenn eine sehbehinderte Person einen Screenreader benutzt, weiß sie weder, was das Bild zeigt, noch, wohin der Link genau führt.

Schreibe den HTML-Code so um, dass beide Probleme behoben sind (verwende geeignete Attribute und beschreibende Texte), und begründe fachlich, wie deine Lösung die Barrierefreiheit und die Benutzerfreundlichkeit der Website verbessert.

Drei Projekte brauchen eine Website: (a) die Schülerzeitung, in der jede Woche mehrere Personen Artikel veröffentlichen; (b) die Präsentation einer Arbeit, eine einzelne feste Seite; (c) der Shop der Schülerfirma mit Katalog und Bestellungen. Wähle für jedes Projekt das passendste Werkzeug (Website-Baukasten wie Google Sites, ein Blog wie WordPress oder eine E-Commerce-Lösung) und begründe deine Wahl.

Verfasse die Veröffentlichungsrichtlinie für die Klassenwebsite: Welche Inhalte werden veröffentlicht und welche nicht, wer prüft vor der Veröffentlichung, wie werden Quellen und fremde Bilder angegeben und was geschieht, wenn jemand die Entfernung eines eigenen Inhalts verlangt? Stelle sie als Dokument mit vier kurzen Abschnitten dar.

Der Jugendverein in deinem Stadtteil möchte seine Website veröffentlichen und zieht zwei Möglichkeiten in Betracht:

• Option A: Eine kostenlose Seite auf einer Online-Plattform erstellen, mit der Adresse asociacionvalle.creacionsitios.com und kostenlosem Hosting auf deren Servern, dafür wird Werbung des Anbieters angezeigt.

• Option B: Die eigene Domain asociacionvalle.es registrieren (8 € pro Jahr) und ein unabhängiges Hosting (Webspace) buchen (3,5 € pro Monat).

1) Erkläre, welche Aufgabe die Domain und welche das Hosting hat, und unterscheide beides in jeder der beiden Optionen.

2) Der Kassenwart schlägt Option A vor und sagt: „Sparen wir das Geld; Adresse und Server sind völlig egal, solange sich die Seite öffnet.“ Widerlege seine Aussage, indem du mindestens zwei Probleme oder Einschränkungen vorhersagst, unter denen der Verein mittelfristig bei Option A leiden wird (in Bezug auf sein öffentliches Bild, die Werbung oder die Kontrolle über die Inhalte).

Auf der Website des Elternvereins erscheint eine Liste mit „Vor- und Nachnamen der Preisträger beim Fest, ihrer Klasse und ihrem Foto“. Analysiere, welche personenbezogenen Daten veröffentlicht werden, welche Risiken sie zusammen (mehr als einzeln) bergen, welche Einwilligungen nötig wären und wie du dieselbe Meldung veröffentlichen würdest, um die Schülerinnen und Schüler zu schützen.

Entwirf die Startseite der Website der Wissenschafts-AG: Zeichne oder beschreibe das Layout-Schema (Kopfbereich, Menü, Inhalt, Fußbereich), lege die vier Inhalte fest, die du dort hervorheben würdest, und erkläre, welche Links du ins Menü setzen würdest und warum gerade diese und keine anderen.

Du kannst es auf Papier machen und ein Foto mit deiner Antwort schicken.

Ein Mitschüler sagt: „Weil wir die Klassenwebsite selbst gemacht haben, können wir darauf alles zeigen, was wir wollen: Fotos von jedem, berühmte Hintergrundmusik und von anderen Websites kopierte Texte.“ Widerlege seine drei Aussagen mit Argumenten: Privatsphäre und Recht am eigenen Bild, Urheberrecht an der Musik und Plagiat bei den Texten, und schlage in jedem Fall die richtige Alternative vor.

Themenchallenge. Entwirf einen Artikel für einen Informationsblog über Technikgewohnheiten und Privatsphäre, verwende dabei echte Daten und achte das geistige Eigentum.

Bearbeite die folgenden Phasen:

1. Phase 1. Datenerhebung: Rufe die Website des Statistischen Bundesamts (destatis.de) auf und notiere den Anteil der Minderjährigen, die das Internet regelmäßig nutzen, oder befrage 5 Familienmitglieder zu ihren Bildschirmzeiten, um den Tagesdurchschnitt zu berechnen (zum Beispiel $3,5\text{ h}$). Trage die Daten in eine Tabelle ein.

2. Phase 2. Gestaltung und Inhalte: Gestalte deinen Beitrag in LibreOffice Writer (oder mit einem kostenlosen Blog-Werkzeug) und simuliere dabei die Weboberfläche. Analysiere die erhobenen Daten und illustriere den Beitrag mit einem Bild aus einem freien Archiv (wie Wikimedia Commons oder Pixabay); gib Urheber, Quelle und Lizenztyp korrekt an.

3. Phase 3. Verbreitung und Lizenzen: Formuliere drei Leitlinien zur Privatsphäre für das Veröffentlichen von Fotos oder Informationen Dritter in sozialen Netzwerken. Weise schließlich deiner eigenen Arbeit eine Creative-Commons-Lizenz zu (wie CC BY-NC-SA), begründe deine Wahl und exportiere das Ergebnis als PDF.

Bewertet werden:

• sorgfältige Beschaffung echter Daten und ihre klare Aufbereitung

• korrekte Angabe freier Lizenzen für fremde Materialien und begründete Wahl der eigenen Lizenz

• technische Qualität des Layouts und ethische Relevanz der Hinweise zur verantwortungsvollen Veröffentlichung