|
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 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
28 |
|
29 <html lang="en"> |
|
30 <head> |
|
31 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|
32 <title>ENMI 2010 - Live Video and Annotation</title> |
|
33 |
|
34 <!-- Framework CSS --> |
|
35 <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection"> |
|
36 <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print"> |
|
37 <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> |
|
38 |
|
39 <!-- Import fancy-type plugin for the sample page. --> |
|
40 |
|
41 <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection"> |
|
42 <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection"> |
|
43 <link rel="stylesheet" href="tabs-slideshow.css" type="text/css" media="screen, projection"> |
|
44 <link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen"> |
|
45 <link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" > |
|
46 |
|
47 <!-- JAVASCRIPT --> |
|
48 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
|
49 <!--<script type="text/javascript" src="res/jquery.tools/jquery.tools.min.js"></script>--> |
|
50 <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script> |
|
51 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> |
|
52 <script type="text/javascript" src="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script> |
|
53 <script type="text/javascript" src="res/niceforms/niceforms.js"></script> |
|
54 <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
|
55 |
|
56 <!-- FONT --> |
|
57 <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'> |
|
58 <link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'> |
|
59 <link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'> |
|
60 |
|
61 <script type="text/javascript"> |
|
62 $(document).ready(function() { |
|
63 |
|
64 $(".loginbutton").click(function() { |
|
65 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
66 }); |
|
67 $("#IDENTIFIER").click(function() { |
|
68 document.location.href="<?php URL_ROOT ?>?CONNECT=true"; |
|
69 }); |
|
70 $("#ACCES").click(function() { |
|
71 document.location.href="client.php"; |
|
72 }); |
|
73 $(".archivesVideoBox").mouseover(function() { |
|
74 //$(this).animate({'backgroundColor'}); |
|
75 //$(this).css({'backgroundColor':'#d6d6d6'}); |
|
76 $(this).css({'backgroundColor':'#fff'}); |
|
77 $(this).cursor = "pointer"; |
|
78 }).mouseout(function(){ |
|
79 //$(this).css({'backgroundColor':'#f6f6f6'}); |
|
80 $(this).css({'backgroundColor':'#f2f2f2'}); |
|
81 }); |
|
82 |
|
83 <!-- SLIDER --> |
|
84 $(".slidetabs").tabs(".images > div", { |
|
85 effect: 'fade', |
|
86 rotate: false, |
|
87 interval: 4000, |
|
88 clickable:false, |
|
89 }).slideshow(); |
|
90 |
|
91 $(".slidetabs").data("slideshow").play(); |
|
92 }); |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 </script> |
|
98 <script type="text/javascript"> |
|
99 |
|
100 var _gaq = _gaq || []; |
|
101 _gaq.push(['_setAccount', 'UA-9955524-3']); |
|
102 _gaq.push(['_setDomainName', '.iri.centrepompidou.fr']); |
|
103 _gaq.push(['_trackPageview']); |
|
104 |
|
105 (function() { |
|
106 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
|
107 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
|
108 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
|
109 })(); |
|
110 |
|
111 </script> |
|
112 </head> |
|
113 <body> |
|
114 <div class="container"> |
|
115 <img src="images/ENMI_2010_logo.gif" class="logo"> |
|
116 <ul class="menu"> |
|
117 <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" target="_blank" class="menuLink">S'identifier</a></li> |
|
118 <li class="menuUnderline"><a href="about.php" target="_blank" class="menuLink">A propos</a></li> |
|
119 <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >Contact</a></li> |
|
120 </ul> |
|
121 |
|
122 |
|
123 <div class="introBox"> |
|
124 |
|
125 <div class="slider"> |
|
126 <!-- container for the slides --> |
|
127 <div class="images"> |
|
128 <!-- first slide --> |
|
129 <div class="slides" style="background-image:url('images/slide0.gif');"> |
|
130 <p class="slideTitle" > |
|
131 0. Comment utiliser Polemic tweet en 4 étapes : |
|
132 </p> |
|
133 <p style="padding-top:90px;padding-left:280px;width:520px;" class="slideText"> |
|
134 Nous allons vous présenter comment utiliser le tweet polemci en 4 étapes |
|
135 cliquez sur les boutons ci dessous pour changer les slides. |
|
136 </p> |
|
137 </div> |
|
138 <div class="slides" style="background-image:url('images/slide1.jpg');"> |
|
139 <p class="slideTitle" > |
|
140 1. Identifie toi |
|
141 </p> |
|
142 <br/><br/><br/><br/> |
|
143 <p style="width:400px;padding-left:400px;" class="slideText"> |
|
144 <a class="button_b" href="#" id="IDENTIFIER"><span>S'Identifier</span></a>sur l'application de tweet polemic,<br/> <br/> |
|
145 <a class="button_w" href="#" id="ACCES"><span>ou accèder lecture seul.</span></a> |
|
146 </p> |
|
147 </div> |
|
148 <!-- second slide --> |
|
149 <div class="slides" style="background-image:url('images/slide2.jpg');"> |
|
150 <p class="slideTitle" >2. Exprime ton opinion </p> |
|
151 <br/><br/> |
|
152 <p style="padding-top:90px;padding-left:280px;width:520px;" class="slideText"> |
|
153 Utilise la syntaxe polémique en ajoutant<br/> |
|
154 les caractères suivants ("??", "++", "--", "==") <br/> |
|
155 afin de te positionner par rapport aux propos de la conférence. |
|
156 </p> |
|
157 </div> |
|
158 <!-- third slide --> |
|
159 <div class="slides" style="background-image:url('images/slide3.gif');"> |
|
160 <p class="slideTitle" >3. Visualise la polémique</p> |
|
161 <br/><br/> |
|
162 <p style="width:400px;padding-right:400px;" class="slideText"> |
|
163 Après l'événement une timeline agrége les tweets de l'auditoire et présente le débat synchronisé à l'enregistrement video de la conférence. |
|
164 </p> |
|
165 </div> |
|
166 <!-- fourth slide --> |
|
167 <div class="slides" style="background-image:url('images/slide4.jpg');"> |
|
168 <p class="slideTitle" >4. Prochain rendez vous ! </p> |
|
169 <br/><br/><br/> |
|
170 <p style="width:400px;padding-right:400px;" class="slideText"> |
|
171 RSLN vous invite Jeudi 7 avril à 19h30, à une rencontre avec Mercedes Bunz sur le thème : |
|
172 "Comment les algorithmes ont fini par devenir des producteurs d'infos et pourquoi ils ne remplaceront pour autant jamais les journalistes." |
|
173 </p> |
|
174 |
|
175 <a class="button_b" href="client.php"><span> Cliquez ici pour allez sur la page de live</span> </a> |
|
176 |
|
177 </div> |
|
178 </div> |
|
179 |
|
180 <!-- the tabs --> |
|
181 <div class="slidetabs"> |
|
182 <a href="#"></a> |
|
183 <a href="#"></a> |
|
184 <a href="#"></a> |
|
185 <a href="#"></a> |
|
186 <a href="#"></a> |
|
187 </div> |
|
188 </div> |
|
189 |
|
190 <div class="intro"> |
|
191 |
|
192 </div> |
|
193 |
|
194 </div> |
|
195 <!-- --> |
|
196 <div class="archivesBox"> |
|
197 <div class="archivesBoxHeader"></div> |
|
198 <div class="archivesBoxContainer"> |
|
199 <!-- --> |
|
200 <h3 class="archivesTitle">Les derniers événements qui ont utilisé le tweet polemic : </h3> |
|
201 <div id="AVB1" class="archivesVideoBox"> |
|
202 <img src="images/tail_enmi2010.jpg" width="270" height="150"/> |
|
203 <div class="AVBtitle">ENMI 2010</div> |
|
204 <div class="AVBtext"> |
|
205 par <a href="#">IRI</a> au Centre Pompidou |
|
206 <br/>le lundi 31 janvier · 08:30 - 10:30 |
|
207 </div> |
|
208 </div> |
|
209 <!-- --> |
|
210 <div id="AVB3" class="archivesVideoBox"> |
|
211 <a href="rsln/polemicaltimeline.php"> |
|
212 <img src="images/tail_clay.jpg" width="270" height="150"/> |
|
213 </a> |
|
214 <div class="AVBtitle">Clay Shirky le net, le surplus cognitif</div> |
|
215 <div class="AVBtext"> |
|
216 par <a href="#">RSLN</a> à Micorsoft France |
|
217 <br/>le lundi 31 janvier · 08:30 - 10:30 |
|
218 </div> |
|
219 </div> |
|
220 <!-- --> |
|
221 <div id="AVB2" class="archivesVideoBox"> |
|
222 <a href="rsln-opendata/polemicaltimeline.php"> |
|
223 <img src="images/tail_opendata.jpg" width="270" height="150"/> |
|
224 </a> |
|
225 <div class="AVBtitle">OPENDATA</div> |
|
226 <div class="AVBtext"> |
|
227 par <a href="#">RSLN</a> à Micorsoft France |
|
228 <br/>le lundi 31 janvier · 08:30 - 10:30 |
|
229 </div> |
|
230 </div> |
|
231 |
|
232 </div> |
|
233 <div class="archivesBoxClear"></div> |
|
234 <div class="archivesBoxFooter"></div> |
|
235 </div> |
|
236 |
|
237 <div class="footer"> |
|
238 <hr> |
|
239 <a href="http://www.iri.centrepompidou.fr/" class="footerLink"> Tweet polemic </a> |
|
240 est une expérimentation de l' |
|
241 <a href="http://www.iri.centrepompidou.fr/" class="footerLink">Institut de recherche et d’innovation </a> |
|
242 <?php |
|
243 if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){ |
|
244 echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>"); |
|
245 } |
|
246 ?> |
|
247 <input type="text" id="txt" size="3" style="visibility:hidden;"/> |
|
248 </div> |
|
249 |
|
250 |
|
251 </div> |
|
252 |
|
253 <!-- LIGHTBOX --> |
|
254 <div style="display:none;"> |
|
255 <div id="Aboutbox" > |
|
256 <div class="lightBorder"> |
|
257 <div class="lightTitle">ENMI 2010</div> |
|
258 <div class="lightSubTitle">Annotation critique par tweet </div> |
|
259 <div class="lightDescription">À partir de cette interface ou de votre client twitter habituel, vous pouvez réagir en direct aux conférences en twittant. Vos tweets seront synchronisés avec l'enregistrement des conférences. Vous pourrez qualifier vos tweets en y intégrant la syntaxe ci-contre. |
|
260 </div> |
|
261 <div> |
|
262 <br/> |
|
263 <a class="button_b" href="#" id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/> |
|
264 <a class="button_w" href="#" id="ACCES"><span>Libre accès</span></a> |
|
265 </div> |
|
266 </div> |
|
267 </div> |
|
268 </div> |
|
269 |
|
270 |
|
271 </body> |
|
272 </html> |