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