Informationsdarstellung im Internet

Informationsdarstellung im Internet

Klaus Becker

2012

2 Informationsdarstellung im Internet

3 Teil 1

WWW

4 Die Maus erklärt das Internet

Was muss eigentlich passieren, damit eine Webseite auf dem Bildschirm zu sehen ist?

Quelle: http://www.wdrmaus.de/sachgeschichten/sachgeschichten/sachgeschichte.php5?id=84

siehe auch:http://www.youtube.com/watch?v=8PNRrOGJqUI

5 Das Internet

Server (z.B. für WWW)

Rechner (zu Hause)

Provider mit Zugangsnetzwerk

lokales Netzwerkmobile Endgeräte

Server (z.B. für E-Mail)


mobile Endgeräte (z.B. Handy)

Router

Das Internet ist ein weltweites Netzwerk einzelner voneinander unabhängiger Computer, die über ein System von Datenverbindungen miteinander verbunden sind. Es dient der elektronischen Kommunikation und dem Austausch von Informationen. (Wikipedia)

6 Dienste des Internets

Server (z.B. für WWW)

Rechner (zu Hause)


lokales Netzwerkmobile Endgeräte

Server (z.B. für E-Mail)


mobile Endgeräte (z.B. Handy)

Router

Im Internet werden verschiedene Dienste (von Anwendungen, die zwischen Rechnern ablaufen) angeboten: WWW, E-Mail, Chat, Online-Spiele, Videokonferenz, ...

7 WWW – World Wide Web

Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt

WWW bezeichnet ein Informationssystem im Internet, bei dem Information auf vernetzten Webseiten - die auf vielen Rechner verteilt gespeichert sind - bereitgestellt wird.

Web-Server: Programm, das Webseiten verwaltet und ausliefert



Hostname: tivi.de

Hostname: wdrmaus.de

/tivi/sicherheit/rubrik/01002/index.html

Hostname: ...

...

...

...

8 Web-Client / Web-Server

Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt

Webseiten werden von einem Web-Client (Browser) angefordert und anschließend - in Form von HTML-Dokumenten- von einem Web-Server ausgeliefert.




Hostname: tivi.de



Hostname: ...

http://www.tivi.de/tivi/sicherheit/rubrik/01002/index.html

index.html

9 URL – Uniform Resource Locator

Eine URL beschreibt, wo sich ein Dokument im Internet befindet.




Hostname: tivi.de



Hostname: ...

http Protokoll

www.tivi.deRechnername bzw. Hostname/tivi/sicherheit/rubrik/01002/index.htmlVerzeichnis und Datei


10 Hostname / IP-Adresse

Zur Identifikation von Rechnern im Internet werden sie mit einem merkbaren Namen (Hostname) und einer maschinenlesbaren Adresse (IP-Adresse) versehen.

IP-Adresse: 91.197.28.181


Hostname: tivi.de

DNS-Server91.197.28.181

Suche IP-Adresse von:tivi.de

index.html

Liefere: /tivi/sicherheit/rubrik/01002/index.html


11 Teil 2

Strukturbeschreibung mit HTML

12 Vernetze Webseiten

Ziel ist es zu verstehen, wie die Webseiten "gemacht" werden. Als Ausgangspunkt wählen wir eine sehr einfache Webseite: I:1.1.1.1

13 Fachkonzept - Hypertext

http://de.wikipedia.org/wiki/Agility

http://www.kaiserslautern.de

http://www.inf-schule.de/informatik/informationsdarstellunginternet/vernetztewebseiten/erkundung_bailey/bailey1.html

http://www.inf-schule.de/informatik/informationsdarstellunginternet/vernetztewebseiten/erkundung_bailey/bailey2.html

Informationen sind im WWW in Dokumenten (mit Texten, Bildern, Audio-Sequenzen, Video-Clips, Animationen) dargestellt, die mit Hilfe von Verweisen miteinander verknüpft sind. Ein solches System vernetzter Dokumente nennt man Hypertext-System oder besser Hypermedia-System.

