Darstellung von Information

Transcript Darstellung von Information

Informationsdarstellung
im Internet
Klaus Becker
2008
2
Darstellung von Information
Information
„Endlich fängt der neue
Weiterbildungskurs
Informatik an.“
„Der neue
Weiterbildungskurs
Informatik fängt an.“
Repräsentieren
Darstellen
<html>
...
Der neue Weiterbildungskurs
Informatik fängt an. :-)
...
</html>
Interpretieren
Deuten
Verarbeiten
und
Übertragen
Daten
<html>
...
Der neue Weiterbildungskurs
Informatik fängt an. :-)
...
</html>
3
Teil 1
WWW – Informationssystem im Internet
4
Aufgabe
Auf den folgenden Internetseiten finden Sie Informationen zum Schulfach Informatik in
Rheinland-Pfalz. Schauen Sie sich kurz auf diesen Seiten um und klären Sie dabei, welche
Informationen hier jeweils zu finden sind.
http://informatik.bildung-rp.de/index.html
http://www.informatik-lehren.de/index.html
http://www.hsg-kl.de/faecher/inf/index.php
http://inf.burg-kl.de/index.php
Internet
5
www.cybergeography.org
Das Internet ist ein weltweites Netzwerk einzelner voneinander unabhängiger
Computer, die über ein System von Datenverbindungen miteinander gekoppelt sind.
Es dient der elektronischen Kommunikation und dem Austausch von Informationen.
(Wikipedia)
6
WWW
„Umgangssprachlich wird häufig die Bezeichnung World Wide Web als Synonym für
das „Internet“ verwendet. Das World Wide Web ist jedoch nur eine von mehreren
Anwendungen des Internets.“ (Wikipedia)
„Das World Wide Web (kurz das Web oder WWW) ist ein Hypertext-System, das
über das Internet abgerufen werden kann.“ (Wikipedia)
„WWW bezeichnet eigentlich eine Technologie, die in der Lage ist, ein verteiltes,
Internet-basiertes Hypermedia-Dokumentenmodell zu implementieren.“ (Meinel,
Sack: WWW. Springer 2004)
„WWW: integrativer Hypermedia-basierter Informationsdienst“ (Meinel, Sack:
WWW. Springer 2004)
Arbeitsdefinition:
„WWW: Abkürzung für World Wide Web, ein mächtiges Informationssystem auf
Hypertext-Basis im Internet. “ (Duden Informatik)
7
Hypermedia-System
HypermediaDokument
Verweis /
Hyperlink
Informationen sind im WWW in Dokumenten
(mit Texten, Bildern, Audio-Sequenzen, VideoClips, Animationen) dargestellt, die mit Hilfe
von Verweisen miteinander verknüpft sind. Ein
solches System vernetzter Dokumente nennt
man Hypermedia-System.
Datei
8
Browser
http://informatik.bildung-rp.de/extern/service/lehrplaene.html
http://www.informatik-lehren.de/umsetzung/index.html
Mit Hilfe eines Browsers kann der Benutzer auf das
Informationsangebot des Hypermedia-Systems zugreifen.
Der Browser ermöglicht die Navigation innerhalb des
Hypermedia-Systems und bereitet die Wiedergabe des
Dokuments für den Benutzer auf.
9
Browser
http://informatik.bildung-rp.de/extern/service/lehrplaene.html
http://www.informatik-lehren.de/umsetzung/index.html
Die Dokumente eines Hypermedia-Systems können auf
verschiedenen Rechnern, die über die gesamte Welt verteilt
sind, gespeichert sein.
Damit die Dokumente aufgefunden werden können, müssen
sie über Angaben wie Rechnername, Dokumentenname etc.
identifizierbar sein.
10
URL – Uniform Resource Locator
Ein Dokument wird im WWW mit Hilfe einer
sog. URL eindeutig beschrieben.
http://www.informatik-lehren.de/umsetzung/index.html
http
Protokoll – Vereinbarungen über den geordneten Ablauf der
Kommunikation
www.informatik-lehren.de
Rechnername – identifiziert den Rechner, auf dem das Dokument
bereitgestellt wird
umsetzung/index.html
Dokumentenname – beschreibt, (in welchem Verzeichnis und) in
welcher Datei das Dokument auf dem Rechner zu finden ist
Client-Server-Architektur
11
http://www.informatik-lehren.de/umsetzung/index.html
www.informatik-lehren.de
Fordert ein Dokument an
Browser
(Client)
http
WWW-Server
(Server)
Liefert das Dokument aus
umsetzung/
index.html
12
http - hypertext transfer protocol
Die Interaktion zwischen Client und Server erfolgt nach fest vorgegebenen Regeln.
Das Hypertext Transfer Protocol legt diese Regeln fest.
www.informatik-lehren.de
Fordert ein Dokument an
Browser
WWW-Server
http
(Client)
(Server)
Liefert das Dokument aus
umsetzung/
index.html
Der Browser eröffnet die Verbindung
zum WWW-Server
und stellt das erhaltene Dokument
dar.
Der WWW-Server wartet auf eine
Anfrage, liefert das Dokument (falls
vorhanden) aus und beendet die
Verbindung.
13
Teil 2
Strukturbeschreibung mit HTML
14
Informationsdarstellung mit HTML
„Die AG-Informatik des
LMZ Rheinland-Pfalz stellt
folgende Materialien
bereit. ...“
„Hier gibt es interessante
Unterrichtsmaterialien“
Darstellung mit der
Auszeichnungssprache
HTML
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
...
<TITLE>AG Informatik
Rheinland-Pfalz</TITLE>
...
</HEAD>
</HTML>
Grafische
Aufbereitung
durch den
Browser
Deutung eines
Betrachters
15
Ein Blick hinter die Kulissen
Die Beschreibung von Web-Seiten erfolgt mit Hilfe der Dokumentenbeschreibungssprache
HTML (hypertext markup language). Der Browser interpretiert den HTML-Code, d. h. er
erzeugt hieraus die Darstellung auf dem Bildschirm.
16
Aufgabe
Versuchen Sie, die Bedeutung
möglichst vieler Bestandteile des
gezeigten Quelltextes
herauszufinden. Markieren und
kommentieren Sie im Quelltext die
Teile, die sie auf der Webseite
wiederfinden.
17
Strukturbeschreib. mit Auszeichnungen
Überschrift
<h1>Hallo, ich heiße Bailey!</h1>
Auszeichnung
HTML steht für hypertext markup language. HTML ist eine formale Sprache zur Beschreibung
der Struktur von Webseiten mit Hilfe von Auszeichnungen. Diese Auszeichnungen dienen dazu,
die Struktur der Seite zu beschreiben.
18
Miniprojekt "Steckbrief"
Sie sollen eine einfache Webseite selbst erstellen. Informieren sie sich im Abschnitt "Exkurs HTML" (siehe www.inf-schule.de - 1.2.4), 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
- Informatikunterricht
... z. B. Verweis auf den Wohnort ...
Speichern Sie die Webseite in folgendem Format ab: vorname_nachname.html
z.B:
martin_roelz.html
silke_schneider.html
doris_visser.html
19
Grundbausteine von HTMLDokumenten sind die HTMLElemente. Webseiten werden
nach dem Baukastenprinzip
aus HTML-Elementen
zusammengesetzt.
Elementstruktur
20
Elementstruktur
<html>
<head>
<title>Steckbrief von Bailey</title>
</head>
<body>
<h1>Steckbrief</h1>
<img src="bailey1.jpg" alt="Foto von Bailey" />

