open all | close all

Stuck in someone's frames?
Free yourself!

Site info

This is my mountaineering page. It includes plenty of links to external sites as well as content created by me, the most important of which for the time being quite extensive equipment guide. There's also extensive information grading.The links are in various languages, mainly English, but there are several in German as well as Finnish.

IMPORTANT DISCLAIMER: Trusting your life solely to something you read on the internet is just plain stupid. Get corroboration from a more reliable source, use your common sense, don't get yourself killed, and don't come crying to me (or the people I've quoted) if you do.

What's new

The updates not too frequent at the moment and are mostly done to climbing areas pages. There's more detailed Change_log.

Search Ari's Base Camp

Technical info

Nerd alert! The following chapters include quite technical description of the techniques used to create this site. These chapters have nothing whatsoever to do with climbing or anything climbing-related.

Background

This site started life as standard html site making use of frames to provide common elements without the need to write all the info manually over and over again. CSS style sheets were applied at very early stages to make maintenance easier. However the site still used lots formatting within the actual pages, especially html tables to handle positioning of elements.

This approach is a real bore to maintain, so few years back I started to think about easier way to maintain the page. Wanting to keep end result pages passive and to keep independence from web hosting provider, I decided against creating actively database driven solution. Furthermore, the ability to make the transition little by little was of paramount importance. So I decided to gradually change the publishing process so that the at least some data would be stored in a database. However, all data would be pulled from the database during the publishing process, end result would be a set of passive pages. The publish mechanism is multi-layered:

Long time goal is to transfer the whole site to be data driven so that all data is stored in some kind of database. Furthermore, database should be normalised so that single piece of information is stored exactly once. Achievinjg this goal is probably going to take years if it is ever completed. However, pretty much all the steps taken in maintenance are leading into this direction.

The changeover have been made gradually over the last few years. It will take quite some time when, if ever, it will be completely finished.

Current solution

1. Base Layer: base data is stored in a sort of database. The database in question is a collection of xml-files which are used to store data much like database tables are used in real databases. In case there's need, it would be rather trivial to replace database-xml-files with real database as xquery makes it easy to import data from databases into xml-files provided proper tools are at disposal.
2. Middle Layer: middle layer consist of xml query pages and bunch of xsl(t) files. These are used in two steps at first to build static xml files from xml source pages and database files, then other set of xsl(t) files is used to transform those into (x)html. During the second transformation, reusable code snippets (such as navigation menu, javasripts etc.) are imported into the pages and internal navigation links are created based on document contents. The intermediate xml files are information complete in a way that they hold all the data and could be used by themselves with a proper xsl file. Transformations are automated through simple Windows batch files (which in their turn utilise msxml command line utility). The command line utility apart, the whole system is independent of any application.
3. Shell layer: shell layer is the part of the site that is published to public. It consists mainly of static xhtml pages. All of the formatting is done through css style sheets, thus layout changes are possible through manipulation of css files alone. Some javascripts and perl scripts are used to produce few functions. Use of css s fairly extensive and point is being made to avoid any use of non-semantic tags as far as possible and especially avoid using any formatting or layout specific instructions in the actual data (this means especially total avoidance of using html tables for layout purposes). Also css media types are used to create nicely printable layout. Goal is obviously to produce only valid xhtml documents, however, there may currently well be documents that are not valid (all documents produced by publish scripts are at least well-formed though, as otherwise the publish script would be able to process them). Because there's often need for extended character especially in names, I decided to use UTF-8 character encoding instead of ISO-8859-1. All css formatting on this site (except for image dimensions, of course) are supposed to be fluid so that browser's text text tools should work normally and all columns should scale accordingly.

Known limitations, areas that need work etc.

Replace equal height technique with better working solution. Equal height technique does not work properly with anchors. Probably the best bet is to use faux column technique in a flavor, that allows the use of liquid width columns.

Currently style names used in CSS stylesheets is a true mess with no consistent naming pattern (it even mixes languages). Bacause of this, it is hard to know what the styles are used for. To make matters worse, my stylesheets have very little if any comments. At some point of time I clearly have to clean this mess up.

Current image gallery is both rudimentary and out-of-date. Once I figure out how I want to create galleries and with what tools, complete overhaul of that part is in order.

Image inclusion needs to be more automatic so that existing metadata can be used. Probably best way is to use image manipulation or cataloguing software to export EXIF, IPTC or XMP metadata into xmp sidecar files (xml files on their own) that could easily be used to pull image dimensions, title, description etc. into actual document. Have to investigate how Adobe Bridge and iView Media Pro export metadata into sidecar files and how usable those sidecars are.

Techniques involved

xhtml

At some point of time the site will be completely converted to xhtml to allow easier maintenance through complete separation of content and formatting. As of yeat, only few pages are xhtml compliant, some are very close and some pages are quite far from there.

Microformats

This site uses microformats. In more exact terms, I have implemented hCard (html vCard) to item list type, which I use to contain information about huts, hotels, lifts, tramways etc. The big idea behind hCard is to allow browser to recognize contact information on a web site so that it can be easily picked up and exported to vCard , common standard to store contact information that can be exported from and imported into common contact management applications, such as Microsoft Outlook or Google's gmail. Furthermore, as postal address work poorly in the mountains, coordinates being much more usefull in locating huts, I also implemented geo microformat.

Forthcoming Firefox 3 and Internet Explorer 8 are likely the first browsers that cab handle such microformats out-of-the-box. That being said, there are already plugins for current browsers, eg.

Tails Export

Operator

Cascading Style Sheets (css)

External style sheets are used extensively to give the site consistent look. Pretty much all the formatting is done by css. Unfortunately none of the current crop of browsers that I know of (November 2005) follow the css standard to the letter, thus there are inconsistencies between different browsers. Luckily the differences are not too severe.

Javascript

Used for navigation tree and some other functions. Most notably javascript is used on navigation menu. You have to have enabled javascript to be able to properly browse the site.

perl

Few perl scripts have been used to provide some interactive functions like site-wide search funtion ans Server Side Include.

Server Side Include (ssi)

XML

Used extensively in publish side.

XSL

Used extensively in publish side.

Third Party components

This website uses some third party components, either as is or as customized versions. Most notable of those are:

Random Text

perl script to use server side include. This is applied to load random quote from a text file on start page.

dTree.js

javascript component to build Windows Explorer style navigation tree. There are several versions of this in use. The older version was much customized to allow links targets and to use css styles. Newer version supports those natively.

whatsnew.cgi

perl script to build a list of recently changed pages. Customized to fit visually for the site and to make use of css.

websearch.cgi

perl script to provide site wide search function. Customized to fit visually for the site and to make use of css.

bnbform

perl script providing feedback form Somewhat customized version.

3 columns fluid layout

The layout mechanism of this site employs the ideas behind 3 columns fluid layout by TJK Design. However, there are some changes compared to TJK method, probably the most important being:

• My version of the layout is elastic all around, rather than using pixel dimensions as was the case in the TJK Article.
• Original version uses well known faux column technique to create equal height columns effect. I didn't want to put mostly transparent background images on right column to finalize that effect in case menu column is the tallest, thus my column separator line between main content area and right sidebar does not scale in case the menu column is the tallest.
• Also, since I think modular css is the best thing since sliced bread, I divided stylesheets into parts:
  • Main stylesheet that contains just layout instructions (that is to say positioning stuff), and not a single instruction to affect formatting (stuff like fonts, colors etc.). There are in fact several layout stylesheets, currently one for properly css-aware browsers and one for less css-savvy7 browsers. Furthermore, there is also separate print stylesheet (@media is extremely handy, btw). Current incarnation of the print layout is not quite what I'd like it to be, mainly because I had to resort to absolute positioning to work. Also, at the moment the design breaks in Internet Explorer.
  • Formatting instructions are placed in separate stylesheet(s) that are imported into layout stylesheets. The beauty of this, is that should I want to change the layout part, I don't have to touch formatting part at all. Much more manageable imho.

tablesort.js

Nice javascript code which uses Ajax technology to turn static tables into sortable ones.

Send feedback

If you know some link that is missing please so inform me about it by using the form or sending email.

Check these also

My regular Ari's Corner. Includes plenty of links (descriptions in English) categorized in several groups and introductory guide (in Finnish) to Visual Basic for Applications macro programming in Microsoft Excel. Also has a link to my HTML-guide.