git.zarb.org Git - booh/blob - 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>