Last week I got hold of Designing Web Interfaces by Bill Scott and Theresa Neil. They’ve published all their examples on Flickr which is a handy reference.

On Tuesday I checked out some of the buzz from the SXSW interactive awards. Lost Zombies was terrific fun — a project to build a Zombie documentary / drama via a community (what’s with Zombies at the moment? People love them — check out Survive the Outbreak too). Anyway, this is a really interesting idea, although one I imagine which might end up looking a bit like the film in Son of Rambow when the entire school starts to get involved if the producers aren’t too careful.

We Tell Stories, another winner from SXSW is a digital fiction site produced by Penguin. I love the idea of things like this, although there is a tendency for any kind of hypertext fiction to go down the “Fighting Fantasy” books route. If you’re too young to know what I’m talking about or were too busy talking to girls in the mid-Eighties, these books were adventures in which you got to make a choice of what you wanted to do at key points in the story (if you decide the kill the evil witch of Swqkssx then go to page 100 etc.).

On Wednesday I learned why the Japanese don’t like the iPhone (too basic for very sophisticated mobile users apparently, well, amongst other reasons). Moving forward to Friday I got back into serious Web Development land and started enjoying the wonders of CSS border radius (Firefox and Webkit only, naturally). You might notice a couple of rounded borders on this site, although I tried not to go too mad, difficult though it was. Also, I checked out a couple more typography and grid layouts site. Because you can never have too much of that kind of thing can you?

Saturday’s link was a only child and came courtesy of Twitter in response to me pimping my post about useful usability sites I’ve been looking at recently: Johnny Holland: it’s all about usability. A site “exploring the interactions of experience design” no less. All articles are written in the voice of the eponymous Johnny, so there you go. One I will be dipping into I should imagine.

So that’s it for this week. As always, these links are brought to you via the Internet and my Delicious bookmarks.

My tumblelog is at: littled.tumbr.com

So, instead of writing anything sensible this month (I wish I could update this blog more often than that but, let’s be realistic), here’s a list of the things I think are exceptionally cool web- and technology-wise; and maybe not so cool. Yes, the easiest kind of blog post: the brain dump.

Moo.com is the obvious hands-down winner for me in the cool stakes. Why? It’s brilliant, that’s why. You can make stuff out of your digital photos. Not a new idea in itself — we’ve been able to put photos of our pets on to shapeless t-shirts that shrink to gnome-size on the first cold wash or those blurry holiday snaps on to mouse mats for some time now. Where Moo is different is the stuff that you display your meisterwerken on is in itself cool beyond reproach. I’ve just got some minicards made up — small business cards that have your photos on one side and text on the other. The text is limited to five lines so you can’t write essays, so even the most designed-challenged will get something decent. Image-wise you can select stock images or import your own from Flickr or other sites. Brilliant, and that the next year’s worth of birthday presents sorted then.

I’m not normally given to salivating over gadgets. Although I’ve got my fair share of them (phone, camera, MP3), I’ve certainly never really been given over to getting excited about things that cost too much and will be superceded two minutes after you’ve bought them. I’ve steered clear of the whole iPod thing and my Rio Karma is still going strong three years in (unlike Rio by the looks of things). It plays music in more formats than is strictly necessary — I have actually got a couple of albums in FLAC format, honest — and I’ve only just getting to the point where I’ve filled up my 20Gb.

Just two seconds looking at the new iPod Touch however and I was reaching for my Amazon wish-list. I know it’s wrong, but I want one. It’s an MP3 and video player, you can surf the web on wifi, and that interface (self re-orientating, touch-sensitive screen) made we want to do a wee. But, returning to reality for a second do I really need one? Well, yes, of course I do, but I did find some negative reviews of it. One obvious thing is that it only has 16Gb capacity (Flash memory, no hard drive), it has no Flash (as in Adobe) support and you’re tied to Safari to browse (it could be a lot worse, let’s face it). It also appears to have added evil functionality, namely the ability to find out what’s playing in Starbucks as you’re ordering your corporate whore double evil-spresso and the ability to download whatever musical criminality you’re being subjected to via iTunes to your player. Starbucks and iTunes? That’s just way too much wrong for my liking. But, even that is not somehow not putting me off.

