It seems the BBC engineers thought they'd liven up their error messages with the BBC Sound Index by referencing Catherine Tate...the geekiness levels you'd expect I guess!

There has been a fair amount of buzz about the new BBC series, 'Britain from Above', in which satellite imagery and geo-tagged data are combined to help tell the story of Britain.

Well, that's what they'd like you to think - of course, none of the promotional imagery is anything other than computer-generated, albeit from geniune data sources. People like to believe that satellite images are standard photographs, when the truth is a lot of standard imagery is false-colour. Although the images provided to promote the series are intruiging, they are really just graphical representations of data on top of an altered satellite image.

I've nothing against this type of representation per se, but I do think that data is more readily accepted when it looks pretty. These images and maps offer brightly coloured lines and dots and the appearance of a fast-moving, exciting world. Often the images look great and you think 'wow, look how interesting that is' without really thinking about whether it shows anything at all.

Take a look at the 3 images below and have a think what they REALLY show you - and whether it's an unlikely outcome or just a nice represenatation of a fairly obvious principle [click on each image to enlarge]:


London Taxi Activity - © SWNS 2008


Broadband Data Transfer Map - © BD 2008


UK Telephone Network Activity - © SWNS 2008

These images are certainly interesting - especially because I created the 2nd image on photoshop in 5 minutes. All it actually shows is lots of green and white lines on a tinted satellite image. I'm not sugegsting that any of the other images are faked or misleading, but just a word of warning - think about what the data actually shows and how relevant it is as it's not hard to make a pretty picture that illustrates nothing!

BBC - Britain from Above Homepage

Well last week we weren't exactly bathing in sunshine. Instead, Britain had rain for about a week non-stop and some exciting thunderstorms too. This may not be hugely uncommon, but I liked the photos I saw from readers of the BBC website, so thought I'd stick the best ones on here.

BBC - Storm Photo Gallery






© All images copyright BBC - 2008

I was reading an article on Wikipedia about Tutankhamun (Tutankhamun Entry), when I stumbled across an image of Egyptian iconogrpahy depicting Tutankhamun at war.

It just seemed to have a striking resemblance to the Bayeaux Tapestry (1000s of years seperate their creation!) - The top and bottom borders, the fight scenes, the characters dotted around the space. I guess good design is good design in all cultures!


Egyptian Iconography



Bayeaux Tapestry

I think a draggable box to resize a map is a really useful feature and is common in GIS software. I've seen this functionality on a couple of online maps before, so thought I'd have a go at implementing it myself.

I've adapted some JavaScript code I found online and designed a couple of button to control the zoom. So this feature doesn't conflict with standard controls, you click the zoom button to enable drag zooming - and click the button again to get back to default control options:



I'll explain in more detail how it's done soon, but for now you'll just have to hazard a guess! :)

I've made a few changes to the blog, hopefully making it much easier to use and explore. Now the number of posts is at a healthy number, I thought it best to add some navigational tools etc, so things don't get hidden in the depths!

The main changes are as follows:

1. There is now a SEARCH TOOL at the top-right of the page. This searches for your keyword(s) in all posts (title, body, tags) and brings back any that fit the bill.

2. There is now a NAVIGATION BAR at the top and bottom of the blog, allowing you to move back and forward in time across the blog's pages (at the moment there are 7 stories to a page).

3. Each article now has an ARTICLE IDENT identifying the article number in a colourful cloud.



I hope they help make the blog easier to use...

The lack of support for invisibility in PNG files across web browsers is a constant irritation for web designers. It's amazing that a proper solution still hasn't been sorted, with browsers hopping in and out of support for this function.

It seems simple enough...you want to create high quality graphics for a website that can be any shape yet blend in with any background. Curved tables, free-standing text, any shape that isn't a rectangle...there's a lot of scope for this function to be useful. And then, once created, the graphics for a website would be independent of any stylistic changes to the background. A bit like the situation we currently have with GIFs, but allowing good quality graphics.

So - after a lot of searching - I've come across what I think is the best solution to this problem. Of course, modern web browsers should display (or not display!) invisibility in PNGs without an issue, but you don't need to go back far to realise this solution hasn't been in existence long.

So, to solve the problem, I found a solution involving a link to an HTC file and then setting div tags for a background png image and bunging it in a table. I'll explain this below, but first I'll show you the problem. Below is the same image shown twice, on top without any HTC file and below with the link set up. If both images show invisibility, then you're using an up-to-date browser, but try opening this page in another piece of software and you may well see why this problem is so frustrating!





So - how is this fix applied? First, you need to get your hands on the HTC file (right click and Save As).

Then put the following lines of code in the <head> of your document, changing the code to represent your png file(s). For multiple files, just repeat with a new class name:

 <style type="text/css">
  div.classname { background-image: url(image.png) }
  img,div { behavior: url(iepngfix.htc) }
 </style>

Now, it's just a case of wrapping a table (with the dimensions of your image) with your div class, like so:

 <div class="classname">
  <table width="" height=" cellpadding="0" 
   cellspacing="0" border="0"><tr><td></td></tr>
  </table>
 </div>

And there we have it - perfectly displaying PNG files with invisibility across all browsers.