14 Ein Blick hinter die Kulissen

Versuche die Bedeutung möglichst vieler Bestandteile des gezeigten Quelltextes herauszufinden. Markiere und kommentiere im Quelltext die Teile, die du auf der Webseite wiederfinden.

15 Fachkonzept - HTML

<h1>Hallo, ich heiße Bailey!</h1>

HTML steht für hypertext markup language. HTML ist eine formale Sprache zur Beschreibung der Struktur von Hypertexten (in Form verlinkter Webseiten) mit Hilfe von Auszeichnungen.

Überschrift Auszeichnung

Überschrift: "Hallo, ich heiße Bailey"

Absatz: - Bild

Absatz: - "Hallo, ich heiße ..."- Verweis: "Kaiserslautern"- ". Ich bin ein ..."

Absatz:- "Wenn ich erwachsen ..." - Verweis: "Wikipedia"- "an. Ihr werdet ..."

Absatz:- "Ich kann aber ..." - Verweis: "nächste Seite"- " sehen"

16 Exkurs - HTML

Sie sollen eine einfache Webseite selbst erstellen. Informieren Sie sich im Abschnitt "Exkurs - HTML" (I:1.1.2.3), wie so etwas geht.

Auf dieser Webseite soll ein Steckbrief von Ihnen dargestellt werden. Der Steckbrief soll mindestens folgende Informationen enthalten:

- Name, Vorname

- Foto, auf dem Sie (halbwegs) zu erkennen sind

- Verweis auf Ihre Schule

- Umfang an Informatikkenntnissen

- Erfahrungen mit Informatikunterricht

... weitere Informationen wie z.B. Verweis auf den Wohnort ...

17 Struktur einer Webseite

Webseiten werden genau wie normale Texte gegliedert, um Information möglichst übersichtlich darzustellen. Die Abbildung verdeutlicht die Struktur der gezeigten Webseite.

Überschrift: "Steckbrief"

Absatz: - Bild

Absatz: - "Ich heiße "- Hervorhebung: "Bailey"- ". Ich lebe ..."

Liste:- Listenpunkt: - Hervorhebung: "Sprung"; " durch einen ..."- Listenpunkt: - Hervorhebung: "Lauf"; " über eine ..."- Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen ..."

Absatz:- "Ich gehe ..." - Verweis: "Welpenschule"- ". "

Absatz:- "Ich interessiere ..." - Hervorhebung: "Agility-Sport"- ". Meine ..."

18 HTML-Elemente

HTML stellt zur Strukturbeschreibung die sog. HTML-Elemente als Bausteine zur Verfügung.

Überschrift: "Steckbrief"

Absatz: - Bild

Absatz: - "Ich heiße "- Hervorhebung: "Bailey"- ". Ich lebe ..."

Liste:- Listenpunkt: - Hervorhebung: "Sprung"; " durch einen ..."- Listenpunkt: - Hervorhebung: "Lauf"; " über eine ..."- Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen ..."

Absatz:- "Ich gehe ..." - Verweis: "Welpenschule"- ". "

Absatz:- "Ich interessiere ..." - Hervorhebung: "Agility-Sport"- ". Meine ..."

html head title Steckbrief von Bailey

body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...

li emSlalo... zwischen ...

pIch gehe ... a

Welpenschule

.

Steckbrief

19 HTML-Elementebaum

Die Anordnung der HTML-Elemente kann man mit einem Baumdiagramm verdeutlichen. html head title Steckbrief von

Bailey

body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...


pIch gehe ... a

Welpenschule

.

Steckbrief

20 HTML-Elementebaum

Die Anordnung der HTML-Elemente kann man mit einem Baumdiagramm verdeutlichen.

HTML-Elementebaum

HTML-Elementebaum

21 HTML-Elemente im Quelltext

