114 <div class="profil-wrap"> |
125 <div class="profil-wrap"> |
115 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
126 <a href="#" class="all-hashcut">Tous les Hashcuts</a> |
116 <a href="#user" class="my-profil open-popin">Mon profil</a> |
127 <a href="#user" class="my-profil open-popin">Mon profil</a> |
117 </div> |
128 </div> |
118 </div><!-- header --> |
129 </div><!-- header --> |
119 <div class="content clearfix"> |
130 </div> <!-- wrap-header --> |
120 <div class="col-left"> |
131 |
121 <div class="left-head"> |
132 <div class="wrapper"> |
122 <h2>Sélectionner les vidéos</h2> |
133 <div class="wrap"> |
123 <input type="text" name="" placeholder="Rechercher une vidéo" /> |
134 <div class="content clearfix"> |
124 </div> |
135 |
125 <ul class="list-video"> |
136 <div class="col-left"> |
126 |
137 <div class="left-head"> |
127 </ul> |
138 <h2>Sélectionner les vidéos</h2> |
128 </div><!-- col-left --> |
139 <input type="text" name="" placeholder="Rechercher une vidéo" /> |
129 |
140 </div> |
130 <div class="col-middle empty-mode"> |
141 <ul class="list-video"> |
131 |
142 |
132 <div class="col-middle-header"> |
143 </ul> |
133 <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a> |
144 </div><!-- col-left --> |
134 <a href="#" class="tab tab-pvw">Prévisualiser</a> |
145 |
135 </div> |
146 <div class="col-middle empty-mode"> |
136 |
147 |
137 <div class="video"> |
148 <div class="col-middle-header"> |
138 <div class="tutorial"> |
149 <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title"></span></a> |
139 <h2>Créer un Hashcut, c’est facile !</h2> |
150 <a href="#" class="tab tab-pvw">Prévisualiser</a> |
140 <ol> |
151 </div> |
141 <li>Commencez par choisir une vidéo dans le volet de gauche</li> |
152 |
142 <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li> |
153 <div class="video"> |
143 <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li> |
154 <div class="tutorial"> |
144 <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li> |
155 <h2>Créer un Hashcut, c’est facile !</h2> |
145 </ol> |
156 <ol> |
146 </div> |
157 <li>Commencez par choisir une vidéo dans le volet de gauche</li> |
147 <div class="video-wait"></div> |
158 <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li> |
148 <a class="publier-button disable" title="Publier" href="#"></a> |
159 <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li> |
149 </div> |
160 <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li> |
150 |
161 </ol> |
151 <div class="widget"> |
162 </div> |
152 <div class="Ldt-Slider-Container"> |
163 <div class="video-wait"></div> |
153 <div class="Ldt-Slider"></div> |
164 <a class="publier-button disable" title="Publier" href="#"></a> |
154 </div> |
165 </div> |
155 <div class="Ldt-Slider-Time">00:00</div> |
166 |
156 |
167 <div class="widget"> |
157 <div class="Ldt-Ctrl"> |
168 <div class="Ldt-Slider-Container"> |
158 <div class="Ldt-Ctrl-Left"> |
169 <div class="Ldt-Slider"></div> |
159 <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div> |
170 </div> |
160 <div class="Ldt-Ctrl-spacer"></div> |
171 <div class="Ldt-Slider-Time">00:00</div> |
161 <div class="Ldt-Ctrl-InOutBlock"> |
172 |
162 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div> |
173 <div class="Ldt-Ctrl"> |
|
174 <div class="Ldt-Ctrl-Left"> |
|
175 <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div> |
163 <div class="Ldt-Ctrl-spacer"></div> |
176 <div class="Ldt-Ctrl-spacer"></div> |
164 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div> |
177 <div class="Ldt-Ctrl-InOutBlock"> |
165 <div class="Ldt-Ctrl-spacer"></div> |
178 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetIn" title="Débuter le segment ici"></div> |
166 </div> |
179 <div class="Ldt-Ctrl-spacer"></div> |
167 </div> |
180 <div class="Ldt-Ctrl-button Ldt-Ctrl-SetOut" title="Finir le segment ici"></div> |
168 <div class="Ldt-Ctrl-Right"> |
181 <div class="Ldt-Ctrl-spacer"></div> |
169 <div class="Ldt-Ctrl-spacer"></div> |
182 </div> |
170 <div class="Ldt-Ctrl-Time"> |
183 </div> |
171 <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div> |
184 <div class="Ldt-Ctrl-Right"> |
172 <div class="Ldt-Ctrl-Time-Separator">/</div> |
185 <div class="Ldt-Ctrl-spacer"></div> |
173 <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div> |
186 <div class="Ldt-Ctrl-Time"> |
174 </div> |
187 <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div> |
175 <div class="Ldt-Ctrl-spacer"></div> |
188 <div class="Ldt-Ctrl-Time-Separator">/</div> |
176 <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div> |
189 <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div> |
177 </div> |
190 </div> |
178 <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume"> |
191 <div class="Ldt-Ctrl-spacer"></div> |
179 <div class="Ldt-Ctrl-Volume-Bar"></div> |
192 <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full" title="Couper/Activer le son"></div> |
180 </div> |
193 </div> |
181 </div> |
194 <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume"> |
182 |
195 <div class="Ldt-Ctrl-Volume-Bar"></div> |
183 </div> |
196 </div> |
184 |
|
185 <div class="bloc-segmentation"> |
|
186 <div class="Ldt-Slice"></div> |
|
187 <div class="segmentation"> |
|
188 <div class="pointer-padder"> |
|
189 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
|
190 </div> |
|
191 <div class="popin-content"> |
|
192 <div class="validate"> |
|
193 <div class="validate-tooltip"></div> |
|
194 </div> |
|
195 <h2> |
|
196 <span class="create-or-edit">Créer un nouveau segment</span> |
|
197 de |
|
198 <span class="time-tangle tangle-start"></span> |
|
199 à |
|
200 <span class="time-tangle tangle-end"></span> |
|
201 (durée: |
|
202 <span class="time-tangle tangle-duration"></span>) |
|
203 </h2> |
|
204 <form action="#" id="segment-form"> |
|
205 <div class="form-segment-left"> |
|
206 <p> |
|
207 <label for="segment-title">Titre :</label> |
|
208 <input type="text" id="segment-title" /> |
|
209 </p> |
|
210 <p> |
|
211 <label for="segment-tags">Tags :</label> |
|
212 <ul id="segment-tags"></ul> |
|
213 </p> |
|
214 </div> |
|
215 <div class="form-segment-right"> |
|
216 <p> |
|
217 <label for="segment-description">Description :</label> |
|
218 <textarea id="segment-description"></textarea> |
|
219 </p> |
|
220 </div> |
|
221 <input class="button add-segment" type="submit" value="Ajouter au Hashcut" /> |
|
222 |
|
223 </form> |
|
224 </div> |
|
225 </div><!-- popin segmentation --> |
|
226 |
|
227 <div class="media-segments self-media-segments"> |
|
228 <h2>Mes segments sur ce média :</h2> |
|
229 <div class="media-segments-list"> |
|
230 </div> |
|
231 </div> |
|
232 |
|
233 <div class="media-segments other-media-segments"> |
|
234 <h2>Segments existants sur ce média :</h2> |
|
235 <div class="media-segments-list"> |
|
236 </div> |
|
237 </div> |
|
238 |
|
239 </div><!-- bloc-segmentation --> |
|
240 |
|
241 <div class="bloc-pvw"> |
|
242 |
|
243 <div class="frise mashup-frise"> |
|
244 <div class="frise-overflow"> |
|
245 <div class="frise-segments"> |
|
246 </div> |
|
247 <div class="frise-indications"> |
|
248 </div> |
|
249 </div> |
|
250 <div class="frise-position"></div> |
|
251 <div class="mashup-tooltip segment-tooltip-wrapper"> |
|
252 <div class="segment-tooltip"></div> |
|
253 <div class="segment-tooltip-tip"></div> |
|
254 </div> |
197 </div> |
255 |
198 |
256 </div> |
199 </div> |
257 |
200 |
258 <div class="segment-info mashup-description"> |
201 <div class="bloc-segmentation"> |
|
202 <div class="Ldt-Slice"></div> |
|
203 <div class="segmentation"> |
259 <div class="pointer-padder"> |
204 <div class="pointer-padder"> |
260 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
205 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
261 </div> |
206 </div> |
262 <div class="popin-content"> |
207 <div class="popin-content"> |
263 <ul class="tools"> |
208 <div class="validate"> |
264 <li><a title="Éditer" class="edit" href="#"></a></li> |
209 <div class="validate-tooltip"></div> |
265 </ul> |
210 </div> |
266 |
211 <h2> |
267 <h2><span class="annotation-title"></span></h2> |
212 <span class="create-or-edit">Créer un nouveau segment</span> |
268 <table> |
213 de |
269 <tbody> |
214 <span class="time-tangle tangle-start"></span> |
270 <tr> |
215 à |
271 <th>Extrait de :</th> |
216 <span class="time-tangle tangle-end"></span> |
272 <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td> |
217 (durée: |
273 </tr> |
218 <span class="time-tangle tangle-duration"></span>) |
274 <tr> |
219 </h2> |
275 <th>Description :</th> |
220 <form action="#" id="segment-form"> |
276 <td><span class="annotation-description"></span></td> |
221 <div class="form-segment-left"> |
277 </tr> |
222 <p> |
278 <tr> |
223 <label for="segment-title">Titre :</label> |
279 <th>Tags :</th> |
224 <input type="text" id="segment-title" /> |
280 <td><span class="annotation-tags"></span></td> |
225 </p> |
281 </tr> |
226 <p> |
282 </tbody> |
227 <label for="segment-tags">Tags :</label> |
283 </table> |
228 <ul id="segment-tags"></ul> |
284 </div> |
229 </p> |
285 </div> |
230 </div> |
286 </div><!-- bloc-pvw --> |
231 <div class="form-segment-right"> |
287 |
232 <p> |
288 </div><!-- col-middle --> |
233 <label for="segment-description">Description :</label> |
289 |
234 <textarea id="segment-description"></textarea> |
290 <div class="col-right"> |
235 </p> |
291 <div class="liste-segment"> |
236 </div> |
292 <div class="validate critical"> |
237 <input class="button add-segment" type="submit" value="Ajouter au Hashcut" /> |
293 <div class="validate-tooltip"></div> |
238 |
294 </div> |
239 </form> |
295 <h2>Liste des segments</h2> |
240 </div> |
296 <div class="frise mashup-frise"> |
241 </div><!-- popin segmentation --> |
297 <p class="aucun-segment">Aucun segment</p> |
242 |
298 <div class="frise-overflow"> |
243 <div class="media-segments self-media-segments"> |
299 <div class="frise-segments"> |
244 <h2>Mes segments sur ce média :</h2> |
300 </div> |
245 <div class="media-segments-list"> |
301 <div class="frise-indications"> |
246 </div> |
302 </div> |
247 </div> |
303 </div> |
248 |
304 <div class="mashup-tooltip segment-tooltip-wrapper"> |
249 <div class="media-segments other-media-segments"> |
305 <div class="segment-tooltip"></div> |
250 <h2>Segments existants sur ce média :</h2> |
306 <div class="segment-tooltip-tip"></div> |
251 <div class="media-segments-list"> |
307 </div> |
252 </div> |
308 |
253 </div> |
309 </div> |
254 |
310 </div> |
255 </div><!-- bloc-segmentation --> |
311 |
256 |
312 <ul class="list-video organize-segments"> |
257 <div class="bloc-pvw"> |
313 |
258 |
|
259 <div class="frise mashup-frise"> |
|
260 <div class="frise-overflow"> |
|
261 <div class="frise-segments"> |
|
262 </div> |
|
263 <div class="frise-indications"> |
|
264 </div> |
|
265 </div> |
|
266 <div class="frise-position"></div> |
|
267 <div class="mashup-tooltip segment-tooltip-wrapper"> |
|
268 <div class="segment-tooltip"></div> |
|
269 <div class="segment-tooltip-tip"></div> |
|
270 </div> |
|
271 |
|
272 </div> |
|
273 |
|
274 <div class="segment-info mashup-description"> |
|
275 <div class="pointer-padder"> |
|
276 <img class="pointer" src="img/popin-triangle.png" alt="" /> |
|
277 </div> |
|
278 <div class="popin-content"> |
|
279 <ul class="tools"> |
|
280 <li><a title="Éditer" class="edit" href="#"></a></li> |
|
281 </ul> |
|
282 |
|
283 <h2><span class="annotation-title"></span></h2> |
|
284 <table> |
|
285 <tbody> |
|
286 <tr> |
|
287 <th>Extrait de :</th> |
|
288 <td><span class="annotation-media-title"></span> (<span class="annotation-time annotation-begin"></span> - <span class="annotation-time annotation-end"></span>)</td> |
|
289 </tr> |
|
290 <tr> |
|
291 <th>Description :</th> |
|
292 <td><span class="annotation-description"></span></td> |
|
293 </tr> |
|
294 <tr> |
|
295 <th>Tags :</th> |
|
296 <td><span class="annotation-tags"></span></td> |
|
297 </tr> |
|
298 </tbody> |
|
299 </table> |
|
300 </div> |
|
301 </div> |
|
302 </div><!-- bloc-pvw --> |
|
303 |
|
304 </div><!-- col-middle --> |
|
305 |
|
306 <div class="col-right"> |
|
307 <div class="liste-segment"> |
|
308 <div class="validate critical"> |
|
309 <div class="validate-tooltip"></div> |
|
310 </div> |
|
311 <h2>Liste des segments</h2> |
|
312 <div class="frise mashup-frise"> |
|
313 <p class="aucun-segment">Aucun segment</p> |
|
314 <div class="frise-overflow"> |
|
315 <div class="frise-segments"> |
|
316 </div> |
|
317 <div class="frise-indications"> |
|
318 </div> |
|
319 </div> |
|
320 <div class="mashup-tooltip segment-tooltip-wrapper"> |
|
321 <div class="segment-tooltip"></div> |
|
322 <div class="segment-tooltip-tip"></div> |
|
323 </div> |
|
324 |
|
325 </div> |
|
326 </div> |
|
327 |
|
328 <ul class="list-video organize-segments"> |
|
329 |
|
330 </ul> |
|
331 </div><!-- col-right --> |
|
332 |
|
333 </div><!-- content --> |
|
334 |
|
335 <div class="footer clearfix"> |
|
336 <ul class="links-left"> |
|
337 <li><a href="#">Mentions légales</a></li> |
|
338 <li><a href="#">Contacts</a></li> |
314 </ul> |
339 </ul> |
315 </div><!-- col-right --> |
340 <ul class="links-right"> |
316 |
341 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
317 </div><!-- content --> |
342 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
318 |
343 <li>© 2012</li> |
319 <div class="footer clearfix"> |
344 </ul> |
320 <ul class="links-left"> |
345 </div><!-- footer --> |
321 <li><a href="#">Mentions légales</a></li> |
346 </div><!-- wrap --> |
322 <li><a href="#">Contacts</a></li> |
347 </div><!-- wrapper --> |
323 </ul> |
348 |
324 <ul class="links-right"> |
|
325 <li><a title="IRI" href="http://www.iri.centrepompidou.fr/"> <img src="img/logo-iri.png" alt="iri" /></a></li> |
|
326 <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li> |
|
327 <li>© 2012</li> |
|
328 </ul> |
|
329 </div><!-- footer --> |
|
330 </div><!-- wrap --> |
|
331 <!-- JavaScript --> |
349 <!-- JavaScript --> |
332 <script type="text/javascript" src="lib/jquery.min.js"></script> |
350 <script type="text/javascript" src="lib/jquery.min.js"></script> |
333 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
351 <script type="text/javascript" src="lib/jquery-ui.min.js"></script> |
334 <script type="text/javascript" src="lib/tag-it.js"></script> |
352 <script type="text/javascript" src="lib/tag-it.js"></script> |
335 <script type="text/javascript" src="lib/underscore-min.js"></script> |
353 <script type="text/javascript" src="lib/underscore-min.js"></script> |