Doc: Installation, Warning, Principe, Famille d'images

diff --git a/doc/page.html b/doc/page.html
index e1a31c3..eb62d50 100644 (file)
--- a/doc/page.html
+++ b/doc/page.html
@@ -12,12 +12,34 @@
 <p><strong>Participants :</strong> Chupin Maxime, Sarlat Jean-Michel.</p>
 <p><strong>Interface du d&#233;p&#244;t Git :</strong> <a href="http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary" class="uri">http://melusine.eu.org/syracuse/G/git/?p=svganimation.git;a=summary</a></p>
 <p>L'objectif est de d&#233;velopper, en particulier, du code Javascript afin de pr&#233;senter des animations de fichiers SVG produits, en particulier, par MetaPost. Ce d&#233;veloppement n'&#233;tant pas tout &#224; fait pr&#233;d&#233;termin&#233;, il sera constitu&#233; &#224; partir de l'exploration de diff&#233;rents sc&#233;narios de pr&#233;sentation de ces animations et des modes de construction des fichiers SVG.</p>
+<div class="alert alert-warning">
+<p>
+Les diff&#233;rents exemples se charge en cliquant sur le bouton d&#233;di&#233;. Ceci <strong>n'est pas</strong> le comportement par d&#233;faut. Il s'agit d'&#233;viter de charger toutes les animations pr&#233;sentes sur cette page, cela serait bien trop lourd.
+</p>
+<p>
+Nous pr&#233;sentons, dans la section XX, le code qui permet de charger l'animation sur demande.
+</p>
+</div>
 <h2 id="installation">Installation</h2>
-<p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans le r&#233;pertoire <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
+<p>Le fichier <code>SVGAnimation.js</code> (que l'on supposera dans un r&#233;pertoire nomm&#233; <code>js</code>) est &#224; charger dans la page <code>html</code> en mettant les lignes suivantes :</p>
 <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;js/SVGAnimation.js&quot;&gt;&lt;/script&gt;</code></pre>
-<p>La librairie <code>SVGAnimation.js</code> d&#233;pend de <code>JQuery</code>, il faut donc charger charger cette biblioth&#232;que JavaScript avant.</p>
+<p>La librairie <code>SVGAnimation.js</code> d&#233;pend de <code>JQuery</code>, il faut donc charger cette biblioth&#232;que JavaScript avant.</p>
+<h2 id="principe">Principe</h2>
+<p>Le principe est simple : on dispose d'un ensemble d'images au format SVG qui constituent, par une suite chronologique, une animation &#224; visionner. La libraire <code>SVGAnimation</code> permet de visionner cette animation dans une page HTML.</p>
+<h3 id="la-famille-dimages">La famille d'images</h3>
+<p>Les diff&#233;rentes images composant l'animation doivent se nommer avec un <em>prefixe</em> suivit d'un tiret puis d'un nombre (celui-ci pouvant &#234;tre formater de diff&#233;rente fa&#231;ons).</p>
+<pre><code>monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...</code></pre>
+<p>ou</p>
+<pre><code>monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...</code></pre>
+<p>Nous verrons comment g&#233;rer le formatage de l'indice des images dans les sections suivantes.</p>
+<div class="alert alert-info">
+<p>
+L'id&#233;e d'une telle librairie est venue du fait que le logiciel MetaPost permet de produire des images SVG, et nous l'utilisons abondamment pour la production d'animations.
+</p>
+</div>
 <h2 id="lobjet-animation">L'objet <code>Animation</code></h2>
+<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</p>
 <div id="anim1" style="margin:10px auto;padding:10px;width:350px;border:2px solid #AAA;border-radius:4px">
 <img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
 <div id="anim1_message" class="message">
@@ -29,6 +51,7 @@ Charger l'animation
 </button>
 </div>
 </div>
+<h3 id="lutilisation">L'utilisation</h3>
 <h3 id="les-param&#232;tres">Les param&#232;tres</h3>
 <h2 id="les-players">Les <em>players</em></h2>
 <h3 id="svgplayerone.js"><code>SVGPlayerOne.js</code></h3>
@@ -40,7 +63,11 @@ Charger l'animation
 </div>
  <ul>
  <li><a href="#installation">Installation</a></li>
+ <li><a href="#principe">Principe</a><ul>
+ <li><a href="#la-famille-dimages">La famille d'images</a></li>
+ </ul></li>
  <li><a href="#lobjet-animation">L'objet <code>Animation</code></a><ul>
+ <li><a href="#lutilisation">L'utilisation</a></li>
  <li><a href="#les-param&#232;tres">Les param&#232;tres</a></li>
  </ul></li>
  <li><a href="#les-players">Les <em>players</em></a><ul>

diff --git a/doc/page.md b/doc/page.md
index 1da4cdb..a77c386 100644 (file)
--- a/doc/page.md
+++ b/doc/page.md
@@ -21,17 +21,58 @@ constitué à partir de l'exploration de différents scénarios de
 présentation de ces animations et des modes de construction des fichiers
 SVG.
 
+<div class="alert alert-warning">
+<p>Les différents exemples se charge en cliquant sur le bouton
+dédié. Ceci **n'est pas** le comportement par défaut. Il s'agit
+d'éviter de charger toutes les animations présentes sur cette page,
+cela serait bien trop lourd.</p>
+<p>Nous présentons, dans la section XX, le code qui permet de charger
+l'animation sur demande.</p>
+</div>
+
 ## Installation
 
-Le fichier `SVGAnimation.js` (que l'on supposera dans le répertoire `js`) est à charger dans la page `html` en mettant les lignes suivantes :
+Le fichier `SVGAnimation.js` (que l'on supposera dans un répertoire nommé `js`) est à charger dans la page `html` en mettant les lignes suivantes :
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script type="text/javascript" src="js/SVGAnimation.js"></script>
 
-La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger cette bibliothèque JavaScript avant. 
+La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger cette bibliothèque JavaScript avant.
+
+## Principe
+
+Le principe est simple : on dispose d'un ensemble d'images au format
+SVG qui constituent, par une suite chronologique, une animation à
+visionner. La libraire `SVGAnimation` permet de visionner cette
+animation dans une page HTML.
+
+### La famille d'images
+
+Les différentes images composant l'animation doivent se nommer avec un
+*prefixe* suivit d'un tiret puis d'un nombre (celui-ci pouvant être
+formater de différente façons).
+
+    monfichier-1.svg  monfichier-2.svg monfichier-3.svg ...
+
+ou
+
+    monfichier-001.svg  monfichier-002.svg monfichier-003.svg ...
+
+Nous verrons comment gérer le formatage de l'indice des images dans
+les sections suivantes.
+
+<div class="alert alert-info">
+<p>L'idée d'une telle librairie est venue du fait que le logiciel
+MetaPost permet de produire des images SVG, et nous l'utilisons
+abondamment pour la production d'animations.</p>
+</div>
+
 
 ## L'objet `Animation`
 
+La librairie `SVGAnimation` définit le *prototype* javascript
+`Animation`. Pour l'utiliser il faut déclarer
+
 <div id="anim1" style="margin:10px auto;padding:10px;width:350px;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="anim1_message">Ellipsographe</div>
@@ -39,6 +80,7 @@ La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger
 </div>
 
 
+### L'utilisation
 
 ### Les paramètres
 
@@ -47,7 +89,3 @@ La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`
-
-
-
-