Part of a course on multimedia document engineering, presented at EPFL during the Spring 2009 semester. Quick introduction to the W3C SVG specification and Model Driven User Interface Design.

1. XML based user interaction through Rich Interfaces - SVG - MULTIMEDIA DOCUMENT Stéphane Sire (speaking)

3. PART 1 Rich User Interaction Style

4. EVOLUTION OF USER GRAPHICAL INTERACTION STYLES Desktop Web Mobile Command Line Direct (1983) Manipulation Point & Click (hypertext) HTML Forms WAP Rich User Interaction WIMP Rich Desktop Application (RDA) Rich Internet Application (RIA) iPhone and alike (touch based)

10. EXTENSIVE USE OF ANIMATIONS User's guidance System state change Visual state transition Source www.joehewitt.com/iui/samples/music.html Source www.lemonde.fr (choose Journal Electronique) Source www.panic.com/goods/

18. PART 2 Iterative Design and Supportive Technologies

19. PRODUCT DEVELOPMENT PROCESS Reprinted from "Sketching User Experiences" (Buxton, 2007)

20. ITERATIVE DESIGN

22. EXAMPLES Source: Nielsen Source: Hiser Source: Alex Poole

23. CLASSICAL DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, … Designers Executable Code Browser Plugin Runtime Env. Feedback loop How to increase the number of iterations ?

24. MODEL DRIVEN DEVELOPMENT CYCLE Users Sketches Storyboard Wireframes IA diagrams Programmers Interaction, Visual, Motion, … Designers Graphical models Animation models Other models… XML Browser, Plugin Runtime Env. Executable code

26. A SHORT EXAMPLE Interaction Designer Visual Designer Programmer: + Javascript Graphical Model File(s) Example from Adobe dev web site

27. ADDING MORE MODELS…. Interaction Designer Visual Designer Graphical Model Behavior Modelling with State Machines Finite State Machine Models

29. PART 3 Web Standards for Graphical Design: SVG and alike

31. WEB STANDARDS AND MDA Markup Only Code Behind Markup Behind Code Only XML XML Imperative Prog. Lang. Imperative Prog. Lang. Definition of Interactive Components Instantiation of Interactive Components Today Web applications Future of applications Today Desktop applications

32. W3C AND RICH USER INTERACTION (*) simplified with specialized toolkits (scriptaculous, jQuery, etc) Characteristics Standard solution Better graphics SVG or CSS3 (with HTML) Animation SMIL/ SVG animation module DOM Manipulation with Javascript(*) Creative layout SVG or CSS (with HTML) DOM Manipulation with Javascript(*) Better feedback time XMLHttpRequest Cross domain XHR Borrowing from other styles All of the above

34. SVG VS. FLASH (*) see http://www.w3.org/TR/SVG/minimize.html Property SWF SVG XML - Std W3C No Yes Metadata Yes, propietary Yes, RDF compatible Format Binary Text Size < SVG > SWF : but can be compressed with gzip by about 80% (*) Runtime Plugin (200K) Native (Opera, Safari , Firefox, … ) Source No Yes (text is searchable and selectable) Audio/Video Yes Yes (SVG 1.2 Tiny)

40. MORE PATH DATA VOCABULARY See details on http://www.w3.org/TR/SVG/paths.html Command Args (can be repeated)+ Description A, a rx ry x-axis-rotation direction sweep x y Elliptical arc C, c x1 y1 x2 y2 x y Cubic B ézier curve from current point to x y with control points x1 y2 and x2 y2 S, s x2 y2 x y Cubic B ézier curve with control point as the reflection of the reflection of second control point of a C, c command Q, q x1 y1 x y Quadratic B ézier curve from current point to x y with control point x1 y1 T, t x y Quadratic B ézier curve with control point as the reflection of previous control point of a Q, q command

52. CONCLUSION: RIA STANDARDS AND TECHNOLOGIES X11 1987 1992 1994 2002 2004 Shockwave HTML HTML 4.0 Flash/SWF X-HTML SVG Javascript DOM XMLHttpRequest Ajax CSS IFrame 1990 1996 1998 2000 2006 OpenGL PDF Direct 3D OpenGL 2.0 Mosaic Netscape IE Firefox Konfabulator AIR Silverlight XAML Flex/MXML XUL WVG

54. EXTRA SLIDES

55. COMPLETE SVG FILE EXAMPLE <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <!DOCTYPE svg [ <!-- entities etc. here --> ]> <svg version=&quot;1.1&quot; baseProfile=&quot;full&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;8cm&quot; height=&quot;6cm&quot;> <defs> <!-- resources to be reused --> <linearGradient id=&quot;Gradient01&quot;> <stop offset=&quot;20%&quot; stop-color=&quot;#39F&quot; /> <stop offset=&quot;90%&quot; stop-color=&quot;#F3F&quot; /> </linearGradient> <rect id=&quot;shape&quot; width=&quot;1cm&quot; height=&quot;1cm&quot; stroke=&quot;blue&quot; stroke-width=&quot;0.1cm&quot;/> </defs> <!-- content --> <rect x=&quot;.1cm&quot; y=&quot;.1cm&quot; width=&quot;7.9cm&quot; height=&quot;5.9cm&quot; fill=&quot;none&quot; stroke=&quot;black&quot; stroke-width=&quot;1px&quot; /> <use x=&quot;1cm&quot; y=&quot;1cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;#BBB&quot;/> <use x=&quot;4cm&quot; y=&quot;1cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;url(#Gradient01)&quot;/> <use x=&quot;1cm&quot; y=&quot;4cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;url(#Gradient01)&quot;/> <use x=&quot;4cm&quot; y=&quot;4cm&quot; xlink:href=&quot;#shape&quot; fill=&quot;blue&quot;/> </svg>