Ich heiße Bailey. Ich lebe in der Nähe
von Kaiserslautern.


Ich interessiere mich für Agility-Sport.
Meine Lieblingsdisziplinen sind:

<ul>
<li>Sprung durch einen Reifen</li>
<li>Lauf über eine Wippe</li>
<li>Slalomlauf zwischen Stangen</li>
</ul>

Ich gehe jedes Wochenende zur
<a href="www.welpenschule-kl.de">Welpenschule</a>.

</body>
</html>
Ein (HTML-)Element besteht aus einem öffnenden Tag,
einem Inhalt und einem schließenden Tag.
21
Die Elementstruktur kann
mit Hilfe eines Baumes
verdeutlicht werden.
Elementstruktur
22
siehe www.inf-schule.de
Übungen
23
Teil 3
Validierung von Webseiten
24
Fehlerhafte Dokumente
Der folgende Text sieht auf den ersten Blick etwas merkwürdig aus. Können Sie ihn dennoch
lesen und verstehen?
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.
Soll man Texte so schreiben - man versteht sie doch? Was spricht dagegen?
25
Fehlerhafte Dokumente
Der folgende HTML-Text enthält eine ganze Reihe von Fehlern. Welche? Kann ihr Browser ihn
dennoch sinnvoll anzeigen? Versuch Sie es einmal.
<html>
<head>
<title>Grundrechte<title>
</head>
<body>
<h1>Artikel 3</h2>
<ol>
<li>
Alle Menschen sind vor dem Gesetz gleich.
</lo>
<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.
</lo>
<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.
</lo>
</ol>
Soll man HTML-Quelltexte so salopp schreiben - der Browser versteht sie doch? Was spricht
dagegen?
26
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>
<title>Steckbrief von Bailey</title>
</head>
<body>
<h1>Steckbrief</h1>
<img src="bailey1.jpg" alt="Foto von Bailey" />

