index.html 136 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>SMIL Timesheets 1.0</title>
  <link rel="stylesheet" href="style/spec.css" type="text/css">
  <link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css"
  type="text/css">
</head>

<body lang="en">

<div class="noprint" align="center">
<hr>
</div>

<div class="head">
<a href="http://www.w3.org/"><img height="48" width="72" alt="W3C"
src="http://www.w3.org/Icons/w3c_home"></a>

<h1 align="center">SMIL Timesheets 1.0</h1>

<h2 id="Working">W3C Working Draft 10 January 2008</h2>
<dl>
  <dt>This version:</dt>
    <dd><a
      href="http://www.w3.org/TR/2008/WD-timesheets-20080110/">http://www.w3.org/TR/2008/WD-timesheets-20080110/</a></dd>
  <dt>Latest version:</dt>
    <dd><a
      href="http://www.w3.org/TR/timesheets/">http://www.w3.org/TR/timesheets/</a></dd>


  <!-- <dd><a href="http://www.w3.org/TR/2006/WD-SMIL3-20061204/">http://www.w3.org/TR/2006/WD-SMIL3-20061204/</a></dd>-->
  <dt>Editors:</dt>
    <dd>Petri Vuorimaa, TKK</dd>
    <dd>Dick Bulterman, CWI</dd>
    <dd>Pablo Cesar, CWI.</dd>
  <!-- This section is optional and will be ignore during the publication
  Do not use Headers H1, H2, H3 and DIV within this DIV class="ignore" section
  -->
</dl>
<!--, <a
href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/smil30.zip">zip archive</a> -->

<p class="copyright"><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
© 2007 <a href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><acronym
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
href="http://www.ercim.org/"><acronym
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<hr>
</div>

<h2 id="Abstract"><a name="abstract">Abstract</a></h2>

<p>This document defines an XML timing language that makes SMIL 3.0 element
and attribute timing control available to a wide range of other XML
languages. This language allows SMIL timing to be integrated into a wide
variety of a-temporal languages, even when several such languages are
combined in a compound document. Because of its similarity with external
style and positioning descriptions in the Cascading Style Sheet (CSS)
language, this functionality has been termed <em>SMIL Timesheets</em>.</p>

<h2 id="Status"><a name="status">Status of this document</a></h2>

<p><em>This section describes the status of this document at the time of its
publication. Other documents may supersede this document. A list of current
W3C publications and the latest revision of this technical report can be
found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
at http://www.w3.org/TR/.</em></p>

<p>This is a First Public Working Draft and Last Call Working Draft of a
possible future W3C Recommendation of the SMIL Timesheets 1.0. This document
has been produced by the <a href="http://www.w3.org/AudioVideo/Group/">SYMM
Working Group</a> as part of the <a href="http://www.w3.org/AudioVideo/">W3C
Synchronized Multimedia Activity</a>. The goals of the SYMM Working Group are
discussed in the <a
href="http://www.w3.org/AudioVideo/2004/symm-wg-charter20040903.html">SYMM
Working Group Charter</a>. The authors of this document are the SYMM Working
Group members. Different parts of the document have different editors.</p>

<p>This document was part of the SMIL 3.0 specification as the "<a
href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/smil-timesheets.html">SMIL
3.0 External timing</a>" module, extending SMIL timing. It was removed from
the SMIL 3.0 specification at Candidate Recommandation phase in order to give
it more visibility as Timesheets allows integration of timing into a wide
range of other XML languages.</p>

<p>The <a href="http://www.w3.org/2005/10/Process-20051014/tr#last-call">Last
Call review period</a> for this document extends until 15 February 2008. The
public is invited to send comments or report errors on this document. Please
send them to the public mailing <a
href="mailto:www-smil@w3.org">www-smil@w3.org</a> - (<a
href="http://lists.w3.org/Archives/Public/www-smil/">public archives</a>)
including the prefix<code>'[Timesheets LC comment]'</code> in the subject
line.</p>

<p>Publication as a Working Draft does not imply endorsement by the W3C
Membership. This is a draft document and may be updated, replaced or
obsoleted by other documents at any time. It is inappropriate to cite this
document as other than work in progress.</p>

<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004
W3C Patent Policy</a>. W3C maintains a <a rel="disclosure"
href="http://www.w3.org/2004/01/pp-impl/35663/status">public list of any
patent disclosures</a> made in connection with the deliverables of the group;
that page also includes instructions for disclosing a patent. An individual
who has actual knowledge of a patent which the individual believes contains
<a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>

<div class="noprint">
<h2 id="subtoc">Table of contents</h2>
<ul class="toc">
  <li class="tocline2">
    <div class="toc">
    <ul>
      <li><a href="#smilTimesheetsNS-Introduction">1 Introduction</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Motivation">1.1 Motivation</a></li>
          <li><a href="#smilTimesheetsNS-design">1.2 Design Rationale</a></li>
          <li><a href="#smilTimesheetsNS-structure">1.3 Structure of the
            Document</a></li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Overview">2 Overview</a></li>
      <li><a href="#smilTimesheetsNS-Basic">3 SMIL Timesheets Basic
        Concepts</a>
        <ul>
          <li><a href="#smilTimesheetsNS-basicTiming">3.1 Timing and
            Synchronization</a></li>
          <li><a href="#smilTimesheetsNS-basicSelection">3.2 Selection
            Mechanism</a></li>
          <li><a href="#smilTimesheetsNS-basicEventModel">3.3 Event
          Model</a></li>
          <li><a href="#smilTimesheetsNS-basicIndex">3.4 Index
            Functionality</a></li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Elements">4 SMIL Timesheet Specific
        Elements</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Elements-Timesheet">4.1 The <span
            class="edef">timesheet</span> element</a>
            <ul>
              <li><a
                href="#smilTimesheetsNS-Elements-Timesheet-Attributes">Element
                Attributes</a>
                <ul>
                  <li><a
                    href="#smilTimesheetsNS-Elements-Timesheet-Attributes-Src">The
                    <span class="adef">src</span> Attribute</a></li>
                  <li><a
                    href="#smilTimesheetsNS-Elements-Timesheet-Attributes-Media">The
                    <span class="adef">media</span> Attribute</a></li>
                </ul>
              </li>
              <li><a
                href="#smilTimesheetsNS-Elements-Timesheet-Content">Element
                Content</a></li>
            </ul>
          </li>
          <li><a href="#smilTimesheetsNS-Elements-Item">4.2 The <span
            class="edef">item</span> element</a>
            <ul>
              <li><a
                href="#smilTimesheetsNS-Elements-Item-Attributes">Element
                Attributes</a>
                <ul>
                  <li><a
                    href="#smilTimesheetsNS-Elements-Item-Attributes-Select">The
                    <span class="adef">select</span> Attribute</a></li>
                  <li><a
                    href="#smilTimesheetsNS-Elements-Item-Attributes-BeginInc">The
                    <span class="adef">beginInc</span> Attribute</a></li>
                </ul>
              </li>
              <li><a href="#smilTimesheetsNS-Elements-Item-Functions">Element
                Functions</a>
                <ul>
                  <li><a
                    href="#smilTimesheetsNS-Elements-Item-Functions-Index">The
                    Index() Function</a></li>
                </ul>
              </li>
              <li><a href="#smilTimesheetsNS-Elements-Item-Content">Element
                Content</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Timing">5 SMIL Timing and
        Synchronization Elements</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Timing-Attributes">5.1
            Attributes</a>
            <ul>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Begin">The
                <span class="adef">begin</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Dur">The <span
                class="adef">dur</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-End">The <span
                class="adef">end</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Fill">The
                <span class="adef">fill</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Endsync">The
                <span class="adef">endsync</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Timing-Attributes-RepeatCount">The
                <span class="adef">repeatCount</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-RepeatDur">The
                <span class="adef">repeatDur</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-First">The
                <span class="adef">first</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Prev">The
                <span class="adef">prev</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Next">The
                <span class="adef">next</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Attributes-Last">The
                <span class="adef">last</span> Attribute</a></li>
            </ul>
          </li>
          <li><a href="#smilTimesheetsNS-Timing-Elements">5.2 Elements</a>
            <ul>
              <li><a href="#smilTimesheetsNS-Timing-Elements-Par">The <span
                class="edef">par</span> Element</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Elements-Seq">The <span
                class="edef">seq</span> Element</a></li>
              <li><a href="#smilTimesheetsNS-Timing-Elements-Excl">The <span
                class="edef">excl</span> Element</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Prefetch">6 Prefetch</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Prefetch-Attributes">6.1
            Attributes</a>
            <ul>
              <li><a
                href="#smilTimesheetsNS-Prefetch-Attributes-MediaSize">The
                <span class="adef">mediaSize</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Prefetch-Attributes-MediaTime">The
                <span class="adef">mediaTime</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Prefetch-Attributes-Bandwidth">The
                <span class="adef">bandwidth</span> Attribute</a></li>
            </ul>
          </li>
          <li><a href="#smilTimesheetsNS-Prefetch-Elements">6.2 Elements</a>
            <ul>
              <li><a href="#smilTimesheetsNS-Prefetch-Elements-Prefetch">The
                <span class="edef">prefetch</span> Element</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Animation">7 Animation</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Animation-Attributes">7.1
            Attributes</a>
            <ul>
              <li><a
                href="#smilTimesheetsNS-Animation-Attributes-AttributeName">The
                <span class="adef">attributeName</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Attributes-AttributeType">The
                <span class="adef">attributeType</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Attributes-Values">The
                <span class="adef">values</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Attributes-From">The
                <span class="adef">from</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Attributes-To">The
                <span class="adef">to</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Attributes-By">The
                <span class="adef">by</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Attributes-CalcMode">The
                <span class="adef">calcMode</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Attributes-Accumulate">The
                <span class="adef">accumulate</span> Attribute</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Attributes-Additive">The
                <span class="adef">additive</span> Attribute</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Attributes-Origin">The
                <span class="adef">origin</span> Attribute</a></li>
            </ul>
          </li>
          <li><a href="#smilTimesheetsNS-Animation-Elements">7.2 Elements</a>
            <ul>
              <li><a href="#smilTimesheetsNS-Animation-Elements-Animate">The
                <span class="edef">animate</span> Element</a></li>
              <li><a href="#smilTimesheetsNS-Animation-Elements-Set">The
                <span class="edef">set</span> Element</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Elements-AnimateMotion">The
                <span class="edef">animateMotion</span> Element</a></li>
              <li><a
                href="#smilTimesheetsNS-Animation-Elements-AnimateColor">The
                <span class="edef">animateColor</span> Element</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-Events">7 Event Model</a>
        <ul>
          <li><a href="#smilTimesheetsNS-Events-Internal">Internal
          Events</a></li>
          <li><a href="#smilTimesheetsNS-Events-User">User Events</a></li>
          <li><a href="#smilTimesheetsNS-Events-Semantics">Event
          Semantics</a></li>
          <li><a href="#smilTimesheetsNS-Events-Index">Index Function</a></li>
        </ul>
      </li>
      <li><a href="#smilTimesheetsNS-CSS">8 Integration with CSS
      Layout</a></li>
      <li><a href="#Appendix">Appendix A. References</a>
        <ul>
          <li><a href="#refsNS-normative">E.1 Normative References</a></li>
          <li><a href="#refsNS-informative">E.2 Informative
          References</a></li>
        </ul>
      </li>
      <li><a href="#Appendix1">Appendix B. Acknowledgements</a></li>
    </ul>
    </div>
  </li>
  <li class="tocline2"><a href="#q64" class="tocxref">8
    Integration with CSS Layout</a></li>
  <li class="tocline2"><a href="#references"
    class="tocxref">Appendix A. References</a></li>
  <li class="tocline2"><a href="#acknowledgements"
    class="tocxref">Appendix B. Acknowledgements</a></li>
</ul>
</div>

<h2 id="smilTimesheetsNS-Introduction"><a name="q2">1 Introduction</a></h2>

<div class="informative">
<p><em>This section is informative</em></p>

