1
Aplikace XML: SVG, XForms, VoiceXML
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) ................................................................ 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 Voice Browser 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
SSML ....................................................................................................................... 9
SSML - ukázka hlasitosti a pauz ................................................................................. 10
SSML ukázka modelování intonace .............................................................................. 10
PLS ........................................................................................................................ 10
PLS Struktura .......................................................................................................... 10
PLS - ukázka ........................................................................................................... 11
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í
Aplikace XML: SVG,
XForms, VoiceXML
2
Ukázka SVG obrázku
Obrázek 1. SVG Obrázek ke zdrojovému kódu na následujícím slidu
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>
Aplikace XML: SVG,
XForms, VoiceXML
3
<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
//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"
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"
<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/)
Aplikace XML: SVG,
XForms, VoiceXML
5
• Export/Import různé grafické editory (Adobe Ilustrator, Inkscape, OpenOffice Draw, ...)
• Ruční vytvoření zdrojového souboru
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:
Aplikace XML: SVG,
XForms, VoiceXML
6
• cesta - popisuje lomenou čáru, křivku, element path
• rect
• 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 Voice Browser Activity
VoiceBrowser Activity
• Sada standardů pro hlasové a dialogové aplikace:
Aplikace XML: SVG,
XForms, VoiceXML
7
• VoiceXML
• SRGS
• SISR
• SSML
• PLS
• ...
• 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>
Aplikace XML: SVG,
XForms, VoiceXML
8
<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>
<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">
Aplikace XML: SVG,
XForms, VoiceXML
9
<rule id="mixed">
<item><ruleref special="GARBAGE"/> <ruleref uri="#kind"/> pizza <ruleref special
</item>
<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)
SSML
• Speech Synthesis Markup Language
• Standard W3C
• aktuální verze 1.1 [http://www.w3.org/TR/speech-synthesis11/] (září 2010)
• Slouží k popisu řečových charakteristik u textu určeného pro syntézu řeči
• hlasitost
• prozodie
• zdůraznění
• rychlost
• hlas (muž, žena, neutrální)
• ...
• Obsahuje i prostředky k popisu výslovnosti slov z různých jazyků
Aplikace XML: SVG,
XForms, VoiceXML
10
• proslov lze např. zapsat pomocí mezinárodní fonetické abecedy (IPA)
SSML - ukázka hlasitosti a pauz
<?xml version="1.0" encoding="utf-8"?>
<speak version='1.1" xmlns="http://www.w3.org/2001/10/synthesis"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/TR/speech-synthesis11/sy
<prosody volume="loud">
Dobré ráno. <break />
<prosody>
<prosody volume="default">
Jak se máte?
</prosody>
</speak>
SSML ukázka modelování intonace
<speak ...>
<prosody contour="(0%,50Hz) (75%, +10%) (80%, +20%) (90%,+30%)">
Máš se dobře?
</prosody>
</speak>
PLS
• Pronunciation Lexicon Specification [http://www.w3.org/TR/2008/REC-pronunciation-
lexicon-20081014/]
• standard W3C
• aktuální verze - 1.0, říjem 2008
• Slouží k popisu výslovnosti různých slov, zkratek, ...
• Využívá se při:
• syntézu řeči (v rámci SSML) - vyslovnost
• převzatých slov
• zkratek
• číselných údajů
• ...
• rozpoznávání řeči (v rámci SRGS) - PLS umožňuje popsat různé výslovnosti některých slov (nutné
pro korektní rozpoznání slova)
PLS Struktura
• Kořenový element - lexikon
Aplikace XML: SVG,
XForms, VoiceXML
11
• obsahuje jeden nebo více slovníkových hesel - element lexeme
• obsahuje:
• jeden nebo více zápisů daného slova - element grapheme
• jednu nebo více výslovností daného slova - element phoneme
• výslovnost zapsána např.pomocí IPA, SAMPA, ...
PLS - ukázka
<?xml version="1.0" encoding="utf-8"?>
<lexicon version="1.0"
xmlns="http://www.w3.org/2005/01/pronunciation-lexicon"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2005/01/pronunciation-lexicon
http://www.w3.org/TR/2007/CR-pronunciation-lexicon-20071212/pls.xsd"
alphabet="sampa" xml:lang="cs-CZ">
<lexeme>
<grapheme>ČSR</grapheme>
<phoneme>tSe: es er</phoneme>
<phoneme>tSeska: republika</phoneme>
</lexeme>
</lexicon>