source: presentations/SlidyEx/index.html@ 29

Last change on this file since 29 was 29, checked in by garnier, 19 years ago

modif de feuille de style pour supprimer les unites em

File size: 12.9 KB
Line 
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
6<head>
7<title>Slidy::Lyon</title>
8<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9<meta name="copyright" content=
10"Copyright &#169; 2006 LAL (Cnrs/IN2P3/Lal)" />
11<meta name="font-size-adjustment" content="-2" />
12<link rel="stylesheet" href="Slidy/slidy.css" type="text/css"
13media="screen, projection, print" />
14<link rel="stylesheet" href="Slidy/lal.css" type="text/css"
15media="screen, projection, print" />
16<script src="Slidy/slidy.js" type="text/javascript">
17</script>
18</head>
19
20<body>
21
22<!-- ====== Les logos ====== -->
23<div class="background">
24<img alt="" id="head-icon" src="Slidy/icon-blue.png" />
25<object id="head-logo" data="Logos/lal-logo-blue-165.svg" type="image/svg+xml" title="LAL logo">
26 <a href="http://www.lal.in2p3.fr">
27 <img alt="LAL logo" id="head-logo-fallback" src="Logos/lal-logo-blue-165.gif" />
28 </a>
29</object>
30</div>
31
32<div class="background slanty">
33<img src="Logos/logoLAL50ansgrandfondbleu.jpg" alt="LAL logo" />
34</div>
35
36<!-- ====== Diapo de départ ====== -->
37<div class="slide cover">
38 <!-- hidden style graphics to ensure they are saved with other content -->
39 <img class="hidden" src="Slidy/bullet.png" alt="" />
40 <img class="hidden" src="Slidy/fold.gif" alt="" />
41 <img class="hidden" src="Slidy/unfold.gif" alt="" />
42 <img class="hidden" src="Slidy/fold-dim.gif" alt="" />
43 <img class="hidden" src="Slidy/nofold-dim.gif" alt="" />
44 <img class="hidden" src="Slidy/unfold-dim.gif" alt="" />
45 <img class="hidden" src="Slidy/bullet-fold.gif" alt="" />
46 <img class="hidden" src="Slidy/bullet-unfold.gif" alt="" />
47 <img class="hidden" src="Slidy/bullet-fold-dim.gif" alt="" />
48 <img class="hidden" src="Slidy/bullet-nofold-dim.gif" alt="" />
49 <img class="hidden" src="Slidy/bullet-unfold-dim.gif" alt="" />
50
51<img src="Logos/logoLAL50ansgrandfondbleu.jpg" alt=
52"Image en couverture (LAL50ans)" class="cover" /><br clear="all" />
53<!--
54<img src="keys.jpg" alt=
55"Cover page images (keys)" class="cover" /><br clear="all" />
56-->
57
58<h1>Mes tests avec Slidy : <br />faire sa pr&eacute;sentation en XHTML</h1>
59
60<p><a href="http://www.lal.in2p3.fr/lal/Annuaire/affiche-detail.php?vnom=Perus%20Antoine">Antoine P&eacute;rus</a>,
61&lt;<a href="mailto:perus@lal.in2p3.fr">perus@lal.in2p3.fr</a>&gt;</p>
62</div>
63
64<!-- ====== Les diapos ===== -->
65
66<!-- Diapo -->
67<div class="slide">
68<h1>Mode d'emploi</h1>
69
70<ul>
71 <li>Chaque pr&eacute;sentation se pr&eacute;sente sous la forme d'un seul fichier XHTML</li>
72
73 <li>
74 Chaque diapo est d&eacute;finie par les balises <em>&lt;div class="slide"&gt; ...
75 &lt;/div&gt;</em>
76 </li>
77
78 <li>On utilise les balises habituelles &agrave; l'int&eacute;rieur
79 de chaque diapo.</li>
80
81 <li>
82 L'en-t&ecirc;te du document contient deux liens :
83 <ul>
84 <li>
85 La feuille de style de la pr&eacute;sentation :
86 <a href=
87 "http://www.w3.org/Talks/Tools/Slidy/slidy.css">http://www.w3.org/Talks/Tools/Slidy/slidy.css</a>
88 </li>
89 <li>
90 Le script de la pr&eacute;sentation :
91 <a href=
92 "http://www.w3.org/Talks/Tools/Slidy/slidy.js">http://www.w3.org/Talks/Tools/Slidy/slidy.js</a>
93 </li>
94 </ul></li>
95</ul>
96
97<p>Il peut &ecirc;tre int&eacute;ressant de rajouter dans la version
98<em>poly</em> des notes suppl&eacute;mentaires &agrave; l'aide de
99l'&eacute;l&eacute;ment <em>div class="handout"</em> apr&egrave;s
100chaque diapo :</p>
101
102<pre>
103&lt;div class="slide"&gt;
104 <em>... le contenu d'une diapo ...</em>
105&lt;/div&gt;
106
107&lt;div class="handout"&gt;
108 <em>... des notes qui n'appara&icirc;tront que sur le poly, &agrave; la suite de la diapo pr&eacute;c&eacute;dente ...</em>
109&lt;/div&gt;
110</pre>
111
112</div>
113
114<!-- Diapo -->
115<div class="slide slanty">
116<h1>G&eacute;n&eacute;rer une Page de Titre</h1>
117
118<p>If you want a separate title page with the W3C blue style, the
119first slide should be as follows:</p>
120
121<p>The <a
122href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css">w3c-blue.css</a>
123style sheet looks for the classes "slide" and "cover" on div
124and img elements using the CSS selector <em>div.slide.cover</em></p>
125
126<p>This technique can be used to assign your slides to different
127classes with a different appearence for each such class.</p>
128
129<p>Slidy also allows you to use different background markup for
130different slides, based upon shared class names, as in "foo" below.
131Backgrounds without additional class names are always shown except
132when the slide isn't transparent. You may need to tweak your
133custom style sheet.</p>
134
135</div>
136
137<!-- Diapo -->
138<div class="slide">
139<h1>L'affichage incr&eacute;mental</h1>
140
141<p>Pour afficher item par item, utiliser <strong>class="incremental"</strong>, par
142exemple :</p>
143
144<ul class="incremental">
145 <li>Premier item</li>
146 <li>Deuxi&egrave;me item</li>
147 <li>Et troisi&egrave;me item</li>
148</ul>
149
150<div class="footnote">
151<p class="incremental">
152Un &eacute;l&eacute;ment est affich&eacute; au coup par coup s'il est
153fils d'un parent ayant l'attribut <em class="non-incremental">class="incremental"</em> ou s'il
154poss&egrave;de lui-m&ecirc;me cet attribut. L'attribut
155<em class="non-incremental">class="non-incremental"</em> d&eacute;sactive l'effet d&eacute;fini au
156niveau parental.
157</p>
158<p>
159Note : un ast&eacute;risque rouge est affich&eacute; en bas &agrave;
160gauche, tant qu'il reste quelque chose &agrave; d&eacute;voiler.
161</p>
162</div>
163</div>
164
165
166<!-- Diapo -->
167<div class="slide">
168<h1>Listes avec paragraphes masqu&eacute;s</h1>
169
170<p>Il est possible de d&eacute;rouler ou de replier les items d'une
171liste num&eacute;rot&eacute;e ou pas</p>
172
173<ul class="outline">
174 <li>On ajoute <em>class="outline"</em> &agrave;
175 l'&eacute;l&eacute;ment <em>ul</em> ou <em>ol</em>.
176 D&eacute;monstration en cliquant sur cet item ...
177 <ul>
178 <li>Slidy traite alors cette liste comme une liste compos&eacute;e.</li>
179 <li>En cliquant dessus, on la d&eacute;roule ou on la replie.</li>
180 </ul>
181 </li>
182 <li>
183 L'&eacute;tat de la liste est indiqu&eacute; par l'icone en
184 t&ecirc;te de liste.
185 Cet item, sans sous-&eacute;l&eacute;ments, n'est ni d&eacute;roulable, ni repliable.
186 </li>
187 <li class="expand">On rajoute class="expand" &agrave; tout
188 &eacute;l&eacute;ment <em>li</em> devant &ecirc;tre
189 d&eacute;roul&eacute; d&egrave;s le d&eacute;part.
190 <ul>
191 <li>Par defaut Slidy replie toute liste d&eacute;roulable sauf
192 si on a sp&eacute;cifi&eacute; class="expand".</li>
193 <li>Une liste pr&eacute;-d&eacute;roul&eacute;e est repliable
194 d'un click.</li>
195 </ul>
196 </li>
197</ul>
198
199</div>
200
201
202<!-- Diapo -->
203<div class="slide">
204<h1>Affichage progressif des &eacute;l&eacute;ments d'une image</h1>
205
206<p>On utilisera le positionnement relatif des CSS :</p>
207
208<div class="incremental" style="margin-left: 4em; position: relative;">
209 <img src="Images/face1.gif" alt="face" style="position: static; vertical-align: bottom;" />
210 <img src="Images/face2.gif" alt="eyes" style="position: absolute; left: 0pt; top: 0pt;" />
211 <img src="Images/face3.gif" alt="nose" style="position: absolute; left: 0pt; top: 0pt;" />
212 <img src="Images/face4.gif" alt="mouth" style="position: absolute; left: 0pt; top: 0pt;" />
213</div>
214
215</div>
216
217<!-- Diapo -->
218<div class="slide">
219<h1>Raccourcis claviers</h1>
220
221<ul>
222 <li>
223 <strong>Click</strong> ou <strong>barre d'espacement</strong> pour aller &agrave; la
224 diapo suivante
225 </li>
226
227 <li>D&eacute;placement entre diapo avec <strong>Cursor Left</strong>,
228 <strong>Cursor Right</strong>, <strong>Pg Up</strong> and <strong>Pg Dn</strong>
229 </li>
230
231 <li>
232 <strong>Home</strong> ram&egrave;ne &agrave; la premi&egrave;re diapo, <strong>End</strong>
233 &agrave; la derni&egrave;re
234 </li>
235
236 <li>La touche "<strong>C</strong>" g&eacute;n&egrave;re
237 automatiquement une table des mati&egrave;re (ou bien cliquer sur
238 "contents" dans la barre inf&eacute;rieure)
239 </li>
240
241 <li>
242 La fonction <strong>F11</strong> bascule en plein &eacute;cran et vice-versa (sur
243 Windows ?)
244 </li>
245
246 <li>
247 La touche "<strong>F</strong>" active ou d&eacute;sactive
248 l'affichage de la barre inf&eacute;rieure.
249 </li>
250
251 <li>
252 La touche "<strong>A</strong>" active la fonction "all slides view"
253 <ul>
254 <li>
255 Pour imprimer l'ensemble de la pr&eacute;sentation, presser la
256 touche "A", puis imprimer normalement selon le navigateur.
257 </li>
258
259 <li>
260 Permet ainsi d'imprimer les notes attach&eacute;es aux diapos pour
261 les poly.
262 </li>
263 </ul>
264 </li>
265
266 <li>
267 La taille des fontes est adapt&eacute;e automatiquement &agrave;
268 la taille de la fen&ecirc;tre du navigateur
269 <ul>
270 <li>les touches <strong>S</strong> et <strong>B</strong>
271 permettent de contr&ocirc;ler manuellement la taille d'affichage
272 </li>
273 </ul>
274 </li>
275
276 <li>
277 Si JavaScript est d&eacute;sactiv&eacute;, toutes les diapos sont affich&eacute;es.
278 </li>
279
280 <li>
281 Pour visualiser la pr&eacute;sentation <em>offline</em>, il faut
282 penser &agrave; sauvegarder toute la hi&eacute;rarchie
283 (voir la fonction <em>"Save As"</em> du navigateur et sauvegarder
284 avec le type
285 <em>"Web Page, complete"</em>).
286 </li>
287</ul>
288
289</div>
290
291<!-- Diapo -->
292<div class="slide">
293<h1>Make your images scale with the browser window size</h1>
294
295<p>For adaptive layout, use percentage widths on images, together
296with CSS positioning:</p>
297
298<ul>
299<li>CSS positioning is simpler and more reliable than using
300tables</li>
301</ul>
302
303</div>
304
305<!-- Diapo -->
306<div class="slide">
307<h1>Divers</h1>
308
309<ul>
310 <li>Slides are auto-numbered on the slide show footer</li>
311
312 <li>You can link into the <a href="#[2]">middle</a> of a slide
313 show:
314 <ul>
315 <li>It works out which slide you want and hides the rest</li>
316
317 <li>You can even link between slides in the same slide show</li>
318
319 <li>Individual sides can be addressed with the syntax #(<em>slide
320 number</em>),<br />
321 e.g. slide 3 of this presentation is: <a href=
322 "#[3]">http://www.w3.org/Talks/Tools/Slidy#(3)</a>
323 <ul>
324 <li>Previous versions of Slidy used square brackets, which will
325 also work.</li>
326 </ul></li>
327
328 <li>Note that the browser's back/forward buttons may not work as
329 you might expect due to browser problems.</li>
330 </ul></li>
331
332 <li>If your slides have more content than normal, use a <em>meta
333 element</em> to request a smaller font
334
335 <ul>
336 <li>the following requests fonts to be one step smaller than
337 the Slidy default for the current window width, and positive
338 integers will make the fonts correspondingly larger</li>
339 </ul>
340
341<pre>
342&lt;meta name="font-size-adjustment" content="-1" /&gt;
343</pre>
344
345 <ul>
346 <li>Slidy uses JavaScript to dynamically set the font size on the
347 body element, but it is okay to specify relative font changes on
348 other elements within your own style sheet.</li>
349 </ul>
350</li>
351
352<li>You are encouraged to ensure your markup is valid. <a href=
353"http://www.w3.org/People/Raggett/tidy/">HTML Tidy</a> can be used
354to find and correct common markup problems</li>
355
356<li>The slide show script and style sheet can be used freely under
357W3C's <a href=
358"http://www.w3.org/Consortium/Legal/copyright-software">software
359licensing</a> and <a href=
360"http://www.w3.org/Consortium/Legal/copyright-documents">document
361use</a> policies</li>
362<li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
363I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
364on Slidy
365(<a href="http://www.w3.org/2006/05/Slidy-XTech/slidy-xtech06-dsr.pdf">Paper</a>).</li>
366</ul>
367</div>
368
369<!-- Diapo -->
370<div class="slide">
371<h1>Future Plans</h1>
372
373<p>Recent additions have included a table of contents, and a way to
374hide and reveal content in the spirit of outline lists. Further
375work is anticipated on the following:</p>
376
377<ul>
378<li>Collecting a gallery of good looking slide themes
379<ul>
380<li>Opportunities for graphics designers!</li>
381</ul>
382</li>
383<li>Getting SVG Tiny to work on IE without need for SVG plugin
384<ul>
385<li>Using scripts to dynamically convert SVG Tiny to VML</li>
386</ul>
387</li>
388<li>Tweaks for working with IE7 when that becomes available</li>
389<li>Alpha version of wysiwyg slide editor (see <a
390href="editor/editor-screenshot1.png">screenshot</a>)
391<ul>
392<li>Using contentEditable when available, otherwise
393falling back to textarea and plain text conventions</li>
394<li>Using XMLHttpRequest to dynamically reflect changes to server</li>
395</ul>
396</li>
397<li>Mechanism for remotely driving Slidy as part of distributed meetings
398<ul>
399<li>Using XMLHttpRequest to listen for navigation commands</li>
400<li>Using VoIP for accompanying audio and teleconferencing</li>
401<li>Synchronizing recorded spoken presentation with currently viewed slide</li>
402</ul>
403</li>
404<li>Filters from PowerPoint and Open Office
405<ul>
406<li>and export to PDF via <a href="http://www.princexml.com/">PrinceXML</a></li>
407</ul>
408</li>
409</ul>
410
411<p>If you have comments, suggestions for improvements, or would
412like to volunteer your help with further work on Slidy,
413please contact <a href=
414"http://www.w3.org/People/Raggett/">Dave Raggett</a> &lt;<a href=
415"mailto:dsr@w3.org">dsr@w3.org</a>&gt;</p>
416</div>
417
418
419</body>
420</html>
Note: See TracBrowser for help on using the repository browser.