ds_mooc_demo: comparison web/index.html

equal deleted inserted replaced

-:7644a8917c49
+:102c8e608366
 	            <p>Avec l’apparition du numérique, c’est la nature même des savoirs sous toutes leurs formes qui a changé tandis qu’avec le web, l’écriture réticulaire devenait accessible aux publics les plus divers. Ceux-ci ont redéfini les conditions de la parité. De ce fait l’université, dont les disciplines sont elles-mêmes fondées sur la parité (dont on peut dire que l’inventeur est Thalès), est entrée dans un nouvel âge. C’est cette transformation majeure, massive et à bien des égards stupéfiante qui requiert le développement des <em>digital studies</em>.</p>
 	            <p>L’enjeu que constitue le développement des enseignements numériques vient rationnellement <em>après</em> celui de la recherche et des études numériques. S’il s’agit bien d’impulser une dynamique qui repense les rapports des savoirs à leurs supports (dont les MOOCs), il faut que les universités et les institutions académiques, par la recherche, redéfinisse leur rôle dans ce nouveau contexte.</p>
 	            <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>
 	        <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 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>
 <br/><a href="mailto:contact@iri.centrepompidou.fr">contact@iri.centrepompidou.fr</a></p>
 </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 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>
 <div class="container row">
 <div class="footer-img col-md-6">
 	 + '  _myPlayer = new IriSP.Metadataplayer(_config);'
 	 + '      <\/script>'
 	 + '    </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>';
 	        $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
 $("#titles").hide();
 $("#userguide").hide();
 });
 var mouseup_handler = function(selector, e) {
 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();
 }
 }
 var mouseup_titles = mouseup_handler.curry("#titles");
 $("#ugbtn").click(function(e){
 $("#userguide").toggle();
 });
 $(document).mouseup(mouseup_userguide);
-// load first video with get parameter
+// load : display tables de matières and text
-var first = "full";
+$("#titles").slideDown();
-var iframe = getURLParameter("iframe");
-if(iframe=="null"){
-var v = getURLParameter("v");
-if(v=="null"){
-playVideo(first, "");
-}
-else{
-playVideo(v, "", false);
-}
-}
-else{
-displayIframe(iframe, false)
-	  }
 });
 </script>
 <script>
 	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

changeset 44	102c8e608366
parent 43	7644a8917c49
child 45	a1c981ff32ac