I like working with Wikis, especially for personal organization. While I use (and love) Circus Ponies Notebook for specific projects that are currently active, a Wiki is unbeatable when it comes to long term storage of ideas, notes, etc. I prefer a text-file based Wiki called DokuWiki with the monobook template (think Wikipedia). To make the work with the Wiki easier, I use a Frame that displays the Wiki and a Toolframe for easy data entry, page creation and other maintenance task. Given that a Wiki is often bleak and bare, I have used the following things to make the work with the Wiki itself more pleasant: Navigation via Image(map)s, Date-dependent Links, Link-to-edit, Links to specific functions, Using the Logo in the top-right corner, Header Highlighting, and Creating Graphics for Wikis.
Navigation via Image(map)s
While Wikis are mostly text based, it is easy to use images as navigation. I like small font for the amount of information you can display, but it is tedious to use links. An image as link (or an image map if more links are used) is an excellent way to facilitate the navigation in the Wiki. Simply add an image map with the absolute links to the pages via <html>…</html> in the Wiki text.
Example
This picture is used as an image map in my Wiki. The graphic part and the text part (mostly) have different links. Even if it looks like multiple images displayed in a line it is one graphic. The reason is that individual images are also loaded individually, resulting in an unpleasant effect when the page is loaded. The image here is displayed as one. The code is inserted via PHP since some of the links are date-dependent (logbook/diary-links). The image is in the DokuWiki directory data/media.
<php>
echo ‘
<IMG SRC=”DOKUWIKIPATH/data/media/wiki_control/meta/main_navi_2.png” WIDTH=688 HEIGHT=148 BORDER=0 ALT=”” USEMAP=”#main_navi_Map”>
<MAP NAME=”main_navi_Map”>
<AREA SHAPE=”rect” ALT=”” COORDS=”0,0,114,108″ HREF=”DOKUWIKIPATH/doku.php?id=logbook”>
<AREA SHAPE=”rect” ALT=”” COORDS=”0,109,114,148″ HREF=”DOKUWIKIPATH/doku.php?do=recent&id=”>
<AREA SHAPE=”rect” ALT=”” COORDS=”115,0,227,108″ HREF=”DOKUWIKIPATH/doku.php?id=logbook:’.date(“Y-m-d”).'”>
<AREA SHAPE=”rect” ALT=”” COORDS=”115,109,227,148″ HREF=”DOKUWIKIPATH/doku.php?id=logbook:’.date(“Y-m-d”).’&do=edit&rev=”>
…
</MAP>’;
</php>
There are some programs that allow you to create imagemaps and provide you with the code (especially the coordinates). I can only highly recommend using imagemaps. They make the Wiki less boring and much easier to navigate (an pack a lot of different links in a small area). You can also use them to replace the table of contents as within-page navigation (essentially any header becomes a link target that can be reached via “#HEADERNAME”). This is great for floorplans for example (you click on the “master bedroom” and it jumps to this header).
Date-dependent Links
PHP (and JavaScript) can be used to create date-dependent links. This is extremely useful for diaries (open the page of the current day, e.g. 2008-11-24). This can be done via
<php>
echo ‘<a href=”DOKUWIKIPATH/doku.php?id=logbook:’.date(“Y-m-d”).'”>Edit Today</a>’;
</php>
which opens the page of the current date in the directory logbook.
I also use a link to Flickr’s Interestingness of the previous day that is changed according to the current day. This is done via
<php>
echo ‘<a href=”http://www.flickr.com/explore/interesting/’.date(“Y/m/d”).'”>Flickr Interestingness</a>’;
</php>
Date dependent links save a lot of time, not only because you do not have to create a link first, but also because you do not have to look at the clock which date is today. Since unvisited links are displayed in another (often accusingly red) color, it also shows you when you have not visited the link this day, e.g. that you have not yet written a diary entry.
Link-to-edit
A typical wiki link like [[logbook|Logbook]] opens the file in the Browser to display it, but not to edit it. Given that the difference is an “&do=edit&rev=” in the URL, an HTML-Link can be used to achieve just this. A click on
[[DOKUWIKIPATH/doku.php?id=logbook&do=edit&rev=]]
will open the page directly to edit it. While the link is longer, the one-time effort saves time if the link is used very often. This might not make that much sense for most files, but for DATE-dependent Links it is extremely helpful. For example, when I click on the link to the current day entry of my diary it is mostly to edit the entry. Using this link with a PHP time function
<php>
echo ‘<a href=”DOKUWIKIPATH/doku.php?id=logbook:’.date(“Y-m-d”).’&do=edit&rev=”>Edit Today</a>’;
</php>
saves much time.
Links to specific functions
Links can also display specific function, e.g. searching for all occurrences of a specific tag. For example
[[DOKUWIKIPATH/doku.php?id=tag:review&do=showtag&tag=review|Show Review Tags]]
will show all occurrences of the tag “review”.
Using the Logo in the top-right corner
The default DokuWiki template and the monobook-Template come with a large logo in the top-right corner of the site. While returning to the start page is useful, another useful function would be to go one page back. This can be done by the back-link of every browser, but the icon is usually pretty small (Firefox 3.x has addressed this by making the back-icon larger than usual). In my Wiki installation I modified the tpl/monobook/main.php file to change the image into an imagemap with two areas. The top area links to the start page (like usually the whole image), but the bottom part links to the previously opened page via “javascript:history.back()”. This solution is not perfect, however. It will open the previously opened pages as far as it can go and it will (unfortunately) also open them in Edit Mode if they were opened to edit. To prevent unwanted changes I only use this link when I did not edit something (which is usually the case when I want to go back).
The changes in the tpl/monobook/main.php file are done by replacing
<a
<?php if (file_exists(dirname(__FILE__).’/user/logo.png’)) { ?>
style=”background-image: url(<?php echo $DOKU_TPL?>user/logo.png);”
<?php } else if (file_exists(dirname(__FILE__).’/user/logo.gif’)) {?>
style=”background-image: url(<?php echo $DOKU_TPL?>user/logo.gif);”
<?php } else if (file_exists(dirname(__FILE__).’/user/logo.jpg’)) {?>
style=”background-image: url(<?php echo $DOKU_TPL?>user/logo.jpg);”
<?php } ?>
href=”javascript:history.back()” accesskey=”h” title=”[ALT+H]”>
</a>
with
<IMG SRC=”DOKUWIKIPATH/data/media/wiki_control/meta/logo.png” WIDTH=128 HEIGHT=128 BORDER=0 ALT=”” USEMAP=”#logo_MAP”>
<MAP NAME=”logo_MAP”>
<AREA SHAPE=”rect” ALT=”” COORDS=”0,0,128,64″ HREF=”DOKUWIKIPATH/doku.php”>
<AREA SHAPE=”rect” ALT=”” COORDS=”0,65,128,128″ HREF=”javascript:history.back()”>
</MAP>
Header Highlighting
The usual monobook template uses different font sizes to mark the different hierarchy of headers (header 1, header 2, etc.). I found that by using highlighting I could reduce the font size, making the overall appearance more pleasant and the level of the header more easier to recognize. The headers are sorted by color from header 1 to 6 in green, blue, yellow, orange, red, purple (which is the order I sorted my crayons and felt pens when I was a child).
The editing can be done by opening the tpl/monobook/monobook/ and changing the entries to
h1, h2, h3, h4, h5, h6 {
color: black;
background: none;
font-weight: normal;
margin: 0;
padding-top: .1em;
padding-bottom: .1em;
border-bottom: 1px solid #aaa;
}
h1 { font-size: 130%; background-color: LightGreen; }
h2 { font-size: 120%; background-color: LightBlue; }
h1, h2, h3, h4, h5, h6 {
border-bottom: none;
font-weight: bold;
}
h3 { font-size: 110%; background-color: LemonChiffon; }
h4 { font-size: 100%; background-color: PeachPuff; }
h5 { font-size: 90%; background-color: LightCoral; }
h6 { font-size: 80%; background-color: MediumPurple; }
Creating Graphics for Wikis
I found that the best programs to make graphics for my Wiki is not a dedicated graphic program (until the end, when you need it) but actually Apple’s Pages. The blank page layout allows easy creation of diagrams, navigation bars, etc. where each object can be easily moved and changed. The color fill with 50% opacity and shadow looks especially nice. After creating the graphic you need to place a large white shape (e.g. a square) beneath it. If you copy the graphic without this, some graphic programs become confused regarding the areas where no object is. The complete workflow looks like this
- draw the graphic with Pages (use the whole space you have, you can always scale down later)
- insert a shape (square), use Inspector => Graphic => Color Fill => White
- right-click the shape, use “Send to Back”
- select the whole graphic including the white shape and copy it (cmd + c)
- insert it into the Graphic Program (e.g. in GraphicConverter via cmd + j)
- use the select tool
to select only the graphic, not the outer frame that is often produced when inserting graphics, after selecting the graphic chose “Trim Selection” (or press cmd + y) to leave only the area you have selected - to select only the graphic use the MagicWand
, click on the white area outside the image, chose “Invert Selection” (shift + cmd + i) and then Trim Selection (cmd + y) - have a look at the size of the image and resize it if needed
- This leaves you with the graphic which you can now save as .png or .jpg
This way will produce sufficiently pleasant graphics. Sure, it is not Adobe Photoshop or Illustrator, but it works like a good Wiki: quick and simple.
Thank you so much,it is very helpful. I am a fanatic dokuwiki user.