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 </head> |
|
63 |
|
64 <script type="text/javascript"> |
|
65 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
66 |
|
67 // configuration |
|
68 var config = { |
|
69 target:"chartTimeline", |
|
70 x:8, |
|
71 y:418, |
|
72 width:650, |
|
73 height:70, |
|
74 heightmax:70 |
|
75 } |
|
76 // Make and define the Raphael area |
|
77 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
|
78 |
|
79 function ChartTimeLine (){ |
|
80 |
|
81 //var paper = Raphael(config.x, config.y,config.width, config.height); |
|
82 |
|
83 //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
84 |
|
85 // variable |
|
86 |
|
87 var yCoef = 2; // coef for height of 1 tweet |
|
88 var frameSize = 5; // frame size |
|
89 var margin = 1; // marge between frame |
|
90 var lineSize = 650; // timeline pixel width |
|
91 var nbrframes = lineSize/frameSize; // frame numbers |
|
92 var numberOfTweet = 0; // number of tweet overide later |
|
93 var duration = 4299820 ; // timescale width |
|
94 var frameLenght = lineSize/frameSize;// frame timescale |
|
95 var timeline; |
|
96 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
|
97 |
|
98 // array |
|
99 var tweets = new Array(); |
|
100 var element = new Array(); |
|
101 var cluster = new Array(); |
|
102 var frames = new Array(frameLenght); |
|
103 var slices = new Array(); |
|
104 |
|
105 |
|
106 // Classes ======================================================================= |
|
107 var Frames = function(){ |
|
108 |
|
109 var Myclusters; |
|
110 var x; |
|
111 var y; |
|
112 var width; |
|
113 var height; |
|
114 }; |
|
115 Frames = function(json){ |
|
116 // make my clusters |
|
117 // ou Frame vide |
|
118 }; |
|
119 Frames.prototype.draw = function(){ |
|
120 } |
|
121 Frames.prototype.zoom = function(){ |
|
122 } |
|
123 Frames.prototype.inside = function(){ |
|
124 } |
|
125 var Clusters = function(){ |
|
126 var Object; |
|
127 var yDist; |
|
128 var x; |
|
129 var y; |
|
130 var width; |
|
131 var height; |
|
132 }; |
|
133 Clusters = function(json){ |
|
134 // make my object |
|
135 }; |
|
136 var Tweet = function(){ |
|
137 } |
|
138 // Classes ======================================================================= |
|
139 |
|
140 // trace function |
|
141 var traceNum = 0; |
|
142 function trace(msg,value){ |
|
143 traceNum += 1; |
|
144 __IriSP.jQuery("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output"); |
|
145 } |
|
146 |
|
147 // Refactoring (parametere) ************************************************************ |
|
148 // color translastion |
|
149 function colorTranslation(value){ |
|
150 if(value == "Q"){ |
|
151 return 2; |
|
152 }else if(value =="REF"){ |
|
153 return 4; |
|
154 }else if(value =="OK"){ |
|
155 return 1; |
|
156 }else if(value =="KO"){ |
|
157 return 3; |
|
158 }else if(value ==""){ |
|
159 return 5; |
|
160 } |
|
161 } |
|
162 |
|
163 |
|
164 // Refactoring (parametere) ************************************************************ |
|
165 // load tweets send in parameters |
|
166 __IriSP.jQuery.ajax({ |
|
167 dataType: "jsonp", |
|
168 url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02", |
|
169 success : function(json){ |
|
170 trace("load",""); |
|
171 __IriSP.jQuery.each(json.annotations, function(i,item) { |
|
172 |
|
173 var MyTime = Math.floor(item.begin/duration*lineSize); |
|
174 var Myframe = Math.floor(MyTime/lineSize*frameLenght); |
|
175 |
|
176 if (item.content['polemics'] != undefined) { |
|
177 if (item.content['polemics'][0] != null) { |
|
178 |
|
179 for(var j=0; j<item.content['polemics'].length; j++){ |
|
180 |
|
181 tweets[numberOfTweet] = { |
|
182 id:i, |
|
183 qualification:colorTranslation(item.content['polemics'][j]), |
|
184 yIndicator:MyTime, |
|
185 yframe:Myframe, |
|
186 title:item.content['title'], |
|
187 timeframe:item.begin |
|
188 } |
|
189 numberOfTweet+=1; |
|
190 } |
|
191 }else{ |
|
192 //trace("k = ",i); |
|
193 tweets[numberOfTweet] = { |
|
194 id:i, |
|
195 qualification:colorTranslation(""), |
|
196 yIndicator:MyTime, |
|
197 yframe:Myframe, |
|
198 title:item.content['title'], |
|
199 timeframe:item.begin |
|
200 } |
|
201 numberOfTweet+=1; |
|
202 } |
|
203 |
|
204 } else { |
|
205 //trace("tweet qualification = ","null"); |
|
206 } |
|
207 }); |
|
208 trace("======= ",numberOfTweet); |
|
209 DrawTweets (); |
|
210 |
|
211 } |
|
212 }); |
|
213 |
|
214 |
|
215 // tweet Drawing (in raphael) |
|
216 function DrawTweets (){ |
|
217 // GROUPES TWEET ============================================ |
|
218 // Count nbr of cluster and tweet in a frame an save int in "frames" |
|
219 numberOfTweet = tweets.length; |
|
220 for(var i=0; i<nbrframes; i++) { |
|
221 for(var j=0; j<numberOfTweet; j++) { |
|
222 |
|
223 if (i==tweets[j].yframe){ |
|
224 |
|
225 var k = tweets[j].qualification; |
|
226 |
|
227 // make array for frame cluster |
|
228 if(frames[i]==undefined){ |
|
229 frames[i] = {id:i, |
|
230 qualifVol:new Array(), |
|
231 mytweetsID:new Array() |
|
232 }; |
|
233 } |
|
234 // add my tweet to frame |
|
235 frames[i].mytweetsID.push(tweets[j]); |
|
236 |
|
237 // count opinion by frame |
|
238 if( frames[i].qualifVol[k] == undefined){ |
|
239 frames[i].qualifVol[k] = 1; |
|
240 }else{ |
|
241 frames[i].qualifVol[k] += 1; |
|
242 } |
|
243 |
|
244 } |
|
245 } |
|
246 } |
|
247 |
|
248 // GROUPES TWEET ============================================ |
|
249 // max of tweet by Frame |
|
250 var max = 0; |
|
251 for(var i=0; i<nbrframes; i++) { |
|
252 var moy = 0; |
|
253 for (var j=0; j<6; j++){ |
|
254 if (frames[i]!=undefined){ |
|
255 if (frames[i].qualifVol[j]!=undefined){ |
|
256 moy += frames[i].qualifVol[j] |
|
257 } |
|
258 } |
|
259 } |
|
260 //trace("frame "+i,moy); |
|
261 if (moy>max){max=moy;} |
|
262 } |
|
263 |
|
264 var tweetDrawed = new Array(); |
|
265 var TweetHeight = 5; |
|
266 // DRAW TWEETS ============================================ |
|
267 for(var i=0; i<nbrframes;i++) { |
|
268 var addEheight = 5; |
|
269 if (frames[i]!=undefined){ |
|
270 trace (i+" k=",frames[i].mytweetsID.length); |
|
271 // by type |
|
272 for (var j=6; j>-1; j--){ |
|
273 if (frames[i].qualifVol[j]!=undefined){ |
|
274 // show tweet by type |
|
275 for (var k=0; k<frames[i].mytweetsID.length; k++){ |
|
276 if (frames[i].mytweetsID[k].qualification==j){ |
|
277 e = paper.rect( i*frameSize, // x |
|
278 config.heightmax-addEheight, // y |
|
279 frameSize-margin, // width |
|
280 TweetHeight // height |
|
281 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
|
282 addEheight +=TweetHeight; |
|
283 e.time= frames[i].mytweetsID[k].timeframe; |
|
284 e.title= frames[i].mytweetsID[k].title; |
|
285 e.mouseover(function () { |
|
286 //this.attr({stroke:"#fff","stroke-width":5}); |
|
287 //this.toFront(); |
|
288 }).mouseout(function () { |
|
289 //this.attr({stroke:"#00","stroke-width":0.1}); |
|
290 }).mousedown(function () { |
|
291 __IriSP.MyApiPlayer.seek(this.time/1000) |
|
292 }); |
|
293 __IriSP.jQuery(e.node).attr('id', 't'+k+''); |
|
294 __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
|
295 __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
|
296 var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight} |
|
297 addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition); |
|
298 //frames[i].mytweetsID.pop(); |
|
299 } |
|
300 } |
|
301 } |
|
302 } |
|
303 } |
|
304 PaperSlider.toFront(); |
|
305 } |
|
306 |
|
307 } |
|
308 // |
|
309 PaperSlider.toFront(); |
|
310 } |
|
311 |
|
312 |
|
313 $(document).mousemove(function(e){ |
|
314 if (over){ |
|
315 __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160); |
|
316 __IriSP.jQuery("#tipcolor").css("background-color", tipColor) |
|
317 __IriSP.jQuery("#tiptext").text(tipText); |
|
318 __IriSP.jQuery("#tip").show(); |
|
319 }else{ |
|
320 __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000); |
|
321 //tweetSelection.attr({x:-100,y:-100}); |
|
322 } |
|
323 }); |
|
324 |
|
325 var over = false; |
|
326 var tipText = ""; |
|
327 var tipColor = "#efefef"; |
|
328 var tweetSelection; |
|
329 var PaperSlider; |
|
330 |
|
331 // AddTip ****************************************************************************** |
|
332 function addTip(node, txt,color,tempPosition){ |
|
333 __IriSP.jQuery(node).mouseover(function(){ |
|
334 tipText = txt; |
|
335 //tip.hide();//fadeIn(0); |
|
336 tipColor = color; |
|
337 over = true; |
|
338 //tweetSelection.attr(tempPosition); |
|
339 //tweetSelection.toFront(); |
|
340 }).mouseout(function(){ |
|
341 //tip.show()//tip.fadeOut(0); |
|
342 over = false; |
|
343 }); |
|
344 |
|
345 |
|
346 } |
|
347 |
|
348 $(document).ready(function() { |
|
349 var tip = __IriSP.jQuery("#tip").hide(); |
|
350 //ChartTimeLine(); |
|
351 |
|
352 }); |
|
353 </script> |
|
354 |
|
355 <body> |
|
356 |
|
357 <!-- SCRIPT RAPHAEL --> |
|
358 |
|
359 |
|
360 |
|
361 <!-- tooltip --> |
|
362 <div id="tip"> |
|
363 <div id="tipcolor" style="height:10px;width:10px"></div> |
|
364 <div id="tiptext"></div> |
|
365 </div> |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 <div class="container"> |
|
373 |
|
374 |
|
375 |
|
376 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
377 <ul class="menu"> |
|
378 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
379 <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> |
|
380 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
381 |
|
382 </ul> |
|
383 |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 <div class="tweetExplain" > |
|
390 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
391 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. |
|
392 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
393 l'auditoire durant la conférence. |
|
394 <br/><br/> |
|
395 |
|
396 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
397 <table> |
|
398 <tr> |
|
399 <td> |
|
400 <a |
|
401 |
|
402 id="positive" |
|
403 title="accord" |
|
404 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
405 </tr> |
|
406 <tr> |
|
407 <td> |
|
408 |
|
409 <a |
|
410 |
|
411 id="negative" |
|
412 title="désaccord" |
|
413 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
414 </tr> |
|
415 <tr> |
|
416 <td> |
|
417 <a |
|
418 |
|
419 id="reference" |
|
420 title="reference" |
|
421 class="tweetButton">==</a></td><td> à un tweet de référence</td> |
|
422 </tr> |
|
423 <tr> |
|
424 <td> |
|
425 <a |
|
426 |
|
427 id="question" |
|
428 title="question" |
|
429 class="tweetButton"> ??</a></td><td> à une question</td> |
|
430 </tr> |
|
431 </table> |
|
432 |
|
433 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. |
|
434 |
|
435 <br/><br/> |
|
436 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 |
|
437 <br/> |
|
438 <br/>Merci a RSLN pour cette expérimentation ! |
|
439 </div> |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 <div class="videoLive" > |
|
446 <div class="videoLivePlayer"> |
|
447 |
|
448 <div id="chartTimeline"> </div> |
|
449 <script type="text/javascript"> |
|
450 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
|
451 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
452 paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
453 PaperSlider = paper.rect(0,20,1,50).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
454 // decalage |
|
455 tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
456 </script> |
|
457 |
|
458 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
459 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
460 |
|
461 <script type="text/javascript"> |
|
462 var configMP = { |
|
463 /*metadata:{ |
|
464 format:'cinelab', |
|
465 src:'metadata.json', |
|
466 load:'json'},*/ |
|
467 metadata:{ |
|
468 format:'cinelab', |
|
469 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
470 load:'jsonp'}, |
|
471 gui:{ |
|
472 width:650, |
|
473 height:480, |
|
474 mode:'video', |
|
475 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
476 debug:false, |
|
477 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
478 |
|
479 player:{ |
|
480 type:'jwplayer', |
|
481 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
482 }; |
|
483 __IriSP.init(configMP); |
|
484 </script> |
|
485 |
|
486 </div> |
|
487 |
|
488 </div> |
|
489 |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 <div class="footer"> |
|
495 <hr> |
|
496 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
497 IRI </a> |
|
498 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
499 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
500 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
501 </div> |
|
502 |
|
503 </div> |
|
504 |
|
505 |
|
506 |
|
507 |
|
508 |
|
509 </body> |
|
510 </html> |
|