Ich heiße Bailey. Ich lebe in der Nähe
von Kaiserslautern.


Ich interessiere mich für Agility-Sport.
Meine Lieblingsdisziplinen sind:

<ul>
<li>Sprung durch einen Reifen</li>
<li>Lauf über eine Wippe</li>
<li>Slalomlauf zwischen Stangen</li>
</ul>

Ich gehe jedes Wochenende zur
<a href="www.welpenschule-kl.de">Welpenschule</a>.

</body>
</html>
http://www.validome.org
27
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>
<title>Steckbrief von Bailey</title>
</head>
<body>
...
</body>
</html>
Dokumenttypdefinition
Dokumenttypdefinition:
legt die Regeln fest, die bei der
Erstellung von HTML-Dokumenten
beachtet werden müssen
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.
28
Übungen
Testen sie, ob das von ihnen erstellte HTML-Dokument (zum Steckbrief) vom Validierer
akzeptiert wird. Wenn nicht, dann versuchen sie mit Hilfe der Fehlerbeschreibungen die Fehler
zu beseitigen.
Wenn das Dokument valide ist, dann können sie dies mit einem Piktogramm anzeigen. Wie das
geht, sehen sie auf der Seite 1.3.4.
Erweitern sie Firefox auch um einen Validator (siehe Seite 1.3.4).
29
Teil 4
Formatierung mit CSS
30
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.
31
Aufgabe
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.
<?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>
<img src="bailey1.jpg" alt="Foto von Bailey" />
Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern.
Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind:
<ul>
<li>Sprung durch einen Reifen</li>
<li>Lauf über eine Wippe</li>
<li>Slalomlauf zwischen Stangen</li>
</ul>
Ich gehe jedes Wochenende zur <a href="www.welpenschule-kl.de">Welpenschule</a>.

<img src="valid-xhtml11.gif" alt="Valid XHTML 1.1" />

</body>
</html>
ohne Stilangaben
32
Aufgabe
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%;
}
em
{
color: blue;
}
ul em
{
color: red;
}
mit Stilangaben
CSS
33
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:
Selektor
em
{
font-weight: bold;
font-style: normal;
}
Attribut
Attributwert
34
Aufgabe
Schauen sie sich die Ausführungen auf www.inf-schule.de - 1.4.2 an und formatieren Sie ihren
Steckbrief nach ihren Vorstellungen.
35
siehe www.inf-schule.de - 1.4.3
Aufgabe
36
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.
<?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>

<img src="bailey1.jpg" alt="Foto von Bailey" />

