Overview.html 30 KB

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