<p>This document defines an XML-based timing language that makes <a
href="http://www.w3.org/TR/SMIL3/">SMIL 3.0</a> element and attribute timing
control available to a wide range of other XML-based languages. This language
allows SMIL timing to be integrated into a wide variety of a-temporal
languages, even when several such languages are combined in a compound
document. Because of its similarity with external style and positioning
descriptions in the Cascading Style Sheet (CSS) language, this functionality
has been termed <em>SMIL Timesheets</em>.</p>

<p>SMIL Timesheets can be seen as a temporal counterpart of CSS. Whereas CSS
defines the spatial layout of the document and formatting of the
elements,SMIL Timesheets specify which elements are active at a certain
moment and what their temporal scope is within a document. And as with CSS,
SMIL Timesheets can be reused in multiple documents, which can provide a
common temporal framework for multimedia presentations with different
contents but identical storylines. The document can be shown in a user agent
even if SMIL Timesheets are not supported, since the contents and the layout
are still governed by the document itself. Of course, the temporal aspect of
the document is then lost, since all the elements are active all the time.</p>

<h3 id="smilTimesheetsNS-Motivation"><a name="q21">1.1 Motivation</a></h3>

<p>SMIL Timesheets allows the definition of out-of-line timing in conjunction
with non-SMIL languages including compound XML documents. To make authoring
easier, it contains only a limited subset of SMIL functionality.</p>

<p>SMIL Timesheets provides a temporal dimension to existing a-temporal web
documents, in the form of a external XML document. It can be used, for
example, for online slide shows or photo galleries. The following <span
class="inforef"><a href="#ref-TimesheetsTutorial" rel="biblioentry"
class="noxref"><span class="inforef">[TimesheetsTutorial]</span></a></span>
provides a number of examples together with an implementation of SMIL
Timesheets.</p>

<p>An alternative to Timesheets is XHTML+SMIL <span class="inforef"><a
href="#ref-XHTMLplusSMIL" rel="biblioentry" class="noxref"><span
class="inforef">[XHTMLplusSMIL]</span></a></span> which gives full SMIL
functionality as in-line in non-SMIL XML documents. On the other hand, SMIL
itself gives full SMIL functionality as in-line XML-based document.</p>

<h3 id="smilTimesheetsNS-design"><a name="q22">1.2 Design Rationale</a></h3>

<p>This section explains the design rationale behind Timesheets, its intended
use, and its relation to other XML-based languages.</p>

<p>XML-based compound documents need to define the structure of the document
and its content, the styling and layout of the document, and the user
interaction and internal logic. Where the structure and contents are defined
by the host language (XHTML) <span class="normref"><a href="#ref-XHTML"
rel="biblioentry" class="noxref"><span
class="normref">[XHTML]</span></a></span>, the styling and layout by
Stylesheets (CSS) <span class="normref"><a href="#ref-CSS2" rel="biblioentry"
class="noxref"><span class="normref">[CSS2]</span></a></span>, vector
graphics support by SVG <span class="normref"><a href="#ref-SVG"
rel="biblioentry" class="noxref"><span
class="normref">[SVG]</span></a></span>, and the user interaction and data
model by XForms <span class="normref"><a href="#ref-XForms" rel="biblioentry"
class="noxref"><span class="normref">[XForms]</span></a></span>. Timeshets is
a solution for providing timing control capabilities for such compound
documents. </p>

<table border="1">
  <caption></caption>
  <tbody>
    <tr>
      <td><strong><em>Topic</em></strong></td>
      <td><strong><em>Technology</em></strong></td>
    </tr>
    <tr>
      <td><strong>Structure</strong></td>
      <td><strong>Host Language (XHTML)</strong> <span class="normref"><a
        href="#ref-XHTML" rel="biblioentry" class="noxref"><span
        class="normref">[XHTML]</span></a></span></td>
    </tr>
    <tr>
      <td><strong>Layout and Styling</strong></td>
      <td><strong>Stylesheets (CSS)</strong> <span class="normref"><a
        href="#ref-CSS2" rel="biblioentry" class="noxref"><span
        class="normref">[CSS2]</span></a></span></td>
    </tr>
    <tr>
      <td><strong>Vector Graphics</strong></td>
      <td><strong>SVG</strong> <span class="normref"><a href="#ref-SVG"
        rel="biblioentry" class="noxref"><span
        class="normref">[SVG]</span></a></span></td>
    </tr>
    <tr>
      <td><strong>User Interaction and data model</strong></td>
      <td><strong>XForms</strong> <span class="normref"><a href="#ref-XForms"
        rel="biblioentry" class="noxref"><span
        class="normref">[XForms]</span></a></span></td>
    </tr>
    <tr>
      <td><strong>Timing</strong></td>
      <td><strong>SMIL Timesheets</strong></td>
    </tr>
  </tbody>
</table>

<p>Because the intention of Timesheets is to provide timing control
capabilities, they are based on the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> modules with some restrictions and additional
attributes.</p>

<p>In addition to the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> modules, SMIL Timesheets includes the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module and the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html">SMIL 3.0
BasicAnimation</a> module is used for controlling animations.</p>

<p>Moreover, SMIL Timesheets defines two new elements, not included in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization modules: </a></p>
<ul>
  <li><a href="#edef-timesheetsTimesheet" class="noxref"><span
    class="einst-timesheetsTimesheet einst">timesheet</span></a></li>
  <li><a href="#edef-timesheetsItem" class="noxref"><span
    class="einst-timesheetsItem einst">item</span></a></li>
</ul>

<p>Finally, similary to CSS, SMIL Timesheets uses CSS selectors <span
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
class="normref">[CSS2]</span></a></span> for identifying the elements in the
web document to which apply timing control. </p>

<h3 id="smilTimesheetsNS-structure"><a name="q23">1.3 Structure of the
Document</a></h3>

<p>Firstly, an overview of the SMIL Timesheets is given in the <a
href="#smilTimesheetsNS-Overview">Overview</a> section. After that, the
normative definition of SMIL Timesheets is provided.</p>

<p>The normative definition starts with an introduction of the <a
href="#smilTimesheetsNS-Basic">basic concepts</a> behind SMIL Timesheets.
After that, the new elements <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> and <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> and use of CSS selectors
are described in the <a href="#smilTimesheetsNS-Elements">SMIL Timesheet
Specific Elements</a> section. Then, the use of SMIL 3.0 Timing and
Synchronization modules is discussed in the <a
href="#smilTimesheetsNS-Timing">Timing and Synchronization</a> section. After
that, the <a href="#smilTimesheetsNS-Prefetch">Prefetch</a> section describes
how the SMIL 3.0 PrefetchControl is used. Next, <a
href="#smilTimesheetsNS-Animation">Animation</a> section covers the use of
SMIL 3.0 BasicAnimation module. Finally, integration with CSS layout is
discussed in the <a href="#smilTimesheetsNS-CSS">Integration with CSS
Layout</a> section.</p>
</div>

<h2 id="smilTimesheetsNS-Overview"><a name="q3">2 Overview</a></h2>

<div class="informative">
<p><em>This section is informative</em></p>

<div>
<p>The following example is a simple slide show. The SMIL Timesheet is
located in the head section. It is declared with the <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element, which
belongs to the smil namespace. In this example, the <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> element is used for timing.
The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements contain
references to the body of the document and additional timing information. The
elements of the document body are selected using CSS selectors. In this
example, the id selectors (i.e., <code>"#Slide1"</code>,
<code>"#Slide2"</code>, and <code>"#Slide3"</code>) are used. Based on the
timing information a new slide is shown after five seconds.</p>
</div>

<div>
<pre class="example">&lt;?xml version="1.0"?&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:smil="http://www.w3.org/ns/SMIL30"&gt;

  &lt;head&gt;
    &lt;title&gt;Timesheet Example&lt;/title&gt;
    &lt;smil:timesheet&gt;
      &lt;smil:seq&gt;
        &lt;smil:item select="#Slide1" dur="5s" /&gt;
        &lt;smil:item select="#Slide2" dur="5s" /&gt;
        &lt;smil:item select="#Slide3" dur="5s" /&gt;
      &lt;/siml:seq&gt;
    &lt;/smil:timesheet&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div xml:id ="Slide1" class="Slide"&gt;
      &lt;h1 xml:id="Title1"&gt;Timesheets&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li xml:id="Bullet1_1" class="Bullet"&gt;Timesheets defines temporal dimension of documents&lt;/li&gt;
        &lt;li xml:id="Bullet1_2" class="Bullet"&gt;Timesheets uses SMIL Timing and Synchronization primitives&lt;/li&gt;
        &lt;li xml:id="Bullet1_3" class="Bullet"&gt;Timesheet is located in the head section of the document&lt;/li&gt;
        &lt;li xml:id="Bullet1_4" class="Bullet"&gt;The body elements are selected using CSS selectors&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div xml:id ="Slide2" class="Slide"&gt;
      &lt;h1 xml:id="Title2"&gt;CSS Selectors&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li xml:id="Bullet2_1" class="Bullet"&gt;Timesheets uses CSS selectors to reference body elements&lt;/li&gt;
        &lt;li xml:id="Bullet2_2" class="Bullet"&gt;Id selector references individual elementst&lt;/li&gt;
        &lt;li xml:id="Bullet2_3" class="Bullet"&gt;Other selectors can be used to match multiple elements&lt;/li&gt;
        &lt;li xml:id="Bullet2_4" class="Bullet"&gt;For example, class selector matches all elements that belong to certain class&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div xml:id ="Slide3" class="Slide"&gt;
      &lt;h1 xml:id="Title3"&gt;Animations&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li xml:id="Bullet3_1" class="Bullet"&gt;Timesheets includes also BasicAnimation module&lt;/li&gt;
        &lt;li xml:id="Bullet3_2" class="Bullet"&gt;Supported elements are animate, set, animateMotion, and animateColor&lt;/li&gt;
        &lt;li xml:id="Bullet3_3" class="Bullet"&gt;The animation can be defined with either values or from, to, and by attributes&lt;/li&gt;
        &lt;li xml:id="Bullet3_4" class="Bullet"&gt;The target elements are referenced with CSS selectors&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>
</div>

<h2 id="smilTimesheetsNS-Basic"><a name="q300">3 SMIL Timesheets Basic
Concepts</a></h2>

<div class="normative">
<p><em>This section is normative.</em></p>

<p>This section defines the four basic concepts behind Timesheets:</p>
<ul>
  <li><a href="#smilTimesheetsNS-basicTiming">Timing and
  Synchronization</a></li>
  <li><a href="#smilTimesheetsNS-basicSelection">Selection Mechanism</a></li>
  <li><a href="#smilTimesheetsNS-basicEventModel">Event Model</a></li>
  <li><a href="#smilTimesheetsNS-basicIndex">Index Functionality</a></li>
</ul>

<h3 id="smilTimesheetsNS-basicTiming"><a name="q302">3.1 Timing and
Synchronization</a></h3>

<p>SMIL Timesheets use five <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> modules:</p>
<ol>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a></li>
</ol>

<p>The timing semantics of SMIL Timesheets is based on the semantics of the
<a href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> module. Host document's elements are set to
<code>"active"</code> and <code>"inactive"</code> following the semantics of
the defined time containers. In case of an element in the document that is
not referenced by the Timsheets, the element will be visible as dictated by
the stylesheet. By default the element will remain visible all the time.</p>

<p>The base time, or the <em>syncbase</em> of a <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is the
moment when the element is started by its parent. Starting an element does
not necessarily make the referenced media element visible. Rather, it sets
the time moment <code>"0s"</code>, to which the element's attributes are
compared.</p>

<p>The syncbase of the child elements of a time container is dependent on the
type of the container. The children of <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> and <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> elements have the starting
time of their parent as their syncbase. The children of the <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> element consider the end
time of preceding child as their syncbase. This time is resolved only at the
moment the preceding child ends.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p><a href="#smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 1</a>
shows a simple example of the semantics of a timesheet. A parallel time
container has two children, which are <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements referencing two
media elements. When the <a href="#edef-timesheetsPar"
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
started, it activates both its children with the current time as their
syncbase. The media elements referenced by the children are not activated
yet. At time moment <em>1s</em>, the media element <em>item1</em> is
activated, according to the begin value of the referencing <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element. At
<em>2s</em>, the <em>item2</em> is activated. At <em>3s</em>, the duration of
<em>item1</em> runs out, so it is stopped and the corresponding timesheet
element deactivates itself. At <em>4s</em>, the parent container stops
according to its duration attribute, stopping all of its active children.</p>

