-->
    <div class="presentation">
     <div class="slide">
      <h1>Presenting with S5</h1>
      <h3>A. Eliëns</h3>
      <h4><a href="http://create.eliens.net">Creative Technology</a></h4>
     </div>
     <div class="slide">
      <h1>What Is S5?</h1>
      adapted from a presentation by Eric Meyer
      <ul>
       <li>
        It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide
        <strong>S</strong>how <strong>S</strong>ystem</li>
       <li>
        One XHTML document provides all of the slide show's content</li>
       <li>
        CSS handles the layout and look of the slides</li>
       <li>
        JavaScript handles the dynamic aspects of the show</li>
       <li>
        That's all there is to it!</li>
       <li> download it via <a href=sub-tutorial-web-3.html>tutorial 3</a>
       or directly from <a href=http://meyerweb.com/eric/tools/s5>tools/s5</a></li>
      </ul>
     </div>
     <div class="slide">
      <h1>Operatic Origins</h1>
      <ul>
       <li>
        Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/">Opera 
         Show</a>, a projection-mode style sheet technology</li>
       <li>
        Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
       <li>
        Adding screen and print style sheets allows for multi-medium views of a single 
        document</li>
       <li>
        Highly efficient, but highly browser centric...</li>
      </ul>
     </div>
     <div class="slide">
      <h1>Expanding The Field</h1>
      <ul>
       <li>
        When Opera 7.5 for OS X came out, the banner ads persisted in projection mode</li>
       <li>
        <a href="http://tantek.com/" rel="friend colleague met">Tantek &Ccedil;elik</a> 
        created a JavaScript-driven slide show technique that worked on multiple 
        browsers
        <ul>
         <li>
          Unfortunately, it required each slide to be ID'ed ahead of time, making 
          additions and rearrangement difficult</li>
         <li>
          Navigation was only linear; no way to jump to an arbitrary slide</li>
         <li>
          There was also no facility to "switch off" the slide show styles short of 
          killing all CSS</li>
        </ul>
       </li>
       <li>
        Motive and opportunity combined to point the way...</li>
      </ul>
     </div>
     <div class="slide">
      <h1>Where We Are Now</h1>
      <ul>
       <li>
        S5 builds on Tantek's scripts and ideas, with input and ideas from several 
        other people</li>
       <li>
        Each slide is enclosed in a classed element; IDs are dynamically assigned via 
        JavaScript</li>
       <li>
        Navigation menu is automatically built at run time</li>
       <li>
        The S5 format is compatible with <a href="http://my.opera.com/community/dev/operashow/documentation/doc_fileformat.html">
         Opera Show Format 1.0</a>, making it easy to move slides between the two 
        formats as needed</li>
       <li>
        S5 can also run slide shows based on <a href="http://microformats.org/wiki/XOXO">XOXO</a></li>
      </ul>
     </div>
     <div class="slide">
      <h1>How It Works</h1>
      <ul>
       <li>
        Controls are...
        <ul>
         <li>
          Next slide: Space bar, return, right arrow, down arrow, page down, click 
          anywhere in slide that isn't in the control area (lower right corner), click 
          "arrow" in lower right corner, accesskey "X"</li>
         <li>
          Previous slide: Up arrow, left arrow, page up, click "arrow" in lower right 
          corner, accesskey "Z"</li>
         <li>
          Toggle the slide styles: Click on the toggle button (to the left of the 
          arrows), press "t", accesskey "T"</li>
        </ul>
        ...<a href="http://meyerweb.com/eric/tools/s5/features.html#controlchart" rel="external">plus 
         more</a>!
       </li>
       <li>
        To invoke the navigation menu: mouse into the lower right corner of the slide 
        (below the navigation arrows)</li>
      </ul>
     </div>
     <div class="slide">
      <h1>The Advantages</h1>
      <ul>
       <li>
        With one file, you get a slide show, a printable outline, and a screen 
        presentation</li>
       <li>
        Files are incredibly lightweight and compress easily</li>
       <li>
        Thanks to being semantic XHTML, slideshow files are also highly accessible</li>
       <li>
        New slide themes can be created simply by writing new style sheets</li>
       <li>
        Unlike Opera Show, which has all of the above advantages, S5 works in multiple 
        browsers</li>
      </ul>
     </div>
     <div class="slide">
      <h1>S5 Default File Structure</h1>
      <p style="text-align: center;">
       <img src="lib-present-slide-s5-pix-s5filemap.png" alt="" title="At a Glance" />
      </p>
     </div>
     <div class="slide">
      <h1>S5 Themes</h1>
      <p style="width: 520px; margin: 0 auto; text-align: center;">
       <img src="lib-present-slide-s5-pix-S501.jpg" alt="" title="Default" /> <img src="lib-present-slide-s5-pix-S502.jpg" alt="" title="I18N" />
       <img src="lib-present-slide-s5-pix-S503.jpg" alt="" title="Blue" /> <img src="lib-present-slide-s5-pix-S504.jpg" alt="" title="Flower" />
       (just a sampling)
      </p>
     </div>
     <div class="slide">
      <h1>Features New to 1.1</h1>
      <ul class="incremental">
       <li>
        Incremental display of slide content</li>
       <li>
        Font scaling based on window size</li>
       <li>
        Support for PNG alpha channels in all supporting browsers, including IE/Win</li>
       <li>
        Ability to jump to any slide, or skip a number of slides, via keyboard commands</li>
      </ul>
     </div>
     <div class="slide">
      <h1>Incremental Animation</h1>
      <ul>
       <li>
        A demonstration of just one of the many ways to accomplish simple 
        animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">
          "XFN and..."</a>)</small></li>
      </ul>
      <p class="imgcon" id="anim">
       <img src="lib-present-slide-s5-pix-mememe01.png" id="me01" alt="" /> <img src="lib-present-slide-s5-pix-mememe02.png" alt="" id="me02" class="incremental" />
       <img src="lib-present-slide-s5-pix-mememe03.png" alt="" id="me03" class="incremental" /> <img src="lib-present-slide-s5-pix-mememe04.png" alt="" id="me04" class="incremental" />
       <img src="lib-present-slide-s5-pix-mememe05.png" alt="" id="me05" class="incremental" />
      </p>
     </div>
     <div class="slide">
      <h1>Current Limitations</h1>
      <ul>
       <li>
        Only one author can be listed in the metadata</li>
       <li>
        Opera falls back to use OperaShow; thus no extras (like the navigation menu or 
        progress indication) are available</li>
       <li>
        Images are not scaled along with the text when the window size changes</li>
      </ul>
     </div>
     <div class="slide">
      <h1>Open To The Public</h1>
      <ul>
       <li>
        S5 1.1 is released under an explicit Public Domain license</li>
       <li>
        Contributors to S5 <strong>must</strong> be willing to accept those terms
        <ul>
         <li>
          In other words: if you submit a contribution, you are agreeing to abide by and 
          place your contributions into the Public Domain along with S5</li>
         <li>
          On the other hand, anyone can freely use S5 for their own presentations or 
          modify S5 to suit their needs</li>
        </ul>
       </li>
      </ul>
     </div>
     <div class="slide">
      <h1>In Summary</h1>
      <ul>
       <li>
        With minimal scripting, we have recreated and improved upon a (currently) 
        browser-specific technology, making it cross-browser in the process</li>
       <li>
        New themes are just a matter of writing a new style sheet</li>
       <li>
        The S5 format is OSF 1.0 and XOXO compatible</li>
       <li>
        S5 is a very flexible and lightweight slide show system available for anyone to 
        use</li>
      </ul>
     </div>
     <!--