Inside Technique : Web Annotator
By Kenneth Cox

This article will show you how to take advantage of technology features in Internet Explorer 5 that lets users add comments or annotations to any area on a loaded web page and have the changes saved to the server.

To get the most out of this article and accompanying samples you should be familiar with Javascript, the Document Object Model (Internet Explorer 5.x), Active Server Pages and Dynamic HTML.

Our development starts with an application that lets users navigate to a finished web page and make annotations to the page and save them as  new file to the web server.

The sample application contains setup informaton for your server and Visual Interdev in a readme.htm file. A separate file is Included for setup instructions for the Bookmarklet code and using the Microsoft XMLHTTP control that ships with Internet Explorer 5 http://msdn.microsoft.com/xml.

Additionally, check out standards being worked on by Microsoft and others at http://msdn.microsoft.com/standards regarding webDav (web distributed authoring and versioning).

How it works:

The Annotator application is a frameset based application invoked by selecting a Bookmarklet(* a button added to the browsers link bar that can contain URLs or Scripts; http://www.bookmarklets.com) button on the Browsers link bar.

figure 1 Bookmarklet with Javascript URL

Once the Annotator application is called, it gets a reference to the previously loaded page and attempts to load it back into its own frameset so the user can then make annotations or notes to the document.

To accomplish this a series of steps need to be performed. First, the bookmarklet  is used to request a frameset that hosts functions to manipulate the document the user wants to add comments to. This frameset basically takes the loaded document, adds script support then saves it as a new file to the server.

After script support is added, the application calls on the Microsoft XMLHTTP ActiveX control to save the string back to the server as a file. The page is now renamed and the original is left untouched. The user can now make annotations and save them via a button that gets added to the document receiving the annotations.

Why do we want to annotate a live page?

When a web author finishes designing a web page, the completed work is saved to the file system. Usually saved to a development web server or share location where the document may be viewed by others using a  web browser. Normally, a quality assurance check is performed by others to make sure that the page is ready for publishing to a live site or production server.

When corrections need to be made to the page the changes are voiced to the web author through a variety of means. Usually by email, phone, a team huddle around the computer or a meeting.

Our project takes this a step further by allowing anyone to markup a copy of the document in their browser so changes can be seen exactly where needed. This is especially useful because the user is only required to type in a comment anywhere she/he feels a change is needed. No html skills are required.

Next we show you how to setup the annotation link on your toolbar.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.