Darstellung von HTML-Elementen: öffnendes Tag - Inhalt - schließendes Tag


body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...


pIch gehe ... a

Welpenschule

.

Steckbrief

<h1>-Element: <h1>Steckbrief</h1>

HTML-Element

öffnendes Tag

schließen-des Tag

Inhalt

22 HTML-Quelltext


body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...


pIch gehe ... a

Welpenschule

.

Steckbrief

<html> <head> <title>Steckbrief von Bailey</title> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p> Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern. </p> <p> Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind: </p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p> Ich gehe jedes Wochenende zur <a href="http://www.welpenschule-kl.de"> Welpenschule </a> . </p> </body></html>

HTML-Quelltext

23 Inhalte von HTML-Elementen


body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...


pIch gehe ... a

Welpenschule

.

Steckbrief

<html> <head> <title>Steckbrief von Bailey</title> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p> Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern. </p> <p> Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind: </p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p> Ich gehe jedes Wochenende zur <a href="http://www.welpenschule-kl.de"> Welpenschule </a> . </p> </body></html>

kein Inhalt

Text als Inhalt

Text / Elemente als Inhalt

Elemente als Inhalt

24 Attribute von HTML-Elementen

<a href="http://www.welpenschule-kl.de">Welpenschule</a>

Elemente können mit Hilfe von Attributen näher beschrieben werden. Attribute können dabei zusätzliche Informationen über den Inhalt eines Elements liefern. Jedem Attribut muss ein bestimmter Wert zugewiesen werden, der in Anführungszeichen geschrieben wird.

Attribut

Attributwert (in "...")

25 Teil 3

Validierung von Webseiten

26 Fehler und ihre Auswirkungen

rtkl 3(1) ll Mnschn snd vr dm Gstz glch.(2) Mnnr nd Frn snd glchbrchtgt. Dr Stt frdrt d ttschlch Drchstzng dr Glchbrchtgng vn Frn nd Mnnrn nd wrkt f d Bstgng bsthndr Nchtl hn.(3) Nmnd drf wgn sns Gschlchts, snr bstmmng, snr Rss, snr Sprch, snr Hmt nd Hrknft, sns Glbns, snr rlgsn dr pltschn nschngn bnchtlgt dr bvrzgt wrdn. Nmnd drf wgn snr Bhndrng bnchtlgt wrdn.

Der folgende Text sieht auf den ersten Blick etwas merkwürdig aus. Obwohl es hier von Fehlern nur so wimmelt, kann man ihn - zumindest in Teilen - dennoch verstehen.

Wie ist das bei HTML-Quelltexten? Wie wirken sich Fehler hier aus? Zur Klärung dieser Frage betrachten wir den folgenden HTML-Quelltexten.

27 Fehler im HTML-Quelltext<html> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul></html>

Aufgabe:

(a) Der HTML-Quelltext enthält eine ganze Reihe von Fehlern. Markiere und beschreibe sie alle.

(b) Kann der Browser den HTML-Quelltext dennoch sinnvoll anzeigen? Versuche es - evtl. auch mit verschiedenen Browsern.

(c) Soll man HTML-Quelltexte so salopp schreiben wie im Beispiel - auch wenn dein Browser ihn anzeigen kann? Was spricht dagegen?

28 Fehlersuche mit einem Validierer<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul></html>

Vorspann ergänzen


http://validator.w3.org


Fehlermeldungen

31 Fehlersuche mit einem Validierer<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte</title> </head> <body> <h1>Artikel 3</h1> <ol> <li> Alle Menschen sind vor dem Gesetz gleich. </li> <li> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </li> <li> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </li> </ol> </body></html>

Erfolgsmeldungen

32 Übungen

Aufgabe 1:

Führe beim oben gezeigten HTML-Quelltext die Validierung wie beschrieben durch. Korrigiere die Fehler solange, bis der HTML-Quelltext fehlerfrei ist.