But, what I’d prefer really is a nice alternative in the same way my Rio Karma was to iPod ubiquity. I’d take the interface and the screen but swap Safari for Firefox, bump up the storage space, add a hard drive and naturally add the ability to play all my .ogg files. I guess it should probably run on Linux too, but I’m not that geeky. Similarly, no need to bother with the ability to use Songbird to download the music playing in your local free-trade organic co-operative workers’ collective cafe (as that will probably be shit too). A pipe dream? Maybe…but a step in the right direction: Mozilla recently announced that Firefox is going mobile (properly this time). Of course, I’m not sure I can wait that long…

Lastly, I love RSS and I love Google Reader. Although it’s got nothing on Netvibes design-wise, Google Reader’s functionality wins out (although it won’t do feeds that require authentication, so for instance, I can’t get my Gmail in Reader, whereas I could in Netvibes). But, RSS is still a “pull” technology. I’ve got to go to to Reader, sort through the stories (over 1000 unread at the moment) and then decide which ones to read. As I’m so desperately busy, well, lazy, I’d like to be able to get email alerts on specified search terms from my feeds to help me decide what I need to read. Google Reader doesn’t let you do this, and Google Alerts doesn’t seem to let you either, unless I’m missing something, which as always is very possible. I’m thinking of writing a Zope/Plone-based solution to do this which would be fun and educational, but I can’t believe there is isn’t an obvious way to do this in the available products– please let me know if you know of one.

I’ve also noticed that Flickr seems to be making use of microformats. If you look at a photo which has geo data added to it via the Flickr Organizer and you’ve got a microformats plugin in your browser, you’ll notice you’ll be able to look up the location on Google Maps (or similar depending on which plugin you’re using). This is good news. Microformats are very lightweight and easy to implement, but obviousy the big players are going to need to buy in to them for them to really start to have any impact. Nice one Flickr, and hopefully a right move in the direction of greater interoperability between Web2.0 applications.

The title of this post is a little misleading — show me anything you can do in Google Maps in two minutes and I’ll buy you a bun. By the time you’ve worked out the longitude and latitude references for your map and its placemarks you’ve probably lost a couple of hours at least but we’ll brush over that for now.

However, using KML overlays for maps can save you a bit of time fiddling around with the API when creating your markers and setting the event listeners and the like. Encode your data in a KML file, point your maps script at it and much of the work is done. It’s not quite as flexible as using the API, but for a basic map it will save you some time. What’s more, you can use your KML file on the Google Maps site, export it for use in Google Earth and get your data indexed on Google.

I’ve created a basic example which plots three points of interest in Greenwich, London. The references may not be very accurate but I don’t care, it’s a demonstration. First create your KML file. This is a XML file with a .kml extension:

<kml xmlns="http://earth.google.com/kml/2.1">

<Document>
<name>A small map of Greenwich</name>

<description>A very basic map of Greenwich,
 SE10 made to demonstrate KML
overlays</description>
<placemark>
 <name>The National Maritime
Museum</name>

<description>

<!--[CDATA[

<!-- html code goes in here -->

]]-->

</description>

</placemark>

<point>

<coordinates>
 -0.003747,51.481154,-1
</coordinates>

</point>

</Document>

</kml>

Then create your Javascript file. Create an instance of GGeoXML and give it the location of your KML file. Then use the overlay method of GMap2 to overlay it on your map. Be warned that your KML files will be cached by Google Maps which can be a tad frustrating when you’re trying to debug your file. To avoid caching, add a query string parameter to your file name with a value of the date and time (this will change every second which should be enough for you). E.g.

url_end = "?nocache=" + (new Date()).valueOf();
myKML = "http://www.myserver.com/kml.file" + url_end
var map = new GMap2(document.getElementById("map"));
// Add controls

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

geoxml = new GGeoXml(myKML);

map.addOverlay(geoxml);

That’s about it.

• View example
• Download example HTML and Javascript
• Download example KML file

If you want to play with the code yourself, don’t forget you’ll need to substitute my maps API key for yours.

A couple of things to look out for

