diff -r 6f7921c6bc27 -r 65988646a719 web/index.html
--- a/web/index.html	Fri Oct 25 14:29:09 2013 +0200
+++ b/web/index.html	Fri Oct 25 14:29:44 2013 +0200
@@ -29,46 +29,129 @@
 	  </div>
 	</header>
 	<div class="container">
-    <div class="row tabmatrow">
-      <button type="button" class="btn col-md-2" id="tabmat">Table des matières <b class="caret"></b></button>
-      <div id="titles" class="col-md-4" style="display:none;">
-        <div class="videotitle" id="videotitle0">
-          <p><a class="videolink hand" data-videoid="0">Résumé vidéo</a> (4'57) <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Lire le résumé de l'article</button></p>
-          <div id="abstract" class="collapse">
-            <p>Avec l’apparition du web, c’est la nature même des savoirs sous toutes leurs formes qui a changé tandis que l’écriture réticulaire devenait accessible aux publics les plus divers. Ceux-ci ont redéfini les conditions de la parité et de ce fait l’université est entrée dans un nouvel âge. C’est ce fait majeur, massif et à bien des égards stupéfiant qui requiert le développement des digital studies prôné par la ministre de l’enseignement supérieur et de la recherche.</p>
-            <p>L’enjeu majeur représenté par les enseignements numériques vient rationnellement après celui de la recherche et des études numériques. Il s’agit d’impulser une dynamique qui repense les rapports des savoirs à leurs supports (dont les MOOCs) avec les universités et les institutions académiques, et qui, par la recherche, redéfinisse leur rôle dans ce nouveau contexte.</p>
-            <p>La technologie du vidéolivre est un support nouveau pour un réseau de lecteurs constituant une communauté plurielle d’interprétations. Ce n’est là qu’un exemple de ces nouveaux dispositifs du débat public auxquels il est fondamental d’initier et d’associer le plus tôt possible les étudiants.</p>
+	  <div class="row tabmatrow">
+	    <div class="col-md-6">
+	      <button type="button" class="btn" id="tabmat">Table des matières <b class="caret"></b></button>
+	      <div id="titles" class="over-text" style="display:none;">
+	        <div class="videotitle" id="videotitle0">
+	          <p><a class="videolink hand" data-videoid="0">Résumé vidéo</a> (4'57) <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Lire le résumé de l'article</button></p>
+	          <div id="abstract" class="collapse">
+	            <p>Avec l’apparition du web, c’est la nature même des savoirs sous toutes leurs formes qui a changé tandis que l’écriture réticulaire devenait accessible aux publics les plus divers. Ceux-ci ont redéfini les conditions de la parité et de ce fait l’université est entrée dans un nouvel âge. C’est ce fait majeur, massif et à bien des égards stupéfiant qui requiert le développement des digital studies prôné par la ministre de l’enseignement supérieur et de la recherche.</p>
+	            <p>L’enjeu majeur représenté par les enseignements numériques vient rationnellement après celui de la recherche et des études numériques. Il s’agit d’impulser une dynamique qui repense les rapports des savoirs à leurs supports (dont les MOOCs) avec les universités et les institutions académiques, et qui, par la recherche, redéfinisse leur rôle dans ce nouveau contexte.</p>
+	            <p>La technologie du vidéolivre est un support nouveau pour un réseau de lecteurs constituant une communauté plurielle d’interprétations. Ce n’est là qu’un exemple de ces nouveaux dispositifs du débat public auxquels il est fondamental d’initier et d’associer le plus tôt possible les étudiants.</p>
+	          </div>
+	        </div>
+	        <div class="videotitle" id="videotitle1">
+	          <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a class="videolink hand" data-videoid="1r">résumé</a> (2'25) ou <a class="videolink hand" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle2">
+	          <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink hand" data-videoid="2r">résumé</a> (2'57) ou <a class="videolink hand" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle3">
+	          <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a class="videolink hand" data-videoid="3r">résumé</a> (3'44) ou <a class="videolink hand" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle4">
+	          <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink hand" data-videoid="4r">résumé</a> (4'44) ou <a class="videolink hand" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle5">
+	          <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink hand" data-videoid="5r">résumé</a> (2'37) ou <a class="videolink hand" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle6">
+	          <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink hand" data-videoid="6r">résumé</a> (2'51) ou <a class="videolink hand" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitle7">
+	          <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink hand" data-videoid="7r">résumé</a> (4'43) ou <a class="videolink hand" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
+	        </div>
+	        <div class="videotitle" id="videotitlef">
+	          <p><a class="videolink hand" data-videoid="full"><strong>Vidéo complète chapitrée (1h20')</strong></a></p>
+	        </div>
+	      </div>
+	    </div>
+	    <div class="col-md-6 text-right">
+	      <button type="button" class="btn" id="ugbtn">Mode d'emploi <b class="caret"></b></button>
+          <div id="userguide" class="over-text text-left" style="display:none;">
+            <p><a href="#ugfr">FR</a> <a href="#ugen">EN</a> <a href="#uges">ES</a>
+            <p id="ugfr" class="bordered">Mode d’emploi du Vidéo-Livre</p>
+            <p><strong>La table des matières</strong></p>
+            <p>Passez avec la souris sur le bouton « Table des matières » et les chapitres s’affichent avec deux options : consulter le résumé ou la vidéo complète
+              <br/>Cliquez sur Résumé de l’article et un résumé de l’article du Monde lié à ce vidéo-livre s’affiche</p>
+            <p><strong>La vidéo</strong>
+              <br/>Première ligne : &gt; : lecture et loupe : tapez un mot-clé et les segments liés s’éclairent
+              <br/>Deuxième ligne : les chapitres cliquables
+              <br/>Troisième ligne : Focus sur certaines questions
+              <br/>Quatrième ligne : Eléments chronologiques
+              <br/>Si vous cliquez sur ces éléments, le bouton + vous donne accès aux mots-clés du chapitre et au partage des éléments sur les réseaux sociaux.</p>
+            <p><strong>L’index</strong>
+              <br/>Un choix de mot-clés vous est proposé, cliquez sur le mot et les segments concernés s’éclairent</p>
+            <p><strong>L’annotation</strong>
+              <br/>Cliquez sur « ajouter votre commentaire » et la vidéo s’affiche dans un annotateur avec les mêmes lignes que pour la vidéo simple. Ensuite :</p>
+            <ul>
+              <li>Sélectionnez le moment de la vidéo que vous souhaitez annoter à l’aide des bornes triangulaires noires</li>
+              <li>Donnez un titre à votre annotation</li>
+              <li>Signez là en votre nom ou pseudo</li>
+              <li>Typez vos annotations pour profiter d’une navigation à travers les polémiques, questions, références.</li>
+            </ul>
+            <p><strong>Les cartes d’annotation chronologique et thématique</strong>
+              <br/>Si vous cliquez sur « Voir la carte » vous ouvrez un espace de lecture par graphe.
+              <br/>Si vous passez la souris sur un nœud une étiquette apparaît avec une photo ou un lien vers une ressource (notice wikipedia, segment du vidéo-livre, …).
+              <br/>Pour produire à votre tour une carte d’annotation contactez l’IRI à :
+              <br/>contact@iri.centrepompidou.fr</p>
+            <p id="ugen" class="bordered">User instructions for the Video-Book</p>
+            <p><strong>Table of contents</strong>
+              <br/>Move the mouse over the « Table of contents » button to have all chapters appear. Two options, then: either reading the summary or the complete video.
+              <br/>Click on “Article’s summary” and a summary of the article from Le Monde related to this video-book will appear.</p>
+            <p><strong>Video</strong>
+              <br/>First line: &gt;: reading and magnifying glass: type in a keyword and the concerned segments will light up 
+              <br/>Second line: clickable chapters
+              <br/>Third line: Focus on certain questions
+              <br/>Fourth line: Chronological elements
+              <br/>Click on these segments and the “+” button will give you access to the concerned chapter’s keywords and you will be able to share elements on social networks.</p>
+            <p><strong>Index</strong>
+              <br/>Click within a selection of keywords and the concerned segments will light up.</p>
+            <p><strong>Annotation</strong>
+              <br/>Click on « add a commentary » and the video will appear in an annotating mode with the same lines as the simple mode. Then: 
+            <ul>
+              <li>Choose the right moment within the video that you would like to annotate. For this use the black triangular markers.</li>
+              <li>Add a title to your annotation.</li>
+              <li>Sign it with your name or alias.</li>
+              <li>Type in your annotation and enjoy browsing through polemics, questions and references.</li>
+            </ul>
+            <p><strong>Chronological and thematic annotation maps</strong>
+              <br/>Click on “See the map” to open a graphic reading space.
+              <br/>Move the mouse over a nod and a sticker appears containing a photo or a hyperlink leading to information (Wikipedia page, video-book segment, etc.).
+              <br/>You can produce your own annotation map by contacting IRI at:
+              <br/>contact@iri.centrepompidou.fr</p>
+            <p id="uges" class="bordered">Manual de instrucciones de Video-Libro</p>
+            <p><strong>Tabla de contenidos</strong>
+              <br/>Mueva el cursor sobre la "Tabla de Contenidos" y los capítulos se muestran con dos opciones de botón : véase el resumen o el video completo.
+              <br/>Haga clic en Resumen y aparecerá un resumen del artículo del Mundo relacionado con este video-libro.</p>
+            <p><strong>Vídeo</strong>
+              <br/>Primera línea : &gt; : la lectura y lupa : tipo una palabra clave y segmentos relacionados iluminan
+              <br/>Segunda línea : los capítulos que se pueden hacer clic
+              <br/>Tercera línea : Enfoque en algunos problemas
+              <br/>Cuarta línea : Elementos cronológicos
+              <br/>Si hace clic en estos elementos , el botón « + » le da acceso a las palabras claves del capítulo y al intercambio de datos en las redes sociales.</p>
+            <p><strong>El índice</strong>
+              <br/>Se ofrece una selección de palabras claves, haga clic en la palabra y los sectores pertinentes iluminan</p>
+            <p><strong>La anotación</strong>
+              <br/>Haga clic en "Añadir tu comentario " y el video se muestra en anotador con las mismas líneas que por el simple video. Entonces :</p>
+            <ul>
+              <li>Seleccione la hora del vídeo que desea anotar con terminales triangulares negras</li> 
+              <li>Introduzca un título para la anotación</li>
+              <li>Firme aquí en su nombre o apodo</li>
+              <li>Escriba sus anotaciones para disfrutar de la navegación a través de las controversias, preguntas y referencias.</li>
+            </ul>
+            <p><strong>Los mapas cronológico y temático de anotación</strong>
+              <br/>Si hace clic en "Ver el mapa" se abre un espacio para la lectura gráfica.
+              <br/>Si pasa el ratón sobre un nodo aparece una etiqueta con una foto o un enlace a un recurso (reseña Wikipedia, segmento del vídeo-libro...).
+              <br/>Si quiere producir un mapa de anotación, contacte con IRI :
+              <br/>contact@iri.centrepompidou.fr</p>
           </div>
-        </div>
-        <div class="videotitle" id="videotitle1">
-          <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a class="videolink hand" data-videoid="1r">résumé</a> (2'25) ou <a class="videolink hand" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle2">
-          <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink hand" data-videoid="2r">résumé</a> (2'57) ou <a class="videolink hand" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle3">
-          <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a class="videolink hand" data-videoid="3r">résumé</a> (3'44) ou <a class="videolink hand" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle4">
-          <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink hand" data-videoid="4r">résumé</a> (4'44) ou <a class="videolink hand" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle5">
-          <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink hand" data-videoid="5r">résumé</a> (2'37) ou <a class="videolink hand" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle6">
-          <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink hand" data-videoid="6r">résumé</a> (2'51) ou <a class="videolink hand" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitle7">
-          <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink hand" data-videoid="7r">résumé</a> (4'43) ou <a class="videolink hand" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
-        </div>
-        <div class="videotitle" id="videotitlef">
-          <p><a class="videolink hand" data-videoid="full"><strong>Vidéo complète chapitrée (1h20')</strong></a></p>
-        </div>
+	    </div>
       </div>
-    </div>
-    <div class="row divctn">
-      <div class="col-md-8" id="videocontainer">Pour commencer, cliquez sur "Vidéo chapitrée du résumé" ou "Vidéo complète chapitrée"</div>
-    </div>
+      <div class="row divctn">
+        <div class="col-md-8" id="videocontainer">Pour commencer, cliquez sur "Vidéo chapitrée du résumé" ou "Vidéo complète chapitrée"</div>
+      </div>
 	</div>
     <footer>
       <div class="container row">
@@ -303,6 +386,14 @@
         	  $("#titles").hide();
           }
       });
+      $("#ugbtn").click(function(e){
+          if($("#userguide").css("display")=="none"){
+              $("#userguide").show();
+          }
+          else{
+              $("#userguide").hide();
+          }
+      });
       // load first video with get parameter
       var first = "full";
       var iframe = getURLParameter("iframe");