• Keine Ergebnisse gefunden

 XML, XML-DTD und XML-Schema

N/A
N/A
Protected

Academic year: 2022

Aktie " XML, XML-DTD und XML-Schema"

Copied!
45
0
0

Wird geladen.... (Jetzt Volltext ansehen)

Volltext

(1)

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

2. Protokolle und -Formate

(2)

HTTP: Hypertext Transport Protocol Roy Fielding, Tim Berners-Lee ab 1989

Protokoll zum Transport von Web-Inhalten, insbes. HTML-Seiten

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.

HTTP (1)

IP TCP HTTP

Erzeugt Verbindung zwischen Client und Server

Bestimmt, was angefragt wird und welche Daten zurückgesendet werden

Ermöglicht Adressierung, Paket-Transfer

(3)

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

Einschub: Erweiterte Backus Naur Form

(4)

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)

HTTP (2)

(5)

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 Entity- Header vorhanden sein.

Request ꞊ Request-Line

( ( general-header | request-header | entity-header ) CRLF )*

CRLF

[ message-body ]

HTTP (3)

(6)

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

HTTP (4)

(7)

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.

HTTP (5)

(8)

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

HTTP (6)

(9)

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

HTTP (7)

(10)

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.

HTTP (8)

(11)

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.

HTTP (9)

(12)

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.

HTTP (10)

(13)

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.

HTTP (11)

(14)

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.

HTTP (12)

(15)

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.

HTTP und Darstellung von XML-Dokumenten

(16)

Web-Anwendungen unter Nutzung von HTTP

Web-Browser

Web- Server

HTTP, HTML- Dokumente

Javascript

CGI

XML

Externe Skripte

und Daten PHP

Ajax-Engine

(17)

 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>

HTML

(18)

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

HTML

(19)

Element-Beziehungen im letzten Beispiel:

DOM (1)

HTML

HEAD BODY

TITLE

DOM

H2 P P

Demonstration DOM

IMG

Bild 4.1

BGCOLOR

SRC

Comp2.gif

I

Ende

Elementknoten (Tag) Attributknoten

Elementwert (Text-Knoten) Attributwert

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

(20)

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:

DOM (2)

<script type="text/javascript">

<!—

function primzahl() { var zahl =

document.Formular.Eingabe.value;

-->

</script>

<body>

<form name="Formular" action="">

<input type="text„

name="Eingabe"="3">

</form>

</body>

(21)

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 maschinenlesbar 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

XML (1)

(22)

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.

XML (2)

(23)

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

Vorlesung

Titel

...

Titel Termin

Ort Wochen-

tag

Uhrzeit

XML (3)

(24)

Andere Variante zur Beschreibung der Struktur eines XML- Dokuments: XML-Schema als Ersatz für DTD

Beispiel:

<?xml version="1.0" encoding="UTF-8"?>

<xs:schemaxmlns:xs="http://www.w3.org/2001/XMLSchema"... >

<xs:elementname="vorlesung" type="VorlesungType">

<xs:annotation>

<xs:documentation>Top Level Element</xs:documentation>

</xs:annotation>

</xs:element>

<xs:complexTypename="VorlesungType">

<xs:sequence>

<xs:elementname="Titel"type="TitelTyp"minOccurs="1"

maxOccurs="unbounded"/>

<xs:elementname="Termin" type="TerminTyp"/>

</xs:sequence>

</xs:complexType>

Beispiel Fortsetzung:

<xs:complexTypename="TitelTyp">

<xs:sequence>

<xs:elementname="Titel"type="xs:string"/>

</xs:sequence>

<xs:attributename="lang"type="xs:string"/>

</xs:complexType>

<xs:complexTypename="TerminTyp">

<xs:sequence>

<xs:elementname="Ort"type="xs:string"/>

<xs:elementname="Wochentag"type="xs:string"/>

<xs:elementname="Uhrzeit"type="xs:string"/>

</xs:sequence>

<xs:attributename="Semester-Id"type="xs:string"/>

</xs:complexType>

</xs:schema>

XML (4)

Mehr zu XML-Schema folgt später auf Folie 34.

(25)

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>

XML-Beispiel “Musiksammlung“

Das Dokument zeigt deutlich den

hierarchischen Aufbau ausgehend vom

Wurzel-Element

MUSIKSAMMLUNG und den vorhandenen Subelementen.

(26)

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) >

