timesheets.js :: Basic Markup

A simple use case is to define an HTML rotating banner. Here’s an example, blatantly stolen from PortableLinuxApps.org but described with pure SMIL attributes:

HTML Markup

<!DOCTYPE html>
<html>
  <head>
    […] 
    <link href="banner.smil" rel="timesheet" type="application/smil+xml">
    <script type="text/javascript" src="timesheets.js"></script>
  </head>
  <body>
    […]
    <div id="banner">
      <img src="images/dosbox.png"       alt="relive the good old days">
      <img src="images/gnote.png"        alt="100% free software, 0% hassle">
      <img src="images/gpodder.png"      alt="simple, usable podcast consumption">
      <img src="images/transmission.png" alt="a fast, easy and free BitTorrent client">
    </div>
    […]
  </body>
</html>

Where banner.smil contains:

<?xml version="1.0" encoding="UTF-8"?>
<timesheet xmlns="http://www.w3.org/ns/SMIL">
  <seq repeatCount="indefinite">
    <item select="#banner img" dur="3s"/>
  </seq>
</timesheet>

SMIL compliant and passes the W3C validator. Does not require XHTML.

'select'

Note that the select attribute above performs a querySelectorAll() action: for each DOM node that is matched by the "#banner img" selector, a SMIL item is created.

This allows to reuse the same timesheet for several HTML pages: the SMIL markup above always works for any number of images in the banner.

'beginInc'

'beginInc' is the other <item>-specific attribute defined in the SMIL Timesheets spec. It's rather used with par and excl time containers, e.g.:

<timesheet>
  <excl>
    <item select="#banner img" beginInc="3s" />
  </excl>
</timesheet>

This timesheet would be equivalent to the one we use for this file.