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
The search terms you input do not have to be complete words. "Climb" for example, will match occurrences of climb, climber, climbing, etc. Do not include asterisks or other non-alphanumeric characters in your search terms unless you actually want them included (as with "TD+") as part of your search.
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.)
-
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:
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
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:
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.