web/index.html
changeset 44 102c8e608366
parent 43 7644a8917c49
child 45 a1c981ff32ac
--- a/web/index.html	Mon Oct 28 10:42:40 2013 +0100
+++ b/web/index.html	Mon Oct 28 12:11:52 2013 +0100
@@ -41,6 +41,9 @@
 	            <p>La technologie du vidéolivre, qui est un support nouveau pour un réseau de lecteurs constituant une communauté plurielle d’interprétations, est un exemple des nouveaux dispositifs de débats publics et de controverses scientifiques rendus possibles par le numérique et auxquels il est fondamental d’initier et d’associer le plus tôt possible les étudiants à travers de nouvelles formes, contributives, d’éditorialisation des enseignements.</p>
 	          </div>
 	        </div>
+            <div class="videotitle" id="videotitlef">
+              <p><a class="videolink hand" data-videoid="full">Vidéo complète chapitrée</a> (1h20')</p>
+            </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>
@@ -62,9 +65,6 @@
 	        <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">
@@ -103,7 +103,16 @@
 	    </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 class="col-md-12" id="videocontainer">
+          <div class="row">
+            <div class="col-md-6"></div>
+            <div class="col-md-6">
+              <p>L’éditorialisation de l’enregistrement vidéographique réalisée ici en complément de l’article publié par le journal <em>Le Monde</em> sur les enjeux du numérique pour l’université est un prototype de ce que l’Institut de recherche et d’innovation appelle un vidéolivre.</p>
+              <p>Chapitré, le vidéolivre est navigable par diverses voies : la table des matières donne accès à des résumés de chaque chapitre qui permettent de se faire rapidement une idée du propos général. Mais la représentation graphique et donc spatiale de son contenu temporel sous le logiciel <em>Lignes de temps</em> permet aussi d’en avoir une vision d’ensemble, et d’y naviguer directement à travers les mots clés qui se trouvent au-dessous de l’écran.</p>
+              <p>Une annotation est possible par toute personne qui consulte la vidéo. L’IRI travaille actuellement au développement de technologies de catégorisation contributive, évoquées dans la vidéo, qui permettront bientôt de mettre en place des dispositifs d’interprétation collective et de valorisation des contributions à travers ce que nous appelons des technologies de transindividuation.</p>
+            </div>
+          </div>
+        </div>
       </div>
 	</div>
     <footer>
@@ -276,10 +285,10 @@
 	 + '    </div>'
 	 + '  </div>'
      + '  <div><a style="margin-top: 10px;" class="btn btn-info" href="#" onclick="displayIframe(\'__NUM_JSON__\');return false;"><i class="glyphicon glyphicon-comment"></i> Ajouter votre commentaire sur cette vidéo</a></div>';
-     if(n=="0" || n=="full"){
+     /*if(n=="0" || n=="full"){
          s += '  <div><a style="margin-top: 10px;" class="btn btn-info" href="fullrenkan.html?type=chrono"><i class="glyphicon glyphicon-asterisk"></i> Voir la carte d\'annotation chronologique</a></div>'; 
          s += '  <div><a style="margin-top: 10px;" class="btn btn-info" href="fullrenkan.html?type=thema"><i class="glyphicon glyphicon-asterisk"></i> Voir la carte d\'annotation thématique</a></div>'; 
-     }
+     }*/
          s += ''
 	 + '  <div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
 	 + '</div>';
@@ -335,9 +344,10 @@
       });
 
       var mouseup_handler = function(selector, e) {
-          var container = $(selector);          
+          var container = $(selector);
           if (!container.is(e.target) // if the target of the click isn't the container...
-              && container.has(e.target).length === 0) {// ... nor a descendant of the container
+              && (container.has(e.target).length === 0) // ... nor a descendant of the container
+        	  && !((e.target.nodeName.toLowerCase() == "button") && $(e.target.parentNode).is(container.parent())) ){ // ... nor the button enabling toggle
               container.hide();
           }
       }
@@ -355,21 +365,9 @@
       });
       $(document).mouseup(mouseup_userguide);
 
-      // load first video with get parameter
-      var first = "full";
-      var iframe = getURLParameter("iframe");
-      if(iframe=="null"){
-        var v = getURLParameter("v");
-        if(v=="null"){
-          playVideo(first, "");
-        }
-        else{
-          playVideo(v, "", false);
-        }
-      }
-      else{
-        displayIframe(iframe, false)
-	  }
+      // load : display tables de matières and text
+      $("#titles").slideDown();
+      
     });
     
   </script>