informationsdarstellung im internet klaus becker 2008
TRANSCRIPT
![Page 1: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/1.jpg)
Informationsdarstellung im Internet
Klaus Becker
2008
![Page 2: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/2.jpg)
2 Darstellung von Information
„Endlich fängt der neue
Weiterbildungskurs Informatik an.“
„Der neue Weiterbildungskurs
Informatik fängt an.“
Information
Repräsentieren Darstellen
Interpretieren Deuten
<html>...<p>Der neue Weiterbildungskurs Informatik fängt an. :-)</p>...</html>
<html>...<p>Der neue Weiterbildungskurs Informatik fängt an. :-)</p>...</html>
Verarbeiten und
Übertragen
Daten
![Page 3: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/3.jpg)
3 Teil 1
WWW – Informationssystem im Internet
![Page 4: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/4.jpg)
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
![Page 5: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/5.jpg)
5 Internet
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)
www.cybergeography.org
![Page 6: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/6.jpg)
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)
![Page 7: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/7.jpg)
7 Hypermedia-System
Verweis / Hyperlink
Hypermedia-
Dokument
Datei
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 Hypermedia-System.
![Page 8: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/8.jpg)
8 Browser
http://www.informatik-lehren.de/umsetzung/index.html
http://informatik.bildung-rp.de/extern/service/lehrplaene.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.
![Page 9: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/9.jpg)
9 Browser
http://www.informatik-lehren.de/umsetzung/index.html
http://informatik.bildung-rp.de/extern/service/lehrplaene.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.
![Page 10: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/10.jpg)
10 URL – Uniform Resource Locator
http://www.informatik-lehren.de/umsetzung/index.html
httpProtokoll – 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
Ein Dokument wird im WWW mit Hilfe einer sog. URL eindeutig beschrieben.
![Page 11: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/11.jpg)
11 Client-Server-Architektur
Browser
(Client)
WWW-Server
(Server)
Fordert ein Dokument an
Liefert das Dokument aus
www.informatik-lehren.de
umsetzung/index.html
http
http://www.informatik-lehren.de/umsetzung/index.html
![Page 12: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/12.jpg)
12 http - hypertext transfer protocol
Die Interaktion zwischen Client und Server erfolgt nach fest vorgegebenen Regeln. Das Hypertext Transfer Protocol legt diese Regeln fest.
Der Browser eröffnet die Verbindung zum WWW-Serverund stellt das erhaltene Dokument dar.
Der WWW-Server wartet auf eine Anfrage, liefert das Dokument (falls vorhanden) aus und beendet die Verbindung.
Browser
(Client)
WWW-Server
(Server)
Fordert ein Dokument an
Liefert das Dokument aus
www.informatik-lehren.de
umsetzung/index.html
http
![Page 13: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/13.jpg)
13 Teil 2
Strukturbeschreibung mit HTML
![Page 14: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/14.jpg)
14 Informationsdarstellung mit HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>...<TITLE>AG Informatik Rheinland-Pfalz</TITLE>...</HEAD></HTML>
„Die AG-Informatik des LMZ Rheinland-Pfalz
stellt folgende Materialien bereit. ...“
„Hier gibt es interessante
Unterrichtsmaterialien“
Darstellung mit der Auszeichnungssprache HTML
Deutung eines Betrachters
Grafische Aufbereitung
durch den Browser
![Page 15: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/15.jpg)
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.
![Page 16: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/16.jpg)
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.
![Page 17: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/17.jpg)
17
Strukturbeschreib. mit Auszeichnungen
<h1>Hallo, ich heiße Bailey!</h1>
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.
Überschrift Auszeichnung
![Page 18: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/18.jpg)
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.htmlsilke_schneider.htmldoris_visser.html
![Page 19: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/19.jpg)
19 Elementstruktur
Grundbausteine von HTML-Dokumenten sind die HTML-Elemente. Webseiten werden nach dem Baukastenprinzip aus HTML-Elementen zusammengesetzt.
![Page 20: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/20.jpg)
20
<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="www.welpenschule-kl.de">Welpenschule</a>. </p> </body></html>
Elementstruktur
Ein (HTML-)Element besteht aus einem öffnenden Tag, einem Inhalt und einem schließenden Tag.
![Page 21: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/21.jpg)
21 Elementstruktur
Die Elementstruktur kann mit Hilfe eines Baumes verdeutlicht werden.
![Page 22: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/22.jpg)
22 Übungen
siehe www.inf-schule.de
![Page 23: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/23.jpg)
23 Teil 3
Validierung von Webseiten
![Page 24: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/24.jpg)
24 Fehlerhafte Dokumente
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. Können Sie ihn dennoch lesen und verstehen?
Soll man Texte so schreiben - man versteht sie doch? Was spricht dagegen?
![Page 25: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/25.jpg)
25 Fehlerhafte Dokumente
<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>
Der folgende HTML-Text enthält eine ganze Reihe von Fehlern. Welche? Kann ihr Browser ihn dennoch sinnvoll anzeigen? Versuch Sie es einmal.
Soll man HTML-Quelltexte so salopp schreiben - der Browser versteht sie doch? Was spricht dagegen?
![Page 26: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/26.jpg)
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> <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> </body></html>
http://www.validome.org
![Page 27: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/27.jpg)
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
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
![Page 28: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/28.jpg)
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).
![Page 29: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/29.jpg)
29 Teil 4
Formatierung mit CSS
![Page 30: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/30.jpg)
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.
![Page 31: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/31.jpg)
31 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
![Page 32: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/32.jpg)
32 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
![Page 33: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/33.jpg)
33 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
![Page 34: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/34.jpg)
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.
![Page 35: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/35.jpg)
35 Aufgabe
siehe www.inf-schule.de - 1.4.3
![Page 36: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/36.jpg)
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.
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
![Page 37: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/37.jpg)
37 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)
![Page 38: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/38.jpg)
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/)
Barrierefreies Webdesign
Trennung von Inhalt, Struktur und Form
Validierung von Dokumenten
![Page 39: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/39.jpg)
39 Teil 5
Barrierefreiheit
![Page 40: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/40.jpg)
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?
![Page 41: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/41.jpg)
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?
![Page 42: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/42.jpg)
42 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.
![Page 43: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/43.jpg)
43 Teil 6
Rechtliches
![Page 44: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/44.jpg)
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 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.
![Page 45: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/45.jpg)
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.
![Page 46: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/46.jpg)
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.
![Page 47: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/47.jpg)
47 Teil 7
Persönliches
![Page 48: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/48.jpg)
48 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
![Page 49: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/49.jpg)
49 Teil 8
Exkurs: XML
![Page 50: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/50.jpg)
50 Zielsetzung
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.
SGML
HTML 2.0
HTML 3.2
HTML 4.0(strict, transitional,
frameset)
XML
XHTML 1.0(strict, transitional, frameset)
XHTML 1.1(strict)
![Page 51: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/51.jpg)
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)...
![Page 52: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/52.jpg)
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
![Page 53: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/53.jpg)
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.
![Page 54: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/54.jpg)
54
Strukturbeschreibung mit Elementen
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.
Grundbausteine eines XML-Dokuments sind die XML-Elemente.
![Page 55: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/55.jpg)
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>
![Page 56: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/56.jpg)
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>
![Page 57: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/57.jpg)
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
...
![Page 58: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/58.jpg)
58 Wohlgeformtheit
<?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>
In einem wohlgeformten (wellformed) XML-Dokument sind alle Elemente korrekt geschachtelt, ist allen Attributen ein Wert zugewiesen, ...D. h.: Alle Regeln zur Erstellung eines syntaktisch korrekten XML-Dokuments sind beachtet.
Internet-Explorer
![Page 59: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/59.jpg)
59 Korrekt oder nicht?
<?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> <!-- Hier fehlt jetzt der 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>
Das XML-Dokument ist zwar wohlgeformt, es hat aber nicht die beabsichtigte Struktur.
Die beabsichtigte Struktur lässt sich mit Hilfe einer Dokumententypdefinition (DTD) festlegen.
![Page 60: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/60.jpg)
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>...
![Page 61: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/61.jpg)
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> <!-- Hier fehlt jetzt der Leiter. --> <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.
![Page 62: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/62.jpg)
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/
![Page 63: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/63.jpg)
63
<!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)*> ]>
Syntaxregeln
Eine Dokumententypdefinition beschreibt die Regeln (Syntax), mit deren Hilfe die Struktur von XML-Dokumenten genau festgelegt wird. Mit diesen Syntaxregeln wird also eine neue Sprache geschaffen.
![Page 64: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/64.jpg)
64
<!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)*> ]>
Syntaxregeln
Operationen zur Beschreibung der Syntax:
, Sequenz
| Alternative
? Optionales Element
* beliebig oft (auch gar nicht)
+ mindestens einmal
![Page 65: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/65.jpg)
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> <p>Die Arbeit findet normalerweise in einem der Rechnerräume des IFB statt.</p> <p><img src="Rechnerraum.jpg" alt="Rechnerraum"></img></p> <p>Untergebracht wird man in dem schönen neuen S-Bau.</p> <p><img src="SGebaeude.jpg" alt="S-Gebäude"></img></p> <p><a href="Weiterbildungskurse.xml">Zurück</a></p> </body></html>
![Page 66: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/66.jpg)
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>
![Page 67: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/67.jpg)
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> ]>
![Page 68: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/68.jpg)
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> <p>Die Arbeit findet normalerweise in einem der Rechnerräume des IFB statt.</p> <p><img src="Rechnerraum.jpg" alt="Rechnerraum"></img></p> <p>Untergebracht wird man in dem schönen neuen S-Bau. </p> <p><img src="SGebaeude.jpg" alt="S-Gebäude"></img></p> <p><a href="Weiterbildungskurse.xml">Zurück</a></p> </body></html>
![Page 69: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/69.jpg)
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.
![Page 70: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/70.jpg)
70
Verarbeitung von XML-Dokumenten
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html [ ... ]>
<html><head><title>Test</title> </head><body><h1>Weiterbildung am IFB</h1>...</html>
Grafische Aufbereitung (Festlegung
der Semantik)
Syntax- Analyse
OK!
Dokument
Überschrift
Absatz1
Absatz2
Absatz3
Absatz5
Grafik1
Verweis
Absatz4
Grafik2
Parser
Anwendung
![Page 71: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/71.jpg)
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 > ]>
DokumentKopfTitelRumpfÜberschriftAbsatzBild
Verweis
Syntax – formal beschrieben Semantik – informell beschrieben
![Page 72: Informationsdarstellung im Internet Klaus Becker 2008](https://reader035.vdocuments.net/reader035/viewer/2022062623/55204d7149795902118c3fb3/html5/thumbnails/72.jpg)
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 > ]>
Die Semantik von myXHTML könnte man wie folgt präzise beschreiben:
Man entwickelt einen „Referenz-Browser“, der genau festlegt, was die einzelnen XML-Elemente 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.
Syntax – formal beschrieben Semantik – präzise festgelegt