XML-Beispiel “Musiksammlung“ : DTD

(27)

für das Beispiel „Musiksammlung“:

XML Daten – Formatierte Anzeige im Browser (1)

Browser zeigen typischerweise die Struktur des XML- Dokuments durch Einrückungen an!

Eine grafisch

formatierte Darstellung ist durch CSS

Formatierung möglich.

(28)

für das Beispiel „Musiksammlung“ mit CSS-Formatierung:

XML Daten – Formatierte Anzeige im Browser (2)

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 { ….

(29)

Genereller Ansatz:

XML-Sprachen (1)

SMGL

XML

MathML

XHTML SVG

X3D

spezielle DTD

spezielles XML-Schema spezielles XML-Schema spezielle DTD

(30)

Dokumente müssen XML-konform sein (Wohlgeformtheit), und zusätzlich die Einschränkungen und Regeln des

speziellen Dokumentformats einhalten (Gültigkeit)

XML-Sprachen (2)

XML

Spezielles

Dokumentformat, z.B. WetterML

als DTD oder Schema

Spezielles Dokument

wohlgeformt

gültig

(31)

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.

XML-Sprachen (4)

(32)

Fortsetzung:

 XML-Schema (XS): anstelle einer DTD wird eine XML- basierte Beschreibung der Dokumentstruktur einer XML- Syntax 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

XML-Sprachen (5)

(33)

XSLT ist eine Sprache, mit der beschrieben wird, wie ein XML- Dokument in ein anderes XML-Dokument umgewandelt werden soll.

XML-Quelldatei und ein XSLT- Stylesheet (Regeln für die Transformation)

Das Programm, das die XSLT- Steueranweisungen versteht wird XSLT-Prozessor genannt

XML-Sprachen (6)

XML- Datei

XSLT- Style- sheet

XML- Datei XSLT-

Prozessor

(34)

XML-Sprachen (7)

Transformation zwischen verschiedenen XML-Sprachen, zum Beispiel

 Dynamische Erzeugung von Webseiten

 Erzeugung von Grafiken (SVG)

(35)

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>

Dieser Teil beschreibt, dass eine Musiksammlung aus mehreren Alben (0 bis unbegrenzt) besteht.

XML-Schema (1)

musiksammlung

album

(36)

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>

</xs:element>

XML-Schema (2)

album

interpret saenger

band

albumtitel songs saengerin

(37)

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" />

</xs:schema>

XML-Schema (3)

songs

song

(38)

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.

SVG (1)

(39)

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!)

SVG (2)

(40)

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.

SVG (3)

(41)

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, …

SVG (4)

(42)

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>

SVG (5)

(43)

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>

SVG (6)

(44)

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

SVG (7)

(45)

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

MathML

Presentation markup:

<math>

<msup>

<mrow>

<mo>(</mo>

<mrow>

<mi>x</mi> <mo>+</mo><mn>2</mn>

</mrow>

<mo>)</mo>

</mrow>

<mn>3</mn>

</msup>

</math>

Content markup:

<math>

<apply>

<power/>

<apply>

<plus/>

<ci>x</ci>

<cn>2</cn>

</apply>

<cn>3</cn>

</apply>

</math>

Referenzen

ÄHNLICHE DOKUMENTE

ƒ Mit Document Document Type Type Definitions Definitions ( DTDs) können aber DTDs spezielle Auszeichnungssprachen mit konkreten Tags definiert werden:. ƒ werden Anwendungen

ƒ Datentypen keine eigenständige Objekte: beschreiben immer Inhalt von Element oder Attribut. ƒ Attribut-Werte

Element Node: price NodeList Text Node: 11.95 NodeList. Element

alle Zeichen erlaubt, die nicht ausdrücklich verboten.

Datentyp: gültiger Inhalt von Elementen oder Attributen Formal repräsentiert ein Datentyp eine Menge von gültigen Werten, den so genannten Wertebereich Wertebereich..

Wer hat Kontrolle über das Parsen: die Anwendung oder der

• Sobald der Parser eine syntaktische Einheit analysiert hat, benachrichtigt er die Anwendung und übergibt die entsprechende Analyse.. • Beachte: „Push” bezieht sich wiederum

ƒ verallgemeinerte Auszeichnungssprache (generalized markup language): keine Tags vorgegeben, beliebige Tags möglich. ƒ Vorteil: beliebige