This is the last link on my site, the colophon. In old printed books, the colophon was usually the last page and contained publication information and remarks about the production of the book. Literally taking a page from those old books, this page describes the tools, infrastructure and design elements used to produce PeterYu.ca.
I have had a web presence since 1997 but the domain peteryu.ca was launched in June 2010 with the 1st Edition, using a temporary design and layout. The present edition is the 2nd Edition, launched June 2011, which updated the layout and design beyond the temporary design of the 1st Edition.
PeterYu.ca uses DokuWiki as the content management system. DokuWiki stores all pages as text files, which makes it much easier to edit the pages offline compared to a database driven solution. For a small site like this, it is a good fit.
The design template that controls the look and feel is my own custom template called Reactor, which makes use of the sidebar functionality in the Arctic template and Matthew James Taylor's "Holy Grail Liquid-Layout: No quirks mode" for the three column layout.
My site is hosted on A Small Orange. If you need web hosting, consider using coupon codes orangepy5 or orangepy15 when you sign up at A Small Orange. Not only will you get $5 or 15%, respectively, off your order, but you will also help support my hosting costs.
The HTML code that DokuWiki and the Reactor template generates is XHTML 1.0 Transitional. Styling and layout are accomplished with CSS stylesheets. The stylesheets used are more or less valid CSS except for CSS3 features that are still using vendor specific prefixes and the occasional CSS hack for older browsers.
Although no specific browser is required to view the site, it has been thoroughly tested only on the latest Mozilla Firefox, as it is my browser of choice. Other browsers I tested include Chrome 12, Opera 11 and Internet Explorer 8 and 9. All work with some slight differences. Only Firefox, Chrome and Opera support all the CSS features I am using. The site is viewable on Internet Explorer 6 but there are some rendering issues.
The typeface used for most of the text is Palatino Linotype. There is a minimum width to the layout in the included stylesheet of 900 pixels and a maximum width of 1440 pixels. Although the design can be fully fluid, a width below or above these limits becomes difficult to read.
The colour theme consists mainly of shades of green with some orange and red. I chose this as a break from the black and white palette of the first edition. The main text has a white background because I find it easiest to read.
The site was developed primarily on my desktop PC, Vader's Hammer, running Windows XP Professional SP3 32-bit. I have installed Apache HTTP Server, PHP and Cygwin to help with development.
Images are created, edited and processed with a number of different programs. Image editing is done with The GIMP. Vector art and most diagrams are created with Inkscape. There are a few technical diagrams created with Dia. The banner at the top left was created with a combination of LightWave 3D (the background), Inkscape (the sign elements) and GIMP (final compositing).
I use OptiPNG and AdvanceComp AdvPNG to reduce the size of PNG files prior to uploading. I also use ImageMagick to batch resize or convert images.
HTML, CSS, PHP and other text files are edited with Notepad and Vim.