--- a/web/about.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/about.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,7 +1,14 @@
+<?php
+/**
+ * include some common code (like we did in the 90s)
+ * People still do this? ;)
+ */
+include_once './common.php';
+?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
+<html lang="<?php echo($actual); ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ENMI 2010 - Live Video and Annotation</title>
@@ -14,8 +21,8 @@
<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/css/custom.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/css/tabs-slideshow.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="tabs-slideshow.css" type="text/css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" >
@@ -81,9 +88,24 @@
<div class="container">
<a href="index.php"> <img src="images/ENMI_2010_logo.gif" class="logo"></a>
<ul class="menu">
- <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" target="_blank" class="menuLink">S'identifier</a></li>
- <li class="menuUnderline"><a href="index.php" target="_blank" class="menuLink">Accueil</a></li>
- <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >Contact</a></li>
+ <li class="menuUnderline"><a href="index.php" class="menuLink">
+ <?php print $translate->_("Accueil"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" class="menuLink">
+ <?php print $translate->_("S'identifier"); ?></a></li>
+ <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >
+ <?php print $translate->_("Contact"); ?></a></li>
+ </ul>
+
+ <ul class="menu lang" >
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
+ <img src='images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Japonais"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
+ <img src='images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Français"); ?></a></li>
+ <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
+ <img src='images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Anglais"); ?></a></li>
</ul>
@@ -92,54 +114,23 @@
<div class="archivesBoxHeader"></div>
<div class="archivesBoxContainer">
<!-- -->
- <h3 class="archivesTitle">A propos : </h3><br/>
+ <h3 class="archivesTitle"><?php print $translate->_("A propos"); ?> : </h3><br/>
<div class="span-12 prepend-1 colborder">
- <div class="AVBtitle">Polemic Tweet : un dispositif tirant parti des dynamiques sociales</div>
- <br/><p>Le Web devient de plus en plus audiovisuel, dans ce contexte comment rendre visibles ces contenus avec des métadonnées synchronisées au flux ? Comment faire pointer les moteurs de recherche sur des segments précis et non sur la vidéo complète ? Comment partager des moments favoris sur les réseaux sociaux ? Tout ceci repose en partie sur l’évolution des standards du Web mais avant tout sur la capacité à indexer les contenus audiovisuels dans le flux.
- Pour cela, aujourd’hui, trois méthodes existent et peuvent cohabiter :
- <ul>
- <li>L’indexation manuelle qui est couteuse, </li>
- <li>L’indexation automatique (comme le speech to text) qui génère malheureusement beaucoup de bruit qu’il faut ensuite filtrer.</li>
- <li>Et finalement la dynamique sociale. </li>
- </ul>
- L’IRI mise sur cette dynamique en proposant Polemic Tweet, un dispositif qui permet aux spectateurs d’un événement de twitter en donnant une teneur polémique à leur propos. Mais aussi de visualiser cette polémique en synchronisant les tweets sur l’enregistrement vidéo de l’événement.
- Pour participer au Polemic tweet, un client twitter intégrant des fonctionnalités spéciales est disponible sur <a href="http://amateur.iri.centrepompidou.fr/live/ ">la page de live</a> , mais vous pouvez aussi utiliser votre client habituel. <br/><br/>
- Le plus simple est de se connecter avec son compte tweeter à la page Web de l’événement. Sur cette page le HashTag de l’événement est déjà inséré dans l’espace de rédaction du tweet, ensuite a l’aide du jeu de boutons suivants vous pouvez positionner votre tweet dans l’espace polémique :<br/>
- <table><tbody>
- <tr><td>
- <a id="positive" title="accord" class="tweetButton">++</a> </td>
- <td>pour argumenter dans le sens du conférencier, ou simplement pour l’approuver</td>
- </tr>
- <tr><td>
- <a id="negative" title="désaccord" class="tweetButton">--</a></td>
- <td> pour marquer une opposition avec le propos tenu par le conférencier</td>
- </tr>
- <tr><td>
- <a id="reference" title="reference" class="tweetButton">==</a></td>
- <td> pour poser une question au conférencier, au modérateur ou à la communauté.</td>
- </tr>
- <tr><td>
- <a id="question" title="question" class="tweetButton"> ??</a></td>
- <td> pour signaler une source complémentaire, une référence d’ouvrage, un lien vers un site ou vers un autre tweet</td>
- </tr>
- </tbody></table>
- Si vous préférez utiliser votre propre client twitter il suffit d’ajouter à votre tweet le hashtag de la conférence ainsi que le jeu de caractères correspondants à votre position ("++","--","==","??").<br/><br/>
- A l’issue de la conférence, le dispositif Polemic Tweet produit un nouveau type d’interface qui permet de parcourir l’enregistrement vidéo en utilisant une représentation de la polémique qui s’est engagée sur le média social. Cette interface est une ligne de temps munie d’un diagramme en bâtons qui aggrège l’ensemble des tweets et permet de voir les « point chauds » de la polémique durant l'événement.
- </p>
- </div>
+
+ <div class='AVBtitle'><?php print $translate->_("1. AboutTitle"); ?></div>
+ <br/>
+ <?php print $translate->_("1. AboutText"); ?>
+ <br/>
+ </div>
+
+
<div class="span-7 last">
- <div class="AVBtitle">L’IRI et la contribution critique</div>
- <br/><p>
- En 2008, à l’initiative du philosophe Bernard Stiegler, l’IRI a été fondé par le Centre Pompidou, le Centre de Création Contemporaine de Barcelone et la société Microsoft France afin de développer des recherches théoriques sur la figure de l’amateur, l’écologie de l’attention et le design d’un nouveau monde industriel.
- L’IRI poursuit également un programme de recherche et de développement technologique sur les technologies collaboratives qui vise notamment la conception de nouveaux espaces critiques numériques. Ces espaces permettent de combiner des métadonnées savantes (top-down) et des contributions amateurs (bottom-up), en portant une attention particulière aux dispositifs de synchronisation de ces contributions avec les contenus numériques produits durant l’événement.
- Pour cela l’IRI a développé un lecteur de métadonnées qui offre une interface de visualisation adaptée et, une meilleure exposition des médias temporels aux moteurs de recherche et aux réseaux sociaux.
- </p><br/>
- <div class="AVBtitle">Crédits : </div>
+ <div class="AVBtitle"><?php print $translate->_("2. AboutIRITitle"); ?></div>
+ <?php print $translate->_("2. AboutIRIText"); ?>
+
+ <div class="AVBtitle"><?php print $translate->_("3. AboutCreditsTitle"); ?></div>
<br/>
- Ce dispositif a été conçu et réalisé par Samuel Huron et Yves Marie Haussonne.
- Il a été expérimenté durant des événements organisés par l’<a href="http://iri.centrepompidou.fr/" target="_blank">IRI</a> et <a href="http://www.rslnmag.fr" target="_blank">RSLN</a>.
- Les développements sont open source et vont être sous licence <a href="http://www.cecill.info/" target="_blank">Cecil</a>.
-
+ <?php print $translate->_("3. AboutCreditsText"); ?>
</div>
--- a/web/client.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/client.php Fri Apr 22 12:31:41 2011 +0200
@@ -46,7 +46,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
+<html lang="<?php echo($actual); ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RSLN - Live Video and Annotation</title>
@@ -56,11 +56,8 @@
<link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
-
- <!-- Import fancy-type plugin for the sample page. -->
-
<link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/css/custom.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" >
@@ -253,11 +250,26 @@
<img src="<?php echo($C_REP); ?>/images/head_logo.gif" class="Producteur logo">
<div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
<ul class="menu">
- <li class="menuUnderline"><a href="index.php" class="menuLink">Archives </a></li>
- <li class="menuUnderline" ><a href="http://www.rslnmag.fr/blog/2011/3/13/_nous-en-sommes-2020_toutes-les-donnees-sont-liberees_/" class="menuLink" target="_blank"> Programme</a>
- <li ><a href="about.php" class="menuLink" >A propos</a></li>
+ <li class="menuUnderline"><a href="index.php" class="menuLink">
+ <?php print $translate->_("Accueil"); ?> </a></li>
+ <li class="menuUnderline" ><a href="<?php echo($C_link); ?>" class="menuLink" target="_blank" id='Program'>
+ <?php print $translate->_("Programme"); ?></a></li>
+ <li ><a href="about.php" class="menuLink" >
+ <?php print $translate->_("A propos"); ?></a></li>
</ul>
+
+ <ul class="menu" >
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
+ <img src='images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Japonais"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
+ <img src='images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Français"); ?></a></li>
+ <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
+ <img src='images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Anglais"); ?></a></li>
+ </ul>
<div class="videoLive">
@@ -281,12 +293,11 @@
</div>
<div class="tweetWriter">
- <h3 class="tweetWriterTitle">Annotations polémique : </h3>
+ <h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?></h3>
<form action="tweet.php" method="post" id="statusform" >
<?php if (!isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
echo("<div class='loginbutton' ><a href='".URL_ROOT."?CONNECT=true' class='loginlink'>
- Vous n'êtes pas connecté.<br>
- Pour participer, veuillez vous identifier en cliquant ici. </a></div>");
+ ".$translate->_("Vous n'êtes pas connecté.")."</a></div>");
}else{
echo("<textarea name='status' id='status' rows='3' cols='50' onkeypress='return imposemax(this);'>".$C_hashtag."</textarea>");
}
@@ -294,16 +305,17 @@
<div id="messageSuccess" style="background-color:lightgreen;">
- Votre tweet a bien été envoyé !<br><br>
+ <?php print $translate->_("Envoyé"); ?><br><br>
</div>
<div id="messageFailed" style="background-color:red;">
- Ooups! il y a une erreur vous avez le droit de frapper le developpeur :<div id="error"> </div><br/><br>
+ <?php print $translate->_("Erreur1"); ?><div id="error"> </div><br/><br>
</div>
- <a class="button_w" href="#" id="sendTweet" style="float:right;margin-right:15px;margin-left:35px;width:70px;" ><span>Envoyer</span></a>
+ <a class="button_w" href="#" id="sendTweet" style="float:right;margin-right:15px;margin-left:35px;width:70px;" >
+ <span><?php print $translate->_("Envoyer"); ?></span></a>
<!--<button name="s" type="button" id="sendTweet"
style="float:right;margin-right:15px;margin-left:35px;width:70px;" >Envoyer</button>-->
<a
@@ -371,10 +383,9 @@
echo($C_partenaires);
if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
- echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>");
+ echo("| <a href='clear.php' class='footerLink'>".$translate->_("Déconnexion")."</a>");
}
?>
- <div href="#Aboutbox" id="About">about</div>
<input type="text" id="txt" size="3"/>
</div>
@@ -387,13 +398,12 @@
<div id="Aboutbox" >
<div class="lightBorder">
<div class="lightTitle" style="height:45px;"> </div>
- <div class="lightSubTitle">Annotation polémique par tweet </div>
- <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.
- </div>
+ <div class="lightSubTitle"><?php print $translate->_("splatchPageTitle"); ?></div>
+ <div class="lightDescription"><?php print $translate->_("splatchPageText"); ?></div>
<div>
<br/>
- <a class="button_b" href="#" id="IDENTIFIER"><span>S'identifier</span></a> <br/><br/>
- <a class="button_w" href="#" id="ACCES"><span>Libre accès</span></a>
+ <a class="button_b" href="#" id="IDENTIFIER"><span><?php print $translate->_("S'identifier"); ?></span></a> <br/><br/>
+ <a class="button_w" href="#" id="ACCES"><span><?php print $translate->_("Libre accès"); ?></span></a>
</div>
</div>
</div>
--- a/web/common.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/common.php Fri Apr 22 12:31:41 2011 +0200
@@ -10,10 +10,20 @@
. PATH_SEPARATOR . get_include_path()
);
+
+include_once dirname(__FILE__).'/traduction.php';
+
+
/**
* Make sure Zend_Oauth's Consumer is loaded
*/
-require_once 'lib/Zend/Oauth/Consumer.php';
+require_once dirname(__FILE__).'/lib/Zend/Oauth/Consumer.php';
+
+/** Zend_Locale */
+require_once dirname(__FILE__).'/lib/Zend/Locale.php';
+
+/** Zend_Translate_Adapter */
+require_once dirname(__FILE__).'/lib/Zend/Translate/Adapter.php';
/**
* Start up the ol' session engine
@@ -23,9 +33,51 @@
/**
* Include the configuration data for our OAuth Client (array $configuration)
*/
-include_once './config.php';
+include_once dirname(__FILE__).'/config.php';
/**
* Setup an instance of the Consumer for use
*/
$consumer = new Zend_Oauth_Consumer($configuration);
+
+/**
+ * TRADUCTION
+**/
+
+
+Zend_Loader::loadClass('Zend_Translate');
+Zend_Loader::loadClass('Zend_Http_Cookie');
+
+
+$client = new Zend_Http_Client();
+$translate = new Zend_Translate('array', $init, 'fr');
+
+$translate->addTranslation($english, 'en');
+$translate->addTranslation($japan, 'ja_JP');
+$translate->addTranslation($french, 'fr');
+
+$actual = $translate->getLocale();
+
+//$translate->setLocale("en");
+// $acceptCookie = $this->_request->getCookie('acceptCookie',0);
+
+if(isset($_GET['lang'])==false and isset($_SESSION['lang'])==false){
+
+ if($actual!='fr' and $actual!='en' and $actual!='ja_JP'){
+ $translate->setLocale("fr");
+ $_SESSION['lang']="fr";
+ }
+
+} else if (isset($_GET['lang'])==true){
+ $translate->setLocale($_GET['lang']);
+ $_SESSION['lang'] = $_GET['lang'];
+ $actual = $_SESSION['lang'];
+
+} else if (isset($_SESSION['lang'])==true){
+ $translate->setLocale( $_SESSION['lang']);
+ $actual = $_SESSION['lang'];
+
+}
+
+
+
--- a/web/index.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/index.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,5 +1,6 @@
<?php
-
+error_reporting(E_ALL);
+ini_set('display_errors', '1');
/**
* include some common code (like we did in the 90s)
* People still do this? ;)
@@ -21,15 +22,15 @@
* approve our access
*/
$consumer->redirect();
+
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
-<html lang="en">
+<html lang="<?php echo($actual); ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>ENMI 2010 - Live Video and Annotation</title>
+ <title>Polemic tweet - Live Video and Annotation</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection">
@@ -39,8 +40,8 @@
<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/css/custom.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/css/tabs-slideshow.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="tabs-slideshow.css" type="text/css" media="screen, projection">
<link rel="stylesheet" type="text/css" href="res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" type="text/css" href="res/niceforms/niceforms-custom.css" media="screen" >
@@ -114,12 +115,26 @@
<div class="container">
<img src="images/ENMI_2010_logo.gif" class="logo">
<ul class="menu">
- <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" target="_blank" class="menuLink">S'identifier</a></li>
- <li class="menuUnderline"><a href="about.php" target="_blank" class="menuLink">A propos</a></li>
- <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >Contact</a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?CONNECT=true" class="menuLink">
+ <?php print $translate->_("S'identifier"); ?></a></li>
+ <li class="menuUnderline"><a href="about.php" class="menuLink">
+ <?php print $translate->_("A propos"); ?></a></li>
+ <li ><a href="mailto:contact@iri.centrepompidou.fr" class="menuLink" >
+ <?php print $translate->_("Contact"); ?></a></li>
+ </ul>
+
+ <ul class="menu lang" >
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
+ <img src='images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Japonais"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
+ <img src='images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Français"); ?></a></li>
+ <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
+ <img src='images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Anglais"); ?></a></li>
</ul>
-
<div class="introBox">
<div class="slider">
@@ -128,51 +143,50 @@
<!-- first slide -->
<div class="slides" style="background-image:url('images/slide0.gif');">
<p class="slideTitle" >
- 0. Comment utiliser Polemic tweet en 4 étapes :
+ <?php print $translate->_("0. TitreSlide"); ?>
</p>
<p style="padding-top:90px;padding-left:280px;width:520px;" class="slideText">
- Nous allons vous présenter comment utiliser le tweet polemci en 4 étapes
- cliquez sur les boutons ci dessous pour changer les slides.
+ <?php print $translate->_("0. TextSlide"); ?>
</p>
</div>
<div class="slides" style="background-image:url('images/slide1.jpg');">
<p class="slideTitle" >
- 1. Identifie toi
+ <?php print $translate->_("1. TitreSlide"); ?>
</p>
<br/><br/><br/><br/>
<p style="width:400px;padding-left:400px;" class="slideText">
- <a class="button_b" href="#" id="IDENTIFIER"><span>S'Identifier</span></a>sur l'application de tweet polemic,<br/> <br/>
- <a class="button_w" href="#" id="ACCES"><span>ou accèder lecture seul.</span></a>
+ <a class="button_b" href="#" id="IDENTIFIER"><span>
+ <?php print $translate->_("1.1 TextSlide"); ?></span></a>
+ <?php print $translate->_("1.2 TextSlide"); ?>,<br/> <br/>
+ <a class="button_w" href="#" id="ACCES"><span>
+ <?php print $translate->_("1.3 TextSlide"); ?></span></a>
</p>
</div>
<!-- second slide -->
<div class="slides" style="background-image:url('images/slide2.jpg');">
- <p class="slideTitle" >2. Exprime ton opinion </p>
+ <p class="slideTitle" ><?php print $translate->_("2. TitreSlide"); ?></p>
<br/><br/>
<p style="padding-top:90px;padding-left:280px;width:520px;" class="slideText">
- Utilise la syntaxe polémique en ajoutant<br/>
- les caractères suivants ("??", "++", "--", "==") <br/>
- afin de te positionner par rapport aux propos de la conférence.
+ <?php print $translate->_("2. TextSlide"); ?>
</p>
</div>
<!-- third slide -->
<div class="slides" style="background-image:url('images/slide3.gif');">
- <p class="slideTitle" >3. Visualise la polémique</p>
+ <p class="slideTitle" ><?php print $translate->_("3. TitreSlide"); ?></p>
<br/><br/>
<p style="width:400px;padding-right:400px;" class="slideText">
- 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.
+ <?php print $translate->_("3. TextSlide"); ?>
</p>
</div>
<!-- fourth slide -->
<div class="slides" style="background-image:url('images/slide4.jpg');">
- <p class="slideTitle" >4. Prochain rendez vous ! </p>
+ <p class="slideTitle" ><?php print $translate->_("4. TitreSlide"); ?></p>
<br/><br/><br/>
<p style="width:400px;padding-right:400px;" class="slideText">
- RSLN vous invite Jeudi 7 avril à 19h30, à une rencontre avec Mercedes Bunz sur le thème :
- "Comment les algorithmes ont fini par devenir des producteurs d'infos et pourquoi ils ne remplaceront pour autant jamais les journalistes."
+ <?php print $translate->_("4. TextSlide"); ?>
</p>
- <a class="button_b" href="client.php"><span> Cliquez ici pour allez sur la page de live</span> </a>
+ <a class="button_b" href="client.php"><span> <?php print $translate->_("4. Button"); ?></span> </a>
</div>
</div>
@@ -197,14 +211,12 @@
<div class="archivesBoxHeader"></div>
<div class="archivesBoxContainer">
<!-- -->
- <h3 class="archivesTitle">Les derniers événements qui ont utilisé le tweet polemic : </h3>
+ <h3 class="archivesTitle"><?php print $translate->_("Archive Title :"); ?></h3>
<div id="AVB1" class="archivesVideoBox">
- <a href="http://amateur.iri.centrepompidou.fr/nouveaumonde/enmi/conf/program/2010_2" target="_blank">
- <img src="images/tail_enmi2010.jpg" width="270" height="150"/>
- </a>
+ <img src="images/tail_enmi2010.jpg" width="270" height="150"/>
<div class="AVBtitle">ENMI 2010</div>
<div class="AVBtext">
- par <a href="http://www.iri.centrepompidou.fr" target="_blank">IRI</a> au Centre Pompidou
+ par <a href="#">IRI</a> au Centre Pompidou
<br/>les 14 et 15 décembre 2010 |· 08:30 - 10:30
</div>
</div>
@@ -215,7 +227,7 @@
</a>
<div class="AVBtitle">Clay Shirky le net, le surplus cognitif</div>
<div class="AVBtext">
- par <a href="http://www.rslnmag.fr/" target="_blank">RSLN</a> Ã Microsoft France
+ par <a href="#">RSLN</a> Ã Micorsoft France
<br/>le lundi 31 janvier 2011·| 08:30 - 10:30
</div>
</div>
@@ -226,7 +238,7 @@
</a>
<div class="AVBtitle">OPENDATA</div>
<div class="AVBtext">
- par <a href="http://www.rslnmag.fr/" target="_blank">RSLN</a> Ã Microsoft France
+ par <a href="#">RSLN</a> Ã Micorsoft France
<br/>le jeudi 17 mars 2011 | 14:30 - 17:15
</div>
</div>
@@ -238,13 +250,11 @@
<div class="footer">
<hr>
- <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank"> Tweet polemic </a>
- est une expérimentation de l'
- <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank">Institut de recherche et d’innovation </a>
- <?php
- if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
- echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>");
- }
+ <?php
+ print $translate->_("footer text home");
+ if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
+ echo("| <a href='clear.php' class='footerLink'>".$translate->_("Déconnexion")."</a>");
+ }
?>
<input type="text" id="txt" size="3" style="visibility:hidden;"/>
</div>
--- a/web/res/metadataplayer/src/js/LdtPlayer.js Thu Apr 07 16:39:32 2011 +0200
+++ b/web/res/metadataplayer/src/js/LdtPlayer.js Fri Apr 22 12:31:41 2011 +0200
@@ -1017,8 +1017,8 @@
//var tmp = document.getElementById("posit");
//if (tmp) { tmp.innerHTML = "position: " + __IriSP.currentPosition; }
__IriSP.jQuery("#slider-range-min").slider("value", obj.position);
- PaperSliderPostion = obj.position/(__IriSP.LDTligne.duration/1000)*650;
- PaperSlider.attr({x:PaperSliderPostion,y:20});
+ PaperSliderPostion = obj.position/(__IriSP.LDTligne.duration/1000)*__IriSP.config.gui.width;
+ PaperSlider.attr({x:PaperSliderPostion,y:yMax});
//PaperSlider.toFront();
//__IriSP.jQuery("#amount").val(obj.position+" s");
// afficher annotation
@@ -1050,11 +1050,29 @@
dec = Math.floor(dec/16);
}
hex = hexa.charAt(dec)+hex;
- if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ }
+ //if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ }
return(hex);
}
+/*
+private function colorNbrToHexaStr(c:int):String{
+ var s:String = c.toString(16);
+ var nbZero:uint = 6 - s.length;
+ for(var i:uint=0;i<nbZero;i++){
+ s = "0" + s;
+ }
+ return s;
+ }
+private function colorHexaStrToNbr(s:String):Number{
+ var n:Number;
+ if(s.substr(0,1)=="#") n = Number("0x" + s.substr(1));
+ else n = Number(s);
+ return n;
+ }
+*/
+
+
/* CLASS Ligne (annotationType) */
@@ -1165,7 +1183,7 @@
var title = null;
var color = null;
var tags = null;
- __IriSP.trace("annotation ","réussi")
+ __IriSP.trace("annotation ","r�ussi")
}
__IriSP.Annotation = function(json,duration){
this.id = json.id;
--- a/web/rsln-opendata/config.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/rsln-opendata/config.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,15 +1,42 @@
<?php
/**
- * Please edit all for your application registration / other details
+ * Please edit the conférence details
*
*/
-define('URL_ROOT', 'http://amateur.iri.centrepompidou.fr/live/rsln-opendata/');
+$config = array(
+ 'root' => 'http://amateur.iri.centrepompidou.fr/live/',
+
+ 'hashtag' => '#opendata,#rsln',
+ 'date' => '17.03.2011',
+ 'heure' => '14h30-18h00',
+ 'place' => 'Microsoft France',
+ 'duration' => '11514500',
+
+ 'title' => "L’Open Data, et nous, et nous, et nous ? Venez imaginer le monde de l’abondance des données !",
+ 'description'=> "De quoi le mouvement Open Data est-il le nom ? Et quelles conditions réunir pour enclencher un cercle vertueux autour de cette évolution structurelle du web, qui dessine un monde où la donnée retrouve une valeur, et peut fonder de nouvelles activités, de nouveaux secteurs économiques ?
+ <br/><br/>
+ Microsoft France, avec RSLN et le World e.gov Forum, organisent un atelier de réflexion autour du phénomène Open Data, pendant une demi-journée, le jeudi 17 mars, à partir de 14h30, pour comprendre, et imaginer, ensemble, le monde de l’abondance des données.",
+
+ 'link' => 'http://www.rslnmag.fr/blog/2011/2/10/l-open-data_et-nous_et-nous_et-nous_venez-imaginer-le-monde-de-l-abondance-des-donnees_/',
+ 'keywords' => 'opendata, données publiques, web semantique, rsln, iri,Arnaud Cavailhez,Caroline Goulard,Nicolas Hernandez,David Larlet,Jean-Marc Manach,Christophe Tallec, Bruno Walther,Nigel Shadbolt',
+ 'rep' => 'rsln-opendata',
+ 'partenaires'=> "<a href='http://www.iri.centrepompidou.fr/' class='footerLink' target='_blank'> IRI </a>
+ | <a href='http://www.rslnmag.fr/' class='footerLink' target='_blank' > RSLN </a>
+ | <a href='http://wegf.org/' class='footerLink' target='_blank'> World e.gov Forum </a>
+ | <a href='http://www.microsoft.fr/' class='footerLink' target='_blank'> MICROSOFT.fr </a>",
+
+ // After the event
+ 'metadata' => "http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f410655c-5a4d-11e0-a392-00145ea49a02",
+ 'player' => "res/metadataplayer/src/js/LdtPlayer.js"
+);
-$configuration = array(
- 'callbackUrl' => 'http://amateur.iri.centrepompidou.fr/live/rsln-opendata/callback.php',
- 'siteUrl' => 'http://twitter.com/oauth',
- 'consumerKey' => '***REMOVED***',
- 'consumerSecret' => '***REMOVED***'
-);
+$player_width = 600;
+$player_height = 480;
+?>
+
+
+
+
+
--- a/web/rsln-opendata/polemicaltimeline.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/rsln-opendata/polemicaltimeline.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,32 +1,51 @@
+<?php
+
+/**
+ * include some common code (like we did in the 90s)
+ * People still do this? ;)
+ */
+ // configuration
+include $_SERVER['DOCUMENT_ROOT'].'/common.php';
+ // objet actuel
+include_once 'config.php';
+
+?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
+<html lang="<?php echo($actual); ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>RSLN - Live Video and Annotation</title>
+ <title>Polemic tweet - <?php echo($config['title']); ?></title>
+ <meta name="keywords" content="<?php echo($config['keywords']); ?>"><!-- add timestampedmetadata -->
+ <!--<meta name="description" content="PoelmicTweet.fr : debate mapping, opinion, conference, video">-->
+ <meta name="description" content="<?php echo($config['description']); ?>">
+ <meta name="robots" content="index, follow">
-
+ <!-- ICI : <?php echo($_SERVER['DOCUMENT_ROOT']); ?> -->
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="res/raphael/raphael-min.js"></script>
-
+ <script type="text/javascript" src="../res/raphael/raphael-min.js"></script>
+ <script type="text/javascript" src="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
+ <script type="text/javascript" src="../res/niceforms/niceforms.js"></script>
+
<!-- Framework CSS -->
<link rel="stylesheet" href="../res/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../res/blueprint/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="../res/css/custom.css" type="text/css" media="screen, projection">
-
-
+ <link rel="stylesheet" href="../custom.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<!-- FONT -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'>
+
<style type="text/css">
.tweetButton{float:left;margin-right:5px;}
- .videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:698px;}
- .videoLive{width:650px;height:700px;background:#fff;float:right;margin-top:10px;padding:5px;}
- .tweetExplain{background-image:url(images/tweetExplainBgd.gif);width:250px;height:690px;padding:10px;position:absolute; margin-top:70px;}
- .footer{margin-top:790px;width:960px;height:20px;position:absolute;text-align:center;}
+ .videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;}
+ .videoLive{width:650px;height:640px;background:#fff;float:right;margin-top:20px;padding:5px;}
+
+ .tweetExplain{background-image:url(images/tweetExplainBgd.gif);width:250px;height:640px;padding:10px;position:absolute; margin-top:70px;}
+ .footer{margin-top:740px;width:960px;height:20px;position:absolute;text-align:center;}
.tooltip{
z-index: 10000000000;
}
@@ -52,8 +71,8 @@
overflow:hidden;
}
#chartTimeline{
- padding-top: 449px;
- z-index: 100000;
+ padding-top: 0px;
+ z-index: 9;
position : absolute;
}
@@ -72,409 +91,101 @@
})();
</script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+
+ $("#Embeded").fancybox({
+ 'width' : 360,
+ 'height' : 360,
+ 'autoDimensions' : false,
+ 'transitionIn' : 'none',
+ 'transitionOut' : 'none',
+ 'type' : 'iframe'
+ });
+
+ });
+ </script>
+
</head>
-
- <script type="text/javascript">
- // CHART TIMELINE / VERSION PROTOTYPE ::
-
- // configuration
+ <script type="text/javascript">
+ // Configuration Polemical Timeline
var config = {
target:"chartTimeline",
x:8,
y:418,
width:650,
- height:110,
- heightmax:130
- }
- // Make and define the Raphael area
- //var paper = Raphael(document.getElementById(config.target),config.width, config.height);
-
- function ChartTimeLine (){
-
- //var paper = Raphael(config.x, config.y,config.width, config.height);
-
- //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"});
-
- // variable
-
- var yCoef = 2; // coef for height of 1 tweet
- var frameSize = 5; // frame size
- var margin = 1; // marge between frame
- var lineSize = 650; // timeline pixel width
- var nbrframes = lineSize/frameSize; // frame numbers
- var numberOfTweet = 0; // number of tweet overide later
- var duration = 11514500 ; // timescale width
- var frameLenght = lineSize/frameSize;// frame timescale
- var timeline;
- var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
-
- // array
- var tweets = new Array();
- var element = new Array();
- var cluster = new Array();
- var frames = new Array(frameLenght);
- var slices = new Array();
-
-
- // Classes =======================================================================
- var Frames = function(){
-
- var Myclusters;
- var x;
- var y;
- var width;
- var height;
- };
- Frames = function(json){
- // make my clusters
- // ou Frame vide
- };
- Frames.prototype.draw = function(){
- }
- Frames.prototype.zoom = function(){
- }
- Frames.prototype.inside = function(){
- }
- var Clusters = function(){
- var Object;
- var yDist;
- var x;
- var y;
- var width;
- var height;
- };
- Clusters = function(json){
- // make my object
- };
- var Tweet = function(){
- }
- // Classes =======================================================================
-
- // trace function
- var traceNum = 0;
- function trace(msg,value){
- traceNum += 1;
- __IriSP.jQuery("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output");
- }
-
- // Refactoring (parametere) ************************************************************
- // color translastion
- function colorTranslation(value){
- if(value == "Q"){
- return 2;
- }else if(value =="REF"){
- return 4;
- }else if(value =="OK"){
- return 1;
- }else if(value =="KO"){
- return 3;
- }else if(value ==""){
- return 5;
- }
- }
-
-
- // Refactoring (parametere) ************************************************************
- // load tweets send in parameters
- __IriSP.jQuery.ajax({
- dataType: "jsonp",
- url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f410655c-5a4d-11e0-a392-00145ea49a02",
- success : function(json){
- trace("load","");
- __IriSP.jQuery.each(json.annotations, function(i,item) {
-
- var MyTime = Math.floor(item.begin/duration*lineSize);
- var Myframe = Math.floor(MyTime/lineSize*frameLenght);
-
- if (item.content['polemics'] != undefined) {
- if (item.content['polemics'][0] != null) {
-
- for(var j=0; j<item.content['polemics'].length; j++){
-
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(item.content['polemics'][j]),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
- }else{
- //trace("k = ",i);
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(""),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
-
- } else {
- //trace("tweet qualification = ","null");
+ height:480,
+ heightmax:480,
+ duration:<?php echo($config['duration']); ?>,
+ metadata:"<?php echo($config['metadata']); ?>"
}
- });
- trace("======= ",numberOfTweet);
- DrawTweets ();
-
- }
- });
-
-
- // tweet Drawing (in raphael)
- function DrawTweets (){
- // GROUPES TWEET ============================================
- // Count nbr of cluster and tweet in a frame an save int in "frames"
- numberOfTweet = tweets.length;
- for(var i=0; i<nbrframes; i++) {
- for(var j=0; j<numberOfTweet; j++) {
-
- if (i==tweets[j].yframe){
-
- var k = tweets[j].qualification;
-
- // make array for frame cluster
- if(frames[i]==undefined){
- frames[i] = {id:i,
- qualifVol:new Array(),
- mytweetsID:new Array()
- };
- }
- // add my tweet to frame
- frames[i].mytweetsID.push(tweets[j]);
-
- // count opinion by frame
- if( frames[i].qualifVol[k] == undefined){
- frames[i].qualifVol[k] = 1;
- }else{
- frames[i].qualifVol[k] += 1;
- }
-
- }
- }
- }
-
- // GROUPES TWEET ============================================
- // max of tweet by Frame
- var max = 0;
- for(var i=0; i<nbrframes; i++) {
- var moy = 0;
- for (var j=0; j<6; j++){
- if (frames[i]!=undefined){
- if (frames[i].qualifVol[j]!=undefined){
- moy += frames[i].qualifVol[j]
- }
- }
- }
- //trace("frame "+i,moy);
- if (moy>max){max=moy;}
- }
-
- var tweetDrawed = new Array();
- var TweetHeight = 5;
- // DRAW TWEETS ============================================
- for(var i=0; i<nbrframes;i++) {
- var addEheight = 5;
- if (frames[i]!=undefined){
- trace (i+" k=",frames[i].mytweetsID.length);
- // by type
- for (var j=6; j>-1; j--){
- if (frames[i].qualifVol[j]!=undefined){
- // show tweet by type
- for (var k=0; k<frames[i].mytweetsID.length; k++){
- if (frames[i].mytweetsID[k].qualification==j){
- e = paper.rect( i*frameSize, // x
- config.heightmax-addEheight, // y
- frameSize-margin, // width
- TweetHeight // height
- ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
- addEheight +=TweetHeight;
- e.time= frames[i].mytweetsID[k].timeframe;
- e.title= frames[i].mytweetsID[k].title;
- e.mouseover(function () {
- //this.attr({stroke:"#fff","stroke-width":5});
- //this.toFront();
- }).mouseout(function () {
- //this.attr({stroke:"#00","stroke-width":0.1});
- }).mousedown(function () {
- __IriSP.MyApiPlayer.seek(this.time/1000)
- });
- __IriSP.jQuery(e.node).attr('id', 't'+k+'');
- __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
- __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
- var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight}
- addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition);
- //frames[i].mytweetsID.pop();
- }
- }
- }
- }
- }
- PaperSlider.toFront();
- }
-
- }
- //
- PaperSlider.toFront();
- }
-
-
- $(document).mousemove(function(e){
- if (over){
- __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160);
- __IriSP.jQuery("#tipcolor").css("background-color", tipColor)
- __IriSP.jQuery("#tiptext").text(tipText);
- __IriSP.jQuery("#tip").show();
- }else{
- __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000);
- //tweetSelection.attr({x:-100,y:-100});
- }
- });
-
- var over = false;
- var tipText = "";
- var tipColor = "#efefef";
- var tweetSelection;
- var PaperSlider;
-
- // AddTip ******************************************************************************
- function addTip(node, txt,color,tempPosition){
- __IriSP.jQuery(node).mouseover(function(){
- tipText = txt;
- //tip.hide();//fadeIn(0);
- tipColor = color;
- over = true;
- //tweetSelection.attr(tempPosition);
- //tweetSelection.toFront();
- }).mouseout(function(){
- //tip.show()//tip.fadeOut(0);
- over = false;
- });
-
-
- }
-
- $(document).ready(function() {
- var tip = __IriSP.jQuery("#tip").hide();
- //ChartTimeLine();
-
- });
- </script>
+ </script>
+ <script type='text/javascript' src='../res/metadataplayer.polemic/src/js/polemic.js'></script>
<body>
-<!-- SCRIPT RAPHAEL -->
-
-
<!-- tooltip -->
<div id="tip">
<div id="tipcolor" style="height:10px;width:10px"></div>
<div id="tiptext"></div>
</div>
-
-
-
-
-
<div class="container">
-
+ <img src="images/ENMI_2010_logo.gif" class="logo">
+ <ul class="menu">
+ <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil">
+ <?php print $translate->_("Accueil"); ?></a></li>
+ <li class="menuUnderline"><a href="embed_form.php" class="menuLink" id="Embeded">
+ <?php print $translate->_("Partager"); ?></a></li>
+ <li > </li>
+ </ul>
+
+ <ul class="menu" >
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
+ <img src='../images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Japonais"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
+ <img src='../images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Français"); ?></a></li>
+ <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
+ <img src='../images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Anglais"); ?></a></li>
+ </ul>
+ <div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
- <img src="images/ENMI_2010_logo.gif" class="logo">
+ <!-- EXPLICATION -->
+ <div class="tweetExplain" >
+ <h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?> </h3><br/>
+ <?php print $translate->_("ExplicationPT"); ?>
+ </div>
+
- <ul class="menu">
- <li class="menuUnderline"> </li>
- <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil"> Accueil</a></li>
- <li ><a href="http://www.rslnmag.fr/blog/2011/3/13/_nous-en-sommes-2020_toutes-les-donnees-sont-liberees_/" class="menuLink" target="_blank"> Programme</a>
-
- </ul>
-<div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
-
+ <!-- INFOS SUR LA CONF
+ <div class="tweetExplain" >
+ <h3 class="tweetWriterTitle"><?php echo($config['title']); ?></h3><br/>
+ <?php echo($config['description']); ?>
+ </div>
+ -->
-
- <div class="tweetExplain" >
- <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/>
- l’Institut de recherche et d’innovation (Iri) vous a proposé une expérimentation et une démonstration d’un dispositif d’annotation polémique basé sur twitter.
-Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de
-l'auditoire durant la conférence.
-<br/><br/>
- Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat :
- <table>
- <tr>
- <td>
- <a
-
- id="positive"
- title="accord"
- class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td>
- </tr>
- <tr>
- <td>
-
- <a
-
- id="negative"
- title="désaccord"
- class="tweetButton">--</a></td><td> à un tweet de désaccord,</td>
- </tr>
- <tr>
- <td>
- <a
-
- id="reference"
- title="reference"
- class="tweetButton">==</a></td><td> à un tweet de référence</td>
- </tr>
- <tr>
- <td>
- <a
-
- id="question"
- title="question"
- class="tweetButton"> ??</a></td><td> Ã une question</td>
- </tr>
- </table>
-
- 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.
-
- <br/><br/>
-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Â
- <br/>
- <br/>Merci a RSLN pour cette expérimentation !
- </div>
-
-
-
-
-
<div class="videoLive" >
<div class="videoLivePlayer">
<div id="chartTimeline"> </div>
<script type="text/javascript">
-var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
- paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});
- paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1});
- PaperSlider = paper.rect(0,20,1,100).attr({fill:"#fff",stroke: "none",opacity: 1});
- // decalage
- tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});
+ var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
</script>
- <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script>
+ <script type='text/javascript' src='../res/metadataplayer/src/js/LdtPlayer.js'></script>
<script type="text/javascript">
- $.extend(__IriSP.lib,{jQueryToolTip:"res/metadataplayer/res/js/jquery.tools.min.js"});
+ $.extend(__IriSP.lib,{jQueryToolTip:"../res/metadataplayer/res/js/jquery.tools.min.js"});
</script>
+
<div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div>
-
<script type="text/javascript">
var configMP = {
/*metadata:{
@@ -483,11 +194,11 @@
load:'json'},*/
metadata:{
format:'cinelab',
- src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/f410655c-5a4d-11e0-a392-00145ea49a02',
+ src:'<?php echo($config['metadata']); ?>',
load:'jsonp'},
gui:{
width:650,
- height:560,
+ height:480,
mode:'video',
container:'player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed',
debug:false,
@@ -495,38 +206,20 @@
player:{
type:'jwplayer',
- src:'http://www.iri.centrepompidou.fr/dev/ldt/static/ldt/swf/player.swf'}
+ src:'http://www.iri.centrepompidou.fr//dev/ldt/static/ldt/swf/player.swf'}
};
- __IriSP.init(configMP);
+ __IriSP.init(configMP);
</script>
-
</div>
-
</div>
-
-
-
-
+
<div class="footer">
<hr>
- <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank">
- IRI </a>
- | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a>
- | <a href="http://wegf.org/" class="footerLink" target="_blank"> World e.gov Forum </a>
- | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a>
- <?php
- if (isset($_SESSION['TWITTER_ACCESS_TOKEN'])){
- echo("| <a href='clear.php' class='footerLink'>Déconnexion</a>");
- }
- ?>
+ <?php echo($config['partenaires']); ?>
</div>
</div>
-
-
-
-
</body>
</html>
--- a/web/rsln/config.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/rsln/config.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,15 +1,47 @@
-<?php
-
-/**
- * Please edit all for your application registration / other details
- *
- */
-
-define('URL_ROOT', 'http://amateur.iri.centrepompidou.fr/live/rsln/');
-
-$configuration = array(
- 'callbackUrl' => 'http://amateur.iri.centrepompidou.fr/live/rsln/callback.php',
- 'siteUrl' => 'http://twitter.com/oauth',
- 'consumerKey' => '***REMOVED***',
- 'consumerSecret' => '***REMOVED***'
-);
+<?php
+
+/**
+ * Please edit the conférence details
+ *
+ */
+
+$config = array(
+ 'root' => 'http://amateur.iri.centrepompidou.fr/live/',
+
+ 'hashtag' => '#rsln',
+ 'date' => '2010',
+ 'heure' => '',
+ 'place' => '',
+ 'duration' => '4299820',
+
+ 'title' => "Clay Shirky : « Personne n'est titulaire du code source de la démocratie »",
+ 'description'=> "Journaliste américain spécialiste des nouvelles technologies de l'information et de la communication - NTIC, Clay Shirky est aussi consultant, écrivain, professeur.<br/><br/>
+ Diplômé de l'Université de New York il écrit et enseigne, entre autres, sur les effets de corrélation de la topologie sociale et technologique de réseau, où comment nos réseaux forment la culture et inversement.<br/><br/>
+ <br/><b> Dernier ouvrages :</b> <ul>
+ <li> <a href='http://isbn.nu/9781594202537?asim' target='_blank'>2010 : Cognitive Surplus: Creativity and Generosity in a Connected Age </a></li>
+ <li> <a href='http://isbn.nu/9781594201530' target='_blank'>2008 : Here Comes Everybody: The Power of Organizing Without Organizations</a></li></ul>
+ <b>Source :</b> <a href='http://fr.wikipedia.org/wiki/Clay_Shirky' target='_blank'> Wikipedia.fr</a>
+ <br/> <b>Plus d'information : </b> <a href='http://www.shirky.com/' target='_blank'>www.shirky.com</a>
+ <br/> <b>Crédit photo : </b> <a href='http://www.flickr.com/photos/poptech2006/2969510044/' target='_blank'> CC BY NA - Pop!Tech 2008</a>",
+
+ 'link' => 'http://www.rslnmag.fr/blog/2011/1/17/clay-shirky_-personne-n-est-titulaire-du-code-source-de-la-democratie_/',
+ 'keywords' => 'digital, democratie, clayshirky, rsln, iri',
+ 'rep' => 'rsln',
+ 'partenaires'=> "<a href='http://www.iri.centrepompidou.fr/' class='footerLink' target='_blank'> IRI </a>
+ | <a href='http://www.rslnmag.fr/' class='footerLink' target='_blank' > RSLN </a>
+ | <a href='http://www.slate.fr/' class='footerLink' target='_blank'> SLATE.fr </a>
+ | <a href='http://www.microsoft.fr/' class='footerLink' target='_blank'> MICROSOFT.fr </a>",
+
+ // After the event
+ 'metadata' => "http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02",
+ 'player' => "res/metadataplayer/src/js/LdtPlayer.js"
+);
+
+$player_width = 600;
+$player_height = 480;
+?>
+
+
+
+
+
--- a/web/rsln/polemicaltimeline.php Thu Apr 07 16:39:32 2011 +0200
+++ b/web/rsln/polemicaltimeline.php Fri Apr 22 12:31:41 2011 +0200
@@ -1,26 +1,44 @@
+<?php
+
+/**
+ * include some common code (like we did in the 90s)
+ * People still do this? ;)
+ */
+ // configuration
+include $_SERVER['DOCUMENT_ROOT'].'/common.php';
+ // objet actuel
+include_once 'config.php';
+
+?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html lang="en">
+<html lang="<?php echo($actual); ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>RSLN - Live Video and Annotation</title>
+ <title>Polemic tweet - <?php echo($config['title']); ?></title>
+ <meta name="keywords" content="<?php echo($config['keywords']); ?>"><!-- add timestampedmetadata -->
+ <!--<meta name="description" content="PoelmicTweet.fr : debate mapping, opinion, conference, video">-->
+ <meta name="description" content="<?php echo($config['description']); ?>">
+ <meta name="robots" content="index, follow">
-
+ <!-- ICI : <?php echo($_SERVER['DOCUMENT_ROOT']); ?> -->
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="res/raphael/raphael-min.js"></script>
-
+ <script type="text/javascript" src="../res/raphael/raphael-min.js"></script>
+ <script type="text/javascript" src="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
+ <script type="text/javascript" src="../res/niceforms/niceforms.js"></script>
+
<!-- Framework CSS -->
- <link rel="stylesheet" href="res/blueprint/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="res/blueprint/print.css" type="text/css" media="print">
- <link rel="stylesheet" href="res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
- <link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">
-
-
+ <link rel="stylesheet" href="../res/blueprint/screen.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="../res/blueprint/print.css" type="text/css" media="print">
+ <link rel="stylesheet" href="../res/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="../custom.css" type="text/css" media="screen, projection">
+ <link rel="stylesheet" href="../res/jquery.fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<!-- FONT -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Geo&subset=latin' rel='stylesheet' type='text/css'>
+
<style type="text/css">
.tweetButton{float:left;margin-right:5px;}
.videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:638px;}
@@ -53,8 +71,8 @@
overflow:hidden;
}
#chartTimeline{
- padding-top: 410px;
- z-index: 100000;
+ padding-top: 0px;
+ z-index: 9;
position : absolute;
}
@@ -73,408 +91,101 @@
})();
</script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+
+ $("#Embeded").fancybox({
+ 'width' : 360,
+ 'height' : 360,
+ 'autoDimensions' : false,
+ 'transitionIn' : 'none',
+ 'transitionOut' : 'none',
+ 'type' : 'iframe'
+ });
+
+ });
+ </script>
+
</head>
-
- <script type="text/javascript">
- // CHART TIMELINE / VERSION PROTOTYPE ::
-
- // configuration
+ <script type="text/javascript">
+ // Configuration Polemical Timeline
var config = {
target:"chartTimeline",
x:8,
y:418,
width:650,
- height:70,
- heightmax:70
- }
- // Make and define the Raphael area
- //var paper = Raphael(document.getElementById(config.target),config.width, config.height);
-
- function ChartTimeLine (){
-
- //var paper = Raphael(config.x, config.y,config.width, config.height);
-
- //paper.rect(0,20,1,1).attr({fill:"#fff",stroke: "none"});
-
- // variable
-
- var yCoef = 2; // coef for height of 1 tweet
- var frameSize = 5; // frame size
- var margin = 1; // marge between frame
- var lineSize = 650; // timeline pixel width
- var nbrframes = lineSize/frameSize; // frame numbers
- var numberOfTweet = 0; // number of tweet overide later
- var duration = 4299820 ; // timescale width
- var frameLenght = lineSize/frameSize;// frame timescale
- var timeline;
- var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
-
- // array
- var tweets = new Array();
- var element = new Array();
- var cluster = new Array();
- var frames = new Array(frameLenght);
- var slices = new Array();
-
-
- // Classes =======================================================================
- var Frames = function(){
-
- var Myclusters;
- var x;
- var y;
- var width;
- var height;
- };
- Frames = function(json){
- // make my clusters
- // ou Frame vide
- };
- Frames.prototype.draw = function(){
- }
- Frames.prototype.zoom = function(){
- }
- Frames.prototype.inside = function(){
- }
- var Clusters = function(){
- var Object;
- var yDist;
- var x;
- var y;
- var width;
- var height;
- };
- Clusters = function(json){
- // make my object
- };
- var Tweet = function(){
- }
- // Classes =======================================================================
-
- // trace function
- var traceNum = 0;
- function trace(msg,value){
- traceNum += 1;
- __IriSP.jQuery("<div>"+traceNum+" - "+msg+" : "+value+"</div>").appendTo("#output");
- }
-
- // Refactoring (parametere) ************************************************************
- // color translastion
- function colorTranslation(value){
- if(value == "Q"){
- return 2;
- }else if(value =="REF"){
- return 4;
- }else if(value =="OK"){
- return 1;
- }else if(value =="KO"){
- return 3;
- }else if(value ==""){
- return 5;
- }
- }
-
-
- // Refactoring (parametere) ************************************************************
- // load tweets send in parameters
- __IriSP.jQuery.ajax({
- dataType: "jsonp",
- url:"http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02",
- success : function(json){
- trace("load","");
- __IriSP.jQuery.each(json.annotations, function(i,item) {
-
- var MyTime = Math.floor(item.begin/duration*lineSize);
- var Myframe = Math.floor(MyTime/lineSize*frameLenght);
-
- if (item.content['polemics'] != undefined) {
- if (item.content['polemics'][0] != null) {
-
- for(var j=0; j<item.content['polemics'].length; j++){
-
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(item.content['polemics'][j]),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
- }else{
- //trace("k = ",i);
- tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(""),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin
- }
- numberOfTweet+=1;
- }
-
- } else {
- //trace("tweet qualification = ","null");
+ height:480,
+ heightmax:480,
+ duration:<?php echo($config['duration']); ?>,
+ metadata:"<?php echo($config['metadata']); ?>"
}
- });
- trace("======= ",numberOfTweet);
- DrawTweets ();
-
- }
- });
-
-
- // tweet Drawing (in raphael)
- function DrawTweets (){
- // GROUPES TWEET ============================================
- // Count nbr of cluster and tweet in a frame an save int in "frames"
- numberOfTweet = tweets.length;
- for(var i=0; i<nbrframes; i++) {
- for(var j=0; j<numberOfTweet; j++) {
-
- if (i==tweets[j].yframe){
-
- var k = tweets[j].qualification;
-
- // make array for frame cluster
- if(frames[i]==undefined){
- frames[i] = {id:i,
- qualifVol:new Array(),
- mytweetsID:new Array()
- };
- }
- // add my tweet to frame
- frames[i].mytweetsID.push(tweets[j]);
-
- // count opinion by frame
- if( frames[i].qualifVol[k] == undefined){
- frames[i].qualifVol[k] = 1;
- }else{
- frames[i].qualifVol[k] += 1;
- }
-
- }
- }
- }
-
- // GROUPES TWEET ============================================
- // max of tweet by Frame
- var max = 0;
- for(var i=0; i<nbrframes; i++) {
- var moy = 0;
- for (var j=0; j<6; j++){
- if (frames[i]!=undefined){
- if (frames[i].qualifVol[j]!=undefined){
- moy += frames[i].qualifVol[j]
- }
- }
- }
- //trace("frame "+i,moy);
- if (moy>max){max=moy;}
- }
-
- var tweetDrawed = new Array();
- var TweetHeight = 5;
- // DRAW TWEETS ============================================
- for(var i=0; i<nbrframes;i++) {
- var addEheight = 5;
- if (frames[i]!=undefined){
- trace (i+" k=",frames[i].mytweetsID.length);
- // by type
- for (var j=6; j>-1; j--){
- if (frames[i].qualifVol[j]!=undefined){
- // show tweet by type
- for (var k=0; k<frames[i].mytweetsID.length; k++){
- if (frames[i].mytweetsID[k].qualification==j){
- e = paper.rect( i*frameSize, // x
- config.heightmax-addEheight, // y
- frameSize-margin, // width
- TweetHeight // height
- ).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
- addEheight +=TweetHeight;
- e.time= frames[i].mytweetsID[k].timeframe;
- e.title= frames[i].mytweetsID[k].title;
- e.mouseover(function () {
- //this.attr({stroke:"#fff","stroke-width":5});
- //this.toFront();
- }).mouseout(function () {
- //this.attr({stroke:"#00","stroke-width":0.1});
- }).mousedown(function () {
- __IriSP.MyApiPlayer.seek(this.time/1000)
- });
- __IriSP.jQuery(e.node).attr('id', 't'+k+'');
- __IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
- __IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
- var tempPosition = {x:i*frameSize,y:config.heightmax-addEheight}
- addTip(e.node, frames[i].mytweetsID[k].title,colors[j],tempPosition);
- //frames[i].mytweetsID.pop();
- }
- }
- }
- }
- }
- PaperSlider.toFront();
- }
-
- }
- //
- PaperSlider.toFront();
- }
-
-
- $(document).mousemove(function(e){
- if (over){
- __IriSP.jQuery("#tip").css("left", e.pageX-106).css("top", e.pageY-160);
- __IriSP.jQuery("#tipcolor").css("background-color", tipColor)
- __IriSP.jQuery("#tiptext").text(tipText);
- __IriSP.jQuery("#tip").show();
- }else{
- __IriSP.jQuery("#tip").css("left", -10000).css("top", -100000);
- //tweetSelection.attr({x:-100,y:-100});
- }
- });
-
- var over = false;
- var tipText = "";
- var tipColor = "#efefef";
- var tweetSelection;
- var PaperSlider;
-
- // AddTip ******************************************************************************
- function addTip(node, txt,color,tempPosition){
- __IriSP.jQuery(node).mouseover(function(){
- tipText = txt;
- //tip.hide();//fadeIn(0);
- tipColor = color;
- over = true;
- //tweetSelection.attr(tempPosition);
- //tweetSelection.toFront();
- }).mouseout(function(){
- //tip.show()//tip.fadeOut(0);
- over = false;
- });
-
-
- }
-
- $(document).ready(function() {
- var tip = __IriSP.jQuery("#tip").hide();
- //ChartTimeLine();
-
- });
- </script>
+ </script>
+ <script type='text/javascript' src='../res/metadataplayer.polemic/src/js/polemic.js'></script>
<body>
-<!-- SCRIPT RAPHAEL -->
-
-
<!-- tooltip -->
<div id="tip">
<div id="tipcolor" style="height:10px;width:10px"></div>
<div id="tiptext"></div>
</div>
-
-
-
-
-
<div class="container">
-
+ <img src="images/ENMI_2010_logo.gif" class="logo">
+ <ul class="menu">
+ <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil">
+ <?php print $translate->_("Accueil"); ?></a></li>
+ <li class="menuUnderline"><a href="embed_form.php" class="menuLink" id="Embeded">
+ <?php print $translate->_("Partager"); ?></a></li>
+ <li > </li>
+ </ul>
+
+ <ul class="menu" >
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=ja_JP" class="menuLink" >
+ <img src='../images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Japonais"); ?></a></li>
+ <li class="menuUnderline"><a href="<?php URL_ROOT ?>?lang=fr" class="menuLink">
+ <img src='../images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Français"); ?></a></li>
+ <li ><a href="<?php URL_ROOT ?>?lang=en" class="menuLink">
+ <img src='../images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+ <?php print $translate->_("Anglais"); ?></a></li>
+ </ul>
+ <div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
- <img src="images/ENMI_2010_logo.gif" class="logo">
- <ul class="menu">
- <li class="menuUnderline"> </li>
- <li class="menuUnderline"><a href="../" class="menuLink" id="Accueil"> Accueil</a></li>
- <li ><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>
-
- </ul>
-<div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
-
+ <!-- EXPLICATION -->
+ <div class="tweetExplain" >
+ <h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?> </h3><br/>
+ <?php print $translate->_("ExplicationPT"); ?>
+ </div>
+
+
+ <!-- INFOS SUR LA CONF
+ <div class="tweetExplain" >
+ <h3 class="tweetWriterTitle"><?php echo($config['title']); ?></h3><br/>
+ <?php echo($config['description']); ?>
+ </div>
+ -->
-
- <div class="tweetExplain" >
- <h3 class="tweetWriterTitle">Annotations polémique : </h3><br/>
- l’Institut de recherche et d’innovation (Iri) vous a proposé une expérimentation et une démonstration d’un dispositif d’annotation polémique basé sur twitter.
-Cette qualification de vos tweets nous a permis de créer une timeline polemique représentant les positions de
-l'auditoire durant la conférence.
-<br/><br/>
- Cette syntaxe polémique vous a premis de prendre position relativement à l’intervenant ou aux autres participants au débat :
- <table>
- <tr>
- <td>
- <a
-
- id="positive"
- title="accord"
- class="tweetButton">++</a> </td><td>correspond à un tweet d’assentiment</td>
- </tr>
- <tr>
- <td>
-
- <a
-
- id="negative"
- title="désaccord"
- class="tweetButton">--</a></td><td> à un tweet de désaccord,</td>
- </tr>
- <tr>
- <td>
- <a
-
- id="reference"
- title="reference"
- class="tweetButton">==</a></td><td> à un tweet de référence</td>
- </tr>
- <tr>
- <td>
- <a
-
- id="question"
- title="question"
- class="tweetButton"> ??</a></td><td> Ã une question</td>
- </tr>
- </table>
-
- 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.
-
- <br/><br/>
-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Â
- <br/>
- <br/>Merci a RSLN pour cette expérimentation !
- </div>
-
-
-
-
-
<div class="videoLive" >
<div class="videoLivePlayer">
<div id="chartTimeline"> </div>
<script type="text/javascript">
-var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
- paper.rect(0,20,config.width,config.heightmax-20).attr({fill:"#fff","stroke-width":0.1,opacity: 0.1});
- paper.rect(0,20,config.width,2).attr({fill:"#fff",stroke: "none",opacity: 1});
- PaperSlider = paper.rect(0,20,1,50).attr({fill:"#fff",stroke: "none",opacity: 1});
- // decalage
- tweetSelection = paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});
+ var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
</script>
- <script type='text/javascript' src='res/metadataplayer/src/js/LdtPlayer.js'></script>
+ <script type='text/javascript' src='../res/metadataplayer/src/js/LdtPlayer.js'></script>
<script type="text/javascript">
- $.extend(__IriSP.lib,{jQueryToolTip:"res/metadataplayer/res/js/jquery.tools.min.js"});
+ $.extend(__IriSP.lib,{jQueryToolTip:"../res/metadataplayer/res/js/jquery.tools.min.js"});
</script>
+
<div id="player_project_13b0aa52-336b-11e0-b233-00145ea49a02_embed" class="iri_player_embed"> </div>
-
<script type="text/javascript">
var configMP = {
/*metadata:{
@@ -483,7 +194,7 @@
load:'json'},*/
metadata:{
format:'cinelab',
- src:'http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/13b0aa52-336b-11e0-b233-00145ea49a02',
+ src:'<?php echo($config['metadata']); ?>',
load:'jsonp'},
gui:{
width:650,
@@ -499,29 +210,16 @@
};
__IriSP.init(configMP);
</script>
-
</div>
-
</div>
-
-
-
-
+
<div class="footer">
<hr>
- <a href="http://www.iri.centrepompidou.fr/" class="footerLink" target="_blank">
- IRI </a>
- | <a href="http://www.rslnmag.fr/" class="footerLink" target="_blank" > RSLN </a>
- | <a href="http://www.slate.fr/" class="footerLink" target="_blank"> SLATE.fr </a>
- | <a href="http://www.microsoft.fr/" class="footerLink" target="_blank"> MICROSOFT.fr </a>
+ <?php echo($config['partenaires']); ?>
</div>
</div>
-
-
-
-
</body>
</html>
