Support Us

AnnotateIt and Annotator: a new mode of communication on the web

April 3, 2012 in Annotator, Featured, OKF Projects, Our Work

For some time, we at the Open Knowledge Foundation have been working on a project to allow you to annotate the web. All of it. We’re now happy to announce two major releases: of Annotator, the code that makes web annotation possible, and AnnotateIt, a web service providing storage for your annotations.

What are you on about?

If you haven’t heard us talking about Annotator or AnnotateIt before, you’ll be wondering what this is all about. Annotator is a piece of code that runs in your web browser and helps you add commentary to the web. There’s an Annotator “bookmarklet” — like the one used by Pinterest and many other web applications — which allows you to create annotations on any web page simply by selecting content with your mouse. This will work no matter where on the web you are; whether you’re reading a Shakespeare play, a news article, or a Wikipedia page. These annotations usually contain simple text content, but in principle they can contain any kind of data you like. There are already a number of plugins that store extra data on the annotations such as tags or details of who created them, but you could include links to other web pages, videos, or audio content. All the annotations you make can be saved to a central service for long-term storage. You can find a demo of the Annotator software on the Annotator website.

In addition to the plugins we administer, others have added support for touch devices, storage in your browser, and heatmaps allowing you to see where a document is most heavily annotated.


That’s all well and good, but how can you actually use this thing? That’s what AnnotateIt is for. AnnotateIt provides “annotation as a service,” and serves as the long-term storage we mentioned in the previous paragraphs. In the next 30 seconds, you can get up and running with Annotator in your browser by following a few simple steps:

  1. Sign up to AnnotateIt.

  2. Go to “My Account” and drag the bookmarklet to your browser’s bookmarks bar.

  3. That’s it, you’re done: you can use the bookmarklet anywhere on the web.

All the annotations you make anywhere on the web will be saved to AnnotateIt and you’ll be able to review and organise them on http://annotateit.org. You can make public annotations for all the world to see, or you can keep your annotations private: it’s up to you.

AnnotateIt is also designed for people who run websites with content that could do with annotating. Open Shakespeare is one of our projects that uses AnnotateIt as a storage server, while presenting annotation as a fully integrated service. If you develop such a website, you might be interested to know that integration with AnnotateIt takes just a few lines of code: see our website for details.

So what’s new?

  • Annotations now have an online presence, and when you create annotations with the AnnotateIt bookmarklet they display a link you can share with friends on Twitter, Facebook, etc. You can even embed Annotations directly in a web page, like this:

  • We’ve made several tweaks to Annotator’s user interface to improve its usability, particularly when annotation is enabled for only a small part of a larger page.

  • Developers can now make their site annotatable with just one line of Javascript.

  • We’ve been involved with the Open Annotation Collaboration‘s work to standardise the world of online annotation, and in the future we hope we’ll be making Annotator into the first real-world implementation of the OAC specification.

  • Hypothes.is are working with us on their project to bring citizen-powered peer review to the web.

  • FinalsClub are porting some 9000 high-quality annotations of Shakespeare plays over to Annotator’s format so they can be displayed on Open Shakespeare.

Lastly, we’ve been working on improving our internal processes and infrastructure so that we can continue to iterate faster in the coming months.

What’s left to do?

There’s so much we have planned for the future! To pick just two particularly exciting things out of the laundry-list of plans we have for Annotator (see more in the minutes of our recent community call):

  1. The ability to Annotate not only web pages, but multimedia content within those pages like images and video. We hope we’ll be working with the authors of yuma.min.js to make that happen.

  2. The Changing Content Problem. At the moment, Annotator doesn’t behave particularly cleverly when the content it’s annotating changes. In the most general case, this is a really tough problem to solve when you don’t control the content, but lots of smart people (see the Memento project) are working on it, and we’re going to see what we can do to transparently migrate annotations to newer versions of a web page where possible, and provide access to old/outdated annotations via a Memento server or something like it.

If you want to get involved, please subscribe to the mailing list and join us in the #annotator IRC channel on Freenode. If you’re a developer: get stuck in and send a pull request on GitHub. Whatever you do, make sure you sign up to AnnotateIt and send us feedback on what you see!

  • TaulantR

    Will it be able to integrate with Zotero? If yes this could come in very handy, otherwise it will end up being more of an online gimmick as many other annotation addons have.

    A zotero integration would need a way to search and categorize all annotations on all websites you’ve made.

    • http://okblogfarm.org/members/nickstenning/ Nick Stenning

      I think that’s a great idea. I don’t use Zotero, so I don’t know exactly what this would look like, but I’m all ears if this is a common request. We’re planning on adding much better search/filter/categorization to AnnotateIt itself, and I think Zotero export/sync would be useful.

      Could you open an issue to discuss this on our GitHub repository?

  • http://donohoe.io Michael

    I wrote a smaller and simpler deep-linking and highlighting script called Emphasis.js for The New York Times awhile back:

    It generated dynamic keys on the client-side for paragraphs which is tolerant to a large degree to changes in text, moved content, and re-ordering of sentences.

    You can view the source on GitHub.

    • http://okblogfarm.org/members/nickstenning/ Nick Stenning

      This is very cool, Michael. For those who haven’t followed the link, Michael’s script identifies paragraphs in a page using the first letters of the first three words of the first and last sentences in that paragraph. So, for example, this paragraph I’m writing now would be paragraph “TivSfe“.

      I’d be interested to know what Emphasis does in the case (admittedly unlikely for the limited domain of NYTimes articles) that this isn’t enough to uniquely identify a paragraph. What I’m hoping to do with Annotator is assemble a whole library of heuristics like this one to deal with content-change. If you fancy contributing, do pitch in at https://github.com/okfn/annotator/issues/115.

  • Pingback: OKF Takes Step Toward Annotating the Web with Annotator & AnnotateIt - semanticweb.com

Get Updates