Document
Werbung
Einführung in die
Medieninformatik 1
Wintersemester 2007/08
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
1
Plan (vorläufig)
31.10.
7.11.
14.11.
21.11.
28.11.
5.12.
12.12.
19.12.
9.01.
16.01.
23.01.
30.01.
6.02.
7.02.
Einführung
Menschen: Wahrnehmung
Menschen: Wahrnehmung
Medien: Digitalisierung
Medien: Bilder
Medien: Kompression
Verlustbehaftete Kompression (Bilder)
Medien: Audio: Grundlagen und Bearbeitung
Verlustbehaftete Kompression (Audio)
Medien: Texte und Typographie
Web: Grundlagen + Techniken
Menschen und Medien: Interaktion
Zukunft Digitaler Medien, Zusammenfassung und Ausblick
Abschluss-Event (ganztägig!)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
2
Einführung in die Medieninformatik 1
Teil 9: Web
Viele Folien Heinrich Hußmann (München)
Rainer Malaka
Vorlesung
Wintersemester 2007/08
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
3
Hypertext
• Hypertext: Die Präsentation von Information als ein Netz von
verbundenen Knoten, in dem der Leser frei, d.h. in nichtlinearer Reihenfolge navigieren kann.
• Der Begriff hypertext wurde von Ted Nelson geprägt, der es in
seinem selbstverlegten Buch „Literary Machines“ als „nichtsequentielles Schreiben (non-sequential writing)“ bezeichnet.
Sequentiell (linear):
Absatz 1
Absatz 2
Absatz 3
Absatz 4
Nicht- sequentiell (nicht-linear):
Absatz 1
Absatz 2
Absatz 3
Prof. Dr. Rainer Malaka,
Digitale Medien
Absatz 4
Medieninformatik 1
4
Information in Hypertext-Knoten
• In strengem Wortsinn: Textstück, evtl. mit Abbildungen
– Klein genug, um eigenständige Informationseinheit zu bieten
– Meist auf eine Seite des Anzeigegeräts passend
• In erweiterten Definitionen („Hypermedia“):
– Klänge - Beispiel.mp3
– Filmstücke
– Animationen
– ...
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
5
Hypertext-Knoten
• Knoten: Datenstruktur
– erlaubt es, einen in sich geschlossenen Informations-Inhalt abzulegen
– ermöglicht Verbindungen zu weiteren Knoten
• Andere Bezeichnungen für das Konzept des
Hypertext-Knotens:
–
–
–
–
–
frame
work space
card
lexia
web page
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
6
Verbindung in Hypertext
• Verbindung (link): Durchlaufbare Assoziation zwischen zwei
Knoten
• Anker: Sichtbare Region, die mit einem Eingabegerät
ausgewählt werden muss, um die Verbindung zu aktivieren
– In den meisten Systemen dürfen sich Anker nicht überlappen.
• Detaillierungsgrad des Verbindungsziels:
– Einfache Verbindungen: Von Knoten zu Knoten
– Zielgenaue Verbindungen: Auswahl eines bestimmten Teils der Information im
Ziel-Knoten
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
7
Ted Nelson und Xanadu
• Ted Nelson, geboren 1937, Soziologie-Student
mit Nebenfach Informatik
• Ca. 1960, Studienarbeit: Idee für ein
fortgeschrittenes interaktives Textverarbeitungssystem
• 1965: ACM-Jahrestagung, Papier mit dem
Begriff „Hypertext“
Bild: Wikipedia
• 1974: Buch „Dream Machines“ verweist klar auf frühere Visionen von
Vannevar Bush
• Xanadu:
– Benannt nach dem Gedicht „Kublai Khan“ von Coleridge, Palast in der Mongolei
• Coleridge sagt, Gedicht sei unvollständig wegen einer Unterbrechung
• http://literalsystems.org/litsys/audio/Audio-Book/KublaKhan.mp3
– Idee: Magischer Ort von Freiheit und Gedächtnis, nichts wird vergessen
– Xanadu-Software:
• Freigabe-Ankündigungen: 1974 -> 1976, 1987 -> 1988, 1988 -> 1991
• Ab 1992: Firmen XOC und Udanax
• Seit 1999 OpenSource (www.xanadu.com)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
8
Vannevar Bush und Memex
• Vannevar Bush (1890 – 1974)
– Direktor des „Office of Scientific Research and Development“
während des II. Weltkriegs
– Visionär, viele Erfindungen, z.B. analoge Computer
• Memex
– Memex: „a device in which an individual stores all his books,
records, and communications, and which is mechanized so that it
may be consulted with exceeding speed and flexibility"
– Enthält das Konzept einer Verbindung (join) von
Informationseinheiten
”As We May Think” The Atlantic Monthly, July 1945
http://www.theatlantic.com/unbound/flashbks/computer/bushf.htm
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
9
Geschichte von Hypertext
• ca. 1500, Erasmus von Rotterdam: Seitenzahlen für Querverweise in
Büchern
• 1945, Vannevar Bush: Memex
• 1963, Doug Engelbart: NLS / Augment, Baumstruktur von Texten
• 1965, Ted Nelson: Xanadu
• 1975, Akscyn / McCracken (CMU): ZOG, später KMS (Knowledge
Management System)
• 1976-1980, Allan Kay, Adele Goldberg, H.H. Ingalls (Xerox PARC):
Objektorientierte Programmierung mit „Smalltalk“
• 1987, Bill Atkinson (Apple): HyperCard
• 1989, Tim Berners-Lee / Robert Cailleau (CERN): HTML / WWW
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
10
Hypertext-Autorensysteme
• Klassisches Vorbild: HyperCard (1987)
– Viele Nachbildungen, z.B. SuperCard, MetaCard
– Ideen eingegangen in kommerzielle Produkte:
Asymetrix ToolBook, Microsoft PowerPoint
• Grundkonzepte:
– Karteikarten-Metapher
– Autorenmodus und
Anzeigemodus
– Grafischer Editor
– Objektorientierte
Sprache zur
Ereignisbehandlung
(bei HyperCard:
HyperTalk)
– Medienintegration
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
11
Probleme beim Hypertext-Design
• Navigationspfad vs. Ordnung der Knoten
– Was heißt „Zur nächsten Karte“?
– Lösung z.B. in WWW-Browsern: Navigation im dynamischen Zugangspfad
• Orientierung im „Labyrinth“
– Grundlegende Vision von Hypertext nicht für alle Informationsbedürfnisse
angemessen
– Lösungen z.B.
• Suchmaschinen (analog im Buch: Register)
• strenge Baumstruktur (analog im Buch: Inhaltsverzeichnis)
• Navigationsanzeigen (analog im Buch: relative Position)
• Lesezeichen (bookmarks) (analog im Buch: Lesezeichen)
• Informationsbereitstellung für verschiedene Lesergruppen:
– Findet jede(r) alles, was er/sie braucht?
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
12
Interaktivität
• Grundelement aller historischen Hypertext-Visionen
(Memex, Xanadu, HyperCard, WWW):
– Lesemodus und Autorenmodus
• Verändern von Hypertext-Dokumenten sollte ähnlich intuitiv
sein wie das Lesen
• Hypertext-Systeme sollten Rechteverwaltung und
Versionsverwaltung integrieren
• Derzeit im WWW höchstens ansatzweise realisiert:
– Online-Foren, interaktive Linksammlungen
– Beurteilungssysteme im E-Business (z.B. bei Amazon)
– „Wiki“ („Wiki-wiki“, „Wiki-Web“, wiki – Hawaianisch: schnell)
• Aktueller Trend: „Web 2.0“
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
13
Unidirektionale und bidirektionale Verbindungen
• Xanadu-Vision:
– Verbindungen sind bidirektional
– Quell- und Zielobjekt können beliebig bewegt werden, ohne die Verbindung zu verletzen
• Praxis in HyperCard, PowerPoint, WWW etc.:
– Unidirektionale Links
– Viele Links zeigen „ins Leere“
Unidirektional:
Bidirektional:
refs
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
14
Hypertext im World Wide Web
• Verteilter Hypertext
– Knoten können auf verschiedensten Rechnern weltweit liegen
• Gute Integration von Grafik, mäßige Integration anderer Medientypen
• Seitenbeschreibung (HTML) orientiert an linearem Text statt
Objektorientierung
– Technologisch seit ca. 1985 überholt!
• Stark eingeschränkte Interaktivität
– Umständliche Zusätze, z.B. Skriptsprachen
– Kein Autorenmodus für verteilten Zugriff
• Extremer Verbreitungsgrad, extreme Informationsdichte:
– Datenvolumen Anfang 2001 ca. 20 TeraByte (TByte = 1012 Byte)
– 1999 zwei durchschnittliche WWW-Seiten nur 19 Hyperlinks voneinander „entfernt“!
• Kein Gedächtnis (aber Projekte zur Archivierung: wayback.org)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
15
WWW, HTML und HTTP
• Standardisierungsgremien:
– IETF (Internet Engineering Task Force), z.B. HTTP
– W3C (WWW Consortium), z.B. HTML
• Grundprinzip von HTTP:
– Client (Browser) schickt Anfrage (request) über IP-Verbindung an Server
• GET: Liefere Inhalt zu URL
• HEAD: Wie GET, aber ohne echte Lieferung der Daten (nur „Header“)
• POST: Akzeptiere im Rumpf mitgelieferte Daten
• Diverse „Header Codes“ in der Anfrage,
z.B. Browsertyp, Host, Zeichensatz-Encoding, Sprachen, ...
– Server schickt Antwort (response)
• Hauptinhalt: HTML-Code
• Header-Codes auch in der Antwort
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
16
HTML-Request: Beispiel
• The following HTTP request was received from IP address 141.84.8.6 (port
50048) by IP address 195.60.17.253 (port 80):
GET /dumprequest.html HTTP/1.1
Host: djce.org.uk
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; enUS; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8
Accept: text/xml, application/xml,
application/xhtml+xml, text/html;q=0.9,
text/plain;q=0.8, image/png, */*;q=0.5 Accept-Charset:
ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Connection: keep-alive
Keep-Alive: 300
http://djce.org.uk/dumprequest.html
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
17
Auszeichnungssprache (Markup Language)
• Auszeichnungssprache (markup language) für Text
– Text ergänzt um Angaben für die Darstellung
– Verbreitetes Konzept; Beispiele für andere Auszeichnungssprachen:
LaTeX, RTF (Rich Text Format)
• Vergleich LaTeX/HTML
– LaTeX-Beispiel:
\paragraph{\"Uberschrift}
Text text {\it kursiver Text}
\begin{itemize}
\item Punkt in Aufz\"ahlung
\end{itemize}
– HTML-Beispiel:
<P>&Uuml;berschrift<BR>
Text text <I>kursiver Text</I>
<UL>
<LI>Punkt in Aufz&auml;hlung
</UL>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
18
Trennung Inhalt – Darstellung
• Abstraktionsebene der Auszeichnung:
– Entweder: „Fett 14pt“ (Mischung Inhalt-Darstellung)
– Oder: „Überschrift Ebene 1“ (Trennung Inhalt-Darstellung)
(mit separater Festlegung der Darstellung, z.B. Fett 14 pt)
• Vorteile einer starken Trennung Inhalt-Darstellung:
– Leichtere Wartbarkeit (Regeln für die Darstellung einer Auszeichnungsklasse nur einmal
definiert)
– Bessere Plattformunabhängigkeit
• Konkrete optische Umsetzung („Rendering“) weitgehend der darstellenden
Hardware/Software überlassen
– Impliziter Zwang zur stilistischen Einheitlichkeit in der Darstellung
• Nachteile:
– Verlust der Detailkontrolle über die Darstellung
– Verlust von Flexibilität für Sonderfälle
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
19
Hypertext Markup Language HTML
•
Geschichte:
–
–
–
–
–
–
•
1969, Goldfarb, Mosher, Lorie (IBM): „Generic Markup Language“ (GML)
1978, Standardisierung von GML durch ISO als „SGML“
(Standard Generic Markup Language“)
1989, Tim Berners-Lee / Robert Cailleau: HTML
• Starke Einschränkung von SGML (spezieller Dokumententyp)
1993, NCSA Mosaic Browser
1999, Version 4 von HTML
2000, XHTML (HTML 4.01 in XML, siehe später)
Leistungsumfang von HTML:
–
–
–
–
Textattribute für die Darstellung festlegen
Spezielle Textformatierungen (z.B. Tabellen) definieren
Teile der Darstellungsoberfläche für interaktive Benutzereingaben vorsehen
Weitere Dokumente verschiedenster Art an beliebigen Stellen des Web einbinden
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
20
HTML-Syntax
<TAG [ ATTRIBUT = "wert" ]* >
Inhalt [</TAG>]
• Tags:
– Paarweise als Beginn-/Ende-Paar <TAGX> ... </TAGX>
– Einzeln
z.B. <BR>
• Attribute:
– Zulässige Attribute abhängig vom konkreten Tag
• Fast immer zulässig: CLASS, ID, LANG, STYLE
– Attributwerte:
• In vielen Fällen ohne Anführungszeichen angebbar (z.B. Zahlen)
• Stilistisch guter HTML-Code benutzt immer Anführungszeichen
• Zeilenumbrüche, mehrfache Leerzeichen, Tabulatoren i.A. ignoriert
• Kommentare: <!-- ... -->
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
21
Einfaches HTML-Beispiel
<!DOCTYPE HTML PUBLIC "-/W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html41/loose.dtd">
<HTML>
<HEAD>
<TITLE>Einfaches Beispieldokument HTML</TITLE>
</HEAD>
<BODY>
Ein ganz einfacher Beispieltext. <BR>
<FONT FACE="Helvetica">Fontumschaltung Helvetica</FONT> <BR>
<FONT FACE="Times">Fontumschaltung Times</FONT> <BR>
<B>Fett</B> <I>Kursiv</I>
</BODY>
</HTML>
Datei: HTML1.HTML
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
22
Trennung Inhalt-Darstellung in HTML
• Starke Trennung:
– bei Verwendung vordefinierter Textklassen
• z.B. <H1> für Überschriften, <ADDRESS> für Adressen
– bei Verwendung von Cascading Style Sheets (s. später)
• Schwache Trennung:
– Bei expliziter Auszeichnung z.B. mit <FONT>
• Prinzipiell ist in HTML keine
vollständige Kontrolle über
die Darstellung möglich.
– Allerdings eine weitgehende
Kontrolle für StandardPlattformen und –Einstellungen
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
23
Dokumenttyp
• Verschiedene Versionen von HTML
– Angabe benutzter Version mit DOCTYPE
– In heutigen Browsern meist nicht überprüft!
– Derzeit aktuelle Version: HTML 4.01 mit drei Varianten
• Strikt:
– Modernes HTML, nicht mit alten Browsern kompatibel (vor Version 4.x)
– Verwendung von Stylesheets und Style-Attributen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
• Transitional:
– Auch ältere Konstrukte zulässig (z.B. zur Textausrichtung)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• Frameset:
– Spezielle Angabe für Frameset-Dateien (s. später)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
24
Kopfeinträge
• Titel
<title>
... </title>
– Fenstertitel im Browser, Bezeichnung in Bookmarks, Anzeige bei Suchmaschinen
• Meta-Angaben für den Browser und Suchmaschinen:
<meta
<meta
<meta
<meta
<meta
name="author" content="Heinrich Hussmann">
name="description" content="Beispieldatei ...">
name="keywords" content="HTML, HEAD">
name="date" content="2003-04-30">
name="robots" content="noindex"> (Auslesen verbieten)
– oder auch Angaben nach dem sog. "Dublin Core"-Schema (http://dublincore.org):
<meta name="DC.creator" content="Heinrich Hussmann">
• Meta-Angaben für den Web-Server und den Browser:
– Basis-Zeichensatz:
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1">
– Zeitpunkt für das Löschen aus "Proxy-Servern":
<meta http-equiv="expires"
content="Sat, 15 Dec 2001 12:00:00 GMT">
<meta http-equiv="expires" content="43200"> (Zeit in Sekunden)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
25
Sonderzeichen
• Zeichen können auf drei Weisen angegeben werden:
– Direkter Zeichencode (Zeichensatz des Editors)
– Unicode-Angabe, z.B. &#174 (®), &#8364 (€)
– Explizite Namen, z.B. &reg;, &euro;
• Wichtige Namen für deutsche Sonderzeichen:
&auml; &ouml; &uuml;
&Auml; &Ouml; &Uuml;
&szlig;
ä ö ü
Ä Ö Ü
ß
• Sonderzeichen der HTML-Syntax "maskieren":
&lt; &gt; &amp; &quot;
< > & "
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
26
HTML-Editoren
• Software-Produkte zum bequemen Erstellen von HTML-Seiten ohne direkte
Nutzung von HTML:
– z.B. Adobe GoLive, Macromedia DreamWeaver, Microsoft FrontPage
• Vorteile:
– Erlauben direktere Beurteilung des grafischen Effekts
– Ersparen viele Unannehmlichkeiten von HTML
• Nachteile:
– Gefahr der Vernachlässigung des entstehenden HTML-Codes
– "Verunreinigen" manchmal den Code durch Editor-Artefakte
• Empfehlung:
– Nur verwenden, wenn HTML und entstehender Code voll verstanden
– HTML-Code-Ansicht der Werkzeuge benutzen
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
27
Elemente zur Strukturierung des Texts
•
•
•
•
•
Überschriften
<h1>...</h1>
... <h6>...</h6>
Absätze
<p>...</p>
Unnummerierte Listen <ul> <li> list item 1 </li> </ul>
Nummerierte Listen <ol> <li> list item 1 </li> </ol>
Definitionslisten
<dl> <dt>term</dt> <dd>defn</dd>
</dl>
• Zitate
<blockquote> Zitattext </blockquote>
• Adressen
<address> Adreßtext </address>
• Vorformatierter Text <pre> z.B. Programmtext </pre>
– Dicktengleiche (Nicht-Proportional-)Schrift
Umbruch und Leerzeichen wie in der HTML-Datei
• Trennlinie
<hr>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
28
Zeilenumbruch
• Zeilenumbruch erzwingen <br>
• Zeilenumbruch verhindern <nobr>
• "Geschütztes" Leerzeichen
&nbsp;
(non-breaking space)
• Zeilenumbruch im Wort erlauben <wbr>
(work break)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
29
Logische Auszeichnungen im Text
• Inhaltliche Beschreibung der Art des Textstücks
– Konkrete Formatierung separat festgelegt
• Auszeichnungen:
–
–
–
–
–
–
–
Betont
Stark betont
Quelltext
Beispiel
Tastatureingabe
Variable
Zitat
– Definition
– Akronym
– Abkürzung
<em> ...
</em>
<strong> ... </strong>
<code> ...
</code>
<samp> ...
</samp>
<kbd> ...
</kbd>
<var> ...
</var>
<cite> ...
</cite>
<q cite="quelle"> ... </q>
<defn> ...
</defn>
<acronym> ...
</acronym>
<abbr> ...
</abbr>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
30
Physische Auszeichnungen im Text
• Beschreibung der konkreten Formatierung des Textstücks
• Auszeichnungen:
–
–
–
–
–
–
–
–
–
Fett
Kursiv
Schreibmaschine
Unterstrichen
Durchgestrichen
Größer
Kleiner
Hochgestellt
Tiefgestellt
<b> ...
<i> ...
<tt> ...
<u> ...
<s> ...
<big> ...
<small> ...
<sup> ...
<sub> ...
</b>
</i>
</tt>
</u>
</s>
</big>
</small>
</sup>
</sub>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
31
Verweise (Links)
• Klassischer Hypertext-Verweis
– Markierter Anker im Text
– Referenz auf andere HTML-Datei
• Syntax:
<a href=" ...Ziel..."> Text </a>
• Beschreibung des Ziels
– Vollständige URI (s. nächste Folie)
– Absolute Adressierung auf gleichem Rechner
<a href="/users/hussmann/xyz.html">
– Relative Adressierung auf gleichem Rechner
<a href="../xyz.html">
– Adressierung spezieller Stellen in der Zielseite (s. übernächste Folie)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
32
Uniform Resource Identifier (URI)
• Offiziell: Oberbegriff von Uniform Resource Locator (URL) und
Uniform Resource Name (URN)
• In der Praxis:
– URN kaum benutzt
(obwohl hilfreiche Trennung zwischen logischer und physischer Adresse)
– URI = URL
• Syntax:
Protokoll : / lokalerNetzwerkname / Hostname : Port / Pfad
http://www.mimuc.de/
http:/Arbeitsgruppe/www.mimuc.de:8080
/usr/local/data/index.html
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
33
Zielgenaue Verweise: Dokumentinterne Anker
• Hinter jeder Verweisadresse kann (mit # abgetrennt)
eine Stelle in dem adressierten Dokument spezifiziert
werden.
• Deklaration des Zielankers (z.B. in xyz.html):
<a name="hierher">Text</a>
• Ansprechen des Zielankers:
<a href="xyz.html#hierher">Text</a>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
34
Stilistische Anmerkungen zu Verweisen
• Guter Stil:
– Ankertext hat inhaltliche Bedeutung
• Beispiele:
– Gut:
"Es steht auch vertiefende Information für Sie bereit."
– Schlecht:
"Für vertiefende Information klicken Sie hier."
– Gut:
"Zurück zur Institutsseite"
– Schlecht:
"back"
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
35
Tabellen (1)
• Aufteilen der Fläche in Zeilen und Spalten in flexibler Weise
– Klassische Tabellen, Matrizen
– Allgemeines Hilfsmittel zum Layout (bei unsichtbar gemachten Trennlinien)
– Achtung: Tabellen werden meist erst nach vollständigem Laden angezeigt
• Allgemeine Tabellenform:
<table>
<tr>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
36
Tabellen (2)
• Vordefinition der Spaltenbreite (schnellere Anzeige!)
– <colgroup> <col width=...> ... </colgroup>
• Unregelmässige Zellen einer Tabelle
– Zelle über mehrere Spalten: Attribut colspan="n" in <th> und <td>
– Zelle über mehrere Zeilen: Attribut rowspan="n" in <th> und <td>
• Rahmen
– Attribut border="n" in <table>
• Abstände
– Abstand Rahmen-Zellen: Attribut cellspacing="n" in <table>
– Abstand zwischen Zellen: Attribut cellpadding="n" in <table>
• Textformatierung, Ausrichtung etc.
– Spezielle Attribute (z.B. align)
– Cascading Style Sheets (sh. unten)
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
37
Cascading Style Sheets (CSS)
• Von HTML prinzipiell unabhängige Sprache zur Beschreibung von
Formatierungsinformation
– Standardisierung durch W3C
– Besonders für HTML geeignet
• Entstehungsgeschichte:
– Vielzahl von "Standard-Attributen" in vielen HTML-Elementen
(align, pos, color, font, ...)
– Vereinheitlichung in CSS (aktuelle Version 2.0)
• In HTML 4.0 wird die Ablösung "alter" Konstrukte zugunsten einheitlicher
CSS-beschriebener Styles forciert.
– Universalattribut style
– Alte Schreibweise (nicht mehr empfehlenswert):
<p><font size="7">Text</font></p>
– Neue Schreibweise mit CSS-Syntax:
<p style="font-size:250%">Text</p>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
38
CSS-Eigenschaften, Beispiel Schriftformatierung
• CSS-Syntax: Eigenschaft-Wert-Paare
– Beispiel: font-size:250%
• Umfangreiche Liste an Eigenschaften und Maßeinheiten
• Eigenschaften zur Schriftformatierung:
–
–
–
–
–
–
–
–
–
–
–
font
Zusammenfassung anderer Eigenschaften
font-family
Gewünschte Schrift(en) mit Priorisierung
font-style
Kursiv / normal
font-variant Kapitälchen (small caps) / normal
font-size
Größe (numerisch oder ungenau)
font-weight
Strichstärke (fett / mager)
font-stretch Laufweite
word-spacing Wortabstand
letter-spacing Zeichenabstand
color
Farbe
...
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
39
CSS-Syntax
• Eigenschaft-Wert-Paar
Eigenschaft : Wert
z.B. font-style:italic
– Wenn als Wert eines HTML-Attributs: Anführungszeichen "" empfehlenswert
• Mehrere Eigenschaft-Wert-Paare
– Abtrennen mit Strichpunkt
z.B. font-style:italic; font-size:large;
• Anführungszeichen für Werte (z.B. bei Leerzeichen im Wert)
– Einfache Anführungszeichen ' '
z.B. font-family:'Times New Roman'
• Mehrere Werte (Sequenz) für eine Eigenschaft
– Abtrennen mit Komma
z.B. font-family:'Times New Roman', 'Times', serif
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
40
Weitere CSS-Eigenschaften
•
•
•
•
•
•
•
•
•
Schriftformatierung (auch mit Schriftartendatei)
Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Listenformatierung
Tabellenformatierung
Pseudoformate
– z.B. link, visited, focus
•
•
•
•
Positionierung und Anzeige von Elementen
Layouts für Printmedien
Sound-Kontrolle für Sprachausgabe
Anzeigefenster
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
41
Einbindung von CSS in HTML (1)
• Individuell formatieren:
– Universelles style-Attribut für alle HTML-Tags
– z.B.
<p style="font-weight:bold; font-size:200%"> Beispieltext</p>
• Zentrale Stildefinitionen:
– Festlegung der Style-Attribute für Standard-HTML-Elemente
– z.B.
body {margin-left:100px; }
h1 { font-size:48pt;
font-style:italic;
border-bottom:solid thin black; }
p,li { font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.2mm;
word-spacing:0.8mm;
color:blue; }
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
42
Einbindung von CSS in HTML (2)
• Ablage von zentralen Stildefinitionen im Kopfbereich der HTML-Datei
<style type="text/css">
... Stildefinitionen ...
</style>
– Wegen Problemen älterer Browser oft Stildefinitionen als Kommentar
• Ablage von zentralen Stildefinitionen in separater CSS-Datei (.css)
– Enthält nur Stildefinitionen, kein HTML
– Einbindung in HTML-Dateien:
<link rel="stylesheet" type="text/css" href=Dateireferenz>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
43
Beispiel zu CSS (Variante 1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Beispiel zu CSS</title>
<style>
p {font-family:Verdana; font-size:16pt}
h1 {font-family:Verdana; color:green}
</style>
</head>
<body>
<h1>&Uuml;berschrift 1</h1>
<p>Absatz 1</p>
<h1>&Uuml;berschrift 2</h1>
<p>Absatz 2</p>
<h1>&Uuml;berschrift 3</h1>
<p>Absatz 3</p>
</body>
</html>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
44
Beispiel zu CSS (Variante 2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Beispiel zu CSS</title>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
<body>
<h1>&Uuml;berschrift 1</h1>
<p>Absatz 1</p>
<h1>&Uuml;berschrift 2</h1>
<p>Absatz 2</p>
<h1>&Uuml;berschrift 3</h1>
<p>Absatz 3</p>
</body>
</html>
Datei styles.css (im gleichen Verzeichnis):
p
h1
{font-family:Verdana; font-size:16pt}
{font-family:Verdana; color:green}
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
45
Selbstdefinierte Stilklassen
• Eigene Stilklassen (außer den HTML-Elementen)
– können frei definiert und verwandt werden
• Variante 1: allgemeine Klassen
– bei der Stildefinition (mit dem Namen vorangestelltem Punkt)
– z.B. .navigation {font-size:16pt; color:blue; }
– Anwendung
• mit dem universellen class-Attribut aller HTML-Tags
• z.B. <li class="navigation">Home</li>
• Variante 2: Spezialisierungen
– Z.B. p.right {text-align: right} p.center {text-align: center}
– Verwendung:
<p class="right"> This paragraph will be right-aligned.
</p>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
46
Blockweise Formatierung mit CSS
• Ganze Textbereiche einheitlich formatieren
• Verwendung des Inline-Elements <span> ... </span>
– Keinerlei Effekt auf die Dokumentstruktur
– Kann Text oder andere Inline-Elemente enthalten
– Z.B. <p>Im Englischen nennt man sowas <span lang="en">clean and
clear</span>.</p>
• Verwendung des allgemeinen Blockelements <div> ... </div>
– Kann Text oder andere Blockelemente enthalten, z.B. auch Grafiken
– Weitergabe der angegebenen Stilangaben zu allen enthaltenen HTML-Elementen
– Kann mit der CSS-Eigenschaft position absolut positioniert werden
– Kann mit Skripten ein- und ausgeblendet werden
• Jeweils kombinierbar mit eigenen Klassen!
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
47
Beispiel zu selbstdefinierten Stilklassen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Beispiel zu CSS: Selbstdefinierte Klassen</title>
<link rel="stylesheet" type="text/css" href="styles1.css">
</head>
<body>
<p>Dies ist ein ganz normaler Absatz ohne spezielle
Formatierung. </p>
<p class="merksatz">Dies ist ein Merksatz,
speziell formatiert mit Hilfe von CSS.</p>
<p>Dies ist wieder ein ganz normaler Absatz.</p>
<span class="programm">
<p>Dies sind zwei aufeinander folgende Abs&auml;tze,
die speziell formatiert werden.</p>
<p>Dies ist der zweite solche Absatz.</p>
</span>
</body>
</html>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
48
Framesets
• Einteilung einer Seite in separate
Segmente (frames)
– Die Gesamtseite definiert ein so genanntes frameset.
– Jedes Einzelframe liegt in einer Einzeldatei.
– Anzeige der Frames ist unabhängig voneinander
(werden separat geladen).
• Grundgerüst eines Framesets:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<frameset ...> <!-- Frameset-Definition -->
<frame ...>
<!-- Framefenster-Definition -->
<noframes>
Wird angezeigt, wenn der Browser keine Frames anzeigen
kann
</noframes>
</frameset>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
</html>
49
Beispiel: Basisdatei eines Framesets
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Beispiel zu Frames</title>
</head>
<frameset cols="250,*">
<frame src="verweise.html" name="Navigation">
<frame src="startseite.html" name="Daten">
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</frameset>
Aufteilung der Seite:
</html>
• Horizontal (rows) oder vertikal (cols)
• In absoluten (Pixel-)Zahlen oder prozentual
• "*" = Rest der Fläche
Prof. Dr. Rainer Malaka,
Digitale
50
• Komma-getrennte
ListeMedien Medieninformatik 1
Anzeige von Inhalten in Framesets
• Bei Verweisen kann mit dem target-Attribut festgelegt
werden, in welchem Frame die Anzeige erfolgt.
Beispiel: Datei "verweise.html"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Navigation</h1>
<p>
<a href="allgem.html" target="Daten"><b>Allgemeines</b></a><br>
<a href="styles.html" target="Daten"><b>Styles</b></a><br>
<a href="table.html" target="Daten"><b>Tabellen</b></a>
</p>
</body>
</html>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
51
Vor- und Nachteile von Framesets
• Vorteile:
–
–
–
–
Elegante Gestaltungsmöglichkeiten
Navigationshilfen bleiben auch beim Blättern in angezeigter Information am gleichen Platz
Nachladen von Einzelinformation u.U. schneller als ohne Frames
Parallele Anzeige von Information z.B. zu Vergleichszwecken
• Nachteile:
– Inkompatibilität mit älteren Browsern
– Gesamtladezeit schlechter als ohne Frames
– Einzelansichten nicht mehr als Ganzes adressierbar
• Bruch mit den Grundparadigmen von HTML?
– Unter Umständen: Unübersichtliche Verschachtelung von Frames
– Suchmaschinen indizieren oft Teile von Framesets
• Empfehlungen:
– Frames nur da einsetzen, wo wirklich sinnvoll!
– Idealerweise Frame-freie Alternative (nicht nur Fehlertext) anbieten
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
52
Verwendung des "target"-Attributs
• Werte für "target"-Attribut in Links (Anchor-Tag <a>):
–
–
–
–
_blank = Verweis in neuem Fenster öffnen
_self = Verweis im gleichen Fenster öffnen
_parent = aktuelles Frameset beim Ausführen des Verweises sprengen
_top = alle Framesets beim Ausführen des Verweises sprengen
• "target" auch außerhalb von Framesets anwendbar
– _blank
• Beispiel:
Hier ist ein
<a target="_blank" href="allgem.html">Link</a>,
der ein neues Fenster öffnet.
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
53
Integration von Bildern
• Bilder einbinden mit <img>
• Attribut src gibt Quelle an (auch von anderen Servern möglich)
– Achtung Copyright-Fragen!
• Größenangaben mit width und height
– Bei Angabe beider Werte Verzerrung möglich
• Bilder können auch als Inhalt eines Verweises vorkommen
– z.B. grafische Navigationsleisten
<html> ...
<body>
<h1>Ein JPEG-Bild des Eiffelturms</h1>
<p><img src="../demoimages/eiffelturm.jpg" width="350"
alt="Eiffelturm">
</p>
</body>
</html>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
54
Integration anderer Dateien
• Prinzipiell alle Dateien einbettbar
– mit dem <object>-Tag
– als Hyperlinks
• Beispiel zu Sound:
– Achtung: nur in neuesten Browsern unterstützt
– Ältere Variante: <embed>-Tag
<p>Sound-Objekt
<object data="../sounds/bgndmusic.mid" type="audio/midi">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object>
</p>
<p>Sound als Link<br>
<a href="../sounds/technobop.mid"
type="audio/midi">Bitte klicken!</a>
</p>
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
55
MIME
• MIME = Multipurpose Internet Mail Extensions
– In HTML mit dem type-Attribut an vielen Stellen angebbar
(z.B. <link>, <object>)
– Erleichtert dem Browser (bzw. seinem Benutzer) die Entscheidung, wie Dateien zu
behandeln sind
– Jeder Browser führt eine Liste der akzeptierten MIME-Extensions und Regeln für die
Behandlung (z.B. speichern, Programm aufrufen)
– Liste siehe http://www.iana.org/assignments/media-types
• Syntax:
Medientyp / Untertyp
– Medientypen: text, image, video, audio, application, ...
– Untertypen, die auf dem Server auszuführen sind, beginnen meist mit x– Hersteller- (vendor-)spezifische Untertypen im speziellen Unterbaum "vnd."
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
56
Design vs. Flexibilität
• Aus gestalterischer Motivation werden oft folgende Konzepte verwendet:
–
–
–
–
–
Feste Formatvorgaben für die Seite
Spezial-Schriften
Feste Schriftgrößen
Frames
Aufwändige grafische Elemente
• Die maximale Flexibilität in der Verwendung spricht für:
–
–
–
–
–
Flexible Fenstergröße („liquid design“)
Unabhängigkeit von Schriftwahl
Vom Benutzer bestimmbare Schriftgrößen
Keine oder sehr eingeschränkte Benutzung von Frames
Kleine, sparsame grafische Elemente
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
57
Barrierefreiheit von Webseiten
• Gesellschaftliche Funktionen des WWW:
– Wesentliches Medium für staatliche Informationsdienste und Bürgerservice
– Tendenziell besonders leicht zugänglich für Personen, die andere Zugänge nur schwer
nutzen können (z.B. Behinderte)
– Generell ein demokratisches Medium, das für alle offen sein soll
• Nutzung des WWW bei eingeschränkten Wahrnehmungs- und
Aktionsmöglichkeiten
– Seh- oder Hörbehinderung
– Leseschwäche, Aufnahme-, Lernschwäche
– Einschränkungen bei der Benutzung von „zeigenden“ Eingabegeräten
• Richtlinien: Web Accessibility Initiative (http://www.w3.org/WAI/), Beispiele:
– Ergänzung grafischer Information durch textuelle Beschreibung
• Auch bei zeitabhängigen Medien (Untertitel zu Video)
– Benutzbarkeit mit Tastatur (d.h. auch mit Spracheingabe)
– Orientierung durch klare Struktur und kleine Textblöcke erleichtern
– Hoher Kontrast zwischen Vordergrund und Hintergrund
– Auslösung epileptischer Anfälle durch blinkende Inhalte verhindern
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
58
Tutorials
•
•
•
•
http://www.w3schools.com/css/default.asp
www.csszengarden.com/
http://saftsack.fs.uni-bayreuth.de/html/selfhtml/
http://de.selfhtml.org/
Prof. Dr. Rainer Malaka,
Digitale Medien
Medieninformatik 1
59