Informationsdarstellung im Internet Klaus Becker 2015.

Slides:



Advertisements
Ähnliche Präsentationen
HS-Projekt Friedrich Junge-Schule, Kl. 9c, 2011 Wie funktionieren Internet-Server? Web-Server auf eigener Domain und Game-Server für Internet-Spiele Teilnehmer:
Advertisements

Informationsdarstellung im Internet
WWW World Wide Web.
HTML - Einführung Richard Göbel.
HTML - Eine erste Annäherung
Teil 4 Formatierung mit CSS.
FH-Hof HTML - Einführung Richard Göbel. FH-Hof Komponenten des World Wide Webs WWW Browser HyperText Transfer Protocol (HTTP) via Internet WWW Server.
Eine Produktion von der Firma Presentations GmbH
Unterwegs im Internet.
HTML (I) am Cern in Genf von Sir Tim Berners-Lee entwickelt
Informationsdarstellung im Internet
Wird ganz am Anfang der HTML-Datei geschrieben Doctype html public bedeutet, dass man sich auf die Öffentlichkeit der html-dtd bezieht Html ist die meist.
Web-Publishing: HTML im Rahmen des PS aus Elektronischer Datenverarbeitung (Rechnerpraktikum)
Das Internet Inhalt: Geschichte Netzschema
HTML Hypertext Markup Language
Das World Wide Web Stephan Becker TIT05BGR SS06. Das World Wide Web Übersicht Hypertext & Hypermedia HTML Dokumentenidentifikation Dokumententransport.
Internet - Grundbegriffe Unterlagen zum Kurs "Wie erstelle ich eine Homepage?"
Das Internet Ein Netzwerk, das viele Rechner miteinander verbindet
Pool Informatik, Sj 11/12 GZG FN W.Seyboldt 1 Pool Informatik 5 GZG FN Sj. 11/12 Kopieren, Daten, Programme.
WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto.
Durbusch.de Inhalte ändern. Allgemeines Die Inhalte der Homepage treten in verschiedenen Formaten auf. Die Startseite besteht im wesentlichen aus dem.
Bewerbungs- eingang Bewerbungs- bearbeitung Stellenangebote VermittlungKommunikationZusatzleistungen.
RSS-Feed: Unser neuer Nachrichtendienst im Netz Dr. Ilona Rohde
Internet-Schnupperkurs Vorlage zur Durchführung eines ca. zwei-Stündigen Einstiegskurses in das Internet. Erstellt vom Zentrum für Allgemeine Wissenschaftliche.
IIS The microsoft way. © Windows NT Option pack optionale Server Komponenten IIS (Internet Information Server) Webserver von Microsoft.
Handy an der Schule Mit Handy sind auch andere elektronische Wiedergabe- und Aufnahmegeräte gemeint.
Webseite programmieren Informatikpräsentation. Inhaltsverzeichniss Webseite Uniform Resource Locators Website Unterschied Webseite + Website Geschichte.
Webseiten – HTML Gliederung 1.Einführung in HTML 2.Aufbau einer einfachen Webseite.
Zehn Schritte zu Linux Der Weg in eine andere Welt...
Hören und Sprechen II Klasse:09. Hörübung Ein chinesischer Student schickt ein Päckchen nach China  H ö ren Sie den Dialog einmal und f ü llen.
Was ist ein HTML-Dokument? - Ein WWW-Dokument, das mit anderen Dokumenten verknüpft ist. - Es kann beinhalten: Text, Bilder, Geräusche, Videos, Animationen,
Mit dem Computer kann man ganz toll präsentieren
Urheberrecht und Hochschule.
Aktionswoche Neue Medien
IB Prüfungen für Deutsch B High Level
„ Die Wohnungsunternehmen als Partner der Städte und Gemeinden “
Die Trainingsraum-Methode an der Realschule „Am Heimbach“
Gruppen Finden Sie sich zurecht Die ersten Schritte in Ihrer Gruppe
Wie barrierefrei ist meine Website?
Projekt: Freie Tauchausbildungsunterlagen
Wie erkenne ich Fake-News im Internet?
Lehrlingswettbewerb 2016 Zürich
SOZIALE NETZWERKE.
Hinweis zu dieser Vorlage:
Hinweis zu dieser Vorlage:
Unterwegs im Internet.
Mein Digitales Ich Wer ist mein digitales ich?
Versuchsbeschreibung in
Herzlich Willkommen Präsentation für das Angebot «einfache Verlinkung»
Eine Produktion von der Firma Presentations GmbH
Anpassen von Microsoft SharePoint Onlinewebsite
“<Titel>” Prozessbeschreibung
Windows für Anfänger Lehnen Sie sich zurück, die Folien wechseln sich automatisch.
Hinweis zu dieser Vorlage:
Lesen Sie alles darüber Microsoft SharePoint-News
Lesen Sie alles zu Microsoft SharePoint-News
Abendrealschule der Stadt Rheine
Dokumentation TOBA Homepage
Interaktives Präsentieren
Titel: Quelle: Übungsart: Titel: Quelle: Uhr Die Uhr lesen lernen
Diplomarbeit Thema Foto erwünscht Bearbeiter: Vorname Nachname
DSD – Schriftliche Kommunikation
Der 30-Sekunden Elevator Pitch
9. Vererbung und Polymorphie
Lernmodul Einführung Nutzen Sie diese Powerpoint-Präsentation beim Selbstlernen oder in Veranstaltungen zur Einführung in das jeweilige Thema. Nutzungsbedingungen:
CompuTreff: Wallisellen
Von Wietlisbach, Lenzin und Winter
? Warum eigentlich Reli ???.
Mein Verhalten im Netz Wie verhalte ich mich online richtig?
Folientitel SmartArt Diagramme Tabellen Bilder und Grafiken
 Präsentation transkript:

