Education/Projects/JetpackForLearning/Profiles/Hoovernotes

HooverNotes

[HooverNotes] is a concept for a platform whose goal is to combine book-like annotations with collaborative processing. It shall be realized as a Firefox add-on integrated into the browser allowing to highlight, leave comments about and collect bits of important information related to a topic and several Web pages or a single Web page. These annotations shall take the form of text, hyperlinks, and multimedia content such as videos, images or maps. In this way, the actual Web content shall be augmented and enriched by the users – be it for learning or other purposes.

Annotations may be personal or shared with others, hence enabling knowledge exchange in a classroom setting.

Get started now

Install it!

• Go to the [HooverNotes] site and Install the add-on.

• Accept the Ountrusted source alert and go to about:jetpack

• Then click on Settings and insert your Twitter account.
  • This feature it's not included on the HooverNotes beta version because it did not work properly with the Settings. But will be included in the future.

Now you are ready to begin to annotate the Web with the HooverNotes add-on!

How it works?

Now you have the Hoovernotes installed on your computer, so you would be able to annotate on any Web page.

• In the statusBar you will find an icon (pencil) with a number (at the moment 7, while this feature it's not developed) of all the notes related with the focused URL.
• In the slideBar you will find the Hoovernotes sidebar where you would be able to begin the annotations, highlightings and movements of content from the tabs to the slideBar.

The HooverNotes slideBar header has the instruments to manage and move the content from the Mozilla Firefox tabs to the HooverNotes sidebar. But first of all, the users should be logged as Twitter users at the HooverNotes (not included, as we said on the installation part, at the beta version because it sometimes did not work with the Settings), so every HooverNotes slideBar is personalized with the Twitter picture and Twitter username of the user.

The buttons are "Create a new Sheet", "Search existing sheets" (not working yet), "Help", "Write annotations", "Highlight text", "Move content", "Synchronize your annotations into the cloud" and "Tag your annotations".

So let's begin to annotate on HooverNotes...

The first step -after login at the Twitter through the settings- is create a Sheet in order to insert annotations, highlights or move content from the focus tab to the slideBar. If there is no sheet created it is not possible to insert content from the Web to the Hoovernotes.

When you click the (+) button to create a Sheet the Hoovernotes will ask for a name or topic of the sheet. For example, if you are going to take annotations from Napoleon, you insert your preferred name, e.g. Napoleon Bonaparte.

Right now you have a sheet created, so you are able to begin your annotations from the Firefox tabs.

There are two ways in order to "send" content, previously selected, from the focused tab to the Hoovernotes slideBar. First of all, there is a contextMenu clicking the right button on a selected text into the tab or clicking on the Hoovernotes slideBar buttons after content have been selected.

When you insert content (annotated, highlighted or even moved) to the slideBar, a page container will appear identifying the Web page (Web page title and URL) where you are annotating content, so all the annotations from the same user at the same URL will be collected into the same container (Page UI).

It is possible to begin an annotation if you do not have selected text, but it is not possible to do highlighting or move content with no text selected.

The Note UI are into the Page UI and have the possibility of being removed, visualize the exact annotation referred into the text (e.g. in the case when you are just surfing the annotations and not reading the original content, this button will be usefull in order to read the real reference of the annotation into the original webpage) or edit the annotation. In the upper right corner there are the minimize or expand buttons and the remove Page annotations, which will delete all the annotations referred into that URL, and the sheet minimize/expand and remove buttons.

At this moment, we think you are able to play at your own into the Hoovernotes slideBar.

What is HooverNotes?

- If there are future features of Jetpack *not yet implemented* that your project is likely to take advantage of, please a) describe what they are, b) how you will use them and c) what, if any, work-around you used in it's absence.

Demonstration

We have recorded a screencast.

The architecture and implementation

Basically, HooverNotes follows an MVC pattern.

There are 3 classes: - HooverNotesView: Updates the slide bar. - HooverNotesController: Contains the main business logic. - HooverNotesStorage: Used for synchronizing the data maintained in the GUI with permanent storage.

These 3 components interchange information about HooverSheet, HooverPage and HooverNote data objects (DOs). A HooverSheet contains a HooverPage which contains a HooverNote. Each of these objects is identified by randomly generatd GUIDs.

When constructing the GUI, each of these DOs is represented by the following three DIV elements: - a container, representing the whole object - controls, containing the GUI controls such as buttons.

Not debugged, so no included

First of all, comment that the version uploaded it is not the last version which we are working, but the last one was very unstable and we preferred to publish the most stable version.

Anyway we have a [bug page] into our blog, so we will correct as soon as possible the errors if you find bugs and report it there.