Mercurial > hg > Members > amothic > html
view seminar/20110802.html @ 1:23c1131ea61c
add S5
author | Daichi TOMA <e085740@ie.u-ryukyu.ac.jp> |
---|---|
date | Mon, 01 Aug 2011 15:54:10 +0900 |
parents | |
children | 667ea58b05d2 |
line wrap: on
line source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Seminar</title> <!-- metadata --> <meta name="generator" content="S5" /> <meta name="version" content="S5 1.3" /> <meta name="author" content="Daichi Toma" /> <!-- meta temporary --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <!-- configuration parameters --> <meta name="defaultView" content="slideshow" /> <meta name="controlVis" content="hidden" /> <!-- configuration extensions --> <meta name="tranSitions" content="true" /> <meta name="fadeDuration" content="500" /> <meta name="incrDuration" content="250" /> <!-- configuration autoplay extension --> <meta name="autoMatic" content="false" /> <meta name="playLoop" content="true" /> <meta name="playDelay" content="10000" /> <!-- configuration audio extension --> <meta name="audioSupport" content="false" /> <meta name="audioVolume" content="100" /> <meta name="audioError" content="false" /> <!-- configuration audio debug --> <meta name="audioDebug" content="false" /> <!-- style sheet links --> <link rel="stylesheet" href="ui/default_utf/slides.css" type="text/css" media="projection" id="slideProj" /> <link rel="stylesheet" href="ui/default_utf/outline.css" type="text/css" media="screen" id="outlineStyle" /> <link rel="stylesheet" href="ui/default_utf/print.css" type="text/css" media="print" id="slidePrint" /> <link rel="stylesheet" href="ui/default_utf/opera.css" type="text/css" media="projection" id="operaFix" /> <!-- embedded styles --> <style type="text/css" media="all"> .imgcon {width: 100%; margin: 0 auto; padding: 0; text-align: center;} #anim {width: 33%; height: 320px; position: relative;} #anim img {position: absolute; top: 0px; left: 0px;} </style> <!-- S5 JS --> <script src="ui/default_utf/slides.js" type="text/javascript"></script> </head> <body> <div class="layout"> <div id="controls"><!-- DO NOT EDIT --></div> <div id="currentSlide"><!-- DO NOT EDIT --></div> <div id="header"></div> <div id="footer"> <h1>Seminar</h1> <h2>Daichi Toma</h2> </div> </div> <ol class="xoxo presentation"> <li class="slide"> <h1>Seminar</h1> <h3>Daichi Toma</h3> <div class="handout"></div> </li> <li class="slide"> <h1>What Is S5?</h1> <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! (<a href="#slide10">skip to summary</a>; demonstrates links internal to the slide show)</li> </ul> <div class="notes"> <ul> <li>I have notes here!</li> <li>Keen.</li> <li>Remember to tell people that notes are a new feature in 1.2</li> </ul> </div> </li> <li class="slide"> <h1>Operatic Origins</h1> <ul> <li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external">Opera Show</a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</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 class="notes"> <ul> <li>S5 and OperaShow diverged greatly in S5 1.1</li> <li>S5 1.2 should (we hope) bring them into harmony once more</li> </ul> </div> </li> <li class="slide"> <h1>Incremental Display</h1> <ul class="incremental show-first"> <li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li> <li>Bullet points are revealed one by one <ul class="incremental"> <li>All based on class name of <code>inc</code></li> <li>Lists can be classed to make items appear individually</li> <li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li> </ul> </li> <li>Let's try it again, but without the first bullet point being pre-highlighted...</li> </ul> </li> <li class="slide"> <h1>Incremental Display II</h1> <ul class="incremental fs90"> <li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li> <li>Bullet points are revealed one by one <ul> <li>All based on class name of <code>incremental</code></li> <li>Lists can be classed to make items appear individually</li> <li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li> </ul> </li> <li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li> <li>Now to move on to other test slides!</li> </ul> </li> <li class="slide"> <h1>PNG Alpha Tests</h1> <div style="width: 400px; height: 150px; text-align: center; background: url(pix/bg-shade.png)"> <p>DIV with PNG background followed by foreground PNG</p> <img class="scale" src="pix/bg-shade.png" width="200" height="200" alt="" title="A translucent image" /> </div> <div style="width: 100%; height: 150px; text-align: center; background: url(pix/bg-shade.png)"> <p>DIV with PNG background followed by foreground PNG</p> <img class="scale" src="pix/bg-shade.png" width="200" height="200" alt="" title="A translucent image" /> </div> </li> <li class="slide"> <h1>S5 Default File Structure</h1> <p style="text-align: center;"> <img class="scale" width="760" height="381" src="pix/s5filemap.png" alt="" title="At a Glance" /> </p> </li> <li class="slide"> <h1>S5 Themes</h1> <p style="text-align: center;"> <img class="scale" width="256" height="187" src="pix/S501.jpg" alt="" title="Default" /> <img class="scale" width="256" height="187" src="pix/S502.jpg" alt="" title="Avanced" /><br /> <img class="scale" width="256" height="187" src="pix/S503.jpg" alt="" title="Sunny" /> <img class="scale" width="256" height="187" src="pix/S504.jpg" alt="" title="School" /><br /> <small>(one way of presenting multiple graphics)</small> </p> </li> <li class="slide"> <h1>Incremental S5 Themes</h1> <p style="text-align: center;"> <img class="scale incremental" width="256" height="187" src="pix/S501.jpg" alt="" title="Default" /> <img class="scale incremental" width="256" height="187" src="pix/S502.jpg" alt="" title="Avanced" /><br /> <img class="scale incremental" width="256" height="187" src="pix/S503.jpg" alt="" title="Sunny" /> <img class="scale incremental" width="256" height="187" src="pix/S504.jpg" alt="" title="School" /><br /> <small>(one by one!)</small> </p> </li> <li 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 class="scale" src="pix/mememe01.png" width="270" height="320" alt="" /> <img class="scale incremental" src="pix/mememe02.png" width="270" height="320" alt="" /> <img class="scale incremental" src="pix/mememe03.png" width="270" height="320" alt="" /> <img class="scale incremental" src="pix/mememe04.png" width="270" height="320" alt="" /> <img class="scale incremental" src="pix/mememe05.png" width="270" height="320" alt="" /> </p> </li> <li 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>The S5 format is OSF 1.0 compatible</li> <li>S5 is a very flexible and lightweight slide show system available for anyone to use</li> </ul> </li> </ol> </body> </html>