Aufgabe 2

Teste, ob das von dir erstellte HTML-Dokument (zum Steckbrief) vom Validierer akzeptiert wird. Wenn nicht, dann ermittle mit Hilfe der Fehlerbeschreibungen des Validierers die Fehler und korrigiere sie.

33 Fachkonzept - Validierung<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> ... </head> <body> ... </body></html>

Dokumenttypdefinition

Ein HTML-Dokument nennt man valide bzw. gültig bzgl. einer Dokumenttypdefinition, wenn es alle Grammatikregeln befolgt, die in der Dokumenttypdefinition festgelegt sind. Validierung eines Dokumentes bedeutet zu überprüfen, ob das Dokument valide bzgl. der angegebenen Dokumenttypdefinition ist.

Dokumenttypdefinition: legt die Regeln fest, die bei der Erstellung von HTML-Dokumenten beachtet werden müssen

34 Übungen

Aufgabe 3

Wenn das Dokument valide ist, dann man das mit einem Piktogramm anzeigen. Wie das geht, wird auf der Seite I:1.1.3.4 beschrieben.

Aufgabe 4

Erweitere Firefox auch um einen Validator (siehe Seite I:1.1.3.4).

35 Teil 4

Formatierung mit CSS

36 Layout gestalten

Bisher haben wir uns überhaupt nicht um die Formatierung der erstellten Webseiten gekümmert, sondern alles dem Browser überlassen. Oft möchte man auch das Layout einer Webseite selbst gestalten, z. B. die Hintergrundfarbe selbst festlegen.

37 Aufgabe

<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Steckbrief von Bailey</title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> <body> <h1>Steckbrief</h1> <p><img src="bailey1.jpg" alt="Foto von Bailey" /></p> <p>Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern.</p> <p>Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind:</p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p>Ich gehe jedes Wochenende zur <a href="www.welpenschule-kl.de">Welpenschule</a>.</p> <p> <img src="valid-xhtml11.gif" alt="Valid XHTML 1.1" /> </p> </body></html>

Versuchen Sie herauszufinden, was die Stilangaben (siehe nächste Seite) bewirken. Verändern Sie hierzu gezielt Angaben und beobachten sie, wie sich das Aussehen der Webseite ändert.

ohne Stilangaben

38 Aufgabebody{ background-color: orange; color: black; font-size: small; font-family: Georgia, "Trebuchet MS", Verdana, sans-serif;}

h1, em{ font-weight: bold; font-style: normal;}

h1{ font-size: 200%;}

em{ color: blue;}

ul em{ color: red;}

mit Stilangaben

39 CSS

CSS steht für Cascading Style Sheets. CSS ist eine Sprache zur Festlegung der Formatierung einzelner HTML-Elemente (wie Schrift, Farbe, etc.).

Die Formatierung einzelner HTML-Elemente wird in CSS mit Hilfe von Regeln festgelegt. Eine CSS-Regel ist wie folgt aufgebaut:

em{ font-weight: bold; font-style: normal;}

Selektor

Attribut Attributwert

40 Aufgabe

Schauen sie sich die Ausführungen auf www.inf-schule.de - 1.4.2 an und formatieren Sie ihren Steckbrief nach ihren Vorstellungen.

41

Trennung Strukturierung - Formatierung


body h1

p img

pIch heiße

emBailey

ul li

. Ich lebe ...

pIch int... em

Agilit...

. Meine ...

emSprung durch ...

li emLauf über ...


pIch gehe ... a

Welpenschule

.

Steckbrief

Struktur

...

...

...

... ...

... ...

... ...

...

Formatierung

42

Trennung Strukturierung - Formatierung

Die Trennung zwischen Strukturierung und Formatierung ist ein Grundprinzip bei der Erstellung von Produkten wie Webseiten, das zur einfacheren Wartung der Produkte beiträgt.

