Webupon

I was recently contacted by a friend who was interested in creating a personal website for himself. He didn’t want any fancy design but just something simple and most important of all, something that he “could update myself”.

This was a good thing because I don’t want him to call me every time he wanted to update his website. Being a friend, I couldn’t ask for money from him too.

First of all, I introduced him to Microsoft FrontPage, the “Tool” for web designing newbies, but somehow he found the software difficult to use. I thought of telling him that it is very similar to MS Word, when I suddenly remembered that he didn’t know how to justify a document or format paragraphs. You must remember that I am dealing with a not-so-young guy, who’s also not very tech savvy.

Anyway, I was racking my brains, trying to remember other WYSIWYG (What you see is what you get) web editors. Macromedia Dreamweaver was out of the question and so was NVU.

I was nearly decided to make a website for him myself, when I suddenly remembered an article I had read – about TiddlyWiki. Created by Jeremy Ruston, TiddlyWiki, is a wiki-modeled client-side application which looks very much like a blog. It is a single self-contained HTML file that includes CSS and JavaScript code and is published under an open source license and anybody can download and use it for free.

I downloaded the blank TiddlyWiki file into my computer taking care that it’s saved with an .html extension. To start building our site, first of all we changed Site Title and Subtitles. We did this by clicking the link already provided, which opens a new entry area called a Tiddler. We then edit the title by clicking the “edit” button. After changing the name, we click the “done” button on the top.

Next comes the technical part – adding to the MainMenu (on the left). You write the tiles of different Tiddlers separated by spaces. To link to that particular Tiddler, we just surround the word by brackets. For example, [[Resume]] to link to the Resume Tiddler (which we created later) so on and so forth.

By playing around, I found a way to embed images. All we need to do is to add the code:

[img[alternate text|filename or URL][link]]

My friend found it hard to understand the code. So I used an example:

[img[Walnuts |http://farm1.static.flickr.com/138/325360831_6b578688c0.jpg]]

This embeds the image of walnuts, from my Flickr page.

After almost an hour, we are done. All we had to do was load up the page to his server. My friend looked at me puzzled and asked he how he was going to do that. Oh no! I guess it means that I have to spend some more time for another lesson.