<p><img src="Images/time_semantics.png" alt="Time semantics"></p>

<p id="smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 1: Timeline of
a Timesheets</p>
</div>

<p>The duration of an element is primarily defined by the <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute. If the element is
not stopped prematurely, due to an event or scheduling of its parent, the <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute tells the overall
duration of the element. The element will not stop until this duration has
passed, and will not stay active longer than this duration. The value of the
<a href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute will prevail:</p>
<ul>
  <li>when the sum of the durations of the children of a time container
    extends the value of the attribute;</li>
  <li>when the implicit duration of the media elements, like audio or video
    is longer than the specified duration;</li>
  <li>when the <a href="#adef-timesheetsRepeatCount"
    class="noxref"><span
    class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> or <a
    href="#adef-timesheetsRepeatDur" class="noxref"><span
    class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
    extend the duration of a media element to be longer than the specified
    duration.</li>
</ul>

<p>If the duration is not set, the duration of an element depends on the type
of the referenced elements, or the durations of the children. The timesheet
items can reference to discrete and continuous elements in the document. The
intrisic duration of an <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element referencing a discrete media element is <code>"0s"</code>. But, the
default <a href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a> behaviour is
<code>"freeze"</code>. Continuous media elements have their own durations,
which will be also used as the duration of the timesheet element. The default
duration of the time container depends on the duration of their children. By
default, a time container ends when the last scheduled child ends. By default
the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attibute of a children
of a <a href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> and a <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time containers is
<code>"0s"</code>. On the other hand, the <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute of a children
of a <a href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container is
<code>"indefinite"</code>.</p>

<h3 id="smilTimesheetsNS-basicSelection"><a name="q301">3.2 Selection
Mechanism</a></h3>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> target element references
elements in the document host language(s). It is the mechanism SMIL
Timesheets uses to select the elements in the host language that will be
timed.</p>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> can reference a media
element in the host language or a set of elements by the element's tag, id or
class. If follows the syntax and processing mechanism of the <a
href="http://www.w3.org/TR/REC-CSS2/selector.html">CSS Selectors</a>.</p>

<p>The CSS selector can match more than one element in the document host
language, for example, when CSS class selector is used. When multiple
matching occur, a sequence of elements that all match exactly the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element is constructed.
This sequence is ordered following the host document's order and the
selection mechanism will consider the elements as ordered in such list. Thus,
one <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element can reference
multiple host language elements at the same time.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>In the following example, an <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element contains <a href="#edef-timesheetsSeq"
class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a> time
container and further another <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:seq&gt;
    &lt;smil:item xml:id="first" select=".Slide" dur="7s"&gt;
      &lt;smil:seq&gt;
        &lt;smil:item xml:id="second" select=".Bullet" dur="1s" /&gt;
      &lt;/smil:seq&gt;
    &lt;/smil:item&gt;
  &lt;/smil:seq&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>The "first" <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element selects one slide at a time and shows each slide for 7 seconds.
Within each slide the "second" <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element selects each bullet and shows it for 1 second.</p>

<p><img src="Images/time_nested_items.png" alt="Nested items"></p>

<p id="smilTimesheetsNS-BasicTimesheets-nesteditems">Figure 1: Item Selection
Process for Nested Items</p>

<p>The item selection process of the above example is depicted in the <a
href="#smilTimesheetsNS-BasicTimesheets-nesteditems">Figure 1</a>. The left
side of the figure shows the timesheet as a tree, while the right side
presents the body of the host document also as a tree. As the figure shows,
the "first" item element selects the slides by using the ".Slide" CSS class
selector. The selector matches all the div elements of the host document
body, since they have the class attribute set to "Slide". Thus, three slides
are shown in sequential order.</p>

<p>The "second" item elements uses the ".Bullet" CSS class selector to select
all the bullets of the presentation. However, the scope of the selection is
limited by the first item element. WIthin the first slide, the CSS selector
can match only the descendants of the div element "Slide1". Similarly within
the second slide, the CSS selector can match only the descendants of the div
element "Slide2". The same applies also to the third slide.</p>
</div>

<h3 id="smilTimesheetsNS-basicEventModel"><a name="q303">3.3 Event
Model</a></h3>

<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes can contain
references to DOM events <span class="inforef"><a href="#ref-DOM2Events"
rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span>. DOM events can be triggered
by user interaction or by some other event in the document. Events are
divided into two distinct groups: internal events and user events.</p>

<p>Internal events are dispatched from within the timesheets. They can be
used by other elements in the timesheet to create relations between different
parts of the timeline. The events specified are <code>beginEvent</code>
event, which is dispatched when an element starts and <code>endEvent</code>
event, which is dispatched when an element stops. User events are triggered
by user actions.</p>

<p>A <a href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is set
to listen to a certain event by specifying the event's target and type by
either the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes. When specified
by the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute, an inactive
or started but not yet activated element will be activated when it receives
the specified event. The parent time containers and item elements have to be
active, though.</p>

<p>When the element is specified to stop according to an event, the element
informs its parent that it has stopped and parent then decides what should
happen next. Of course, some other element could be waiting to be activated
according to the <code>endEvent</code> event from the particular element.</p>

<h3 id="smilTimesheetsNS-basicIndex"><a name="q304">3.4 Index
Functionality</a></h3>

<p>As defined in the <a href="#smilTimesheetsNS-basicSelection">Selection
Mechanism</a> section, when multiple elements in the host document match
multiple items, an ordered list of item elements is constructed following the
document order. In case only one element matches the list will include one
element and if there are no matches the list will be empty. SMIL Timesheets
provide a way to identify each of the elements by using the <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function. Thus, the <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function becomes a shortcut to each of the elements composing the ordered
list and provide index numbers for the <code>DOMActivate</code> event
references in the Timesheets.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example gives an example on how the <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function works. The example is an image show, which consist of images and
corresponding thumbnail images. The thumbnail images can be used to select an
individual image for viewing. Only one image is shown at a time.</p>

<div>
<pre class="example">&lt;html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:smil="http://www.w3.org/ns/SMIL30"&gt;
  &lt;head&gt;
    &lt;title&gt;Timesheet Example&lt;/title&gt;
    &lt;smil:timesheet&gt;
      &lt;smil:par&gt;

        &lt;smil:excl&gt;
          &lt;smil:item select="#Image1" begin="Thumbnail1.DOMActivate" /&gt;
          &lt;smil:item select="#Image2" begin="Thumbnail2.DOMActivate" /&gt;
          &lt;smil:item select="#Image3" begin="Thumbnail3.DOMActivate" /&gt;
          &lt;smil:item select="#Image4" begin="Thumbnail4.DOMActivate" /&gt;
          &lt;smil:item select="#Image5" begin="Thumbnail5.DOMActivate" /&gt;

        &lt;/smil:excl&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Thumbnail1" /&gt;
          &lt;smil:item select="#Thumbnail2" /&gt;
          &lt;smil:item select="#Thumbnail3" /&gt;
          &lt;smil:item select="#Thumbnail4" /&gt;

          &lt;smil:item select="#Thumbnail5" /&gt;
        &lt;/smil:par&gt;
      &lt;/smil:par&gt;
    &lt;/smil:timesheet&gt;
  &lt;/head&gt;
  &lt;body&gt;

    &lt;img alt="image1" src="Image1.jpg" class="Image" xml:id="Image1" /&gt;
    &lt;img alt="image2" src="Image2.jpg" class="Image" xml:id="Image2" /&gt;
    &lt;img alt="image3" src="Image3.jpg" class="Image" xml:id="Image3" /&gt;
    &lt;img alt="image4" src="Image4.jpg" class="Image" xml:id="Image4" /&gt;
    &lt;img alt="image5" src="Image5.jpg" class="Image" xml:id="Image5" /&gt;
    &lt;br /&gt;

    &lt;button class="Thumbnail" xml:id="Thumbnail1"&gt;
      &lt;img src="Thumbnail1.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail2"&gt;
      &lt;img src="Thumbnail2.jpg" /&gt;
    &lt;/button&gt;

    &lt;button class="Thumbnail" xml:id="Thumbnail3"&gt;
      &lt;img src="Thumbnail3.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail4"&gt;
      &lt;img src="Thumbnail4.jpg" /&gt;
    &lt;/button&gt;

    &lt;button class="Thumbnail" xml:id="Thumbnail5"&gt;
      &lt;img src="Thumbnail5.jpg" /&gt;
    &lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>In the above example, the body of the HTML file consists of five pictures
and five buttons, which contain thumbnails of the same images. The idea is to
show one image at a time. The image to be shown is selected by the thumbnail
buttons. Therefore, the timesheets consist of one <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container, which
contains one <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> and
another <a href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container. Within the
<a href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements select the
images, while the <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
elements within the second <a href="#edef-timesheetsPar"
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> time
container select the individual thumbnail buttons. <code>DOMActivate</code>
events cause the <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
container to change the shown image according to which button was pushed.</p>

<p>The problem with the above example is that each time the host document is
changed, for example, by changing an image, deleting an image, or adding a
new image, the Timesheet has to be updated. Therefore, the Timesheet is not
reusable. The main problem lies in the references to the
<code>DOMActive</code> events, because the index numbers have to be updated
everytime a modification in the host document occurs. Thus, there is need to
automatically generate the index numbers for the <code>DOMActivate</code>
event references in the Timesheets. The <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function can be used exactly for this purpose. In the Timesheet below, the <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function is used within the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
attribute of <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element, which selects the images within the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:par&gt;
    &lt;smil:excl&gt;
      &lt;smil:item select=".Image" begin="index(Thumbnail).DOMActivate" /&gt;
    &lt;/smil:excl&gt;
    &lt;smil:par&gt;

      &lt;smil:item select=".Thumbnail" /&gt;
    &lt;/smil:par&gt;
  &lt;/smil:par&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>The <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>function
adds the index number to the Thumbnail parameter (e.g.,
<code>Thumbnail0.DOMActivate</code>, <code>Thumbnail1.DOMActivate</code>,
etc.) in the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
attribute. Therefore, one <code>".Image"</code> class selector can be used in
the <a href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute instead of
severall id selectors. The main advantage of this is that changing the order
of images, deleting images, or adding new images does not any longer require
updating the Timesheet. Thus, the Timesheets is now much more reusable.</p>

<p>However, the Timesheets can be written in even more compact format. As
defined in the <a href="#smilTimesheetsNS-basicTiming">Timing and
Synchronization</a> section, when an element in the host language does not
match any <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> in the Timesheet, the
element will remain visible all the time. Since all the thumbnail images in
buttons are allways shown, the second <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> is actually unnecessary.
When it is removed, also the first <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container becomes
unnecessary. Therefore, the most simple Timesheets for this use case is as
follows.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:excl&gt;
    &lt;smil:item select=".Image" begin="index(Thumbnail).DOMActivate" /&gt;
  &lt;/smil:excl&gt;
&lt;/smil:timesheet&gt;</pre>
</div>
</div>
</div>

<h2 id="smilTimesheetsNS-Elements"><a name="q4">4 SMIL Timesheet Specific
Elements</a></h2>

<div class="normative">
<p><em>This section is normative.</em></p>

<p>This section defines the new <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> and <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements and their
attributes.</p>

<h3 id="smilTimesheetsNS-Elements-Timesheet">4.1 The <a
name="edef-timesheetsTimesheet"><span class="edef">timesheet</span></a>
element</h3>

<p>The <a href="#edef-timesheetsTimesheet"
class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is
located in the head section of the document. It defines a parent container
for other SMIL Timesheet elements.</p>

<h4 id="smilTimesheetsNS-Elements-Timesheet-Attributes"><a name="q6">Element
Attributes</a></h4>

<p>The <a href="#edef-timesheetsTimesheet"
class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element defines
two attributes: <a href="#adef-timesheetsSrc"
class="noxref"><span class="ainst-timesheetsSrc ainst">src</span></a> and <a
href="#adef-timesheetsMedia" class="noxref"><span
class="ainst-timesheetsMedia ainst">media</span></a>.</p>

