Implementation
Front-end
Technology
The front-end UI is implemented in javascript and html. It is developed and tested primarily on the Chrome browser. Firefox should also work, though not extensively tested. Some new CSS 3 features are adopted. Browsers that don’t support CSS 3 features such as box-shadow might not display the web application correctly.
On the Javascript side, jquery, jquery-ui and a third-party Javascript library called rangy are used.
Logic
The annotations are modifications to the HTML code made by javascript on the client side, so that there is no delay between pressing of an annotation button (such as “Highlight”) and seeing the effects (text selection highlighted with a bright yellow background). An update to the server is sent immediately after, hence the “auto-save” feature.
Back-end
Technology
The back-end server is implemented in Java. HTTP requests sent from the front-end javascript are served by Java servlets. We are using Apache Tomcat latest version (7.0) to host the server.
Logic
HTTP requests sent from client to server:
- /newpage?url=...: Sent when a new page is created from a user-provided URL ready for annotation. Server returns a URL to the new page to be annotated.
- /saveAnnotatePage: Sent when an annotated page needs to be saved. The message body includes the entire modified HTML of the page being annotated.
When a “newpage” request is received by the servlet, it first downloads the page using wget, then a number of modifications are made on the page, including disabling links on the original page and adding our annotation button HTML code and Javascript files.
The saved pages are stored as files in the file system on the server, i.e. there is no formal database at the back-end. Server keeps track of the paths of the saved pages and serves them to the client when asked.
Design Decisions that Affect Usability
Server uses “wget” to download the webpage to be annotated, which has limitations. Some webpages dynamically generated by Javascript seems not to be downloaded correctly, and there are other pages whose format and styling are not preserved well.
The main effect on usability is that the user seems to be limited on the range of webpages that they can annotate. Not loading pages correctly frustrates the user.
Design
Evaluation
User Recruitment and Characteristics
...