Make sure you keep the CDATA sections in the placemark description tag, otherwise you’ll need to escape your html with entities.

Don’t bother putting class names into the HTML in your KML file’s description tags as these will be stripped by Google Maps. Google Maps uses inline styles instead. Ouch. To get round this problem you can build some styles in your map page stylesheet. As a default Firefox will display the text of the name element of your placemark in bold, although Internet Explorer 7 won’t. I got round this problem thus:

#map div { font-weight:bold;}

#map #iwsw p { font-weight:normal !important;}

The iwsw id is what appears to be generated around your placemark window, so you can use this to cascade your styles down.

If you make a syntax error in your KML file, you won’t get any warnings — it just won’t display. It may be best to edit your file as .xml file in your editor of choice and then save it out as .kml.

A relative newcomer to the Web2.0 marketplace, Revish.com aims to be a place where “people can share their reading experiences”. Basically, it’s a site where users can post reviews of books they have read and rate them. It also has the usual trappings of a Web2.0 site: tagging, the ability to add contacts and join groups, all glued together by a nice bit of Ajax. Revish is aiming higher than some sites: reviews must be over 250 words long (but shorter than 1000) and there are guidelines for submitting them. Is this Web.20 for grown ups?

It’s early days yet for Revish, so it’s hard to tell how this will go, but so far the reviews I’ve read on the site have been well-thought out and largely well-written. One obvious problem it might encounter is that it takes considerably longer to read a book and write a considered review of it than it does to say, take a photo and upload it. Looking at the number of recent reviews it doesn’t look like they’ll be facing a storage space crisis soon but having said that, reviews are being added at a consistent rate. Having a critical mass of content is obviously vital for a site like this, so let’s hope it keeps going.

Visitors to Revish can browse the latest reviews or search the catalogue, which defaults to Amazon.co.uk, although this can be changed once you’ve registered. They can also search for book reviews. The fun really begins when you’ve registered however. Once you’ve set up your profile, you can create lists of books that you’re reading or plan to read, and rate or review the books you’ve read. You can also add other users as contacts should you feel like it.

The user interface is clean and unfussy with not a rounded corner in site. More exciting for standardistas is that the site is built to XHTML 1.0 strict. The little green tick on my Firefox HTML validator stays proudly displayed on every page from the site. It’s a shame that this should be news, but how many other Web2.0 sites make any decent stab at standards compliance?

Staying with technical build, another notable feature is the site’s use of microformats. I’m still to be convinced of the practical applications of these, but I haven’t really read the books and the blogs so maybe I’ll see the light yet. Having installed Operator, the Firefox microformats plugin I’m invited to find similarly-tagged bookmarks on Del.icio.us and photos on Flickr when opening a review page. Revish also pulls in photos from Flickr that have been tagged with the appropriate machine tags, e.g. book:isbn, book:author and book:title. These features may appear superficially gimmicky, but they do indicate Revish’s intention to play nicely with other web apps; as do the links following each review inviting you to add the page to your app of choice: Digg, Del.icio.us, Furl and the like.

Integration with other applications does appear to be at the heart of Revish. As mentioned, the site’s catalogue is pulled from Amazon, and when you register, you can enter your Flickr Id and pull your icon and details over from Flickr. You can also enter details of your pages on other applications like Last.fm and Del.icio.us. This is a nice touch; and I can only imagine the fun the developers must have had with all the various APIs.

I’d like to see a couple of new features added. I think there’s a real need for some basic content management functionality when writing reviews. At present a review is live as soon as you’ve clicked the save button; the ability to save reviews as drafts and then publish them would be a great help. Otherwise, you’re at the mercy of copying and pasting from other programs — no doubt contributing to the problem of itinerant escaped nbsps turning up in reviews. I’d also like to see a Flickr-style ability to see how many times your review has been read by people other than yourself. At present every time I want to check this, I bump up the viewing statistics by one. Considering how many times I had to edit one of the reviews after it went live, the number of views is probably as much of a work of fiction as the book itself.

Revish’s relatively small size means it has a friendly community feel to it, and the team seem genuinely keen to hear from users. I hope this bodes well for the future of the site, and that the momentum can be sustained.