1. XML Media Formats Robin Burke ECT 360

2. Outline Multiple XML documents SMIL HTML+TIME Break WML XHTML MP Final Project Presentation

3. Multiple XML documents Problem XSLT needs to access multiple XML documents Only has access to node-sets in document being processed Example curriculum designs course information

4. Solution document() function Retrieves document from URL can be used as part of an XPath expression <xsl:variable name="course-names" select="document('course-list.xml')/course- list/course/@name" />

5. SMIL Synchronized Multimedia Integration Language Define Common Standards for multimedia documents. SMIL 1.0 (1998) SMIL 2.0 (2001)

6. The Idea General document format integrating different types of independent media objects. Promote the notion of time and synchronization as a core functionality. Bring together major industrial players to define a common standard. RealPlayer, Flash support

7. SMIL document A Set of “components” accessible via URLs. Components have different media types: audio, video, text, images and objects. Intra- and Inter-object synchronization. User interactions: media controls and hyper-links (random access).

8. Organization of a SMIL document Two parts : Head : contains information of document level Body : contains the temporal scenario, animations, transitions and the media objects

9. Structure of a document toto.smi head body seq switch par Layout Region 1 Media Audio Channel Media Transition Animation Transition

10. Example

11. Document Head META element: description of the document properties and metadata (RDF) Title, author, expiration date, keywords, summary, …

12. Spatial Aspect Layout element Hierarchical Model with hotspots (regPoints) Layers instead of text flow (text flow for text !) Simple Positioning close to the CSS Model (x, y, z-index, fit)

13. Spatial Aspect Region 1Region 2 Region 3 b c a Time flow Regions and sub-regions for the spatial placement of media objects

14. Document Body: Synchronization Contains the temporal scenario of the document A scenario is defined recursively : Schedule elements Schedule = Parallel | Seq | Switch

15. Basic Media Objects Media Objects marked-up with: Audio, Video, Text, Img, Textstream, Animation, Ref, Param, et … Prefetch Attributes : Src : identifies the basic media object file (URL) rtsp://rtsp.example.org/video.mpg Type : mime type (eg. video/mpeg) Region : identifies the drawing surface Dur : duration of the media object

16. Synchronization Attributes The Dur (duration) attribute: “intrinsic”: the duration corresponds to the duration of the external file. “explicit”: the duration is specified in the document (dur= “15 s”) The repeat attribute: RepeatCount=“3” repeats the simple duration of the media. RepeatDur=“12 s” :

17. Synchronization Attributes The begin, end attributes: Value (begin= “13 s”) : offset relative to the parent element. Reference to another clock : (begin= “e2.end + 5 s ”) Reference to the absolute time reference: (begin= “wallclock(2001-01-01Z)” Reference to an asynchronous event (interactivity): (begin= “button.click”)

18. Media Clipping Spatial Clipping using regions and sub-regions Temporal Clipping using clip-begin et clip-end attributes (media objects are external files) <video id="a" src=“video.mpg" clip-begin=“smpte=00:01:45" clip-end=“smpte=00:01:55" … /> MediaSlice

19. Semantics : play in sequence a set of media objects Attributes Fill : used to make the object « persist » on the screen Remove : removes the object at end time Freeze : keeps the last frame at end time The sequential element

20. The parallel element Semantics : Play in parallel a set of media objects End time : maximum duration of child objects

21. Synchronization Arcs and Events a cb d... <text id="c" src="text" begin="id(d)" end=id(a)(end) />... Triggering of objects on events :... <video id="b" src="video.mpg” begin=“a.activateEvent" end=“a.activateEvent />... a c b

22. Switch element An element to choose from a set of content equivalent objects Choice is based on attribute values language, screen size, depth, bitrate, systemRequired …and user preferences....................

23. Animations Definition : A set of attributes are target of the animation A function (calc mode) makes these attributes evolve A control on the instants where the changes are applied Syntax animateMotion : graphical movements of elements animate : generic animation applied to element attributes from/to/by/calcMode set : discrete change of an attribute value at a given instant animateColor : animation in the color space

24. Animations <animate begin= "5s" dur="10s" attributeName="top" by="100" repeatCount="2.5" fill="freeze" calcMode="linear"/> Calc Mode : discrete, list of values with linear, log interpolation

25. Transitions Element : transition Type and Subtype (transition repository + variant) transIn and transOut attributes...... <img src="wolf.jpg" dur="5s" fill="transition" transIn="wipe2" transOut=“wipe1”... /> Transition

26. Hypermedia time-based links Compatible with (Xlink/Xpointer) Extension to the semantics of URLs http://foo.com/path.smil#ancre(begin(id(anch or)) Two types (a: whole object, area: part of it) Jump over time and space !! Attribute show Replace (default value) New (fork) Pause (procedure call)

27. Links with spatial and temporal anchors Anchor on a sub-surface of an object Anchor on a sub-duration of an object time

28. Example

29. HTML+TIME A set of extensions to HTML for building in animation Will eventually be replaced by XHTML + SMIL Usable now

30. Example

31. Break

32. Wireless Web Content WAP Wireless Application Protocol defines interaction style, not content WML older standard based on "card" metaphor supported by most phones XHTML MP MP = "mobile profile" regular HTML with restricted element set cHTML "compact" HTML used for iMode (Japan) migrating to XHTML MP

33. WAP 1.0 Gateway

34. WAP 2.0 Gateway

35. WML Wireless Markup Language content for cell phone display “microbrowser” Special characteristics small size multiple “pages” per download cards

36. WML Elements card a chunk of screen content title, id multiple cards in one WML document "deck" do link to built-in "options" and "accept" softkeys p text content a links wtai protocols for phone functions dial number, save in phone book img only wbmp supported

37. Example

38. Variable example

39. XHTML MP Different

40. Differences Multi-page vs deck can use multi-part message Some functionality gone variables softkeys Browser / device-dependence more important image formats table support CSS support

41. Example

42. Handling device differences Basic problem want the best display for each device device capabilities vary widely CSS not widely implemented CSS not enough Solution dynamic server-side page generation based on device profiles can be done with XSLT

43. Device-specific information WURFL Wireless Universal Resource File XML application

44. WURFL example...

45. Final Project Presentation 10% Previous milestones 10% Presentation 20% Design 25% Schema 35% XSLT

46. Presentation Whole team should be here Plan to stay to see all the projects Group assessment exercise