<h5 id="smilTimesheetsNS-Elements-Timesheet-Attributes-Src">The <a
name="adef-timesheetsSrc"><span class="adef">src</span></a> Attribute</h5>

<p>The <a href="#adef-timesheetsSrc" class="noxref"><span
class="ainst-timesheetsSrc ainst">src</span></a> attribute tells the location
of an external timesheet. With this attribute a common timesheet can be
reused in multiple documents. The attribute must contain a valid URI.</p>

<div class="informative">
<p><em>This section is informative</em></p>

<div>
<p>The following example shows how the timing information can be provided as
an external document.</p>
</div>

<div>
<pre class="example">--- example.xhtml ----
&lt;?xml version="1.0"?&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:smil="http://www.w3.org/ns/SMIL30"&gt;

  &lt;head&gt;
    &lt;title&gt;Timesheet Example (External Document)&lt;/title&gt;
    &lt;smil:timesheet src="./timesheet.smil" /&gt;
  &lt;/head&gt;
---   ---

--- timesheet.smil ---
&lt;?xml version="1.0"?&gt;

&lt;smil:timesheet xmlns:smil="http://www.w3.org/ns/SMIL30"&gt;
 &lt;smil:seq&gt;
   &lt;smil:item select="#Slide1" dur="5s" /&gt;
   &lt;smil:item select="#Slide2" dur="5s" /&gt;
   &lt;smil:item select="#Slide3" dur="5s" /&gt;
 &lt;/smil:seq&gt;
&lt;/smil:timesheet&gt;
---   ---</pre>
</div>
</div>

<div class="informative">
<p><em>This section is informative</em></p>

<div>
<p>In non-XML markup languages, the link element can be used to reference an
external timesheet document. In the following example, a HTML document
contains a reference to external timesheet.smil document.</p>
<pre class="example">&lt;!doctype html public "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link href="timesheet.smil" rel="timesheet" type="application/smil+xml"&gt;
  &lt;/head&gt;
&lt;/html&gt;</pre>
</div>

<p>The language designers of the non-XML host language language should define
what the different attributes of the link element mean. For example, the HTML
language should define the timesheet link type.</p>
</div>

<h5 id="smilTimesheetsNS-Elements-Timesheet-Attributes-Media">The <a
name="adef-timesheetsMedia"><span class="adef">media</span></a> Attribute</h5>

<p>The <a href="#adef-timesheetsMedia" class="noxref"><span
class="ainst-timesheetsMedia ainst">media</span></a> attribute is used for
selecting the most suitable timesheet for the current media device. It works
in the same way as the @media rule in the CSS stylesheets <span
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
class="normref">[CSS2]</span></a></span>. The <a
href="#adef-timesheetsMedia" class="noxref"><span
class="ainst-timesheetsMedia ainst">media</span></a> attribute contains a
comma separated list of CSS media types. The timesheet timing and animation
information is applied to the host language document, only when the target
device media type matches one of the media types defined by the <a
href="#adef-timesheetsMedia" class="noxref"><span
class="ainst-timesheetsMedia ainst">media</span></a> attribute. If the media
attribute is not defined, the default value is "all".</p>

<div class="informative">
<p><em>This section is informative</em></p>

<div>
<p>In the following example, the media attribute contains only one CSS media
type: projection. Therefore, the timing is applied to the slideshow only when
the slideshow is given as a presentation, e.g., the browser is in so called
full screen mode. Otherwise, the timing information is not applied, and thus
all the slides are shown at the same time. </p>
</div>

<div>
<pre class="example">&lt;smil:timesheet media="projection"&gt;
  &lt;smil:seq&gt;
    &lt;smil:item select="#Slide1" dur="5s" /&gt;
    &lt;smil:item select="#Slide2" dur="5s" /&gt;
    &lt;smil:item select="#Slide3" dur="5s" /&gt;
  &lt;/smil:seq&gt;
&lt;/smil:timesheet&gt;</pre>
</div>
</div>

<h4 id="smilTimesheetsNS-Elements-Timesheet-Content"><a name="q9">Element
Content</a></h4>

<p>The <a href="#edef-timesheetsTimesheet"
class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element contains
the <a href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a>, <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a>, and <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time containers. The
semantics and restrictions are specified in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-timeContainerAttribute">the
time container attributes</a>. In addition, it contains the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> and <a
href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a> elements. Finally,
it also contains the animation elements: <a
href="#edef-timesheetsAnimate" class="noxref"><span
class="einst-timesheetsAnimate einst">animate</span></a>, <a
href="#edef-timesheetsSet" class="noxref"><span
class="einst-timesheetsSet einst">set</span></a>, <a
href="#edef-timesheetsAnimateMotion" class="noxref"><span
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
href="#edef-timesheetsAnimateColor" class="noxref"><span
class="einst-timesheetsAnimateColor einst">animateColor</span></a>.</p>

<p>In case of having timing containers inside of <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements, their semantics
are the same </p>

<h3 id="smilTimesheetsNS-Elements-Item">4.2 The <a
name="edef-timesheetsItem"><span class="edef">item</span></a> element</h3>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> target element references
elements in the document host language(s). The <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element implements the
actual connection between the timesheet and the document. It can reference a
media element or a set of elements by the element's tag, id or class; the
syntax and processing is the same to the CSS selector <span
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
class="normref">[CSS2]</span></a></span> syntax.</p>

<p>As indicated in the <a href="#smilTimesheetsNS-basicSelection">Selection
Mechanism</a>, when multiple elements of the host document match an <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element an ordered list
based on the host document order is constructed. </p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example illustrates how the CSS class selector can be used
to select more than one slides at the same time.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:seq&gt;
    &lt;smil:item select=".Slide" dur="5s"/&gt;
  &lt;/smil:seq&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>The class selector <code>".Slide"</code> selects all the slides at once.
Thus, the above timesheet is equivalent to the first example.</p>
</div>

<h4 id="smilTimesheetsNS-Elements-Item-Attributes"><a name="q11">Element
Attributes</a></h4>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element defines two
attributes: <a href="#adef-timesheetsSelect"
class="noxref"><span class="ainst-timesheetsSelect ainst">select</span></a>
and <a href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>. In addition, it
uses the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
defined in the <a href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0
Timing and Synchronization</a> module.</p>

<h5 id="smilTimesheetsNS-Elements-Item-Attributes-Select">The <a
name="adef-timesheetsSelect"><span class="adef">select</span></a>
Attribute</h5>

<p>The <a href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute links the
timesheet to the document. Its value is a comma-separated list of CSS
selectors <span class="normref"><a href="#ref-CSS2" rel="biblioentry"
class="noxref"><span class="normref">[CSS2]</span></a></span>. The attribute
follows the same syntax as the CSS selectors, so that the elements can be
referenced by their name, id, or class, or a more complex combination of the
selectors. If the attribute targets multiple elements in the host document,
<a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> controls all of them based
on the host document order.</p>

<h5 id="smilTimesheetsNS-Elements-Item-Attributes-BeginInc">The <a
name="adef-timesheetsBeginInc"><span class="adef">beginInc</span></a>
Attribute</h5>

<p>When the selector matches more than one element, an ordered list of
elements is constructed. The <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute
increments the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
time of each of the elements, but the first one, by the defined value. Note
that the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> time of the first
element is never modified. The <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute has to
be a positive integer.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example illustrates how the beginInc can be used to
increment the starting times of individual elements.</p>

<div>
<pre class="example">&lt;smil:par&gt;
  &lt;smil:item select=".Bullet" beginInc="1s" /&gt;
&lt;/smil:par&gt;</pre>
</div>

<p>In practise, the above example could also be expressed as follows.</p>

<div>
<pre class="example">&lt;smil:par&gt;
  &lt;smil:item select="#Bullet1_1" begin="0s" /&gt;
  &lt;smil:item select="#Bullet1_2" begin="1s" /&gt;
  &lt;smil:item select="#Bullet1_3" begin="2s" /&gt;
  &lt;smil:item select="#Bullet1_4" begin="3s" /&gt;
&lt;/smil:par&gt;</pre>
</div>
</div>
<!--
<h5 id="smilTimesheetsNS-Elements-Item-Attributes-IndexStart">The <a
name="adef-timesheetsIndexStart"><span class="adef">indexStart</span></a>
Attribute</h5>

<div class="normative">
<p><em>This section is normative.</em></p>

<p>The <a href="#adef-timesheetsIndexStart"
class="noxref"><span
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
be used to change the starting value of the <code>index()</code> function.
The default value of the <a href="#adef-timesheetsIndexStart"
class="noxref"><span
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute is
0, and thus the <code>index()</code> function starts to count the found <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements from index number
0. The <a href="#adef-timesheetsIndexStart"
class="noxref"><span
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
be given a positive integer value to change the starting value of the
<code>index()</code> function to the given value.</p>
</div>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>An example of how the <a href="#adef-timesheetsIndexStart"
class="noxref"><span
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
be used is given in the <a href="#smilTimesheetsNS-Events-Index">Event Model
</a> section, which describes a use case of the <code>index()</code>
function.</p>
</div>
-->

<h4 id="smilTimesheetsNS-Elements-Item-Functions"><a name="q15">Element
Functions</a></h4>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element defines one
function: <a
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>.
</p>

<h5 id="smilTimesheetsNS-Elements-Item-Functions-Index"><a name="q16">The
Index() Function</a></h5>

<p>As introduced in the <a href="#smilTimesheetsNS-basicIndex">Index
Functionality</a> section, the <a
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>
function can be used for identifying a specific element within the sorted
list resulting from multiple items matching. Thus, it can be used to
automatically generate index numbers for both internal and external events
within the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes of the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a>, <a
href="#edef-timesheetsAnimate" class="noxref"><span
class="einst-timesheetsAnimate einst">animate</span></a>, <a
href="#edef-timesheetsSet" class="noxref"><span
class="einst-timesheetsSet einst">set</span></a>, <a
href="#edef-timesheetsAnimateMotion" class="noxref"><span
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
href="#edef-timesheetsAnimateColor" class="noxref"><span
class="einst-timesheetsAnimateColor einst">animateColor</span></a> elements.
</p>

<p>The <a
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>
function has the format:</p>

<p><code>index(&lt;selector&gt;, &lt;indexStart&gt;)</code></p>

<p>where:</p>
<ul>
  <li>The <code>&lt;selector&gt;</code> parameter contains the CSS
  selector.</li>
  <li>The <code>&lt;indexStart&gt;</code> parameter indicates the index
  start.</li>
</ul>

<p>The <code>&lt;selector&gt;</code> parameter has to be a valid CSS
selector, while the <code>&lt;indexStart&gt;</code> parameter has to be a
positive integer value. By default <code>&lt;indexStart&gt;</code> is
<code>"0"</code>. If there are no elements in the host document matching the
CSS selector, the <a
href="#smilTimesheetsNS-Elements-Item-Functions">index()</a> function is not
called. If there are elements in the host document matching the CSS selector,
an ordered list of the elements is constructed. In this case, when an element
from the list is activated, the <a
href="#smilTimesheetsNS-Elements-Item-Functions">index()</a> function returns
the index of such element within the list plus the
<code>&lt;indexStart&gt;</code> value.</p>
<!--
The <identifier> parameter contains the event identifier name without index numbers.
The result of the <code>index()</code>
function is a concatenation of the &lt;identifier&gt; parameter and the
current index number of the matched item. The index number starts from 0 and
counts upwards. The starting number can be changed to some other positive
integer number using the <a href="#adef-timesheetsIndexStart"
class="noxref"><span
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute.</p>
-->

<h4 id="smilTimesheetsNS-Elements-Item-Content"><a name="q17">Element
Content</a></h4>

