Web Annotation And Markup - Tools And Services: A Mini-Guide

Sponsored Links

Web annotation tools and services make it easy for you to add notes, highlights and visual diagrams on the web pages that you visit, just as you might do with pencil or pens on a real book or journal article.

Photo credit: Andres Rodriguez

If you want to mark up the websites you visit with notes and ideas, web annotation tools give you a simple means of doing so. This can be a great way to add your commentary to web content for friends, colleagues or students, not to mention a useful mean for groups to share their thoughts in a direct and easy-to-reference way.

In this mini-guide I have gathered together a selection of web annotation tools and services, comparing them according to the following criteria:

• Sticky notes - tools that use sticky notes have floating note boxes that can be dragged and dropped around the screen, containing annotation
• Text - tools capable of storing text annotations
• Images - tools capable of incorporating or manipulating images
• Highlighter - tools which allow you to highlight text or images within a webpage
• Freehand - tools which allow for freehand drawing or annotation
• Shapes - tools which allow lines or shapes to be dragged and dropped onto the website
• Footnotes - tools which create numbered notes that can be jumped to from a navigation menu
• Tag - tools that allow you to tag your annotations or web content
• Browser support - which web browsers are supported by the tools
• From URL - tools which allow you to begin annotating a website by entering its URL from the website of a service
• From bookmarklet - tools which allow you to begin annotating a page by clicking on a bookmarklet in your browser toolbar
• RSS - tools that allow users to receive updates of your comments via RSS
• Email - tools that incorporate the ability to share a URL or invite friends to your annotated website using a bulk email form
• Private, public and group - tools with the capabilities to display annotations to all users, a group of selected users, or just the person that created the annotations

Shadows

Shadows is both a social bookmarking destination where users can share their favorite web content, and a means of annotating websites via their 'shadow pages'. A shadow page is accessed by clicking on the Shadows bookmarklet when visiting any website. This opens up an alternative, shadow version of the same website, on which users can share tags, discussions and ratings left by themselves, their Shadows friends, and with the entire Shadows community. It is then possible to access all of your personally bookmarked pages from your Shadows profile, in addition to being able to browse other users submissions.

Link: http://www.shadows.com

Trailfire

Trailfire, which was previously reviewed on these very pages, allows you to annotate a series of websites with notes and thumbnail images, and thread them together into a 'trail'. This makes it easy for you, or those you share your trail with, to take a guided tour across a number of thematically linked websites, all the while accessing your commentary and responding in turn. This is, therefore, a great tool for building up a narrative or sequence of annotated web sources rather than discrete, individual pages.

Link: http://trailfire.com/

Diigo

Diigo places a strong emphasis on social annotation, and makes it easy to add both sticky notes and highlighting right onto the text of a website. Your annotations can then be shared as lists, blogs, albums, feeds or via email, and can be shared with the public user-base, kept private or opened up to user-created group. This makes it a great tool for work groups to annotate the web together, sharing the results among themselves. Pages can also be bookmarked for your own reference, or shared within the Diigo community.

Link: http://www.diigo.com/

Stickis

Stickis makes it easy to create notes which float directly over the content of any website, and can be shared with your friends, kept private or else opened up to the Stickis community. To create a Stickis note, you simply click on the 'add note' bookmarklet, add your comments, a title and tags. Furthermore, Stickis lets you drag and drop content - such as images - directly into your note for easy sharing. It is possible to have your note appear on more than one website - each website linked within a note will attach itself to the URLs referenced. You can also add comments to other users (public) notes, allowing you to strike up a conversation.

Link: http://stickis.com

Fleck

Fleck has simplicity in its favor, and makes it very simple to add notes to any website either by using the Fleck bookmarklet or by directly accessing the site you want to visit via the Fleck homepage. Whichever way you choose to do it, Fleck allows you to create floating yellow sticky notes that can be positioned anywhere on the screen. The notes can be minimized to a small but distinguishable bullet point, which once clicked opens up the full note. This can be a great way of avoiding an overly cluttered screen. Fleck notes are open to the Fleck-using public, so that anyone can edit a note that they encounter, or create their own. It is also possible to publish your annotated pages directly to your blog.

Link: http://fleck.com/

Shiftspace

Shiftspace is a slightly more experimental tool which incorporates the familiar addition of notes and highlights onto websites, but also allows users to swap on-site images with another image from the web, and even access and change the HTML source code of a website (in an alternative version, the original site remains unharmed). Users simply press the shift and space keys simultaneously to invoke a meta-layer and enter the Shift Space tools. Fellow users can identify 'shifted' pages by a small icon that appears in their browser (§), and upon pressing shift and space can access this content or add their own. Shared and annotated pages can be shared via RSS.

Link: http://shiftspace.org/

SharedCopy

SharedCopy lets you add drag-and-drop-anywhere sticky notes to web pages, highlight inline text, and draw lines, boxes and circles directly onto the page.You don't even need to sign up for an account to get started, and can simply use one of two bookmarklets, one for public and another for private annotations. The editor features a handy 'undo' tool, in addition to a 'lock note' feature, which you must be logged in to use. Locked notes can only be commented on by their creator, whereas unlocked notes can be commented on by anyone that encounters them. Logged-in users can also save their annotated pages, which can be shared with a URL or via RSS. It is also possible to have your latest comments published directly to your Twitter account.

Link: http://sharedcopy.com/

JKN

JKN takes a slightly different approach to the sticky-note based annotation tools. Rather than annotating a site using floating notes, JKN users leave numbered notes between the lines of text on the website that they are annotating. Notes are numbered and highlighted in a different color, and inserted directly into the text of the annotated website. These notes can be instantly jumped to using a small navigation bar at the top of the screen, from which it is also possible to get a URL for the annotated page, email, blog or bookmark it using a range of social bookmarking services, and even print off the annotated version. Pages are accessed via the JKN website.

Link: http://info.jkn.com/

MyStickies

MyStickies is another web-based sticky note tool that allows you to add different color notes to both published webpages and your own MyStickies-hosted blank pages, for future reference. Notes are stored in your account, and can be deleted from there. It is also possible to add tags to any of your notes, to help you to quickly find them. Sticky notes can be positioned anywhere on a website with a simple drag-and-drop. MyStickies is a simple way of mixing your notes on websites with general memos to yourself. Unfortunately it is not possible to share these notes with other users at the time of writing. This does, however, make the tool well-suited to those who are more interested in private annotation for personal use. Stickies are placed via a browser extension and the ALT key, or using a bookmarklet.

Link: http://www.mystickies.com/

DrawHere

DrawHere takes a slightly different twist on the website annotation paradigm by allowing users to literally draw directly onto a website that they are visiting. Clicking on the bookmarklet opens up an image editing palette to the side of the screen. This palette features layers, opacity, brush size and a color spectrum. It is even possible to create swatches of your favorite colors, and recently used colors are also stored there. This could be particularly useful for those working in an art or design capacity, but also to those with a tablet PC or graphics tablet who would like to do their web annotation freehand. Annotated pages can be saved and shared by email or embedded into your blog. Different users annotations can be browsed through from a separate window. DrawHere can be activated via a bookmarklet, by entering a website URL from the DrawHere website, and can even be included in your own website, to invite visitors to draw on your website with the click of a button.

Link: http://drawhere.com/

Web Annotation Tools and Services - Comparison Chart