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: Your user name is Jin and your password is 1234. Use WebAnnotator (http://webannotator.com) to annotate the webpage, http://en.wikipedia.org/wiki/Lisp_(programming_language)*# Highlight the first sentence "Lisp(historically, LISP) is a family of computer..."
- Add a note saying "Awesome!" to the picture of LISP machine.
- Task Two: Save, Review Saved & Reopen
- Save the annotated webpage.
- See all your saved pages. (Suppose you have saved two other pages before. So in total you now have three saved pages.)
- Open the one you just saved.
- Task Three: Share your annotated Wikipedia article on LISP with Alex (user name: alex, email: alex@gmail.com) so that it is viewable by Alex, but he cannot change anything on it.
- Task Four: Collaborative Edit with Another User
- Share your page with Sam (user name: same, email: sam@gmail.com) to allow him to edit at the same time on the page.
- Highlight the person that first implemented Lisp (Steve Russel, in the 4th paragraph of "History").
- Change your previous note on the picture from "Awesome!" to "Broken."
Observations
- First Iteration
- Second Iteration