<p>The <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element can contain:</p>
<ul>
  <li>time containers: <a href="#edef-timesheetsSeq"
    class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a>, <a
    href="#edef-timesheetsPar" class="noxref"><span
    class="einst-timesheetsPar einst">par</span></a>, and <a
    href="#edef-timesheetsExcl" class="noxref"><span
    class="einst-timesheetsExcl einst">excl</span></a></li>
  <li><a href="#edef-timesheetsPrefetch" class="noxref"><span
    class="einst-timesheetsPrefetch einst">prefetch</span></a> elements</li>
  <li>animation elements: <a href="#edef-timesheetsAnimate"
    class="noxref"><span
    class="einst-timesheetsAnimate einst">animate</span></a>, <a
    href="#edef-timesheetsSet" class="noxref"><span
    class="einst-timesheetsSet einst">set</span></a>, <a
    href="#edef-timesheetsAnimateMotion" class="noxref"><span
    class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and
    <a href="#edef-timesheetsAnimateColor"
    class="noxref"><span
    class="einst-timesheetsAnimateColor einst">animateColor</span></a></li>
  <li>and other <a href="#edef-timesheetsItem"
    class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
    elements</li>
</ul>

<p>However, the direct child of the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element can only have one
child or none. All other children than the first one are ignored. If the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element has several
descendants they have to be included within a child time container. The
timing and synchronization of the child element is controlled by the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a>, as described in the <a
href="#smilTimesheetsNS-basicTiming">Timing andSynchronization</a> section.
Furthermore, the parent <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element limits the scope of the CSS selectors of the descendant <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a>, <a
href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a>, <a
href="#edef-timesheetsAnimate" class="noxref"><span
class="einst-timesheetsAnimate einst">animate</span></a>, <a
href="#edef-timesheetsSet" class="noxref"><span
class="einst-timesheetsSet einst">set</span></a>, <a
href="#edef-timesheetsAnimateMotion" class="noxref"><span
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
href="#edef-timesheetsAnimateColor" class="noxref"><span
class="einst-timesheetsAnimateColor einst">animateColor</span></a> elements
to match only descendant elements of the host language elements selected by
the parent <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element, as described in
the <a href="#smilTimesheetsNS-basicSelection">SelectionMechanism</a>
section.</p>
</div>

<h2 id="smilTimesheetsNS-Timing"><a name="q18">5 SMIL Timing and
Synchronization Elements</a></h2>

<div class="normative">
<p><em>This section is normative.</em></p>

<div class="ignore">

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The SMIL Timesheets uses five <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> modules:</p>
<ol>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a></li>
  <li><a
    href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a></li>
</ol>

<p>This section gives futher details on the attributes and elements of the
above mentioned modules. The reader is presumed to have read and be familiar
with them.</p>

<p>The timing semantics of the timesheets is based on the semantics of the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> chapter, although it has been simplified a bit. This may
cause the timing model not to be as powerful in expressing timing relations
as SMIL's, but it should be more approachable to the authors.</p>

<p>The base time, or the <em>syncbase</em> of a <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is the
moment when the element is started by its parent. Starting an element does
not necessarily make the referenced media element visible. Rather, it sets
the time moment "0s", to which the element's attributes are compared.</p>

<p>The syncbase of the child elements of a time container is dependent on the
type of the container. The children of <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> and <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> elements have the starting
time of their parent as their syncbase. The children of the <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> element consider the end
time of preceding child as their syncbase. This time is resolved only at the
moment the preceding child ends.</p>

<p><a href="#smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 2</a>
shows a simple example of the semantics of a timesheet. A parallel time
container has two children, which are <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements referencing two
media elements. When the <a href="#edef-timesheetsPar"
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
started, it activates both its children with the current time as their
syncbase. The media elements referenced by the children are not activated
yet. At time moment <em>1s</em>, the media element <em>item1</em> is
activated, according to the begin value of the referencing <a
href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element. At
<em>2s</em>, the <em>item2</em> is activated. At <em>3s</em>, the duration of
<em>item1</em> runs out, so it is stopped and the corresponding timesheet
element deactivates itself. At <em>4s</em>, the parent container stops
according to its duration attribute, stopping all of its active children.</p>

<p>The duration of an element is primarily defined by the <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute. If the element is
not stopped prematurely, due to an event or scheduling of its parent, the <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute tells the overall
duration of the element. The element will not stop until this duration has
passed, and will not stay active longer than this duration. The value of the
<a href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute will prevail:</p>
<ul>
  <li>when the sum of the durations of the children of a time container
    extends the value of the attribute;</li>
  <li>when the implicit duration of the media elements, like audio or video
    is longer than the specified duration;</li>
  <li>when the <a href="#adef-timesheetsRepeatCount"
    class="noxref"><span
    class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> or <a
    href="#adef-timesheetsRepeatDur" class="noxref"><span
    class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
    extend the duration of a media element to be longer than the specified
    duration.</li>
</ul>

<p>If the duration is not set, the duration of an element depends on the type
of the referenced elements, or the durations of the children. The timesheet
items can reference to discrete and continuous elements in the document.
Discrete elements don't have implicit durations, and the implicit duration of
an <a href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element referencing a
discrete element is <code>"indefinite"</code>. Continuous elements have their
own durations, which will be also used as the duration of the timesheet
element. The duration of the timecontainer depends on the durations and
activations of its children. The <a href="#edef-timesheetsSeq"
class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a> and <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> elements stay active until
all of their children have stopped. The implicit duration of the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> is always
<code>"indefinite"</code>.</p>
</div>
</div>

<h3 id="smilTimesheetsNS-Timing-Attributes"><a name="q19">5.1
Attributes</a></h3>

<p>The SMIL Timesheets includes the basic timing attributes <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> as defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a>
and <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a>
modules. In addition <a href="#adef-timesheetsFill"
class="noxref"><span class="ainst-timesheetsFill ainst">fill</span></a> and
<a href="#adef-timesheetsEndsync" class="noxref"><span
class="ainst-timesheetsEndsync ainst">endsync</span></a> attributes are
included as defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a>
and <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a>
modules. Also, it includes the <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes as
defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a>
module. The rest of the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
Synchronization</a> attributes are not supported. Finally, the SMIL
Timesheets includes four new Timing and Synchronization attributes: <a
href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a>, <a
href="#adef-timesheetsPrev" class="noxref"><span
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
href="#adef-timesheetsNext" class="noxref"><span
class="ainst-timesheetsNext ainst">next</span></a>, and <a
href="#adef-timesheetsLast" class="noxref"><span
class="ainst-timesheetsLast ainst">last</span></a>.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Begin">The <a
name="adef-timesheetsBegin"><span class="adef">begin</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute supports
offset and event values, <code>"indefinite"</code>, or a semi-colon separated
list of values. All other values are not supported. The allowed values and
semantics of the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
attribute are defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Dur">The <a
name="adef-timesheetsDur"><span class="adef">dur</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a> attribute supports the clock
values, <code>"media"</code>, and <code>"indefinite"</code>. The allowed
values and semantics of the <a href="#adef-timesheetsDur"
class="noxref"><span class="ainst-timesheetsDur ainst">dur</span></a>
attribute are defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-End">The <a
name="adef-timesheetsEnd"><span class="adef">end</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attribute supports offset
and event values, <code>"indefinite"</code>, or a semi-colon separated list
of values. All other values are not supported. The allowed values and
semantics of the <a href="#adef-timesheetsEnd"
class="noxref"><span class="ainst-timesheetsEnd ainst">end</span></a>
attribute are defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Fill">The <a
name="adef-timesheetsFill"><span class="adef">fill</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a> attribute allows an author
to specify that an element should be extended beyond the active duration by
freezing the final state of the element. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-fillAttribute">SMIL
3.0 Timing and Synchronization</a> module. Since SMIL Timesheets does not
include transitions, the <code>fill="transition"</code> value of <a
href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a> attribute is not
supported. Also, since the <code>fillDefault</code> attribute is not included
in the SMIL Timesheets, the <code>fill="default"</code> is interpreted the
same as <code>fill="auto"</code>.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Endsync">The <a
name="adef-timesheetsEndsync"><span class="adef">endsync</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsEndsync" class="noxref"><span
class="ainst-timesheetsEndsync ainst">endsync</span></a> attribute controls
the implicit duration of time containers, as a function of their children. It
is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-endsyncAttribute">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-RepeatCount">The <a
name="adef-timesheetsRepeatCount"><span class="adef">repeatCount</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsRepeatCount"
class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> attribute
specifies the number of iterations of a simple duration. It is defined in the
<a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatCountAttribute">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-RepeatDur">The <a
name="adef-timesheetsRepeatDur"><span class="adef">repeatDur</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsRepeatDur"
class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attribute
specifies the total duration for repeat. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatDurAttribute">SMIL
3.0 Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-First">The <a
name="adef-timesheetsFirst"><span class="adef">first</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a> attribute sets the
current active child of a time container<a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst"></span></a> <code>"inactive"</code>. Then,
it selects the first child element and sets it <code>"active"</code>. The <a
href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a> attribute can only be
used for the <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
container. The allowed value of the <a
href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a> attribute is a DOM event
<span class="inforef"><a href="#ref-DOM2Events" rel="biblioentry"
class="noxref"><span class="inforef">[DOM2Events]</span></a></span>.</p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Prev">The <a
name="adef-timesheetsPrev"><span class="adef">prev</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsPrev" class="noxref"><span
class="ainst-timesheetsPrev ainst">prev</span></a> attribute first checks,
whether the current active child is the first child. If not, it sets the
current active child of a time container <code>"inactive"</code>. Then, it
selects the previous child of the time container<a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst"></span></a> and sets it
<code>"active"</code>. The <a href="#adef-timesheetsPrev"
class="noxref"><span class="ainst-timesheetsPrev ainst">prev</span></a>
attribute can only be used for the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container. The
allowed value of the <a href="#adef-timesheetsPrev"
class="noxref"><span class="ainst-timesheetsPrev ainst">prev</span></a>
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span> </p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Next">The <a
name="adef-timesheetsNext"><span class="adef">next</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsNext" class="noxref"><span
class="ainst-timesheetsNext ainst">next</span></a> attribute first checks,
whether the current active child is the last child. If not, it sets the
current active child of a time container<a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst"></span></a> <code>"inactive"</code>. Then,
it selects the next child of the time container<a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst"></span></a> and sets it
<code>"active"</code>. The <a href="#adef-timesheetsNext"
class="noxref"><span class="ainst-timesheetsNext ainst">next</span></a>
attribute can only be used for the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container. The
allowed value of the <a href="#adef-timesheetsNext"
class="noxref"><span class="ainst-timesheetsNext ainst">next</span></a>
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span></p>

<h4 id="smilTimesheetsNS-Timing-Attributes-Last">The <a
name="adef-timesheetsLast"><span class="adef">last</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsLast" class="noxref"><span
class="ainst-timesheetsLast ainst">last</span></a> attribute sets the current
active child of a time container<a href="#edef-timesheetsSeq"
class="noxref"><span class="einst-timesheetsSeq einst"></span></a>
<code>"inactive"</code>. Then, it selects the last child of the time
container<a href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst"></span></a> and sets it
<code>"active"</code>. The <a href="#adef-timesheetsLast"
class="noxref"><span class="ainst-timesheetsLast ainst">last</span></a>
attribute can only be used for the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container. The
allowed value of the <a href="#adef-timesheetsLast"
class="noxref"><span class="ainst-timesheetsLast ainst">last</span></a>
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span></p>

<h3 id="smilTimesheetsNS-Timing-Elements"><a name="q31">5.2 Elements</a></h3>

<p>The SMIL Timesheets includes three elements <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a>, <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a>, and <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> as defined in the
BasicTimeContainers and BasicExclTimeContainers modules.</p>

<h4 id="smilTimesheetsNS-Timing-Elements-Par">The <a
name="edef-timesheetsPar" id="edef-timesheetsPar"><span
class="edef">par</span></a> Element</h4>

<p>The <a href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> element short for
"parallel", defines a simple time grouping in which multiple elements can
play back at the same. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ParSyntax">SMIL 3.0
Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Elements-Seq">The <a
name="edef-timesheetsSeq" id="edef-timesheetsSeq"><span
class="edef">seq</span></a> Element</h4>

