Web Annotation

I’ve started work on my web annotation project. I’m doing it under a grant from BC Campus as as an add-on to the Moodle course management system, but I don’t see why it shouldn’t be modularized so it can be used elsewhere. I have uploaded the core of my annotation code, such as it is, to the Code section of this site.

The web desperately needs annotation; I particularly noticed that annotation was mentioned at least separate times in the sessions I attended at Northern Voice. It’s an intertwingling technology that turns readers into participants. Yet, as I talked about before, I haven’t seen a good solution yet.

No, that’s not quite true. I have seen two annotation systems I really liked: Flickr and del.icio.us. Flickr’s ability to associate an annotation with a hotspot in a photo is fantastic; del.icio.us can be thought of as a page-level annotation system. (Hey, wouldn’t it be cool to have a browser extension which would display del.icio.us annotations for pages you visit?) Unfortunately, neither of these deals with ranges of text.

Ideally, annotation would be a feature of the browser. Even then, though, many web sites have legitimate uses for annotation which go beyond what a generic solution can provide: they may want to cross-link annotations, or allow users to see certain annotations created by other users. The widespread use of annotation on individual sites could be what it takes to propel browser developers to add the feature.

I’m a firm believer in simplicity: the 80/20 point, Worse is Better, and all of that. So my toolbox is XMLHTTP, DOM, CSS, probably REST. But the tough part isn’t the coding: it’s the user interface. It needs to be virtually transparent to the user. As much as possible, I want to emulate the real-world annotation interface available to any student (or vandal) with a book: highlighted text and notes in the margin. My work is fairly primitive (I’m only working on it part-time), but I’ve uploaded it in the hopes of any suggestions or contributions. Go take a look at my example and see what you think.