Informationsdarstellung im Internet Klaus Becker 2015

2 Informationsdarstellung im Internet

3 Teil 1 Das Internet und seine Dienste

4 Themen für den Informatikunterricht Wie ist das Internet aufgebaut? Wie funktioniert der Datenaustausch im Internet? Wie funktioniert , WWW, …? Wie findet man Information im WWW? Wie nutzt man Suchmaschinen (wie z.B. Google)? Wie erstellt Google das Ranking der Suchergebnisse? Was sind Webseiten aufgebaut? Wie kann man sie selbst erstellen? Was muss man alles beachten, wenn man Webseiten veröffentlicht? … Das Thema „Internet“ ist eine sehr reichhaltige Quelle für Themen, die im Informatikunterricht behandelt werden können/sollen.

5 Das Internet Das Internet ist ein weltweiter Verbund von Rechnern (besser: Rechnernetzwerken), die alle miteinander verbunden sind. Es dient der elektronischen Kommunikation und dem Austausch von Daten. (Wikipedia)

6 Dienste des Internets Im Internet werden verschiedene Dienste (von Anwendungen, die zwischen Rechnern ablaufen) angeboten: WWW, , Chat, VoIP, Online-Spiele, Videokonferenz,...

7 WWW – World Wide Web Das World Wide Web (kurz WWW oder Web) ist ein Informationssystem im Internet, bei dem Information auf Webseiten - die auf vielen Rechner verteilt gespeichert sind - bereitgestellt wird. Hostname: Hostname:

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

9 Web-Client / Web-Server Webseiten werden von einem Web-Client (Browser) angefordert und anschließend - in Form von HTML-Dokumenten- von einem Web-Server ausgeliefert. Hostname: Hostname: Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Web-Server: Programm, das Webseiten verwaltet und ausliefert...