Ich heiße Bailey. Ich lebe in der Nähe
von Kaiserslautern.
Ich interessiere mich für Agility-Sport.
Meine Lieblingsdisziplinen sind:
<ul>
<li>Sprung durch einen Reifen</li>
<li>Lauf über eine Wippe</li>
<li>Slalomlauf zwischen Stangen</li>
</ul>
...
</body>
</html>
Strukturierung
body
{
background-color: orange;
color: black;
font-size: small;
font-family: Georgia, "Trebuchet MS", Verdana, sansserif;
}
h1, em
{
font-weight: bold;
font-style: normal;
}
h1
{
font-size: 200%;
}
...
Formatierung
37
Anforderungen an Webseiten ...
Die Informationen sollten klar und
verständlich dargestellt werden.
Die Informationen sollten auch von
Menschen mit Behinderungen (z. B.
Sehbehinderungen) erfasst werden
können. ...
...
Darstellung mit der
Auszeichnungssprache
HTML
Der HTML-Quelltext sollte gut lesbar
und damit wartbar sein.
...
Grafische
Aufbereitung
durch den
Browser
Deutung eines
Betrachters
Der HTML-Quelltext sollte von
verschiedenen Browsern „richtig“
angezeigt werden.
Der HTML-Quelltext sollte auch auf
alternativen Ausgabemedien (z. B.
PDA, Handy) angezeigt werden.
...
(Siehe auch: J. E. Hellbusch: Barrierefreies Webdesign. dpunkt.verlag 2005)
38
... 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/)
Trennung von Inhalt,
Struktur und Form
Validierung von Dokumenten
Barrierefreies Webdesign
39
Teil 5
Barrierefreiheit
40
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?
41
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?
42
Barrierefreiheit
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.
Barrierefreies Webdesign:
... Alternativtexte bei Bildern
... Trennung zwischen Struktur und Layout
... Farbwahl
...
43
Teil 6
Rechtliches
44
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 AudioCDs 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 SchulHompage 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.
45
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.
46
Aufgabe
Informieren Sie sich auf den Seiten
http://remus-schule.jura.uni-saarland.de/mambo/index.php
über Rechtsprobleme im Zusammenhang mit dem Internet.
47
Teil 7
Persönliches
48
Spuren im Internet
Unliebsame Infos aus dem Web
Fä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äfte
Eine 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 Netz
Der 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
49
Teil 8
Exkurs: XML
Zielsetzung
50
SGML
XML
HTML 2.0
HTML 3.2
HTML 4.0
(strict, transitional, frameset)
XHTML 1.0
(strict, transitional, frameset)
XHTML 1.1
(strict)
Die Darstellung von Information erfolgt in der Informatik mit Hilfe
spezieller Sprachen. Anhand des Zusammenhangs zwischen XHTML und
XML sollen wesentliche Aspekte solcher Sprachen herausgestellt und
verdeutlicht werden.
51
Beispiel: IFB-Kurs
Welche Informationen werden zur Verwaltung eines IFB-Kurses
zusammengestellt?
OOP mit Delphi
IFB-Veranstaltung Nr. 11.678 C vom 11.-13.10.2004 in Speyer
Leitung: StD Gregor Noll (Gymnasium Sinzig)
Referenten:
OStR Helmut Paulus (MPG Trier)
StD Ulrich Mayr (Studienseminar Trier)
...
IFB-Referent: Dr. Wolf Böhm
Teilnehmer:
OStR‘ Andea Schmitz (Europa-Gymnasium Wörth)
StR Hans Meier (Goethe-Gymnasium Bad Ems)
...
52
Strukturierte Darstellung mit XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<ifbkurs>
<nummer>11.678 C</nummer>
<titel>OOP mit Delphi</titel>
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>
<leiter>
<person geschlecht="m">
<name>StD Gregor Noll</name>
<institution>Gymnasium Sinzig</institution>
</person>
</leiter>
<referenten>
<person geschlecht="m">
<name>OStR Helmut Paulus</name>
<institution>MPG Trier</institution>
</person>
<person geschlecht="m">
<name>StD Ulrich Mayr</name>
<institution>Studienseminar Trier</institution>
</person>
</referenten> ...
</ifbkurs>
Internet-Explorer
53
XML
Die Abkürzung XML steht für extended markup language. XML ist eine
„Metasprache zur Beschreibung von Auszeichnungssprachen für
allgemeine Dokumente.“ (Duden Informatik)
Mit Hilfe von XML kann man Informationen strukturiert darstellen. Des
weiteren kann man die Struktur (und die Formatierung) von Dokumenten
festlegen, d. h. man kann die Sprache festlegen, in der die Dokumente
verfasst werden müssen.
54
Strukturbeschreibung mit Elementen
Grundbausteine eines XML-Dokuments sind die XML-Elemente.
Ein (XML-) Element wird mit Hilfe von Tags (Anfangs- und Endtag)
markiert.
<nummer>11.678 C</nummer>
<name>OStR Helmut Paulus</name>
Die Tag-Bezeichner werden in spitzen Klammern notiert. Diese Bezeichner
müssen mit Kleinbuchstaben geschrieben werden.
Anders als in XHTML kann der Benutzer selbst beliebige Tag-Bezeichner
einführen und zur Strukturierung benutzen.
55
Strukturbeschreibung mit Elementen
(XML-) Elemente können geschachtelt werden. Hierdurch entsteht eine
komplexe hierarchische Struktur.
<referenten>
<person geschlecht="m">
<name>OStR Helmut Paulus</name>
<institution>MPG Trier</institution>
</person>
<person geschlecht="m">
<name>StD Ulrich Mayr</name>
<institution>Studienseminar Trier</institution>
</person>
</referenten>
56
Strukturbeschreibung mit Elementen
(XML-) Elemente können mit Hilfe von Attributen näher beschrieben
werden. Attribute können dabei zusätzliche Informationen über den Inhalt
eines Elements liefern, ohne selbst Teil des Inhalts zu sein. Jedem Attribut
muss ein bestimmter Wert zugewiesen werden, der in Anführungszeichen
geschrieben wird.
<person geschlecht="m">
<name>OStR Helmut Paulus</name>
<institution>MPG Trier</institution>
</person>
57
Strukturbaum
<?xml version="1.0" encoding="ISO-8859-1"?>
<ifbkurs>
<nummer>11.678 C</nummer>
<titel>OOP mit Delphi</titel>
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>
<leiter>
<person geschlecht="m">
<name>StD Gregor Noll</name>
<institution>Gymnasium Sinzig</institution>
</person>
</leiter>
<referenten>
<person geschlecht="m">
<name>OStR Helmut Paulus</name>
<institution>MPG Trier</institution>
</person>
<person geschlecht="m">
<name>StD Ulrich Mayr</name>
<institution>Studienseminar Trier</institution>
</person>
</referenten> ...
</ifbkurs>
ifbkurs
nummer
titel
termin
ort
leiter
person
...
referenten
...
person
...
58
Wohlgeformtheit
<?xml version="1.0" encoding="ISO-8859-1"?>
<ifbkurs>
In einem wohlgeformten
<nummer>11.678 C</nummer>
(wellformed) XML-Dokument sind
<titel>OOP mit Delphi</titel>
alle Elemente korrekt geschachtelt,
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>
ist allen Attributen ein Wert
<leiter>
zugewiesen, ...
<person geschlecht="m">
D. h.: Alle Regeln zur Erstellung
<name>StD Gregor Noll</name>
<institution>Gymnasium Sinzig</institution> eines syntaktisch korrekten XML</person>
Dokuments sind beachtet.
<leiter>
<referenten>
<person geschlecht="m">
<name>OStR Helmut Paulus</name>
<institution>MPG Trier</institution>
</person>
<person geschlecht="m">
<name>StD Ulrich Mayr</name>
<institution>Studienseminar Trier</institution>
</person>
</referenten> ...
Internet-Explorer
</ifbkurs>
59
Korrekt oder nicht?
<?xml version="1.0" encoding="ISO-8859-1"?>
<ifbkurs>
Das XML-Dokument ist zwar
<nummer>11.678 C</nummer>
wohlgeformt, es hat aber nicht die
<titel>OOP mit Delphi</titel>
beabsichtigte Struktur.
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>
Die beabsichtigte Struktur lässt sich

