1 <?php |
|
2 |
|
3 /** |
|
4 * include some common code (like we did in the 90s) |
|
5 * People still do this? ;) |
|
6 */ |
|
7 include_once './common.php'; |
|
8 |
|
9 /** |
|
10 * Do we already have a valid Access Token or need to go get one? |
|
11 */ |
|
12 if (!isset($_SESSION['TWITTER_ACCESS_TOKEN']) && isset($_GET['CONNECT']) ) { |
|
13 /** |
|
14 * Guess we need to go get one! |
|
15 */ |
|
16 $token = $consumer->getRequestToken(); |
|
17 $_SESSION['TWITTER_REQUEST_TOKEN'] = serialize($token); |
|
18 |
|
19 /** |
|
20 * Now redirect user to Twitter site so they can log in and |
|
21 * approve our access |
|
22 */ |
|
23 $consumer->redirect(); |
|
24 } |
|
25 |
|
26 ?> |
|
27 |
|
28 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
29 "http://www.w3.org/TR/html4/strict.dtd"> |
2 "http://www.w3.org/TR/html4/strict.dtd"> |
30 |
3 |
31 <html lang="en"> |
4 <html lang="en"> |
32 <head> |
5 <head> |
33 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
34 <title>RSLN - Live Video and Annotation</title> |
7 <title>RSLN - Live Video and Annotation</title> |
35 <meta http-equiv="X-UA-Compatible" content="IE=8" /> |
8 |
36 |
9 |
37 <!-- Framework CSS --> |
10 <!-- JAVASCRIPT --> |
|
11 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
12 <script type="text/javascript" src="res/raphael/raphael-min.js"></script> |
|
13 |
|
14 <!-- Framework CSS --> |
38 <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection"> |
15 <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection"> |
39 <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print"> |
16 <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print"> |
40 <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> |
|
41 |
|
42 <!-- Import fancy-type plugin for the sample page. --> |
|
43 |
|
44 <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> |
17 <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> |
45 <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection"> |
18 <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection"> |
46 <link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen"> |
19 |
47 <link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" > |
20 |
48 |
|
49 <!-- JAVASCRIPT --> |
|
50 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
51 <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> |
|
52 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> |
|
53 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script> |
|
54 <script type="text/javascript" src="res/niceforms/niceforms.js"></script> |
|
55 <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
|
56 |
21 |
57 <!-- FONT --> |
22 <!-- FONT --> |
58 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'> |
23 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'> |
59 <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'> |
24 <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'> |
60 <link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'> |
25 <link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'> |
81 padding: 10px; |
48 padding: 10px; |
82 padding-left: 15px; |
49 padding-left: 15px; |
83 padding-top: 15px; |
50 padding-top: 15px; |
84 padding-right: 15px; |
51 padding-right: 15px; |
85 color: black; |
52 color: black; |
86 z-index: 1000000; |
53 z-index: 10000000000; |
87 font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
54 font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; |
88 overflow:hidden; |
55 overflow:hidden; |
89 } |
56 } |
90 #chartTimeline{ |
57 #chartTimeline{ |
91 padding-top: 410px; |
58 padding-top: 410px; |
92 z-index: 100000; |
59 z-index: 100000; |
93 position : absolute; |
60 position : absolute; |
94 } |
61 } |
95 |
62 |
96 </style> |
63 </style> |
97 <script type="text/javascript"> |
|
98 $(document).ready(function() { |
|
99 |
|
100 doTimer(); |
|
101 //$("txt").hide(); |
|
102 $(".loginbutton").click(function() { |
|
103 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
104 }); |
|
105 $("#IDENTIFIER").click(function() { |
|
106 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
107 }); |
|
108 |
|
109 $("#messageSuccess").hide(); |
|
110 $("#messageFailed").hide(); |
|
111 $("#txt").hide(); |
|
112 |
|
113 // BUTTONS |
|
114 $("#positive").click(function(){ |
|
115 var MyValue = $('#status').attr("value"); |
|
116 $('#status').attr("value",MyValue+"++ "); |
|
117 }); |
|
118 $("#negative").click(function(){ |
|
119 var MyValue = $('#status').attr("value"); |
|
120 $('#status').attr("value",MyValue+"-- "); |
|
121 }); |
|
122 $("#reference").click(function(){ |
|
123 var MyValue = $('#status').attr("value"); |
|
124 $('#status').attr("value",MyValue+"== "); |
|
125 }); |
|
126 $("#question").click(function(){ |
|
127 var MyValue = $('#status').attr("value"); |
|
128 $('#status').attr("value",MyValue+"?? "); |
|
129 }); |
|
130 |
|
131 // SEND TWEETS |
|
132 $("#sendTweet").click(function(){ |
|
133 var MyStatus = $('#status').attr("value"); |
|
134 $.post('tweet_ajax.php', {status:MyStatus} |
|
135 ,function(data) { |
|
136 |
|
137 if(data=="true"){ |
|
138 $("#messageSuccess").show('fast'); |
|
139 $("#messageSuccess").delay(800).hide('slow'); |
|
140 $('#status').attr("value","#rsln"); |
|
141 //$('#status').css("background-image","images/greenTweet.png"); |
|
142 //$('#status').delay(800).css("background-image","images/tweetWriterBgdTxtArea.gif"); |
|
143 }else{ |
|
144 $("#error").text(data); |
|
145 $("#messageFailed").show('fast'); |
|
146 $("#messageFailed").delay(800).hide('slow'); |
|
147 //$('#status').css("background-image","images/redTweet.png"); |
|
148 //$('#status').delay(800).css("background-image","images/tweetWriterBgdTxtArea.gif"); |
|
149 } |
|
150 |
|
151 }); |
|
152 |
|
153 }); |
|
154 |
|
155 |
|
156 }); |
|
157 |
|
158 |
|
159 <!-- LIMIT TEXTAREA: |
|
160 function imposemax(Object) |
|
161 { |
|
162 return (Object.value.length <= 140); |
|
163 } |
|
164 // End --> |
|
165 |
|
166 <!-- TIMER |
|
167 var c=0; |
|
168 var t; |
|
169 var timer_is_on=0; |
|
170 |
|
171 function timedCount() |
|
172 { |
|
173 document.getElementById('txt').value=c; |
|
174 c = c+1; |
|
175 t = window.setTimeout("timedCount()",1000); |
|
176 $(".twtr-ft").hide(); |
|
177 $(".twtr-hd").hide(); |
|
178 |
|
179 //twtr-tweet |
|
180 $(".twtr-tweet").each(colorTweetings); |
|
181 |
|
182 } |
|
183 |
|
184 function colorTweetings (){ |
|
185 /* |
|
186 efc1f0 > violet |
|
187 c5e7cd > vert |
|
188 f6ced0 > rouge |
|
189 bfdbec > blue |
|
190 ecedc1 > yellow |
|
191 */ |
|
192 var tweettemp = $(this).html(); |
|
193 //alert(tweettemp); |
|
194 //$(".videoLiveProgramDescription").text(tweettemp); |
|
195 //$(".videoLiveProgramTitle").text(tweettemp.search(/\x2D\x2D/)); |
|
196 |
|
197 /* |
|
198 <a target="_blank" class="twtr-reply" href="http://twitter.com/?status=@LaurentChic%20&in_reply_to_status_id=12411225795198976&in_reply_to=LaurentChic">reply</a> |
|
199 */ //alert("tweettemp"); |
|
200 |
|
201 if (tweettemp.search(/\x3F\x3F/)!=-1){ |
|
202 |
|
203 $(this).css({'background-color': '#ecedc1','color':"#000"}); |
|
204 } |
|
205 |
|
206 if (tweettemp.search(/\x2B\x2B/)!=-1){ |
|
207 $(this).css({'background-color': '#c5e7cd','color':"#fff"}); |
|
208 } |
|
209 |
|
210 if (tweettemp.search(/\x2D\x2D/)!=-1){ |
|
211 $(this).css({'background-color': '#f6ced0','color':"#fff"}); |
|
212 } |
|
213 |
|
214 if (tweettemp.search(/\x3D\x3D/)!=-1){ |
|
215 $(this).css({'background-color': '#bfdbec','color':"#000"}); |
|
216 } |
|
217 }; |
|
218 |
|
219 |
|
220 |
|
221 function doTimer() |
|
222 { |
|
223 if (!timer_is_on) |
|
224 { |
|
225 timer_is_on=1; |
|
226 timedCount(); |
|
227 } |
|
228 } |
|
229 |
|
230 function stopCount() |
|
231 { |
|
232 clearTimeout(t); |
|
233 timer_is_on=0; |
|
234 } |
|
235 // |
|
236 |
|
237 //--> |
|
238 |
|
239 |
|
240 </script> |
|
241 |
|
242 |
|
243 </head> |
64 </head> |
244 <body> |
65 |
245 |
66 <script type="text/javascript"> |
246 <div id="tip"></div> |
67 // CHART TIMELINE / VERSION PROTOTYPE :: |
247 <script type="text/javascript"> |
|
248 $(document).mousemove(function(e){ |
|
249 if (over){ |
|
250 tip.css("left", e.pageX-106).css("top", e.pageY-160); |
|
251 tip.css("color", tipColor) |
|
252 tip.text(tipText); |
|
253 } |
|
254 }); |
|
255 var over = false; |
|
256 var tip = $("#tip").hide(); |
|
257 var tipText = ""; |
|
258 var tipColor = "#efefef"; |
|
259 |
|
260 function addTip(node, txt,color){ |
|
261 $(node).mouseenter(function(){ |
|
262 tipText = txt; |
|
263 tip.fadeIn(0); |
|
264 tipColor = color; |
|
265 over = true; |
|
266 }).mouseleave(function(){ |
|
267 tip.fadeOut(0); |
|
268 over = false; |
|
269 }); |
|
270 } |
|
271 </script> |
|
272 |
|
273 |
|
274 <div class="container"> |
|
275 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
276 <ul class="menu"> |
|
277 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
278 <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> |
|
279 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
280 |
|
281 </ul> |
|
282 |
|
283 |
|
284 <div class="tweetExplain" > |
|
285 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
286 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. |
|
287 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
288 l'auditoire durant la conférence. |
|
289 <br/><br/> |
|
290 |
|
291 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
292 <table> |
|
293 <tr> |
|
294 <td> |
|
295 <a |
|
296 |
|
297 id="positive" |
|
298 title="accord" |
|
299 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
300 </tr> |
|
301 <tr> |
|
302 <td> |
|
303 |
|
304 <a |
|
305 |
|
306 id="negative" |
|
307 title="désaccord" |
|
308 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
309 </tr> |
|
310 <tr> |
|
311 <td> |
|
312 <a |
|
313 |
|
314 id="reference" |
|
315 title="reference" |
|
316 class="tweetButton">==</a></td><td> à un tweet de complément</td> |
|
317 </tr> |
|
318 <tr> |
|
319 <td> |
|
320 <a |
|
321 |
|
322 id="question" |
|
323 title="question" |
|
324 class="tweetButton"> ??</a></td><td> à une question</td> |
|
325 </tr> |
|
326 </table> |
|
327 |
|
328 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. |
|
329 |
|
330 <br/><br/> |
|
331 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 |
|
332 <br/> |
|
333 <br/>Merci a RSLN pour cette expérimentation ! |
|
334 </div> |
|
335 |
|
336 <div class="videoLive" > |
|
337 <div class="videoLivePlayer"> |
|
338 |
|
339 <div id="chartTimeline"> </div> |
|
340 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
341 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
342 |
|
343 <script type="text/javascript"> |
|
344 var configMP = { |
|
345 /*metadata:{ |
|
346 format:'cinelab', |
|
347 src:'metadata.json', |
|
348 load:'json'},*/ |
|
349 metadata:{ |
|
350 format:'cinelab', |
|
351 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
352 load:'jsonp'}, |
|
353 gui:{ |
|
354 width:650, |
|
355 height:480, |
|
356 mode:'video', |
|
357 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
358 debug:false, |
|
359 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
360 |
|
361 player:{ |
|
362 type:'jwplayer', |
|
363 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
364 }; |
|
365 __IriSP.init(configMP); |
|
366 </script> |
|
367 |
|
368 </div> |
|
369 |
|
370 </div> |
|
371 |
|
372 <div class="footer"> |
|
373 <hr> |
|
374 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
375 IRI </a> |
|
376 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
377 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
378 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
379 <?php |
|
380 if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){ |
|
381 echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>"); |
|
382 } |
|
383 ?> |
|
384 <input type="text" id="txt" size="3"/> |
|
385 </div> |
|
386 |
|
387 </div> |
|
388 |
|
389 <!-- LIGHTBOX --> |
|
390 <div style="display:none;"> |
|
391 <div id="Aboutbox" > |
|
392 <div class="lightBorder"> |
|
393 <div class="lightTitle" style="height:45px;"> </div> |
|
394 <div class="lightSubTitle">Annotation polémique par tweet </div> |
|
395 <div class="lightDescription">Lors de la conférence du 31 janvier 2011 organiser par RSLN vous avez expérimenté une syntaxe polémique pour "tweeter". Cette qualification de vos tweets nous a permis de créer une timeline polemique. Cette timeline vous permet de naviguer dans la vidéo <br/>tout en représentant les positions de <br/>l'auditoire durant la conférence. |
|
396 </div> |
|
397 <br/> |
|
398 <div> |
|
399 <!-- |
|
400 <br/> |
|
401 <a class="button_b" href="#" id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/> |
|
402 --> |
|
403 <a class="button_w" href="#" id="ACCES"><span>voir la vidéo</span></a> |
|
404 |
|
405 </div> |
|
406 </div> |
|
407 </div> |
|
408 </div> |
|
409 |
|
410 |
|
411 <script type="text/javascript" src="res/raphael/raphael-min.js"></script> |
|
412 <script type="text/javascript"> |
|
413 |
|
414 // CHART TIMELINE / VERSION PROTOTYPE :: |
|
415 // - config |
|
416 // - organisation classe |
|
417 // !!!- rollover !! |
|
418 // !!!!- legend !! |
|
419 // - time cursor |
|
420 // - seek !! |
|
421 |
|
422 /* |
|
423 1 | 1D973D > vert > ++ > OK |
|
424 2 | C5A62D > orange > ?? > Q |
|
425 3 | CE0A15 > rouge > -- > KO |
|
426 4 | 036AAE > bleu > == > REF |
|
427 5 | 585858 > gris > NQ > "" |
|
428 */ |
|
429 |
|
430 |
68 |
431 // configuration |
69 // configuration |
432 var config = { |
70 var config = { |
433 target:"chartTimeline", |
71 target:"chartTimeline", |
434 x:8, |
72 x:8, |
437 height:70, |
75 height:70, |
438 heightmax:70 |
76 heightmax:70 |
439 } |
77 } |
440 // Make and define the Raphael area |
78 // Make and define the Raphael area |
441 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
79 //var paper = Raphael(document.getElementById(config.target),config.width, config.height); |
442 |
80 |
443 |
|
444 function ChartTimeLine (){ |
81 function ChartTimeLine (){ |
445 |
82 |
446 //var paper = Raphael(config.x, config.y,config.width, config.height); |
83 //var paper = Raphael(config.x, config.y,config.width, config.height); |
447 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
84 |
448 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
85 //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
449 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
450 paper.rect(0,20,config.width,1).attr({fill:"#fff",stroke: "none"}); |
|
451 paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"}); |
|
452 |
86 |
453 // variable |
87 // variable |
454 |
88 |
455 var yCoef = 2; // coef for height of 1 tweet |
89 var yCoef = 2; // coef for height of 1 tweet |
456 var frameSize = 5; // frame size |
90 var frameSize = 5; // frame size |
457 var margin = 1; // marge between frame |
91 var margin = 1; // marge between frame |
458 var lineSize = 650; // timeline pixel width |
92 var lineSize = 650; // timeline pixel width |
459 var nbrframes = lineSize/frameSize; // frame numbers |
93 var nbrframes = lineSize/frameSize; // frame numbers |
460 var numberOfTweet = 0; // number of tweet overide later |
94 var numberOfTweet = 0; // number of tweet overide later |
461 var duration = 4299820 ; // timescale width |
95 var duration = 4299820 ; // timescale width |
462 var frameLenght =lineSize/frameSize;// frame timescale |
96 var frameLenght = lineSize/frameSize;// frame timescale |
463 var timeline; |
97 var timeline; |
464 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
98 var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858"); |
465 |
99 |
466 // array |
100 // array |
467 var tweets = new Array(); |
101 var tweets = new Array(); |
653 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
283 ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]}); |
654 addEheight +=TweetHeight; |
284 addEheight +=TweetHeight; |
655 e.time= frames[i].mytweetsID[k].timeframe; |
285 e.time= frames[i].mytweetsID[k].timeframe; |
656 e.title= frames[i].mytweetsID[k].title; |
286 e.title= frames[i].mytweetsID[k].title; |
657 e.mouseover(function () { |
287 e.mouseover(function () { |
658 this.attr({stroke:"#fff","stroke-width":5}); |
288 //this.attr({stroke:"#fff","stroke-width":5}); |
659 this.toFront(); |
289 //this.toFront(); |
660 }).mouseout(function () { |
290 }).mouseout(function () { |
661 this.attr({stroke:"#00","stroke-width":0.1}); |
291 //this.attr({stroke:"#00","stroke-width":0.1}); |
662 }).mousedown(function () { |
292 }).mousedown(function () { |
663 __IriSP.MyApiPlayer.seek(this.time/1000) |
293 __IriSP.MyApiPlayer.seek(this.time/1000) |
664 }); |
294 }); |
665 $(e.node).attr('id', 't'+k+''); |
295 __IriSP.jQuery(e.node).attr('id', 't'+k+''); |
666 $(e.node).attr('title', frames[i].mytweetsID[k].title); |
296 __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title); |
667 $(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
297 __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe); |
668 addTip(e.node, frames[i].mytweetsID[k].title,colors[j]); |
298 var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight} |
|
299 addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition); |
669 //frames[i].mytweetsID.pop(); |
300 //frames[i].mytweetsID.pop(); |
670 } |
301 } |
671 } |
302 } |
672 } |
303 } |
673 } |
304 } |
674 } |
305 } |
675 } |
306 } |
|
307 |
|
308 } |
|
309 // |
|
310 PaperSlider.toFront(); |
|
311 } |
|
312 |
|
313 |
|
314 $(document).mousemove(function(e){ |
|
315 if (over){ |
|
316 __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160); |
|
317 __IriSP.jQuery("#tipcolor").css("background-color", tipColor) |
|
318 __IriSP.jQuery("#tiptext").text(tipText); |
|
319 __IriSP.jQuery("#tip").show(); |
|
320 }else{ |
|
321 __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000); |
|
322 //tweetSelection.attr({x:-100,y:-100}); |
|
323 } |
|
324 }); |
|
325 |
|
326 var over = false; |
|
327 var tipText = ""; |
|
328 var tipColor = "#efefef"; |
|
329 var tweetSelection; |
|
330 var PaperSlider; |
|
331 |
|
332 // AddTip ****************************************************************************** |
|
333 function addTip(node, txt,color,tempPosition){ |
|
334 __IriSP.jQuery(node).mouseover(function(){ |
|
335 tipText = txt; |
|
336 //tip.hide();//fadeIn(0); |
|
337 tipColor = color; |
|
338 over = true; |
|
339 //tweetSelection.attr(tempPosition); |
|
340 //tweetSelection.toFront(); |
|
341 }).mouseout(function(){ |
|
342 //tip.show()//tip.fadeOut(0); |
|
343 over = false; |
|
344 }); |
676 |
345 |
|
346 |
|
347 } |
|
348 |
|
349 $(document).ready(function() { |
|
350 var tip = __IriSP.jQuery("#tip").hide(); |
|
351 //ChartTimeLine(); |
677 |
352 |
678 } |
353 }); |
679 |
354 </script> |
680 // AddTip ****************************************************************************** |
355 |
681 |
356 <body> |
682 } |
357 |
683 |
358 <!-- SCRIPT RAPHAEL --> |
684 ChartTimeLine(); |
359 |
685 |
360 |
686 </script> |
361 |
|
362 <!-- tooltip --> |
|
363 <div id="tip"> |
|
364 <div id="tipcolor" style="height:10px;width:10px"></div> |
|
365 <div id="tiptext"></div> |
|
366 </div> |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 <div class="container"> |
|
374 |
|
375 |
|
376 |
|
377 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
378 <ul class="menu"> |
|
379 <li class="menuUnderline"><a href="index.php" class="menuLink" id="About"> À propos</a></li> |
|
380 <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> |
|
381 <li ><a href="polemicaltimeline.php" class="menuLink">Lecteur polémique</a></li> |
|
382 |
|
383 </ul> |
|
384 |
|
385 |
|
386 |
|
387 |
|
388 |
|
389 |
|
390 <div class="tweetExplain" > |
|
391 <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/> |
|
392 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. |
|
393 Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de |
|
394 l'auditoire durant la conférence. |
|
395 <br/><br/> |
|
396 |
|
397 Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat : |
|
398 <table> |
|
399 <tr> |
|
400 <td> |
|
401 <a |
|
402 |
|
403 id="positive" |
|
404 title="accord" |
|
405 class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td> |
|
406 </tr> |
|
407 <tr> |
|
408 <td> |
|
409 |
|
410 <a |
|
411 |
|
412 id="negative" |
|
413 title="désaccord" |
|
414 class="tweetButton">--</a></td><td> à un tweet de désaccord,</td> |
|
415 </tr> |
|
416 <tr> |
|
417 <td> |
|
418 <a |
|
419 |
|
420 id="reference" |
|
421 title="reference" |
|
422 class="tweetButton">==</a></td><td> à un tweet de référence</td> |
|
423 </tr> |
|
424 <tr> |
|
425 <td> |
|
426 <a |
|
427 |
|
428 id="question" |
|
429 title="question" |
|
430 class="tweetButton"> ??</a></td><td> à une question</td> |
|
431 </tr> |
|
432 </table> |
|
433 |
|
434 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. |
|
435 |
|
436 <br/><br/> |
|
437 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 |
|
438 <br/> |
|
439 <br/>Merci a RSLN pour cette expérimentation ! |
|
440 </div> |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 |
|
446 <div class="videoLive" > |
|
447 <div class="videoLivePlayer"> |
|
448 |
|
449 <div id="chartTimeline"> </div> |
|
450 <script type="text/javascript"> |
|
451 var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height); |
|
452 paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1}); |
|
453 paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
454 PaperSlider = paper.rect(0,20,1,50).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
455 // decalage |
|
456 tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1}); |
|
457 </script> |
|
458 |
|
459 <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script> |
|
460 <div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div> |
|
461 |
|
462 <script type="text/javascript"> |
|
463 var configMP = { |
|
464 /*metadata:{ |
|
465 format:'cinelab', |
|
466 src:'metadata.json', |
|
467 load:'json'},*/ |
|
468 metadata:{ |
|
469 format:'cinelab', |
|
470 src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02', |
|
471 load:'jsonp'}, |
|
472 gui:{ |
|
473 width:650, |
|
474 height:480, |
|
475 mode:'video', |
|
476 container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed', |
|
477 debug:false, |
|
478 css:'http://amateur.iri.centrepompidou.fr/live/rsln/res/css/LdtPlayer.css'}, |
|
479 |
|
480 player:{ |
|
481 type:'jwplayer', |
|
482 src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'} |
|
483 }; |
|
484 __IriSP.init(configMP); |
|
485 </script> |
|
486 |
|
487 </div> |
|
488 |
|
489 </div> |
|
490 |
|
491 |
|
492 |
|
493 |
|
494 |
|
495 <div class="footer"> |
|
496 <hr> |
|
497 <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> |
|
498 IRI </a> |
|
499 | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a> |
|
500 | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a> |
|
501 | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a> |
|
502 </div> |
|
503 |
|
504 </div> |
|
505 |
|
506 |
687 |
507 |
688 |
508 |
689 |
509 |
690 </body> |
510 </body> |
691 </html> |
511 </html> |