starting to write the help section

explorer.php

@@ -94,8 +94,8 @@
 
       <div class="container-fluid">
         <!--{{{ help-->
-        <!--<div class="panel panel-default collapse" id="help-panel">-->
-        <div class="panel panel-default" id="help-panel">
+        <div class="panel panel-default collapse" id="help-panel">
+        <!--<div class="panel panel-default" id="help-panel">-->
           <div class="panel-heading">
             <h2 class="panel-title">Aide</h2>
           </div>
@@ -202,15 +202,84 @@
 
             <h3>Notes</h3>
 
-            <p> Deux blocs notes sont mis à votre disposition. Si votre navigateur
-            est suffisamment récent, ces notes seront conservées même si vous
-            quittez cette planète pour y revenir plus tard. Les notes locales sont
+            <p> Deux blocs notes sont mis à votre disposition. Les notes locales sont
             spécifiques à la case sur laquelle vous vous trouvez. Si vous quittez
             cette case, un bloc note vierge apparaîtra pour la nouvelle case. En
             revenant sur vos pas, vous devriez pouvoir retrouver les notes que vous
             avez laissées sur les cases précédentes. Les notes globales quant-à
             elles sont communes à toute la planète.
             </p>
+
+            <h3>Programme</h3>
+
+            <p>
+            Le programme vous permet d'automatiser l'exploration de la planète.
+            L'interface sera différentes selon votre type de navigateur : mobile ou poste de travail.
+            </p>
+
+            <h4>Interface de bureau</h4>
+            
+            <p>
+            Sur un poste de bureau, vous pourrez ajouter des instructions et les
+            réordonner en les faisant glisser. Il ne sera pas possible de
+            déposer une instructions à un emplacement incompatible. En appuyant
+            sur la touche <kbd>Ctrl</kbd> ou en cliquant sur le bouton 
+            copie&nbsp;<span class= "glyphicon glyphicon-copy"></span>, vous pourrez
+            dupliquer des instructions au lieu de les réordonner dans votre
+            programme. En déplacement des instructions depuis votre programme
+            pour les déposer dans la bibliothèque, vous les supprimerez. Si vous
+            préférez l'interface par clics, vous pouvez forcer le fonctionnement
+            mobile en utilisant le bouton mobile&nbsp;<span class="glyphicon
+            glyphicon-phone"></span>.
+            </p>
+
+            <h4>Interface mobile</h4>
+            
+            <p>
+            Sur un mobile, vous pouvez ajouter des instructions en touchant
+            l'endroit où vous voulez en ajouter. La bibliothèque apparaîtra
+            alors pour vous permettre de choisir les instructions. Selon la zone
+            touchées, seules les instructions compatibles seront proposées. Vous
+            pouvez annuler l'action en utilisant le bouton de fermeture de la
+            bibliothèque en haut à droite&nbsp;<span class="glyphicon
+            glyphicon-remove"></span>. Une petite barre d'outils en bas du
+            programme vous permet de choisir le comportement du clic : 
+            ajouter&nbsp;<span class="glyphicon glyphicon-plus"></span>, couper 
+            (supprimer)&nbsp;<span class="glyphicon glyphicon-scissors"></span>, 
+            copier&nbsp;<span class="glyphicon glyphicon-copy"></span> ou 
+            coller&nbsp;<span class="glyphicon glyphicon-paste"></span>.
+            </p>
+
+            <h4>Bibliothèque</h4>
+
+            <p>
+            La bibliothèque regroupe les instructions disponibles dans
+            différentes catégories. 
+            <ul>
+              <li>
+                <span class="glyphicon glyphicon-move"></span> 
+                La catégorie <strong>déplacements</strong> permet de se déplacer 
+                en utilisant soit les directions soit les couleurs de la boussole.
+                Il est également possible de convertir les couleurs en directions et
+                vice-versa. L'instruction direction / couleur suivante vous permet
+                d'énumérer les directions. L'ordre des directions et des couleurs
+                est celui de la bibliothèque : haut, gauche, bas, droite, haut, ...
+              </li>
+              <li>
+                <span class="glyphicon glyphicon-pencil"></span> 
+                La catégorie <strong>notes</strong> vous permet d'interagir avec les 
+                notes via des <em>variables</em>. Le 
+                symbole&nbsp;<span class="glyphicon glyphicon-map-marker">
+                </span> signifie que vous utilisez les notes locales et le 
+                symbole&nbsp;<span class="glyphicon glyphicon-globe"></span> les notes 
+                globales. Vous pouvez écrire&nbsp;&larr;, lire&nbsp;<span class="
+                glyphicon glyphicon-search"></span> ou supprimer&nbsp;<span class="
+                glyphicon glyphicon-trash"></span> des variables. Une variable
+                apparaîtra sous la forme <code>[ nom = valeur ]</code> dans les notes.
+              </li>
+            </ul>
+            </p>
+
           </div>
         </div>
         <!--}}}-->