New technologies have had a great impact on how people study and learn today. Personal computers and the Internet have since long been established as valuable tools for students, and schools and universities are hard to imagine without them.

However, the success of the Internet comes at a cost. Information on the Web is miscellaneous, not ordered and pervasive. Relevant information is scattered across different Web pages. With the advent of the Web 2.0 paradigm, an ever increasing amount of content is created dynamically and collaboratively. It is difficult to assess its quality and relevance.

The problem has hence changed from having information at one’s disposal to identifying relevant bits and pieces. For students, this means: the content is there, but it is hard to find and process. An educated opinion on content, readily at hand for a student, would be helpful.

Tools allowing to benefit from other people’s use and filtering of the Internet, such as StumbleUpon, Del.icio.us or other tools for collaborative tagging of Internet resources, have been identified as a way to overcome these obstacles.

On the other hand, paper-based material for learning still has one major advantage over digital material: using pens and post-its, readers can leave comments, underline significant passages and leave markers for finding relevant sections faster. This allows more profound and more efficient information processing, both for the first-time reader and his successors.

What is Ho(o)verNotes

Ho(o)verNotes 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.

What you can do with Ho(o)verNotes

Annotations can be made for a Web page as a whole or for a piece of selected text. The user can then perform the following actions:

• Highlight: mark the section in a specific colour
• Annotate: add notes for the currently marked section or the whole pagez
• Move: move the marked section to the current set of annotations

What are the Ho(o)verNotes key terms and concepts, and how do they relate

A single annotation of this kind is called a Ho(o)verNote. A Ho(o)verNote is associated to a character / word / sentence / section / piece of text on a Web page. If it is not linked to selected text, it relates to a Web page as a whole. In each case, it has a single author.

Users shall be authenticated via an existing API to a common framework in order to avoid tedious sign-up procedures. Candidate APIs are Facebook Connect, Twitter API, Google Friend Connect among others.

A Ho(o)verSheet is a container for a group of related Ho(o)verNotes. Typically, Ho(o)verNotes within a Ho(o)verSheet either have a common source – i.e., the Ho(o)verSheet has been created for a single page – or are related to a common concept. The former is meant as a simple annotation of a single source; the latter allows grouping and annotating material from disparate sources, thereby creating a topical thread that students may follow.

Users may work on several Ho(o)verSheets in parallel and users can highlight, annotate and move to any of the “open” Ho(o)verSheets. The Ho(o)verSheets can be shared and made accessible to others.

The user that created a Ho(o)verSheet is its owner. The owner is like the editor of a Ho(o)verSheet; for instance, he’s the only one that may remove Ho(o)verNotes within his sheet. He also decides about other general Ho(o)verSheet properties, such as allowing others to add their annotations or setting its language, title and description. Ho(o)verSheets can also be given keywords, which may later be used for retrieval.

All Ho(o)verSheets have a unique identifier. It is constructed from the sheet’s title and owner attributes. It follows that all Ho(o)verSheets shall have a title; alternatively, a sheet may be associated with a URL. In this case, the title is taken from the corresponding Web page.

What else you can do with Ho(o)verNotes

You can…

• look for Ho(o)verSheets for the page you’re on, in a browsing/querying interface,
• decide whether you want to “overlay” the Web page with its annotations,
• edit existing Ho(o)verNotes and Ho(o)verSheets,
• personalize your Ho(o)verNotes view and experience, both on the fly and by setting preferences, and
• rate Ho(o)verNotes and Ho(o)verSheets.

Why is Ho(o)verNotes not just yet another annotation application?

A number of similar applications – among others, e.g. WebNotes, QuickNote, and Google Notebook – exist already. However, we found these wanting:

• A number of FireFox plug-ins allow writing notes in the form of post-its. These are text, only. Ho(o)verNotes will allow HTML text with embedded multimedia and hence offer a richer experience. It has been conceived thinking of an e-learning context.
• Other annotation tools only allow annotations for a single page. Ho(o)verNotes offers the possibility to create threads of annotations spanning multiple pages.
• Some of the competition charges money for using the full functionality. Ho(o)verNotes will be completely free of charge.
• Other plug-ins store annotations locally as personal bookmarks. Ho(o)verNotes is designed as a collaborative tool and has been conceived to be share and synchronize annotations. Online accessibility is a key feature of our concept.

Scenario

