20+ Best Web Annotation and Mark Up tools

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.

Annotation tools allows you to discuss, exchange ideas or even brainstorm with your colleagues and peers efficiently in shortest time possible. It creates a new level of convenience to communicate if done right.

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. Not to mention a useful means for groups to share their thoughts in a direct and easy-to-reference way. In this article I present a roundup of web annotation tools that I hope you will find useful.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

1. Awesome Highlighter

With this tool you can highlight text on any web page and then get a short URL for your highlighted text, so that you can share it with others. You can also copy the selected text to the clipboard, email it or share it on Twitter, Delicious, Facebook or WordPress. When it comes to highlighting, there is a 2000 character limit per each selection. You can also add text notes to web pages. There are three ways to activate awesome highlighter: by entering the URL into the official website, using the bookmarklet, or using the Firefox Add-on.

2. Blerp

Blerp is great for starting and participating in conversations right on top of any web page. Since there is no registering required to get started, virtually anyone can join the conversation. You can post things like comments, videos and photos on any web page. Blerp offers social integration with Facebook and Twitter; you can sign in with each account and have your Blerps appear in your timelines. Currently there is an IE Plugin and Firefox Add-on that you can use. You can also add your Blerps to your blog or any website via a widget.

3. A.Nnotate

A.nnotate is an annotation and collaboration tool that can be use for documents (PDF and Microsoft Office), web pages and images. A.nnotate makes it easy to work in a group-like fashion on single items. What it does is take a snapshot of your document, web page or image and then create a read-only copy. You can then write notes on that copy and share it with whomever you like

4. Marginize

See what others are saying on Twitter, Facebook and Google Buzz about any web page. Add your own updates to the mix.

5. Bounce

Bounce is simple: click on any web page and drag your mouse to create notes. It’s great for writing thoughts and feedback or collaborating with a small group. The notes that you add will be label with your name and you can even share your notes on Facebook and Twitter.

6. Draw Here

The title of this tool says it all; Draw Here lets you draw on top of any web page while browsing via a bookmarklet. If you choose to save your drawings, then other Draw Here users will be able to see them when visiting that page. This tool is currently only supported in Firefox and IE. Draw Here is a great way to show your talent, draw comments on web pages or just doodle out of pure boredom.

7. Crocodoc

Crocodoc is the ultimate annotation tool for document collaboration. You can highlight, strikeout text, add comments and perform other types of revisions on PDF files, Microsoft Word documents, images and many more. All files are stored on Crocodoc’s secure servers and you can even password protect and encrypt them for added security.

8. ShiftSpace

his tool is a very unique concept. They offer a set of tools that you can use to annotate, edit, and “shift” the content of a page. As explained on the site, “by pressing the shift and space keys, a ShiftSpace user can invoke a new meta layer above any web page to browse and create additional interpretations, contextualizations and interventions – which [they] call Shifts. Users can choose between several authoring tools we’re working to develop – which we call Spaces.” The tools they currently offer are Notes (add post-it notes), Highlights (highlight web text), ImageSwap (grab any image on the web and swap it with another image of choice) and SourceShift (edit the HTML of a web page). More spaces are currently in development.

9. Trail Fire

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.

10. Reframe It

With Reframe It you can comment (publicly or privately) on any web page via the sidebar and reply to others. You can also highlight text on any page, add your own comment or note and then post it. Comments can be shared across social networks like Facebook, Twitter, Blogger, FriendFeed as well as via Email. There are a lot of features included like the ability to add friends, keep up with RSS feeds, and join groups. It’s almost as if it creates a social network within every website. Updates are displayed in real-time so that you won’t miss a thing. Reframe It stays closed on the page until you click on the tab (on the side of the window) to open it. A badge with the number of comments on the page is also displayed on the tab.

11. 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.

12. QuickFox Notes

QuickFox Notes is a is “a multi-tab note taking add-on for Firefox that uses the integrated bookmarks system or a single SQLite database to store notes.” It works great with synchronization tools like XMarks, Dropbox and SugarSync. What it does is synchronize your notes via those tools so that you can access them across various computers and mobile devices. QuickFox Note includes some great features like search, spell check, customization options (font size, background colors), note printing, sharing by email, archiving and much more.

13. Note Anywhere

Note Anywhere lets you make notes anywhere on the web. You can drag and drop your notes to move them around. Notes get saved in real-time, so there is no need to worry if the page or browser is closed unexpectedly.

14. Layers

Layers goes a step further by letting you add sticky notes, tweets, maps, videos and images on top of web pages. You can then share your layers across your social networks. It’s also great for posting tweets longer than 140 characters, since there is no limit. Comments can be public or private and you can invite others to participate in your conversations.

15. 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.

16. Notable

Notable is geared toward teams who are working on websites together and need to provide feedback on designs, content and HTML/CSS code. There are four ways to capture a website for collaboration: a Firefox Add-on, uploading an image to the Notable site, typing in the URL on the Notable site or capturing the site on an iPhone or iPod Touch.

17. 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

18. Google Sidewiki

This browser tool lets you add comments and read other user comments about any web page. Sidewiki is available on the Google Toolbar for Firefox and IE, and as an extension in Chrome. A nice feature of this tool is that you can share your entries directly on Blogger, Facebook, Twitter and your Google Profile

19. IComment

You can post public or private comments right on the page and see what others are saying. You can also search through comments on a site. One interesting thing about iComment is that you can win prizes just by using the tool.

20. Shift Space

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.

21. Shared Copy

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.

Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.