1
Aplikace XML: SVG, XForms, VoiceXML
Obsah
Grafika, GUI ..................................................................................................................... 1
SVG (Scalable Vector Graphics) ................................................................................... 1
Ukázka SVG obrázku .................................................................................................. 1
Struktura SVG ........................................................................................................... 2
SVG - Ukázka animace 2 (DOM + JavaScript) ................................................................ 2
Struktura SVG animace (DOM + JavaScript) ................................................................... 2
SVG - Ukázka animace (SMIL) .................................................................................... 4
Práce s SVG .............................................................................................................. 4
Použití SVG ve webových stránkách ............................................................................. 5
Základní značky ......................................................................................................... 5
Základní značky II. ..................................................................................................... 6
Materiály k SVG ........................................................................................................ 6
W3C Voicebrowser Activity ................................................................................................. 6
VoiceBrowser Activity ................................................................................................. 6
VoiceXML ................................................................................................................ 7
VoiceXML - zpracování ............................................................................................... 7
VoiceXML - příklad .................................................................................................... 7
VoiceXML příklad - pokračování .................................................................................. 8
SRGS (Speech Recognition Grammar Specification) ......................................................... 8
SRGS - příklad .......................................................................................................... 8
SISR (Semantic Interpretation for Speech Recognition) ..................................................... 9
Grafika, GUI
SVG (Scalable Vector Graphics)
* Standard W3C (SVG 1.2, listopad 2008)
* Jazyk pro popis 2D grafiky a grafických aplikací v XML
* Primárně práce s vektorovou grafikou
* Lze vkládat i bitmapovou grafiku
* Podpora animací (po propojení s jazykem SMIL, resp. pomocí JavaScriptu a DOM)
* SMIL - Synchronized Multimedia Integration Language (http://www.w3.org/TR/2005/REC-
SMIL2-20051213/)
* XML jazyk pro psaní interaktivních multimediálních prezentací
Ukázka SVG obrázku
Obrázek 1. SVG Obrázek ke zdrojovému kódu na následujícím slidu
Aplikace XML: SVG,
XForms, VoiceXML
2
Struktura SVG
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 9.0, SVG Export Plug-In -->
<!DOCTYPE svg [
<!ENTITY st0 "fill:#FFFFFF;stroke:none;">
<!ENTITY st1 "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-mit
<!ENTITY st5 "stroke:none;">
]>
<svg width="48pt" height="48pt" viewBox="0 0 48 48" xml:space="preserve" xmlns="ht
<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-2
<path style="&st1;" d="M23.7,11L9.2,37h29.6L23.7,11z"/>
<path style="&st0;" d="M23.7,11.9L10.3,36.1h27.5l-14-24.1z"
<g>
<path style="&st5;" d="M24.1,34c-1.1,0-1.8-0.8-1.8-1.8c0-1.
</g>
</g>
</g>
<g id="crop_x0020_marks" style="&st4;">
<path style="&st3;" d="M48,48H0V0h48v48z"/>
</g>
</svg>
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é řízení rychlosti a zrychlení pomocí JavaScriptu vč. postupného zmenš
</desc>
<script type="text/ecmascript">
<![CDATA[
function testAdobe() {
//created by Martin Hejral, 2003
//test if Adobe SVG Viewer 3 (ASV3) or greater is present -- only ASV3+ return "A
Aplikace XML: SVG,
XForms, VoiceXML
3
//alert(navigator.appName+navigator.appVersion);
if(window.navigator)
if( (navigator.appName=="Adobe SVG Viewer") && (navigator.appVersion>="3.0") )
return true;
alert("PROSIM, nainstalujte novou verzi Adobe SVG Prohlizece!!! PLEASE, install l
return false;
}
//global variables
var amp=50, scale=0.34, time=0, to=-1;
//perform fading animation
function fade() {
//get pointer to animated objects
var obj1 = document.getElementById('sphere1');
var obj2 = document.getElementById('spring1');
var s = y = Math.cos(time/1000);
//window.status="time = "+time/1000+" s";
//multiply COS t with amplitude
y *= amp;
//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
obj1.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"
Aplikace XML: SVG,
XForms, VoiceXML
4
<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_1_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy=
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#000000"/>
<a:midPointStop offset="0" style="stop-color:#FFFFFF"/>
<a:midPointStop offset="0.5" style="stop-color:#FFFFFF"/>
<a:midPointStop offset="1" 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.6
</symbol>
<symbol id="fix_point">
<path fill="none" stroke="#000000" stroke-width="6" d="M8.3,3h16"/>
</symbol>
</defs>
<!-- symboly vlozime do obrazu -->
<use id="spring1" x="50" xlink:href="#spring">
</use>
<use id="sphere1" x="50" xlink:href="#sphere">
</use>
<use x="50" xlink:href="#fix_point">
</use>
<!-- obrys platna -->
<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)
Práce s SVG
* API - např. knihovna Batik (http://xmlgraphics.apache.org/batik/)
* Export/Import různé grafické editory (Adobe Ilustrator, Inkscape, OpenOffice Draw, ...)
* Ruční vytvoření zdrojového souboru
Aplikace XML: SVG,
XForms, VoiceXML
5
Použití SVG ve webových stránkách
* XHTML, HTML5:
* pomocí jmenných prostrorů
* HTML5
* lze vkládat přímo značky jazyka SVG
* Vždy
* pomocí značky img
* Výhody použití SVG ve webových stránkách
* při kombinaci SVG s např. RDF, resp. vhodně okomentovaným SVG - lepší přístupnost pro uživatele
s postižením zraku
* jedná se otevřený standard
* snadno strojově zpracovatelné
* Nevýhody použití SVG ve webových stránkách
* u některých prohlížečů chybí podpora pro SVG - nutno řešit pomocí zásuvných modulů
* Nekorektní/neúplná/chybějící podpora pro práci se jmennými prostory u některých prohlížečů - nutno
vkládat externí soubory pomocí značky img
Základní značky
* svg - kořenový element, má atributy:
* xmlns - povinný, http://www.w3.org/2000/svg
* version - nepovinný, verze SVG (1.0, 1.1,1.2)
* baseProfile - nepovinný, profil použitého svg (none, tiny, basic, full)
* width, height - nepovinné
* viewBox - nepovinný, omezení velikosti obrázku
* title, desc - slovní popis obsahu obrázku nebo jeho části
* g - slouží pro seskupování více grafických primitiv do logických celků
* defs - slouží k definici uživatelem definovaných značek
* image - slouží k vložení bitmapového obrázku
* grafická primitiva:
* cesta - popisuje lomenou čáru, křivku, element path
* rect
Aplikace XML: SVG,
XForms, VoiceXML
6
* circle
* ellipse
* ...
Základní značky II.
* grafická primitiva:
* cesta - popisuje obecný tah, element path
* rect
* circle
* ellipse
* line
* polyline
* ...
* text
* text
* tspan
* textArea
* ...
* ...
Materiály k SVG
* W3C - http://www.w3.org/TR/SVG11/
* 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/
W3C Voicebrowser Activity
VoiceBrowser Activity
* Sada standardů pro hlasové a dialogové aplikace:
* VoiceXML
* SRGS
Aplikace XML: SVG,
XForms, VoiceXML
7
* SISR
* CCXML
* ...
* Standardy W3C
VoiceXML
* Jazyk pro popis dialogových rozhraní
* Primárně zaměřen na použití v telefonních aplikacích
* automatizace telefonní podpory
* informace o spojeních
* Rezervace lístků
* ...
* Standard W3C (aktuální verze 2.1, dokončuje se verze 3.0)
VoiceXML - zpracování
* Zapotřebí VoiceXML platformu/interpreter
* OptimTalk, publicVoiceXML, 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="1.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"><assign name="pizzaall" expr="true"/></nomatch>
<noinput count="2"><assign name="pizzaall" expr="true"/></noinput>
</initial>
<field name="kind">
<prompt>What kind of pizza do you want?</prompt>
<nomatch>We have salami, mozzarela and appolo pizza</nomatch>
Aplikace XML: SVG,
XForms, VoiceXML
8
<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>
<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 bezkontextových gramatik pro popis vstupů, které má akceptovat dané vstupní
pole
* Součást W3C Voice Browser Activity
* Standard - aktuální verze 1.0
SRGS - příklad
<?xml version="1.0" encoding="UTF-8"?>
<grammar root="mixed" xml:lang="en_US">
<rule id="mixed">
<item><ruleref special="GARBAGE"/> <ruleref uri="#kind"/> pizza <ruleref special
</item>
<tag>
{
Aplikace XML: SVG,
XForms, VoiceXML
9
$.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. predchozí slide)