<p>The <a href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> element defines a sequence
of elements in which elements play one after the other. Children of a <a
href="#edef-timesheetsSeq" class="noxref"><span
class="einst-timesheetsSeq einst">seq</span></a> can never play
simultaneously and play strictly in document order, except when a hyperlink
traversal targets an earlier child. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-SeqSyntax">SMIL 3.0
Timing and Synchronization</a> module.</p>

<h4 id="smilTimesheetsNS-Timing-Elements-Excl">The <a
name="edef-timesheetsExcl" id="edef-timesheetsExcl"><span
class="edef">excl</span></a> Element</h4>

<p>The <a href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> element defines a time
container with semantics based upon <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a>, but with the additional
constraint that only one child element may play at any given time. If any
element begins playing while another is already playing, the element that was
playing is stopped. In SMIL Timesshets, it is a simplified version of the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> element defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ExclSyntax">SMIL 3.0
Timing and Synchronization</a> module, since the BasicPriorityClassContainers
module is not included.</p>

<p>There are also four additional attributes that are specified for the <a
href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> element. They are <a
href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a>, <a
href="#adef-timesheetsPrev" class="noxref"><span
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
href="#adef-timesheetsNext" class="noxref"><span
class="ainst-timesheetsNext ainst">next</span></a>, and <a
href="#adef-timesheetsLast" class="noxref"><span
class="ainst-timesheetsLast ainst">last</span></a>. These are used to select
a certain child of the <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a>
element, which facilitates the creation of presentations where the user can
have control of the progression of the presentation, for example, a picture
show.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example illustrates how the additional <a
href="#adef-timesheetsFirst" class="noxref"><span
class="ainst-timesheetsFirst ainst">first</span></a>, <a
href="#adef-timesheetsPrev" class="noxref"><span
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
href="#adef-timesheetsNext" class="noxref"><span
class="ainst-timesheetsNext ainst">next</span></a>, and <a
href="#adef-timesheetsLast" class="noxref"><span
class="ainst-timesheetsLast ainst">last</span></a> attributes can be used in
slideshow. It contains a new timesheet and four buttons, which are appended
to the body part of first example.</p>

<div>
<pre class="example">&lt;head&gt;
  &lt;smil:timesheet&gt;
    &lt;smil:excl first="first.DOMActivate" prev="prev.DOMActivate" next="next.DOMActivate" last="last.DOMActivate"&gt;
      &lt;smil:item select=".Slide" /&gt;
    &lt;/smil:excl&gt;
  &lt;/smil:timesheet&gt;
&lt;/head&gt;

&lt;body&gt;
  ...
  &lt;button xml:id="first"&gt;First slide&lt;/button&gt;
  &lt;button xml:id="prev"&gt;Previous slide&lt;/button&gt;
  &lt;button xml:id="next"&gt;Next slide&lt;/button&gt;
  &lt;button xml:id="last"&gt;Last slide&lt;/button&gt;
&lt;/body&gt;</pre>
</div>

<p>The <em>first</em> button selects the first slide, the <em>prev</em>
button selects the previous slide, the <em>next</em> button selects the next
slide, and finally the <em>last</em> button selects the last slide.</p>
</div>
</div>

<h2 id="smilTimesheetsNS-Prefetch"><a name="q35">6 Prefetch</a></h2>

<div class="normative">
<p><em>This section is normative.</em></p>

<p>The SMIL Timesheets uses the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module. The module defines one element <a
href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a>, which has three
attributes <a href="#adef-timesheetsMediaSize"
class="noxref"><span
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
href="#adef-timesheetsMediaTime" class="noxref"><span
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
href="#adef-timesheetsBandwidth" class="noxref"><span
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a>. The original <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module uses the <a
href="#adef-timesheetsSrc" class="noxref"><span
class="ainst-timesheetsSrc ainst">src</span></a> attribute for locating and
fetching the associated media. In the SMIL Timesheets, the <a
href="#adef-timesheetsSrc" class="noxref"><span
class="ainst-timesheetsSrc ainst">src</span></a> attribute is replaced with
the <a href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute. This
section gives further details on how the attributes and elements of the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module are used in Timesheets.</p>

<p>If multiple elements in the host language match the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute, the
behaviour is the same as with the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element. An oredered list
of elements is constructed based on the host document order, so that the
parent time container determines whether the prefetching of the elements is
done in parallel or in sequence.</p>

<h3 id="smilTimesheetsNS-Prefetch-Attributes"><a name="q36">6.1
Attributes</a></h3>

<p>The SMIL Timesheets includes all three attributes of the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module: <a
href="#adef-timesheetsMediaSize" class="noxref"><span
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
href="#adef-timesheetsMediaTime" class="noxref"><span
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
href="#adef-timesheetsBandwidth" class="noxref"><span
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a>.</p>

<h4 id="smilTimesheetsNS-Prefetch-Attributes-MediaSize">The <a
name="adef-timesheetsMediaSize"><span class="adef">mediaSize</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsMediaSize"
class="noxref"><span
class="ainst-timesheetsMediaSize ainst">meadiaSize</span></a> attribute
defines how much of the resource to fetch as a function of the file size of
the resource. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module.</p>

<h4 id="smilTimesheetsNS-Prefetch-Attributes-MediaTime">The <a
name="adef-timesheetsMediaTime"><span class="adef">mediaTime</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsMediaTime"
class="noxref"><span
class="ainst-timesheetsMediaTime ainst">meadiaTime</span></a> attribute
defines how much of the resource to fetch as a function of the duration of
the resource. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module.</p>

<h4 id="smilTimesheetsNS-Prefetch-Attributes-Bandwidth">The <a
name="adef-timesheetsBandwidth"><span class="adef">bandwidth</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsBandwidth"
class="noxref"><span
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a> attribute
defines how much network bandwidth the user agent should use when doing the
prefetch. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module.</p>

<h3 id="smilTimesheetsNS-Prefetch-Elements"><a name="q40">6.2
Elements</a></h3>

<p>The SMIL Timesheets includes the <a
href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a> element of the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module.</p>

<h4 id="smilTimesheetsNS-Prefetch-Elements-Prefetch">The <a
name="edef-timesheetsPrefetch" id="edef-timesheetsPrefetch"><span
class="edef">prefetch</span></a> Element</h4>

<p>The <a href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a> element gives
authoring tools or savvy authors the ability to schedule retrieval of
resources when they think that there is available bandwidth or time to do it.
It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
3.0 PrefetchControl</a> module. It uses the <a
href="#adef-timesheetsMediaSize" class="noxref"><span
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
href="#adef-timesheetsMediaTime" class="noxref"><span
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
href="#adef-timesheetsBandwidth" class="noxref"><span
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a> attributes.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example illustrates how to use the <a
href="#edef-timesheetsPrefetch" class="noxref"><span
class="einst-timesheetsPrefetch einst">prefetch</span></a> element.</p>

<div>
<pre class="example">  &lt;head&gt;
    &lt;smil:timesheet&gt;
      &lt;smil:seq&gt;
        &lt;smil:prefetch select="#Image1" mediaSize="100%" /&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Image1" dur="5s" /&gt;
          &lt;smil:prefetch select="#Image2" /&gt;
        &lt;/smil:par&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Image2" dur="5s" /&gt;
          &lt;smil:prefetch select="#Image3" /&gt;
        &lt;/smil:par&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Image3" dur="5s" /&gt;
          &lt;smil:prefetch select="#Image4" /&gt;
        &lt;/smil:par&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Image4" dur="5s" /&gt;
          &lt;smil:prefetch select="#Image5" /&gt;
        &lt;/smil:par&gt;
        &lt;smil:item select="#Image5" dur="5s" /&gt;
      &lt;/smil:seq&gt;
    &lt;/smil:timesheet&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div xml:id="Images"&gt;
     &lt;img src="img/Image1.jpg" alt="Image1" class="Image" xml:id="Image1" /&gt;
     &lt;img src="img/Image2.jpg" alt="Image2" class="Image" xml:id="Image2" /&gt;
     &lt;img src="img/Image3.jpg" alt="Image3" class="Image" xml:id="Image3" /&gt;
     &lt;img src="img/Image4.jpg" alt="Image4" class="Image" xml:id="Image4" /&gt;
     &lt;img src="img/Image5.jpg" alt="Image5" class="Image" xml:id="Image5" /&gt;
    &lt;/div&gt;
  &lt;/body&gt;</pre>
</div>
</div>
</div>

<h2 id="smilTimesheetsNS-Animation"><a name="q42">7 Animation</a></h2>

<div class="normative">
<p><em>This section is normative.</em></p>

<p>The SMIL Timesheets uses the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
3.0 BasicAnimation</a> module. This section gives further details on how the
attributes and elements of the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
3.0 BasicAnimation</a> module are used in Timesheets.The reader is presumed
to have read the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
3.0 BasicAnimation</a> module and be familiar with it.</p>

<h3 id="smilTimesheetsNS-Animation-Attributes"><a name="q43">7.1
Attributes</a></h3>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>In <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
3.0 BasicAnimation</a> module, the animation target element can be referenced
either with <code>targetElement</code> or XLink <code>href</code> attribute.
According to the module, a host language designer should select only one of
them. In Timesheets, the <code>href</code> is more natural choice. However,
use of wider selection of CSS selectors is prefered as in the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element. Therefore, the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute is used
instead of <code>targetElement</code> and <code>href</code> attributes.
Because of this choise, the XLink <code>actuate</code>, <code>show</code>,
and <code>type</code> attributes are also not used.</p>
</div>

<p>An animation element can define the target element of the animation either
explicitly or implicitly. An explicit definition uses the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute to specify
the target element. The syntax for this is described below. If no explicit
target is specified, that is, the animation element does not specify the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute, the
implicit target element is the host language element or elements referenced
by the parent or ancestor <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
element.</p>

<p>Timesheets uses the <a href="#adef-timesheetsSelect"
class="noxref"><span class="ainst-timesheetsSelect ainst">select</span></a>
attribute to specify the target element. Therefore it does not include the
<code>targetElement</code> and the XLink attributes <code>href</code>,
<code>actuate</code>, <code>show</code>, and <code>type</code> attributes.
The target attribute is specified with the <a
href="#adef-timesheetsAttributeName" class="noxref"><span
class="ainst-timesheetsAttributeName ainst">attributeName</span></a>
attribute and optional <a href="#adef-timesheetsAttributeType"
class="noxref"><span
class="ainst-timesheetsAttributeType ainst">attributeType</span></a>
attribute, which specifies whether the target attribute is CSS property or
XML attribute. Animation is described either as a list of <a
href="#adef-timesheetsValues" class="noxref"><span
class="ainst-timesheetsValues ainst">values</span></a>, or in a simplified
form that describes the <a href="#adef-timesheetsFrom"
class="noxref"><span class="ainst-timesheetsFrom ainst">from</span></a>, <a
href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a>, and <a
href="#adef-timesheetsBy" class="noxref"><span
class="ainst-timesheetsBy ainst">by</span></a> values. The <a
href="#adef-timesheetsCalcMode" class="noxref"><span
class="ainst-timesheetsCalcMode ainst">calcMode</span></a> attribute
specifies the interpolation mode for the animation. The cumulative and
additive behavior of repeating animations is controlled with the <a
href="#adef-timesheetsAccumulate" class="noxref"><span
class="ainst-timesheetsAccumulate ainst">accumulate</span></a> and <a
href="#adef-timesheetsAdditive" class="noxref"><span
class="ainst-timesheetsAdditive ainst">additive</span></a> attributes,
respectively. The <a href="#adef-timesheetsOrigin"
class="noxref"><span class="ainst-timesheetsOrigin ainst">origin</span></a>
attribute specifies the origin of motion for the animation. The <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, and <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">fill</span></a> attributes are used to
control the timing of animation, while <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes are
used to control the repeat of animation. Finally, <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute can be
used to increment the begin time, while the <a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function can be used to automatically generate index numbers for events.</p>

