1 <!DOCTYPE html> |
1 <!DOCTYPE html> |
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> |
2 <html> |
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> |
|
4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> |
|
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
|
6 <head> |
3 <head> |
7 <meta charset="utf-8"> |
4 <meta charset="utf-8"> |
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
9 <title>Edition</title> |
6 <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" /> |
|
7 <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" /> |
|
8 <meta name="author" content="Anthony Ly, Raphaël Velt" /> |
|
9 <title>Hashcut > Edition</title> |
10 <link rel="stylesheet" href="css/reset.css" /> |
10 <link rel="stylesheet" href="css/reset.css" /> |
11 <link rel="stylesheet" href="css/common.css" /> |
11 <link rel="stylesheet" href="css/common.css" /> |
12 <link rel="stylesheet" href="css/edition.css" /> |
12 <link rel="stylesheet" href="css/edition.css" /> |
13 <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css"> |
13 <link rel="stylesheet" href="lib/jquery-ui.css"> |
14 <script src="js/vendor/modernizr-2.6.1.min.js"></script> |
|
15 </head> |
14 </head> |
16 <body> |
15 <body> |
17 <div class="wrap"> |
16 <div class="wrap"> |
18 <div class="wrap-header"> |
17 <div class="wrap-header"> |
19 <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a> |
18 <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a> |
20 </div> |
19 </div> |
21 <div class="header"> |
20 <div class="header"> |
22 <!-- popin header --> |
21 <!-- popin header --> |
23 <div class="popin update-title" id="update-title"> |
22 <div class="popin update-title" id="update-title"> |
24 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
23 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
72 <p> |
73 <p> |
73 <label for="signup-password">Confirmer le mot de passe : </label> |
74 <label for="signup-password">Confirmer le mot de passe : </label> |
74 <input type="password" id="signup-password" name="" /> |
75 <input type="password" id="signup-password" name="" /> |
75 </p> |
76 </p> |
76 <p> |
77 <p> |
77 <input type="submit" value="Créer le compte"> |
78 <input class="button" type="submit" value="Créer le compte"> |
78 </p> |
79 </p> |
79 </form> |
80 </form> |
80 |
81 |
81 </div> |
82 </div> |
82 </div><!-- popin user signup--> |
83 </div><!-- popin user signup--> |
83 |
84 |
84 <div class="popin user login" id="user"> |
85 <div class="popin user login" id="user"> |
85 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
86 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
86 <div class="popin-content"> |
87 <div class="popin-content"> |
87 <h2>Connexion :</h2> |
88 <h2>Connexion :</h2> |
88 <form action="#"> |
89 <form action="#" class="login-form"> |
89 <p> |
90 <p> |
90 <label for="signup-pseudo">E-mail : </label> |
91 <label for="signup-pseudo">E-mail : </label> |
91 <input type="text" id="signup-pseudo" name="" /> |
92 <input type="text" id="signup-pseudo" name="" /> |
92 </p> |
93 </p> |
93 <p > |
94 <p > |
94 <label for="signup-email">Mot de passe : </label> |
95 <label for="signup-email">Mot de passe : </label> |
95 <input type="password" id="signup-email" name="" /> |
96 <input type="password" id="signup-email" name="" /> |
96 </p> |
97 </p> |
97 <p> |
98 <p> |
98 <input type="submit" value="Se connecter"> |
99 <input class="button" type="submit" value="Se connecter"> |
99 </p> |
100 </p> |
100 <p> |
101 <p> |
101 <a class="signup-button" href="#">Créer un compte</a> |
102 <a class="button signup-button" href="#">Créer un compte</a> |
102 </p> |
103 </p> |
103 </form> |
104 </form> |
104 |
105 |
105 </div> |
106 </div> |
106 </div><!-- popin user login--> |
107 </div><!-- popin user login--> |
126 <input type="text" name="" placeholder="Rechercher une vidéo" /> |
127 <input type="text" name="" placeholder="Rechercher une vidéo" /> |
127 <input type="submit" value="" /> |
128 <input type="submit" value="" /> |
128 </p> |
129 </p> |
129 </form> |
130 </form> |
130 <ul class="list-video"> |
131 <ul class="list-video"> |
131 <li class="item-video"> |
132 |
132 <a class="clearfix" href="#"> |
|
133 <span class="number">12</span> |
|
134 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
135 <span class="video-info"> |
|
136 <span class="title-video">Le a LuneLe a LuneLe a LuneLe a LuneLe a Lune</span> |
|
137 <span class="author">Par : Mozilla Foundation</span> |
|
138 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
139 </span> |
|
140 </a> |
|
141 </li><!-- item-video --> |
|
142 <li class="item-video"> |
|
143 <a class="clearfix active" href="#"> |
|
144 <span class="number">12</span> |
|
145 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
146 <span class="video-info"> |
|
147 <span class="title-video">Le a Lune</span> |
|
148 <span class="author">Par : Mozilla Foundation</span> |
|
149 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
150 </span> |
|
151 </a> |
|
152 </li><!-- item-video --> |
|
153 <li class="item-video"> |
|
154 <a class="clearfix" href="#"> |
|
155 <span class="number">12</span> |
|
156 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
157 <span class="video-info"> |
|
158 <span class="title-video">Le a Lune</span> |
|
159 <span class="author">Par : Mozilla Foundation</span> |
|
160 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
161 </span> |
|
162 </a> |
|
163 </li><!-- item-video --> |
|
164 <li class="item-video"> |
|
165 <a class="clearfix" href="#"> |
|
166 <span class="number">12</span> |
|
167 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
168 <span class="video-info"> |
|
169 <span class="title-video">Le a Lune</span> |
|
170 <span class="author">Par : Mozilla Foundation</span> |
|
171 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
172 </span> |
|
173 </a> |
|
174 </li><!-- item-video --> |
|
175 <li class="item-video"> |
|
176 <a class="clearfix" href="#"> |
|
177 <span class="number">12</span> |
|
178 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
179 <span class="video-info"> |
|
180 <span class="title-video">Le a Lune</span> |
|
181 <span class="author">Par : Mozilla Foundation</span> |
|
182 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
183 </span> |
|
184 </a> |
|
185 </li><!-- item-video --> |
|
186 <li class="item-video"> |
|
187 <a class="clearfix" href="#"> |
|
188 <span class="number">12</span> |
|
189 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
190 <span class="video-info"> |
|
191 <span class="title-video">Le a Lune</span> |
|
192 <span class="author">Par : Mozilla Foundation</span> |
|
193 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
194 </span> |
|
195 </a> |
|
196 </li><!-- item-video --> |
|
197 <li class="item-video"> |
|
198 <a class="clearfix" href="#"> |
|
199 <span class="number">12</span> |
|
200 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
201 <span class="video-info"> |
|
202 <span class="title-video">Le a Lune</span> |
|
203 <span class="author">Par : Mozilla Foundation</span> |
|
204 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
205 </span> |
|
206 </a> |
|
207 </li><!-- item-video --> |
|
208 <li class="item-video"> |
|
209 <a class="clearfix" href="#"> |
|
210 <span class="number">12</span> |
|
211 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
212 <span class="video-info"> |
|
213 <span class="title-video">Le a Lune</span> |
|
214 <span class="author">Par : Mozilla Foundation</span> |
|
215 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
216 </span> |
|
217 </a> |
|
218 </li><!-- item-video --> |
|
219 <li class="item-video"> |
|
220 <a class="clearfix" href="#"> |
|
221 <span class="number">12</span> |
|
222 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
223 <span class="video-info"> |
|
224 <span class="title-video">Le a Lune</span> |
|
225 <span class="author">Par : Mozilla Foundation</span> |
|
226 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
227 </span> |
|
228 </a> |
|
229 </li><!-- item-video --> |
|
230 <li class="item-video"> |
|
231 <a class="clearfix" href="#"> |
|
232 <span class="number">12</span> |
|
233 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
234 <span class="video-info"> |
|
235 <span class="title-video">Le a Lune</span> |
|
236 <span class="author">Par : Mozilla Foundation</span> |
|
237 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
238 </span> |
|
239 </a> |
|
240 </li><!-- item-video --> |
|
241 <li class="item-video"> |
|
242 <a class="clearfix" href="#"> |
|
243 <span class="number">12</span> |
|
244 <img src="img/apercu-video.jpg" alt="aperçu" /> |
|
245 <span class="video-info"> |
|
246 <span class="title-video">Le a Lune</span> |
|
247 <span class="author">Par : Mozilla Foundation</span> |
|
248 <span class="time-lenght">Durée : <span>12:33</span></span> |
|
249 </span> |
|
250 </a> |
|
251 </li><!-- item-video --> |
|
252 </ul> |
133 </ul> |
253 </div><!-- col-left --> |
134 </div><!-- col-left --> |
254 |
135 |
255 <div class="col-middle"> |
136 <div class="col-middle empty-mode"> |
|
137 |
|
138 <div class="col-middle-header"> |
|
139 <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title">La cuisine du Popcorn</span></a> |
|
140 <a href="#" class="tab tab-pvw">Prévisualiser</a> |
|
141 </div> |
|
142 |
|
143 <div class="video"> |
|
144 <div class="tutorial"> |
|
145 <h2>Créer un Hashcut, c’est facile !</h2> |
|
146 <ol> |
|
147 <li>Commencez par choisir une vidéo dans le volet de gauche</li> |
|
148 <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li> |
|
149 <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li> |
|
150 <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li> |
|
151 </ol> |
|
152 </div> |
|
153 <a class="publier-button" title="Publier" href="#"></a> |
|
154 </div> |
256 |
155 |
257 <div class="bloc-segmentation"> |
156 <div class="bloc-segmentation"> |
258 <div class="col-middle-header disable"> |
|
259 <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a> |
|
260 <a href="#" class="previsualiser disable">Prévisualiser</a> |
|
261 </div> |
|
262 <div class="video"> |
|
263 <a class="publier-button" title="Publier" href="#"></a> |
|
264 <img src="img/visuel-player.jpg" alt="" /> |
|
265 </div> |
|
266 <div class="segment"> |
157 <div class="segment"> |
267 <img src="img/visuel-segment.png" alt=""> |
158 <img src="img/visuel-segment.png" alt=""> |
268 </div> |
159 </div> |
269 <div class="popin segmentation" id=""> |
160 <div class="segment-info segmentation"> |
270 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
161 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
271 <div class="popin-content"> |
162 <div class="popin-content"> |
272 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
163 <h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2> |
273 <form action="#"> |
164 <form action="#"> |
274 <div class="form-segment-left"> |
165 <div class="form-segment-left"> |
284 <div class="form-segment-right"> |
175 <div class="form-segment-right"> |
285 <p> |
176 <p> |
286 <label for="description">Description :</label> |
177 <label for="description">Description :</label> |
287 <textarea id="description"></textarea> |
178 <textarea id="description"></textarea> |
288 </p> |
179 </p> |
289 <p> |
|
290 <input type="submit" value="Ajouter au Hashcut" /> |
|
291 </p> |
|
292 </div> |
180 </div> |
|
181 <input class="button add-segment" type="submit" value="Ajouter au Hashcut" /> |
293 |
182 |
294 </form> |
183 </form> |
295 </div> |
184 </div> |
296 </div><!-- popin segmentation --> |
185 </div><!-- popin segmentation --> |
297 |
186 |
298 <div class="existant"> |
187 <div class="existant"> |
299 <h2>Segments existants :</h2> |
188 <h2>Segments existants :</h2> |
300 <div class="segments"> |
189 <div class="segments"> |
301 <div class="segment"> |
190 <div class="segment"> |
302 <div class="section" style="left:0%;width:20%;"></div> |
191 <div class="section" style="left:0%;width:20%;"></div> |
303 <div class="popin segment-section" id=""> |
192 <div class="popin segment-section"> |
304 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
193 <img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" /> |
305 <div class="popin-content clearfix"> |
194 <div class="popin-content clearfix"> |
306 <div class="instant-description"> |
195 <div class="instant-description"> |
307 <h2>Le moment crucial où le maïs explose</h2> |
196 <h3>Le moment crucial où le maïs explose</h3> |
308 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
197 <p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p> |
309 </div> |
198 </div> |
310 <a href="#" class="reprendre-segment">Reprendre le segment</a> |
199 <a href="#" class="button reprendre-segment">Reprendre le segment</a> |
311 </div> |
200 </div> |
312 </div><!-- popin segment-section --> |
201 </div><!-- popin segment-section --> |
313 </div> |
202 </div> |
314 <div class="segment"> |
203 <div class="segment"> |
315 <div class="section" style="left:20%;width:20%;"></div> |
204 <div class="section" style="left:20%;width:20%;"></div> |
420 <div class="segment" style="background-color:brown;width:20%;"></div> |
280 <div class="segment" style="background-color:brown;width:20%;"></div> |
421 </div> |
281 </div> |
422 </div> |
282 </div> |
423 </div> |
283 </div> |
424 |
284 |
425 <ul class="list-video" id="sortable"> |
285 <ul class="list-video organize-segments"> |
426 <li class="item-video"> |
286 <li class="item-video"> |
427 <a class="clearfix" href="#"> |
287 <img src="img/apercu-video.jpg" alt="aperçu" /> |
428 <img src="img/apercu-video.jpg" alt="aperçu" /> |
288 <span class="video-info"> |
429 <span class="video-info"> |
289 <span class="title-video">Voyage à la Lune 1</span> |
430 <span class="title-video">Le a Lune 1</span> |
290 <span class="subtitle">Chargement de la Capsule</span> |
431 <span class="subtitle">Chargement de la Capsule</span> |
291 <span class="duration">01:17 - 02:01 (00:44)</span> |
432 <span class="duration">01:17 - 02:01 (00:44)</span> |
292 <ul class="tools"> |
433 </span> |
293 <li><a class="edit" href="#"></a></li> |
434 </a> |
294 <li><a class="bottom" href="#"></a></li> |
435 <ul class="tools"> |
295 <li><a class="top" href="#"></a></li> |
436 <li><a class="edit" href="#"></a></li> |
296 <li><a class="delete" href="#"></a></li> |
437 <li><a class="bottom" href="#"></a></li> |
297 </ul> |
438 <li><a class="top" href="#"></a></li> |
298 </span> |
439 <li><a class="delete" href="#"></a></li> |
|
440 </ul> |
|
441 </li><!-- item-video --> |
299 </li><!-- item-video --> |
442 <li class="item-video"> |
300 <li class="item-video"> |
443 <a class="clearfix" href="#"> |
301 <img src="img/apercu-video.jpg" alt="aperçu" /> |
444 <img src="img/apercu-video.jpg" alt="aperçu" /> |
302 <span class="video-info"> |
445 <span class="video-info"> |
303 <span class="title-video">Voyage à la Lune 2</span> |
446 <span class="title-video">Le a Lune 2</span> |
304 <span class="subtitle">Chargement de la Capsule</span> |
447 <span class="subtitle">Chargement de la Capsule</span> |
305 <span class="duration">01:17 - 02:01 (00:44)</span> |
448 <span class="duration">01:17 - 02:01 (00:44)</span> |
306 <ul class="tools"> |
449 </span> |
307 <li><a class="edit" href="#"></a></li> |
450 </a> |
308 <li><a class="bottom" href="#"></a></li> |
451 <ul class="tools"> |
309 <li><a class="top" href="#"></a></li> |
452 <li><a class="edit" href="#"></a></li> |
310 <li><a class="delete" href="#"></a></li> |
453 <li><a class="bottom" href="#"></a></li> |
311 </ul> |
454 <li><a class="top" href="#"></a></li> |
312 </span> |
455 <li><a class="delete" href="#"></a></li> |
|
456 </ul> |
|
457 </li><!-- item-video --> |
313 </li><!-- item-video --> |
458 <li class="item-video"> |
314 <li class="item-video"> |
459 <a class="clearfix" href="#"> |
315 <img src="img/apercu-video.jpg" alt="aperçu" /> |
460 <img src="img/apercu-video.jpg" alt="aperçu" /> |
316 <span class="video-info"> |
461 <span class="video-info"> |
317 <span class="title-video">Voyage à la Lune 3</span> |
462 <span class="title-video">Le a Lune 3</span> |
318 <span class="subtitle">Chargement de la Capsule</span> |
463 <span class="subtitle">Chargement de la Capsule</span> |
319 <span class="duration">01:17 - 02:01 (00:44)</span> |
464 <span class="duration">01:17 - 02:01 (00:44)</span> |
320 <ul class="tools"> |
465 </span> |
321 <li><a class="edit" href="#"></a></li> |
466 </a> |
322 <li><a class="bottom" href="#"></a></li> |
467 <ul class="tools"> |
323 <li><a class="top" href="#"></a></li> |
468 <li><a class="edit" href="#"></a></li> |
324 <li><a class="delete" href="#"></a></li> |
469 <li><a class="bottom" href="#"></a></li> |
325 </ul> |
470 <li><a class="top" href="#"></a></li> |
326 </span> |
471 <li><a class="delete" href="#"></a></li> |
|
472 </ul> |
|
473 </li><!-- item-video --> |
327 </li><!-- item-video --> |
|
328 |
474 </ul> |
329 </ul> |
475 </div><!-- col-right --> |
330 </div><!-- col-right --> |
476 |
331 |
477 </div><!-- content --> |
332 </div><!-- content --> |
478 |
333 |