body{ background-color: orange; color: black; font-size: small; font-family: Georgia, "Trebuchet MS", Verdana, sans-serif;}

h1, em{ font-weight: bold; font-style: normal;}

h1{ font-size: 200%;}

...

<?xml version="1.0" encoding="iso-8859-1" ?><!DOCTYPE html PUBLIC ... <head> <title>Steckbrief von Bailey</title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p>Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern.</p> <p>Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind:</p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> ... </body></html>

Strukturierung

Formatierung

43 Teil 5

Exkurs – Web-Server

44 Web-Server

Bisher haben wir Webseiten lokal gespeichert und im Browser als Dateien geöffnet.

Ziel ist es jetzt, Webseiten auf einen Web-Server „hochzuladen“ und Webseiten von einem Web-Server „abzurufen“.

file:///.../steckbriefe/index.html

http://10.10.1.20/steckbriefe/index.html

http://C18/steckbriefe/index.html

45 http

Web-Client: Browser Web-Server: Apache

IP-Adresse: 10.10.1.20

C:

xampp

htdocs

steckbriefe

index.html

http://10.10.1.20/steckbriefe/index.html

http://C18/steckbriefe/index.html

46 ftp

FTP-Client: FileZilla FTP-Server: FileZilla Server

IP-Adresse: 10.10.1.20

C:

xampp

htdocs

steckbriefe

index.html

wilheml

steckbrief.html

MKD wilhelm

CWD /wilhelm

STOR steckbrief.html

10.10.1.20

47 Konfiguration - FileZilla

48 Konfiguration - FileZilla

49 Teil 6

Barrierefreiheit

50 Webseiten anders wahrnehmen

Wie können Blinde Webseiten erfassen? Was nimmt ein Farbenblinder eventuell nicht wahr? Welche Beschränkungen erfahren Menschen, die nur die Maus, nicht aber die Tastatur bedienen können? Wie kann man Webseiten so gestalten, dass keine unüberwindlichen Barrieren bei der Nutzung entstehen?

51 Aufgabe

Hier geht es darum, das Internet mit anderen Augen wahrzunehmen. Schauen Sie sich verschiedene Webseiten mit einem Lynx-Viewer (oder auch mit dem Browser Lynx selbst) an. Wenn Sie das Internet nur noch mit den Ohren wahrnehmen möchten, dann lassen Sie sich Webseiten vorlesen. Welche Einschränkungen ergeben sich durch die etwas andere Wahrnehmung der Webseiten?

52 Barrierefreiheit

Barrierefreies Webdesign:

... Alternativtexte bei Bildern

... Trennung zwischen Struktur und Layout

... Farbwahl

...

Auszug aus dem Behindertengleichstellungsgesetz an: Barrierefrei sind [...] Systeme der Informationsverarbeitung [...], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.

53 Teil 7

Rechtliches, Persönliches …

54 Darf man das?Beurteilen Sie die folgenden Rechtsfälle. Wer verstößt gegen geltendes Recht?

Fall 1: Lehrer X stellt seinen Schülern auf seiner Homepage Auszüge aus Werken von Erich Kästner zur Verfügung. Er erhält prompt eine Abmahnung.

Fall 2: Schüler X stellt Latein-Übersetzungen eines Schulbuch-Verlags auf seiner Webseite zum Download bereit. Der Verlag klagt gegen den Schüler. Der Streitwert liegt bei 80000 Euro. Hinzukommen die Anwaltskosten.

Fall 3: Schüler X bietet bei eBay Schmuck im Cartier-Design an. Die Firma Cartier schickte eine Abmahnung und eine Rechnung zur Begleichung der Anwaltskosten. Da der Schüler diese nicht zahlen will, landet der Fall vor Gericht.

Fall 4: Schülerin X hat die Songs ihrer Lieblings-Group übersetzt und auf ihrer Homepage allen Fans zur Verfügung gestellt. Jetzt plötzlich erhält sie Post von einer Rechtsanwaltskanzlei, gleich zehn Briefe (für jeden Song einen) mit jeweils einer Abmahnungsgebühr von 1600 Euro.

