The use of Javascript to add interactive components to websites has become commonplace. Whether you use jQuery, Mootools, Yahoo UI or any of the other popular JS libraries to enhance the user interface, AJAX really helps to add fluid interaction driven by server side data, without requiring the entire page to reload. (or AJAJ if you like JSON like I do, let’s just say the ‘X’ stands for ‘any structured data format’)

If you’re serious about accessibility, you’ll also keep the WCAG in mind. One of  its requirements is that you should never hide content behind a technology with limited availability. So, no information presented in a Flash application if you don’t offer a non-Flash alternative. Strict supporters of such guidelines take it one step further and demand that all functionality, even the features you add for convenience or plain bling, is essentially available if most of the supporting technology is turned off.

The reasoning goes a little like this: a website is there to perform a function or provide information. If people want it to look nice, they can have CSS. If they want interaction and save time on page reloads, they can have Javascript. If there is something that absolutely requires more than a webbrowser has to offers (at the time), you can consider writing a Flash application. Video used to be such an application, but HTML 5 promises to change that

The Problem

One part of the interface that’s commonly forgotten in all this is the URL. Of course the WCAG give you some guidelines on how URLs should be formatted, but compared to web pages, that’s like only covering HTML and CSS and forgetting about scripting.

The URL is an important part of the user interface. Some people use it to identify what it is they are looking at. Some of those may even modify the URL as a shortcut to reaching a specific place on the website. The URL is also what all browsers use to create bookmarks and what some add-ons and plug-ins use to get information about what the user is looking at.

But for (very good) security reasons, you have little or no control over the URL from JavaScript, at least not without a round-trip to the server, reloadig the entire webpage. An example of a security reason is that a user should not be fooled into thinking they are looking at ‘paypal.com’ when they are actually looking at ‘iscamyou.net’.

Still, having no control over the URL means that the user is limited to bookmarking the page that they originally visited. Any changes you make to the page through JavaScript interaction won’t be reflected in the URL.

The Solution?

You could notify the server of change on the client using AJAX. But this will only work if the user returns using the same browser, or when they are logged in somehow. Since many people use multiple computers or browsers sharing bookmarks using applications like Xmarks, this doesn’t really work. It’s also no good if you want to share a bookmark with a friend, since the saved information won’t be available to them.

There is one part of a URL that you are allowed to modify using JavaScript, the hash. This the very last part of a URL: protocol://user:password@domain/path?query#hash. For example ‘#/two/four’ in http://grismar.net/hashjs/#/two/four. The problem with this approach is that the hash string is not sent to the server when the browser sends a request.

So, although you can save some information in the URL, allowing you to bookmark it and allowing plug-ins and add-ons to detect a change, it still won’t allow the server to determine what to send you.

The Clincher

The final piece her is to use JavaScript to read the hash right after loading the page and making needed updates (including getting any needed information from the server through AJAX) based on the hash.

Of course you should limit any information in the hash to changes you’re willing to limit to JavaScript-enabled users only. So, for anyone taking the WCAG seriously, this means cosmetic changes or changes in usability that simply require the use of JavaScript to work (animation, dynamic changes, etc.)

I ran into a good use case where I needed this when helping design a search interface for the Nationaal Archief (National Archives) of the Netherlands. Here, the need arose to search in many collections of information at once, while presenting the results in separate areas of the user interface. Some users prefer not to see specific collections and closing one of the results will allow more space for the rest of the results.

From a usability perspective, users might expect to ‘bookmark’ the state of the application as well as the query they had just run. But users also wanted to be able to change the configuration without having to reload the page after every change.

You can see a simplified example of that result here and just view the source (XHTML+CSS+JavaScript) and feel free to use it. The example uses jQuery, but of course this is not required to employ the technique. You can download a copy of jQuery from http://jquery.com.

Some colleagues were asking, so I figured more people might want to know: how to get a working Linux box without breaking your Windows PC. To play with, to run some software you can only get on Linux or maybe even to run some virtual server programs.

Here’s how, using Ubuntu as a distribution (it’ll work for others too):

• Get Linux
  Download disk image with your favourite Linux bootable distribution. Right now, for Ubuntu, getting the Ubuntu 8.10 stable edition .iso file worked for me, the 9.04 is about to be released as a stable version too.
• Get VirtualBox
  Download the latest binary of VirtualBox. The VirtualBox 2.2.2 setup for Windows works fine for me.
• Install VirtualBox
  Using default options, install VirtualBox. You can install it in the default location, since you will be able to put the virtual machines in any folder you like.
• Create the virtual machine
  In VirtualBox, create a new virtual server. Default settings work fine, but you can tweak the amount of memory and diskspace to your liking. It does need a virtual hard disk, to install Linux on. Create the virtual hard disk where you have sufficient space to contain all the files you want to put on the virtual server.
• Attach the Linux disk image
  In VirtualBox, point the virtual CD-rom drive to the .iso file with your Linux distro. Once you start the virtual machine, its cd-drive will have this disk loaded and will attempt to boot from it.
• Start the virtual machine
  The virtual machine will boot using the CD-rom image. If you have the Ubuntu distribution, it will ask you what language you want to use and then offer you the option of booting Ubuntu without installing it. Instead, you can tell it to install Ubuntu, which will install it to the disk image you created.
