The XHTML+SMIL Language SMIL Europe Paris, France Patrick Schmitz cogit@ludicrum.org 12:20 PM PT Feb 6, 2003

Title slide for talk at SMIL Europe 2003

Waterman_destiny-l2.jpg clocks2.gif bandh3.jpg Motivation and Background Theory Issues with XHTML and CSS Some Techniques and Tricks How to learn more Common authoring semantics Leverage SMIL in HTML/CSS content Provide Time model for XML documents Well-defined syntax and semantics One clock for the whole document Synchronize HTML to TV, Radio, etc. Need common, straight-forward authoring models Need flexible approach to syntax Sometimes want inline syntax Sometimes want to model like style Sometimes need a separate document Need to be able to mix approaches Code generation (authoring tool or XSLT) can twist requirements. XHTML+SMIL lets Web developers: Control DHTML properties along a timeline Integrate media as part of their page description Synchronize media elements and actions in the page Reduces dependency on scripting as a way of controlling animation of properties Authors are not programmers How tools support authoring Round trip and exchange support Iterative authoring Script alternative usually primitive Stateful, brittle, expensive Language does support a DOM Simple Banner Ads Product Sales presentation Media elements: video, audio, et al. Timing elements: par, seq, excl timeContainer attribute Timing attributes: begin, end, et al. Applied to most HTML content Includes event-based/interactive declaration Animation support CSS properties, motion, effects, etc. timeAction controls semantics of adding timing to HTML elements intrinsic: defined for phrasal and presentation elements, reverts to visibility for text, div, etc. Schedules media. display, visibility control style style controls inline style (CSS/XSL) class adds class name to XML class property OM containment model clash HTML defines content containment, e.g. tables and lists Presentation constraints can determine declaration order and proximity Time containment requires child-declaration order HTML and SMIL containment often orthogonal, sometimes irreconcilable! Solutions/approaches Long sync-arcs and explicit timing Timing proxies Animating inherited CSS values Cannot specify/control side-effects. Animating class, style Class attribute animation very useful, needs notion of additive strings Style attribute brings up similar points, but more complex Animating head elements Cannot time link elements, but can animate them. Cool things that work well Things that look ugly or perform poorly Implementation details/bugs you will fight, and how you can work around (some of) them. These are guidelines, not hard and fast rules. Use Animation where it is appropriate Animation, motion, etc. is great for transitions Can help to tell a story with dynamism With interaction, can increase user involvement Animation incurs a cognitive cost in content Motion, jitter, flashing distract, reduce comprehension Provide an obvious way to stop/mute animations Text scaling (size interpolation) Printing font model behaves horribly Static changes (especially style) can be effective Motion or scaling with layout dependents must be done carefully Can be a boon with expanding menus Can make the page jitter and jerk Motion is a good, inexpensive transition Consider redraw rectangles IE Paint banding will sometimes bite you Authoring considerations Don't forget CSS positioning!!! Faster motion often looks smoother Use acceleration and deceleration Author motions backwards for fine end-positioning Color animations vs. fade transitions Smoother, cleaner rendering Fade text to background, fade in highlights Can even work over patterns and images Small range produces nice, subtle dynamism Authoring considerations Use acceleration/deceleration to adjust for perceptual color space Would be nice to have expressions here Good interactive model for compact layouts Works well in XHTML+SMIL Must be done with care Authoring considerations Scale up regions (e.g. div) with simple color background Hide text, images while scaling, reveal when done. Makes content more compelling Use timing for delays like hover Automatic user-adaptation - no need to guess reading speed Reduce clutter animation on the page, without reducing coolness Ensures only one popup visible at once For help balloons, context menus, etc. Useful for orientation outline. Can stack for certain kinds of popups. Use timing proxy when elements to be controlled are scattered Define an excl with dummy timed elements Define interactive timing on the dummy elements Tie real elements to proxies with begin/end sync arcs Declarative language great basis for extensions Fulfills 80/20 rule Provides OM for timing Example: expression values in animation Mocked up with script behavior Binary behavior provides performance, additional features First steps toward compound timed document Links multiple timed documents into unified timegraph Part of ideas for XHTML+SMIL spec Ideas also under discussion for SVG Making it work IE implementation broken Bridge with behavior Nested doc has begin="indefinite" Proxy begin/end/pause/resume etc. The SMIL 2.0 Recommendation
http://www.w3.org/TR/smil20/ The XHTML+SMIL Language Profile
http://www.w3.org/TR/XHTMLplusSMIL/ Translations, other profiles, etc.
http://www.w3.org/AudioVideo/#Specificat Introduction to HTML+TIME (MSDN)
http://msdn.microsoft.com/workshop/author/
behaviors/time.asp HTML+TIME reference (MSDN)
http://msdn.microsoft.com/workshop/author/
behaviors/reference/time2_entry.asp Introduction to HTML+TIME (WebReference.com)
http://www.webreference.com/js/column67/ SMIL and XHTML+SMIL tutorials (justsmil.com)
http://www.streamingmediaworld.com/smil/tutor/ Collection of general SMIL help links
http://www.w3.org/AudioVideo/#Getting The SMIL 2.0 Timing and Synchronization Model
http://www.research.microsoft.com/research/pubs/view.aspx
?msr_tr_id=MSR-TR-2001-01 Multimedia Meets Computer Graphics in SMIL2.0: A Time Model for the Web
http://www2002.org/CDROM/refereed/382/ Demos (require IE 5.5 or later) Basic W3C Demo
http://www.w3.org/AudioVideo/demos/XHTML-SMIL/Animate.htm Ludicrum demo page
http://www.ludicrum.org/plsWork/demos/