<p>The <a href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> and <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attributes and the
<a
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
function are described in the <a href="#smilTimesheetsNS-Elements">SMIL
Timesheet Specific Elements</a> section, while the <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">fill</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes are
described in the <a href="#smilTimesheetsNS-Timing">Timing and
Synchronization</a> section. The other animation attributes are described
below.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-AttributeName">The <a
name="adef-timesheetsAttributeName"><span
class="adef">attributeName</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsAttributeName"
class="noxref"><span
class="ainst-timesheetsAttributeName ainst">attributeName</span></a>
attribute specifies the name of the target attribute. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingTargetAttribute">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-AttributeType">The <a
name="adef-timesheetsAttributeType"><span
class="adef">attributeType</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsAttributeType"
class="noxref"><span
class="ainst-timesheetsAttributeType ainst">attributeType</span></a>
attribute specifies the namespace in which the target attribute and its
associated values are defined. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingTargetAttribute">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-Values">The <a
name="adef-timesheetsValues"><span class="adef">values</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsValues" class="noxref"><span
class="ainst-timesheetsValues ainst">values</span></a> attribute contains a
semicolon-separated list of one or more values. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationFunction">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-From">The <a
name="adef-timesheetsFrom"><span class="adef">from</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsFrom" class="noxref"><span
class="ainst-timesheetsFrom ainst">from</span></a> attribute specifies the
starting value of the animation. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-To">The <a
name="adef-timesheetsTo"><span class="adef">to</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a> attribute specifies the ending
value of the animation. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-By">The <a
name="adef-timesheetsBy"><span class="adef">by</span></a> Attribute</h4>

<p>The <a href="#adef-timesheetsBy" class="noxref"><span
class="ainst-timesheetsBy ainst">by</span></a> attribute Specifies a relative
offset value for the animation. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-CalcMode">The <a
name="adef-timesheetsCalcMode"><span class="adef">calcMode</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsCalcMode" class="noxref"><span
class="ainst-timesheetsCalcMode ainst">calcMode</span></a> attribute
specifies the interpolation mode for the animation. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationFunction">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-Accumulate">The <a
name="adef-timesheetsAccumulate"><span class="adef">accumulate</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsAccumulate"
class="noxref"><span
class="ainst-timesheetsAccumulate ainst">accumulate</span></a> attribute
controls whether or not the animation is cumulative. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationEffect">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-Additive">The <a
name="adef-timesheetsAdditive"><span class="adef">additive</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsAdditive" class="noxref"><span
class="ainst-timesheetsAdditive ainst">additive</span></a> attribute controls
whether or not the animation is additive. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationEffect">SMIL
3.0 BasicAnimation </a> module.</p>

<h4 id="smilTimesheetsNS-Animation-Attributes-Origin">The <a
name="adef-timesheetsOrigin"><span class="adef">origin</span></a>
Attribute</h4>

<p>The <a href="#adef-timesheetsOrigin" class="noxref"><span
class="ainst-timesheetsOrigin ainst">origin</span></a> attribute specifies
the origin of motion for the animation. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateMotionElement">SMIL
3.0 BasicAnimation </a> module.</p>

<h3 id="smilTimesheetsNS-Animation-Elements"><a name="q54">7.2
Elements</a></h3>

<p>The SMIL Timesheets includes all elements of the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
3.0 BasicAnimation</a> module: <a
href="#edef-timesheetsAnimate" class="noxref"><span
class="einst-timesheetsAnimate einst">animate</span></a>, <a
href="#edef-timesheetsSet" class="noxref"><span
class="einst-timesheetsSet einst">set</span></a>, <a
href="#edef-timesheetsAnimateMotion" class="noxref"><span
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
href="#edef-timesheetsAnimateColor" class="noxref"><span
class="einst-timesheetsAnimateColor einst">animateColor</span></a>.</p>

<h4 id="smilTimesheetsNS-Animation-Elements-Animate">The <a
name="edef-timesheetsAnimate" id="edef-timesheetsAnimate"><span
class="edef">animate</span></a> Element</h4>

<p>The <a href="#edef-timesheetsAnimate" class="noxref"><span
class="einst-timesheetsAnimate einst">animate</span></a> element controls the
animation of both CSS properties and XML element attributes. It is defined in
the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateElement">SMIL
3.0 BasicAnimation</a> module. It uses the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a>, <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
href="#adef-timesheetsFrom" class="noxref"><span
class="ainst-timesheetsFrom ainst">from</span></a>, <a
href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a>, <a
href="#adef-timesheetsBy" class="noxref"><span
class="ainst-timesheetsBy ainst">by</span></a>, <a
href="#adef-timesheetsValues" class="noxref"><span
class="ainst-timesheetsValues ainst">values</span></a>, <a
href="#adef-timesheetsCalcMode" class="noxref"><span
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
href="#adef-timesheetsAccumulate" class="noxref"><span
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
href="#adef-timesheetsAdditive" class="noxref"><span
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The following example illustrates how the animate element can be used to
animate CSS properties of elements of the host language.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:seq&gt;
    &lt;smil:item select=".Slide" dur="15s"&gt;
      &lt;smil:par&gt;
        &lt;smil:item select=".Bullet" beginInc="3s"&gt;
          &lt;smil:animate select=".Bullet" attributeType="CSS"
              attributeName="margin-left" values="200;0" dur="1s" /&gt;
        &lt;/smil:item&gt;
      &lt;/smil:par&gt;
    &lt;/smil:item&gt;
  &lt;/smil:seq&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>The slides are shown in sequential order, while the bullets are shown in
parallel within each slide. However, each bullet starts 3 seconds after the
previous one. Each bullet flies from right to left for 1 second when
shown.</p>
</div>

<h4 id="smilTimesheetsNS-Animation-Elements-Set">The <a
name="edef-timesheetsSet" id="edef-timesheetsSet"><span
class="edef">set</span></a> Element</h4>

<p>The <a href="#edef-timesheetsSet" class="noxref"><span
class="einst-timesheetsSet einst">set</span></a> element provides a simple
means of setting the value of an attribute for a specified duration. It is
defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-setElement">SMIL
3.0 BasicAnimation</a> module. It uses the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a>, <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a>, <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>

<h4 id="smilTimesheetsNS-Animation-Elements-AnimateMotion">The <a
name="edef-timesheetsAnimateMotion" id="edef-timesheetsAnimateMotion"><span
class="edef">animateMotion</span></a> Element</h4>

<p>The <a href="#edef-timesheetsAnimateMotion"
class="noxref"><span
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a> element
moves an element along a path. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateMotionElement">SMIL
3.0 BasicAnimation</a> module. It uses the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a>, <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
href="#adef-timesheetsFrom" class="noxref"><span
class="ainst-timesheetsFrom ainst">from</span></a>, <a
href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a>, <a
href="#adef-timesheetsBy" class="noxref"><span
class="ainst-timesheetsBy ainst">by</span></a>, <a
href="#adef-timesheetsValues" class="noxref"><span
class="ainst-timesheetsValues ainst">values</span></a>, <a
href="#adef-timesheetsCalcMode" class="noxref"><span
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
href="#adef-timesheetsAccumulate" class="noxref"><span
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
href="#adef-timesheetsAdditive" class="noxref"><span
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
href="#adef-timesheetsOrigin" class="noxref"><span
class="ainst-timesheetsOrigin ainst">origin</span></a>, <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>

<h4 id="smilTimesheetsNS-Animation-Elements-AnimateColor">The <a
name="edef-timesheetsAnimateColor" id="edef-timesheetsAnimateColor"><span
class="edef">animateColor</span></a> Element</h4>

<p>The <a href="#edef-timesheetsAnimateColor"
class="noxref"><span
class="einst-timesheetsAnimateColor einst">animateColor</span></a> element
specifies an animation of a color attribute. It is defined in the <a
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateColorElement">SMIL
3.0 BasicAnimation</a> module. It uses the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a>, <a
href="#adef-timesheetsBeginInc" class="noxref"><span
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
href="#adef-timesheetsFrom" class="noxref"><span
class="ainst-timesheetsFrom ainst">from</span></a>, <a
href="#adef-timesheetsTo" class="noxref"><span
class="ainst-timesheetsTo ainst">to</span></a>, <a
href="#adef-timesheetsBy" class="noxref"><span
class="ainst-timesheetsBy ainst">by</span></a>, <a
href="#adef-timesheetsValues" class="noxref"><span
class="ainst-timesheetsValues ainst">values</span></a>, <a
href="#adef-timesheetsCalcMode" class="noxref"><span
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
href="#adef-timesheetsAccumulate" class="noxref"><span
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
href="#adef-timesheetsAdditive" class="noxref"><span
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a>, <a
href="#adef-timesheetsFill" class="noxref"><span
class="ainst-timesheetsFill ainst">fill</span></a>, <a
href="#adef-timesheetsRepeatCount" class="noxref"><span
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
href="#adef-timesheetsRepeatDur" class="noxref"><span
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>
</div>

<h2 id="smilTimesheetsNS-Events"><a name="q59">7 Event Model</a></h2>

<div class="ignore">

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes can contain
references to DOM events <span class="inforef"><a href="#ref-DOM2Events"
rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span>. DOM events can be triggered
by user interaction or by some other event in the document. Events are
divided into two distinct groups, internal events and user events.</p>
</div>

<h4 id="smilTimesheetsNS-Events-Internal"><a name="q60">Internal
Events</a></h4>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>Internal events are dispatched from within the timesheets. They can be
used by other elements in the timesheet to create relations between different
parts of the timeline. The events specified are <code>beginEvent</code>
event, which is dispatched when an element starts and <code>endEvent</code>
event, which is dispatched when element stops.</p>
</div>

<h4 id="smilTimesheetsNS-Events-User"><a name="q61">User Events</a></h4>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>User events are triggered by the actions that user makes. A typical
example is that the user activates a link in the document, and thus a
<code>DOMActivate</code> event is dispatched <span class="inforef"><a
href="#ref-DOM2Events" rel="biblioentry" class="noxref"><span
class="inforef">[DOM2Events]</span></a></span>.</p>
</div>

<h4 id="smilTimesheetsNS-Events-Semantics"><a name="q62">Event
Semantics</a></h4>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>A <a href="#edef-timesheetsTimesheet" class="noxref"><span
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is set
to listen to a certain event by specifying the event's target and type by
either the <a href="#adef-timesheetsBegin"
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes. When specified
by the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute, an inactive
or started but not yet activated element will be activated when it receives
the specified event. The parent time containers and item elements have to be
active, though.</p>

<p>When the element is specified to stop according to an event, it does not
cause that much processing in the timesheet. The element informs its parent
that it has stopped and parent then decides what should happen next. Of
course, some other element could be waiting to be activated according to the
<code>endEvent</code> event from the particular element.</p>
</div>

<h4 id="smilTimesheetsNS-Events-Index"><a name="q63">Index Function</a></h4>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>The <code>index()</code> function can be used to automatically generate
index numbers for both internal and external events within <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
href="#adef-timesheetsDur" class="noxref"><span
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
href="#adef-timesheetsEnd" class="noxref"><span
class="ainst-timesheetsEnd ainst">end</span></a> attributes of item element.
The following example gives an example on how <code>index()</code> function
can be used. The example is an image show, which consist of images and
corresponding thumbnail images, which can be used to select an individual
image for viewing. Only one image is shown at a time.</p>

