timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

Such SMIL Timing slideshows are very easy to sync with an audio source:

Join Mozilla

proposed membership program

v1: Dec 14 2010 / Mtn View + Air Mozilla
v2: Jan 11 2011 / blog post slidecast

Overview

Mozilla Camp, Whistler, July 2010

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.

Opportunity

One Web Day, September 2010
  • 400 million
    people use Firefox.
  • Millions know it’s about
    more than just a browser.
  • They want to be
    part of what we stand for.

Today

Firefox cosplay
  • We already have:
    • 15,000 donors
    • 200,000 mailing list members
    • 3 million social media followers
  • OK, but fragmented.
  • Huge untapped potential to expand, create sense of belonging and connection.

Join Mozilla

Svitlana, One Web Day

Join Mozilla:
an easy way for
people to connect.

Help them understand.
Show their support.
Feel they belong.

Why?

I <3 Firefox

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.

Program Details

  • Affinity program for people who support Mozilla.
    • Brings together pieces of existing user engagement and donations programs.
  • $5 annually, chance to buy t-shirt or other swag.
  • Once you join: we help you learn more, feel at home.
    • Aim: help members grok the Mozilla firehose. Not ‘member only’ info’.
    • Simple, concise updates on what’s happening with Mozilla and the web.
    • Info on ways to get involved more deeply (if you want this).
  • Funds go to support grants and projects.

Web Copy

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!

Timeline

  • Q1 - Launch basic offering.
    • Aim to launch before FF4.
    • Integrate w/ FF4 launch, get first wave of members signed up.
  • Q2 - Full offering, member care.
    • Full selection of merchandise, plus info and get involved programs.
    • Evolve messaging and user experience based on launch learning.
  • Q4 - Major global event w/ community.
    • ‘Webathon’ or similar event, run partly by community, many languages.
    • Focus on consumer education about the web, telling your friends.

What it’s not!

Mouseketeers

A fan club
for Firefox.

A new governance
system for Mozilla.

A contributor community
(we have that, it’s awesome!).

We need help!

Mozilla Community Worldwide
  • Existing Mozillians are critical to success!
  • Help shape Join Mozilla:
    • Campaign ideas and names.
    • Ideas to engage new members.
    • And the reaching out to them.
    • Events, local sites, etc.
  • Most important: reach out to your neighbours.

Join Mozilla

proposed membership program

v1: Dec 14 2010 / Mtn View + Air Mozilla
v2: Jan 11 2011 / blog post slidecast

DRAFT

CSS transition: | | | | |

View this demo in full page.

HTML Markup + Timesheet

<!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>

timeController

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>