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