From: Maxime Chupin (escudo) <chupin@fougeriens.org>
Date: Sun, 13 Nov 2016 18:19:48 +0000 (+0100)
Subject: Doc: liste
X-Git-Url: https://melusine.eu.org/syracuse/G/git/?a=commitdiff_plain;h=bb219b859367d3cbc212b5d4ad0dfd3ba6356af5;p=svganimation.git

Doc: liste
---

diff --git a/doc/page.html b/doc/page.html
index d25a525..4ce29b5 100644
--- a/doc/page.html
+++ b/doc/page.html
@@ -51,7 +51,12 @@ L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost per
 </div>
 <h2 id="lutilisation">L'utilisation</h2>
 <h3 id="c&#244;t&#233;-html">C&#244;t&#233; HTML</h3>
-<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. &#192; l'int&#233;rieur de ces balises, il faut : * une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation; * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> o&#249; <code>XXXX</code> est l'identifiant de la balise englobante. Dans cette balise <em>message</em>, on y met, si on le souhaite, un message &#224; afficher avant le chargement de l'animation; * une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</p>
+<p>La librairie <code>SVGAnimation</code> d&#233;finit le <em>prototype</em> javascript <code>Animation</code>. Pour l'utiliser il faut d&#233;clarer une balise HTML <code>div</code> avec un identifiant (<code>id</code>) unique. Choisissons pour l'exemple <code>XXXX</code>. &#192; l'int&#233;rieur de ces balises, il faut :</p>
+<ul>
+<li>une balise <code>img</code> contenant un image <code>svg</code> qui servira de vignette &#224; l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_message&quot;</code> o&#249; <code>XXXX</code> est l'identifiant de la balise englobante. Dans cette balise <em>message</em>, on y met, si on le souhaite, un message &#224; afficher avant le chargement de l'animation;</li>
+<li>une balise <code>div</code> avec l'identifiant <code>id=&quot;XXXX_boutons&quot;</code>.</li>
+</ul>
 <p>En supposant que les images SVG se trouvent dans un r&#233;pertoire nomm&#233; <code>svg</code>, voici un exemple d'une telle structure :</p>
 <div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim1&quot;</span><span class="kw">&gt;</span>
   <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="kw">/&gt;</span>
@@ -116,7 +121,7 @@ Chargement...
   <span class="va">b</span>.<span class="at">connect</span>()<span class="op">;</span>
 <span class="op">}</span></code></pre></div>
 <p>Fonction qui sera li&#233;e &#224; l'<em>&#233;v&#233;nement</em> <code>onclick</code> d'un bouton proposant, &#224; l'internaute, le chargement de l'animation...</p>
-<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span>  
+<div class="sourceCode"><pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;anim2&quot;</span>
 <span class="ot">  style=</span><span class="st">&quot;margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px&quot;</span><span class="kw">&gt;</span>
  <span class="kw">&lt;img</span><span class="ot"> src=</span><span class="st">&quot;../ellipsographe/svg/ellipsographe-1.svg&quot;</span><span class="ot"> alt=</span><span class="st">&quot;animation1&quot;</span><span class="ot"> style=</span><span class="st">&quot;width:330px;height:240px&quot;</span><span class="kw">/&gt;</span>
  <span class="kw">&lt;div</span><span class="ot"> class=</span><span class="st">&quot;message&quot;</span><span class="ot"> id=</span><span class="st">&quot;anim2_message&quot;</span><span class="kw">&gt;</span>Ellipsographe<span class="kw">&lt;/div&gt;</span>
diff --git a/doc/page.md b/doc/page.md
index 0cffee1..b1816df 100644
--- a/doc/page.md
+++ b/doc/page.md
@@ -92,6 +92,7 @@ La librairie `SVGAnimation` définit le *prototype* javascript
 avec un identifiant (`id`) unique. Choisissons pour l'exemple `XXXX`.
 À l'intérieur de ces balises, il
 faut :
+
 * une balise `img` contenant un image `svg` qui servira de vignette à
   l'animation;
 * une balise `div` avec l'identifiant `id="XXXX_message"` où `XXXX` est
@@ -217,7 +218,7 @@ Fonction qui sera liée à l'*événement* `onclick` d'un bouton proposant, à
 l'internaute, le chargement de l'animation...
 
 ~~~~~~~ { .html }
-<div id="anim2"  
+<div id="anim2"
   style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
  <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
  <div class="message" id="anim2_message">Ellipsographe</div>