<referenten>
mit Hilfe einer
<person geschlecht="m">
Dokumententypdefinition (DTD)
<name>OStR Helmut Paulus</name>
festlegen.
<institution>MPG Trier</institution>
</person>
<person geschlecht="m">
<name>StD Ulrich Mayr</name>
<institution>Studienseminar Trier</institution>
</person>
</referenten> ...
</ifbkurs>
60
Dokumententypdefinition
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE ifbkurs
[
<!ELEMENT ifbkurs (nummer, titel, termin, ort, leiter, referenten, ifbreferent, teilnehmer)>
<!ELEMENT nummer (#PCDATA)>
<!ELEMENT titel (#PCDATA)>
<!ELEMENT termin (#PCDATA)>
<!ELEMENT ort (#PCDATA)>
<!ELEMENT leiter (person)>
<!ELEMENT person (name, institution)>
<!ATTLIST person geschlecht CDATA #REQUIRED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT institution (#PCDATA)>
<!ELEMENT referenten (person)+>
<!ELEMENT ifbreferent (person)>
<!ELEMENT teilnehmer (person)*>
]
>
<ifbkurs>
<nummer>11.678 C</nummer>
<titel>OOP mit Delphi</titel>
...
61
Gültigkeit
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE ifbkurs
[
...
]
>
<ifbkurs>
<nummer>11.678 C</nummer>
<titel>OOP mit Delphi</titel>
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>

<referenten>
...
</ifbkurs>
In einem gültigen bzw. validen
(valid) XML-Dokument werden
neben den Regeln zur Erstellung
wohlgeformter XML-Dokumente
auch die Regeln der
Dokumententypdefinition beachtet.
62
Validierung
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE ifbkurs
[
...
]
>
<ifbkurs>
<nummer>11.678 C</nummer>
<titel>OOP mit Delphi</titel>
<termin>11.-13.10.2004</termin>
<ort>Speyer</ort>
<referenten>
...
</ifbkurs>
http://www.validome.org/xml/validate/
63
Syntaxregeln
<!DOCTYPE ifbkurs
[
<!ELEMENT ifbkurs (nummer, titel, termin, ort, leiter, referenten, ifbreferent, teilnehmer)>
<!ELEMENT nummer (#PCDATA)>
<!ELEMENT titel (#PCDATA)>
<!ELEMENT termin (#PCDATA)>
<!ELEMENT ort (#PCDATA)>
<!ELEMENT leiter (person)>
<!ELEMENT person (name, institution)>
<!ATTLIST person geschlecht CDATA #REQUIRED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT institution (#PCDATA)>
<!ELEMENT referenten (person)+>
<!ELEMENT ifbreferent (person)>
<!ELEMENT teilnehmer (person)*>
]
Eine Dokumententypdefinition
>
beschreibt die Regeln (Syntax), mit
deren Hilfe die Struktur von XMLDokumenten genau festgelegt
wird. Mit diesen Syntaxregeln wird
also eine neue Sprache geschaffen.
64
Syntaxregeln
<!DOCTYPE ifbkurs
[
<!ELEMENT ifbkurs (nummer, titel, termin, ort, leiter, referenten, ifbreferent, teilnehmer)>
<!ELEMENT nummer (#PCDATA)>
<!ELEMENT titel (#PCDATA)>
<!ELEMENT termin (#PCDATA)>
<!ELEMENT ort (#PCDATA)>
<!ELEMENT leiter (person)>
<!ELEMENT person (name, institution)>
<!ATTLIST person geschlecht CDATA #REQUIRED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT institution (#PCDATA)>
<!ELEMENT referenten (person)+> Operationen zur Beschreibung der Syntax:
<!ELEMENT ifbreferent (person)>
<!ELEMENT teilnehmer (person)*>
,
Sequenz
]
>
|
Alternative
?
Optionales Element
*
beliebig oft (auch gar nicht)
+
mindestens einmal
65
Aufgabe
Ziel ist es, eine vereinfachte Version von HTML mit Hilfe von XML
festzulegen. Folgendes HTML-Dokument soll dabei als gültig validiert
werden.
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Weiterbildung am IFB</h1>
Die Arbeit findet normalerweise in einem der Rechnerräume des IFB statt.
<img src="Rechnerraum.jpg" alt="Rechnerraum"></img>
Untergebracht wird man in dem schönen neuen S-Bau.
<img src="SGebaeude.jpg" alt="S-Gebäude"></img>
<a href="Weiterbildungskurse.xml">Zurück</a>
</body>
</html>
66
Aufgabe
Gehen Sie bei der Entwicklung der Syntaxregeln schrittweise vor.
Beginnen Sie mit einfachen Varianten (wie der unten gezeigten) und
entwickeln Sie diese Schritt für Schritt weiter. Validieren Sie jeweils ihre
Ergebnisse.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
[
<!ELEMENT html (head)>
<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
]
>
<html>
<head>
<title>Test</title>
</head>
</html>
67
Syntaxregeln von myXHTML
<!DOCTYPE html
[
<!ELEMENT html (head, body)>
<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT body (h1 | p)+>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA | img | a)*>
<!ELEMENT img (#PCDATA)>
<!ATTLIST img
src CDATA #REQUIRED
alt CDATA #REQUIRED>
<!ELEMENT a (#PCDATA)>
<!ATTLIST a href CDATA #REQUIRED>
]
>
68
Es fehlt die grafische Aufbereitung!
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
[
...
]
>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Weiterbildung am IFB</h1>
Die Arbeit findet normalerweise in einem der Rechnerräume des IFB statt.
<img src="Rechnerraum.jpg" alt="Rechnerraum"></img>
Untergebracht wird man in dem schönen neuen S-Bau. 
<img src="SGebaeude.jpg" alt="S-Gebäude"></img>
<a href="Weiterbildungskurse.xml">Zurück</a>
</body>
</html>
69
Verarbeitung von XML-Dokumenten
Die Verarbeitung von XML-Daten erfolgt in zwei Stufen, mit einem so
genannten Parser und einer Anwendung.
Die Aufgabe des Parsers ist es, das vorhandene Dokument auf
Wohlgeformtheit und Gültigkeit zu überprüfen und die Daten geeignet
aufzubereiten (d. h. in einer bestimmten Weise intern darzustellen).
Eine Anwendung kann dann über die sog. DOM-Schnittstelle auf diese
interne Darstellung zugreifen und das Dokument in einer bestimmten
Weise verarbeiten (z. B.: erzeugt ein Browser eine grafische
Seitendarstellung). Die Verarbeitung legt demnach erst die Bedeutung
(Semantik) des Dokuments fest.
70
Verarbeitung von XML-Dokumenten
Dokument
Überschrift
<?xml version="1.0"
encoding="ISO-8859-1"?>
Parser
<!DOCTYPE html
[
...
]
>
SyntaxAnalyse
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Weiterbildung am IFB</h1>
...
</html>
Absatz1
OK!
Absatz2
Grafik1
Absatz3
Absatz4
Grafik2
Grafische
Aufbereitung
(Festlegung
der Semantik)
Anwendung
Absatz5
Verweis
71
Syntax und Semantik von myXHTML
<!DOCTYPE html
[
<!ELEMENT html (head, body)>
<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT body (h1 | p)+>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA | img | a)*>
<!ELEMENT img (#PCDATA)>
<!ATTLIST img
src CDATA #REQUIRED
alt CDATA #REQUIRED>
<!ELEMENT a (#PCDATA)>
<!ATTLIST a href CDATA #REQUIRED >
]
>
Syntax – formal beschrieben
Dokument
Kopf
Titel
Rumpf
Überschrift
Absatz
Bild
Verweis
Semantik – informell beschrieben
72
Syntax und Semantik von myXHTML
<!DOCTYPE html
[
<!ELEMENT html (head, body)>
<!ELEMENT head (title)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT body (h1 | p)+>
<!ELEMENT h1 (#PCDATA)>
<!ELEMENT p (#PCDATA | img | a)*>
<!ELEMENT img (#PCDATA)>
<!ATTLIST img
src CDATA #REQUIRED
alt CDATA #REQUIRED >
<!ELEMENT a (#PCDATA)>
<!ATTLIST a href CDATA #REQUIRED >
]
>
Syntax – formal beschrieben
Die Semantik von myXHTML könnte man
wie folgt präzise beschreiben:
Man entwickelt einen „Referenz-Browser“,
der genau festlegt, was die einzelnen XMLElemente bewirken sollen.
Z. B. könnte dieser Referenz-Browser mit
Hilfe seines Verhaltens festlegen, was
geschehen soll, wenn kein Bild unter der
angegebenen Quelle gefunden wird.
Semantik – präzise festgelegt

Darstellung von Information

Transcript Darstellung von Information

Directory