[15c7d39] | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
---|
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
---|
| 3 |
|
---|
| 4 | <html xmlns="http://www.w3.org/1999/xhtml">
|
---|
| 5 |
|
---|
| 6 | <head>
|
---|
| 7 | <title>S5: An Introduction</title>
|
---|
| 8 | <!-- metadata -->
|
---|
| 9 | <meta name="generator" content="S5" />
|
---|
| 10 | <meta name="version" content="S5 1.2a2" />
|
---|
| 11 | <meta name="author" content="Eric A. Meyer" />
|
---|
| 12 | <meta name="company" content="Complex Spiral Consulting" />
|
---|
| 13 | <!-- configuration parameters -->
|
---|
| 14 | <meta name="defaultView" content="slideshow" />
|
---|
| 15 | <meta name="controlVis" content="hidden" />
|
---|
| 16 | <!-- style sheet links -->
|
---|
| 17 | <link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
|
---|
| 18 | <link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
|
---|
| 19 | <link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
|
---|
| 20 | <link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
|
---|
| 21 | <!-- embedded styles -->
|
---|
| 22 | <style type="text/css" media="all">
|
---|
| 23 | .imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
|
---|
| 24 | #anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
|
---|
| 25 | #anim img {position: absolute; top: 42px; left: 24px;}
|
---|
| 26 | img#me01 {top: 0; left: 0;}
|
---|
| 27 | img#me02 {left: 23px;}
|
---|
| 28 | img#me04 {top: 44px;}
|
---|
| 29 | img#me05 {top: 43px;left: 36px;}
|
---|
| 30 | </style>
|
---|
| 31 | <!-- S5 JS -->
|
---|
| 32 | <script src="ui/default/slides.js" type="text/javascript"></script>
|
---|
| 33 | </head>
|
---|
| 34 | <body>
|
---|
| 35 |
|
---|
| 36 | <div class="layout">
|
---|
| 37 | <div id="controls"><!-- DO NOT EDIT --></div>
|
---|
| 38 | <div id="currentSlide"><!-- DO NOT EDIT --></div>
|
---|
| 39 | <div id="header"></div>
|
---|
| 40 | <div id="footer">
|
---|
| 41 | <h1>S5 Testbed</h1>
|
---|
| 42 | <h2>Your computer • Today's date</h2>
|
---|
| 43 | </div>
|
---|
| 44 | </div>
|
---|
| 45 |
|
---|
| 46 | <ol class="xoxo presentation">
|
---|
| 47 |
|
---|
| 48 | <li class="slide">
|
---|
| 49 | <h1>S5 Testbed</h1>
|
---|
| 50 | <h3>Eric A. Meyer</h3>
|
---|
| 51 | <h4><a href="http://www.complexspiral.com/" rel="external">Complex Spiral Consulting</a></h4>
|
---|
| 52 | <div class="handout"></div>
|
---|
| 53 | </li>
|
---|
| 54 |
|
---|
| 55 |
|
---|
| 56 | <li class="slide">
|
---|
| 57 | <h1>What Is S5?</h1>
|
---|
| 58 | <ul>
|
---|
| 59 | <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>
|
---|
| 60 | <li>One XHTML document provides all of the slide show's content</li>
|
---|
| 61 | <li>CSS handles the layout and look of the slides</li>
|
---|
| 62 | <li>JavaScript handles the dynamic aspects of the show</li>
|
---|
| 63 | <li>That's all there is to it! (<a href="#slide10">skip to summary</a>; demonstrates links internal to the slide show)</li>
|
---|
| 64 | </ul>
|
---|
| 65 |
|
---|
| 66 | <div class="notes">
|
---|
| 67 | <ul>
|
---|
| 68 | <li>I have notes here!</li>
|
---|
| 69 | <li>Keen.</li>
|
---|
| 70 | <li>Remember to tell people that notes are a new feature in 1.2</li>
|
---|
| 71 | </ul>
|
---|
| 72 | </div>
|
---|
| 73 |
|
---|
| 74 | </li>
|
---|
| 75 |
|
---|
| 76 |
|
---|
| 77 | <li class="slide">
|
---|
| 78 | <h1>Operatic Origins</h1>
|
---|
| 79 | <ul>
|
---|
| 80 | <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>
|
---|
| 81 | <li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
|
---|
| 82 | <li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
|
---|
| 83 | <li>Highly efficient, but highly browser centric...</li>
|
---|
| 84 | </ul>
|
---|
| 85 |
|
---|
| 86 | <div class="notes">
|
---|
| 87 | <ul>
|
---|
| 88 | <li>S5 and OperaShow diverged greatly in S5 1.1</li>
|
---|
| 89 | <li>S5 1.2 should (we hope) bring them into harmony once more</li>
|
---|
| 90 | </ul>
|
---|
| 91 | </div>
|
---|
| 92 |
|
---|
| 93 | </li>
|
---|
| 94 |
|
---|
| 95 |
|
---|
| 96 | <li class="slide">
|
---|
| 97 | <h1>Incremental Display</h1>
|
---|
| 98 | <ul class="incremental show-first">
|
---|
| 99 | <li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li>
|
---|
| 100 | <li>Bullet points are revealed one by one
|
---|
| 101 | <ul class="incremental">
|
---|
| 102 | <li>All based on class name of <code>inc</code></li>
|
---|
| 103 | <li>Lists can be classed to make items appear individually</li>
|
---|
| 104 | <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>
|
---|
| 105 | </ul>
|
---|
| 106 | </li>
|
---|
| 107 | <li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
|
---|
| 108 | </ul>
|
---|
| 109 | </li>
|
---|
| 110 |
|
---|
| 111 |
|
---|
| 112 | <li class="slide">
|
---|
| 113 | <h1>Incremental Display II</h1>
|
---|
| 114 | <ul class="incremental">
|
---|
| 115 | <li>Keep hitting/clicking "next" as long as it isn't the control link (»)</li>
|
---|
| 116 | <li>Bullet points are revealed one by one
|
---|
| 117 | <ul>
|
---|
| 118 | <li>All based on class name of <code>incremental</code></li>
|
---|
| 119 | <li>Lists can be classed to make items appear individually</li>
|
---|
| 120 | <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>
|
---|
| 121 | </ul>
|
---|
| 122 | </li>
|
---|
| 123 | <li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
|
---|
| 124 | <li>Now to move on to other test slides!</li>
|
---|
| 125 | </ul>
|
---|
| 126 | </li>
|
---|
| 127 |
|
---|
| 128 |
|
---|
| 129 | <li class="slide">
|
---|
| 130 | <h1>PNG Alpha Tests</h1>
|
---|
| 131 | <div style="width: 400px; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
|
---|
| 132 | <p>DIV with PNG background followed by foreground PNG</p>
|
---|
| 133 | <img src="ui/bg-shade.png" alt="" title="A translucent image" />
|
---|
| 134 | </div>
|
---|
| 135 | <div style="width: 100%; height: 150px; text-align: center; background: url(ui/bg-shade.png)">
|
---|
| 136 | <p>DIV with PNG background followed by foreground PNG</p>
|
---|
| 137 | <img src="ui/bg-shade.png" alt="" title="A translucent image" />
|
---|
| 138 | </div>
|
---|
| 139 | </li>
|
---|
| 140 |
|
---|
| 141 |
|
---|
| 142 | <li class="slide">
|
---|
| 143 | <h1>S5 Default File Structure</h1>
|
---|
| 144 | <p style="text-align: center;">
|
---|
| 145 | <img src="pix/s5filemap.png" alt="" title="At a Glance" />
|
---|
| 146 | </p>
|
---|
| 147 | </li>
|
---|
| 148 |
|
---|
| 149 |
|
---|
| 150 | <li class="slide">
|
---|
| 151 | <h1>S5 Themes</h1>
|
---|
| 152 | <p class="imgcon">
|
---|
| 153 | <img src="pix/S501.jpg" alt="" title="Default" />
|
---|
| 154 | <img src="pix/S502.jpg" alt="" title="I18N" />
|
---|
| 155 | <img src="pix/S503.jpg" alt="" title="Blue" />
|
---|
| 156 | <img src="pix/S504.jpg" alt="" title="Flower" />
|
---|
| 157 | (one way of presenting multiple graphics)
|
---|
| 158 | </p>
|
---|
| 159 | </li>
|
---|
| 160 |
|
---|
| 161 |
|
---|
| 162 | <li class="slide">
|
---|
| 163 | <h1>Incremental S5 Themes</h1>
|
---|
| 164 | <p class="imgcon">
|
---|
| 165 | <img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
|
---|
| 166 | <img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
|
---|
| 167 | <img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
|
---|
| 168 | <img src="pix/S504.jpg" alt="" title="Flower" class="incremental" />
|
---|
| 169 | (one by one!)
|
---|
| 170 | </p>
|
---|
| 171 | </li>
|
---|
| 172 |
|
---|
| 173 |
|
---|
| 174 | <li class="slide">
|
---|
| 175 | <h1>Incremental Animation</h1>
|
---|
| 176 | <ul>
|
---|
| 177 | <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>
|
---|
| 178 | </ul>
|
---|
| 179 | <p class="imgcon" id="anim">
|
---|
| 180 | <img src="pix/mememe01.png" id="me01" alt="" />
|
---|
| 181 | <img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
|
---|
| 182 | <img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
|
---|
| 183 | <img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
|
---|
| 184 | <img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
|
---|
| 185 | </p>
|
---|
| 186 | </li>
|
---|
| 187 |
|
---|
| 188 |
|
---|
| 189 | <li class="slide">
|
---|
| 190 | <h1>In Summary</h1>
|
---|
| 191 | <ul>
|
---|
| 192 | <li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process</li>
|
---|
| 193 | <li>The S5 format is OSF 1.0 compatible</li>
|
---|
| 194 | <li>S5 is a very flexible and lightweight slide show system available for anyone to use</li>
|
---|
| 195 | </ul>
|
---|
| 196 | </li>
|
---|
| 197 |
|
---|
| 198 | </ol>
|
---|
| 199 |
|
---|
| 200 | </body>
|
---|
| 201 | </html>
|
---|