Fall 5: Schüler X hat auf seiner Homepage einen Link auf ein Kopierprogramm gesetzt, mit dem man Audio-CDs kopieren kann.

Fall 6: Schüler X hat ein neues Spiel programmiert und bietet es unter dem Namen Memory auf seiner Homepage kostenlos zum Download an. Kurz darauf erhält er eine Abmahnung.

Fall 7: Schülerin X nennt Lehrer Y in ihrem Blog einen Volltrottel, der pädagogisch eine Niete ist und fachlich jedes Niveau unterschreitet. Lehrer Y klagt wegen Ehrverletzung.

Fall 8: Die Schule X würdigt die Gewinner bei Jugend forscht, indem sie eine eigene Webseite auf der Schul-Hompage einrichtet, auf der die Jugendlichen ihre erzielten Ergebnisse vorstellen können. Zur Verdeutlichung der Erfolge hat der Webmaster schnell noch einige Fotos von der Preisverleihung mit abgebildet. Die Eltern von Schülerin X und Schüler Y protestieren bei der Schulleitung.

55 Rechtsbestimmungen

Das Urheberrecht dient dazu, den Urheber eines geistigen oder künstlerischen Werkes zu schützen. Urheberrechtlich geschützt sind somit Produkte wie eigenständig verfasste Texte oder auch selbst gemachte Fotos, sofern sie eine kreative Leistung darstellen. Das Urheberrecht soll gewährleisten, dass nur der Urheber darüber entscheiden kann, wie sein Werk verbreitet, verarbeitet, vervielfältigt, ... wird. Eingeschränkt wird dies durch das Zitierrecht, wonach unter bestimmten Umständen Teile eines Werkes übernommen werden dürfen. Natürlich müssen solche Übernahmen gekennzeichnet werden. Das allgemeine Persönlichkeitsrecht ist im Grundgesetz verankert und soll die Entfaltung der Persönlichkeit garantieren. Ziel ist es, die Privat-, Geheim- und Intimsphäre von Personen zu garantieren und sie vor unzulässigen Eingriffen in diese zu schützen.Das Markenrecht soll gewährleisten, dass Verbrauchern die Identität von Produkten oder Dienstleistungen garantiert wird.

Die gesetzlichen Grundlagen zur Haftung für Hyperlinks sind recht problematisch. Nicht erlaubt sind z. B. Links auf rechtswidrige oder verbotene Inhalte, sofern sich der Verlinkende den Inhalt des verlinkten Web-Angebots zu eigen macht.

56 Spuren im Internet Unliebsame Infos aus dem WebFälle wie dieser aus den USA häufen sich. Der Grund: Statt mit einem Blick aufs Passfoto beginnt die Kandidatenauswahl heutzutage mit einem Griff zu Tastatur und Maus. So zutage geförderte Spuren im Internet können den gewünschten Karriereschritt scheitern lassen. Denn ganz gleich, ob Fotos vom Trinkgelage in der Studentenverbindung, alte Lebensläufe oder Meinungsäußerungen in Foren - das Web steckt voller Informationen, von denen die Betroffenen oft gar nichts wissen. Und vieles, was dort schlummert, kann für Bewerber zur Bedrohung werden.Quelle: http://www.computerwoche.de/index.cfm?pid=3149&pk=569422

Eine neue Generation findet nichts dabei, ihr Privatleben im Netz vermarkten zu lassen. Konzerne wittern große GeschäfteEine amerikanische Internetfirma namens Facebook soll 15 Milliarden Dollar wert sein, obwohl sie nicht einmal vier Jahre alt ist und vielleicht 150 Millionen Dollar Umsatz macht. Die Manager des Softwarekonzerns Microsoft hat das nicht gestört. Vor einer Woche haben sie 240 Millionen Dollar für rund anderthalb Prozent an Facebook gezahlt. Stecken wir schon wieder in einer Spekulationsblase?Quelle: http://www.zeit.de/2007/45/01-Internet?page=all

