| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|---|
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|---|
| 3 | <html lang="en-US">
|
|---|
| 4 | <head>
|
|---|
| 5 | <meta name="generator" content=
|
|---|
| 6 | "HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org" />
|
|---|
| 7 | <title>HTML Slidy</title>
|
|---|
| 8 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|---|
| 9 | <meta name="copyright" content=
|
|---|
| 10 | "Copyright © 2005-2010 W3C (MIT, ERCIM, Keio)" />
|
|---|
| 11 | <meta name="duration" content="5" />
|
|---|
| 12 | <meta name="font-size-adjustment" content="-2" />
|
|---|
| 13 | <link rel="stylesheet" href="styles/slidy.css" type="text/css" />
|
|---|
| 14 | <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css" />
|
|---|
| 15 | <script src="scripts/slidy.js" charset="utf-8" type="text/javascript">
|
|---|
| 16 | </script>
|
|---|
| 17 | </head>
|
|---|
| 18 | <body>
|
|---|
| 19 | <div class="background"><img alt="" id="head-icon"
|
|---|
| 20 | src="graphics/icon-blue.png" /><object id="head-logo"
|
|---|
| 21 | data="graphics/w3c-logo-white.svg" type="image/svg+xml"
|
|---|
| 22 | title="W3C logo"><a href="http://www.w3.org/"><img
|
|---|
| 23 | alt="W3C logo" id="head-logo-fallback"
|
|---|
| 24 | src="graphics/w3c-logo-white.gif" /></a></object></div>
|
|---|
| 25 |
|
|---|
| 26 | <div class="background slanty">
|
|---|
| 27 | <img src="graphics/w3c-logo-slanted.jpg" alt="slanted W3C logo" />
|
|---|
| 28 | </div>
|
|---|
| 29 | <div class="slide cover title">
|
|---|
| 30 | <!-- hidden style graphics to ensure they are saved with other content -->
|
|---|
| 31 | <img class="hidden" src="graphics/bullet.png" alt="" />
|
|---|
| 32 | <img class="hidden" src="graphics/fold.gif" alt="" />
|
|---|
| 33 | <img class="hidden" src="graphics/unfold.gif" alt="" />
|
|---|
| 34 | <img class="hidden" src="graphics/fold-dim.gif" alt="" />
|
|---|
| 35 | <img class="hidden" src="graphics/nofold-dim.gif" alt="" />
|
|---|
| 36 | <img class="hidden" src="graphics/unfold-dim.gif" alt="" />
|
|---|
| 37 | <img class="hidden" src="graphics/bullet-fold.gif" alt="" />
|
|---|
| 38 | <img class="hidden" src="graphics/bullet-unfold.gif" alt="" />
|
|---|
| 39 | <img class="hidden" src="graphics/bullet-fold-dim.gif" alt="" />
|
|---|
| 40 | <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt="" />
|
|---|
| 41 | <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt="" />
|
|---|
| 42 |
|
|---|
| 43 | <img src="graphics/keys2.jpg" alt="Cover page images (keys)"
|
|---|
| 44 | class="cover" /><br clear="all" />
|
|---|
| 45 | <h1>HTML Slidy: Slide Shows in HTML and XHTML</h1>
|
|---|
| 46 |
|
|---|
| 47 | <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
|
|---|
| 48 | <<a href="mailto:dsr@w3.org">dsr@w3.org</a>><br />
|
|---|
| 49 | <br />
|
|---|
| 50 | <br />
|
|---|
| 51 | <br />
|
|---|
| 52 | <br /><em>Hit the space bar or swipe left for next slide</em></p>
|
|---|
| 53 | </div>
|
|---|
| 54 |
|
|---|
| 55 | <div class="slide">
|
|---|
| 56 | <h1>Slide Shows in HTML and XHTML</h1>
|
|---|
| 57 |
|
|---|
| 58 | <ul>
|
|---|
| 59 | <li>You can now create accessible slide shows with ease</li>
|
|---|
| 60 |
|
|---|
| 61 | <li>Works across browsers and is operated like PowerPoint
|
|---|
| 62 |
|
|---|
| 63 | <ul>
|
|---|
| 64 | <li>Advance to next slide with mouse click, space bar or swipe left</li>
|
|---|
| 65 |
|
|---|
| 66 | <li>Move forward/backward between slides with Cursor Left,
|
|---|
| 67 | Cursor Right, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
|
|---|
| 68 | keys, or swipe left or right</li>
|
|---|
| 69 |
|
|---|
| 70 | <li><strong>Home</strong> key for first slide, <strong>End</strong>
|
|---|
| 71 | key for last slide</li>
|
|---|
| 72 |
|
|---|
| 73 | <li>The "<strong>C</strong>" key for an automatically generated
|
|---|
| 74 | table of contents, or click on "contents" on the toolbar or
|
|---|
| 75 | swipe up or down</li>
|
|---|
| 76 |
|
|---|
| 77 | <li>Function <strong>F11</strong> to go full screen and back</li>
|
|---|
| 78 |
|
|---|
| 79 | <li>The "<strong>F</strong>" key toggles the display of the footer</li>
|
|---|
| 80 |
|
|---|
| 81 | <li>The "<strong>A</strong>" key toggles display of current vs all
|
|---|
| 82 | slides
|
|---|
| 83 |
|
|---|
| 84 | <ul>
|
|---|
| 85 | <li>Try it now to see how to include notes for handouts (this is
|
|---|
| 86 | explained in the notes following this slide)</li>
|
|---|
| 87 | </ul>
|
|---|
| 88 | </li>
|
|---|
| 89 |
|
|---|
| 90 | <li>Font sizes automatically adapt to browser window size
|
|---|
| 91 |
|
|---|
| 92 | <ul>
|
|---|
| 93 | <li>use <strong>S</strong> and <strong>B</strong> keys for
|
|---|
| 94 | manual control (or < and >, or the <strong>-</strong> and
|
|---|
| 95 | <strong>+</strong> keys on the number pad</li>
|
|---|
| 96 | <li>Use CSS to set a relative font size on a given slide to make
|
|---|
| 97 | the content bigger or smaller than on other slides</li>
|
|---|
| 98 | </ul>
|
|---|
| 99 | </li>
|
|---|
| 100 |
|
|---|
| 101 | <li>Switching off JavaScript reveals all slides</li>
|
|---|
| 102 | </ul>
|
|---|
| 103 | </li>
|
|---|
| 104 |
|
|---|
| 105 | <li><em>Now move to next slide to see how it works</em></li>
|
|---|
| 106 | </ul>
|
|---|
| 107 |
|
|---|
| 108 | <p class="copyright"><a rel="Copyright" href=
|
|---|
| 109 | "http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" shape=
|
|---|
| 110 | "rect">Copyright</a> © 2005-2010 <a href="/"><acronym title=
|
|---|
| 111 | "World Wide Web Consortium">W3C</acronym></a> <sup>®</sup>
|
|---|
| 112 | (<a href="http://www.csail.mit.edu/"><acronym title=
|
|---|
| 113 | "Massachusetts Institute of Technology">MIT</acronym></a>, <a href=
|
|---|
| 114 | "http://www.ercim.org/"><acronym title=
|
|---|
| 115 | "European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|---|
| 116 | <a href="http://www.keio.ac.jp/">Keio</a>), All Rights
|
|---|
| 117 | Reserved.</p>
|
|---|
| 118 | </div>
|
|---|
| 119 |
|
|---|
| 120 | <div class="handout">
|
|---|
| 121 | <p>For handouts, its often useful to include extra notes using a
|
|---|
| 122 | div element with class="handout" following each slide, as in:</p>
|
|---|
| 123 |
|
|---|
| 124 | <pre>
|
|---|
| 125 | <div class="slide">
|
|---|
| 126 | <em>... your slide content ...</em>
|
|---|
| 127 | </div>
|
|---|
| 128 |
|
|---|
| 129 | <div class="handout">
|
|---|
| 130 | <em>... stuff that only appears in the handouts ...</em>
|
|---|
| 131 | </div>
|
|---|
| 132 | </pre>
|
|---|
| 133 | </div>
|
|---|
| 134 |
|
|---|
| 135 | <div class="slide">
|
|---|
| 136 | <h1>What you need to do</h1>
|
|---|
| 137 |
|
|---|
| 138 | <ul>
|
|---|
| 139 | <li>Each presentation is a single XHTML file</li>
|
|---|
| 140 |
|
|---|
| 141 | <li>Each slide is enclosed in <em><div class="slide"> ...
|
|---|
| 142 | </div></em>
|
|---|
| 143 |
|
|---|
| 144 | <ul>
|
|---|
| 145 | <li>The div element will be created automatically for h1
|
|---|
| 146 | elements that are direct children of the body element.</li>
|
|---|
| 147 | </ul>
|
|---|
| 148 |
|
|---|
| 149 | </li>
|
|---|
| 150 |
|
|---|
| 151 | <li>Use regular markup within each slide</li>
|
|---|
| 152 |
|
|---|
| 153 | <li>The document head includes two links:
|
|---|
| 154 | <ul>
|
|---|
| 155 | <li>The slide show style sheet:
|
|---|
| 156 | <a href=
|
|---|
| 157 | "http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css">http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css</a></li>
|
|---|
| 158 |
|
|---|
| 159 | <li>The slide show script: <a href=
|
|---|
| 160 | "http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js">http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js</a></li>
|
|---|
| 161 |
|
|---|
| 162 | <li>Or you can link to the compressed version of the script which is about
|
|---|
| 163 | one seventh the size, see <a href=
|
|---|
| 164 | "http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz">http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js.gz</a></li>
|
|---|
| 165 | <li>If you are using XHTML, remember to use </script> and
|
|---|
| 166 | </style> as per <a
|
|---|
| 167 | href="http://www.w3.org/TR/xhtml1/#C_3">Appendix C.3</a></li>
|
|---|
| 168 | </ul>
|
|---|
| 169 | </li>
|
|---|
| 170 | </ul>
|
|---|
| 171 |
|
|---|
| 172 | <pre>
|
|---|
| 173 | <?xml version="1.0" encoding="utf-8"?>
|
|---|
| 174 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|---|
| 175 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|---|
| 176 | <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|---|
| 177 | <head>
|
|---|
| 178 | <title>Slide Shows in XHTML</title>
|
|---|
| 179 | <meta name="copyright"
|
|---|
| 180 | content="Copyright &#169; 2005 your copyright notice" />
|
|---|
| 181 | <link rel="stylesheet" type="text/css" media="screen, projection, print"
|
|---|
| 182 | href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
|
|---|
| 183 | <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
|
|---|
| 184 | charset="utf-8" type="text/javascript"></script>
|
|---|
| 185 | <style type="text/css">
|
|---|
| 186 | <!-- your custom style rules -->
|
|---|
| 187 | </style>
|
|---|
| 188 | </head>
|
|---|
| 189 | <body>
|
|---|
| 190 | ... your slides marked up in XHTML ...
|
|---|
| 191 | </body>
|
|---|
| 192 | </html>
|
|---|
| 193 | </pre>
|
|---|
| 194 | </div>
|
|---|
| 195 |
|
|---|
| 196 | <div class="slide">
|
|---|
| 197 | <h1>To get the W3C Blue Style</h1>
|
|---|
| 198 |
|
|---|
| 199 | <p>The head element should include the following link to the style
|
|---|
| 200 | sheet:</p>
|
|---|
| 201 |
|
|---|
| 202 | <pre>
|
|---|
| 203 | <link rel="stylesheet" type="text/css" media="screen, projection, print"
|
|---|
| 204 | href="http://www.w3.org/Talks/Tools/Slidy2/styles/w3c-blue.css" />
|
|---|
| 205 | </pre>
|
|---|
| 206 |
|
|---|
| 207 | <p>The body element's content should start with the following
|
|---|
| 208 | markup:</p>
|
|---|
| 209 |
|
|---|
| 210 | <pre>
|
|---|
| 211 | <div class="background">
|
|---|
| 212 | <img id="head-icon" alt="graphic with four colored squares"
|
|---|
| 213 | src="http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png" />
|
|---|
| 214 | <object id="head-logo" title="W3C logo" type="image/svg+xml"
|
|---|
| 215 | data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img
|
|---|
| 216 | src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif"
|
|---|
| 217 | alt="W3C logo" id="head-logo-fallback" /></object>
|
|---|
| 218 | </div>
|
|---|
| 219 | </pre>
|
|---|
| 220 |
|
|---|
| 221 | <p>This adds the logos on the top left and right corners of the
|
|---|
| 222 | slide.</p>
|
|---|
| 223 |
|
|---|
| 224 | <p>You are of course welcome to create your own slide designs.
|
|---|
| 225 | You can provide different styles and backgrounds for
|
|---|
| 226 | different slides (more details later).</p>
|
|---|
| 227 |
|
|---|
| 228 | <p>Use the <em>meta element</em> with <em>name="copyright"</em>
|
|---|
| 229 | for use in the slide show footer:</p>
|
|---|
| 230 |
|
|---|
| 231 | <pre>
|
|---|
| 232 | <meta name="copyright"
|
|---|
| 233 | content="Copyright &#169; 2005-2009 W3C (MIT, ERCIM, Keio)" />
|
|---|
| 234 | </pre>
|
|---|
| 235 | </div>
|
|---|
| 236 |
|
|---|
| 237 | <div class="slide">
|
|---|
| 238 | <h1>Upgrading from previous versions of Slidy</h1>
|
|---|
| 239 |
|
|---|
| 240 | <ul>
|
|---|
| 241 | <li>This uses a new version of the HTML Slidy script</li>
|
|---|
| 242 | <li>It is designed to work better with other scripts,
|
|---|
| 243 | e.g. for UI controls within your slides
|
|---|
| 244 | <ul>
|
|---|
| 245 | <li>Only adds one global name "w3c_slidy"</li>
|
|---|
| 246 | <li>Doesn't interfere with other scripts that set event handers
|
|---|
| 247 | such as onload on body element</li>
|
|---|
| 248 | </ul>
|
|---|
| 249 | </li>
|
|---|
| 250 | <li>Works for slides delivered as text/html and application/xhtml+xml</li>
|
|---|
| 251 | <li>New presentation timer feature</li>
|
|---|
| 252 | <li>Initial prompt on first slide to help newcomers to Slidy</li>
|
|---|
| 253 | <li>Better support for styling slides and printing them</li>
|
|---|
| 254 | <li>Requires additional style rules, so new script won't work
|
|---|
| 255 | with old presentations without changes to their style sheets
|
|---|
| 256 | <ul>
|
|---|
| 257 | <li>See <a href="styles/slidy.css">slidy.css</a>, and
|
|---|
| 258 | <a href="styles/w3c-blue.css">w3c-blue.css</a></li>
|
|---|
| 259 | </ul>
|
|---|
| 260 | </li>
|
|---|
| 261 | <li>But old presentations will work unchanged as they refer to
|
|---|
| 262 | the old script!</li>
|
|---|
| 263 | </ul>
|
|---|
| 264 | </div>
|
|---|
| 265 |
|
|---|
| 266 | <div class="slide">
|
|---|
| 267 | <h1>To use it off-line</h1>
|
|---|
| 268 |
|
|---|
| 269 | <ul>
|
|---|
| 270 | <li>You can download <a href="slidy.zip">slidy.zip</a> and unzip
|
|---|
| 271 | it to create a Slidy directory on your machine</li>
|
|---|
| 272 |
|
|---|
| 273 | <li>If you have cvs access to the W3C site you can check out the Slidy
|
|---|
| 274 | directory</li>
|
|---|
| 275 |
|
|---|
| 276 | <li>Remember to periodically check for updates</li>
|
|---|
| 277 |
|
|---|
| 278 | <li>You then have two choices:
|
|---|
| 279 |
|
|---|
| 280 | <ol>
|
|---|
| 281 | <li>Use relative URIs depending on your local setup to access the
|
|---|
| 282 | appropriate files. Use the same directory structure as on the W3C
|
|---|
| 283 | server, ie, ".../2005/Talks/...".</li>
|
|---|
| 284 |
|
|---|
| 285 | <li>Run a Web server on your machine so that the directory above
|
|---|
| 286 | can be accessed via <code>http://localhost/Talks/Tools/Slidy2</code>
|
|---|
| 287 | and use the URIs of the form "/Talks/Tools/Slidy2/styles/slidy.css",
|
|---|
| 288 | "/Talks/Tools/Slidy2/scripts/slidy.js".</li>
|
|---|
| 289 | </ol></li>
|
|---|
| 290 |
|
|---|
| 291 | <li>In both cases you can then publish your files on the W3C server
|
|---|
| 292 | unchanged.</li>
|
|---|
| 293 |
|
|---|
| 294 | <li><strong>NOTE</strong> Internet Explorer on Windows XP now disables
|
|---|
| 295 | scripting for web pages loaded directly from the local file system,
|
|---|
| 296 | a work around is to use another browser, e.g. Firefox or Opera</li>
|
|---|
| 297 |
|
|---|
| 298 | <li>Please feel free to create your own designs, and help us to build
|
|---|
| 299 | a gallery of Slidy styles.</li>
|
|---|
| 300 |
|
|---|
| 301 | <li>My <a href="/2006/02/woa/">Google TechTalk</a> (1st Feb 2006)
|
|---|
| 302 | uses a notebook themed style</li>
|
|---|
| 303 | </ul>
|
|---|
| 304 | </div>
|
|---|
| 305 |
|
|---|
| 306 | <div class="slide">
|
|---|
| 307 | <h1>Timing Your Presentation</h1>
|
|---|
| 308 |
|
|---|
| 309 | <ul>
|
|---|
| 310 | <li>Sometimes it is handy to know just how much time you have to
|
|---|
| 311 | left to finish your presentation</li>
|
|---|
| 312 | <li>To get this feature, add the following markup to the
|
|---|
| 313 | content of the head element, replacing 5 by the duration
|
|---|
| 314 | of your presentation in minutes
|
|---|
| 315 | <pre><meta name="duration" content="5" /></pre>
|
|---|
| 316 | </li>
|
|---|
| 317 | <li>The time left in minutes and seconds is shown in the footer
|
|---|
| 318 | next to the slide number</li>
|
|---|
| 319 | <li>The clock starts to run when you move away from the first slide</li>
|
|---|
| 320 | <li>Moving back to the first slide pauses the clock</li>
|
|---|
| 321 | </ul>
|
|---|
| 322 |
|
|---|
| 323 |
|
|---|
| 324 | </div>
|
|---|
| 325 |
|
|---|
| 326 | <div class="slide slanty">
|
|---|
| 327 | <h1>Generate a Title Page</h1>
|
|---|
| 328 |
|
|---|
| 329 | <p>If you want a separate title page with the W3C blue style, the
|
|---|
| 330 | first slide should be as follows:</p>
|
|---|
| 331 |
|
|---|
| 332 | <pre>
|
|---|
| 333 | <div class="slide cover">
|
|---|
| 334 | <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg"
|
|---|
| 335 | alt="Cover page images (keys)" class="cover" />
|
|---|
| 336 | <br clear="all" />
|
|---|
| 337 | <h1>HTML Slidy: Slide Shows in XHTML</h1>
|
|---|
| 338 | <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a>
|
|---|
| 339 | <a href="mailto:dsr@w3.org">dsr@w3.org</a></p>
|
|---|
| 340 | </div>
|
|---|
| 341 | </pre>
|
|---|
| 342 |
|
|---|
| 343 | <p>The <a
|
|---|
| 344 | href="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-blue.css">w3c-blue.css</a>
|
|---|
| 345 | style sheet looks for the classes "slide" and "cover" on div
|
|---|
| 346 | and img elements using the CSS selector <em>div.slide.cover</em></p>
|
|---|
| 347 |
|
|---|
| 348 | <p>This technique can be used to assign your slides to different
|
|---|
| 349 | classes with a different appearence for each such class.</p>
|
|---|
| 350 |
|
|---|
| 351 | <p>Slidy also allows you to use different background markup for
|
|---|
| 352 | different slides, based upon shared class names, as in "foo" below.
|
|---|
| 353 | Backgrounds without additional class names are always shown except
|
|---|
| 354 | when the slide isn't transparent. You may need to tweak your
|
|---|
| 355 | custom style sheet.</p>
|
|---|
| 356 |
|
|---|
| 357 | <pre>
|
|---|
| 358 | <div class="background foo">
|
|---|
| 359 | ... background content ...
|
|---|
| 360 | <div>
|
|---|
| 361 |
|
|---|
| 362 | ...
|
|---|
| 363 |
|
|---|
| 364 | <div class="slide foo">
|
|---|
| 365 | ... slide content ...
|
|---|
| 366 | <div>
|
|---|
| 367 | </pre>
|
|---|
| 368 | </div>
|
|---|
| 369 |
|
|---|
| 370 | <div class="slide">
|
|---|
| 371 | <h1>Incremental display of slide contents</h1>
|
|---|
| 372 |
|
|---|
| 373 | <p>For incremental display, use class="incremental", for
|
|---|
| 374 | instance:</p>
|
|---|
| 375 |
|
|---|
| 376 | <ul class="incremental">
|
|---|
| 377 | <li>First bullet point</li>
|
|---|
| 378 |
|
|---|
| 379 | <li>Second bullet point</li>
|
|---|
| 380 |
|
|---|
| 381 | <li>Third bullet point</li>
|
|---|
| 382 | </ul>
|
|---|
| 383 |
|
|---|
| 384 | <p class="incremental">which is marked up as follows:</p>
|
|---|
| 385 |
|
|---|
| 386 | <pre class="incremental">
|
|---|
| 387 | <ul class="incremental">
|
|---|
| 388 | <li>First bullet point</li>
|
|---|
| 389 | <li>Second bullet point</li>
|
|---|
| 390 | <li>Third bullet point</li>
|
|---|
| 391 | </ul>
|
|---|
| 392 |
|
|---|
| 393 | <p class="incremental">which is marked up as follows:</p>
|
|---|
| 394 |
|
|---|
| 395 | <pre class="incremental">
|
|---|
| 396 | ...
|
|---|
| 397 | </pre>
|
|---|
| 398 | </pre>
|
|---|
| 399 |
|
|---|
| 400 | <div class="footnote">
|
|---|
| 401 | <p>An element is incrementally revealed if its parent element has
|
|---|
| 402 | class="incremental" or if itself has that attribute. Text nodes are
|
|---|
| 403 | not elements and are revealed when their parent element is revealed.
|
|---|
| 404 | You can use class="incremental" on any element except for <br />.
|
|---|
| 405 | Use class="non-incremental" to override the effect of setting the
|
|---|
| 406 | parent element's class to incremental.</p>
|
|---|
| 407 |
|
|---|
| 408 | <p>Note: you will see a red asterisk on the left of the toolbar
|
|---|
| 409 | when there is still something more to reveal.</p>
|
|---|
| 410 | </div>
|
|---|
| 411 | </div>
|
|---|
| 412 |
|
|---|
| 413 | <div class="slide">
|
|---|
| 414 | <h1>Create outline lists with hidden content</h1>
|
|---|
| 415 |
|
|---|
| 416 | <p>You can make your bullet points or numbered list items
|
|---|
| 417 | into outlines that you can expand or collapse</p>
|
|---|
| 418 |
|
|---|
| 419 | <ul class="outline">
|
|---|
| 420 | <li>Just add <em>class="outline"</em> to the ul or ol
|
|---|
| 421 | element. Click on this list item for more details.
|
|---|
| 422 |
|
|---|
| 423 | <ul>
|
|---|
| 424 | <li>The Slidy script will then treat the list
|
|---|
| 425 | as an outline list.</li>
|
|---|
| 426 | <li>Clicking on outline list items will expand/collapse
|
|---|
| 427 | block-level elements within that list item.</li>
|
|---|
| 428 | <li>Click on the above to make this list item
|
|---|
| 429 | collapse again.</li>
|
|---|
| 430 | </ul>
|
|---|
| 431 | </li>
|
|---|
| 432 | <li>Users will then see expand/collapse icons as appropriate
|
|---|
| 433 | and may click anywhere on the list item to change its state.
|
|---|
| 434 | This particular list item can't be expanded or collapsed.</li>
|
|---|
| 435 | <li class="expand">Add class="expand" to any li elements that
|
|---|
| 436 | you want to start in an expanded state.
|
|---|
| 437 |
|
|---|
| 438 | <ul>
|
|---|
| 439 | <li>By default Slidy hides all the block level elements within the
|
|---|
| 440 | outline list items unless you have specified class="expand".</li>
|
|---|
| 441 | <li>Such pre-expanded items can be collapsed by clicking on them.</li>
|
|---|
| 442 | </ul>
|
|---|
| 443 | </li>
|
|---|
| 444 | <li>Note expand/collapse icon highlighting requires browser
|
|---|
| 445 | support for :hover which isn't supported by IE6.
|
|---|
| 446 |
|
|---|
| 447 | <ul>
|
|---|
| 448 | <li>Microsoft says it will be supported by IE7 along with
|
|---|
| 449 | many fixes for other CSS woes in IE6.</li>
|
|---|
| 450 | </ul>
|
|---|
| 451 | </li>
|
|---|
| 452 | </ul>
|
|---|
| 453 |
|
|---|
| 454 | <pre>
|
|---|
| 455 | <ol class='outline'>
|
|---|
| 456 | <!-- topic 1 starts collapsed -->
|
|---|
| 457 | <li>Topic 1
|
|---|
| 458 | <ol>
|
|---|
| 459 | <li>subtopic a</li>
|
|---|
| 460 | <li>subtopic b</li>
|
|---|
| 461 | </ol>
|
|---|
| 462 | </li>
|
|---|
| 463 | <!-- topic 2 starts expanded -->
|
|---|
| 464 | <li class="expand">Topic 2
|
|---|
| 465 | <ol>
|
|---|
| 466 | <li>subtopic c</li>
|
|---|
| 467 | <li>subtopic d</li>
|
|---|
| 468 | </ol>
|
|---|
| 469 | </li>
|
|---|
| 470 | </ol>
|
|---|
| 471 | </pre>
|
|---|
| 472 | </div>
|
|---|
| 473 |
|
|---|
| 474 | <!-- useful info at http://www.howtocreate.co.uk/wrongWithIE/ -->
|
|---|
| 475 | <div class="slide">
|
|---|
| 476 | <h1>Make your images scale with the browser window size</h1>
|
|---|
| 477 |
|
|---|
| 478 | <p>For adaptive layout, use percentage widths on images, together
|
|---|
| 479 | with CSS positioning:</p>
|
|---|
| 480 |
|
|---|
| 481 | <ul>
|
|---|
| 482 | <li>CSS positioning is simpler and more reliable than using
|
|---|
| 483 | tables</li>
|
|---|
| 484 | </ul>
|
|---|
| 485 |
|
|---|
| 486 | <pre>
|
|---|
| 487 | <div class="slide">
|
|---|
| 488 | <h1>Analysts - "Open standards programming will become
|
|---|
| 489 | mainstream, focused around VoiceXML"</h1>
|
|---|
| 490 | <!-- use CSS positioning and scaling for adaptive layout -->
|
|---|
| 491 | <img src="trends.png" width="50%" style="float:left"
|
|---|
| 492 | alt="projected growth of VoiceXML" />
|
|---|
| 493 |
|
|---|
| 494 | <blockquote style="float:right;width: 35%">
|
|---|
| 495 | VoiceXML will dominate the voice environment, due to its
|
|---|
| 496 | flexibility and eventual multimodal capabilities
|
|---|
| 497 | </blockquote><br clear="all" />
|
|---|
| 498 |
|
|---|
| 499 | <p style="text-align:center">Source Data Monitor, March
|
|---|
| 500 | 2004</p>
|
|---|
| 501 | </div>
|
|---|
| 502 | </pre>
|
|---|
| 503 |
|
|---|
| 504 | <p>To work around a CSS rendering bug in IE relating
|
|---|
| 505 | to margins, you can set display:inline on floated elements.</p>
|
|---|
| 506 | </div>
|
|---|
| 507 |
|
|---|
| 508 | <div class="slide">
|
|---|
| 509 | <h1>Incremental display of layered images</h1>
|
|---|
| 510 |
|
|---|
| 511 | <p>These can be marked up using CSS relative positioning, e.g.</p>
|
|---|
| 512 |
|
|---|
| 513 | <pre>
|
|---|
| 514 | <div class="incremental"
|
|---|
| 515 | style="margin-left: 4em; position: relative">
|
|---|
| 516 | <img src="graphics/face1.gif" alt="face"
|
|---|
| 517 | style="position: static; vertical-align: bottom"/>
|
|---|
| 518 | <img src="graphics/face2.gif" alt="eyes"
|
|---|
| 519 | style="position: absolute; left: 0; top: 0" />
|
|---|
| 520 | <img src="graphics/face3.gif" alt="nose"
|
|---|
| 521 | style="position: absolute; left: 0; top: 0" />
|
|---|
| 522 | <img src="graphics/face4.gif" alt="mouth"
|
|---|
| 523 | style="position: absolute; left: 0; top: 0" />
|
|---|
| 524 | </div>
|
|---|
| 525 | </pre>
|
|---|
| 526 |
|
|---|
| 527 | <p style="font-size: smaller;">You should also use transparent GIF
|
|---|
| 528 | images to avoid the IE/Win bug for alpha channel in PNG. A fix is
|
|---|
| 529 | expected in IE 7. A <a href=
|
|---|
| 530 | "http://www.skyzyx.com/scripts/sleight.php">work around</a> is
|
|---|
| 531 | available on skyzyx.com. My thanks to <a href=
|
|---|
| 532 | "http://www.webstandards.org/act/acid2/">ACID2</a> for the
|
|---|
| 533 | graphics.</p>
|
|---|
| 534 |
|
|---|
| 535 | <div class="incremental" style=
|
|---|
| 536 | "margin-left: 4em; position: relative;"><img src="graphics/face1.gif" alt=
|
|---|
| 537 | "face" style="position: static; vertical-align: bottom;" />
|
|---|
| 538 | <img src="graphics/face2.gif" alt="eyes" style=
|
|---|
| 539 | "position: absolute; left: 0pt; top: 0pt;" /> <img src="graphics/face3.gif"
|
|---|
| 540 | alt="nose" style="position: absolute; left: 0pt; top: 0pt;" />
|
|---|
| 541 | <img src="graphics/face4.gif" alt="mouth" style=
|
|---|
| 542 | "position: absolute; left: 0pt; top: 0pt;" /></div>
|
|---|
| 543 | </div>
|
|---|
| 544 |
|
|---|
| 545 | <div class="slide">
|
|---|
| 546 | <h1>How to center content vertically and horizontally</h1>
|
|---|
| 547 | <div class="vbox"></div>
|
|---|
| 548 | <div class="hbox">
|
|---|
| 549 | <p>Within the div element for your slide:</p>
|
|---|
| 550 | <pre>
|
|---|
| 551 | <div class="vbox"></div>
|
|---|
| 552 | <div class="hbox">
|
|---|
| 553 | Place the content here
|
|---|
| 554 | </div>
|
|---|
| 555 | </pre>
|
|---|
| 556 | <p>and style it with the following:</p>
|
|---|
| 557 | <pre>
|
|---|
| 558 | div.vbox {
|
|---|
| 559 | float: left;
|
|---|
| 560 | height: 40%; width: 50%;
|
|---|
| 561 | margin-top: -220px;
|
|---|
| 562 | }
|
|---|
| 563 | div.hbox {
|
|---|
| 564 | width:60%; margin-top: 0;
|
|---|
| 565 | margin-left:auto; margin-right:auto;
|
|---|
| 566 | height: 60%;
|
|---|
| 567 | border:1px solid silver;
|
|---|
| 568 | background:#F0F0F0;
|
|---|
| 569 | overflow:auto;
|
|---|
| 570 | text-align:left;
|
|---|
| 571 | clear:both;
|
|---|
| 572 | }
|
|---|
| 573 | </pre>
|
|---|
| 574 |
|
|---|
| 575 | <p>The above styling is included in <a href="styles/w3c-blue.css">w3c-blue.css</a>,
|
|---|
| 576 | which is designed to be used with <a href="styles/slidy.css">slidy.css</a>, but you
|
|---|
| 577 | are encouraged to develop your own style sheet with your own look and feel.</p>
|
|---|
| 578 | </div>
|
|---|
| 579 | </div>
|
|---|
| 580 |
|
|---|
| 581 | <div class="slide">
|
|---|
| 582 | <h1>Include SVG Content</h1>
|
|---|
| 583 |
|
|---|
| 584 | <p>Inclusion of SVG content can be done using the object element,
|
|---|
| 585 | for example:</p>
|
|---|
| 586 |
|
|---|
| 587 | <div style="text-align: center;"><object data="graphics/example.svg" type=
|
|---|
| 588 | "image/svg+xml" title="Indian Office logo" height="10%" width=
|
|---|
| 589 | "50%"><img src="graphics/example.png" alt="Indian Office logo" width=
|
|---|
| 590 | "50%" /></object></div>
|
|---|
| 591 |
|
|---|
| 592 | <p>has been achieved by:</p>
|
|---|
| 593 |
|
|---|
| 594 | <pre>
|
|---|
| 595 | <object data="graphics/example.svg" type="image/svg+xml"
|
|---|
| 596 | width="50%" height="10%" title="Indian Office logo">
|
|---|
| 597 | <img src="graphics/example.png" width="50%"
|
|---|
| 598 | alt="Indian Office logo" />
|
|---|
| 599 | </object>
|
|---|
| 600 | </pre>
|
|---|
| 601 |
|
|---|
| 602 | <p>This ensures that the enclosed png is displayed when the browser
|
|---|
| 603 | has no plugin installed or can't display SVG directly. Providing
|
|---|
| 604 | such a fall back is very important! Don't forget the alt text for
|
|---|
| 605 | people who can't see the image.</p>
|
|---|
| 606 |
|
|---|
| 607 | <p>However, there are caveats, see the next slide!</p>
|
|---|
| 608 | </div>
|
|---|
| 609 |
|
|---|
| 610 | <div class="slide">
|
|---|
| 611 | <h1>Caveats with SVG+object</h1>
|
|---|
| 612 |
|
|---|
| 613 | <p>Adobe has recently withdrawn support for its SVG Viewer, so you are
|
|---|
| 614 | recommended to consider <a
|
|---|
| 615 | href="http://wiki.svg.org/Viewer_Implementations">alternatives</a>.
|
|---|
| 616 | If you still using the Adobe SVG viewer you should be aware of bugs
|
|---|
| 617 | when using the it with IE, Namely:</p>
|
|---|
| 618 |
|
|---|
| 619 | <ul>
|
|---|
| 620 | <li>Most modern browsers generally support SVG SVG Tiny 1.1 or better
|
|---|
| 621 | natively without the need for a plugin</li>
|
|---|
| 622 |
|
|---|
| 623 | <li>If you need to use Internet Explorer you are advised to upgrade
|
|---|
| 624 | to IE9 which includes native support for SVG.</li>
|
|---|
| 625 |
|
|---|
| 626 | <li>Patches to Internet Explorer mean that the Adobe SVG Viewer
|
|---|
| 627 | version 3.03 no longer works with IE6. You are therefore recommended
|
|---|
| 628 | to uninstall version 3.03 and instead install <a
|
|---|
| 629 | href="http://www.adobe.com/svg/viewer/install/beta.html">Adobe SVG Viewer
|
|---|
| 630 | 6.0 preview</a> if this is available to to you.</li>
|
|---|
| 631 |
|
|---|
| 632 | <li>IE6 makes a <em>copy</em> of the SVG file on the local disc
|
|---|
| 633 | when displaying it; but doesn't pass the original URI to the plugin</li>
|
|---|
| 634 |
|
|---|
| 635 | <li>As a result relative references from within the SVG to external
|
|---|
| 636 | resources (scripts, CSS, images, other SVG) will break.</li>
|
|---|
| 637 |
|
|---|
| 638 | <li>The work around is to use absolute references within your SVG.</li>
|
|---|
| 639 |
|
|---|
| 640 | <li>On Windows, the Adobe SVG plugin doesn't respect the CSS z-index
|
|---|
| 641 | property, and if used on backgrounds will always show through other
|
|---|
| 642 | content</li>
|
|---|
| 643 | </ul>
|
|---|
| 644 | </div>
|
|---|
| 645 |
|
|---|
| 646 | <div class="slide">
|
|---|
| 647 | <h1>Additional Remarks</h1>
|
|---|
| 648 |
|
|---|
| 649 | <ul>
|
|---|
| 650 | <li>Slides are auto-numbered on the slide show footer</li>
|
|---|
| 651 |
|
|---|
| 652 | <li>You can link into the <a href="#(2)">middle</a> of a slide
|
|---|
| 653 | show:
|
|---|
| 654 |
|
|---|
| 655 | <ul>
|
|---|
| 656 | <li>It works out which slide you want and hides the rest</li>
|
|---|
| 657 |
|
|---|
| 658 | <li>You can even link between slides in the same slide show</li>
|
|---|
| 659 |
|
|---|
| 660 | <li>Individual sides can be addressed with the syntax #(<em>slide
|
|---|
| 661 | number</em>),<br />
|
|---|
| 662 | e.g. slide 3 of this presentation is: <a href=
|
|---|
| 663 | "#(3)">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
|
|---|
| 664 | <ul>
|
|---|
| 665 | <li>Previous versions of Slidy used square brackets, which will
|
|---|
| 666 | also work.</li>
|
|---|
| 667 | </ul></li>
|
|---|
| 668 | <li>Note that the browser's back/forward buttons may not work as
|
|---|
| 669 | you might expect due to browser problems.</li>
|
|---|
| 670 | </ul>
|
|---|
| 671 | </li>
|
|---|
| 672 |
|
|---|
| 673 | <li>Adding "title" to the list of classes for div elements that serve
|
|---|
| 674 | as title pages will render the corresponding entry in the table of
|
|---|
| 675 | contents in bold italic text (press "C" now for an example)</li>
|
|---|
| 676 |
|
|---|
| 677 | <li>If your slides have more content than normal, use a <em>meta
|
|---|
| 678 | element</em> to request a smaller font
|
|---|
| 679 |
|
|---|
| 680 | <ul>
|
|---|
| 681 | <li>the following requests fonts to be one step smaller than
|
|---|
| 682 | the Slidy default for the current window width, and positive
|
|---|
| 683 | integers will make the fonts correspondingly larger</li>
|
|---|
| 684 | </ul>
|
|---|
| 685 |
|
|---|
| 686 | <pre>
|
|---|
| 687 | <meta name="font-size-adjustment" content="-1" />
|
|---|
| 688 | </pre>
|
|---|
| 689 |
|
|---|
| 690 | <ul>
|
|---|
| 691 | <li>Slidy uses JavaScript to dynamically set the font size on the
|
|---|
| 692 | body element, but it is okay to specify relative font changes on
|
|---|
| 693 | other elements within your own style sheet, e.g.</li>
|
|---|
| 694 | </ul>
|
|---|
| 695 | <pre>div.slide.large { font-size: 200% }</pre>
|
|---|
| 696 | </li>
|
|---|
| 697 |
|
|---|
| 698 | <li>You are encouraged to ensure your markup is valid. <a href=
|
|---|
| 699 | "http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a> can be used
|
|---|
| 700 | to find and correct common markup problems</li>
|
|---|
| 701 |
|
|---|
| 702 | <li>The slide show script and style sheet can be used freely under
|
|---|
| 703 | W3C's <a href=
|
|---|
| 704 | "http://www.w3.org/Consortium/Legal/copyright-software">software
|
|---|
| 705 | licensing</a> and <a href=
|
|---|
| 706 | "http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|---|
| 707 | use</a> policies</li>
|
|---|
| 708 | <li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
|
|---|
| 709 | I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
|
|---|
| 710 | on Slidy
|
|---|
| 711 | (<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
|
|---|
| 712 | </ul>
|
|---|
| 713 | </div>
|
|---|
| 714 |
|
|---|
| 715 | <div class="slide">
|
|---|
| 716 | <h1>Localization and automatic translation</h1>
|
|---|
| 717 |
|
|---|
| 718 | <p>Slidy now includes support for localization</p>
|
|---|
| 719 |
|
|---|
| 720 | "es":this.strings_es,
|
|---|
| 721 | "ca":this.strings_ca,
|
|---|
| 722 | "cs":this.strings_cs,
|
|---|
| 723 | "nl":this.strings_nl,
|
|---|
| 724 | "de":this.strings_de,
|
|---|
| 725 | "pl":this.strings_pl,
|
|---|
| 726 | "fr":this.strings_fr,
|
|---|
| 727 | "hu":this.strings_hu,
|
|---|
| 728 | "it":this.strings_it,
|
|---|
| 729 | "el":this.strings_el,
|
|---|
| 730 | "jp":this.strings_ja,
|
|---|
| 731 | "zh":this.strings_zh,
|
|---|
| 732 | "ru":this.strings_ru,
|
|---|
| 733 | "sv":this.strings_sv
|
|---|
| 734 |
|
|---|
| 735 | <ul>
|
|---|
| 736 | <li>The tool bar is localized according to the language of the presentation</li>
|
|---|
| 737 | <li>This is taken from the xml:lang or lang attributes on the html element</li>
|
|---|
| 738 | <li>The <a href="http://www.w3.org/Talks/Tools/Slidy2/help/help.html">help file</a> is
|
|---|
| 739 | selected based upon your browser's language preferences</li>
|
|---|
| 740 | <li>As of 29th July 2010, the languages supported are: English,
|
|---|
| 741 | Spanish, Catalonian, Czech, Dutch, German, Polish, French,
|
|---|
| 742 | Hungarian, Italian, Greek, Japanese, Chinese, Russian and
|
|---|
| 743 | Swedish</li>
|
|---|
| 744 | <li>If you would like to contribute localizations for other languages,
|
|---|
| 745 | please get in touch with Dave Raggett <dsr@w3.org></li>
|
|---|
| 746 | <li>The following illustrates what was used for Spanish</li>
|
|---|
| 747 | </ul>
|
|---|
| 748 | <pre>
|
|---|
| 749 | // for each language there is an associative array
|
|---|
| 750 | strings_es: {
|
|---|
| 751 | "slide":"pág.",
|
|---|
| 752 | "help?":"Ayuda",
|
|---|
| 753 | "contents?":"Índice",
|
|---|
| 754 | "table of contents":"tabla de contenidos",
|
|---|
| 755 | "Table of Contents":"Tabla de Contenidos",
|
|---|
| 756 | "restart presentation":"Reiniciar presentación",
|
|---|
| 757 | "restart?":"Inicio"
|
|---|
| 758 | },
|
|---|
| 759 | help_es:
|
|---|
| 760 | "Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
|
|---|
| 761 | "o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",
|
|---|
| 762 | </pre>
|
|---|
| 763 |
|
|---|
| 764 | <p><strong>Note:</strong> Slidy now works with <a
|
|---|
| 765 | href="http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&u=http%3A%2F%2Fwww.w3.org%2FTalks%2FTools%2FSlidy2%2F&sl=en&tl=fr&history_state0=">current slides translated into French</a>. Use
|
|---|
| 766 | right mouse button to open frame without Google header. To disable
|
|---|
| 767 | automatic translation of the content of particular elements add
|
|---|
| 768 | <code>class="notranslate"</code>, see <a href="http://googlewebmastercentral.blogspot.com/2008/10/helping-you-break-language-barrier.html">breaking the language barrier</a>.</p>
|
|---|
| 769 | </div>
|
|---|
| 770 |
|
|---|
| 771 | <div class="slide">
|
|---|
| 772 | <h1>Future Plans</h1>
|
|---|
| 773 |
|
|---|
| 774 | <p>Recent additions have included a table of contents, and a way to
|
|---|
| 775 | hide and reveal content in the spirit of outline lists. The
|
|---|
| 776 | script has been rewritten to make it easier to combine with other
|
|---|
| 777 | scripts, e.g. for UI controls, and support swipes for navigation on
|
|---|
| 778 | touch screen devices. Further work is anticipated on the
|
|---|
| 779 | following:</p>
|
|---|
| 780 |
|
|---|
| 781 | <ul>
|
|---|
| 782 | <li>Collecting a gallery of good looking slide themes
|
|---|
| 783 | <ul>
|
|---|
| 784 | <li>Opportunities for graphics designers!</li>
|
|---|
| 785 | </ul>
|
|---|
| 786 | </li>
|
|---|
| 787 | <li>Bob Ferris has worked on <a
|
|---|
| 788 | href="https://github.com/zazi/slidy_tud/blob/master/README.md">a
|
|---|
| 789 | number of UI extensions</a> which could be incorporated into the
|
|---|
| 790 | W3C slidy script.</li>
|
|---|
| 791 | <li>Getting SVG Tiny to work on IE without need for SVG plugin
|
|---|
| 792 | <ul>
|
|---|
| 793 | <li>Using scripts to dynamically convert SVG Tiny to VML</li>
|
|---|
| 794 | <li>Note that IE9 introduces native SVG support, so it may
|
|---|
| 795 | no longer be worth working on SVG to VML for rendering of SVG</li>
|
|---|
| 796 | </ul>
|
|---|
| 797 | </li>
|
|---|
| 798 | <li>Pre-alpha version of wysiwyg slide editor (see <a
|
|---|
| 799 | href="editor/editor-screenshot1.png">screenshot</a>)
|
|---|
| 800 | <ul>
|
|---|
| 801 | <li>Using contentEditable when available, otherwise
|
|---|
| 802 | falling back to textarea and plain text conventions</li>
|
|---|
| 803 | <li>Using XMLHttpRequest to dynamically reflect changes to server</li>
|
|---|
| 804 | </ul>
|
|---|
| 805 | </li>
|
|---|
| 806 | <li>Mechanism for remotely driving Slidy as part of distributed meetings
|
|---|
| 807 | <ul>
|
|---|
| 808 | <li>Using XMLHttpRequest to listen for navigation commands</li>
|
|---|
| 809 | <li>Using VoIP for accompanying audio and teleconferencing</li>
|
|---|
| 810 | <li>Synchronizing recorded spoken presentation with currently viewed slide</li>
|
|---|
| 811 | </ul>
|
|---|
| 812 | </li>
|
|---|
| 813 | <li>Filters from PowerPoint and Open Office
|
|---|
| 814 | <ul>
|
|---|
| 815 | <li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
|
|---|
| 816 | </ul>
|
|---|
| 817 | </li>
|
|---|
| 818 | </ul>
|
|---|
| 819 |
|
|---|
| 820 | <p>If you have comments, suggestions for improvements, or would
|
|---|
| 821 | like to volunteer your help with further work on Slidy,
|
|---|
| 822 | please contact <a href=
|
|---|
| 823 | "http://www.w3.org/People/Raggett/">Dave Raggett</a> <<a href=
|
|---|
| 824 | "mailto:dsr@w3.org">dsr@w3.org</a>></p>
|
|---|
| 825 | </div>
|
|---|
| 826 |
|
|---|
| 827 | <div class="slide">
|
|---|
| 828 | <h1>Acknowledgements</h1>
|
|---|
| 829 |
|
|---|
| 830 | <ul>
|
|---|
| 831 | <li>My thanks to everyone who sent in bug reports and feature
|
|---|
| 832 | requests</li>
|
|---|
| 833 | <li>Opera Software for implementing CSS @media projection and
|
|---|
| 834 | promoting the idea of using the Web for presentations with
|
|---|
| 835 | <a href="http://www.opera.com/support/tutorials/operashow/">Opera
|
|---|
| 836 | Show</a></li>
|
|---|
| 837 | <li><a href="http://tantek.com/">Tantek Çelik</a> for his
|
|---|
| 838 | pioneering work on applying JavaScript for slide presentations on
|
|---|
| 839 | other browsers</li>
|
|---|
| 840 | <li>Eric Meyer for taking this further with the excellent <a
|
|---|
| 841 | href="http://www.meyerweb.com/eric/tools/s5/s5-intro.html">S5</a></li>
|
|---|
| 842 | <li>W3C's <a href="http://dev.w3.org/cvsweb/slidemaker/">slidemaker
|
|---|
| 843 | tool</a>, which uses a perl script to split an html file up into
|
|---|
| 844 | one file per slide with navigation buttons</li>
|
|---|
| 845 | <li>Early versions of <a href="http://www.w3.org/People/Raggett/tidy/">HTML
|
|---|
| 846 | Tidy</a> which supported a means to create presentations via splitting
|
|---|
| 847 | html files on h2 elements</li>
|
|---|
| 848 | <li>Many sites with advice on JavaScript work arounds for browser
|
|---|
| 849 | variations</li>
|
|---|
| 850 | <li>Microsoft for pioneering contentEditable and XMLHTTP which
|
|---|
| 851 | both provide tremendous opportunities for Web applications</li>
|
|---|
| 852 | <li>Microsoft Office which provided the impetus for creating
|
|---|
| 853 | Slidy as a Web-based alternative to the ubiquitous use of PowerPoint</li>
|
|---|
| 854 | </ul>
|
|---|
| 855 |
|
|---|
| 856 | <p class="smaller"><strong>Note</strong> that while Slidy and
|
|---|
| 857 | S5 were developed independently, both support the use of the
|
|---|
| 858 | class values "slide" and "handout" for div elements. Slidy doesn't
|
|---|
| 859 | support the "layout" class featured in S5 and Opera Show, but
|
|---|
| 860 | instead provides a more flexible alternative with the "background"
|
|---|
| 861 | class, which enables different backgrounds on different slides.</p>
|
|---|
| 862 | </div>
|
|---|
| 863 |
|
|---|
| 864 | <div class="slide">
|
|---|
| 865 | <h1>Acknowledgements</h1>
|
|---|
| 866 |
|
|---|
| 867 | <p>The following people have contributed localizations:</p>
|
|---|
| 868 |
|
|---|
| 869 | <ul>
|
|---|
| 870 | <li>Emmanuelle Gutiérrez y Restrepo, Spanish</li>
|
|---|
| 871 | <li>Joan V. Baz, Catalan</li>
|
|---|
| 872 | <li>Jakub Vrána, Czech</li>
|
|---|
| 873 | <li>Ruud Steltenpool, Dutch</li>
|
|---|
| 874 | <li>Beat Vontobel, German</li>
|
|---|
| 875 | <li>Krzysztof Kotowicz, Polish</li>
|
|---|
| 876 | <li>Tamas Horvath, Hungarian</li>
|
|---|
| 877 | <li>Creso Moraes, Brazilian Portuguese</li>
|
|---|
| 878 | <li>Giuseppe Scollo, Italian</li>
|
|---|
| 879 | <li>Konstantinos Koukopoulos, Greek</li>
|
|---|
| 880 | <li>Yoshikazu Sawa (澤 義和), Japanese</li>
|
|---|
| 881 | <li>Shelley Shyan, Chinese</li>
|
|---|
| 882 | <li>Andrew Pantyukhin, Russian</li>
|
|---|
| 883 | <li>Saasha Metsärantala, Swedish</li>
|
|---|
| 884 | </ul>
|
|---|
| 885 |
|
|---|
| 886 | <p>The following people have contributed bug reports:</p>
|
|---|
| 887 |
|
|---|
| 888 | <ul>
|
|---|
| 889 | <li>Ivan Herman</li>
|
|---|
| 890 | <li>Steve Bratt</li>
|
|---|
| 891 | <li>Peter Patel-Schneider</li>
|
|---|
| 892 | <li>Matthew Coller</li>
|
|---|
| 893 | <li>Rune Heggtveit</li>
|
|---|
| 894 | <li>Gopal Venkatesan</li>
|
|---|
| 895 | <li>Cay Horstmann</li>
|
|---|
| 896 | <li>Schuyler Duveen</li>
|
|---|
| 897 | <li>Matteo Nannini</li>
|
|---|
| 898 | <li>Ralph Swick</li>
|
|---|
| 899 | <li>Jakub Vrána</li>
|
|---|
| 900 | <li>Philip Bolt</li>
|
|---|
| 901 | <li>Jon Frost</li>
|
|---|
| 902 | <li>Jonathan Chetwynd</li>
|
|---|
| 903 | <li>Nicolas Frisby</li>
|
|---|
| 904 | </ul>
|
|---|
| 905 |
|
|---|
| 906 | <p>Douglas Crockford for <a
|
|---|
| 907 | href="http://www.crockford.com/javascript/jsmin.html">jsmin</a>
|
|---|
| 908 | which was used to minify the script before compressing it with gzip.</p>
|
|---|
| 909 | </div>
|
|---|
| 910 | </body>
|
|---|
| 911 | </html>
|
|---|
