--- a/web/css/ds.css Wed Oct 23 16:48:59 2013 +0200
+++ b/web/css/ds.css Thu Oct 24 12:49:17 2013 +0200
@@ -27,7 +27,7 @@
padding-left: 5px;
padding-top: 10px;
}
-.videolink{
+.hand{
cursor: pointer;
}
.active{
@@ -42,13 +42,12 @@
video {
background-color: #000;
}
-#RenkanContainer {
-float: right;
-width: 600px;
-height: 500px;
-margin-left: 10px;
+#RenkanContainer{
+ width: 930px;
+ height: 500px;
}
+
footer {
padding-bottom: 20px;
border-top: 1px solid gray;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/fullrenkan.html Thu Oct 24 12:49:17 2013 +0200
@@ -0,0 +1,228 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="fr"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="fr"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Digital Studies - Home</title>
+ <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" href="./css/ds.css">
+</head>
+<body>
+ <div id="wrapper">
+ <header class="navbar navbar-inverse" role="banner">
+ <div class="container">
+ <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+ <ul class="nav navbar-nav">
+ <li>
+ <a class="videolink hand" data-videoid="0"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav" style="float:right;">
+ <li><a href="http://www.lemonde.fr" target="_blank" title="Article de Bernard Stiegler dans Le Monde">Le Monde</a></li>
+ <li><a href="http://www.france-universite-numerique.fr/" target="_blank" title="France Université Numérique">FUN</a></li>
+ <li><a href="http://pharmakon.fr/" target="_blank">Pharmakon</a></li>
+ <li><a href="http://digital-studies.org/" target="_blank">Digital Studies</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <div class="container">
+ <div class="row" style="margin-top: -10px;">
+ <div class="col-md-1" style="padding-bottom:10px;"><a href="index.html" class="btn btn-info"><i class="glyphicon glyphicon-chevron-left"></i></a></div>
+ </div>
+ <div class="row">
+ <div class="col-md-12" 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" style="margin-top: 10px;">
+ <div id='RenkanContainer' class='col-md-12 renkan_visible'></div>
+ </div>
+ </div>
+ <footer>
+ <div class="container row">
+ <div class="footer-img col-md-6">
+ <a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="./img/logo_IRI_footer.png" alt="Logo IRI" /></a>
+ <a href="http://arsindustrialis.org/" target="_blank"><img src="./img/logoarsindustrialis.jpg" alt="Logo ars" /></a>
+ <a href="http://pharmakon.fr/" target="_blank"><img src="./img/logo_pharmakon.png" alt="Logo Pharmakon" /></a>
+ </div>
+ <div class="col-md-6">
+ <div class="text-right" id="copyright-version">©2013 <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a></div>
+ </div>
+ </div>
+ </footer>
+ </div>
+ <script type="text/javascript" src="./lib/jquery-1.9.1.js"></script>
+ <script type="text/javascript" src="./lib/jquery.history.js"></script>
+ <script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>
+ <script type="text/javascript">
+
+ var cur_vid = "";
+ var display_renkan = true;
+
+ function playVideo(n, segid, update_h){
+ // test segid
+ if(!(typeof segid !== 'undefined' && segid !== false)){
+ segid = "";
+ }
+
+ var fire_hash_changed = false;
+
+ if(cur_vid!=n){
+ if (n=="1" || n=="2" || n=="3" || n=="4" || n=="5" || n=="6" || n=="7"){
+ $("#videocontainer").html("<p>à venir, vidéo n°" + n + "</p>");
+ }
+ else{
+ var s = ''
+ + '<div id="player_wrapper">'
+ + ' <div style="float:left; width:900px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
+ + ' <div>'
+ + ' <div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
+ + ' <script type="text/javascript" src="./lib/metadataplayer/LdtPlayer-core.js"><\/script>'
+ + ' <script type="text/javascript">'
+ + 'if (typeof jQuery == "undefined") {'
+ + ' jQuery = IriSP.jQuery;'
+ + ' }'
+ + ' var metadatas = {metadata: {url: "./json/data__NUM_JSON__.json"}};'
+ + ' var metadata_key = "metadata";'
+ + ' IriSP.libFiles.defaultDir = "./js";'
+ + ' IriSP.libFiles.locations.jwPlayerSWF = "./player.swf";'
+ + ' IriSP.libFiles.locations.cssjQueryUI = "./css/jquery-ui.css";'
+ + ' IriSP.language = "fr-fr";'
+ + ' IriSP.widgetsDir = "./lib/metadataplayer";'
+ + ' var _metadata = {'
+ + ' url: metadatas[metadata_key].url,'
+ + ' format: "ldt"'
+ + ' };'
+ + ' var _config = {'
+ + ' width: "900",'
+ + ' container: "player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed",'
+ + ' css: "./lib/metadataplayer/LdtPlayer-core.css",'
+ + ' default_options: {'
+ + ' metadata: _metadata'
+ + ' },'
+ + ' widgets: ['
+ + ' {'
+ + ' type: "AutoPlayer",'
+ + ' height: "360",'
+ + ' autostart: true,'
+ + ' url_transform: function(url) { if(url.substr(url.length - 4).toLowerCase()==".flv"){ return url.replace("/ddc_player/video/","/ddc_player/flv:video/"); } return url.replace("/ddc_player/video/","/ddc_player/mp4:video/"); }'
+ + ' }'
+ + ' ,{'
+ + ' type: "Polemic",'
+ + ' annotation_type: false,'
+ + ' defaultcolor: "#585858",'
+ + ' foundcolor: "#fc00ff",'
+ + ' polemics : ['
+ + ' {'
+ + ' "name" : "OK",'
+ + ' "keywords" : [ "++" ],'
+ + ' "color" : "#1d973d"'
+ + ' },'
+ + ' {'
+ + ' "name" : "KO",'
+ + ' "keywords" : [ "--" ],'
+ + ' "color" : "#ce0a15"'
+ + ' },'
+ + ' {'
+ + ' "name" : "REF",'
+ + ' "keywords" : [ "==", "http://" ],'
+ + ' "color" : "#c5a62d" '
+ + ' },'
+ + ' {'
+ + ' "name" : "Q",'
+ + ' "keywords" : [ "?" ],'
+ + ' "color" : "#036aae"'
+ + ' }'
+ + ' ]'
+ + ' }'
+ + ' ,{'
+ + ' type: "Slider"'
+ + ' }'
+ /*+ ' ,{'
+ + ' type: "AnnotationsList",'
+ + ' container: "AnnotationsList_ext",'
+ + ' ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",'
+ + ' ajax_granularity : 300000,'
+ + ' default_thumbnail : "./css/imgs/video_sequence.png",'
+ + ' show_audio: true,'
+ + ' rtmp_streamer: "rtmp://media.iri.centrepompidou.fr/ddc_micro_record/"'
+ + ' }'*/
+ + ' ,{'
+ + ' type: "Controller"'
+ + ' }'
+ + ' ,{'
+ // + ' type: "Segments",'
+ // + ' annotation_type: ["chap","découpage"]'
+ + ' type: "MultiSegments"'
+ + ' }'
+ // + ' ,{'
+ // + ' type: "Annotation"'
+ // + ' }'
+ + ' ,{'
+ + ' type: "Mediafragment"'
+ + ' }';
+
+ if(display_renkan==true){
+ var t = getURLParameter("type");
+ if(t=="thema"){
+ t = "bd79e8c3-3b12-11e3-8312-5fa5e5b09a85";
+ }
+ else{
+ // Chrono
+ t = "696e5544-3b44-11e3-8312-5fa5e5b09a85";
+ }
+ s += ''
+ + ' ,{'
+ + ' type: "Renkan",'
+ + ' container: "RenkanContainer",'
+ + ' data: "http://renkan.iri-research.org/renkan/rest/projects/' + t + '?callback=?"'
+ + ' }';
+ }
+ s += ''
+ + ' ]'
+ + ' };'
+ + ' _myPlayer = new IriSP.Metadataplayer(_config);'
+ + ' <\/script>'
+ + ' </div>'
+ + ' </div>'
+ + '</div>';
+
+
+ $("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
+ }
+ cur_vid = n;
+ }
+ else{
+ fire_hash_changed = true;
+ }
+
+ }
+
+ //Functions to manage history with parameters
+ function getURLParameter(name) {
+ return decodeURI(
+ (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
+ );
+ }
+ function update_history(s){
+ History.replaceState(null, null, "#" + s);
+ }
+
+
+ // on load
+ $(function() {
+ playVideo("full");
+ });
+
+ </script>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a ,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ ga('create', 'UA-44960237-1', 'digital-studies.org');
+ ga('send', 'pageview');
+</script>
+</body>
+</html>
\ No newline at end of file
--- a/web/index.html Wed Oct 23 16:48:59 2013 +0200
+++ b/web/index.html Thu Oct 24 12:49:17 2013 +0200
@@ -16,7 +16,7 @@
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
- <a class="videolink" data-videoid="0"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a>
+ <a class="videolink hand" data-videoid="0"><img src="./img/logodsrose2" alt="Logo Digital Studies" /></a>
</li>
</ul>
<ul class="nav navbar-nav" style="float:right;">
@@ -24,16 +24,15 @@
<li><a href="http://www.france-universite-numerique.fr/" target="_blank" title="France Université Numérique">FUN</a></li>
<li><a href="http://pharmakon.fr/" target="_blank">Pharmakon</a></li>
<li><a href="http://digital-studies.org/" target="_blank">Digital Studies</a></li>
- <li><a href="http://renkan.iri-research.org/renkan/s/adae5482-3b12-11e3-8312-5fa5e5b09a85" target="_blank">Renkan</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="row divctn">
- <div class="col-md-4">
+ <div id="titles" class="col-md-4">
<div class="videotitle" id="videotitle0">
- <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>
+ <p><a class="videolink hand" 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>
<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>
@@ -41,28 +40,28 @@
</div>
</div>
<div class="videotitle" id="videotitle1">
- <p>Chapitre 1 : 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>
+ <p>Chapitre 1 : L'État et le numérique<br/><a class="videolink hand" data-videoid="1r">résumé</a> 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 : 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>
+ <p>Chapitre 2 : Technologies, savoirs et sociétés<br/><a class="videolink hand" data-videoid="2r">résumé</a> 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 : 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>
+ <p>Chapitre 3 : Qui pour guider une politique sur le numérique ?<br/><a class="videolink hand" data-videoid="3r">résumé</a> 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 : 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>
+ <p>Chapitre 4 : La polémique, mère de tous savoirs<br/><a class="videolink hand" data-videoid="4r">résumé</a> 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 : 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>
+ <p>Chapitre 5 : La catégorisation contributive<br/><a class="videolink hand" data-videoid="5r">résumé</a> 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 : 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>
+ <p>Chapitre 6 : Sur l'industrie éditoriale numérisée<br/><a class="videolink hand" data-videoid="6r">résumé</a> 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 : 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>
+ <p>Chapitre 7 : Propositions pour France Université Numérique<br/><a class="videolink hand" data-videoid="7r">résumé</a> 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" data-videoid="full">Vidéo complète chapitrée</a></p>
+ <p><a class="videolink hand" data-videoid="full">Vidéo complète chapitrée</a></p>
</div>
</div>
<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>
@@ -135,7 +134,7 @@
}
else{
var s = ''
- + '<div>'
+ + '<div id="player_wrapper">'
+ ' <div style="float:left; width:550px;" id="wrapper_player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be">'
+ ' <div>'
+ ' <div id="player_project_a94ee060-49e9-11e2-b4ad-00145ea4a2be_embed" class="iri_player_embed"></div>'
@@ -222,30 +221,22 @@
// + ' }'
+ ' ,{'
+ ' type: "Mediafragment"'
- + ' }';
-
- if(n=="full"){
- s += ''
- + ' ,{'
- + ' type: "Renkan",'
- + ' container: "RenkanContainer",'
- + ' data: "http://renkan.iri-research.org/renkan/rest/projects/bd79e8c3-3b12-11e3-8312-5fa5e5b09a85?callback=?"'
- + ' }';
- }
- s += ''
+ + ' }'
+ ' ]'
+ ' };'
+ ' _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=="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 mentale 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 mentale thématique</a></div>';
+ }
+ s += ''
+ ' <div style="float:left; width:400px;" id="AnnotationsList_ext"></div>'
- + '</div>'
- + '<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>';
+ + '</div>';
- if(n=="full"){
- s += "<div id='RenkanContainer'></div>";
- }
$("#videocontainer").html(s.replace(/__NUM_JSON__/g, n));
}