--- a/crea/inte-crea/css/ldt-commun.css Tue Nov 22 17:04:12 2011 +0100
+++ b/crea/inte-crea/css/ldt-commun.css Tue Nov 22 17:05:29 2011 +0100
@@ -60,7 +60,7 @@
}
h3 {
- font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 18px; color: #0068c4;
+ font-size: 18px; color: #0068c4;
}
h4 {
@@ -68,7 +68,7 @@
}
h5 {
- float: left; clear: left; font-weight: bold; margin: 2px 0; width: 70px; font-size: 13px; padding: 0;
+ float: left; clear: left; font-weight: bold; margin: 2px 0; min-width: 70px; font-size: 13px; padding: 0;
}
p {
@@ -97,11 +97,11 @@
float: left;
}
-div.fl, li.fl, p.fl {
+div.fl, li.fl, p.fl, img.fl {
float: left;
}
-div.fr, li.fr, p.fr {
+div.fr, li.fr, p.fr, img.fr {
float: right;
}
@@ -157,6 +157,10 @@
background: url(../img/bulle_people.png);
}
+.font_16 {
+ font-size: 16px;
+}
+
.font_11 {
font-size: 11px;
}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/css/ldt-player.css Tue Nov 22 17:05:29 2011 +0100
@@ -0,0 +1,65 @@
+#player_col_g {
+ float: left; width: 550px;
+}
+
+#top_media {
+ width: 550px; border-bottom: 1px solid #484848;
+}
+
+#media_share {
+ float: right; margin-top: 5px;
+}
+
+li.share_li {
+ padding: 5px 0 0 5px; height: 20px;
+}
+
+#ann_fleche_cont {
+ width: 550px; height: 21px; overflow: hidden; position: relative;
+}
+
+#ann_fleche {
+ width: 1100px; height: 21px; position: absolute; margin-left: -550px;
+}
+
+#ann_fleche div {
+ float: left; width: 550px; height: 21px;
+}
+
+#ann_fl_left {
+ background:url(../img/anarl.png);
+}
+
+#ann_fl_right {
+ background:url(../img/anarr.png);
+}
+
+#annotation_bas {
+ float: left; width: 550px; background: url(../img/annot_bg.png); margin: 0 0 25px;
+}
+
+/* COLONNE DE DROITE */
+
+#player_col_d {
+ float: left; width: 410px;
+}
+
+#player_col_d .li_h2 {
+ width: 400px; margin-left: 10px;
+}
+
+#annot_media {
+ width: 400px; margin: 5px 0 10px 10px; max-height: 400px; overflow: auto;
+}
+
+#annot_media li {
+ padding: 5px 0;
+}
+
+#annot_media li.selected {
+ background: url(../img/annot_bg.png);
+}
+
+div.une_annot {
+ width: 280px;
+}
--- a/crea/inte-crea/css/ldt-recherche.css Tue Nov 22 17:04:12 2011 +0100
+++ b/crea/inte-crea/css/ldt-recherche.css Tue Nov 22 17:05:29 2011 +0100
@@ -48,7 +48,7 @@
}
.h3_result_media h3 {
- margin: 2px 0 0 2px;
+ font-family: "DIN-Bold", Helvetica, Arial, sans-serif; font-weight: 800; margin: 2px 0 0 2px;
}
div.duree_result_media {
--- a/crea/inte-crea/groupe.html Tue Nov 22 17:04:12 2011 +0100
+++ b/crea/inte-crea/groupe.html Tue Nov 22 17:05:29 2011 +0100
@@ -1,7 +1,8 @@
<!doctype html>
-<html>
+<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Plateforme LDT : Groupe "Nom du Groupe"</title>
<link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
<link rel="stylesheet" href="css/ldt-groupe.css" type="text/css" />
--- a/crea/inte-crea/home.html Tue Nov 22 17:04:12 2011 +0100
+++ b/crea/inte-crea/home.html Tue Nov 22 17:05:29 2011 +0100
@@ -1,7 +1,8 @@
<!doctype html>
-<html>
+<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Plateforme LDT : Home</title>
<link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
<link rel="stylesheet" href="css/ldt-home.css" type="text/css" />
Binary file crea/inte-crea/img/anarl.png has changed
Binary file crea/inte-crea/img/anarr.png has changed
Binary file crea/inte-crea/img/annot_bg.png has changed
Binary file crea/inte-crea/img/main_bg.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/inte-crea/player.html Tue Nov 22 17:05:29 2011 +0100
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="fr">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>Plateforme LDT : Player</title>
+ <link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
+ <link rel="stylesheet" href="css/ldt-player.css" type="text/css" />
+</head>
+<body>
+
+ <div id="general_container">
+
+<!-- BARRE DE TITRE COMMUNE -->
+
+ <ul class="floatlist" id="title_bar">
+ <li id="li_h1">
+ <h1><a href="#"><b>Lignes</b> de temps</a></h1>
+ </li>
+ <li id="li_search">
+ <form id="form_search">
+ <input id="search_text" name="q" value="" />
+ <input id="search_submit" type="submit" value="Rechercher" />
+ </form>
+ <li id="li_annotation">
+ <div class="fl">
+ <a href="#"><img src="img/annot_icon.png" id="annot_icon" /></a>
+ </div>
+ <div class="fl">
+ <a href="#">Annoter</a>
+ </div>
+ </li>
+ <li id="li_connexion">
+ <a href="#">Connexion</a>
+ </li>
+ </ul>
+
+<!-- COLONNE DE GAUCHE -->
+
+ <div id="player_col_g">
+ <ul class="floatlist" id="top_media">
+ <li id="title_media"><h2>Nom du média : <span class="pink font_16">Titre de l'annotation</span></h2></li>
+ <li id="media_share">
+ <ul class="floatlist">
+ <li class="share_li">
+ <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Twitter</a>
+ <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </li>
+ <li class="share_li" style="padding-top: 3px">
+ <a name="fb_share">Partager</a>
+ <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
+ </li>
+ <li class="share_li">
+ <g:plusone size="medium" annotation="none"></g:plusone>
+ <script type="text/javascript">
+ (function() {
+ var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+ po.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+ })();
+ </script>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ <img src="img/placeholder.png" width="550" height="420" />
+ <div id="annotation_bas">
+ <div id="ann_fleche_cont">
+ <div id="ann_fleche" style="left: 100px;">
+ <div id="ann_fl_left"></div>
+ <div id="ann_fl_right"></div>
+ </div>
+ </div>
+ <h3>Titre d'annotation <span class="pink">(00:12:12 - 00:14:03)</span></h3>
+ <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volu ptatem quia voluptas sit aspernatur aut?</p>
+ <h5>Mots-clés</h5>
+ <p class="b fl">: <a href="#" class="pink under">lorem</a> , <a href="#" class="pink under">ipsum</a> , <a href="#" class="pink under">quia</a> , <a href="#" class="pink under">dolor</a>
+ <h5>Groupes</h5>
+ <p class="b fl">: <a href="#" class="pink under">IRI</a> , <a href="#" class="pink under">Ars Industrialis</a> , <a href="#" class="pink under">RSLN</a>
+ </div>
+ </div>
+
+ <div id="player_col_d">
+ <div class="li_h2">
+ <h2>Créer une annotation</h2>
+ </div>
+ <form id="ajout_annot">
+ <input name="ajan_titre" value="Titre"/>
+ <textarea name="ajan_texte">Cliquez ici pour rédiger une annotation sur ce segment</textarea>
+ <input name="ajan_tags" value="Entrez ici vos mots-clés séparés par des virgules" />
+ <input type="submit" value="Envoyer" />
+ </form>
+
+ <div class="li_h2">
+ <h2>Toutes les annotations sur ce média</h2>
+ </div>
+
+ <ul class="floatlist" id="annot_media">
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li class="selected">
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ <li>
+ <img class="fl img_media" src="img/placeholder_16_9.jpg" width="80" height="45" />
+ <div class="fl une_annot">
+ <h5><a class="blue">Lorem Ipsum Dolor</a></h5>
+ <p class="fr pink font_11">00:12:12 - 00:15:13</p>
+ <p class="clear font_11">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+
+<!-- FOOTER COMMUN -->
+
+ <ul id="footer">
+ <li>
+ <a href="#">V.01.15</a>
+ </li>
+ <li>
+ <a href="#"> © 2011 IRI</a>
+ </li>
+ <li>
+ <a href="#">Contact</a>
+ </li>
+ <li>
+ <a href="#">A propos</a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div>
+
+ </body>
+</html>
--- a/crea/inte-crea/recherche.html Tue Nov 22 17:04:12 2011 +0100
+++ b/crea/inte-crea/recherche.html Tue Nov 22 17:05:29 2011 +0100
@@ -1,7 +1,8 @@
<!doctype html>
-<html>
+<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Plateforme LDT : Résultats de Recherche</title>
<link rel="stylesheet" href="css/ldt-commun.css" type="text/css" />
<link rel="stylesheet" href="css/ldt-recherche.css" type="text/css" />