Falsche Fotos von mir im NetzDer Unbekannte hatte Melanies Daten einfach mit anzüglichen Fotos vermischt, die jemand ganz anderen zeigen. Melanie lässt das gefälschte Profil durch die Betreiberfirma StudiVZ löschen, doch der Unbekannte lädt es immer wieder hoch. Melanie ist machtlos. "Ich finde das besonders beängstigend, weil es für mich bedeutet, dass ich an diesem Punkt nichts mehr machen kann." Quelle: http://www.n-tv.de/930463.html?140320080727

57 Teil 8

Zusammenfassung - Darstellung von Information

58 Darstellung von Information ...

Information...

mit Text, Bildern, ... darstellen

Texte, Bilder, ... deuten

<?xml ... ?><!DOCTYPE html ...><html ...> <head> ... </head> <body> ... </body></html>

... Information...


Steckbrief

Ich heiße ...

computergerecht darstellen

automatisiert verarbeiten

transportieren

DatenDaten

59 Darstellung von Information ...

Information...

mit Text, Bildern, ... darstellen

Texte, Bilder, ... deuten


... Information...


Steckbrief

Ich heiße ...

computergerecht darstellen

automatisiert verarbeiten

...010011101000110...

binär darstellen

DatenDaten Daten

60 Anforderungen an Webseiten ...

Darstellung mit der Auszeichnungssprache HTML

Deutung eines Betrachters

Grafische Aufbereitung

durch den Browser

Der HTML-Quelltext sollte gut lesbar und damit wartbar sein.

...

Der HTML-Quelltext sollte von verschiedenen Browsern „richtig“ angezeigt werden.

Der HTML-Quelltext sollte auch auf alternativen Ausgabemedien (z. B. PDA, Handy) angezeigt werden.

...

Die Informationen sollten klar und verständlich dargestellt werden.

...

Die Informationen sollten auch von Menschen mit Behinderungen (z. B. Sehbehinderungen) erfasst werden können. ...

(Siehe auch: J. E. Hellbusch: Barrierefreies Webdesign. dpunkt.verlag 2005)

61 ... und ihre Realisierung

...

Mittlerweile ist es bekannt, dass man altes HTML nicht einfach in eine Text-Datei stopfen kann, auch wenn das Ergebnis im Lieblings-Browser hinterher zufällig gut aussieht, sondern dass valides HTML existiert, das man auch einsetzen kann. Damals wurde ausgeklügelt, was valides HTML eigentlich ist, obwohl es zu dieser Zeit kaum Hilfestellungen zu diesem Thema gab und obwohl es fast unmöglich ist, Menschen, die sich mit der Materie nicht befassen, zu erklären, was sich hinter dem Begriff valides HTML eigentlich verbirgt. (Die Beste Art und Weise es zu erklären, ist wohl nach wie vor, zu sagen: Valides HTML ist so ähnlich, wie grammatikalisch korrektes HTML .)

Heute verwendet man nicht nur valides HTML, sondern auch valides semantisches HTML, worin HTML-Elemente nach ihrer tatsächlichen Bedeutung eingesetzt werden und nicht mehr danach, was die Elemente in einem Browser hinterher anzeigen. Man hat endlich gelernt, Überschriften, Paragrafen, Bilder, Listenelemente und ähnliches zu unterscheiden und in korrekter Markup-Sprache auszudrücken.

...

(aus: http://www.einfachfueralle.de/artikel/gestaltung-hilft/)

Barrierefreies Webdesign

Trennung von Inhalt, Struktur und Form

Validierung von Dokumenten

Informationsdarstellung im Internet

Documents

Transcript of Informationsdarstellung im Internet