2. WWW-Protokolle und
Werbung
2. WWW-Protokolle und -Formate
Inhalt:
HTTP, allgemeiner syntaktischer Aufbau
Methoden des HTTP-Protokolls
Aufbau von Web-Applikationen unter Nutzung von HTTP,
HTML, DOM
XML, XML-DTD und XML-Schema
Darstellung von XML-Dokumenten mittels CSS
Beispiele für XML-basierte Sprachen
Peter Sobe
Internettechnologien
1
HTTP (1)
HTTP: Hypertext Transport Protocol
Roy Fielding, Tim Berners-Lee ab 1989
Protokoll zum Transport von Web-Inhalten, insbes. HTML-Seiten
HTTP
TCP
IP
Bestimmt, was angefragt wird und welche
Daten zurückgesendet werden
Erzeugt Verbindung zwischen
Client und Server
Ermöglicht Adressierung, Paket-Transfer
Der syntaktische Aufbau der HTTP-Nachrichten wird hier durch die
Erweiterte Backus-Naur-Form beschrieben. Diese Form beschreibt
den Aufbau von Nachrichten durch Sequenz, Alternativen, optionalen
Elementen, sich wiederholenden Elementen und entsprechende
Schachtelungen. Elemente, die nicht weiter aufgelöst werden, sind
s.g. Terminalsymbole, die durch Großschreibung oder Angabe in
Anführungszeichen gekennzeichnet werden.
Peter Sobe
Internettechnologien
2
Einschub: Erweiterte Backus Naur Form
Sequenz: Hintereinanderschreiben der Elemente
e3 ꞊ e1 e2
Alternative: Hintereinander mit Trennstrich
e3 ꞊ e1 | e2
Optionales Element in Sequenz: mit “[“ “]“ eingefasst
e3 ꞊ [ e1 ] e2
Wiederholung, ein- oder mehrfach: “+“ Zeichen
e4 ꞊ ( e1 e2)+ e3
Optionale Wiederholung, kein-, ein- oder mehrfach: “*“ Zeichen
e4 ꞊ ( e1 e2)* e3
Gruppierung: runde Klammern
Beispiel… e5 ꞊ (( e1 | e2) (e3 | e4))+
Terminalsymbole: Hochkommaschreibweise, oder Großbuchstaben
Beispiele (ohne tieferen Sinn)…
e1 ꞊ “0“ |“1“ | “2“
e2 ꞊ ZEILENUMBRUCH e3 ꞊ LEERZEICHEN
Peter Sobe
Internettechnologien
3
HTTP (2)
Eine HTTP- Nachricht ist immer wie folgt aufgebaut:
generic-message ꞊ start-line
(message-header CRLF)*
CRLF
[ message-body ]
start-line ꞊ Request-Line | Status-Line
Die Nachricht beginnt immer mit einer Startzeile.
Schickt der Nutzer eine Anforderung (Request), ist es eine Request-Zeile.
Antwortet der Server (Response), dann ist es eine Status-Zeile.
Danach werden mehrere so genannte Nachrichten-Header übertragen.
Der Stern bedeutet optionale Wiederholung und schließt auch die Möglichkeit
ein, dass keine Nachrichten-Header vorhanden sind.
Das Terminalsymbol CLRF ist der Zeilenumbruch (Carriage Return Line Feed)
Peter Sobe
Internettechnologien
4
HTTP (3)
Die Folge der Header muss durch ein CRLF-Zeichen
abgeschlossen sein. Dann folgt unbedingt eine Leerzeile,
repräsentiert durch ein einzelnstehendes CRLF. Danach kann
optional ein Nachrichten-Körper (body) folgen.
Aufbau einer Anforderung (Request)
Diese beginnt mit der Anforderungszeile. Danach können im
Header-Teil allgemeine Header, Anforderungs-Header oder EntityHeader vorhanden sein.
Request
Peter Sobe
꞊ Request-Line
( ( general-header | request-header | entity-header )
CRLF )*
CRLF
[ message-body ]
Internettechnologien
5
HTTP (4)
Die Anforderungszeile (Request-Line) besteht aus drei Teilen, die
durch Leerzeichen (SP) getrennt sind. Der erste Teil ist die
Methode (z.B. GET), der zweite Teil die Anforderungs-URI
(z.B. /beispiel.html, und der dritte Teil die HTTP-Version.
Request-Line ꞊ Method SP Request-URI SP HTTP-Version CRLF
Method ꞊ "OPTIONS" | "GET" | "HEAD" | "POST" | "PUT"
| "DELETE" | "TRACE" | "CONNECT"
Request-URI ꞊ "*" | absoluteURI | abs_path | authority
HTTP-Version ꞊ "HTTP/1.0" | "HTTP/1.1"
Beispiele: GET
/beispiel.html HTTP/1.0
OPTIONS *
HTTP/1.0
Peter Sobe
Internettechnologien
6
HTTP (5)
Beispiele: GET
/beispiel.html HTTP/1.0
OPTIONS *
HTTP/1.0
Der Stern "*" als Request-URI heißt, dass sich die Anforderung
nicht auf eine bestimmte Ressource bezieht. Mit OPTIONS werden
vom Server die unterstützten Methoden erfragt, ohne sich auf ein
gespeichertes Dokument zu beziehen.
Die GET-Methode dagegen fordert ein Dokument an, zum Beispiel
beispiel.html. Das /-Zeichen bezeichnet das Wurzelverzeichnis des
Webservers. Die Angabe der Methode muss in Großbuchstaben
erfolgen. Es können noch verschiedene Header folgen.
Möglicherweise werden noch Daten in einem Body-Teil übertragen.
Peter Sobe
Internettechnologien
7
HTTP (6)
Aufbau einer Antwort (Response)
Der Aufbau ist analog zur Anforderung. Nur ist die erste Zeile jetzt
eine Status-Zeile und im Header-Teil stehen statt den
Anforderungs-Headern die Antwort-Header.
Response ꞊ Status-Line
( ( general-header | response-header | entity-header )
CRLF )*
CRLF
[ message-body ]
Die Status-Zeile (Status -Line) besteht aus drei Teilen, die durch
Leerzeichen (SP) getrennt sind. Der erste Teil ist die unterstützte
http-Version, der zweite Teil enthält den Status-Code (z.B. 200),
und der dritte Teil die Texterklärung zum Code (z.B. OK).
Status-Line ꞊ HTTP-Version SP Status-Code SP Reason-Phrase CRLF
Peter Sobe
Internettechnologien
8
HTTP (7)
Das WWW-Konsortium hat im HTTP-Standard festgelegt, dass die
drei Methoden OPTIONS, GET und HEAD auf jeden Fall durch
einen Webserver zu unterstützen sind, aber auch künftige
Erweiterungen der Methoden möglich sind.
Typischerweise ist die Methode POST zur Übertragung von
Eingabedaten (zum Beispiel aus HTML-Formularen) auf Webseiten
zugelassen.
Es sind auch einige Methoden, wie SEARCH, LOCK usw.
vorhanden, die nicht im Standard aufgeführt sind.
Im Standard enthalten, aber oft nicht implementiert oder
abgeschaltet: PUT und DELETE
Peter Sobe
Internettechnologien
9
HTTP (8)
GET- Methode
Die GET-Methode ist die am häufigsten eingesetzte Methode
bei einer Client-Anforderung. Damit wird ein Dokument beim
Webserver zum Herunterladen angefordert. Der Name des
Dokumentes und eventuell sein Pfad müssen in der
Request-URI angegeben sein.
Beispiel: GET /beispiel.html HTTP/1.0
Das /-Zeichen steht für die Wurzel des
Publikationsverzeichnisses des Webservers. Im
Wurzelverzeichnis wird die Datei beispiel.html angefordert.
Peter Sobe
Internettechnologien
10
HTTP (9)
GET- Methode, Antwort:
Nach der Leerzeile ist der
Inhalt des Body zu sehen,
d.h. der Inhalt des
angeforderten Dokumentes
in HTML.
Allgemeiner Header: Date
Response-Header:
Server, Accept-Ranges und ETag.
Entity-Header: Content-Type, Content-Length und Last-Modified. Sie
beziehen sich auf das gesendete Dokument. ETag enthält einen
serverseitig eindeutigen Identifizierer für das Dokument.
Peter Sobe
Internettechnologien
11
HTTP (10)
HEAD- Methode
Die HEAD-Methode arbeitet fast identisch zur GET-Methode, nur
dass das angeforderte Dokument vom Server nicht gesendet wird.
Die Header werden wie bei GET in der Antwort gesetzt und
erlauben damit eine Identifikation des Dokumentes.
Beispiel:
HEAD /xml1.xml HTTP/1.0.
Ergebnis siehe
Bild.
Im Content-Type-Header ist text/xml angegeben.
Peter Sobe
Internettechnologien
12
HTTP (11)
OPTIONS- und TRACE-Methoden
Die OPTIONS-Methode dient zur Anzeige der durch den
Webserver unterstützten Methoden.
Beispiel: OPTIONS * HTTP/1.0.
Die TRACE-Methode dient nur zur Feststellung, ob der Webserver
arbeitet und ansprechbar ist. Seine Antwort ist das Zurücksenden
der Anforderung im Body. Es werden einige wichtige Header
gesetzt. Das Bild unten zeigt die Server-Antwort auf die
Anforderung
Beispiel:
TRACE / HTTP/1.0.
Peter Sobe
Internettechnologien
13
HTTP (12)
POST-, PUT- und DELETE-Methoden
POST-Methode - Übertragung von Datenpaketen vom Client
zum Server. Hauptsächlich wird sie eingesetzt, wenn ein
angefordertes HTML-Dokument Formularelemente für
Nutzereingaben enthält. Die eingegebenen Daten werden
dann an ein serverseitig vorhandenes Programm (Script) zur
Weiterverarbeitung gesendet (serverseitiges Scripting).
PUT-Methode - Übertragung von kompletten Dokumenten
vom Client zum Server. Diese werden unter dem
angegebenen Namen durch den Webserver im
angegebenen Verzeichnis abgelegt. Es muss ein
authentifizierter Zugriff erfolgen und Kennwort und Passwort
mit übermittelt werden. Die hochzuladende Datei muss im
Body angeben werden.
DELETE-Methode löscht die angegebene Datei aus dem
Verzeichnis; authentifizierter Zugriff wird vorausgesetzt.
Peter Sobe
Internettechnologien
14
HTTP und Darstellung von XML-Dokumenten
HTTP überträgt auch XML!
Durch die XML-Unterstützung der Browser wird die XML-Datei so
dargestellt, dass die Elementhierarchie des Dokumentes sichtbar wird
(siehe Bild rechts).
Beeinflussung der Darstellung:
Das XML-Dokument kann über
CSS (Cascading Style Sheets)
bereits Formatierungshinweise
zur Darstellung im Browser
enthalten.
Ist in die XML-Datei eine
XSL-Datei eingebunden,
wird diese auch ausgeführt,
sodass man das transformierte
Dokument sieht.
Peter Sobe
Internettechnologien
15
Web-Anwendungen unter Nutzung von HTTP
Web-Browser
Javascript
Ajax-Engine
HTTP, HTMLDokumente
Externe
Skripte
und Daten
Peter Sobe
CGI
XML
WebServer
PHP
Internettechnologien
16
HTML
Kodierungssprache für Webseiten, aus SGML entworfen.
HTML-Dokument wird im Message-Body durch HTTP
übertragen
Beispiel:
<HTML>
<HEAD><TITLE>DOM</TITLE></HEAD>
<BODY BGCOLOR="yellow">
<H2>Demonstration DOM</H2>
<P>
<IMG SRC="Comp2.gif" /> Bild 4.1
</P>
<P><I>Ende</I>
</P>
</BODY>
</HTML>
Peter Sobe
Internettechnologien
17
HTML
Elemente: <TITLE>DOM</TITLE>
Attribute: <IMG SRC="Comp2.gif" />
Kombination Element mit Attributen:
<BODY BGCOLOR="yellow"> … </BODY>
Die Elemente
werden durch Tags eingefasst.
und werden hierarchisch ineinander gesetzt
Darstellung als Baum mit Elementen auf gleicher Ebene und
unter/übergeordneten Elementen möglich.
→ DOM: Document Object Model eines HTML-Dokuments
Peter Sobe
Internettechnologien
18
DOM (1)
Element-Beziehungen im letzten Beispiel:
HTML
HEAD
BODY
TITLE
H2
DOM
Demonstration
DOM
BGCOLOR
P
Bild 4.1
P
IMG
I
Ende
SRC
Elementknoten (Tag)
Comp2.gif
Attributknoten
Attributwert
Elementwert (Text-Knoten)
Peter Sobe
Internettechnologien
19
DOM (2)
DOM dient z.B. in JavaScript zum Zugriff auf Elemente der
dargestellten Webseite.
Beispiel aus jspage.html (siehe Material zum ersten Praktikum):
Im Skript:
Im HTML-Dokument:
<script type="text/javascript">
<!—
function primzahl() {
var zahl =
document.Formular.Eingabe.value;
…
-->
</script>
…
Peter Sobe
<body>
…
<form name="Formular" action="">
<input type="text„
name="Eingabe"="3">
…
</form>
</body>
Internettechnologien
20
XML (1)
XML (Extensible Markup Language) Meta-Sprache, um
Auszeichnungssprachen für Dokumente zu erzeugen
• Textuell lesbares Speicherformat
• Tags, um Bedeutung von Daten zu kennzeichnen, z.B.
<Datum>19.12.1979</Datum> , Schachtelung der Tag-Strukturen
• XML ist maschinen-lesbar und transformierbar
• Ideen von XML bereits alt, jedoch jetzt erst mit Tool-Unterstützung
(XML-Editoren, XML-Transformatoren)
XML-konforme Untermengen:
• (X)HTML: Nachbau von HTML durch XML
• Grafikformat SVG (Scalable Vector Graphics)
und weitere
Peter Sobe
Internettechnologien
21
XML (2)
Beispiel “Vorlesung“:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE Vorlesung SYSTEM "C:\usr\Vorlesung.dtd">
<Vorlesung>
<Titel lang="de">Internettechnologien</Titel>
<Titel lang="en">Internet Technology</Titel>
<Termin Semester-Id="SS14">
<Ort>S527</Ort>
<Wochentag>Montag</Wochentag>
<Uhrzeit>11:10</Uhrzeit>
</Termin>
</Vorlesung>
Ein XML-Dokument ist wohlgeformt, wenn es der grundlegenden
Syntax mit öffnendem und schließendem Tag, Attributen in doppelten
Ausführungszeichen und einer hierarchischen Ordnung entspricht.
Peter Sobe
Internettechnologien
22
XML (3)
Die formale Struktur der Dokumente wird durch die DTD (Document Type
Definition) bestimmt. XML Dokumente sind gültig (engl. valide), wenn sie
dieser Struktur genügen. Gültigkeit setzt Wohlgeformtheit voraus.
DTD – Document Type Definition, Angabe im Prolog des XML-Dokuments
(Verweis auf DTD-Datei oder URL)
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT Vorlesung (Titel+,Termin)>
<!ELEMENT Titel (#PCDATA)>
<!ELEMENT Termin (Ort,Wochentag,Uhrzeit)>
<!ELEMENT Ort (#PCDATA)>
<!ELEMENT Wochentag (#PCDATA)>
<!ELEMENT Uhrzeit (#PCDATA)>
<!ATTLIST Titel
lang ID #REQUIRED
>
<!ATTLIST Termin
Semester-Id ID #REQUIRED
> Peter Sobe
Internettechnologien
Vorlesung
Titel
Ort
...
Titel
Wochentag
Termin
Uhrzeit
23
XML (4)
Andere Variante zur Beschreibung der Struktur eines XMLDokuments: XML-Schema als Ersatz für DTD
Beispiel:
Beispiel Fortsetzung:
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" ... >
<xs:element name="vorlesung" type="VorlesungType">
<xs:annotation>
<xs:documentation>Top Level Element</xs:documentation>
</xs:annotation>
</xs:element>
<xs:complexType name="VorlesungType">
<xs:sequence >
<xs:element name="Titel" type="TitelTyp" minOccurs="1"
maxOccurs="unbounded"/>
<xs:element name="Termin" type="TerminTyp"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="TitelTyp">
<xs:sequence >
<xs:element name="Titel" type="xs:string"/>
</xs:sequence>
<xs:attribute name="lang" type="xs:string"/>
</xs:complexType>
<xs:complexType name="TerminTyp">
<xs:sequence >
<xs:element name="Ort" type="xs:string"/>
<xs:element name="Wochentag" type="xs:string"/>
<xs:element name="Uhrzeit" type="xs:string"/>
</xs:sequence>
<xs:attribute name="Semester-Id" type="xs:string"/>
</xs:complexType>
</xs:schema>
Mehr zu XML-Schema folgt später auf Folie 34.
Peter Sobe
Internettechnologien
24
XML-Beispiel “Musiksammlung“
Ein XML-Dokument:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE musiksammlung SYSTEM "musiksammlung.dtd">
<musiksammlung eigentuemer="Max Meier">
<album>
<interpret>Kraftwerk</interpret>
<albumtitel>Electric Cafe</albumtitel>
<songs> <song>Boing Boom Tschak</song>
<song>Techno Pop</song> <song>Musique Non-Stop</song>
<song>Der Telefon-Anruf</song> <song>Sex Objekt</song>
<song>Electric Cafe</song> </songs>
</album>
<album>
<saenger>Helge Schneider</saenger>
<albumtitel>Guten Tach</albumtitel>
<songs >
<song>Ansage </song>
<song>Ladiladiho</song>
<song>Der viereckige Hai</song>
</songs>
</album>
</musiksammlung>
Internettechnologien
Peter Sobe
Das Dokument zeigt
deutlich den
hierarchischen Aufbau
ausgehend vom
Wurzel-Element
MUSIKSAMMLUNG
und den vorhandenen
Subelementen.
25
XML-Beispiel “Musiksammlung“ : DTD
DTD (Document Type Desciption) für das Beispiel „Musiksammlung“:
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT musiksammlung (album)*>
<!ATTLIST musiksammlung
eigentuemer CDATA #REQUIRED
>
<!ELEMENT album ((interpret|saenger|saengerin|band), albumtitel, songs) >
<!ELEMENT songs (song)* >
<!ELEMENT interpret (#PCDATA) >
<!ELEMENT saenger (#PCDATA) >
<!ELEMENT saengerin (#PCDATA) >
<!ELEMENT band (#PCDATA) >
<!ELEMENT albumtitel (#PCDATA) >
<!ELEMENT song (#PCDATA) >
Peter Sobe
Internettechnologien
26
XML Daten – Formatierte Anzeige im Browser (1)
für das Beispiel „Musiksammlung“:
Browser zeigen
typischerweise die
Struktur des XMLDokuments durch
Einrückungen an!
Eine grafisch
formatierte Darstellung
ist durch CSS
Formatierung möglich.
Peter Sobe
Internettechnologien
27
XML Daten – Formatierte Anzeige im Browser (2)
für das Beispiel „Musiksammlung“ mit CSS-Formatierung:
Inhalt von ‘musiksammlung.css‘
musiksammlung
{
position:absolute;
top:10px;
left:10px;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:14px;
background-color:#FFECFF;
padding:0px;
}
album
{
position:relative;
top:10px;
left:20px;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-size:14px;
background-color:#FFECEF;
padding:15px;
}
albumtitel
{ ….
Peter Sobe
Internettechnologien
28
XML-Sprachen (1)
Genereller Ansatz:
Peter Sobe
Internettechnologien
29
XML-Sprachen (2)
Durch die ständige Weiterentwicklung der XML-Technologien
sind bereits für viele verschiedene Anwendungsgebiete neue
wichtige XML-Sprachen definiert worden.
Voice Extensible Markup Language (VoiceXML):
Auszeichnungssprache für akustische
Ausgabeplattformen.
Mathematical Markup Language (MathML): Darstellung
mathematischer Ausdrücke, Strukturierung des
Dokumentes
Die Synchronized Multimedia Integration Language
(SMIL) Vokabular für Multimediapräsentationen im WWW.
Scalable Vector Graphics (SVG): Vokabular für die
Präsentation von zweidimensionalen Vektorgraphiken,
in die auch Rastergraphiken eingebunden werden
können.
Peter Sobe
Internettechnologien
30
XML-Sprachen (3)
Fortsetzung:
XML-Schema (XS): anstelle einer DTD wird eine XMLbasierte Beschreibung der Dokumentstruktur einer XMLSyntax beschrieben (siehe Beispiel zu Musiksammlung)
Geography Markup Language (GML): zum Austausch
raumbezogener Objekte im Bereich der Geodaten
WSDL, SOAP: XML-basierte Beschreibungen und
Schnittstellen; werden für Webservices benutzt
Peter Sobe
Internettechnologien
31
XML-Sprachen (4)
XSLT ist eine Sprache, mit der beschrieben wird, wie ein XMLDokument in ein anderes XML-Dokument umgewandelt werden
soll.
XML-Quelldatei und ein XSLTStylesheet (Regeln für die
Transformation)
XMLDatei
XSLTProzessor
XMLDatei
Das Programm, das die XSLTSteueranweisungen versteht
wird XSLT-Prozessor genannt
XSLTStylesheet
Internettechnologien
32
XML-Sprachen (5)
Transformation zwischen verschiedenen XML-Sprachen,
zum Beispiel
Dynamische Erzeugung von Webseiten
Erzeugung von Grafiken (SVG)
Peter Sobe
Internettechnologien
33
XML-Schema (1)
Ein XML-Schema kann anstelle einer DTD benutzt werden
und ist selbst ein XML-Dokument.
Beispiel zur Musiksammlung:
<?xml version="1.0" encoding="utf-8"?>
<xs:schema … xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="musiksammlung">
<xs:complexType>
<xs:sequence minOccurs="0" maxOccurs="unbounded">
<xs:element ref="album" />
</xs:sequence>
<xs:attribute name="eigentuemer" type="xs:string" use="required" />
</xs:complexType>
</xs:element>
album
musiksammlung
Dieser Teil beschreibt, dass eine
Musiksammlung aus mehreren
Alben (0 bis unbegrenzt) besteht.
Peter Sobe
Internettechnologien
34
XML-Schema (2)
Beispiel zur Musiksammlung (Fortsetzung):
<xs:element name="album">
<xs:complexType>
<xs:sequence>
<xs:choice>
<xs:element ref="interpret" /> <xs:element ref="saenger" />
<xs:element ref="saengerin" /> <xs:element ref="band" />
</xs:choice>
<xs:element ref="albumtitel" />
<xs:element ref="songs" />
</xs:sequence>
</xs:complexType>
interpret
</xs:element>
…
album
albumtitel
saenger
songs
saengerin
band
Peter Sobe
Internettechnologien
35
XML-Schema (3)
Beispiel zur Musiksammlung (Fortsetzung):
<xs:element name="songs">
<xs:complexType>
<xs:sequence minOccurs="0" maxOccurs="unbounded">
<xs:element ref="song" />
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:element name="interpret" type="xs:string" />
<xs:element name="saenger" type="xs:string" />
<xs:element name="saengerin" type="xs:string" />
<xs:element name="band" type="xs:string" />
<xs:element name="albumtitel" type="xs:string" />
<xs:element name="song" type="xs:string" />
songs
</xs:schema>
song
Peter Sobe
Internettechnologien
36
SVG (1)
SVG (Scalable Vector Graphics) ist ein offener Grafikstandard, der es
erlaubt, zweidimensionale Grafikobjekte mit Hilfe von XML zu notieren
(W3C 2003a)
SVG ist XML-basiert und unterstützt Vektordaten und zusätzlich die
Einbettung von Rasterbildern, Audio- und Videodaten.
Eigenschaften:
Auszeichnung für zweidimensionale Geometrieobjekte (Elemente
mit geometriespezifischen Attributen)
Operationen wie Transformationen, Gruppierung,
Clipping und Filterung
Formatierung der Elemente über CSS (Cascading Style Sheets)
Ereignisbehandlung über Skripte mit Zugriff auf DOM.
Peter Sobe
Internettechnologien
37
SVG (2)
Weitere Eigenschaften:
SVG-Grafiken sind im Browser skalierbar, ohne Qualitätsverlust
(vgl. Bitmap-Grafiken)
Interaktionen über Attribute, z.B. Einblendzeiten von
Grafikobjekten
Attribute können mit JavaScript gesetzt werden.
Beispiel: Attribut visible=“true“ oder “false“ zeitgesteuert setzen
SVG kann in XHTML eingebettet werden. Über DOM kann dann
z.B. ein JavaScript über das Document die Elemente der SVG
Grafik adressieren. Damit können SVG-Grafiken durch
clientseitiges Scripting dynamisch verändert werden
(… das wird in der Übung gemacht!)
Peter Sobe
Internettechnologien
38
SVG (3)
Eine SVG-Grafik ist ein XML-Dokument, dessen Syntax
gemäß eines XML-Schemas www.w3.org/2000/svg
aufgebaut ist.
Struktur:
<svg xmlns="http://www.w3.org/2000/svg" width="444" height="666">
<title>Ein Bild</title>
<desc>Hier eine Beschreibung zum Bild</desc>
<!-- hier folgen die Grafikelemente -->
</svg>
Ein SVG-Bild kann als externe Referenz in eine Webseite
aufgenommen werden, oder auch in die Webseite eingebettet
werden.
Peter Sobe
Internettechnologien
39
SVG (4)
Elemente beschreiben grafische Primitive, wie z.B.
Linie: <line x1="90" y1="150" x2="310" y2="150"
style="stroke:black; stroke-width:2px;" />
Kreis:<circle cx="50" cy="50" r="15" fill="yellow"
stroke="black" />
Ellipse: <ellipse cx="200" cy="50" rx="20" ry="40"
style="fill:green;" />
Rechteck: <rect x="0" y="0" width="100" height="100"
style="fill:blue;" />
Text: <text x="100" y="50">Guten Morgen</text>
Für die Attribute sind verschiedene Maßeinheiten möglich:
px – Pixel (default), cm – Zentimeter, mm – Millimeter, …
Peter Sobe
Internettechnologien
40
SVG (5)
Elemente (Fortsetzung):
Polyline und Polygon:
<polyline fill="lightgray" stroke="red" stroke-width=„2px"
points=" 176 10, 26 160, 326 160, 176 10" />
<polygon fill="darkblue" points="176 10, 26 160, 326 160" />
…beide Elemente beschreiben ein Dreieck
Verschachtelung:
<svg …>
<rect x="0" y="0" width="200" height="200" style="fill:red;" />
<svg x=„20" y=„20" width="160" height="160">
<rect x="0" y="0" width="100" height="100" style="fill:blue;" />
</svg>
</svg>
Peter Sobe
Internettechnologien
41
SVG (6)
Ein Beispiel mit Verschachtelung:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<title>Beispielbild</title>
<desc>Ein einfaches SVG Bild</desc>
<rect x="50" y="50" width="300" height="300" style="fill:red;" />
<svg x="50" y="50" width="300" height="300">
<circle cx="150" cy="150" r="100"
style="fill:blue;" />
</svg>
</svg>
Peter Sobe
Internettechnologien
42
SVG (7)
SVG wird durch eine Reihe Vektorzeichenprogramme unterstützt,
d.h. zum Erstellen von Grafiken ist primär keine Kenntnis des
XML-Formats nötig.
SVG-XML-Struktur dann wichtig
wenn grafische Inhalte automatisiert erzeugt werden sollen, z.B.
bei der Programmierung einer SVG-Ausgabe
Wenn auf SVG-Inhalte durch Skripte zugegriffen werden soll
Bei der Transformation von anderen XML-Daten in SVG, z.B.
Anzeige von Geodaten
Peter Sobe
Internettechnologien
43
MathML
Durch MathML wird das äußere Erscheinungsbild
mathematischer Ausdrücke kodiert (presentation).
Zusätzlich kann die Bedeutung eines Ausdrucks kodiert werden
(content).
Beispiel: (x+2)3
Presentation markup:
Content markup:
<math>
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mi>x</mi> <mo>+</mo><mn>2</mn>
</mrow>
<mo>)</mo>
</mrow>
<mn>3</mn>
</msup>
</math>
<math>
<apply>
<power/>
<apply>
<plus/>
<ci>x</ci>
<cn>2</cn>
</apply>
<cn>3</cn>
</apply>
</math>
Peter Sobe
Internettechnologien
44
