Aplikace XML, významná konkrétní značkování
Obsah
Grafika, GUI..............................................................................................................1
SVG (Scalable Vector Graphics)............................................................................................1
Ukázka SVG obrázku ..........................................................................................................2
Struktura SVG....................................................................................................................2
SVG - Ukázka animace 2 (DOM + JavaScript) .........................................................................3
Struktura SVG animace (DOM + JavaScript)............................................................................3
SVG - Ukázka animace (SMIL) .............................................................................................5
Práce s SVG.......................................................................................................................6
Materiály k SVG.................................................................................................................6
XForms (XML Forms) .........................................................................................................6
XForms - ukázka.................................................................................................................6
XForms Model ...................................................................................................................7
XForms Propojeni Modelu s Ovládacími prvky.........................................................................7
XHTML ............................................................................................................................8
W3C Voicebrowser Activity .........................................................................................8
VoiceBrowser Activity.........................................................................................................8
VoiceXML ........................................................................................................................8
VoiceXML - zpracování.......................................................................................................9
VoiceXML - příklad ............................................................................................................9
VoiceXML příklad - pokračování.........................................................................................10
SRGS (Speech Recognition Grammar Specification)................................................................10
SRGS- příklad .................................................................................................................10
SISR (Semantic Interpretation for Speech Recognition) ............................................................11
Grafika, GUI
SVG (Scalable Vector Graphics)
•     Standard W3C (SVG 1.0, září 2001)
•     Jazyk pro popis 2D grafiky a grafických aplikací v XML
•     Primárně práce s vektorovou grafikou
•     Lze vkládat i bitmapovou grafiku
1
Aplikace XML, významná konkrétní značkování
Podpora animací (po propojení s jazykem SMIL, resp. pomocí JavaScriptu a DOM)
SMIL              -              Synchronized              Multimedia              Integration
(http://www.w3.org/TR/2005/REC-SMIL2-20051213/)
•    XML jazyk pro psaní interaktivních multimediálních prezentací
Language
Ukázka SVG obrázku
Obrázek 1. SVG Obrázek ke zdrojovému kódu na následujícím slídu
A
Struktura SVG
<?xml version="l.0" encoding="iso-8859-l"?>
<!— Generator: Adobe Illustrator 9.0, SVG Export Plug-In  —>
<!DOCTYPE svg [
<!ENTITY stO "fill:#FFFFFF;stroke:none;">
<!ENTITY stl "fill:#FFFFFF;stroke-width:6.6112;stroke-linecap:round;stroke
<!ENTITY st2 "stroke:#FFFFFF;stroke-width:6.6112;">
<!ENTITY st3 "fill:none;stroke:none;">
<!ENTITY st4 "fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-mi
<!ENTITY st5 "stroke:none;">
]>
<svg  width="48pt" height="48pt" viewBox="0 0 48 48" xml:space="preserve" xmlns="h <g id="Layer_x0020_3" style="&st4;"> <g>
<path style="&st2;" d="M41.7,35.3L26.6,9.4c-0.6-1-1.7-1.7-<path style="&stl;" d="M23.7,11L9.2 , 37h29.6L23 . 7 , llz"/> <path style="&st0;" d="M23.7,11.9L10.3,36.Ih27.51-14-24.lz <g>
<path style="&st5;" d="M24.1,34c-l.1,0-1.8-0.8-1.8-1.8c0-l </g> </g> </g> <g id="crop_x0020_marks" style="&st4;">
<path style="&st3;" d="M48,48H0V0h48v48z"/> </g>
</svg>
2
Aplikace XML, významná konkrétní značkování
SVG - Ukázka animace 2 (DOM + JavaScript)
Obrázek 2. SVG Animace (DOM + JavaScript)
Struktura SVG animace (DOM + JavaScript)
<svg xmlns="&ns svg;"
xmlns:xlink="&ns xlink;"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="320" height="200"
shape-rendering="optimizeSpeed"
onload="testAdobe();fade()"> <title>A16.3 - Fyzika - fáze 3</title> <desc>
Realistické řizeni rychlosti a zrychleni pomoci JavaScriptu vč. postupného změn </desc>
<script type="text/ecmascript">
<![CDATA[
function testAdobeO {
//created by Martin Hejral, 2003
//test if Adobe SVG Viewer 3 (ASV3) or greater is present -- only ASV3+ return "
//alert(navigator.appName+navigator.appVersion);
if(window.navigator) if( (navigator.appName=="Adobe SVG Viewer") && (navigator.appVersion>="3.0") )
return true;
alert("PROSÍM, nainstalujte novou verzi Adobe SVG Prohlizece!!! PLEASE, install
return false; }
3
Aplikace XML, významná konkrétní značkování
//global variables
var amp=50, scale=0.34, time=0, to=-l;
//perform fading animation function fade() {
//get pointer to animated objects
var objl = document.getElementByld('spherel') ;
var obj 2 = document.getElementByld('springl') ;
var s = y = Math.cos(time/1000) ;
//window.status="time = "+time/1000+" s";
//multiply COS t with amplitude
//shift sphere to base position y -= 50;
//scale spring s *= scale;
//set base position s += 0.34 + 0.32; time += 50;
//amplitude and scale decay amp = amp*999/1000; scale = scale*999/1000;
//modify SVG graphics
objl.setAttribute( "transform", "translate(0,"+y+")" );
obj2.setAttribute( "transform", "scale(1,"+s+")" );
//start timer
to = window.setTimeout("fade()" , 50);
}
]]>
</script>
<defs>
<symbol id="spring"> <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round
4
Aplikace XML, významná konkrétní značkování
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none"   stroke="#000000"   stroke-linecap="round"   stroke-linejoin="round
<path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round </symbol> <symbol id="sphere">
<radialGradient id="XMLID_l_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="l" style="stop-color:#000000"/>
<a:midPointStop  offset="0" style="stop-color:#FFFFFF"/>
<a:midPointStop  offset="0.5" style="stop-color:#FFFFFF"/>
<a:midPointStop  offset="l" style="stop-color:#000000"/>
</radialGradient>
<path fill="url(#XMLID_1_)" d="M32.5,168.6c0,9-7.3,16.3-16.3,16.3S0,177.5,0,168. </symbol> <symbol id="fix point">
<path fill="none" stroke="#000000" stroke-width="6" d="M8.3,3hl6"/> </symbol> </defs>
<!-- symboly vlozime do obrazu --> <use id="springl" x="50" xlink:href="#spring">
</use>
<use id="spherel" x="50" xlink:href="#sphere"> </use>
<use x="50" xlink:href="#fix_point"> </use>
<!-- obrys platná -->
<rect x="0" y="0" width="319" height="199" fill="none" stroke="blue" /> </svg>
SVG - Ukázka animace (SMIL)
Obrázek 3. Ukázka animovaného SVG (nutno použít prohlížeč s podporou jazyka SMIL; převzato z Kurz SVG animace na serveru interval.cz)
5
Aplikace XML, významná konkrétní značkování
Práce s SVG
•     API - např. knihovna Batik (http://xmlgraphics.apache.org/batik/)
•     Export/Import různé grafické editory (Adobe Ilustrátor, Inkscape,...)
Materiály k SVG
•     W3C - http://www.w3.org/TR/SVGl 1/
•     W3Schools - http://www.w3schools.com/svg/default.asp
•     Průvodce                                    SVG                                    (interval.cz) http://interval.cz/clanky/pruvodce-svg-scalable-vector-graphics-v-polovine-roku-2006/
XForms (XML Forms)
•     Náhrada (X)HTML Formulářů
•     Rozděluje XHTML formuláře do tří částí:
1.     XForms model.
2.     Data daného formuláře
3.     Uživatelské rozhraní
Doporučení W3C (verze 1.0, třetí edice, říjen 2007)
•     Zatím velmi špatná podpora v prohlížečích
XForms - ukázka
Obrázek 4. Ukázkový formulář
6
Aplikace XML, významná konkrétní značkování
Select Payment Method: ť1" Cash C Credit Credit Card Number: Expiration Date: Submit
XForms Model
<xforms:model>
<xforms:instance>
<ecommerce xmlns="">
<method/>
<number/>
<expiry/>
</ecommerce>
</xforms:instance>
<xforms:submission action="http://example.com/submit" method="post" id="submit" </xforms:model>
XForms Propojeni Modelu s Ovládacími prvky
<selectl ref="method">
<label>Select Payment Method:</label>
<item>
<label>Cash</label> <value>cash</value>
</item>
<item>
<label>Credit</label> <value>cc</value>
</item> </selectl> <input ref="number">
<label>Credit Card Number:</label> </input> <input ref="expiry">
<label>Expiration Date:</label> </input> <submit submission="submit">
<label>Submit</label> </submit>
7
Aplikace XML, významná konkrétní značkování
XHTML
Vznikl přepisem HTML pomocí pravidel XML
•     uzavírání elementů
•     atributy v uvozovkách
Aktuální verze 2.0
•     Používaná verze 1.1
•     strict - dbá na oddělení dat od prezentační vrstvy, všechny formátovací atributy a elementy jsou zapovězené
•    formátování řešeno pomocí CS S
•     transitional - umožňuje použití formátovacích atributů a elementů
W3C Voicebrowser Activity
VoiceBrowser Activity
Sada standardů pro hlasové a dialogové aplikace:
•     VoiceXML
•     SRGS
•     SISR
•     CCXML
•     Standardy W3C
VoiceXML
•     Jazyk pro popis dialogových rozhraní
Primárně zaměřen na použití v telefonních aplikacích
Aplikace XML, významná konkrétní značkování
•     automatizace telefonní podpory
•     informace o spojeních
•     Rezervace lístků
Standard W3 C (aktuální verze 2.1, dokončuj e se verze 3.0)
VoiceXML - zpracování
•    Zapotřebí VoiceXML platformu/interpreter
•     OptimTalk, public VoiceXML, JVoiceXML
•     Asterisk+VoiceGlue, Asterisk+OpenVXI
•     Vkládání VoiceXML formulářů do XHTML
•     využití jmenných prostorů (dříve W3C submission XHTML+Voice profile 1.0)
•     Podpora v prohlížečích Opera a Firefox
VoiceXML - příklad
<?xml   version="l.0"   encoding="UTF-8"?>
<vxml version="2.0" xmlns="http://www.w3.org/2001/vxml"> <form id="pizza-mixed">
<grammar src="pizza.grxml"/>
<initial name="pizzaall"> <prompt>Welcome to FI pizzeria</prompt>
<nomatch   count="2 "Xassign  name="pizzaall"   expr="true"/x/nomatch> <noinput   count="2 "Xassign  name="pizzaall"   expr="true"/x/noinput>
</initial>
<field name="kind"> <prompt>What kind of pizza do you want?</prompt> <nomatch>We have salami, mozzarela and appolo pizza</nomatch> <noinput>We have salami, mozzarela and appolo pizza</noinput> <grammar src="pizza.grxml#kind"/>
</field>
<field name="topping"> <prompt>What topping do you want?</prompt> <nomatch>We offer ketchup and chilli.</nomatch> <noinput>We offer ketchup and chilli.</noinput>
9
Aplikace XML, významná konkrétní značkování
<grammar src="pizza.grxml#topping"/> </field>
VoiceXML příklad - pokračování
<field name="drink">
<prompt>What do you want to drink?</prompt> <nomatch>Select one of coke, sprite and watter</nomatch> <noinput>Select one of coke, sprite and watter</noinput> <grammar src="pizza.grxml#drink"/> </field>
<field name="ack"> <prompt>Did you ordered <value expr="kind"/> pizza with <value expr="topping"/> and <value expr="drink"/>?</prompt> <grammar src="yesno.grxml"/> </field> <filled> <if cond="ack=='yes'">
<prompt>Order submited</prompt> <else/>
<clear namelist="kind topping drink ack"/> </if> </filled> </form> </vxml>
SRGS (Speech Recognition Grammar Specification)
•    XML formát pro popis bezkontextovych gramatik pro popis vstupů, které má akceptovat dané vstupní pole
Součást W3 C Voice Browser Activity
Standard - aktuální verze 1.0
SRGS - příklad
<?xml version="l.0" encoding="UTF-8"?> <grammar root="mixed" xml:lang="en US"> <rule id="mixed">
<item><ruleref special="GARBAGE"/> <ruleref uri="#kind"/> pizza <rul
</item>
10
Aplikace XML, významná konkrétní značkování
<tag>
{
$.kind=$kind;
$.topping=$topping;
$.drink=$drink;
} </tag> </rule>
<rule id="kind"> <one-of> <item>salami</item> <item>mozzarela</item> <item>appolo</item> </one-of> </rule>
</grammar>
SISR (Semantic Interpretation for Speech Recognition)
•     Jazyk sloužící k interpretaci rozpoznaných vstupů. Syntaxe vychází z jazyka ECMAScript.
•     Využívá se např. v SRGS gramatikách (viz. předchozí slide)
11