• Install Linux
  Follow the instructions of the installer for your Linux distribution. Most of the choices will be straightforward, Google is your friend if they are not.
  Note: if your mouse gets ’stuck’ in the VirtualBox window, you can free it by hitting the right control button.
• Install Guest Additions
  VirtualBox offers a set of tools for Windows and Linux guest operating systems. Note: the guest operating system is the OS in the virtual machine. The host OS is the OS of the PC you installed VirtualBox on. To install the guest additions, shutdown the virtual server, download the guest additions for your version of VirtualBox and attach that .iso image file to the virtual CD-drive. Then start your virtual machine and start the appropriate installer from the CD-drive.
  Alternatively, select ‘Devices - Install Guest Additions’ when your virtual machine is running, to do it automatically. But if this doesn’t work, you will be able to do it yourself.
• Reboot and you’re done!
  Just reboot the virtual machine once more and you’re done! With the most recent guest additions, you’ll be able to seamlessly use the virtual Linux box, running in a window on your desktop. It will even support reading from your real CD-rom drive, floppy drives and USB devices and it will use whatever network connection is available in the host OS.

Of course, if all you wanted to do is run Linux applications on the Windows desktop and you already have a Linux server running somewhere, you could go the way of installing Cygwin and using its X-Server to show applications that run on the remote Linx server. But that’s another blog post ;-).

Tonight, at 0:31:30 (23:31:30 PM UTC Feb 13 2009) it will be 1234567890 unit time. In case you’re not as much of a nerd as I am: unix timestamps are used in many database systems around the world to record date/time combinations. In this system, time is counted as the number of seconds that has passed since the start of 1970. Put on the clock tonight and keep that bottle ready to pop!

Sadly, leap seconds are ignored, so since we have counted 24 leap seconds since the start, you might want to leave the cork on until 0:31:54. I’m sure many of my colleagues at the National Archives - used to think about decades and centuries instead of seconds - can see the humour of of a system that won’t work beyond 1970 (or rather 1901) and will be useless starting January 19 2038…

I just added a phpBB3 mod which adds RSS feeds to a phpBB3 forum to the forums on this page. Like most phpBB3 mods, it’s a bit of a chore to install. More so since currently there is no easyMod for phpBB3, so everything has to be done manually. But if you follow the instructions in the install.xml to the letter, everything should be fine. Read more

You can love or hate episodic content, but you’ll have to give it this: at least you save a few bucks if you buy something you shouldn’t have. SiN: Emergence as currently available on Steam, packaged with SiN 1 and SiN 1 Multiplayer, falls snugly into that category. Never mind that $5 should be good value for money for any playable FPS created in Valve’s source engine. Read more

Gliffy is a web application that fills the gap in open source office software: a Visio replacement. Sadly, it’s not open, nor is it really free. You can get a free account if you’re not using the documents commercially and even then, you can only have 5 active documents in Gliffy at any one time and they’re all public (that is, for the world to see).

Still, as a web-based application, it is surprisingly full-featured and it’s perfect for getting some diagrams quickly sketched out. Of course, if you’re really serious about your diagrams and want them to translate into code or be validated as correct UML, you will still need something like Microsoft Visio or ArgoUML (which is open and free by the way).

Gliffy supports JPG, PNG and SVG export. This is nice since it allows you to quickly save your work for use on a website, or even import the SVG into Visio or some similar product. If you know of other alternatives to Visio, preferably open or free, feel free to let me know. I’m aware of Dia, but that one just doesn’t do the trick. There’s too much focus on making diagrams that fit the rules and not enough “diagram sketchpad” for me.

The FireShot add-on for Mozilla Firefox allows you to take a screen shot of either the visible area of the web page you’re viewing, or the entire page. It includes an editor to tweak the image after shooting. FireShot allows you to save the image to disk, send it by mail, open it in an external editor or just paste the shot to the clipboard.

The built-in editor is a bit too much in my opinion, weighing down the add-on, but it can be good to have in your Portable Firefox, when you don’t have your favorite image editor handy.

Mozilla Thunderbird is a mail client for reading your POP3 or IMAP mail. With a simple add-on installed, Thunderbird will also retrieve webmail from the most popular webmail services like Hotmail, Yahoo, etc. Thunderbird supports multiple accounts, mail tagging, spam blocking and mail and address book import and export with other popular mail clients. Read more

OpenOffice.org is a full-featured office suite that’s available on multiple platforms, including Windows, Linux, Mac OS X and several UNIX variants. The user interface closely resembles that of recent Microsoft Office applications, as does most of the functionality. Let’s face it, when looking at office suites there’s no ignoring MS, it’s the one area where the folks from Redmond do really shine. Read more

The GIMP (GNU Image Manipulation Program) is an application with feature comparable to Adobe’s Photoshop and able to both read and write its PSD file format. It allows you to create original professional digital artwork, process digital photographs and convert and fix many types of bitmap images. The GIMP supports layers, works well with digitizers like WACOM’s popular pen tablets and offers an enormous number of tools and filters. Read more