Synchronization of XHTML Documents:
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
Introduction/Overview
Motivation and Background Theory
Issues with XHTML and CSS
Some Techniques and Tricks
How to learn more
Motivation
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.
Requirements
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.
Benefits of XHTML+SMIL integration
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
Why a language vs. an API?
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
Demos
Simple Banner Ads
Product Sales presentation
XHTML+SMIL Timing and Media Markup
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.
What does begin
mean for div
or strong
?
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
Issue with XHTML and CSS
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
More Issues with XHTML and CSS
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.
Techniques and Tricks
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.
TNT #1 Animation: Cool at a cost
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
TNT #2 The Bad and the Ugly
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
TNT #3 Using motion animations
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
TNT #4 Using color animations
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
TNT #5 Zooming menus, tables
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.
TNT #6 Use interaction!
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
TNT #7 Make excl
work for you
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
TNT #8 Use script/code for extensions
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
TNT #9 iframe
elements and timing
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.
How to learn more - Specs
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
How to learn more - Authoring
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
How to learn more - Papers and Demos
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/
Thanks for coming!