In Traction

I finally updated my homepage today. It used to be a custom Rails website, with RHTML views that I edited through SSH. I never got around to create a database model for my website, and to be frank, I am glad that I didn’t since my homepage’s structure changed a lot. On the other hand, having to login remotely and edit the view with Vim every time I wanted to add a publication to my homepage was too big of a burden. The net result was that I did not update my website as much as I wanted to.

A few months ago I decided to look for a better solution. I experimented with various solutions, including Drupal (with a lot of help from Wim Leers, thanks Wim!) and WikkaWiki (with a few tips from Dario Tarborelli) before finally settling on PmWiki. In this post, I will describe my rationale for choosing PmWiki over Drupal and WikkaWiki.

An advantage of Drupal is that it is extremely flexible. For instance, the website’s menu and corresponding URL structure can be completely customized. It also allows you to define content types such as “Course” or “Student” in a graphical way with the CCK module and visualize them with the Views module. However, this takes quite some initial work. Moreover, changes to the structure (e.g. allowing courses to have associated pictures of student projects) requires changing all this again. I believe that I should be able to change the structure of my homepage at any time. Adding a related publication to a software project or to a Master’s thesis should not involve a whole day of editing content types. Although I could use the Page content type for all my content, this is considered bad practice since Drupal only uses Page for static pages that almost never change. Of course, using Drupal only to provide a shared template and a global menu is massive overkill

In the same period, I read an interesting blog post on Academic Productivity about using a wiki to invisibly power a (research) homepage by Dario Tarborelli. A wiki seemed to provide a solution to structural flexibility, since it allows users to quickly rearrange content. However, as Dario points out, there are two problems that often make people suspicious of using a wiki for their website:

1. anyone can edit the content of a wiki
2. wikis look wikish

Dario demonstrates in the blog post that WikkaWiki can easily overcome both issues with access control lists and an easy-to-use skin system. He continues by giving a few advantages of using wikis for content management:

• they allow you to edit and modify content at the speed of light
• they allow you to easily embed all sort of contents in a page
• they allow you to set granular access privileges for specific pages, which is a very powerful solution for collaborative work with colleagues and coauthors

I started to experiment with a WikkaWiki-based homepage and was able to very quickly migrate my content and create a custom skin. I was impressed! There was a catch though. WikkaWiki did not support file uploads in an easy way, and custom markup (e.g. lists with a certain CSS class) seemed to be hard to achieve. Having the ability to upload files was essential for me, since I did not want to use an (S)FTP client everytime I wanted to add a publication or screenshot. Custom markup would be nice to style my publications list. Although WikkaWiki supports embedding HTML directly, it is obviously not ideal to have large amounts of embedded HTML in the content of a page.

Then I decided to have a look at PmWiki . I already heard about PmWiki before. Jori used it to power his homepage, and Peter also used it to power the Mobile and Pervasive Computing course website. Of course, the fact that 6th most frequent author in HCI uses PmWiki to power his personal homepage and the homepage of his research group helps as well A few other examples of PmWiki usage by HCI researchers or groups:

• personal website of Jakob E. Bardram
• the website of the in|situ research group in Paris, France
• personal website of Sean Gustafson

But the question was of course: how can I use PmWiki to invisibly power my website? I decided to post a message on the PmWiki mailing list asking for help, and got many helpful responses. One of the things I especially like about PmWiki is the helpful and lively community. Everything I wanted to do with PmWiki was either explained in the Cookbook, or pointed out by someone on the mailing list. As an example of a very nice website invisibly powered by PmWiki, take a look at the Village School website.

These are the steps that I followed:

1. Install PmWiki: this is very easy, just extract the archive and point a web browser to pmwiki.php (detailed instructions). PmWiki does not require a database, it uses flat files (yes, flat files!). That means you can easily copy a PmWiki installation from one directory to another (or even from one server to another).
2. Create a new skin by copying the default pmwiki skin in a new directory and give it an appropriate name.
3. Start editing the page template and CSS file to suit your liking. Hide typical wiki elements with CSS or by removing them from the template. PmWiki supports conditional markup so you can change the displayed page actions based on your login status. For more information, see this post on the mailing list and the documentation about page actions. You can also add conditional markup to hide the PmWiki documentation pages from the sidebar. If you refer to images in your CSS file, just keep in mind that the path is relative (e.g. refer to pmwiki/pub/skins/myskin/icons/trash.gif as background: url(icons/trash.gif);).
4. Set a password for editing pages.
5. Set up file uploads (disabled by default). Once uploads are enabled, PmWiki will automatically create the uploads/ directory when you upload a file. You might have to change the maximum upload size.
6. Set up clean URLs like Main/Homepage instead of pmwiki.php?n=Main.Homepage (preferably with mod_rewrite). This is a lot easier than it sounds due to the excellent documentation.
7. Done! Now you can start adding your content.