10 URL – Uniform Resource Locator Eine URL beschreibt, wo sich ein Dokument im Internet befindet. Hostname: Hostname: Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Web-Server: Programm, das Webseiten verwaltet und ausliefert... http Protokoll Rechnername bzw. Hostname /tivi/sicherheit/rubrik/01002/ index.html Verzeichnis und Datei...

11 Hostname / IP-Adresse Zur Identifikation von Rechnern im Internet werden sie mit einem merkbaren Namen (Hostname) und einer maschinenlesbaren Adresse (IP-Adresse) versehen. Hostname: Hostname: Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Web-Server: Programm, das Webseiten verwaltet und ausliefert... IP-Adresse:

12 Themen für den Informatikunterricht Wie ist das Internet aufgebaut? Wie funktioniert der Datenaustausch im Internet? Wie funktioniert , WWW, …? Wie findet man Information im WWW? Wie nutzt man Suchmaschinen (wie z.B. Google)? Wie erstellt Google das Ranking der Suchergebnisse? Was sind Webseiten aufgebaut? Wie kann man sie selbst erstellen? Was muss man alles beachten, wenn man Webseiten veröffentlicht? … Man kann nicht alle Aspekte des Internets gleichzeitig im Unterricht thematisieren. Man muss irgendwo anfangen und dann nach und nach weitere Themen angehen.

13 Teil 2 Strukturbeschreibung mit HTML

14 Blick hinter die Kulissen Mit [Quelltext anzeigen] kann man einen ersten Blick hinter die Kulissen von Webseiten gewinnen. Aber Achtung: Bei den meisten Webseiten versteht man das nur als Experte.

15 Blick hinter die Kulissen Für den Unterricht hat es sich bewährt, didaktisch reduzierte Webseiten als Ausgangspunkt zu wählen: siehe inf-schule

16 Ein Blick hinter die Kulissen Aufgabe: Versuche, die Bedeutung möglichst vieler Bestandteile des oben gezeigten Quelltextes herauszufinden.

17 Grundidee Hallo, ich heiße Bailey! Auszeichnung Überschrift: "Hallo, ich heiße Bailey" Absatz: - Bild Absatz: - "Hallo, ich heiße..." - Verweis: "Kaiserslautern" - ". Ich bin ein..." Absatz: - "Wenn ich erwachsen..." - Verweis: "Wikipedia" - "an. Ihr werdet..." Absatz: - "Ich kann aber..." - Verweis: "nächste Seite" - " sehen" Überschrift Hypertext StrukturBeschreibung

