Prototype Photos
1. Homepage: Paste the URL in the central text box and click "Annotate!". |
2. Edit page. Hovering over a section (div) makes a border appear. Clicking on the image will make the "Add Note" button appear just above cursor. Click on the button. |
3. Clicking on the "Add Note" button makes the text box appear on top of the image. Type in the text box. |
4. Finished typing the box. The text box becomes transparent when the cursor is not hovering over it. Highlight text makes a row of buttons appear. Click on the first one ('Mark Highlight') to mark the highlight yellow. |
5. Clicking on the 'Save' button makes the dialog box appear and disable the screen at the background. Type in the page name and click 'Save' to save the page and get back to the edit screen. Click on 'Jim's Saved Pages' to go to the next screen (see next photo). |
6. Dashboard page. It lists all saved annotated webpages with thumbnails. Page name and access control rights are shown below the thumbnail. Clicking on the thumbnail to go back to the edit screen of that webpage. |
7. Clicking on 'Share' to make the 'Share' dialog box appear. Enter usernames or emails at the left box for giving read-only access, at the right for edit access (possibly at the same time, i.e. collaborative edit). To give Alex read-only access, type Alex's email in the left box and click 'OK'. |
8. Access control rights are shown on the top left bar. Now the 'View' right is given to Alex. |
9. Give 'Edit' right to Sam. The div that Sam is editing is bordered and flaged with 'Sam' (the dark red bordered region). User Jim can edit the notes on the image. |
10. When Sam finished editing the text, he went on to modify the notes on the image. Jim can now edit the text. |
Briefing
WebAnnotator is a web application that allows users to annotate web-pages and to share the annotated pages with trusted parties. Annotating capabilities such as commenting and highlighting are supported.
For example, a student taking a class can annotate course materials that are on the Internet and share his notes with his friends. WebAnnotator greatly facilitates this annotation and sharing process.
Scenario Tasks
Task One
Use WebAnnotator (http://webannotator.com) to annotate the webpage, en.wikipedia.org/wiki/Lisp_(programming_language):
1. Highlight the first sentence "Lisp(historically, LISP) is a family of computer..."
2. Add a note saying "Awesome!" to the picture of LISP machine.
Task Two
Save, Review Saved & Reopen:
1. Save the annotated webpage.
2. See all your saved pages. (Suppose you have saved two other pages before. So in total you now have three saved pages.)
3. Open the one you just saved.