---

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. Another goal was to avoid being locked down to any specific publishing tools.

Eventually I figured the best way to achieve those goals would be to create a publishing mechanism that pulls data from a database on publishing-time, creating static output files. This removes pretty much all the requirements for the server.

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. Achieving 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.

Current solution

Base Layer

Data consisting of bunch of xml files used much like tables is a database. Some parts of info is also stored in actual databases, from where it is exported to xml-files.

Middle Layer

Xslt stylesheets used to turn those data files and database content into intermediate xml-documents and output documents.

Shell Layer

Output produced by publishing xslt stylesheets consisting of static xhtml pages.

Data layer

Base data is stored in a xml-files. Content-wise there are two types of these xml-files:

• Query-xml. My xml-query pages are basically the articles that end up being the pages. They contain non-recurring info locally, but possibly recurring info, such as links etc. are presented as reference to database-xml containing the actual info.
• Database-xml. Database-like xml-files. These files are not published to be part of the output. Instead, Publishing process retrieves data from these files.

• Generally the database-xml files 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.
• Books are stored in BookCat application's database (MS Access format). Bookcat provides handy tools to export details as xml file, so I have not felt the need to write xquery to access the data directly. Furthermore, this xml approach makes it rather trivial to change to another application should I ever feel the need to do so.
• Image details are exported from industry standard image tags (EXIF, IPTC, xmp) into xmp-sidecar files with ExifTool. All of the image details are read from these metadata-files.

Middle layer

General

middle layer consist of bunch of xsl(t) files that are used to tranform xml-query pages to output pages.

There are two-layers of xslt 2.0 stylesheets used to produce output:

• stylesheets used to extract references items from resource files to build static and information-complete intermediate xml-files. 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.
• stylesheets used to transform intermediate xml-files into output format. During this 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.

Stylesheets are modular. Particular care has been paid to separating all logic related to site layout from the actual content. Therefore tweaking only xslt file producing layout file I can change the whole site. We are talking about the divs etc used for document structure here, smaller layout changes are of course possible by just tweaking the css-files.

Xslt transformation files are written in xslt 2.0 and Saxon-B processor is used for tranformation. Transformations are automated through simple Windows batch files. Since the site generates lots of internal links based on content, I needed to generate file list in xml-format. For this purpose, Windows Powershell is used to output filesystem file list (basically the output of dir-command) into xml-file. I need this to be able to automatically generate links to other pages in the site (listed files are queried using xsl's document-function.)

Tools of the trade

ExifTool

I use ExifTool to extract image details from actual image files and write them to xmp-sidecar file so that tghey can be directly accessed from xsl files. ExifTool is a command line application, therefore it is easy to automate the process using Windows batch file.

Windows Power Shell

Powershell is used to output filesystem file list (basically the output of dir-command) into xml file. I need this to be able to automatically generate links to other pages in the site (listed files are queried using xsl's document-function.)

Saxon-B

Open Source xslt parser supporting xsl 2.0.

Shell layer

General

Shell layer is the part of the site that is published to public. The output aims to be fully standard compliant including:

• Static xhtml (1.1. strict) pages. 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 of the formatting is done through css style sheets, thus layout changes are possible through manipulation of css files alone. Use of css s fairly extensive.
• Lots of attention has been given 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 (For example, this means total avoidance of using html tables for layout purposes).
• Css media types are used to create nicely printable layout. All css formatting on this site (except for image dimensions, of course) are supposed to be fluid so that browser's text size tools should work normally and all columns should scale accordingly. Conditional comments and browser targeting are used for browser compliance. This required few non-semantic divs. JavaScripts and Perl scripts are used to produce few active functions.

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 useful in locating huts.

hCalendar

geo

hAtom

hReview

xFolk

XFN

hProduct

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. The CSS techniques used on this site include:

• Fluid layout
• Modularity. I divided stylesheets into parts: main stylesheet that contains just layout instructions (that is to say positioning stuff) and separate content-formatting-stylesheets (stuff like fonts, colors etc.). 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.
• Media-awareness. 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.
• Browser-targeting. There are in fact several layout stylesheets, currently one for properly css-aware browsers and one for less css-savvy browsers. Furthermore, the site uses IE conditional comments to target different versions on Internet Explorer to bypass some IE bugs.

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 and Server Side Include.

Server Side Include (ssi)

XML

Used extensively in publish side.

XSL

Used extensively in publish side.

Mashup

This site uses external connects to external services to provide direct access to information stored elsewhere. The services used are:

• Flickr
• Google Search
• Google maps
• Google Picasa
• Google books
• SummitPost
• Wikipedia
• Mountain Project

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.

tablesort.js

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

JavaScript Context Menu

JavaScript context menu based on sample provided by Luke Breuer. The sample has been changed quite a bit though.

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.
• Stylesheets are made modular
• My layout is media-aware

Client tools

The goal of this site is to use web standards, therefore any standards compliant browser (such as Mozilla Firefox, Opera, Google Chrome, MS Internet Explorer 8 or Apple Safari) should work just fine. That being said, because of the use of microformats, plugin capable of displaying and utilizing them is required to get the full potential of them as none of the current crop of browsers includes native GUI for microformats. Therefore, the following plugins are recommended:

• Oomph: A Microformats Toolkit
• Operator. Plugin of choice for Firefox. For additional functionality (such as additional format support), be sure to check User scripts especially: hAtom, hReview, XFN and hProduct.

Development areas

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.

Send feedback

If you know some link that is missing please do 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.