18 Exkurs - HTML Aufgabe: Ziel ist es, eine einfache Webseite selbst zu erstellen. Auf dieser Webseite soll ein Steckbrief von dir dargestellt werden. Der Steckbrief soll mindestens folgende Informationen enthalten: - Name, Vorname - Foto, auf dem du (halbwegs) zu erkennen bist - Verweis auf Ihre Schule - Umfang an Informatikkenntnissen - Erfahrungen mit Informatikunterricht... weitere Informationen wie z.B. Verweis auf den Wohnort, Interessen,... Teste dabei möglichst viele HTML-Elemente. Informiere dich im Abschnitt "Exkurs - HTML" (I: ) über HTML-Elemente und ihre Bedeutung. Weitere Details findet man in Nachschlagewerken wie SELFHTML ( oder w3schools (

19 Fachkonzept - HTML Hallo, ich heiße Bailey! HTML steht für hypertext markup language. HTML ist eine formale Sprache zur Beschreibung der Struktur von Hypertexten (in Form verlinkter Webseiten) mit Hilfe von Auszeichnungen. Auszeichnung Überschrift: "Hallo, ich heiße Bailey" Absatz: - Bild Absatz: - "Hallo, ich heiße..." - Verweis: "Kaiserslautern" - ". Ich bin ein..." Absatz: - "Wenn ich erwachsen..." - Verweis: "Wikipedia" - "an. Ihr werdet..." Absatz: - "Ich kann aber..." - Verweis: "nächste Seite" - " sehen" Überschrift Hypertext StrukturBeschreibung

20 Struktur einer Webseite Webseiten werden genau wie normale Texte gegliedert, um Information möglichst übersichtlich darzustellen. Die Abbildung verdeutlicht die Struktur der gezeigten Webseite. Überschrift: "Steckbrief" Absatz: - Bild Absatz: - "Ich heiße " - Hervorhebung: "Bailey" - ". Ich lebe..." Liste: - Listenpunkt: - Hervorhebung: "Sprung"; " durch einen..." - Listenpunkt: - Hervorhebung: "Lauf"; " über eine..." - Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen..." Absatz: - "Ich gehe..." - Verweis: "Welpenschule" - ". " Absatz: - "Ich interessiere..." - Hervorhebung: "Agility-Sport" - ". Meine..."

21 HTML-Elemente HTML stellt zur Strukturbeschreibung die sog. HTML-Elemente als Bausteine zur Verfügung. Überschrift: "Steckbrief" Absatz: - Bild Absatz: - "Ich heiße " - Hervorhebung: "Bailey" - ". Ich lebe..." Liste: - Listenpunkt: - Hervorhebung: "Sprung"; " durch einen..." - Listenpunkt: - Hervorhebung: "Lauf"; " über eine..." - Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen..." Absatz: - "Ich gehe..." - Verweis: "Welpenschule" - ". " Absatz: - "Ich interessiere..." - Hervorhebung: "Agility-Sport" - ". Meine..." html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief

22 HTML-Elementebaum Die Anordnung der HTML-Elemente kann man mit einem Baumdiagramm verdeutlichen. html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief HTML-Elementebaum

23 HTML-Elemente im Quelltext Darstellung von HTML-Elementen: öffnendes Tag - Inhalt - schließendes Tag html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief -Element: Steckbrief HTML-Element öffnendes Tag schließen- des Tag Inhalt

24 HTML-Quelltext html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief Steckbrief von Bailey Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. HTML-Quelltext

25 Inhalte von HTML-Elementen html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief Steckbrief von Bailey Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. kein Inhalt Text als Inhalt Text / Elemente als Inhalt Elemente als Inhalt

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

27 Teil 3 Validierung von Webseiten

28 Fehler im HTML-Quelltext Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Wie reagiert der Browser, wenn der HTML-Quelltext Fehler enthält?

29 Fehler im HTML-Quelltext Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Beobachtung: erstaunlich gelassen

30 Fehlr und ihre Auswirkungen Aufgabe 1 Teste, wie sich Fehler im Quelltext bei der Darstellung in (verschiedenen) Browsern auswirken. 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. Aufgabe 2 Der folgende Text sieht auf den ersten Blick etwas merkwürdig aus. Obwohl es hier von Fehlern nur so wimmelt, kann man ihn - zumindest in Teilen - dennoch verstehen, oder? Aufgabe 3 Welche Schlüsse ziehst du aus den Experimenten? (a) Soll man Texte so schreiben wie oben gezeigt - man versteht sie doch? Was spricht dagegen? (b) Soll man HTML-Quelltexte salopp (evtl. mit Fehlern) schreiben - der Browser versteht sie doch? Was spricht dagegen?

31 Fehlertoleranz Browser sind erstaunlich fehlertolerant. Sie versuchen stets, den Quelltext in irgendeiner Weise sinnvoll darzustellen, auch wenn der Quelltext Fehler enthält. Das liegt an der algorithmischen Verarbeitung des Quelltextes im Browser. Der Algorithmus zur Verarbeitung des Quelltextes versucht, Unstimmigkeiten zu ignorieren und trotzdem eine sinnvolle Seite zu generieren. Bei der Konstruktion von Browsern wird also versucht, intelligent auf Fehler zu reagieren. Warum also so akribisch die Regeln befolgen, wenn der Browser die Fehler doch so gut ausbügeln kann? Wenn der Quelltext Fehler enthält, weiß man eigentlich nicht so genau, wie Browser damit umgehen und wie sie die Webseite schließlich anzeigen. Es gibt inzwischen eine große Anzahl von Browsern und es werden ständig neue entwickelt. Wenn man will, dass eine neu erstellte Webseite von allen Browsern richtig angezeigt wird, dann muss man sie entweder alle durchtesten (das macht sehr viel Arbeit!), oder man verstößt gegen keine der Regeln der Sprache HTML (ganz einfach, oder?).

Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. 32 Fehlersuche Fehlersuche ist ein schwieriges und aufwendiges Geschäft - insbesondere, wenn der zu untersuchende Quelltext lang und kompliziert ist. Fehlersuche lässt sich (zum Glück) automatisieren. Aufgabe: Suche alle Fehler im HTML-Quelltext.

33 Fehlersuche mit einem Validierer Quelltext eingeben oder per File-Upload hochladen, dann mit dem [Validate]-Button eine Überprüfung des Quelltextes initiieren

34 Fehlersuche mit einem Validierer Aufgabe 1: Probiere das selbst aus. Versuche, alle Fehler nach und nach zu korrigieren. Kontrolliere jeweils mit dem Validierer. Ziel ist es, eine solche Rückmeldung zu erhalten. Aufgabe 2: Validiere auch deinen eigenen Steckbrief. Auch dieser sollte fehlerfrei gestaltet werden.

35 HTML-Versionen Es gibt eine ganze Reihe verschiedener HTML-Versionen. Bei der Fehleranalyse muss genau angegeben werden, um welche HTML-Version es sich handelt. Zudem muss man den richtigen Validator auswählen. Die verwendete HTML-Version erkennt man an der doctype-Angabe. Aufgabe: Validiere selbst die oben gezeigten HTML-Dokumente mit den passenden Validierern. Probiere auch aus, wenn man die Validierer vertauscht (z.B. ein HTML5-Dokument mit einem XHTMl-Validierer überprüft). Steckbrief von Bailey Steckbrief … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Steckbrief von Bailey Steckbrief … HTML5 XHTML 1.1 Validierer: Validierer:

36 Fachkonzept - Validierung Steckbrief von Bailey Steckbrief … Dokumenttypdefinition Ein HTML-Dokument nennt man valide, wenn es alle Regeln der Sprache HTML befolgt, die in der durch die Dokumententyp-Deklaration beschriebenen HTML-Version festgelegt sind. Eine Dokumententyp- Deklaration in einem HTML-Quelltext teilt also mit, um welche Art von HTML es sich handeln soll. Eine solche Deklaration liefert dann auch die Grundlage für eine Überprüfung, ob das Dokument valide ist.

37 Teil 4 Formatierung mit CSS

38 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.

39 Aufgabe Steckbrief von Bailey Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen Ich gehe jedes Wochenende zur Welpenschule. Versuche herauszufinden, was die Stilangaben (siehe nächste Seite) bewirken. Verändere hierzu gezielt Angaben und beobachte, wie sich das Aussehen der Webseite ändert.

40 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 StilangabenohneStilangaben

41 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 AttributAttributwert

42 Trennung Strukturierung - Formatierung html head title Steckbrief von Bailey body h1 p img p Ich heiße em Bailey ul li. Ich lebe... p Ich int... em Agilit.... Meine... em Sprung durch... li em Lauf über... li em Slalo... zwischen... p Ich gehe... a Welpenschule. Steckbrief Struktur...  Formatierung

43 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%; }... <!DOCTYPE html PUBLIC... Steckbrief von Bailey Steckbrief Ich heiße Bailey. Ich lebe in der Nähe von Kaiserslautern. Ich interessiere mich für Agility-Sport. Meine Lieblingsdisziplinen sind: Sprung durch einen Reifen Lauf über eine Wippe Slalomlauf zwischen Stangen... Strukturierung Formatierung

44 Aufgabe Schauen sie sich die Ausführungen auf an und formatieren Sie ihren Steckbrief nach ihren Vorstellungen.

45 Teil 5 Komplex „Informatik und Gesellschaft“

46 Informatik und Gesellschaft Beim Themakomplex „Informationsdarstellung im Internet“ ergeben sich zahlreiche Anknüpfungspunkte, um Fragen zu thematisieren, die über die reine Informatik hinausgehen und den Einzelnen und die Gesellschaft betreffen. Beispiele: Was darf man auf Webseiten / im Internet veröffentlichen? Welche rechtlichen Vorgaben muss man beachten? Welche Auswirkungen kann es haben, wenn man persönliche Daten im Internet preisgibt? Wie sollten Webseiten gestaltet werden, damit die dargestellte Information von allen Nutzern ohne Probleme erfasst werden kann? …

47 Wahrnehmung von Webseiten 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? Experimente mit einem textbasierten Browser Experimente mit einem Screenreader

48 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.

49 Rechtliche Aspekte 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 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.

50 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.

51 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: 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: 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:

52 Verhaltensregeln Es gibt zahlreiche Veröffentlichung im Internet, die den Umgang mit persönlichen Daten im Internet thematisieren. Beispiel:

53 Teil 6 Exkurs: Web-Client/Web-Server

54 Aufruf von Webseiten Bisher haben wir Webseiten lokal gespeichert und im Browser als Dateien geöffnet. Ziel ist es jetzt, Webseiten von einem Web-Server „abzurufen“ (und auf einen Webserver „hochzuladen“). file:///.../steckbriefe/index.html als Datei öffnen vom Server anfordern

55 Web-Client / Web-Server Webseiten werden von einem Web-Client (Browser) angefordert und anschließend - in Form von HTML-Dokumenten- von einem Web-Server ausgeliefert. Hostname: C20... Hostname: Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Web-Server: Programm, das Webseiten verwaltet und ausliefert... IP-Adresse:

56 Web-Server Web-Client: BrowserWeb-Server: Apache IP-Adresse: C: xampp htdocs steckbriefe index.html

57 Experimente mit Filius

58 Ein einfaches Rechnernetz IP-Adresse: Hostname: C20 IP-Adresse: Hostname: C13

59 Installation der Software

60 Start des Web-Servers

61 http-Anfrage im Web-Client

62 Aufgabe (a) Probiere das selbst aus. (b) Installiere auf dem Serverrechner einen Datei-Explorer. Untersuche mit diesem Explorer, wo sich die Dateien zur angezeigten Webseite befinden. (c) Installiere auf dem Serverrechner zusätzlich einen Text-Editor. Schaue dir mit diesem Editor den Quelltext zur Webseite an.

63 Aufgabe Eine selbst erstellte Seite soll jetzt auf einem Serverrechner abgelegt und dann vom Browser aufgerufen werden. Wenn alles richtig gemacht ist, könnte es z.B. so aussehen:

64 Teil 7 Zusammenfassung - Darstellung von Information

65 Darstellung von Information... Information... mit Text, Bildern,... darstellen Texte, Bilder,... deuten Information Steckbrief Ich heiße... computergerecht darstellen automatisiert verarbeiten transportieren Daten

Darstellung von Information... Information... mit Text, Bildern,... darstellen Texte, Bilder,... deuten... Information... Steckbrief Ich heiße... computergerecht darstellen automatisiert verarbeiten binär darstellen Daten

67 Darstellung von Information Informatik- system Daten,... Informationen Repräsentieren Benutzer Interpretieren Benutzer Daten,... Verarbeiten Transportier. Grundannahme (Hubwieser / Broy, LOGIN 1997) Das primäre Ziel des Informatikunterrichts ist es nach unserer Meinung, den Schülern wichtige Fähigkeiten zum Umgang mit Informationen zu vermitteln. Dabei orientieren wir uns am zentralen Paradigma der Informationsverarbeitung.