web/index.html
changeset 14 960eb22c078c
parent 13 e47226cc243d
child 15 c004d0e2face
equal deleted inserted replaced
13:e47226cc243d 14:960eb22c078c
    14 	<header class="navbar navbar-inverse" role="banner">
    14 	<header class="navbar navbar-inverse" role="banner">
    15 	  <div class="container">
    15 	  <div class="container">
    16 	    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
    16 	    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
    17 	      <ul class="nav navbar-nav">
    17 	      <ul class="nav navbar-nav">
    18 	        <li>
    18 	        <li>
    19 	          <a href="#" class="videolink" data-videoid="0"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a>
    19 	          <a class="videolink" data-videoid="0"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a>
    20 	        </li>
    20 	        </li>
    21 	      </ul>
    21 	      </ul>
    22           <ul class="nav navbar-nav" style="float:right;">
    22           <ul class="nav navbar-nav" style="float:right;">
    23               <li><a href="http://www.lemonde.fr" target="_blank" title="Article de Bernard Stiegler dans Le Monde">Le Monde</a></li>
    23               <li><a href="http://www.lemonde.fr" target="_blank" title="Article de Bernard Stiegler dans Le Monde">Le Monde</a></li>
    24               <li><a href="http://www.france-universite-numerique.fr/" target="_blank" title="France Université Numérique">FUN</a></li>
    24               <li><a href="http://www.france-universite-numerique.fr/" target="_blank" title="France Université Numérique">FUN</a></li>
    31 	</header>
    31 	</header>
    32 	<div class="container">
    32 	<div class="container">
    33     <div class="row divctn">
    33     <div class="row divctn">
    34       <div class="col-md-4">
    34       <div class="col-md-4">
    35         <div class="videotitle" id="videotitle0">
    35         <div class="videotitle" id="videotitle0">
    36           <p><a href="#" class="videolink" data-videoid="0"><strong>Introduction</strong></a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
    36           <p><a class="videolink" data-videoid="0"><strong>Introduction</strong></a> <button type="button" class="btn btn-info btn-xs" data-toggle="collapse" data-target="#abstract">Voir plus</button></p>
    37           <div id="abstract" class="collapse">
    37           <div id="abstract" class="collapse">
    38             <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>
    38             <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>
    39             <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>
    39             <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>
    40             <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>
    40             <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>
    41           </div>
    41           </div>
    42         </div>
    42         </div>
    43         <div class="videotitle" id="videotitle1">
    43         <div class="videotitle" id="videotitle1">
    44           <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a href="#" class="videolink" data-videoid="1r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
    44           <p>Chapitre 1&nbsp;: L'État et le numérique<br/><a class="videolink" data-videoid="1r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_4A4E73E4-D9D6-8CAF-D0BC-C25BB3FB74D1">vidéo complète</a></p>
    45         </div>
    45         </div>
    46         <div class="videotitle" id="videotitle2">
    46         <div class="videotitle" id="videotitle2">
    47           <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a href="#" class="videolink" data-videoid="2r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
    47           <p>Chapitre 2&nbsp;: Technologies, savoirs et sociétés<br/><a class="videolink" data-videoid="2r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_4D13D984-3BC6-3B20-41B1-C6338469F14C">vidéo complète</a></p>
    48         </div>
    48         </div>
    49         <div class="videotitle" id="videotitle3">
    49         <div class="videotitle" id="videotitle3">
    50           <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a href="#" class="videolink" data-videoid="3r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
    50           <p>Chapitre 3&nbsp;: Qui pour guider une politique sur le numérique ?<br/><a class="videolink" data-videoid="3r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_69946E8D-51C2-9F9D-0712-C724E69391DC">vidéo complète</a></p>
    51         </div>
    51         </div>
    52         <div class="videotitle" id="videotitle4">
    52         <div class="videotitle" id="videotitle4">
    53           <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a href="#" class="videolink" data-videoid="4r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
    53           <p>Chapitre 4&nbsp;: La polémique, mère de tous savoirs<br/><a class="videolink" data-videoid="4r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_B7DCB161-B412-EA93-2887-C726314774EA">vidéo complète</a></p>
    54         </div>
    54         </div>
    55         <div class="videotitle" id="videotitle5">
    55         <div class="videotitle" id="videotitle5">
    56           <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a href="#" class="videolink" data-videoid="5r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
    56           <p>Chapitre 5&nbsp;: La catégorisation contributive<br/><a class="videolink" data-videoid="5r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_8CB9DCD2-FF09-33A7-3847-DA326EB5D96B">vidéo complète</a></p>
    57         </div>
    57         </div>
    58         <div class="videotitle" id="videotitle6">
    58         <div class="videotitle" id="videotitle6">
    59           <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a href="#" class="videolink" data-videoid="6r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
    59           <p>Chapitre 6&nbsp;: Sur l'industrie éditoriale numérisée<br/><a class="videolink" data-videoid="6r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_FFFFE45E-6991-959C-9347-C72C13F00EA4">vidéo complète</a></p>
    60         </div>
    60         </div>
    61         <div class="videotitle" id="videotitle7">
    61         <div class="videotitle" id="videotitle7">
    62           <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a href="#" class="videolink" data-videoid="7r">résumé</a> ou <a href="#" class="videolink" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
    62           <p>Chapitre 7&nbsp;: Propositions pour France Université Numérique<br/><a class="videolink" data-videoid="7r">résumé</a> ou <a class="videolink" data-videoid="full" data-segid="s_A40AC98F-AF31-7107-3FB4-C72EF6462E9E">vidéo complète</a></p>
    63         </div>
    63         </div>
    64         <div class="videotitle" id="videotitlef">
    64         <div class="videotitle" id="videotitlef">
    65           <p><a href="#" class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p>
    65           <p><a class="videolink" data-videoid="full">Vidéo complète chapitrée</a></p>
    66         </div>
    66         </div>
    67       </div>
    67       </div>
    68       <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>
    68       <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>
    69     </div>
    69     </div>
    70 	</div>
    70 	</div>
   116       if(update_h){
   116       if(update_h){
   117         update_history("iframe=" + n);
   117         update_history("iframe=" + n);
   118       }
   118       }
   119       
   119       
   120       active_css(n);
   120       active_css(n);
       
   121       $('html,body').scrollTop(0);
   121     }
   122     }
   122     
   123     
   123     function playVideo(n, segid, update_h){
   124     function playVideo(n, segid, update_h){
   124       // test segid
   125       // test segid
   125       if(!(typeof segid !== 'undefined' && segid !== false)){
   126       if(!(typeof segid !== 'undefined' && segid !== false)){
   219 	// + '          ,{'
   220 	// + '          ,{'
   220 	// + '              type: "Annotation"'
   221 	// + '              type: "Annotation"'
   221 	// + '          }'
   222 	// + '          }'
   222 	 + '          ,{'
   223 	 + '          ,{'
   223 	 + '              type: "Mediafragment"'
   224 	 + '              type: "Mediafragment"'
   224 	 + '          }'
   225 	 + '          }';
       
   226 	 
       
   227 	        if(n=="full"){
       
   228 	        	s += ''
       
   229      + '          ,{'
       
   230      + '              type: "Renkan",'
       
   231      + '              container: "RenkanContainer",'
       
   232      + '              data: "http://renkan.iri-research.org/renkan/rest/projects/bd79e8c3-3b12-11e3-8312-5fa5e5b09a85?callback=?"'
       
   233 	 + '          }';
       
   234 	        }
       
   235 	        s += ''
   225 	 + '      ]'
   236 	 + '      ]'
   226 	 + '  };'
   237 	 + '  };'
   227 	 + '  _myPlayer = new IriSP.Metadataplayer(_config);'
   238 	 + '  _myPlayer = new IriSP.Metadataplayer(_config);'
   228 	 + '      <\/script>'
   239 	 + '      <\/script>'
   229 	 + '    </div>'
   240 	 + '    </div>'
   230 	 + '  </div>'
   241 	 + '  </div>'
   231 	 + '  <div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
   242 	 + '  <div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
   232 	 + '</div>'
   243 	 + '</div>'
   233 	 + '<div><p class="text-right align-player"><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></p></div>';
   244 	 + '<div><p class="text-right align-player"><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></p></div>';
       
   245 	 
       
   246 	        if(n=="full"){
       
   247 	        	s += "<div id='RenkanContainer'></div>";
       
   248 	        }
   234 	      
   249 	      
   235 	        $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
   250 	        $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
   236 	      }
   251 	      }
   237 	      cur_vid = n;
   252 	      cur_vid = n;
   238       }
   253       }
   253           update_history("v=" + n);
   268           update_history("v=" + n);
   254     	}
   269     	}
   255       }
   270       }
   256       
   271       
   257       active_css(n);
   272       active_css(n);
       
   273       $('html,body').scrollTop(0);
   258     }
   274     }
   259     
   275     
   260     //Functions to manage history with parameters
   276     //Functions to manage history with parameters
   261     function getURLParameter(name) {
   277     function getURLParameter(name) {
   262         return decodeURI(
   278         return decodeURI(