Aplikace XML: SVG, XForms, VoiceXML

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

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-linejoin:round;">
        <!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-miterlimit:4;">
        <!ENTITY st5 "stroke:none;">
]>
<svg  width="48pt" height="48pt" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
        <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.9-1.6c-1.2,0-2.3,0.7-2.9,1.7L6.3,35.4c-0.6,1-0.6,2.3,0,3.3c0.6,1,1.7,1.6,2.9,1.6h29.6c1.2,0,2.3-0.6,2.9-1.7c0.6-1,0.6-2.3,0-3.3z"/>
                        <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.1,0.7-1.8,1.8-1.8c1.1,0,1.8,0.7,1.8,1.8c0,1-0.7,1.8-1.8,1.8h0z M22.9,29.3l-0.4-9.1h3.2l-0.4,9.1h-2.3z"/>
                        </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šování amplitudy kmitů.
 </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 "Adobe SVG Viewer"
  //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 latest version of the Adobe SVG Viewer!!!");
  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" d="M16.3,3v9.9l9.1,2.4L7.1,20.2"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,20.2l18.3,4.9L7.1,30"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,30l18.3,4.9L7.1,39.8"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,39.8l18.3,4.9L7.1,49.5"/>

  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,49.5l18.3,4.9L7.1,59.3"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,59.3l18.3,4.9L7.1,69.1"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,69.1L25.4,74L7.1,78.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,78.9l18.3,4.9L7.1,88.7"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,88.7l18.3,4.9L7.1,98.5"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,98.5l18.3,4.9l-18.3,4.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,108.3l18.3,4.9L7.1,118"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,118l18.3,4.9l-18.3,4.9"/>
  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,127.8l18.3,4.9l-18.3,4.9"/>

  <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M7.1,137.6l18.3,4.9l-9.1,2.4v16"/>
 </symbol>
 <symbol id="sphere">
   <radialGradient id="XMLID_1_" cx="10.75" cy="162.811" r="23.0054" fx="10.75" fy="162.811" gradientUnits="userSpaceOnUse">
   <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.6s7.3-16.3,16.3-16.3S32.5,159.6,32.5,168.6z"/>
 </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

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
- 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
- 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>
   <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="GARBAGE"/> <ruleref uri="#topping"/> and <ruleref uri="#drink"/>
   </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. predchozí slide)