Sharing ideas and comments about a particular web-page is often a tedious process involving lots of e-mail to and fro, or printed pages with post-it notes on them. Label addresses this by making it 'one click easy' to store your thoughts about any page and to share them with others.

Usage

Using Label on any web-page is extremely simple:

  • Drag the Label link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selecting 'Add bookmark'):
    Label
  • Load any web-page you want
  • Click Label in your bookmark bar
  • Type anything you wish in the label, create new labels and configure them as you wish.

Label can be used to store and save comments in several different ways:

  • 1. Save your own thoughts for later
  • 2. Create labels and share them with others
  • 3. Exchange comments about a page with your clients

1. Saving labels for yourself on any page is very easy using Label and is useful for making little notes which you will want to remember in future. All you need to do is load the web-page you wish to stick a label on and click the Label link in your bookmark bar (or your favourites bar in Internet Explorer) and enter the text you wish to save. You can move the label around, change it's colour and size as you wish. Furthermore, the label will be automatically saved whenever you finish typing your message or whenever you make a change to how it looks. When you reload the page, or come back to it at a later date, simply load Label as normal and your labels will be restored on the page.

2. Sharing labels with other people is one of the most useful features of Label, allow your to exchange ideas about design, copy or any other aspect of a web-page with colleagues, clients and friends. To do this, simply load Label as normal and create the labels you want to share. Then click the 'Share' link at the bottom of a label and enter a 'share code' into the text box and press return. All labels on the page are now being shared using that code. Simply give the person you wish to share the labels with the address of the page and the share code you used.

To load labels which have been shared with you, go to the address the labels are on and load Label as normal. Then click the 'Load' link at the bottom of the label which is automatically loaded and enter the share code you were given. Press return and the shared labels will be automatically loaded.

As an example, follow this link:
http://www.sprymedia.co.uk/design/label/examples/share_code.php
then load Label and enter the share code 'demo'.

3. The final use case for Label is to have it load automatically on a page when the page is opened in a web-browser. You must has access to edit and save the HTML of the page in question, but it is very simple to do, and is very useful for communicating ideas with clients about prototype designs. Note that when you use this method, the Load and Share options will not be shown in the labels on the page.

To have Label automatically loaded on a web-page, you need to include a small amount of Javascript at the bottom of the page:



  • 1. Little bit of Javascript
  • 2. Define the 'gsShareCode' variable with the share code you wish to use
  • 4. Load Label

As an example, follow this link and Label will be automatically loaded:
http://www.sprymedia.co.uk/design/label/examples/auto_load.php

Supported browsers

The following browsers are supported in Label:

  • Internet Explorer 6+
  • Firefox 2+
  • Safari 2.0.4+
  • Opera 9.2+

Unlike some of the other software available on this site, IE6 support is an absolute must in Label since it is designed for use by your clients, rather than just your knowledgeable self. Unfortunately due to the limitations of IE6's PNG support, Label won't look identical to how it looks in other browsers. Rather a simple rectangle is used, with a bit of shadow of course!

Support

Label is a reasonably complicated piece of software, so it is entirely possible that you may encounter a bug while using it. If you do find any, please report them to me.

Privacy

Label is designed for easy of use an sharing information, and not specifically for security. There are several other 'stickies' like implementations available on the web, which attempt to do the same thing as Label, but often involve complicated sign up and sign in procedures. I believe I've made Label as simple as possible to use, but at the expense of some security. If you share labels from a particular page, if anyone manages to guess your share code, they will be able to view your labels. So be sensible in choosing your share code, and ensure you don't do anything silly like putting your credit card information in a label!

Future work

Label is more or less feature complete as I want it at the moment (contact me if you have any suggestions though!), but one thing I am interested in doing in future is to build an SVG version. This would mean that the label could look a lot more realistic as the curves could be computed on-the-fly for the size of the label, rather that static curves as they currently are in PNG images. Likewise the gradient and shadow could look more realistic.

Download source code

As well as being free to use from this web-site, the source code for Label is made available under the GNU GPL v2.0 open source license. This means you are free to download, use and modify Label as you wish. Under the GPL you are required to leave the copyright information in the files intact, and provide the source to any modifications that you make. I would also respectfully ask that you provide a link to this page as the original source for Label where appropriate in your distribution, and let me know how you are using Label (always interested to know how my software is being used!). You can download a zip file containing the source code, and installation instructions, below:

Enjoy using Label!

Article image

Elsewhere on the web