Dave Raggett, <dsr@w3.org>
Pressez la
barre Espace ou faîtes glisser votre doigt vers la gauche pour
continuer
Copyright © 2005-2010 W3C ® (MIT, ERCIM, Keio), All Rights Reserved.
For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:
<div class="slide"> ... your slide content ... </div> <div class="handout"> ... stuff that only appears in the handouts ... </div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slide Shows in XHTML</title>
<meta name="copyright"
content="Copyright © 2005 your copyright notice" />
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
<!-- your custom style rules -->
</style>
</head>
<body>
... your slides marked up in XHTML ...
</body>
</html>
L'élément <head> doit comprendre le lien ci-dessous pour la feuille de style :
<link rel="stylesheet" type="text/css" media="screen, projection, print" href="http://www.w3.org/Talks/Tools/Slidy2/styles/w3c-blue.css" />
Le contenu de l'élément <body> devrait commencer par la balise suivante:
<div class="background">
<img id="head-icon" alt="graphic with four colored squares"
src="http://www.w3.org/Talks/Tools/Slidy2/graphics/icon-blue.png" />
<object id="head-logo" title="W3C logo" type="image/svg+xml"
data="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.svg"><img
src="http://www.w3.org/Talks/Tools/Slidy2/graphics/w3c-logo-white.gif"
alt="W3C logo" id="head-logo-fallback" /></object>
</div>
Cela ajoute les logos sur les coins supérieurs droit et gauche de la diapositive.
Vous êtes évidemment les bienvenus pour créer vos propres modèles de diapositives. Vous pouvez fournir des styles et des arrières plans différents dans chaque diapositive (plus de détails plus tard).
Utilisez le meta element avec name="copyright" dans le pied de page du diaporama :
<meta name="copyright" content="Copyright © 2005-2009 W3C (MIT, ERCIM, Keio)" />
http://localhost/Talks/Tools/Slidy2 et utilise des URI de la
forme
"/Talks/Tools/Slidy2/styles/slidy.css","/Talks/Tools/Slidy2/scripts/slidy.js".<meta name="duration" content="5" />
Si vous voulez une page de garde avec le style bleu du W3C, la première diapositive doit être comme suit :
<div class="slide cover"> <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg" alt="Cover page images (keys)" class="cover" /> <br clear="all" /> <h1>HTML Slidy: Slide Shows in XHTML</h1> <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a> <a href="mailto:dsr@w3.org">dsr@w3.org</a></p> </div>
La feuille de style w3c-blue.css s’applique pour les classes "slide" et "cover" sur les éléments div et img en utilisant le sélecteur CSS : div.slide.cover div.slide.cover
Cette technique peut aussi être utilisée pour assigner vos diapositives à des classes différentes avec une apparence différente pour chacune de ces classes.
Slidy vous permet également d'utiliser un background spécifique pour différentes diapositives, basée sur les noms de classes partagées, comme dans «foo» ci-dessous. Les backgrounds sans noms de classes supplémentaires sont toujours affichés, sauf lorsque le slide n'est pas transparent. Vous pouvez avoir besoin de modifier votre feuille de style personnalisée.
<div class="background foo"> ... background content ... <div> ... <div class="slide foo"> ... slide content ... <div>
Pour un affichage incrémental, utilisez par exemple class="incremental" :
qui est marqué comme suit :
<ul class="incremental"> <li>First bullet point</li> <li>Second bullet point</li> <li>Third bullet point</li> </ul> <p class="incremental">which is marked up as follows:</p> <pre class="incremental"> ... </pre>
Un élément est progressivement révélé si son élément parent est codé avec une class="incremental " ou si elle-même a cet attribut. Les nœuds de texte ne sont pas des éléments et sont affiché lorsque leur élément parent est révélé. Vous pouvez utiliser la class="incremental " sur n'importe quel élément à l'exception des <br> . Utilisez la class="non- incremental» pour annuler l'effet incrémental de la classe sur l'élément parent.
Note: vous verrez un astérisque rouge sur la gauche de la barre d'outils quand il y a encore quelque chose de plus à révéler.
Vous pouvez inclure des puces (numérotées ou non) que vous pouvez déployer ou réduire
<ol class='outline'>
<!-- topic 1 starts collapsed -->
<li>Topic 1
<ol>
<li>subtopic a</li>
<li>subtopic b</li>
</ol>
</li>
<!-- topic 2 starts expanded -->
<li class="expand">Topic 2
<ol>
<li>subtopic c</li>
<li>subtopic d</li>
</ol>
</li>
</ol>
Pour que la diapositive s’adapte à la fenêtre du navigateur, utilisez les largeurs en pourcentage sur les images, ainsi que le positionnement CSS :
<div class="slide">
<h1>Analysts - "Open standards programming will become
mainstream, focused around VoiceXML"</h1>
<!-- use CSS positioning and scaling for adaptive layout -->
<img src="trends.png" width="50%" style="float:left"
alt="projected growth of VoiceXML" />
<blockquote style="float:right;width: 35%">
VoiceXML will dominate the voice environment, due to its
flexibility and eventual multimodal capabilities
</blockquote><br clear="all" />
<p style="text-align:center">Source Data Monitor, March
2004</p>
</div>
Pour contourner un bug de rendu CSS dans IE relatif aux marges, il faut coder l'affichage avec un « display:inline » sur les éléments flottants.
Celles-ci peuvent être marquées à l'aide du positionnement relatif CSS, par exemple.
<div class="incremental"
style="margin-left: 4em; position: relative">
<img src="graphics/face1.gif" alt="face"
style="position: static; vertical-align: bottom"/>
<img src="graphics/face2.gif" alt="eyes"
style="position: absolute; left: 0; top: 0" />
<img src="graphics/face3.gif" alt="nose"
style="position: absolute; left: 0; top: 0" />
<img src="graphics/face4.gif" alt="mouth"
style="position: absolute; left: 0; top: 0" />
</div>
Vous devriez également utiliser des images en format gif transparent afin d'éviter les problèmes liés à IE/Win et la couche alpha des format png Une correction est espérée dans IE 7. Un moyen de contournement est disponible sur skyzyx.com. Mes remerciements à ACID2 pour les images.
Dans l'élément div de votre diapositive :
<div class="vbox"></div> <div class="hbox"> Place the content here </div>
et le style :
div.vbox {
float: left;
height: 40%; width: 50%;
margin-top: -220px;
}
div.hbox {
width:60%; margin-top: 0;
margin-left:auto; margin-right:auto;
height: 60%;
border:1px solid silver;
background:#F0F0F0;
overflow:auto;
text-align:left;
clear:both;
}
Le style ci-dessus est inclus dans w3c-blue.css, qui est conçu pour être utilisé avec slidy.css, mais vous êtes encouragé à développer votre propre feuille de style.
L'inclusion de contenu SVG peut être fait en utilisant l'élément objet, par exemple :
a été réalisé par :
<object data="graphics/example.svg" type="image/svg+xml"
width="50%" height="10%" title="Indian Office logo">
<img src="graphics/example.png" width="50%"
alt="Indian Office logo" />
</object>
Cela garantit que l’image png jointe est affichée lorsque le navigateur n'a pas de plugin installé ou ne peut pas afficher directement SVG. Fournir une solution alternative est très important ! N'oubliez pas le texte alt pour les personnes qui ne peuvent pas voir l'image.
Cependant, il y a des réserves, voir la diapositive suivante !
Adobe a récemment abandonné le support de ses plugins SVG, il vous est donc recommandé d'envisager des solutions alternatives. Si vous utilisez encore le plugin SVG d’Adobe, vous devez être averti des bugs lors de l'utilisation celui-ci avec IE, à savoir :
<meta name="font-size-adjustment" content="-1" />
div.slide.large { font-size: 200% }Slidy inclut désormais le support pour la localisation :
"es":this.strings_es, "ca":this.strings_ca, "cs":this.strings_cs, "nl":this.strings_nl, "de":this.strings_de, "pl":this.strings_pl, "fr":this.strings_fr, "hu":this.strings_hu, "it":this.strings_it, "el":this.strings_el, "jp":this.strings_ja, "zh":this.strings_zh, "ru":this.strings_ru, "sv":this.strings_sv// for each language there is an associative array
strings_es: {
"slide":"pág.",
"help?":"Ayuda",
"contents?":"Índice",
"table of contents":"tabla de contenidos",
"Table of Contents":"Tabla de Contenidos",
"restart presentation":"Reiniciar presentación",
"restart?":"Inicio"
},
help_es:
"Utilice el ratón, barra espaciadora, teclas Izda/Dcha, " +
"o Re pág y Av pág. Use S y B para cambiar el tamaño de fuente.",
Note: Slidy now works with current
slides translated into French. Use right mouse button to open frame without
Google header. To disable automatic translation of the content of particular
elements add class="notranslate", see breaking
the language barrier.
Les ajouts récents ont inclus une table des matière, et un moyen de déployer et de réduire le contenu de listes. Le script a été réécrit pour le rendre plus facile à combiner avec d'autres scripts, par exemple pour les contrôles d'interface utilisateur et le support des commandes tactiles pour naviguer. D'autres travaux sont prévus :
Si vous avez des commentaires, des suggestions d'amélioration, ou si vous contribuer pour poursuivre les travaux sur Slidy, s'il vous plaît contacter Dave Raggett <dsr@w3.org>
Notez que, bien que Slidy et S5 ont été développés de façon indépendante, ils supportent à la fois l'utilisation des classes "slide" et "handout" sur les éléments <div>. Slidy ne supporte pas la classe "layout" présente dans S5 et Opera Show, mais fournit une alternative plus flexible avec la classe «background», ce qui permet l’utilisation d’arrières plans différents selon les slides.
Les personnes suivantes ont contribué aux localisations :
Les personnes suivantes ont contribué aux rapports de bogue :
Douglas Crockford pour son script jsmin qui a été utilisé pour réduire le script avant compression gzip.
