some 0.9.4 work on website
[booh] / www / tutorial.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 - The Web-Album of choice for discriminating Linux users</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"><img src="images/en.png" alt="this page is in english"/></div>
36          <div style="display:inline-block"><a href="tutorial.fr.html"><img src="images/fr.png" alt="cette page en fran├žais"/></a></div>
37        </td>
38      </tr>
39    </table>
40
41    <h1 align="center">Booh</h1>
42
43    <p align="center">[ <a href="index.html">home</a> |
44                        <a href="themes/gradient/">example web-album</a> |
45                        <a href="video-demo.html">video demo</a> |
46                        tutorial |
47                        <a href="advanced.html">advanced</a> |
48                        <a href="discuss.html">discuss</a> |
49                        <a href="download.html">download</a> ]</p>
50
51    <h2>Booh Tutorials</h2>
52
53    <ul>
54      <li>
55        <a href="#fastest">The fastest album</a><font size="-1"><i> - demonstrates how to create the fastest album ever</i></font></li>
56      <li><a href="#startingup">Starting up</a><font size="-1"><i> - shows how to create a simple web-album with the graphical interface of Booh</i></font></li>
57      <li><a href="#speedup">Speed things up!</a><font size="-1"><i> - sheds some light on how to get the job done as fast as possible with Booh</i>
58 </i></font></li>
59      <li><a href="#passwordprotection">Password protect parts of your albums</a><font size="-1"><i> - shows how to password-protect selected sub-albums in your albums</i>
60 </i></font></li>
61    </ul>
62      
63    <p><font size="-1"> <em>Note: you might also want to check out
64       the <a href="video-demo.html">video demo</a>.</em></font>
65    </p>
66
67
68
69
70    <h3 id="fastest">The fastest album (for CLI people)</h3>
71
72    <p>
73      <i>This tutorial will demonstrate how to create the fastest album ever.</i>
74    </p>
75
76       <ul>
77         <li>use the backend program, <i>booh-backend</i>, giving it
78         the top directory of your photos and videos, and a destination
79         directory (empty or non existent!) where to create the album:
80 <pre>
81 % booh-backend --source /home/gc/photos/foo --destination /home/gc/public_html/foo
82 </pre>
83         </li>
84
85         <li>... that's it. This scanned the source directory, and
86         created an album with default parameters
87         in <tt>/home/gc/public_html/foo</tt>. Now you have no reason
88         to simply drop your photos in a web server directory when you
89         have no time: use booh-backend, it will produce a much
90         better result.</li>
91       </ul>
92
93
94
95
96    <h3 id="startingup">Starting up - part #1: classify photos and videos</h3>
97
98    <p>
99      <i>This tutorial will show how to create a simple web-album
100      with the graphical interface of Booh, from scratch.</i>
101    </p>
102
103       <ul>
104           <li>the first step is to classify your photos and videos;
105           e.g. select the bunch of great photos and videos you want to
106           use for your web-album, out of the vast amount of photos
107           shot the other day (if you only have a limited amount of
108           photos, or if they are already classified, jump directly
109           to <a href="#startingup2">part #2</a>); launch
110           <i>booh-classifier</i>, the subprogram of Booh created for
111           classifying <font size="-2">Note: this feature is
112           available in 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.png" alt="classifier step1" border="1"/></p>
119           </li>
120
121
122           <li>the <i>classifier</i> scans the input directory, and
123           shows a thumbnail for each photo or video found in there
124           (and in any subdirectories); it is optimized to load
125           thumbnails as fast as possible, and will correctly show
126           portrait images based on EXIF orientation tag; you then
127           navigate with the left and right arrow keys or by clicking
128           with the mouse; the aim now is to label the photos and
129           videos according to your removal and/or keeping needs
130             <ul>
131
132               <li>hit the <b>Delete</b> key to label the current photo
133               or video for removal - the thumbnail of the item
134               labelled for removal will be outlined in red, and next
135               photo or video will be selected automatically</li>
136
137 <p align="center"><img src="images/tutorial-classifier-2.png" alt="classifier step2" border="1"/></p>
138
139               <li>hit <b>any alphabetical key</b> to create a new
140               label, for example hit <b>t</b> then complete by
141               typing <b>tignes</b> to create the label for photos and
142               videos from Tignes
143
144 <p align="center"><img src="images/tutorial-classifier-3.png" alt="classifier step3" border="1"/></p>
145
146               you can then hit <b>t</b> again to label the current
147               photo or video with the <b>(t)ignes</b> label</li>
148
149 <p align="center"><img src="images/tutorial-classifier-4.png" alt="classifier step4" border="1"/></p>
150
151             </ul>
152           <li>
153
154           <li>once all photos and videos have been reviewed,
155           use <tt>File/Execute</tt> to copy or move photos and videos
156           based on the labels assignments; notice: you need to arrange
157           your photos and videos either in a single directory, or
158           spanned accross multiple sub-directories, following the
159           needs of your web-album, knowing that Booh will create a
160           distinct sub-album for each sub-directory; here's an
161           arranging example:
162
163 <p align="center"><img src="images/tutorial-classifier-5.png" alt="classifier step5" border="1"/></p>
164           </li>
165
166
167    <h3 id="startingup2">Starting up - part #2: create a simple web-album</h3>
168
169           <li>now that your photos and videos are arranged in the
170           directory of your choice, and sub-directories below it,
171           according to your sorting criteria of choice (for each
172           sub-directory, Booh will create a distinct sub-album)...
173
174 <pre>
175 /home/gc/photos/booh-demo-src
176 /home/gc/photos/booh-demo-src/Home
177 /home/gc/photos/booh-demo-src/Home/00002.jpg (...)
178 /home/gc/photos/booh-demo-src/Ski
179 /home/gc/photos/booh-demo-src/Ski/Courchevel
180 /home/gc/photos/booh-demo-src/Ski/Courchevel/img_0866.jpg (...)
181 /home/gc/photos/booh-demo-src/Ski/Tignes
182 /home/gc/photos/booh-demo-src/Ski/Tignes/pict0011.jpg (...)
183 /home/gc/photos/booh-demo-src/Weird
184 /home/gc/photos/booh-demo-src/Weird/pict0098.jpg (...)
185 </pre>
186
187           ...you can launch <i>booh</i>:
188
189 <pre>
190 % booh
191 </pre>
192
193 <p align="center"><img src="images/tutorial-starting-up-1.png" alt="booh step1" border="1"/></p>
194           </li>
195
196           <li>open <tt>File/New</tt>, specify the source
197           directory (in our example: <tt>/home/gc/photos/booh-demo-src</tt>), a
198           destination directory where the web-album will be
199           created (for example, <tt>/tmp/booh-demo-webalbum</tt>); you can
200           leave the configuration options to the default for the
201           moment
202
203 <p align="center"><img src="images/tutorial-starting-up-2.png" alt="booh step2" border="1"/></p>
204           </li>
205
206           <li>wait while Booh scans the source directory and
207           create thumbnails necessary to edit your album in the
208           GUI
209
210 <p align="center"><img src="images/tutorial-starting-up-3.png" alt="booh step3" border="1"/></p>
211           </li>
212
213           <li>Booh has created one sub-album for each
214           sub-directory it found in the source directory you
215           specified; they are displayed using a tree on the left
216           part of the main window; on the right part, you can see
217           the images/videos of the currently selected sub-album
218           in the "thumbnails page", while the "sub-albums page"
219           shows one image per sub-album beside the currently
220           selected sub-album, if applicable; now, you can edit
221           captions and more using the GUI; right-click on an
222           image to view the available actions; notice: deleting
223           an image in Booh doesn't delete the original
224           photo/video in the source directory, only in the
225           web-album (unless you explicitely activated that
226           option in <tt>Edit/Options</tt>)
227             
228
229 <p align="center"><img src="images/tutorial-starting-up-4.png" alt="booh step4" border="1"/></p>
230           </li>
231
232           <li>once finished, use <tt>File/Generate
233           web-album</tt>, and wait while the HTML album is
234           created
235
236 <p align="center"><img src="images/tutorial-starting-up-5.png" alt="booh step5" border="1"/></p>
237           </li>
238
239           <li>your web-album is ready in the destination
240           directory! just click on the link to view it
241
242 <p align="center"><img src="images/tutorial-starting-up-6.png" alt="booh step6" border="1"/></p>
243           </li>
244       </ul>
245
246
247
248
249    <h3 id="speedup">Speed things up!</h3>
250
251    <p>
252      <i>This tutorial will shed some light on how to get the job
253       done as fast as possible with Booh.</i>
254    </p>
255
256    <p>A big pain when creating web-albums is the step of typing
257    in captions. To not make it worse, the GUI of Booh is
258    dedicated to help you creating captions as FAST as possible,
259    with effective key shortcuts and other niceties.</p>
260
261    <p>Captions:</p>
262
263    <ul>
264        <li>when a caption text entry gets focus (by mouse or
265        keyboard), current text is automatically selected; this way, if
266        you don't want to keep the current text (99% of situations for
267        default caption containing filename), just begin typing,
268        current text will be deleted (else, hit one of
269        Home/End/Left/Right/Up/Down)</li>
270
271        <li>when you click on an image, focus is automatically
272        given to the caption text entry</li>
273
274        <li>when you hit the Tab key, focus is given to the
275        caption text entry of next image; Shift-Tab goes to
276        previous image; Control-Left/Right/Up/Down goes to caption
277        text entry of image on the left/right/up/down; if the text
278        entry or the thumbnail is not visible, the window is
279        automatically scrolled to make them visible</li>
280    </ul>
281
282    <p>Others:</p>
283
284    <ul>
285        <li>Control-Enter opens a fullscreen view of the image
286        with focus on a button to close it (also triggered by
287        a double mouse click)</li>
288
289        <li>Shift-Left/Right/Up/Down moves current image
290        left/right/up/down (you can also reorder images by mouse
291        drag-and-drop)</li>
292
293        <li>Control-Delete removes current image (this should be
294        Shift-Delete, but this would hurt people used to delete
295        currently selected text that way)</li>
296
297        <li>Alt-Left/Right rotates images clockwise or
298            counter-clockwise</li>
299
300        <li>Mouse gestures on thumbnails:
301            <table>
302                <tr><td><img src="images/gesture_rotate_left.gif" alt="gesture rotate left"/></td><td>(left mouse button) rotate counter-clockwise</td></tr>
303                <tr><td><img src="images/gesture_rotate_right.gif" alt="gesture rotate right"/></td><td>(left mouse button) rotate clockwise</td></tr>
304                <tr><td><img src="images/gesture_remove.gif" alt="gesture remove"/></td><td>(left mouse button) remove</td></tr>
305            </table>
306        </li>
307
308        <li>When using the rotate clockwise or rotate counter-clockwise
309        one-click tools, holding Shift or Control inverts the direction</li>
310
311    </ul>
312
313    <p>The full list of key shortcuts and mouse gestures is
314    available in the <tt>Help</tt> menu of Booh.</p>
315
316
317
318
319    <h3 id="passwordprotection">Password protect parts of your albums</h3>
320
321    <p>
322      <i>This tutorial will show how to password-protect
323      selected sub-albums in your albums (only works if publishing
324      your web-album on an Apache web-server).</i>
325    </p>
326
327    <p>
328      In private web-albums, it's common to have a <i>public</i>
329      part anyone can view, and a <i>private</i> part you'd like
330      to restrict to your family or some of your friends. Booh can
331      use the Apache <tt>.htaccess/.htpasswd</tt> feature to
332      restrict access of selected sub-albums (some other
333      web-servers offer a compatible feature).
334    </p>
335
336    <p>
337      But first, a couple of words about how Apache handles
338      password protection. Password-protecting a directory
339      involves creating a <tt>.htaccess</tt> file in this
340      directory, containing the path of a password file (typically
341      named <tt>.htpasswd</tt>); if Apache is suitably configured,
342      it will ask the user to authenticate with a username and a
343      password before sending the page data. Booh will generate
344      the <tt>.htaccess</tt> file for you, but there is a problem
345      with the path of the <tt>.htpasswd</tt> file: it must be
346      either absolute (e.g. <tt>/home/gc/.htpasswd</tt>), or
347      relative to Apache's <tt>Document Root</tt>; it cannot be specified
348      <i>relatively</i> to the directory to protect; hence, Booh cannot
349      handle it automatically for you. You will have to put the
350      <tt>.htpasswd</tt> somewhere on the web-server, and give the
351      full path to it in the appropriate dialog of Booh when you
352      active password protection of a sub-album.
353    </p>
354
355    <ul>
356       <li>right-click on the sub-album's name you want to
357           password protect
358
359 <p align="center"><img src="images/password-protect-1.png" alt="booh password protection step1" border="1"/></p>
360       </li>
361
362       <li>it opens a dialog in which you can choose to password
363           protect the sub-album; activate the proper radio
364           button, and then type in the full path of the password
365           file you will use <b>on the web-server</b>; it's
366           generally adviced to not have it below the directory
367           accessible from the web (typically your
368           <tt>~/public_html</tt>, or <tt>/var/www</tt>)
369
370 <p align="center"><img src="images/password-protect-2.png" alt="booh password protection step2" border="1"/></p>
371       </li>
372
373       <li>you can click on <tt>generate a password file</tt> if
374           you don't already have one; type in the username and
375           password you wish to put in the password file
376
377 <p align="center"><img src="images/password-protect-3.png" alt="booh password protection step3" border="1"/></p>
378       </li>
379
380       <li>once validated, a new dialog indicates the filename
381           which was used to create the password file; <b>immediately</b>
382           switch desktop or open an appropriate console/program
383           to copy this file to the web-server (this temporary
384           file will get deleted)
385
386 <p align="center"><img src="images/password-protect-4.png" alt="booh password protection step4" border="1"/></p>
387
388 <pre>
389 % scp /tmp/htpasswd.4890.0 server:/home/gc/.htpasswd
390 </pre>
391       </li>
392
393       <li>after validating the main password protection dialog,
394           you will see little icons on the left part of the
395           sub-albums tree; the regular <i>lock</i> icon indicates
396           that the sub-album is password protected; the
397           "unavailable" <i>lock</i> icon indicates that the
398           sub-album is password protected due to a parent
399           sub-album being password protected
400
401 <p align="center"><img src="images/password-protect-5.png" alt="booh password protection step5" border="1"/></p>
402
403           note that you will not be able to "test" the password
404           protection if you browse the web-album locally, unless
405           you use a local web-server
406       </li>
407
408
409    </ul>
410
411
412 <!-- ftp://<i>username</i>:<i>password</i>@ftpperso.free.fr -->
413
414
415 <p align="right"><font size="-1">Fri May 30 16:58:15 2008</font></p>
416
417 </body>
418
419 </html>