--- a/integration/home.html Tue Oct 30 18:04:28 2012 +0100
+++ b/integration/home.html Tue Nov 27 18:08:06 2012 +0100
@@ -10,14 +10,16 @@
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/home.css" />
+ <link rel="stylesheet" href="css/article.css" />
<link rel="stylesheet" href="css/ui-red/jquery-ui.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
-
+
<div class="wrap">
+
<div class="header">
<div class="logo">
<div class="date">
@@ -30,44 +32,44 @@
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
- <a href="#" class="photo"></a>
- <input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
- <input type="submit" value="" class="recherche-submit"/>
+ <a data-trace-id="" data-trace-type="search" data-trace-view="head-search-snap" href="#" class="photo"></a>
+ <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-query" name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
+ <input data-trace-id="" data-trace-type="search" data-trace-view="head-search-submit" type="submit" value="" class="recherche-submit"/>
</p>
</form>
</div>
<ul class="header-menu">
- <li><a href="#"><img src="img/home-button.jpg" alt="" /> </a></li>
- <li><a href="#">INTERNATIONAL</a></li>
- <li><a href="#">FRANCE</a></li>
- <li><a href="#">ECONOMIE</a></li>
- <li><a href="#">CULTURE</a></li>
- <li><a href="#">CLUSTER X</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-home" title="accueil" class="home" href="#"></a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-international" href="#">INTERNATIONAL</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-france" href="#">FRANCE</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-economie" href="#">ECONOMIE</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-culture" href="#">CULTURE</a></li>
+ <li><a data-trace-id="" data-trace-type="navigation" data-trace-view="navigation-cluster" href="#">CLUSTER X</a></li>
</ul>
<div class="login-wrap">
<h2>CONNECTER VOUS</h2>
<form action="#">
- <p><input type="text" name="identifiant" placeholder="Identifiant" /></p>
+ <p><input data-trace-id="" data-trace-type="login" data-trace-view="login-login" type="text" name="identifiant" placeholder="Identifiant" /></p>
<p class="submit-wrap">
- <input class="password" type="password" name="password"/>
- <input class="submit-button" type="submit" value="OK" />
+ <input data-trace-id="" data-trace-type="login" data-trace-view="login-password" class="password" type="password" name="password"/>
+ <input data-trace-id="" data-trace-type="login" data-trace-view="login-submit" class="submit-button" type="submit" value="OK" />
</p>
</form>
- <p class="password-lost"><a href="">Mot de passe oublié ?</a> </p>
+ <p class="password-lost"><a data-trace-id="" data-trace-type="login" data-trace-view="login-password-lost" href="">Mot de passe oublié ?</a> </p>
</div>
- <a href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="open-dossiers-documentaires" href="#" class="dossier-button">DOSSIERS DOCUMENTAIRES</a>
<div class="dossier-documentaire">
<div class="dossier-documentaire-inner">
<h2>MES DOSSIERS</h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="link-dossiers-documentaires" data-trace-weight="1" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -94,7 +96,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="new-dossiers-documentaires" data-trace-weight="1" href="#">
<img src="img/documentaire-nouveau-dossier.jpg" alt="" />
<span class="documentaire-texte">
<h3>NOUVEAU DOSSIER</h3>
@@ -104,7 +106,7 @@
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a data-trace-id="" data-trace-type="dossiers-documentaires" data-trace-view="more-dossiers-documentaires" data-trace-weight="1" class="documentaire-lien" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
@@ -160,104 +162,215 @@
</div>
<div class="content-right">
- <div class="actus">
- <!--
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-1.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+
+ <div id="treemap">
+ <div id="actus" class="actus">
+ </div> <!-- actus -->
+ </div>
+
+
+ <div id="liste">
+ <div class="articles">
+
+ <div class="tooltip"></div>
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="48 annotations" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-1.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-3.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-2.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-4.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+ </div><!--article -->
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
- <div class="actu">
- <a href="#">
- <img src="img/home-visuel-3.jpg" alt="" />
- </a>
- <div class="inner-actu">
- <h2> <a href="#">Affaires Bettecourt</a></h2>
- <div class="links">
- <ul>
- <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
- <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
- <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
+ </div><!--article -->
+
+ <div class="article">
+ <div class="inner-article clearfix">
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+ <p class="number-article">
+ <a href="#">48 articles | 320 annotations </a>
+ <a title="ajouter une annotation" class="add-annotation" href="#"></a>
+ </p>
+
+ <div class="article-annotations">
+ <a title="title" class="blue" href="#" style="width:20%;"></a>
+ <a title="title" class="green" href="#" style="width:20%;"></a>
+ <a title="title" class="red" href="#" style="width:40%;"></a>
+ <a title="title" class="empty" href="#" style="width:20%;"></a>
+ </div>
+ <div class="article-content">
+ <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+ <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+ </p>
+
+ <ul class="links">
+ <ul>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ <li><a href="#">Karachi crise</a></li>
+ </ul>
</ul>
</div>
</div>
- </div>
- -->
- <div id="treemap1">
-
- </div>
- </div> <!-- actus -->
+ </div><!--article -->
+
+
+
+ </div><!-- articles -->
+ <div class="pagination">
+ <a href="#" class="active">1</a>.<a href="#">2</a>.<a href="#">3</a>.<a href="#">Suivants »</a>
+ </div>
+
+ </div><!-- liste -->
+
+
</div><!-- content-right -->
@@ -308,8 +421,9 @@
<script src="js/lib/raphael-min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/plugins.js"></script>
+ <script src="js/treemap.js"></script>
<script src="js/main.js"></script>
<script src="js/streamgraph.js"></script>
- <script src="js/treemap.js"></script>
+
</body>
</html>