Embed Size (px)
Citation preview
XML Intro • Seite
Formatierungs- und Transformationssprachen
SGML
Met
aspr
ache
n
XML
HTML
XHTML
definiert
DSSSL
CSS
XSLXSLT
Auszeichnungssprachen
formatiert & transformiert
formatiert & transformiert
formatiert
XML Layout: Kontext 37
XML Intro • Seite
! Für die Verwendung unter HTML wurden Cascading Style Sheets (CSS) entwickelt. Sie gestatten eine Veränderung der im Browser voreingestellten Formatierung.
! CSS-Code kann sowohl direkt in HTML-Code integriert werden als auch als externe Datei zugeordnet werden.
Informationen unter: http://www.w3.org/style/CSS
XML Layout: CSS
Layout
38
XML Intro • Seite
Layout
<STYLE TYPE="text/css"> H1 { background-color : black; color : white } H2 { background-color : blue; color : read } H3 { background-color : black; color : white }</STYLE>
Verändert die Farben und Hintergrundfarben einiger Überschriftstypen.
XML Layout: CSS 39
XML Intro • Seite
Layout
Mit Stylesheets können auch Unterklassen von Anweisungen deniert werden.
<STYLE TYPE="text/css"> H1.wichtig { background-color : yellow; color : white } H1.unwichtig { background-color : white; color : gray }</STYLE>
<BODY><H1>normale Überschrift erster Ordnung</H1><H1 CLASS="wichtig">Wichtige Überschrift</H1><H1 CLASS="unwichtig">Nicht so wichtige Überschrift</H1></BODY>
XML Layout: CSS 40
XML Intro • Seite
Layout
! Pseudo-Formate: - z.B. display:none zum Ausblenden (nicht darstellen)
! Pseudo-Elemente: - z.B. :rst-letter, :rst-line zur speziellen Formatierung von Textteilen
- z.B. :before, :after zum Modizieren von Texten bei der Anzeige
! Pseudo-Klassen - z.B. :hover, :focus, :active zur Darstellung abhängig von
Benutzeraktionen
! Kontextabhängige Formatierung - z.B. für Elemente abhängig von bestimmten Attributwerten
- z.B. für Unterelemente abhängig von den im Dokument vorhandenen Oberelementen
! Strukturierung von Formatierungsinformation - Vererbung und verschiedene Formen zur Einbindung von Stylesheets
XML Layout: CSS 41
XML Intro • Seite
Formatierungs- und Transformationssprachen
SGML
Met
aspr
ache
n
XML
HTML
XHTML
definiert
DSSSL
CSS
XSLXSLT
Auszeichnungssprachen
formatiert & transformiert
formatiert & transformiert
formatiert
XML Layout: Kontext 42
XML Intro • Seite
Layout
! Sprache, mit der man die Formatierungsanweisungen für XML-Dokumente formulieren kann
! Abgeleitet aus der Document Style Semantics and Specication Language DSSSL
! Standardisierte Formatierung von XML-Dokumenten (W3C)! Kann ergänzend zu CSS verwendet werden, geht weit über CSS
hinaus! 90% der Formatierungselemente identisch zu CSS! Zweistuge Interpretation
- Tree Transformation (Ergebnisbaum aus XML-Struktur)- Formatierung (Präsentation in area-container, block area, line-area)
! http://www.w3.org/style/XSL
XML Layout: XSL 43
Struktur
XML Intro • Seite XML Layout: XSL 44
Layout Struktur
XML Intro • Seite
XSLT-Processor
Xpath-Processor
! Tree Transformation nach Regeln des W3C: XSL Transformation
! Transformation nicht nur für die Darstellung, auch für die Überführung in andere Datenformate nutzbar
XML-Dokument
XSLT-Stylesheet
XML-Parser
XML-Dokument
XML Layout: XSLT 45
Layout Struktur
XML Intro • Seite XML Layout: XSLT 46
XML Intro • Seite XML Layout: XSL 47
XML Intro • Seite XML Layout: XSLT 48
XML-Dokume
XSLT-Styleshee
XML-Parser
XML Intro • Seite
! Mögliche Ergebnisse: XML-Baum, HTML-Baum, Text
XML Layout: XSL 49
Layout Struktur
XML Intro • Seite
! Document Object Model (DOM)- Standardisierte Schnittstelle (API) für den Zugri" auf XML-Dokumente
- Baut intern den Baum des XML-Dokuments auf (Abstrakter Syntaxbaum)
- Zugri" über Programmier- oder Scriptsprache (Java, C++, JavaScript, VBScript,...)
! Simple API for XML (SAX)- Standardisierte Schnittstelle (API), die beim Parsen eines XML-
Dokuments Ereignisse zur Steuerung externer Programme anzeigt
! Informationen unter: http://www.w3.org/TR/WD-DOM/level-one-core und http://www.megginson.com/downloads/SAX/
XML Layout: DOM und SAX 50
Struktur
XML Intro • Seite
! Die Struktur eines beliebigen XML-Dokuments ist ein Baum.
! Xpath ist die XML Path Language-Stellt ein Adressierungsmodell für die Knoten bereit
-Die Knoten erhalten eine eindeutige Nummerierung
-Bildet z.B. die Grundlage für Xpointer und XSLT
-Navigationssprache, Abfragesprache
XML Layout: XPath 51
Struktur
XML Intro • Seite
<?xml version="1.0"
encoding="utf-8"
standalone="yes" ?>
<dok>
<kap title="Nettes Kapitel">
<pa>Ein Absatz</pa>
<pa>Noch ein Absatz</pa>
<pa>Und noch ein Absatz</pa>
<pa>Nett, oder?</pa>
</kap>
<kap title="Zweites Kapitel">
<pa>Ein Absatz</pa>
</kap>
</dok>
52
Ausdruck selektiert ...
/dok das Wurzel-Element dok
/* das Wurzel-Element unabhängig vom Namen (jedes wohlgeformte
XML-Dokument hat genau ein Wurzel-Element)
/dok/kap alle kap-Elemente innerhalb eines dok Elements
/dok/kap[1] das erste kap-Element innerhalb eines dok Elements
//pa alle pa-Elemente auf allen Ebenen (Vorsicht: langsam)
//kap[@title="Nettes Kapitel"]/pa alle Absätze des Kapitels „Nettes Kapitel“.
child::* alle Kindelemente des gegenwärtigen Knotens
child::pa alle pa-Kinder des gegenwärtigen Knotens
Struktur
XML Intro • Seite
! Reformierung von HTML als XML-Anwendung – XHTML (Dezember 1999)• Stärkere Modularisierung
• Formale Verizierbarkeit von Dokumenten
! WAP – Wireless Application Protocol – Markup Language (WML)• XHTML Mobile Prole soll WML ersetzen
! SVG (Scalable Vector Graphics) und MML (Math Markup Language) als weitere Bestandteile von XHTML
-Entwicklung – wird vom W3C vorangetrieben
XML Anwendungen: XHTML und WML 53
XML Intro • Seite
! Synchronized Multimedia Integration Language SMIL! Standardsprache (W3C) für die koordinierte Kombination von
zeitabhängigen Medien zu einer Multimedia-Präsentation - zeitliche Abhängigkeiten im Ablauf
- berücksichtigt auch nicht-zeitabhängige Medientypen (Text, Standbild)
- auch geeignet für Streaming, d.h. kontinuierliches Laden von Mediendaten über Netzwerke
- Version 1.0 Juni 1998
- Version 2.0 August 2001
- Version 3.0 (smil 3.0 candidate recommendation) Januar 2008
! Unterstützung durch RealPlayer, QuickTime, Ambulant Player! Bekannte Editoren: Graphical Interface for SMILE (GRInS), Adobe
GoLive
XML Anwendungen: SMIL 54
XML Intro • Seite 55
XML Intro • Seite
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head>
<layout> <root-layout width="356" height="356" backgroundColor="black"/> <region id="imgReg" width="256" height="256" left="50" top="50">
</layout> </head> <body>
<seq> <img region="imgReg" src="tiger.jpg" dur="4s"/> <img region="imgReg" src="elephant.jpg" dur="4s"/> <img region="imgReg" src="butterfly.jpg" dur="4s"/> </seq>
</body> </smil>
XML Anwendungen: SMIL 56
XML Intro • Seite XML Anwendungen: SMIL 57
• <layout>-Tag bestimmt Platzierung der Medienrepräsentation auf dem Bildschirm
- Optional: Wenn weggelassen, Standard-Layout durch Player
• <root-layout>: Größe des gesamten Darstellungsbereichs - Alternativ Mehrfenster-Layout (<top-layout>)
• <region>: Anzeigebereich (mit Namen für spätere Referenzierung)
• Hierarchische Layout-Struktur - Beliebige Schachtelung von Regionen
• Ausgewählte Attribute für Regionen: - t: Regel für die Größenanpassung von Mediendarstellungen
- z-index: Ebene in der Darstellung (höchster Z-Index „vorne“)
- soundlevel: Relative Lautstärke von Tonelementen
- close: Regel für Schliessen des Fensters bei Mehrfenster-Layout
XML Intro • Seite
! <ref/> - Generische Referenz auf Medien
! <animation/> - Animierte Grak, z.B. in Flash-Format (.swf-Dateien)
! <audio/> - Tondatei. z.B. in WAV-(.wav), MPEG-(.mp3) oder RealAudio-
Format (.rm) ! <brush/>
- Farbblock anstelle eines Clips ! <img/>
- Standbild, z.B. in JPEG-(.jpg), GIF-(.gif) oder PNG-Format (.png) ! <text/>
- Statischer Text (.txt) ! <textstream/>
-Textstrom, z.B. in RealText-Format (.rt) ! <video/>
-Videostrom, z.B. in MPEG-Format (.mpg) oder RealVideo-Format (.rm)
58
XML Intro • Seite
! <a/> -Hyperlink wie in HTML
-Anwendbar auf beliebige Clips (Text, Bilder, Video, …)
59
<body>
<par>
<img region="img_region" src="tiger.jpg"/>
<a href="slideshow2elephant.smil">
<text region="text" src="data:,Elephant"/>
</a>
</par>
</body>
XML Intro • Seite
! dur-Attribut (duration):
- (Einfache) Zeitdauer, für die ein Medienelement (Clip) aktiv ist
- Tatsächliche Zeitdauer kann z.B. durch Wiederholungen erhöht werden
! Zeitdauer bei zeitgebundenen Medien: - Abspielzeit wird der „natürlichen“ Zeitdauer des Clips angepasst (z.B.
Abschneiden)
! Zeitdauer bei statischen Medien (z.B. Bild): Standzeit
! Maßeinheit: „Uhrzeiten“ relativ zum Startzeitpunkt - Volle Zeitangabe: 01:15:03.25 – 1 Stunde, 15 Minuten, 3.25 Sekunden
- Partielle Angabe: 1:03 – 1 Minute, 3 Sekunden
- Partielle Angabe: 25 – 25 Sekunden
! Verschiedene Player haben (leider) verschiedene Alternativformate für Zeitmaße:
- RealPlayer: z.B. "4s" für 4 sec, QuickTime Player: z.B. "4sec" für 4 sec
- Standard (nur Zahl) wird von meisten Playern „verstanden“
60
t
XML Intro • Seite
! <seq> - Sequentieller Ablauf von Medienelementen
- Start des nächsten Elements nach Ende des vorangehenden Elements
- Möglichkeiten der Zeitsteuerung durch Attribute
! <par>
- Paralleler Ablauf von Medienelementen
- Gleichzeitiger Start der enthaltenen Medienelemente
- Ende bei Beendigung des längsten Medienelements
- Möglichkeiten der Zeitsteuerung durch Attribute
! <excl> (noch nicht in SMIL 1.0) - Gegenseitiger Ausschluss des Ablaufs
- Reihenfolge z.B. durch Benutzeraktion gegeben
- Möglichkeit der zeitlichen Verschachtelung
61
t
XML Intro • Seite
! Attribute begin und end -Angabe von Start- und Endzeitpunkt
-Relativ zur aktuellen Gruppe (par, seq, excl)
! Wertangaben bei begin und end: - (Relative) Zeitwerte
-Absolute Zeitwerte (durch Bezug auf ein wallclock-Objekt)
-Bezug auf Ereignisse !z.B. Mausklick: id.activateEvent !z.B. Start eines Clips: id.beginEvent
- „O"set“ auf Ereignisse !d.h. zusätzliche Zeitangabe, z.B. „id.beginEvent+5“
! Attribut ll -Steuerung des visuellen Erscheinungsbilds bei Ende
-Werte z.B.: remove, freeze, transition
62
XML Intro • Seite
! Übergang (transition) von einem visuell dargestellten Medienobjekt zum nächsten
! Grundbegri"e:
- Quellelement (source), Zielelement (destination) und Fortschritt (progress)
- Übergang beim Erscheinen (transIn) und beim Verschwinden (transOut)
! SMIL-Transitionen
- Klassische sogenannte „SMPTE-Transitionen“ ! z.B. barWipe, barnDoorWipe, irisWipe, doubleFanWipe, ...
- Transitionen haben eine Zeitdauer (begin, end, dur)
- Vielfältige Attributeinstellungen: ! Richtung, Farben, Wiederholung, Ränder, zeitlicher Verlauf, ...
- Deklaration im Kopfbereich einer SMIL-Datei mit id
- Anbindung an Medienobjekte mit Attributen transIn, transOut
63
<transition id="img_wipe" type="barWipe"
subtype="leftToRight" dur="3s"/>
<img ... transIn="img_wipe" fill="transition"/>
XML Intro • Seite
<?xml version="1.0"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head>
<meta name="title" content="PPC Slideshow with Dual Audio and Text Captions"/>
<meta name="generator" content="GRiNS Pro for SMIL 2.0, v2.2 Mobile win32 build 150"/> <meta name="author" content="Dick Bulterman"/>
<layout><root-layout id="Advanced_PPC_Slideshow" backgroundColor="black" width="240" height="270"/>
<region id="audio_1"/>
<region id="audio_2"/>
<region id="bkgd_image" left="0" width="240" top="0" height="270"/><region id="Images" left="18" width="220" top="6" height="240" z-index="1" fit="meet"/>
<region id="Captions" left="19" width="220" top="184" height="85" z-index="2"/>
</layout> <transition id="slideover" type="slideWipe"/>
<transition id="fade" type="fade"/>
<transition id="push" type="pushWipe"/> </head> ...
64
XML Intro • Seite
...<body> <par id="AdvancedPPCSlideshow"> <audio id="NYStateOfMind" region="audio_2"
src="NYCdata/NYStateOfMind.mp3" systemComponent="multiChannelAudio"/> <seq id="ImagesAndAudioSequence"> <par id="ImageTextAudio" dur="8s"> <img id="TitleA" region="Images" dur="8s" fill="transition" src="NYCdata/TitleA.gif"/> <audio id="Welcome" region="audio_1" begin="0" src="NYCdata/Welcome.mp3"/> </par> <par id="ImageTextAudio-0" begin="0"> <img id="TitleA1" region="Images" begin="0" dur="7s"
src="NYCdata/TitleA1.gif" transIn="fade"/> </par> <par id="ImageTextAudio-1"> <img id="TitleB" region="Images" dur="5s"
src="NYCdata/TitleB.gif" transIn="fade"/> <audio id="SIF-Intro" region="audio_1"
src="NYCdata/SIF-Intro.mp3"/> <text id="CapF0" region="Captions" dur="5s"
src="NYCdata/CapF0.txt"/> </par> ...
65
XML Intro • Seite 66
XML Intro • Seite
SGML
XML
Games
(X)HTML
VRML/X3D
QTVRStreaming Media
Warenwirtschafte/m-Commerce
CD/ROM
DVD/Bluray
SMIL
Social Software
FLASH
SVG
Zusammenfassung 67
XML Intro • Seite
!Was unterscheidet HTML und XML?!Welche Aufgabe erfüllt eine DTD?!Was wird bei der Validierung von XML-Code geprüft?!Wann ist XML-Code wohlgeformt?!Wann ist XML-Code gültig?!Welche Beispiele für XML-Anwendungen kennen Sie?!Wozu wird XSLT benötigt?!Was unterscheidet XSL von CSS?
Zusammenfassung 68
XML Intro • Seite
! Henning Behme, Stefan Mintert: XML in der Praxis, Addison-Wesley-Longman, 2002
! Charles F. Goldfarb, Paul Prescott: XML Handbuch , München, London: Prentice Hall, 1999
! Seiten des W3C zu XML: http://www.w3.org/XML/
! XML-Basics von Stefan Münz http://de.selfhtml.org/xml/ (deutschsprachig)
! http://www.gutenbergdigital.deQuellen und Literatur 69
XML Intro • Seite Quellen und Literatur 70
