<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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="lib/jquery-ui.css" />
<link rel="stylesheet" href="lib/jquery.tagit.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/edition.css" />
</head>
<body>
<div class="wrap-header-top">
<div class="wrap-header-top-content">
<a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
</div>
</div><!-- wrap-header-top -->
<div class="wrap-header">
<div class="header">
<!-- popin user -->
<div class="popin user info" id="user">
<div class="pointer"></div>
<div class="popin-content">
<h2>Mashup75</h2>
<h3>mash@cinecast.fr</h3>
<a href="#" class="nb-hashcut">12 Hashcuts</a>
<p>
<a href="#" class="change-account button">Changer de compte</a>
</p>
</div>
</div><!-- popin user info-->
<div class="popin user signup" id="user">
<div class="pointer"></div>
<div class="popin-content">
<h2>Créer un compte :</h2>
<form action="#" class="signup-form">
<p>
<label for="signup-pseudo">Pseudonyme : </label>
<input type="text" id="signup-pseudo" name="" />
</p>
<p >
<label for="signup-email">Email : </label>
<input type="text" id="signup-email" name="" />
</p>
<p >
<label for="signup-password">Mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
<p>
<label for="signup-password">Confirmer le mot de passe : </label>
<input type="password" id="signup-password" name="" />
</p>
<p>
<input class="button" type="submit" value="Créer le compte">
</p>
</form>
</div>
</div><!-- popin user signup-->
<div class="popin user login" id="user">
<div class="pointer"></div>
<div class="popin-content">
<h2>Connexion :</h2>
<form action="#" class="login-form">
<p>
<label for="signup-pseudo">E-mail : </label>
<input type="text" id="signup-pseudo" name="" />
</p>
<p >
<label for="signup-email">Mot de passe : </label>
<input type="password" id="signup-email" name="" />
</p>
<p>
<input class="button" type="submit" value="Se connecter">
</p>
<p>
<a class="button signup-button" href="#">Créer un compte</a>
</p>
</form>
</div>
</div><!-- popin user login-->
<!-- /popin user -->
<!-- popin update-title -->
<div class="popin update-title" id="update-title">
<div class="pointer"></div>
<div class="popin-content">
<form class="clearfix" action="#" id="hashcut-form" method="">
<p>
<label for="hashcut-title">Titre :</label>
<input type="text" id="hashcut-title" name="" value="Hashcut sans titre" />
</p>
<p>
<label for="hashcut-description">Description :</label>
<textarea name="" id="hashcut-description"></textarea>
</p>
</form>
</div>
</div>
<!-- /popin update-title -->
<h1><a title="Hashcut - Le Mashup cliquable" class="clearfix" href="#">
<img src="img/hashcut-logo.png" alt="Hashcut" />
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
<p class="title-video">
<a title="Modifier le titre et la description" class="open-popin" href="#update-title">Hashcut sans titre</a>
</p>
<p class="time-length">Durée: <span class="mashup-total-duration">00:00</span></p>
</div>
<div class="profil-wrap">
<ul class="space-top">
<li><a href="#" class="all-hashcut">Tous les Hashcuts</a></li>
<li><a href="#user" class="my-profil open-popin">Mon profil</a></li>
</ul>
</div>
</div><!-- header -->
</div> <!-- wrap-header -->
<div class="wrapper">
<div class="wrap">
<div class="content clearfix">
<div class="col-left">
<div class="left-head">
<h2>Sélectionner les vidéos</h2>
<input type="text" name="" placeholder="Rechercher une vidéo" />
</div>
<ul class="list-video">
</ul>
</div><!-- col-left -->
<div class="col-middle empty-mode">
<div class="col-middle-header">
<a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></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>
<div class="video-wait"></div>
<a class="publier-button disable" title="Publier" href="#"></a>
</div>
<div class="widget">
<div class="Ldt-Slider-Container">
<div class="Ldt-Slider"></div>
</div>
<div class="Ldt-Slider-Time">00:00</div>
<div class="Ldt-Ctrl">
<div class="Ldt-Ctrl-Left">
<div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
<div class="Ldt-Ctrl-spacer"></div>
<div class="Ldt-Ctrl-InOutBlock">
<div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div>
<div class="Ldt-Ctrl-spacer"></div>
<div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div>
<div class="Ldt-Ctrl-spacer"></div>
</div>
</div>
<div class="Ldt-Ctrl-Right">
<div class="Ldt-Ctrl-spacer"></div>
<div class="Ldt-Ctrl-Time">
<div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
<div class="Ldt-Ctrl-Time-Separator">/</div>
<div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
</div>
<div class="Ldt-Ctrl-spacer"></div>
<div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div>
</div>
<div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
<div class="Ldt-Ctrl-Volume-Bar"></div>
</div>
</div>
</div>
<div class="bloc-segmentation">
<div class="Ldt-Slice"></div>
<div class="segmentation">
<div class="pointer-padder">
<div class="pointer"></div>
</div>
<div class="popin-content">
<div class="validate">
<div class="validate-tooltip"></div>
</div>
<h2>
<span class="create-or-edit">Créer un nouveau segment</span>
de
<span class="time-tangle tangle-start"></span>
à
<span class="time-tangle tangle-end"></span>
(durée:
<span class="time-tangle tangle-duration"></span>)
</h2>
<form action="#" id="segment-form">
<div class="form-segment-left">
<p>
<label for="segment-title">Titre :</label>
<input type="text" id="segment-title" />
</p>
<p>
<label for="segment-tags">Tags :</label>
<ul id="segment-tags"></ul>
</p>
</div>
<div class="form-segment-right">
<p>
<label for="segment-description">Description :</label>
<textarea id="segment-description"></textarea>
</p>
</div>
<input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
</form>
</div>
</div><!-- popin segmentation -->
<div class="media-segments self-media-segments">
<h2>Mes segments sur ce média :</h2>
<div class="media-segments-list">
</div>
</div>
<div class="media-segments other-media-segments">
<h2>Segments existants sur ce média :</h2>
<div class="media-segments-list">
</div>
</div>
</div><!-- bloc-segmentation -->
<div class="bloc-pvw">
<div class="frise mashup-frise">
<div class="frise-overflow">
<div class="frise-segments">
</div>
<div class="frise-indications">
</div>
</div>
<div class="frise-position"></div>
<div class="mashup-tooltip segment-tooltip-wrapper">
<div class="segment-tooltip"></div>
<div class="segment-tooltip-tip"></div>
</div>
</div>
<div class="segment-info mashup-description">
<div class="pointer-padder">
<div class="pointer"></div>
</div>
<div class="popin-content">
<ul class="tools">
<li><a title="Éditer" class="edit" href="#"></a></li>
</ul>
<h2><span class="annotation-title"></span></h2>
<table>
<tbody>
<tr>
<th>Extrait de :</th>
<td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td>
</tr>
<tr>
<th>Description :</th>
<td><span class="annotation-description"></span></td>
</tr>
<tr>
<th>Tags :</th>
<td><span class="annotation-tags"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div><!-- bloc-pvw -->
</div><!-- col-middle -->
<div class="col-right">
<div class="liste-segment">
<div class="validate critical">
<div class="validate-tooltip"></div>
</div>
<h2>Liste des segments</h2>
<div class="frise mashup-frise">
<p class="aucun-segment">Aucun segment</p>
<div class="frise-overflow">
<div class="frise-segments">
</div>
<div class="frise-indications">
</div>
</div>
<div class="mashup-tooltip segment-tooltip-wrapper">
<div class="segment-tooltip"></div>
<div class="segment-tooltip-tip"></div>
</div>
</div>
</div>
<ul class="list-video organize-segments">
</ul>
</div><!-- col-right -->
</div><!-- content -->
<div class="footer clearfix">
<ul class="links-left">
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<ul class="links-right">
<li><a title="IRI" href="http://www.iri.centrepompidou.fr/" target="_blank"> <img src="img/logo-iri.png" alt="iri" /></a></li>
<li><a title="Cinecast" href="http://cinecast.fr/" target="_blank"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
<li>© 2012</li>
</ul>
</div><!-- footer -->
</div><!-- wrap -->
</div><!-- wrapper -->
<!-- JavaScript -->
<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/tag-it.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="js/hashcut.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
IriSP.endpoints = {
content: "/pf/ldtplatform/api/ldt/1.0/contents/",
project: "/pf/ldtplatform/api/ldt/1.0/projects/",
segment: "/pf/ldtplatform/api/ldt/1.0/segments/",
ldt: "http://capsicum//pf/ldtplatform/ldt/cljson/id/",
hashcut_page: "hashcut.html?project="
};
$(function() {
var hashcut = IriSP.editor({
csrf_token: "{{csrf_token}}",
creator: "{{username}}",
filter: {
tags__icontains: "Hashcut"
}
});
});
</script>
</body>
</html>