|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
5 <title>RSLN - Live Video and Annotation</title> |
|
6 |
|
7 |
|
8 <!-- JAVASCRIPT --> |
|
9 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
10 <script type="text/javascript" src="res/raphael/raphael-min.js"></script> |
|
11 |
|
12 <!-- Framework CSS --> |
|
13 <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection"> |
|
14 <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print"> |
|
15 <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> |
|
16 <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection"> |
|
17 |
|
18 |
|
19 |
|
20 <!-- FONT --> |
|
21 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'> |
|
22 <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'> |
|
23 <link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'> |
|
24 <style type="text/css"> |
|
25 .tweetButton{float:left;margin-right:5px;} |
|
26 .videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;} |
|
27 .videoLive{width:650px;height:640px;background:#fff;float:right;margin-top:20px;padding:5px;} |
|
28 |
|
29 .tweetExplain{background-image:url(images/tweetExplainBgd.gif);width:250px;height:640px;padding:10px;position:absolute; margin-top:70px;} |
|
30 .footer{margin-top:740px;width:960px;height:20px;position:absolute;text-align:center;} |
|
31 .tooltip{ |
|
32 z-index: 10000000000; |
|
33 } |
|
34 #tip{ |
|
35 position : absolute; |
|
36 padding : 3px; |
|
37 z-index: 10000000000; |
|
38 max-width: 200px; |
|
39 } |
|
40 #tip { |
|
41 display: none; |
|
42 background: transparent url("images/white_arrow_long.png"); |
|
43 font-size: 12px; |
|
44 height: 125px; |
|
45 width: 180px; |
|
46 padding: 10px; |
|
47 padding-left: 15px; |
|
48 padding-top: 15px; |
|
49 padding-right: 15px; |
|
50 color: black; |
|
51 z-index: 10000000000; |
|
52 font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
|
53 overflow:hidden; |
|
54 } |
|
55 #chartTimeline{ |
|
56 padding-top: 410px; |
|
57 z-index: 100000; |
|
58 position : absolute; |
|
59 } |
|
60 |
|
61 </style> |
|
62 <script type="text/javascript"> |
|
63 |
|
64 var _gaq = _gaq || []; |
|
65 _gaq.push(['_setAccount', 'UA-9955524-3']); |
|
66 _gaq.push(['_setDomainName', '.iri.centrepompidou.fr']); |
|
67 _gaq.push(['_trackPageview']); |
|
68 |
|
69 (function() { |
|
70 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
|
71 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
|
72 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
|
73 })(); |
|
74 |
|
75 </script> |
|
76 </head> |
|
77 |
|
78 <script type="text/javascript"> |
|
79 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
80 |
|
81 // configuration |
|
82 var config = { |
|
83 target:"chartTimeline", |
|
84 x:8, |
|
85 y:418, |
|
86 width:650, |
|
87 height:70, |
|
88 heightmax:70 |
|
89 } |
|
90 // Make and define the Raphael area |
|
91 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
92 |
|
93 function ChartTimeLine (){ |
|
94 |
|
95 //var paper = Raphael(config.x, config.y,config.width, config.height); |
|
96 |
|
97 //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
98 |
|
99 // variable |
|
100 |
|
101 var yCoef = 2; // coef for height of 1 tweet |
|
102 var frameSize = 5; // frame size |
|
103 var margin = 1; // marge between frame |
|
104 var lineSize = 650; // timeline pixel width |
|
105 var nbrframes = lineSize/frameSize; // frame numbers |
|
106 var numberOfTweet = 0; // number of tweet overide later |
|
107 var duration = 4299820 ; // timescale width |
|
108 var frameLenght = lineSize/frameSize;// frame timescale |
|
109 var timeline; |
|
110 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
111 |
|
112 // array |
|
113 var tweets = new Array(); |
|
114 var element = new Array(); |
|
115 var cluster = new Array(); |
|
116 var frames = new Array(frameLenght); |
|
117 var slices = new Array(); |
|
118 |
|
119 |
|
120 // Classes ======================================================================= |
|
121 var Frames = function(){ |
|
122 |
|
123 var Myclusters; |
|
124 var x; |
|
125 var y; |
|
126 var width; |
|
127 var height; |
|
128 }; |
|
129 Frames = function(json){ |
|
130 // make my clusters |
|
131 // ou Frame vide |
|
132 }; |
|
133 Frames.prototype.draw = function(){ |
|
134 } |
|
135 Frames.prototype.zoom = function(){ |
|
136 } |
|
137 Frames.prototype.inside = function(){ |
|
138 } |
|
139 var Clusters = function(){ |
|
140 var Object; |
|
141 var yDist; |
|
142 var x; |
|
143 var y; |
|
144 var width; |
|
145 var height; |
|
146 }; |
|
147 Clusters = function(json){ |
|
148 // make my object |
|
149 }; |
|
150 var Tweet = function(){ |
|
151 } |
|
152 // Classes ======================================================================= |
|
153 |
|
154 // trace function |
|
155 var traceNum = 0; |
|
156 function trace(msg,value){ |
|
157 traceNum += 1; |
|
158 __IriSP.jQuery("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
159 } |
|
160 |
|
161 // Refactoring (parametere) ************************************************************ |
|
162 // color translastion |
|
163 function colorTranslation(value){ |
|
164 if(value == "Q"){ |
|
165 return 2; |
|
166 }else if(value =="REF"){ |
|
167 return 4; |
|
168 }else if(value =="OK"){ |
|
169 return 1; |
|
170 }else if(value =="KO"){ |
|
171 return 3; |
|
172 }else if(value ==""){ |
|
173 return 5; |
|
174 } |
|
175 } |
|
176 |
|
177 |
|
178 // Refactoring (parametere) ************************************************************ |
|
179 // load tweets send in parameters |
|
180 __IriSP.jQuery.ajax({ |
|
181 dataType: "jsonp", |
|
182 url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02", |
|
183 success : function(json){ |
|
184 trace("load",""); |
|
185 __IriSP.jQuery.each(json.annotations, function(i,item) { |
|
186 |
|
187 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
188 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
189 |
|
190 if (item.content['polemics'] != undefined) { |
|
191 if (item.content['polemics'][0] != null) { |
|
192 |
|
193 for(var j=0; j<item.content['polemics'].length; j++){ |
|
194 |
|
195 tweets[numberOfTweet] = { |
|
196 id:i, |
|
197 qualification:colorTranslation(item.content['polemics'][j]), |
|
198 yIndicator:MyTime, |
|
199 yframe:Myframe, |
|
200 title:item.content['title'], |
|
201 timeframe:item.begin |
|
202 } |
|
203 numberOfTweet+=1; |
|
204 } |
|
205 }else{ |
|
206 //trace("k = ",i); |
|
207 tweets[numberOfTweet] = { |
|
208 id:i, |
|
209 qualification:colorTranslation(""), |
|
210 yIndicator:MyTime, |
|
211 yframe:Myframe, |
|
212 title:item.content['title'], |
|
213 timeframe:item.begin |
|
214 } |
|
215 numberOfTweet+=1; |
|
216 } |
|
217 |
|
218 } else { |
|
219 //trace("tweet qualification = ","null"); |
|
220 } |
|
221 }); |
|
222 trace("======= ",numberOfTweet); |
|
223 DrawTweets (); |
|
224 |
|
225 } |
|
226 }); |
|
227 |
|
228 |
|
229 // tweet Drawing (in raphael) |
|
230 function DrawTweets (){ |
|
231 // GROUPES TWEET ============================================ |
|
232 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
233 numberOfTweet = tweets.length; |
|
234 for(var i=0; i<nbrframes; i++) { |
|
235 for(var j=0; j<numberOfTweet; j++) { |
|
236 |
|
237 if (i==tweets[j].yframe){ |
|
238 |
|
239 var k = tweets[j].qualification; |
|
240 |
|
241 // make array for frame cluster |
|
242 if(frames[i]==undefined){ |
|
243 frames[i] = {id:i, |
|
244 qualifVol:new Array(), |
|
245 mytweetsID:new Array() |
|
246 }; |
|
247 } |
|
248 // add my tweet to frame |
|
249 frames[i].mytweetsID.push(tweets[j]); |
|
250 |
|
251 // count opinion by frame |
|
252 if( frames[i].qualifVol[k] == undefined){ |
|
253 frames[i].qualifVol[k] = 1; |
|
254 }else{ |
|
255 frames[i].qualifVol[k] += 1; |
|
256 } |
|
257 |
|
258 } |
|
259 } |
|
260 } |
|
261 |
|
262 // GROUPES TWEET ============================================ |
|
263 // max of tweet by Frame |
|
264 var max = 0; |
|
265 for(var i=0; i<nbrframes; i++) { |
|
266 var moy = 0; |
|
267 for (var j=0; j<6; j++){ |
|
268 if (frames[i]!=undefined){ |
|
269 if (frames[i].qualifVol[j]!=undefined){ |
|
270 moy += frames[i].qualifVol[j] |
|
271 } |
|
272 } |
|
273 } |
|
274 //trace("frame "+i,moy); |
|
275 if (moy>max){max=moy;} |
|
276 } |
|
277 |
|
278 var tweetDrawed = new Array(); |
|
279 var TweetHeight = 5; |
|
280 // DRAW TWEETS ============================================ |
|
281 for(var i=0; i<nbrframes;i++) { |
|
282 var addEheight = 5; |
|
283 if (frames[i]!=undefined){ |
|
284 trace (i+" k=",frames[i].mytweetsID.length); |
|
285 // by type |
|
286 for (var j=6; j>-1; j--){ |
|
287 if (frames[i].qualifVol[j]!=undefined){ |
|
288 // show tweet by type |
|
289 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
290 if (frames[i].mytweetsID[k].qualification==j){ |
|
291 e = paper.rect( i*frameSize, // x |
|
292 config.heightmax-addEheight, // y |
|
293 frameSize-margin, // width |
|
294 TweetHeight // height |
|
295 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
296 addEheight +=TweetHeight; |
|
297 e.time= frames[i].mytweetsID[k].timeframe; |
|
298 e.title= frames[i].mytweetsID[k].title; |
|
299 e.mouseover(function () { |
|
300 //this.attr({stroke:"#fff","stroke-width":5}); |
|
301 //this.toFront(); |
|
302 }).mouseout(function () { |
|
303 //this.attr({stroke:"#00","stroke-width":0.1}); |
|
304 }).mousedown(function () { |
|
305 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
306 }); |
|
307 __IriSP.jQuery(e.node).attr('id', 't'+k+''); |
|
308 __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
309 __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
310 var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight} |
|
311 addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition); |
|
312 //frames[i].mytweetsID.pop(); |
|
313 } |
|
314 } |
|
315 } |
|
316 } |
|
317 } |
|
318 PaperSlider.toFront(); |
|
319 } |
|
320 |
|
321 } |
|
322 // |
|
323 PaperSlider.toFront(); |
|
324 } |
|
325 |
|
326 |
|
327 $(document).mousemove(function(e){ |
|
328 if (over){ |
|
329 __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160); |
|
330 __IriSP.jQuery("#tipcolor").css("background-color", tipColor) |
|
331 __IriSP.jQuery("#tiptext").text(tipText); |
|
332 __IriSP.jQuery("#tip").show(); |
|
333 }else{ |
|
334 __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000); |
|
335 //tweetSelection.attr({x:-100,y:-100}); |
|
336 } |
|
337 }); |
|
338 |
|
339 var over = false; |
|
340 var tipText = ""; |
|
341 var tipColor = "#efefef"; |
|
342 var tweetSelection; |
|
343 var PaperSlider; |
|
344 |
|
345 // AddTip ****************************************************************************** |
|
346 function addTip(node, txt,color,tempPosition){ |
|
347 __IriSP.jQuery(node).mouseover(function(){ |
|
348 tipText = txt; |
|
349 //tip.hide();//fadeIn(0); |
|
350 tipColor = color; |
|
351 over = true; |
|
352 //tweetSelection.attr(tempPosition); |
|
353 //tweetSelection.toFront(); |
|
354 }).mouseout(function(){ |
|
355 //tip.show()//tip.fadeOut(0); |
|
356 over = false; |
|
357 }); |
|
358 |
|
359 |
|
360 } |
|
361 |
|
362 $(document).ready(function() { |
|
363 var tip = __IriSP.jQuery("#tip").hide(); |
|
364 //ChartTimeLine(); |
|
365 |
|
366 }); |
|
367 </script> |
|
368 |
|
369 <body> |
|
370 |
|
371 <!-- SCRIPT RAPHAEL --> |
|
372 |
|
373 |
|
374 |
|
375 <!-- tooltip --> |
|
376 <div id="tip"> |
|
377 <div id="tipcolor" style="height:10px;width:10px"></div> |
|
378 <div id="tiptext"></div> |
|
379 </div> |
|
380 |
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 <div class="container"> |
|
387 |
|
388 |
|
389 |
|
390 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
391 <ul class="menu"> |
|
392 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
393 <li class="menuUnderline" ><a href="http://www.rslnmag.fr/blog/2011/1/17/clay-shirky_-personne-n-est-titulaire-du-code-source-de-la-democratie_/" class="menuLink" target="_blank"> Programme</a></li> |
|
394 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
395 |
|
396 </ul> |
|
397 |
|
398 |
|
399 |
|
400 |
|
401 |
|
402 |
|
403 <div class="tweetExplain" > |
|
404 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
405 l’Institut de recherche et d’innovation (Iri) vous a proposer une expérimentation et une démonstration d’un dispositif d’annotation polémique basé sur twitter. |
|
406 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
407 l'auditoire durant la conférence. |
|
408 <br/><br/> |
|
409 |
|
410 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
411 <table> |
|
412 <tr> |
|
413 <td> |
|
414 <a |
|
415 |
|
416 id="positive" |
|
417 title="accord" |
|
418 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
419 </tr> |
|
420 <tr> |
|
421 <td> |
|
422 |
|
423 <a |
|
424 |
|
425 id="negative" |
|
426 title="désaccord" |
|
427 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
428 </tr> |
|
429 <tr> |
|
430 <td> |
|
431 <a |
|
432 |
|
433 id="reference" |
|
434 title="reference" |
|
435 class="tweetButton">==</a></td><td> à un tweet de référence</td> |
|
436 </tr> |
|
437 <tr> |
|
438 <td> |
|
439 <a |
|
440 |
|
441 id="question" |
|
442 title="question" |
|
443 class="tweetButton"> ??</a></td><td> à une question</td> |
|
444 </tr> |
|
445 </table> |
|
446 |
|
447 Suite a cette phase d’annotation, vous trouverez à droite de ce texte <b>la version alpha</b> de l'interface de navigation et de représentation de la polémique durant la conférence. |
|
448 |
|
449 <br/><br/> |
|
450 Ce dispositif, outre qu’il approfondit la dimension critique de la discussion avec la salle et les auditeurs présents ou distants, permet ainsi également de pérenniser et de valoriser les commentaires produits en les rendant accessibles en temps différé lors de tout visionnage ultérieur de la vidéo |
|
451 <br/> |
|
452 <br/>Merci a RSLN pour cette expérimentation ! |
|
453 </div> |
|
454 |
|
455 |
|
456 |
|
457 |
|
458 |
|
459 <div class="videoLive" > |
|
460 <div class="videoLivePlayer"> |
|
461 |
|
462 <div id="chartTimeline"> </div> |
|
463 <script type="text/javascript"> |
|
464 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
|
465 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
466 paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
467 PaperSlider = paper.rect(0,20,1,50).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
468 // decalage |
|
469 tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
470 </script> |
|
471 |
|
472 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
473 <script type="text/javascript"> |
|
474 $.extend(__IriSP.lib,{jQueryToolTip:"res/metadataplayer/res/js/jquery.tools.min.js"}); |
|
475 </script> |
|
476 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
477 |
|
478 <script type="text/javascript"> |
|
479 var configMP = { |
|
480 /*metadata:{ |
|
481 format:'cinelab', |
|
482 src:'metadata.json', |
|
483 load:'json'},*/ |
|
484 metadata:{ |
|
485 format:'cinelab', |
|
486 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
487 load:'jsonp'}, |
|
488 gui:{ |
|
489 width:650, |
|
490 height:480, |
|
491 mode:'video', |
|
492 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
493 debug:false, |
|
494 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
495 |
|
496 player:{ |
|
497 type:'jwplayer', |
|
498 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
499 }; |
|
500 __IriSP.init(configMP); |
|
501 </script> |
|
502 |
|
503 </div> |
|
504 |
|
505 </div> |
|
506 |
|
507 |
|
508 |
|
509 |
|
510 |
|
511 <div class="footer"> |
|
512 <hr> |
|
513 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
514 IRI </a> |
|
515 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
516 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
517 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
518 </div> |
|
519 |
|
520 </div> |
|
521 |
|
522 |
|
523 |
|
524 |
|
525 |
|
526 </body> |
|
527 </html> |