You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 19 Next »

Back To Project Home

Scenario

Jim is a senior taking 6.033. If time permits, he usually does the assigned reading ahead of time. On Monday night February 6, he is sitting in his room reading the “Worse is Better” paper (http://dreamsongs.com/RiseOfWorseIsBetter.html) linked on the course website to prepare for tomorrow’s recitation.

He comes across a sentence ‘Unix and C are the ultimate computer viruses’, and he thinks it is a cool saying. He is intrigued to highlight that sentence and put comments along with it. He knows that WebAnnotator allows him to make notes directly on webpages, so he goes to WebAnnototar.com and loads the ‘Worse Is Better’ webpage. He scrolls to that interesting sentence he found and highlights it. Then he attaches some comments to the highlighted sentence. Later on as he reads he also highlighted some other important points in the webpage.

In order to be able to refer to his notes later, he saved the annotated webpage online in WebAnnotator. To refresh his memory the night before recitation, he returns to his annotated webpage in WebAnnotator.com to review the high-level ideas covered in the paper.

Unlike Jim, Sam is having a hectic schedule. He does not have time to read the assigned reading before recitation. An hour before recitation time, he makes an emergency call to his friend Jim for help. Jim tells Sam that he has taken some notes that could be helpful. So Jim goes to WebAnnotator.com, pulls out his annotated webpage and shares it with Sam.

Sam finds most of Jim’s comments helpful, except towards the end of the page, he does not quite understand what the words ‘Common Lisp’ are referring to. So he searched online and find a good article explaining what Lisp is on Wikipedia. He then pasted a brief sentence from Wikipedia explaining what 'Lisp' is and attaches it to the words, while keeping Jim’s annotations.

Design 1

1.

Homepage.

It provides a text box at the center for user to paste the url of the webpage that they want to annotate. Then they need to hit 'Enter' or press 'Load'.

It also provides a 'Login' button that pops up a login prompt (not shown). When logged in, the user's username will be shown at the top right corner instead.

2.

Editing Page.

User (logged in as Jim) loads a webpage and is shown the editing page. The user is able to edit the webpage in the editing page. 

The webpage being annotated is automatically divided up into sections (they can be high-level divs according to the DOM tree, for example). When cursor hovers over a section, a cross is shown at the top right corner of the section to afford 'deletion of the section'. When cursor hovers over the boundary of a section, cursor changes to 'move cursor' to afford 'moving sections around'.

Inside a section, 

At the top, the original webpage's URL, the user's username, and three buttons are present.

3.

 

4.

 

Design 2

Design 3

  • No labels