1f0411f4a7354b096a64c8efb420f787e83fb055
[booh] / www / tutorial.fr.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5   <title>Booh - Le Web-Album de choix pour les utilisateurs de Linux distingués</title>
6   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
7   <style type="text/css" media="screen"
8          <!--
9              pre { background-color: #e0e0e0; }
10              tt { background-color: #e0e0e0; }
11            -->
12   </style>
13 <script type="text/javascript">
14 /* <![CDATA[ */
15     (function() {
16         var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
17         
18         s.type = 'text/javascript';
19         s.async = true;
20         s.src = 'http://api.flattr.com/js/0.5.0/load.js?mode=auto';
21         
22         t.parentNode.insertBefore(s, t);
23     })();
24 /* ]]> */
25 </script>
26 </head>
27
28 <body bgcolor="#FFFFFF" text="#000000" link="#0000ee" vlink="#551a8b" style="padding: 0em 3em; text-align: justify">
29
30    <table width="100%" cellspacing="0" cellpadding="0">
31      <tr>
32        <td width="25%" align="left" valign="top">
33          <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://booh.org/"></a>
34        </td>
35        <td width="50%" align="center">
36          <img src="images/logo.png" alt="booh logo"/>
37        </td>
38        <td width="25%" align="right" valign="top">
39          <a href="tutorial.html"><img src="images/en.png" alt="this page in english"/></a>
40          <img src="images/fr.png" alt="cette page est en français"/>
41        </td>
42      </tr>
43    </table>
44
45    <h1 align="center">Booh</h1>
46
47    <p align="center">[ <a href="index.fr.html">page principale</a> |
48                        <a href="themes/cardu/">exemple de web-album</a> |
49                        <a href="video-demo.fr.html">démo vidéo</a> |
50                        tutoriel |
51                        <a href="advanced.fr.html">avancé</a> |
52                        <a href="discuss.fr.html">discussion</a> |
53                        <a href="download.fr.html">téléchargement</a> ]</p>
54
55    <h2>Tutoriels de Booh</h2>
56
57    <ul>
58      <li>
59        <a href="#fastest">L'album le plus rapide</a><font size="-1"><i> - montre comment créer l'album le plus rapide possible</i></font></li>
60      <li><a href="#startingup">Démarrage</a><font size="-1"><i> - détaille comment créer un web-album simple avec l'interface graphique de Booh</i></font></li>
61      <li><a href="#speedup">Accélération !</a><font size="-1"><i> - met en lumière la manière de travailler le plus rapidement possible avec Booh</i>
62 </i></font></li>
63      <li><a href="#passwordprotection">Protection par mot de passe de certaines parties de vos albums</a><font size="-1"><i> - montre comment protéger par un mot de passe les parties voulues de vos albums</i>
64 </i></font></li>
65    </ul>
66      
67    <p><font size="-1"> <em>Note : vous pouvez aussi jeter un coup
68          d'oeil à la <a href="video-demo.fr.html">démo vidéo</a>.</em></font>
69    </p>
70
71
72
73
74    <h3 id="fastest">L'album le plus rapide (pour les amateurs de la ligne de commandes)</h3>
75
76    <p>
77      <i>Ce tutorial montre comment créer l'album le plus rapide possible.</i>
78    </p>
79
80       <ul>
81         <li>utilisez le programme auxiliaire, <i>booh-backend</i>, en lui donnant
82           le répertoire de vos photos et vidéos, et un répertoire destination
83           (vide ou inexistant !) où créer l'album :
84 <pre>
85 % booh-backend --source /home/gc/photos/foo --destination /home/gc/public_html/foo
86 </pre>
87         </li>
88
89         <li>... et c'est tout. Cette commande a permis de parcourir le répertoire source,
90           et créer un album avec tous les paramètres par défaut dans
91           <tt>/home/gc/public_html/foo</tt>. Maintenant, vous n'avez plus de raison
92           de simplement placer vos photos dans un répertoire d'un serveur web si
93           vous manquez de temps : utilisez booh-backend, cela donnera un bien
94           meilleur résultat.</li>
95       </ul>
96
97
98
99
100    <h3 id="startingup">Démarrage - partie #1 : tri des photos et vidéos</h3>
101
102    <p>
103      <i>Ce tutoriel montre comment créer un web-album simple avec l'interface graphique de Booh.</i>
104    </p>
105
106       <ul>
107           <li>la première étape consiste à trier vos photos et vidéos ;
108           i.e. sélectionner les fantastiques photos et vidéos
109           que vous voulez utiliser pour votre web-album, à partir
110           de l'énorme quantité de photos prises l'autre jour
111           (si vous n'avez qu'un nombre restreint de photos, ou si elles
112           sont déjà triées, passez directement à la
113           <a href="#startingup2">partie #2</a>); lancez
114           <i>booh-classifier</i>, le sous-programme de Booh créé pour le
115           tri <font size="-2">Note : cette fonctionnalité est disponible
116           dans Booh >= 0.9.0.</font>
117
118 <pre>
119 % booh-classifier /tmp/photos
120 </pre>
121
122 <p align="center"><img src="images/tutorial-classifier-1.fr.png" alt="classifier step1" border="1"/></p>
123           </li>
124
125
126           <li>
127             la trieuse parcourt le répertoire demandé, et affiche une
128             vignette pour chaque photo ou vidéo trouvée dedans (et
129             dans les sous-répertoires) ; le programme est optimisé
130             pour charger les vignettes aussi rapidement que possible,
131             et montrera correctement les photos portrait grâce à
132             l'orientation EXIF contenue dans le fichier ; vous pouvez
133             alors naviguer avec les flèches gauche et droite du
134             clavier ou en cliquant avec la souris ; le but maintenant
135             est d'étiqueter les photos et vidéos en fonction de vos
136             besoins de suppression et/ou de conservation
137             <ul>
138
139               <li>
140                 utilisez la touche <b>Suppr</b> du clavier pour étiqueter
141                 la photo ou vidéo courante pour suppression - la vignette
142                 de l'image étiquetée pour suppression sera entourée en
143                 rouge, et la prochaine photo ou vidéo sera ensuite sélectionnée
144                 automatiquement</li>
145
146 <p align="center"><img src="images/tutorial-classifier-2.fr.png" alt="classifier step2" border="1"/></p>
147
148               <li>
149                 utilisez <b>n'importe quelle touche alphabétique</b>
150                 pour créer une nouvelle étiquette, par
151                 exemple <b>t</b> puis complétez en
152                 écrivant <b>tignes</b> pour créer l'étiquette des
153                 photos et vidéos de Tignes
154
155 <p align="center"><img src="images/tutorial-classifier-3.fr.png" alt="classifier step3" border="1"/></p>
156
157                 vous pouvez alors utiliser la touche <b>t</b> à nouveau
158                 pour étiqueter la photo ou vidéo courante avec l'étiquette
159                 <b>(t)ignes</b></li>
160
161 <p align="center"><img src="images/tutorial-classifier-4.fr.png" alt="classifier step4" border="1"/></p>
162
163             </ul>
164           </li>
165
166           <li>une fois que vous aurez visionné et éventuellement
167             étiqueté toutes les photos et vidéos,
168             utilisez <tt>Fichier/Exécuter</tt> pour copier ou déplacer
169             les photos et vidéos en fonction des étiquetages ; note :
170             à cette étape, vous devez ranger vos photos et vidéos soit
171             dans un répertoire donné, soit les répartir dans plusieurs
172             sous-répertoires, en suivant les besoins de votre
173             web-album, sachant que Booh créera un sous-album distinct pour
174             chaque sous-répertoire ; voici par exemple un rangement
175             pertinent :
176
177 <p align="center"><img src="images/tutorial-classifier-5.fr.png" alt="classifier step5" border="1"/></p>
178           </li>
179
180
181    <h3 id="startingup2">Démarrage - partie #2 : création d'un web-album simple</h3>
182
183           <li>
184             maintenant que vos photos et vidéos sont classées dans le
185             répertoire de votre choix, et dans des sous-répertoires
186             dessous celui-ci, en fonction de vos critères de
187             classement personnels (pour chaque sous-répertoire, Booh
188             créera un sous-album distinct)...
189
190 <pre>
191 /home/gc/photos/booh-demo-src
192 /home/gc/photos/booh-demo-src/Home
193 /home/gc/photos/booh-demo-src/Home/00002.jpg (...)
194 /home/gc/photos/booh-demo-src/Ski
195 /home/gc/photos/booh-demo-src/Ski/Courchevel
196 /home/gc/photos/booh-demo-src/Ski/Courchevel/img_0866.jpg (...)
197 /home/gc/photos/booh-demo-src/Ski/Tignes
198 /home/gc/photos/booh-demo-src/Ski/Tignes/pict0011.jpg (...)
199 /home/gc/photos/booh-demo-src/Weird
200 /home/gc/photos/booh-demo-src/Weird/pict0098.jpg (...)
201 </pre>
202
203           ...vous pouvez lancer <i>booh</i>:
204
205 <pre>
206 % booh
207 </pre>
208
209 <p align="center"><img src="images/tutorial-starting-up-1.fr.png" alt="booh step1" border="1"/></p>
210           </li>
211
212           <li>
213             ouvrez <tt>Fichier/Nouveau</tt>, spécifiez le répertoire
214             source (dans notre exemple : <tt>/home/gc/photos/booh-demo-src</tt>),
215             un répertoire destination où le web-album sera créé
216             (par exemple, <tt>/tmp/booh-demo-webalbum</tt>) ; vous pouvez
217             laisser les autres options de configuration à leurs
218             valeurs par défaut pour le moment
219
220 <p align="center"><img src="images/tutorial-starting-up-2.fr.png" alt="booh step2" border="1"/></p>
221           </li>
222
223           <li>
224             attendez pendant que Booh parcourt le répertoire source
225             et crée les vignettes nécessaires à l'édition de votre
226             album dans l'interface graphique
227
228 <p align="center"><img src="images/tutorial-starting-up-3.fr.png" alt="booh step3" border="1"/></p>
229           </li>
230
231           <li>
232             Booh a créé un sous-album pour chaque sous-répertoire
233             qu'il a trouvé dans le répertoire source spécifié ; ils
234             sont affichés en utilisant un arbre dans la partie gauche
235             de la fenêtre principale ; dans la partie droite, vous
236             pouvez voir les photos et vidéos du sous-album
237             actuellement sélectionné dans la "Page des vignettes",
238             alors que la "Page des sous-albums" montre une image par
239             sous-album contenu dans le sous-album actuellement
240             sélectionné, si nécessaire ; maintenant, vous pouvez
241             éditer les légendes et bien plus, en utilisant l'interface
242             graphique ; faites un clic droit sur une image pour voir
243             les tâches disponibles ; note : supprimer une image dans
244             Booh ne supprime pas la photo/vidéo originale dans le
245             répertoire source, seulement dans le web-album (à moins
246             que vous n'ayez explicitement activé cette option
247             dans <tt>Editer/Options</tt>)
248             
249
250 <p align="center"><img src="images/tutorial-starting-up-4.fr.png" alt="booh step4" border="1"/></p>
251           </li>
252
253           <li>une fois que vous avez fini, utilisez <tt>Fichier/Générer le web-album</tt>,
254             et attendez pendant que l'album HTML se crée
255
256 <p align="center"><img src="images/tutorial-starting-up-5.fr.png" alt="booh step5" border="1"/></p>
257           </li>
258
259           <li>votre web-album est prêt dans le répertoire destination !
260             vous n'avez plus qu'à cliquer sur le lien pour le regarder
261
262 <p align="center"><img src="images/tutorial-starting-up-6.fr.png" alt="booh step6" border="1"/></p>
263           </li>
264       </ul>
265
266
267
268
269    <h3 id="speedup">Accélération !</h3>
270
271    <p>
272      <i>Ce tutoriel met en lumière la manière de travailler le
273      plus rapidement possible avec Booh.</i>
274    </p>
275
276    <p>
277      Une étape fastidieuse quand on crée des web-albums est
278      l'entrée des légendes. Pour ne pas la rendre encore pire, 
279      l'interface graphique de Booh est pensée pour vous aider à
280      créer les légendes le plus RAPIDEMENT possible, avec des
281      raccourcis claviers efficaces et d'autres petits détails
282      utiles.</p>
283
284    <p>Légendes :</p>
285
286    <ul>
287      <li>lorsque l'espace d'entrée d'une légende obtient le focus
288      (par la souris ou le clavier), le texte actuel est
289      automatiquement sélectionné ; de cette manière, si vous ne
290      voulez pas conserver le texte actuel (99% des situations
291      pour la légende par défaut qui contient le nom du fichier),
292      commencez simplement à taper, le texte actuel sera supprimé
293      (sinon, appuyez sur une touche parmi
294      Home/End/Gauche/Droite/Haut/Bas)</li>
295
296      <li>quand vous cliquez sur une image, le focus est
297      automatiquement donné à la légende correspondante</li>
298
299      <li>quand vous appuyez sur Tab, le focus est donné à la
300      légende de l'image suivante ; Shift-Tab va à l'image
301      précédente ; Contrôle-Gauche/Droite/Haut/Bas va à l'image se
302      trouvant à gauche/droite/haut/bas ; si la légende d'une
303      image n'est pas visible, la fenêtre est défilée pour la
304      rendre visible</li>
305    </ul>
306
307    <p>Autres :</p>
308
309    <ul>
310        <li>Contrôle-Entrée ouvre une vue plein écran de l'image,
311        avec le focus sur le bouton pour la fermer (c'est aussi
312        déclenché par un double-clic de souris)</li>
313
314        <li>Shift-Gauche/Droite/Haut/Bas déplace l'image courante
315          vers la gauche/droite/haut/bas (vous pouvez aussi
316          réordonner des images avec un glisser-déposer de
317          souris)</li>
318
319        <li>Contrôle-Supprimer supprime l'image courante (cela
320        devrait être plutôt Shift-Supprimer, mais cela serait
321        problématique pour les gens habitués à supprimer le texte
322        sélectionné de cette manière)</li>
323
324        <li>Alt-Gauche/Droite tourne l'image courante dans le sens
325          des aiguilles d'une montre, respectivement dans le sens
326          contraire</li>
327
328        <li>Les mouvements de souris sur les vignettes :
329            <table>
330                <tr><td><img src="images/gesture_rotate_left.gif" alt="gesture rotate left"/></td><td>(bouton gauche) tourner dans le sens contraire des aiguilles d'une montre</td></tr>
331                <tr><td><img src="images/gesture_rotate_right.gif" alt="gesture rotate right"/></td><td>(bouton gauche) tourner dans le sens des aiguilles d'une montre</td></tr>
332                <tr><td><img src="images/gesture_remove.gif" alt="gesture remove"/></td><td>(bouton gauche) supprimer</td></tr>
333            </table>
334        </li>
335
336        <li>Lorsque soit l'Outil Un-Clic "tourner dans le sens des aiguilles d'une montre",
337          soit "tourner dans le sens contraire des aiguilles d'une montre", est sélectionné,
338          garder enfoncé la touche Shift ou Contrôle permet d'inverser le sens</li>
339
340    </ul>
341
342    <p>La liste complète des raccourcis clavier et des mouvements
343      de souris est disponible dans le menu <tt>Aide</tt> de Booh.</p>
344
345
346
347
348    <h3 id="passwordprotection">Protection par mot de passe de certaines parties de vos albums</h3>
349           
350    <p>
351      <i>Ce tutoriel montre comment protéger par un mot de passe les
352      parties voulues de vos albums (fonctionne seulement si vous
353      publiez votre web-album sur un serveur web Apache).</i>
354    </p>
355
356    <p>
357      Quand on crée des web-albums personnels, il est courant d'avoir
358      une partie <i>publique</i> que quiconque peut voir, et une
359      partie <i>privée</i> dont on veut restreindre l'accès à la
360      famille ou à certains amis. Booh peut utiliser la fonctionnalité
361      <tt>.htaccess/.htpasswd</tt> d'Apache pour restreindre l'accès de
362      certains sous-albums (notez que d'autres serveurs web offrent une
363      fonctionnalité compatible).
364    </p>
365
366    <p>
367      Mais tout d'abord, quelques mots à propos de la manière avec
368      laquelle Apache gère la protection par mot de passe. Protéger un
369      répertoire par un mot de passe nécessite la création d'un
370      fichier <tt>.htaccess</tt> dans ce répertoire, contenant le
371      chemin d'un fichier de mot de passe (appelé
372      couramment <tt>.htpasswd</tt>) ; si Apache est configuré comme il
373      faut, il demandera à l'utilisateur de s'authentifier avec un nom
374      d'utilisateur et un mot de passe avant d'envoyer le contenu de la
375      page. Booh génèrera le fichier <tt>.htaccess</tt> pour vous, mais
376      il y a un problème avec le chemin du fichier <tt>.htpasswd</tt> :
377      il doit être soit absolu (i.e. <tt>/home/gc/.htpasswd</tt>), ou
378      relatif au <tt>Document Root</tt> d'Apache ; il ne peut pas
379      être spécifié <i>relativement</i> au répertoire à protéger ; par
380      conséquent, Booh ne peut le gérer automatiquement pour vous. Vous
381      devrez mettre le fichier <tt>.htpasswd</tt> quelque part sur
382      le serveur web, et en donner le chemin complet d'accès à Booh
383      dans la fenêtre de dialogue appropriée, lorsque vous activez
384      la protection par mot de passe d'un sous-album.
385    </p>
386
387    <ul>
388       <li>faites un clic-droit sur le nom du sous-album que vous
389         désirez protéger par mot de passe
390
391 <p align="center"><img src="images/tutorial-pp-1.fr.png" alt="booh password protection step1" border="1"/></p>
392       </li>
393
394       <li>cela ouvre une fenêtre de dialogue dans laquelle vous pouvez
395         choisir de protéger par mot de passe le sous-album ; activez
396         le bouton radio approprié, et ensuite entrez le chemin d'accès
397         complet <b>sur le serveur web</b> au fichier de mot de passe
398         que vous allez utiliser ; il est généralement conseillé de ne pas
399         le mettre au sein du répertoire accessible depuis le web
400         (typiquement votre <tt>~/public_html</tt>, ou <tt>/var/www</tt>)
401
402 <p align="center"><img src="images/tutorial-pp-2.fr.png" alt="booh password protection step2" border="1"/></p>
403       </li>
404
405       <li>vous pouvez cliquer sur <tt>générer un fichier de mot de passe</tt> si
406         vous n'en avez pas déjà un ; entrez le nom d'utilisateur et
407         le mot de passe que vous désirez mettre dans le fichier de mot de passe
408
409 <p align="center"><img src="images/tutorial-pp-3.fr.png" alt="booh password protection step3" border="1"/></p>
410       </li>
411
412       <li>une fois passée la validation, une nouvelle fenêtre de dialogue
413         indique le nom de fichier qui a été utilisé pour créer le fichier
414         de mot passe ; changez de bureau <b>immédiatement</b> ou ouvrez
415         une console ou un programme approprié pour copier ce fichier sur
416         le serveur web (ce fichier temporaire sera effacé)
417
418 <p align="center"><img src="images/tutorial-pp-4.fr.png" alt="booh password protection step4" border="1"/></p>
419
420 <pre>
421 % scp /tmp/htpasswd.5344.0 server:/home/gc/.htpasswd
422 </pre>
423       </li>
424
425       <li>après avoir validé la fenêtre de dialogue principale,
426         vous verrez de petites icônes dans la partie gauche
427         de l'arbre des sous-albums ; l'icône <i>serrure</i>
428         indique que le sous-album est protégé par mot de passe ;
429         l'icône <i>serrure</i> "non disponible" indique que le
430         sous-album est protégé par mot de passe à cause du fait
431         qu'un sous-album parent est protégé par mot de passe
432
433 <p align="center"><img src="images/tutorial-pp-5.fr.png" alt="booh password protection step5" border="1"/></p>
434
435         notez que vous ne pourrez pas "tester" la protection
436         par mot de passe en parcourant le web-album en local,
437         à moins que vous n'utilisiez un serveur web local
438       </li>
439
440
441    </ul>
442
443
444
445
446 <p align="right"><font size="-1">Fri May 30 16:58:15 2008</font></p>
447
448 </body>
449
450 </html>