Archive for the ‘JetPack Design Challenge’ Category

Hoovernotes presentation @ Austin, TX

Monday, March 29th, 2010

Soon I should write a post with all of my feelings and thinks that I lived at Austin, TX during the Mozilla Design Camp. It was great!

This is the Hoovernotes presentation:

These are the slides that I used during the presentation:

And I hope that soon we will explain new features of Hoovernotes at the blog!

HooverNotes project goes to Austin, Texas

Sunday, February 7th, 2010

We are very proud to announce that HooverNotes has been classified to the final round at the SXSW 2010 Interactive at Austin, Texas!

We have celebrated it with a calçotada with good friends.

HooverNotes 0.1 ready for review

Monday, February 1st, 2010

This is our presentation before the deadline (last minute) of the challenge. I hope you enjoy our work and we expect your comments, suggestions and insults 🙂

This is the wiki page of the HooverNotes project into the mozilla wiki where you will be able to read about our project and the future of it!

Last minutes working

Saturday, January 30th, 2010

With the illusion of finishing the HooverNotes prototype we have been working the last 48 hours full-time, with the inspiration of the beatles, bob marley beck, rolling stones, vinicius de moraes and a large etcetera!

Marc working at Philipp's sofa

hoping people could use HooverNotes in few hours 🙂

We are working hard…

Thursday, January 28th, 2010

This week is getting sooo long with the last Ho(o)verNotes tasks. Maybe our poor jquery and javascript knowledge is our worst enemy… but we are working hard at home.

Working at home

Miguel is our Jetpack graphical and interaction designer

Wednesday, January 20th, 2010


Miguel Dahbar is the new graphical, interaction and usability designer of the Ho(o)verNotes Jetpack plugin. I met Miguel working at TMT Factory (almost) 3 years ago while I was doing research and he was the art director at the innovation department. We get really good friends and enjoyed Barça.

I presented the Ho(o)verNotes project few weeks ago and he accepted to design the usable interface and the sheets and notes with us. Philipp and me are very proud to have this great help in our team!

Thanks Blackie! Let’s burn Ho(o)verNotes 😀

JetPack seminar videos

Friday, January 8th, 2010

We have attended the second and third Jetpack seminars which can be seen at Vimeo.

Jetpack for Learning – Seminar 1 from Jetpack4Learning on Vimeo.

The second seminar about UI:

JetPack Learning Seminar #2 from Jetpack4Learning on Vimeo.

This is the screencast of the third seminar:

Screencast 3 – Firstrun and Settings from Jetpack4Learning on Vimeo.

What are the most important things we expect to get out of the Design Challenge over the next 2 months?

Wednesday, December 9th, 2009

… good question. Besides always wanting to go to SXSW 2010 Interactive (Austin, Texas), here are a couple of points which motivate our participation:

  • Get to know how to develop open source software in a larger context/organization such as the Mozilla Foundation
  • Experiment with a new, cutting edge technology
  • Familiarize ourselves with the Mozilla software development landscape, in particular: other technologies/plugins which we may use for future development
  • Get to know people with similar interests and ideas/networking
  • Contribute to the evolution from the read-only to the read-write Web
  • Give something back to the community for FireFox and the plug-ins we’ve been using all these years
  • Enter the hall of fame of Web development
  • Buy a real Stetson in Austin, Texas in March 2010.

Ho(o)verNotes add-on proposal

Friday, November 27th, 2009

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, 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

 Ho(o)verNotes conceptual map

Ho(o)verNotes conceptual map

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.


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 [], the battles of Egypt [], 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.

Firefox with HooverNotes add-on working

Firefox with HooverNotes add-on working

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.

 Ho(o)verNotes blip detail description

Ho(o)verNotes blip detail description

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's Ho(o)verNotes about Napoleon

Mike's Ho(o)verNotes about Napoleon

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.


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