A declarative approach for HTML Timing using SMIL Timesheets
Such SMIL Timing slideshows are very easy to sync with an audio source:
proposed membership program
v1: Dec 14 2010 / Mtn View + Air Mozilla
v2: Jan 11 2011 / blog post slidecast
Vision: clear, simple program where millions of people can identify and connect with Mozilla.
A part of Whistler commitment to grow supporters and community by 1000x.
Builds user engagement and donations programs that we’re already running.
Join Mozilla:
an easy way for
people to connect.
Help them understand.
Show their support.
Feel they belong.
Brand affinity for Firefox.
Bigger base to back (and grow): 50k Mozillians who donate time.
Fund programs (e.g. Drumbeat) = new tools and innovation.
Mozilla as something bigger.
Copy we’re considering for sign up page:
We’re a non-profit organization who believes the web should be free, open, accessible, transparent, safe and - most of all - a force for the good of humanity.
We’re the proud makers of Firefox and, every day, we strive to make the Web better. It’s our hood to protect and nurture, after all.
Protect the Web. Join Mozilla!
A fan club
for Firefox.
A new governance
system for Mozilla.
A contributor community
(we have that, it’s awesome!).
CSS transition: | | | | |
<!DOCTYPE html> <html> <head> […] <link href="timesheet.smil" rel="timesheet" type="application/smil+xml"> <!--[if lt IE 9]> <script type="text/javascript" src="html5.js"></script> <script type="text/javascript" src="mediaelement.js"></script> <![endif]--> <script type="text/javascript" src="timesheets.js"></script> <script type="text/javascript" src="timecontroller.js"></script> </head> <body> <div id="slideshow"> <header id="slide01"> […] </header> <div id="slide02"> […] </div> <div id="slide03"> […] </div> <div id="slide04"> […] </div> <div id="slide05"> […] </div> <div id="slide06"> […] </div> <div id="slide07"> […] </div> <div id="slide08"> […] </div> <div id="slide09"> […] </div> <div id="slide10"> […] </div> <div id="slide11"> […] </div> <footer id="slide12"> […] </footer> </div> <audio id="talk" autoplay preload> <source type="audio/ogg" src="media/joinMozilla.ogg"/> <source type="audio/mp4" src="media/joinMozilla.m4a"/> </audio> <nav id="timeController" class="smil-timeController"> […] </nav> </body> </html>
Where timesheet.smil contains:
<?xml version="1.0" encoding="UTF-8"?> <timesheet xmlns="http://www.w3.org/ns/SMIL"> <excl mediaSync="#talk" controls="#timeController"> <item select="#slide01" begin="00:00"/> <item select="#slide02" begin="00:09"/> <item select="#slide03" begin="00:50"/> <item select="#slide04" begin="01:18"/> <item select="#slide05" begin="01:48"/> <item select="#slide06" begin="02:23"/> <item select="#slide07" begin="03:55"/> <item select="#slide08" begin="06:20"/> <item select="#slide09" begin="07:17"/> <item select="#slide10" begin="09:11"/> <item select="#slide11" begin="10:47"/> <item select="#slide12" begin="13:03"/> </excl> </timesheet>
Using our “timeController” component is optional: setting a “controls”
attribute to the audio
element would work as well. The
“timeController” brings a user-friendly way to access to each slide:
<nav id="timeController" class="smil-timeController"> <!-- Table Of Contents --> <div class="smil-toc"> <ul class="smil-tocList"> <li><a href="#slide01"> Introduction </a></li> <li><a href="#slide02"> Overview </a></li> <li><a href="#slide03"> Opportunity </a></li> <li><a href="#slide04"> Today </a></li> <li><a href="#slide05"> Join Mozilla </a></li> <li><a href="#slide06"> Why? </a></li> <li><a href="#slide07"> Program Details </a></li> <li><a href="#slide08"> Web Copy </a></li> <li><a href="#slide09"> Timeline </a></li> <li><a href="#slide10"> What it’s not! </a></li> <li><a href="#slide11"> We need help! </a></li> <li><a href="#slide12"> Conclusion </a></li> </ul> </div> <!-- timeline + control buttons --> <div class="smil-controlBar"> <div class="smil-left"> <button class="smil-first"><span> |« </span></button> <button class="smil-prev"><span> « </span></button> <button class="smil-play"><span> play </span></button> <button class="smil-next"><span> » </span></button> <button class="smil-last"><span> »| </span></button> </div> <div class="smil-timeline"> <div class="smil-timeSlider"></div> <div class="smil-timeSegments"></div> <div class="smil-timeCursor"></div> </div> <div class="smil-right smil-currentTime">00:00</div> </div> <div class="smil-tocDisplay"></div> </nav>