A few other random tips:

• You delete a page by replacing its contents with the word “delete”.
• Conditional markup is extremely useful to hide content that you don’t want to show yet. Just surround it with (:if false:) and (:ifend:) directives.
• PmWiki’s markup is very flexible. You can easily add CSS classes to elements (see WikiStyles) and create advanced tables (see Table directives).
• PmWiki supports wiki groups. This allows you to structure your pages in namespaces, so you can have for example both a Research.Activities and a Teaching.Activities page.

Finally, here is the result:

All in all, I am very happy with it. I especially like the fact that I can add or change content quickly, wherever I am. All I need is a browser.

Although there has been quite some debate about the newly introduced X-UA-Compatible meta tag in Internet Explorer 8, I noticed it is only necessary for backwards compatibility (at least in the developer beta). If a website does not look good on IE8, designers can add a special meta tag to indicate which version of IE it will be rendered in:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

In my opinion, that’s a lot less harmful than having to add a meta tag to actually get the new standards compliant behavior. Consequently, IE8 renders my homepage correctly, which is great news. I made the decision not to adjust my design to be conform with IE’s rendering a while ago. The future is looking bright as the problem will solve itself after a while.

Here’s a screenshot of IE8 beta 1 correctly rendering my homepage

Most features that didn’t work before but do now are CSS related: content generation (for separating the breadcrumbs), unordered lists styled as tables, correctly positioning hovering submenu’s, etc.

Update: Apparently the IE developers changed their mind which is why standards-compliant websites now work out of the box in IE8.

I had some problems lately with my domain (jozilla.be). The guys who I registered it with didn’t answer any mails, nor did they answer any phone calls. I was lucky once to speak to someone from support, who told me everything would be taken care off if I deposited another 4 Euro’s to get the domain out of quarantaine. Of course, this didn’t solve anything. My domain is still in quarantaine.

I wish I knew who the CEO of this company (and others) was before I registered my domain with them. It seems he has quite a disputable reputation. The people of the be.comp.internet newsgroup didn’t have a high esteem of him either.

Since you are reading this, I guess you found my new and permanent domain (jozilla.net), which I registered with Site5 for no more than 7 Euro’s.

I’m glad everything is working again. As always, the staff of Site5 was very helpful to resolve any problems I had during the migration.

In the future I will be looking into integrating my blog more into my main homepage. I might also move away from Typo since its instability is quite annoying. Apparantly the original creator of Typo has moved on as well. Mephisto seems promising. If the infrastructure is in place I hope to blog more often, and publish more material about my current research.

Edit: A few days ago, my .be domain was reactivated after all. A little too late however, since I already registered jozilla.net by then.

I updated my FOAF profile today with most of the metadata that is applicable to me. I also added my geographic position (longitude and latitude), which was already listed on my blog and homepage.

If you annotate your website with geographic information, it is possible to view sites near you through the GeoURL initiative. You can for example take a look at websites near this blog (within a range of 30 km).

If you are curious about FOAF and want to create your own profile, it might be good to read Tim Berners-Lee’s advice.

The last couple of days I have been working on a new, fresh design for my homepage. It was quite hard, since I’m far from a good designer. I have to experiment a lot before I end up with something that I really like, while Luk for example can come up with something astounding within minutes. Then again my designs are standards compliant and designed with CSS positioning instead of table layouts

Almost all content has been migrated to jozilla.be. There are still a few files to be uploaded. In the next couple of days I will setup a redirect at my old homepage.

I’m glad I finally have a nice blog again. There’s some news concerning Uiml.net and Cassowary.net that has been in the queue for a while now.

Stay tuned!