Mike, a history teacher, is preparing a class for 9th graders about Napoleon Bonaparte. He’s preparing an Internet reading list in his blog. The list includes Napoleon’s biography [http://es.wikipedia.org/wiki/Napole%C3%B3n_Bonaparte], the battles of Egypt [http://www.3viajesaldia.com/napoleon-en-egipto-la-batalla-de-las-piramides/], Waterloo, some background information about his life on Santa Helena and other relevant material. However, the material contains parts that are irrelevant to this lesson. At the same time, he would like to put the information in the context of previous lessons.

Hence, while his pupils will be given instructions to read the links from his blog, he wants to enhance these Web pages with personal comments, highlighting and related material. To do so, he’s using the Ho(o)verNotes FireFox add-on.

The add-on displays a single icon in the status bar. In the background, the add-on checks the configured repositories for Ho(o)verSheets for the current Web page. Mike is the first to annotate this page; hence, the icon is showing a ‘0’.

Mike clicks on it, and the Ho(o)verNotes plug-in opens as a sidebar, showing a new Ho(o)verSheet. Had there already been other Ho(o)verSheets, a menu would have opened allowing Mike to select one of them.

By default, the sidebar is located on the right of the FireFox window to allow easier drag & drop of sections selected for mark-up. However, users can also configure it to appear on the left.

The Ho(o)verSheet shows Mike’s icon and username in the top-left corner. Other Ho(o)verSheets which he was working on before are visible as tabs/cascades. He writes the sheet’s title and adds several keywords; “Napoleon”, “Bonaparte”, “France”, etc. All of this information shows in the Ho(o)verSheet’s ‘title bar’.

On the top of the sidebar, there are icons for the principal actions of Ho(o)verNotes – highlight, annotate and move. If Mike selects some of the HTML in the main window, he can drag it to one of these items he’s creating a new Ho(o)verNote – either highlighting the corresponding passage, copying it to the sidebar or writing comments about it. In order to create the Ho(o)verNote for another one of the open Ho(o)verSheets, he would first “drag” to the corresponding tab/cascade and then to the icons. All of the add-on’s main functionality can be accessed in three ways: by clicking and dragging and dropping with the mouse, by right-clicking and opening a context menu, and by keyboard shortcuts.

Another icon on the top of the sidebar is the “eye”. This is a toggle button; if activated, the annotations from the Ho(o)verNotes sidebar are “overlayed” over the main window. This means for instance that a highlighted section in the main window would appear as such.

Besides the “eye”, there is the “looking glass” icon. It allows querying and retrieving Ho(o)verSheets by language, keywords, usernames (of creators), exact or URLs with wildcards. Mike clicks on it and searches for the keyword Napoleon. Resulting Ho(o)verSheets are ordered; Mike can dynamically add and take away filters. Filter criteria appear as bubbles with a ‘X’; clicking on it removes the corresponding filter and changes the result set accordingly. Double-clicking starts a new query containing only the clicked-on filter. By default, the resulting sheets are ordered by by title, owner name, and date of last modification. However, Mike can change the sorting.

He continues working on his own Ho(o)verSheet and opens the Wikipedia page again. He adds a National Geographic video about the battle of Waterloo he found in YouTube.

To do so, he first creates a new Ho(o)verNote for the corresponding paragraph. The Ho(o)verNote shows his username and the URL it relates to. When being edited, a menu bar for formatting text is shown. The Ho(o)verNote serves as an “anchor” to this text.

Next, he goes to the YouTube page and “drags and drops” the video on the Ho(o)verNote. The video is now associated with the paragraph; as overlay is activated, the paragraph has a marker indicating that it has been annotated. After that, Mike goes to Google Maps and, likewise, “drags and drops” a map showing where Napoleon is buried in Paris to the same Ho(o)verNote.

Mike continues annotating and in the end, he has created around 30 annotations. Ho(o)verNotes within a Ho(o)verSheet are grouped by the URL to which they relate. They are ordered by the position of the section to which they relate, then by date of modification. Left-clicking on the Ho(o)verNote in the sidebar opens the paragraph in the main browser window. Likewise, clicking on the marker in the main window scrolls the side bar to the corresponding annotation. He can also right-click on the Ho(o)verNote and choose to open the corresponding URL in another tab.

Finally, Mike synchronizes his Ho(o)verSheet with the server, making it public. All Ho(o)verNotes users can now access his notes. He then publishes a link to his sheet in his blog. Students from his class can now access the Ho(o)verSheet in several ways – via the link or using the add-on’s status bar icon, which will now show a ‘1′.

What is the actual scope of Ho(o)verNotes?

The outlined functionality is huge, and we are but a few. Therefore, for this challenge, we are forced to limit the scope of Ho(o)verNotes for the first release:

We plan to implement a prototype for local annotation. Servers for sharing Ho(o)verNotes will not be considered.

For this release, the owner of a Ho(o)verSheet is the only person that can add Ho(o)verNotes to it. However, future versions will allow adding Ho(o)verNotes to another person’s Ho(o)verSheets in order to convert it into collaborative tool integrated with a browser.

Besides, for now, we won’t consider dynamic URLs or annotations on dynamic content. Caching of annotated content will also not be realized.

Future releases may allow annotations of other Web resources opened in a browser, such as PDF documents and other non-(X)HTML content.

License

Ho(o)verNotes add-on is licensed under Mozilla Public License 1.1 (MPL 1.1).

Tags: HooverNotes, Jetpack

This entry was posted on Friday, November 27th, 2009 at 22:26 and is filed under HooverNotes, JetPack Design Challenge. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.