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   <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/gradient/">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>