<div>
<pre class="example">&lt;html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:smil="http://www.w3.org/ns/SMIL30"&gt;
  &lt;head&gt;
    &lt;title&gt;Timesheet Example&lt;/title&gt;
    &lt;smil:timesheet&gt;
      &lt;smil:par&gt;
        &lt;smil:excl&gt;
          &lt;smil:item select="#Image1" begin="Thumbnail1.DOMActivate" /&gt;
          &lt;smil:item select="#Image2" begin="Thumbnail2.DOMActivate" /&gt;
          &lt;smil:item select="#Image3" begin="Thumbnail3.DOMActivate" /&gt;
          &lt;smil:item select="#Image4" begin="Thumbnail4.DOMActivate" /&gt;
          &lt;smil:item select="#Image5" begin="Thumbnail5.DOMActivate" /&gt;
        &lt;/smil:excl&gt;
        &lt;smil:par&gt;
          &lt;smil:item select="#Thumbnail1" /&gt;
          &lt;smil:item select="#Thumbnail2" /&gt;
          &lt;smil:item select="#Thumbnail3" /&gt;
          &lt;smil:item select="#Thumbnail4" /&gt;
          &lt;smil:item select="#Thumbnail5" /&gt;
        &lt;/smil:par&gt;
      &lt;/smil:par&gt;
    &lt;/smil:timesheet&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img alt="image1" src="Image1.jpg" class="Image" xml:id="Image1" /&gt;
    &lt;img alt="image2" src="Image2.jpg" class="Image" xml:id="Image2" /&gt;
    &lt;img alt="image3" src="Image3.jpg" class="Image" xml:id="Image3" /&gt;
    &lt;img alt="image4" src="Image4.jpg" class="Image" xml:id="Image4" /&gt;
    &lt;img alt="image5" src="Image5.jpg" class="Image" xml:id="Image5" /&gt;
    &lt;br /&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail1"&gt;
      &lt;img src="Thumbnail1.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail2"&gt;
      &lt;img src="Thumbnail2.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail3"&gt;
      &lt;img src="Thumbnail3.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail4"&gt;
      &lt;img src="Thumbnail4.jpg" /&gt;
    &lt;/button&gt;
    &lt;button class="Thumbnail" xml:id="Thumbnail5"&gt;
      &lt;img src="Thumbnail5.jpg" /&gt;
    &lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>In the above example, the body of the HTML file consists of five pictures
and five buttons, which contain thumbnails of the same images. The idea is to
show one image at a time. The image to be shown is selected by the thumbnail
buttons. Therefore, the timesheets consist of one <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container, which
contains one <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> and
another <a href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container. Within the
<a href="#edef-timesheetsExcl" class="noxref"><span
class="einst-timesheetsExcl einst">excl</span></a> time container the <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> elements select the
images, while the <a href="#edef-timesheetsItem"
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
elements within the second <a href="#edef-timesheetsPar"
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> time
container select the individual thumbnail buttons. <code>DOMActivate</code>
events cause the <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
container to change the shown image according to which button was pushed.</p>

<p>The problem with the above example is that each time the position of an
image is changed, deleted, or added to the image show, the Timesheet has to
be updated. Therefore, the Timesheet is not reusable. The main problem lies
in the references to the <code>DOMActive</code> events, because the index
numbers have to be updated. Thus, there is need to automatically generate
index numbers for the <code>DOMActivate</code> event references in the
Timesheets. The <code>index()</code> function can be used exactly for this
purpose. In the Timesheet below, <code>index()</code> function is used within
the <a href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute of <a
href="#edef-timesheetsItem" class="noxref"><span
class="einst-timesheetsItem einst">item</span></a> element, which selects the
images within the <a href="#edef-timesheetsExcl"
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
container.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:par&gt;
    &lt;smil:excl&gt;
      &lt;smil:item select=".Image" begin="index(Thumbnail).DOMActivate" /&gt;
    &lt;/smil:excl&gt;
    &lt;smil:par&gt;
      &lt;smil:item select=".Thumbnail" /&gt;
    &lt;/smil:par&gt;
  &lt;/smil:par&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>The <code>index()</code> function adds the index number to the Thumbnail
parameter (e.g., <code>Thumbnail0.DOMActivate</code>,
<code>Thumbnail1.DOMActivate</code>, etc.) in the <a
href="#adef-timesheetsBegin" class="noxref"><span
class="ainst-timesheetsBegin ainst">begin</span></a> attribute. Therefore,
one <code>".Image"</code> class selector can be used in the <a
href="#adef-timesheetsSelect" class="noxref"><span
class="ainst-timesheetsSelect ainst">select</span></a> attribute instead of
severall id selectors. The main advantage of this is that changing the order
of images, deleting images, or adding new images does not any longer require
updating the Timesheet. Thus, the Timesheets is now much more reusable.
However, there is one problem in the above example. The index numbering
starts from 0. It should be corrected to start from 1 by using the indexStart
attribute as shown in the example below.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:par&gt;
    &lt;smil:excl&gt;
      &lt;smil:item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" /&gt;
    &lt;/smil:excl&gt;
    &lt;smil:par&gt;
      &lt;smil:item select=".Thumbnail" /&gt;
    &lt;/smil:par&gt;
  &lt;/smil:par&gt;
&lt;/smil:timesheet&gt;</pre>
</div>

<p>Now, the index numbering starts from 1, and thus the Timesheet functions
properly. However, the Timesheets can be written in even more compact format.
The reason is that all the thumbnail images in buttons are allways shown, and
thus the second <a href="#edef-timesheetsPar"
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
actually unnecessary. When it is removed, also the first <a
href="#edef-timesheetsPar" class="noxref"><span
class="einst-timesheetsPar einst">par</span></a> time container becomes
unnecessary. Therefore, the most simple Timesheets for this use case is as
follows.</p>

<div>
<pre class="example">&lt;smil:timesheet&gt;
  &lt;smil:excl&gt;
    &lt;smil:item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" /&gt;
  &lt;/smil:excl&gt;
&lt;/smil:timesheet&gt;</pre>
</div>
</div>
</div>

<h2 id="smilTimesheetsNS-CSS"><a name="q64">8 Integration with CSS
Layout</a></h2>

<div class="informative">
<p><em>This section is informative.</em></p>

<p>Since SMIL Timesheets only describes the temporal dimension of the
document, it must be integrated with a host language's layout system. It can
be integrated, for example, with CSS based layout by affecting the CSS
properties of the timed elements. For instance, the CSS display property can
be used to control, whether an element is displayed or not. The SMIL
Timesheets processor sets the CSS display property to to "none", when the
timed element should not be visible based on the timesheet. According to CSS
specification, this causes the element to have no effect on the layout of the
document, and thus the element is invisible. At the same time the original
value should be stored for later use. When the media element should become
visible, the original display value can be restored.</p>

<p>The content authors should be aware that according to the CSS
specification the descendant elements of an element, which has display value
set to none, are also invisible. Therefore, the content authors should check
that all the parent elements of an active elements are also set active in the
timesheet if they are referenced in the timesheet.</p>

<p>Finally, the content authors should also be aware that only visible
elements can increment CSS counters. Therefore, CSS counters might not work
as expected when they are used together with timesheet. One solution is to
use CSS attributes instead and define their values in the document or
increment the attribute values, e.g., using a scripting language.</p>
</div>

<h2 id="Appendix"><a name="references" id="references">Appendix A.
References</a></h2>

<div class="informative">
<p><em>This section is informative.</em></p>

<h3 id="refsNS-normative">E.1 <a name="refsNSnormative">Normative
References</a></h3>
<dl>
  <dt><strong><a class="normref" name="ref-CSS2">[CSS2]</a></strong></dt>
    <dd>"<a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/"><em>Cascading
      Style Sheets, level 2: CSS2 Specification</em></a>", B. Bos, et al.,
      Editors. World Wide Web Consortium, 12 May 1998. This W3C
      Recommendation is available at
      http://www.w3.org/TR/1998/REC-CSS2-19980512/. <br>
      The latest version is available at <a
      href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a></dd>
</dl>

<h3 id="refsNS-informative">E.2 <a name="refsNSinformative">Informative
References</a></h3>
<dl>
  <dt><strong><a class="inforef" name="ref-DOM2Events"
  id="ref-DOM2Events">[DOM2Events]</a></strong></dt>
    <dd>"<em><a
      href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html">Document
      Object Model (DOM) Level2 : Events</a></em>", Tom Pixley. World Wide
      Web Consortium, 13 November 2000. This W3C Recommendation is available
      at
      http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">http://www.w3.org/TR/DOM-Level-2-Events/events.html</a></dd>
  <dt><strong><a class="inforef" name="ref-SMIL30"
  id="ref-SMIL30">[SMIL30]</a></strong></dt>
    <dd>"<a
      href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/"><em>Synchronized
      Multimedia Integration Language (SMIL 3.0) </em></a>", Dick Bulterman
      et al., Editors. World Wide Web Consortium, 13 July 2007. This W3C
      Working Draft is available at
      http://www.w3.org/TR/2007/WD-SMIL3-20070713/.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/SMIL3/">http://www.w3.org/TR/SMIL3/</a></dd>
  <dt><strong><a class="inforef" name="ref-SVG"
  id="ref-SVG">[SVG]</a></strong></dt>
    <dd>"<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/"><em>Scalable
      Vector Graphics (SVG) 1.1 Specification</em></a>", Jon Ferraiolo et
      al., Editors. World Wide Web Consortium, 14 January 2003. This W3C
      Recommendation is available at
      http://www.w3.org/TR/2003/REC-SVG11-20030114/.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/SVG">http://www.w3.org/TR/SVG/</a></dd>
  <dt><strong><a class="inforef" name="ref-TimesheetsTutorial"
  id="ref-TimesheetsTutorial">[TimesheetsTutorial]</a></strong></dt>
    <dd>"<a href="http://www.tml.tkk.fi/~pv/timesheets/"><em>Timesheets
      Tutorial</em></a>", Petri Vuorimaa. This tutorial is avaialble at
      http://www.tml.tkk.fi/~pv/timesheets/.<br>
    </dd>
  <dt><strong><a class="inforef" name="ref-XForms"
  id="ref-XForms">[XForms]</a></strong></dt>
    <dd>"<a href="http://www.w3.org/TR/2007/REC-xforms-20071029/"><em>XForms
      1.0 (Third Edition)</em></a>", John M. Boyer, Editor. World Wide Web
      Consortium, 29 October 2007. This W3C Recommendation is available at
      http://www.w3.org/TR/2007/REC-xforms-20071029/.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/xforms">http://www.w3.org/TR/xforms</a></dd>
  <dt><strong><a class="inforef" name="ref-XHTML"
  id="ref-XHTML">[XHTML]</a></strong></dt>
    <dd>"<a href="http://www.w3.org/TR/2002/REC-xhtml1-20020801/"><em>XHTML
      1.0 The Extensible HyperText Markup Language (Second Edition)</em>
      </a>" Steven Pemberton et al., Editors. World Wide Web Consortium, 24
      January 2000, revised 1 August 2002. This W3C NOTE is available at
      http://www.w3.org/TR/2002/REC-xhtml1-20020801/.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/xhtml1/">http://www.w3.org/TR/xhtml1/</a></dd>
  <dt><strong><a class="inforef" name="ref-XHTMLplusSMIL"
  id="ref-XHTMLplusSMIL">[XHTMLplusSMIL]</a></strong></dt>
    <dd>"<a
      href="http://www.w3.org/TR/2002/NOTE-XHTMLplusSMIL-20020131/"><em>XHTML+SMIL
      Profile</em></a>" Debbie Newman, Patrick Schmitz, Aaron Patterson.
      World Wide Web Consortium, 31 January 2002. This W3C NOTE is available
      at http://www.w3.org/TR/2002/NOTE-XHTMLplusSMIL-20020131/.<br>
      The latest version is available at <a
      href="http://www.w3.org/TR/XHTMLplusSMIL/">http://www.w3.org/TR/XHTMLplusSMIL/</a></dd>
</dl>

<h2 id="Appendix1">Appendix B. <a
name="acknowledgements">Acknowledgements</a></h2>

<p>This document has been prepared by the Synchronized Multimedia Working
Group (SYMM WG) of the World Wide Web Consortium. <br>
The SYMM WG which specified SMIL 3.0 included the following individuals:</p>
<dl>
    <dd>Dick Bulterman, CWI - Pablo Cesar, CWI - Samuel Cruz-Lara, INRIA -
      Marisa DeMeglio, DAISY Consortium - Xabiel García Pañeda, Universidad
      de Oviedo - Luiz Fernando Gomes Soares (Invited Experts) - Eric Hyche,
      RealNetworks - Jack Jansen, CWI - Hiroshi Kawamura, NRCD - Nabil
      Layaïda, INRIA - David Melendi, Universidad de Oviedo, Thierry Michel,
      W3C - Sjoerd Mullender, CWI - Julien Quint, DAISY Consortium - Petri
      Vuorimaa, Helsinki University of Technology - Daniel Weck, NRCD -
      Daniel F. Zucker, Invited Expert. </dd>
</dl>
</div>
<!--</div>-->
</body>
</html>