Teil 4 Formatierung mit CSS
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.
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> <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> ohne Stilangaben
Aufgabe mit Stilangaben 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 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
Aufgabe Schauen sie sich die Ausführungen auf www.inf-schule.de - 1.4.2 an und formatieren Sie ihren Steckbrief nach ihren Vorstellungen.
Aufgabe siehe www.inf-schule.de - 1.4.3
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> <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> 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%; ... Formatierung Strukturierung
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 Deutung eines Betrachters Der HTML-Quelltext sollte gut lesbar und damit wartbar sein. ... Grafische Aufbereitung durch den Browser 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)
... 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
Teil 5 Barrierefreiheit
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?
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?
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 ...
Teil 6 Rechtliches
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.
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.
Aufgabe Informieren Sie sich auf den Seiten http://remus-schule.jura.uni-saarland.de/mambo/index.php über Rechtsprobleme im Zusammenhang mit dem Internet.
Teil 7 Persönliches
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