| 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 © 2006 LAL (Cnrs/IN2P3/Lal)" />
|
|---|
| 11 | <meta name="font-size-adjustment" content="-2" />
|
|---|
| 12 | <link rel="stylesheet" href="Slidy/slidy.css" type="text/css"
|
|---|
| 13 | media="screen, projection, print" />
|
|---|
| 14 | <link rel="stylesheet" href="Slidy/lal.css" type="text/css"
|
|---|
| 15 | media="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ésentation en XHTML</h1>
|
|---|
| 59 |
|
|---|
| 60 | <p><a href="http://www.lal.in2p3.fr/lal/Annuaire/affiche-detail.php?vnom=Perus%20Antoine">Antoine Pérus</a>,
|
|---|
| 61 | <<a href="mailto:perus@lal.in2p3.fr">perus@lal.in2p3.fr</a>></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ésentation se présente sous la forme d'un seul fichier XHTML</li>
|
|---|
| 72 |
|
|---|
| 73 | <li>
|
|---|
| 74 | Chaque diapo est définie par les balises <em><div class="slide"> ...
|
|---|
| 75 | </div></em>
|
|---|
| 76 | </li>
|
|---|
| 77 |
|
|---|
| 78 | <li>On utilise les balises habituelles à l'intérieur
|
|---|
| 79 | de chaque diapo.</li>
|
|---|
| 80 |
|
|---|
| 81 | <li>
|
|---|
| 82 | L'en-tête du document contient deux liens :
|
|---|
| 83 | <ul>
|
|---|
| 84 | <li>
|
|---|
| 85 | La feuille de style de la pré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é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 être intéressant de rajouter dans la version
|
|---|
| 98 | <em>poly</em> des notes supplémentaires à l'aide de
|
|---|
| 99 | l'élément <em>div class="handout"</em> après
|
|---|
| 100 | chaque diapo :</p>
|
|---|
| 101 |
|
|---|
| 102 | <pre>
|
|---|
| 103 | <div class="slide">
|
|---|
| 104 | <em>... le contenu d'une diapo ...</em>
|
|---|
| 105 | </div>
|
|---|
| 106 |
|
|---|
| 107 | <div class="handout">
|
|---|
| 108 | <em>... des notes qui n'apparaîtront que sur le poly, à la suite de la diapo précédente ...</em>
|
|---|
| 109 | </div>
|
|---|
| 110 | </pre>
|
|---|
| 111 |
|
|---|
| 112 | </div>
|
|---|
| 113 |
|
|---|
| 114 | <!-- Diapo -->
|
|---|
| 115 | <div class="slide slanty">
|
|---|
| 116 | <h1>Générer une Page de Titre</h1>
|
|---|
| 117 |
|
|---|
| 118 | <p>If you want a separate title page with the W3C blue style, the
|
|---|
| 119 | first slide should be as follows:</p>
|
|---|
| 120 |
|
|---|
| 121 | <p>The <a
|
|---|
| 122 | href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css">w3c-blue.css</a>
|
|---|
| 123 | style sheet looks for the classes "slide" and "cover" on div
|
|---|
| 124 | and 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
|
|---|
| 127 | classes with a different appearence for each such class.</p>
|
|---|
| 128 |
|
|---|
| 129 | <p>Slidy also allows you to use different background markup for
|
|---|
| 130 | different slides, based upon shared class names, as in "foo" below.
|
|---|
| 131 | Backgrounds without additional class names are always shown except
|
|---|
| 132 | when the slide isn't transparent. You may need to tweak your
|
|---|
| 133 | custom style sheet.</p>
|
|---|
| 134 |
|
|---|
| 135 | </div>
|
|---|
| 136 |
|
|---|
| 137 | <!-- Diapo -->
|
|---|
| 138 | <div class="slide">
|
|---|
| 139 | <h1>L'affichage incrémental</h1>
|
|---|
| 140 |
|
|---|
| 141 | <p>Pour afficher item par item, utiliser <strong>class="incremental"</strong>, par
|
|---|
| 142 | exemple :</p>
|
|---|
| 143 |
|
|---|
| 144 | <ul class="incremental">
|
|---|
| 145 | <li>Premier item</li>
|
|---|
| 146 | <li>Deuxième item</li>
|
|---|
| 147 | <li>Et troisième item</li>
|
|---|
| 148 | </ul>
|
|---|
| 149 |
|
|---|
| 150 | <div class="footnote">
|
|---|
| 151 | <p class="incremental">
|
|---|
| 152 | Un élément est affiché au coup par coup s'il est
|
|---|
| 153 | fils d'un parent ayant l'attribut <em class="non-incremental">class="incremental"</em> ou s'il
|
|---|
| 154 | possède lui-même cet attribut. L'attribut
|
|---|
| 155 | <em class="non-incremental">class="non-incremental"</em> désactive l'effet défini au
|
|---|
| 156 | niveau parental.
|
|---|
| 157 | </p>
|
|---|
| 158 | <p>
|
|---|
| 159 | Note : un astérisque rouge est affiché en bas à
|
|---|
| 160 | gauche, tant qu'il reste quelque chose à dévoiler.
|
|---|
| 161 | </p>
|
|---|
| 162 | </div>
|
|---|
| 163 | </div>
|
|---|
| 164 |
|
|---|
| 165 |
|
|---|
| 166 | <!-- Diapo -->
|
|---|
| 167 | <div class="slide">
|
|---|
| 168 | <h1>Listes avec paragraphes masqués</h1>
|
|---|
| 169 |
|
|---|
| 170 | <p>Il est possible de dérouler ou de replier les items d'une
|
|---|
| 171 | liste numérotée ou pas</p>
|
|---|
| 172 |
|
|---|
| 173 | <ul class="outline">
|
|---|
| 174 | <li>On ajoute <em>class="outline"</em> à
|
|---|
| 175 | l'élément <em>ul</em> ou <em>ol</em>.
|
|---|
| 176 | Démonstration en cliquant sur cet item ...
|
|---|
| 177 | <ul>
|
|---|
| 178 | <li>Slidy traite alors cette liste comme une liste composée.</li>
|
|---|
| 179 | <li>En cliquant dessus, on la déroule ou on la replie.</li>
|
|---|
| 180 | </ul>
|
|---|
| 181 | </li>
|
|---|
| 182 | <li>
|
|---|
| 183 | L'état de la liste est indiqué par l'icone en
|
|---|
| 184 | tête de liste.
|
|---|
| 185 | Cet item, sans sous-éléments, n'est ni déroulable, ni repliable.
|
|---|
| 186 | </li>
|
|---|
| 187 | <li class="expand">On rajoute class="expand" à tout
|
|---|
| 188 | élément <em>li</em> devant être
|
|---|
| 189 | déroulé dès le départ.
|
|---|
| 190 | <ul>
|
|---|
| 191 | <li>Par defaut Slidy replie toute liste déroulable sauf
|
|---|
| 192 | si on a spécifié class="expand".</li>
|
|---|
| 193 | <li>Une liste pré-déroulé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 élé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 à la
|
|---|
| 224 | diapo suivante
|
|---|
| 225 | </li>
|
|---|
| 226 |
|
|---|
| 227 | <li>Dé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ène à la première diapo, <strong>End</strong>
|
|---|
| 233 | à la dernière
|
|---|
| 234 | </li>
|
|---|
| 235 |
|
|---|
| 236 | <li>La touche "<strong>C</strong>" génère
|
|---|
| 237 | automatiquement une table des matière (ou bien cliquer sur
|
|---|
| 238 | "contents" dans la barre inférieure)
|
|---|
| 239 | </li>
|
|---|
| 240 |
|
|---|
| 241 | <li>
|
|---|
| 242 | La fonction <strong>F11</strong> bascule en plein écran et vice-versa (sur
|
|---|
| 243 | Windows ?)
|
|---|
| 244 | </li>
|
|---|
| 245 |
|
|---|
| 246 | <li>
|
|---|
| 247 | La touche "<strong>F</strong>" active ou désactive
|
|---|
| 248 | l'affichage de la barre infé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é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ées aux diapos pour
|
|---|
| 261 | les poly.
|
|---|
| 262 | </li>
|
|---|
| 263 | </ul>
|
|---|
| 264 | </li>
|
|---|
| 265 |
|
|---|
| 266 | <li>
|
|---|
| 267 | La taille des fontes est adaptée automatiquement à
|
|---|
| 268 | la taille de la fenêtre du navigateur
|
|---|
| 269 | <ul>
|
|---|
| 270 | <li>les touches <strong>S</strong> et <strong>B</strong>
|
|---|
| 271 | permettent de contrôler manuellement la taille d'affichage
|
|---|
| 272 | </li>
|
|---|
| 273 | </ul>
|
|---|
| 274 | </li>
|
|---|
| 275 |
|
|---|
| 276 | <li>
|
|---|
| 277 | Si JavaScript est désactivé, toutes les diapos sont affichées.
|
|---|
| 278 | </li>
|
|---|
| 279 |
|
|---|
| 280 | <li>
|
|---|
| 281 | Pour visualiser la présentation <em>offline</em>, il faut
|
|---|
| 282 | penser à sauvegarder toute la hié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
|
|---|
| 296 | with CSS positioning:</p>
|
|---|
| 297 |
|
|---|
| 298 | <ul>
|
|---|
| 299 | <li>CSS positioning is simpler and more reliable than using
|
|---|
| 300 | tables</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 | <meta name="font-size-adjustment" content="-1" />
|
|---|
| 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
|
|---|
| 354 | to find and correct common markup problems</li>
|
|---|
| 355 |
|
|---|
| 356 | <li>The slide show script and style sheet can be used freely under
|
|---|
| 357 | W3C's <a href=
|
|---|
| 358 | "http://www.w3.org/Consortium/Legal/copyright-software">software
|
|---|
| 359 | licensing</a> and <a href=
|
|---|
| 360 | "http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|---|
| 361 | use</a> policies</li>
|
|---|
| 362 | <li>At <a href="http://xtech06.usefulinc.com/">XTech2006</a>
|
|---|
| 363 | I gave this <a href="http://www.w3.org/2006/05/Slidy-XTech/">presentation</a>
|
|---|
| 364 | on 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
|
|---|
| 374 | hide and reveal content in the spirit of outline lists. Further
|
|---|
| 375 | work 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
|
|---|
| 390 | href="editor/editor-screenshot1.png">screenshot</a>)
|
|---|
| 391 | <ul>
|
|---|
| 392 | <li>Using contentEditable when available, otherwise
|
|---|
| 393 | falling 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
|
|---|
| 412 | like to volunteer your help with further work on Slidy,
|
|---|
| 413 | please contact <a href=
|
|---|
| 414 | "http://www.w3.org/People/Raggett/">Dave Raggett</a> <<a href=
|
|---|
| 415 | "mailto:dsr@w3.org">dsr@w3.org</a>></p>
|
|---|
| 416 | </div>
|
|---|
| 417 |
|
|---|
| 418 |
|
|---|
| 419 | </body>
|
|---|
| 420 | </html>
|
|---|