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