Tag me

Tags are being used by more and more websites. They’re everywhere. Look at the top of this post, its been tagged (by me). Look to the sidebar, a tag cloud (more about these later). Chances are if you use any social networking site or web 2.0 site, you’ll have used, seen and interacted with tags.

Our new-look corporate site, extensively uses tagging, specifically in News, Events, Imaging and the eProspectus, but what’s a tag used for? A tag is metadata, a keyword or term associated with or assigned to a piece of information. So tags can be added to any page in a web document and associated with any other pages prieviously tagged with the same tag.

The tags themselves are usually single words, informally and personally chosen. If you’ve signed up for accounts with Flickr, Picasa, delicious, Magnolia or YouTube, to name but a few, you’ve probably added your own tags by now. So is tagging just a way to show similarities between your documents? Not really, tagging data on these sites provides a simple navigation through to your own content, but also hooks into other members’ data by turning tags into links, which aggregate documents similarly tagged.

Tag Clouds

Tag Cloud

Popular tags can be visually represented through tag clouds, also known as a weighted list, with the most popular tags shown larger and bolder. Again the tags are links which drill down to similar content. You could even base an rss feed on a tag to alert visitors to new content so tagged.

Microformats

Microformats logoBy adding rel=”tag” into the links, the link also becomes a microformat. Microformats are a standard way to represent things in HTML, by adding rel-tag we’re standardising the link as a tag. Making the link a microformat allows the reader to find similarly tagged content from a wider source than just the current site. Firefox users can install a fantastic add-on called Operator. Operator recognises microformats on the page and in the case of tags, offers the reader entry points to content similarly tagged on other websites. Sadly there doesn’t seem to be anything similar available for Internet Explorer, yet.

Machine Tags

On the horizon, we have Machine tagging or Triple tagging. Machine tags use a specific syntax to define extra information about the tag, making it more meaningful for interpretation by computer programs. Triple tags comprise three parts: a namespace, a predicate and a value. For example, ehu:news=607This kind of tagging isn’t currently used on the Edge Hill site, but it’s built-in ready to go. Anyone interested can see an implementation on Adactio, any Flickr images, tagged ( where n is representative of his blog post) will be included automatically.adactio:post=n

Adopting Tags

By adopting tags, or creating tags so unique, ensures that all things tagged are related. For example, all news, event and images relating to this year’s Solstice Seminars could be tagged: solstice08. The tag is so unique, items tagged with it would be unlikely to be included out of context. Such unique tags can be promoted like a product, by requesting conference attendees to tag their own online content, on websites and slides etc.

Tagging Best Practices

If you’re about to embark on a journey of tagging for your own sites, it can feel a little daunting. There are, however, some best practices you can use to get started:

PHPLondon Conference

The conference, as you might have guessed, was in London. It lasted one day and was scheduled to run from 9:30 until 17:00. As Mike and I were driving this meant that our conference day started at about 4:30 with Mike picking me up at 5:00. Three hours later we parked at Amersham and took the tube arriving at the venue at 9:20.

The conference took the format of dual tracks and between the two of us we covered every single one. the first talk was by Ivo Jansch of iBuildings, which focused on the adoption of PHP into Enterprise solutions and his slides can be viewed on slideshare. It was nice to see that Edge Hill Web Services team are clearly on the right track but perhaps adoption of some of the slicker testing strategies proposed would be beneficial. I’m particularly interested in taking a good look at PHPUnit, Xinc and Xdebug.

The talk by Scott MacVicar and Mike Sullivan built on Ivo’s ideas and offered some real world examples of development for Enterprise solutions but, for me, it didn’t quite deliver. Maybe it was aimed at delegates that had yet to embark on large scale enterprise applications.

In contrast the next session on SQLite3 was something I’d never come across before. The talk began with SQLite’s widespread use including Apple’s iPhone, and it certainly seemed that it was a more favourable option than using config files for small applications. In addition PHP5 ships with SQLite3 and only needs a few configuration line changes to enable it, but some forums suggest that it is not as easy as it seems.

The mid-afternoon session had two bite sized talks on testing PHP and Project Zero. The testing PHP talk was not as I had thought about testing your own PHP code but about getting involved with testing PHP source code, something I’d never thought myself clever enough to even look at, never mind actually have a go at. It seems that if you can write PHP you can write PHP tests too. If you fancy having a go have a look at the PHP-QAT site.

Project Zero is IBM’s incubator project for RESTful Web services. The demo simply looked a lot like Yahoo Pipes but I suspect that if you dig deeper there’s a whole lot more.

The whole shebang was brought to a conclusion by Derick Rethans, who spoke about his personal PHP journey. This light-hearted look at PHP again hammered home the need to focus on security and testing (it also plugged Xdebug which he wrote). You can see the slides here, but unlike other speakers his slides act mostly as a visual aid to his presentation style and don’t really reflect the quality of the content.

Watching the ships go by

I can count myself pretty lucky here in Edge Hill. My desk is by a window with a decent view. Not bad for a new starter.

I haven’t always been so lucky, I’ve previously found myself in office blocks where I’ve been so far from a window, I wouldn’t know if it was night or day. My previous desk job had a view over the Mersey and I could (occaisionaly) watch the ships go by and see some spectacular sunsets. I’m enjoying my new job, here at Edge Hill but I don’t see many ships.

This morning I stumbled on an old bookmarked link for AIS, for a site called AISLiverpool – Watching the boats go by. This webcam and this one mean that I can (almost) get my old view back.

Google charts for Christmas

It must be Christmas, 24 Ways is opening its advent calendar doors to any web designers who care to listen. The entire site is worth a read but what caught my eye, yesterday, was an article about Google Charts and how easy it is to use to generate your own charts on the fly.

To generate your own chart, start with:

<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:ZreelPuevfgznf2008" />

which produces the following chart.

You can see that the image tag references the Google Charts API, passes it a few parameters which Google outputs as an image – Done.

The article then explains how to create, pie, bar and line graph, all by passing different parameters and values. Creating something as complex as:

<img src="http://chart.apis.google.com/chart?chco=00AF33,4BB74C,EE2C2C,CC3232,33FF33,66FF66,9AFF9A,C1FFC1,CCFFCC&chl=Egg+nog|Christmas+Ham|Milk+(not+including+egg+nog)|Cookies|Roast+Chestnuts|Chocolate|Various+Other+Beverages|Various+Other+Foods|Snacks&chtt=Food+and+Drink+Consumed+Christmas+2007&cht=p&chs=600x300&chd=s:KUIZFDPJF" />

Heres a summary of the parameters:

  • cht – Chart type (lc is a line chart, p is a pie chart, bhg is a bar chart etc.).
  • chs – Chart size (height and width).
  • chd – Chart data. (Tricky, Google uses simple encoding)
  • chtt – Chart title (use + in place of spaces)
  • chco – Chart Colours (use hex value, but not prefixed with # as in CSS).
  • chl – Chart labels (separate by a pipe | character)

Further Reading: Google Charts API

>