Page History

1.1

To use WebAnnotator, Jim first logins by entering his username and password.

1.2

He then gets to the Summary Page, in which there are two separate sections showing his previously saved pages and pages shared with other users. The pages are labeled by their titles and other properties.
To start a new annotation, Jim clicks on “New Page” which directs him to the following screen.

1.3

He types/pastes the URL of the page to be annotated into the text box (labeled by “pale” URL) and enters/clicks on the “refresh” button. In this case, the URL links to the “Worst is Better” paper for 6.033.

1.4

He then has entered the edit mode. The window is divided into two sections. The left one is just the webpage (Worst is Better).
The right subsection is editable and initially shows the original version of the webpage. WebAnnotator supports a wide range of annotation features such as (in the same order as in the picture) highlight, font color, popup comment box, SHARE!, copy and paste. It works just as any standard text editor like Microsoft Word.

1.5

Jim begins to annotate by highlighting some text and inserting a popup comment box as shown in the picture. To facilitate viewing, WebAnnotator automatically reveals the difference between the webpage and the annotated version by drawing red squares to the middle bar.

2.1

To return to his previously annotated page before recitation, Jim logins again and clicks on the page labeled by “Worst is Better” on the Summary Page.

2.2

This brings him back to the annotated version he made last time.

3.1

To share his annotation with Sam, Jim simply opens his annotated page again and clicks on “SHARE!”. A popup window will then appear.
Jim then enters the usernames of the people he wants to share with and clicks “OK”.

3.2

Sam will receive an email notification of this, with a hyperlink linked to Jim’s annotation. Once he follows the link, he will be able to view Jim’s annotation in share mode, which is highly analogous to edit mode, described above. On the left side is Jim’s annotated version. The version on the right is editable and identical to the left at the beginning.

3.3

Image Modified

To add his own new annotation, Sam uses the toolbar described previously to insert a new popup comment box. Again, this change is indicated by the red square (at the same height) shown in the middle bar to make newly added annotations more easily traceable.
Once he is done with his (hasty) annotation, Sam clicks on “Save” and is happy to have something to say in tomorrow’s recitation.