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>
 <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>
 <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>
 <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>
 <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">
 <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>
 </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>
 <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>
 </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="#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>
  <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.
 
 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
 
 ## 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>
 
 
     <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`
 
 
 ## 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>
 <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>
 
 
 </div>
 
 

+### L'utilisation

 
 ### Les paramètres
 
 
 ### Les paramètres
 


@@ -47,7 +89,3 @@ La librairie `SVGAnimation.js` dépend de `JQuery`, il faut donc charger charger
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`
 ### `SVGPlayerOne.js`
 
 ### `SVGPlayerButtons.js`

-
-
-
-