Informationsdarstellung im Internet Klaus Becker 2008.

  • Published on
    05-Apr-2015

  • View
    106

  • Download
    3

Transcript

<ul><li> Folie 1 </li> <li> Informationsdarstellung im Internet Klaus Becker 2008 </li> <li> Folie 2 </li> <li> 2 Darstellung von Information Endlich fngt der neue Weiterbildungskurs Informatik an. Der neue Weiterbildungskurs Informatik fngt an. Information Reprsentieren Darstellen Interpretieren Deuten... Der neue Weiterbildungskurs Informatik fngt an. :-)... Verarbeiten und bertragen Daten </li> <li> Folie 3 </li> <li> 3 Teil 1 WWW Informationssystem im Internet </li> <li> Folie 4 </li> <li> 4 Aufgabe Auf den folgenden Internetseiten finden Sie Informationen zum Schulfach Informatik in Rheinland-Pfalz. Schauen Sie sich kurz auf diesen Seiten um und klren 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 </li> <li> Folie 5 </li> <li> 5 Internet Das Internet ist ein weltweites Netzwerk einzelner voneinander unabhngiger Computer, die ber ein System von Datenverbindungen miteinander gekoppelt sind. Es dient der elektronischen Kommunikation und dem Austausch von Informationen. (Wikipedia) www.cybergeography.org </li> <li> Folie 6 </li> <li> 6 WWW Umgangssprachlich wird hufig die Bezeichnung World Wide Web als Synonym fr 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: Abkrzung fr World Wide Web, ein mchtiges Informationssystem auf Hypertext-Basis im Internet. (Duden Informatik) </li> <li> Folie 7 </li> <li> 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 verknpft sind. Ein solches System vernetzter Dokumente nennt man Hypermedia-System. </li> <li> Folie 8 </li> <li> 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 ermglicht die Navigation innerhalb des Hypermedia-Systems und bereitet die Wiedergabe des Dokuments fr den Benutzer auf. </li> <li> Folie 9 </li> <li> 9 Browser http://www.informatik-lehren.de/umsetzung/index.html http://informatik.bildung-rp.de/extern/service/lehrplaene.html Die Dokumente eines Hypermedia-Systems knnen auf verschiedenen Rechnern, die ber die gesamte Welt verteilt sind, gespeichert sein. Damit die Dokumente aufgefunden werden knnen, mssen sie ber Angaben wie Rechnername, Dokumentenname etc. identifizierbar sein. </li> <li> Folie 10 </li> <li> 10 URL Uniform Resource Locator 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 Ein Dokument wird im WWW mit Hilfe einer sog. URL eindeutig beschrieben. </li> <li> Folie 11 </li> <li> 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 </li> <li> Folie 12 </li> <li> 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 erffnet 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. Browser (Client) WWW-Server (Server) Fordert ein Dokument an Liefert das Dokument aus www.informatik-lehren.de umsetzung/ index.html http </li> <li> Folie 13 </li> <li> 13 Teil 2 Strukturbeschreibung mit HTML </li> <li> Folie 14 </li> <li> 14 Informationsdarstellung mit HTML... AG Informatik Rheinland-Pfalz... 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 </li> <li> Folie 15 </li> <li> 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. </li> <li> Folie 16 </li> <li> 16 Aufgabe Versuchen Sie, die Bedeutung mglichst vieler Bestandteile des gezeigten Quelltextes herauszufinden. Markieren und kommentieren Sie im Quelltext die Teile, die sie auf der Webseite wiederfinden. </li> <li> Folie 17 </li> <li> 17 Strukturbeschreib. mit Auszeichnungen Hallo, ich heie Bailey! HTML steht fr 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. berschriftAuszeichnung </li> <li> Folie 18 </li> <li> 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 </li> <li> Folie 19 </li> <li> 19 Elementstruktur Grundbausteine von HTML- Dokumenten sind die HTML- Elemente. Webseiten werden nach dem Baukastenprinzip aus HTML-Elementen zusammengesetzt. </li> <li> Folie 20 </li> <li> 20 Steckbrief von Bailey Steckbrief Ich heie Bailey. Ich lebe in der Nhe von Kaiserslautern. Ich interessiere mich fr Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf ber eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Elementstruktur Ein (HTML-)Element besteht aus einem ffnenden Tag, einem Inhalt und einem schlieenden Tag. </li> <li> Folie 21 </li> <li> 21 Elementstruktur Die Elementstruktur kann mit Hilfe eines Baumes verdeutlicht werden. </li> <li> Folie 22 </li> <li> 22 bungen siehe www.inf-schule.de </li> <li> Folie 23 </li> <li> 23 Teil 3 Validierung von Webseiten </li> <li> Folie 24 </li> <li> 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 merkwrdig aus. Knnen Sie ihn dennoch lesen und verstehen? Soll man Texte so schreiben - man versteht sie doch? Was spricht dagegen? </li> <li> Folie 25 </li> <li> 25 Fehlerhafte Dokumente Grundrechte Artikel 3 Alle Menschen sind vor dem Gesetz gleich. Mnner und Frauen sind gleichberechtigt. Der Staat frdert die tatschliche Durchsetzung der Gleichberechtigung von Frauen und Mnnern und wirkt auf die Beseitigung bestehender Nachteile hin. Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religisen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. Der folgende HTML-Text enthlt 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? </li> <li> Folie 26 Steckbrief von Bailey Steckbrief Ich "&gt; Steckbrief von Bailey Steckbrief Ich heie Bailey. Ich lebe in der Nhe von Kaiserslautern. Ich interessiere mich fr Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf ber eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. http://www.validome.org"&gt; Steckbrief von Bailey Steckbrief Ich " title="26 Validierung Steckbrief von Bailey Steckbrief Ich "&gt; </li><li> 26 Validierung Steckbrief von Bailey Steckbrief Ich heie Bailey. Ich lebe in der Nhe von Kaiserslautern. Ich interessiere mich fr Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf ber eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. http://www.validome.org </li> <li> Folie 27 Steckbrief von Bailey... Dokumenttypd"&gt; Steckbrief von Bailey... Dokumenttypdefinition Ein HTML-Dokument nennt man valide bzw. gltig bzgl. einer Dokumenttypdefinition, wenn es alle Grammatikregeln befolgt, die in der Dokumenttypdefinition festgelegt sind. Validierung eines Dokumentes bedeutet zu berprfen, ob das Dokument valide bzgl. der angegebenen Dokumenttypdefinition ist. Dokumenttypdefinition: legt die Regeln fest, die bei der Erstellung von HTML-Dokumenten beachtet werden mssen"&gt; Steckbrief von Bailey... Dokumenttypd" title="27 Validierung Steckbrief von Bailey... Dokumenttypd"&gt; </li><li> 27 Validierung Steckbrief von Bailey... Dokumenttypdefinition Ein HTML-Dokument nennt man valide bzw. gltig bzgl. einer Dokumenttypdefinition, wenn es alle Grammatikregeln befolgt, die in der Dokumenttypdefinition festgelegt sind. Validierung eines Dokumentes bedeutet zu berprfen, ob das Dokument valide bzgl. der angegebenen Dokumenttypdefinition ist. Dokumenttypdefinition: legt die Regeln fest, die bei der Erstellung von HTML-Dokumenten beachtet werden mssen </li> <li> Folie 28 </li> <li> 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 knnen 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). </li> <li> Folie 29 </li> <li> 29 Teil 4 Formatierung mit CSS </li> <li> Folie 30 </li> <li> 30 Layout gestalten Bisher haben wir uns berhaupt nicht um die Formatierung der erstellten Webseiten gekmmert, sondern alles dem Browser berlassen. Oft mchte man auch das Layout einer Webseite selbst gestalten, z. B. die Hintergrundfarbe selbst festlegen. </li> <li> Folie 31 Steckbrief von Bailey Steckbrief Ich hei"&gt; Steckbrief von Bailey Steckbrief Ich heie Bailey. Ich lebe in der Nhe von Kaiserslautern. Ich interessiere mich fr Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf ber eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Versuchen sie herauszufinden, was die Stilangaben (siehe nchste Seite) bewirken. Verndern sie hierzu gezielt Angaben und beobachten sie, wie sich das Aussehen der Webseite ndert. ohne Stilangaben"&gt; Steckbrief von Bailey Steckbrief Ich hei" title="31 Aufgabe Steckbrief von Bailey Steckbrief Ich hei"&gt; </li><li> 31 Aufgabe Steckbrief von Bailey Steckbrief Ich heie Bailey. Ich lebe in der Nhe von Kaiserslautern. Ich interessiere mich fr Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf ber eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Versuchen sie herauszufinden, was die Stilangaben (siehe nchste Seite) bewirken. Verndern sie hierzu gezielt Angaben und beobachten sie, wie sich das Aussehen der Webseite ndert. ohne Stilangaben </li> <li> Folie 32 </li> <li> 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 </li> <li> Folie 33 </li> <li> 33 CSS CSS steht fr 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 AttributAttributwert </li> <li> Folie 34 </li> <li> 34 Aufgabe Schauen sie sich die Ausfhrungen auf www.inf-schule.de - 1.4.2 an und formatieren Sie ihren Steckbrief nach ihren Vorstellungen. </li> <li> Folie 35 </li> <li> 35 Aufgabe siehe www.inf-schule.de - 1.4.3 </li> <li> Folie 36 </li> <li> 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 beitrgt. 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%; }... </li> <li> 60 Dokumententypdefinition ] &gt; 11.678 C OOP mit Delphi... </li> <li> Folie 61 </li> <li> 61 Gltigkeit 11.678 C OOP mit Delphi 11.-13.10.2004 Speyer... In einem gltigen bzw. validen (valid) XML-Dokument werden neben den Regeln zur Erstellung wohlgeformter XML-Dokumente auch die Regeln der Dokumententypdefinition beachtet. </li> <li> Folie 62 </li> <li> 62 Validierung 11.678 C OOP mit Delphi 11.-13.10.2004 Speyer... http://www.validome.org/xml/validate/ </li> <li> Folie 63 </li> <li> 63 ] &gt; 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. </li> <li> Folie 64 </li> <li> 64 ] &gt; Syntaxregeln Operationen zur Beschreibung der Syntax:,Sequenz |Alternative ?Optionales Element *beliebig oft (auch gar nicht) +mindestens einmal </li> <li> Folie 65 </li> <li> 65 Aufgabe Ziel ist es, eine vereinfachte Version von HTML mit Hilfe von XML festzulegen. Folgendes HTML-Dokument soll dabei als gltig validiert werden. Test Weiterbildung am IFB Die Arbeit findet normalerweise in einem der Rechnerrume des IFB statt. Untergebracht wird man in dem...</li></ul>