--- a/integration/edition.html Wed Oct 24 18:50:26 2012 +0200
+++ b/integration/edition.html Thu Oct 25 16:41:19 2012 +0200
@@ -1,22 +1,21 @@
<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Edition</title>
+ <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Edition</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/edition.css" />
- <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
- <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+ <link rel="stylesheet" href="lib/jquery-ui.css">
</head>
<body>
<div class="wrap">
<div class="wrap-header">
- <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+ <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
</div>
<div class="header">
<!-- popin header -->
@@ -48,7 +47,9 @@
<h2>Mashup75</h2>
<h3>mash@cinecast.fr</h3>
<a href="#" class="nb-hashcut">12 Hashcuts</a>
- <a href="#" class="change-account">Changer de compte</a>
+ <p>
+ <a href="#" class="change-account button">Changer de compte</a>
+ </p>
</div>
</div><!-- popin user info-->
@@ -56,7 +57,7 @@
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un compte :</h2>
- <form action="#">
+ <form action="#" class="signup-form">
<p>
<label for="signup-pseudo">Pseudonyme : </label>
<input type="text" id="signup-pseudo" name="" />
@@ -74,7 +75,7 @@
<input type="password" id="signup-password" name="" />
</p>
<p>
- <input type="submit" value="Créer le compte">
+ <input class="button" type="submit" value="Créer le compte">
</p>
</form>
@@ -85,7 +86,7 @@
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Connexion :</h2>
- <form action="#">
+ <form action="#" class="login-form">
<p>
<label for="signup-pseudo">E-mail : </label>
<input type="text" id="signup-pseudo" name="" />
@@ -95,10 +96,10 @@
<input type="password" id="signup-email" name="" />
</p>
<p>
- <input type="submit" value="Se connecter">
+ <input class="button" type="submit" value="Se connecter">
</p>
<p>
- <a class="signup-button" href="#">Créer un compte</a>
+ <a class="button signup-button" href="#">Créer un compte</a>
</p>
</form>
@@ -128,145 +129,35 @@
</p>
</form>
<ul class="list-video">
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a LuneLe a LuneLe a LuneLe a LuneLe a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix active" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
- <li class="item-video">
- <a class="clearfix" href="#">
- <span class="number">12</span>
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune</span>
- <span class="author">Par : Mozilla Foundation</span>
- <span class="time-lenght">Durée : <span>12:33</span></span>
- </span>
- </a>
- </li><!-- item-video -->
+
</ul>
</div><!-- col-left -->
- <div class="col-middle">
+ <div class="col-middle empty-mode">
+
+ <div class="col-middle-header">
+ <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title">La cuisine du Popcorn</span></a>
+ <a href="#" class="tab tab-pvw">Prévisualiser</a>
+ </div>
+
+ <div class="video">
+ <div class="tutorial">
+ <h2>Créer un Hashcut, c’est facile !</h2>
+ <ol>
+ <li>Commencez par choisir une vidéo dans le volet de gauche</li>
+ <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
+ <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
+ <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
+ </ol>
+ </div>
+ <a class="publier-button" title="Publier" href="#"></a>
+ </div>
<div class="bloc-segmentation">
- <div class="col-middle-header disable">
- <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
- <a href="#" class="previsualiser disable">Prévisualiser</a>
- </div>
- <div class="video">
- <a class="publier-button" title="Publier" href="#"></a>
- <img src="img/visuel-player.jpg" alt="" />
- </div>
<div class="segment">
<img src="img/visuel-segment.png" alt="">
</div>
- <div class="popin segmentation" id="">
+ <div class="segment-info segmentation">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2>
@@ -286,10 +177,8 @@
<label for="description">Description :</label>
<textarea id="description"></textarea>
</p>
- <p>
- <input type="submit" value="Ajouter au Hashcut" />
- </p>
</div>
+ <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
</form>
</div>
@@ -300,14 +189,14 @@
<div class="segments">
<div class="segment">
<div class="section" style="left:0%;width:20%;"></div>
- <div class="popin segment-section" id="">
+ <div class="popin segment-section">
<img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content clearfix">
<div class="instant-description">
- <h2>Le moment crucial où le maïs explose</h2>
+ <h3>Le moment crucial où le maïs explose</h3>
<p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
</div>
- <a href="#" class="reprendre-segment">Reprendre le segment</a>
+ <a href="#" class="button reprendre-segment">Reprendre le segment</a>
</div>
</div><!-- popin segment-section -->
</div>
@@ -325,14 +214,6 @@
</div><!-- bloc-segmentation -->
<div class="bloc-pvw">
- <div class="col-middle-header">
- <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a>
- <a href="#" class="previsualiser">Prévisualiser</a>
- </div>
- <div class="video">
- <a class="publier-button" title="Publier" href="#"></a>
- <img src="img/visuel-player.jpg" alt="" />
- </div>
<div class="frise clearfix">
@@ -349,8 +230,9 @@
<div class="segment" style="background-color:red;width:20%;"></div>
</div>
+ </div>
- <div class="popin frise-description" id="frise-description">
+ <div class="segment-info mashup-description">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<ul class="tools">
@@ -378,31 +260,9 @@
</tbody>
</table>
</div>
- </div><!-- popin frise-description -->
-
- </div><!-- frise -->
+ </div>
</div><!-- bloc-pvw -->
-
- <div class="bloc-vide">
- <div class="col-middle-header disable">
- <a href="#" class="segmenter disable">Segmenter</a>
- <a href="#" class="previsualiser disable">Prévisualiser</a>
- </div>
- <div class="video">
- <div class="tutorial">
- <h2>Créer un Hashcut, c’est facile !</h2>
- <ol>
- <li>Commencez par choisir une vidéo dans le volet de gauche</li>
- <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
- <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
- <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
- </ol>
- </div>
- <a class="publier-button" title="Publier" href="#"></a>
- </div>
- </div><!-- bloc-vide -->
-
</div><!-- col-middle -->
<div class="col-right">
@@ -422,55 +282,50 @@
</div>
</div>
- <ul class="list-video" id="sortable">
+ <ul class="list-video organize-segments">
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 1</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 1</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 2</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 2</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 3</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 3</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
+
</ul>
</div><!-- col-right -->
@@ -489,9 +344,16 @@
</div><!-- footer -->
</div><!-- wrap -->
<!-- JavaScript -->
- <script src="js/vendor/jquery-1.8.0.min.js"></script>
- <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
- <script src="js/plugins.js"></script>
- <script src="js/main.js"></script>
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="lib/mustache.js"></script>
+ <script type="text/javascript" src="lib/underscore-min.js"></script>
+ <script type="text/javascript" src="lib/popcorn-complete.min.js"></script>
+ <script type="text/javascript" src="lib/raphael-min.js"></script>
+ <script type="text/javascript" src="js/init.js"></script>
+ <script type="text/javascript" src="js/medialist-serializer.js"></script>
+ <script type="text/javascript" src="js/model.js"></script>
+ <script type="text/javascript" src="js/editor.js"></script>
+ <script type="text/javascript" src="js/common.js"></script>
</body>
</html>