Playpen #7 - Flickr API

With my new-found ability to consume RSS (and by inference, any XML), my next challenge was to combine that with Playpen # 2 - Lightbox JS and the Flickr API and see what fun I could have.

Firstly, I logged into Flickr and found a suitable photo set of mine to play with, taking note of the setID. Browsing the API documentation, I found the API Explorer page very useful. It gives you some handy values straight away, such as your userID, plus recent photoIDs, setIDs and contactIDs.

If you put the SetID in the form on the Explorer page, and call the method (I used an unsigned call, since I was only interested in displaying pictures, not writing details or uploading), the XML file for your photo set is returned, along with the all-important URL you can use to call the method from your web page.

Whilst I didn't actually need to save this generated XML file, I did find it useful to see exactly what was what in terms of the schema - sometimes seeing an actual value tells you an awful lot more than just seeing the name of an element or attribute.

I then used Dreamweaver8 to generate a new XSL fragment file, which calls the aforementioned URL as its source. This gives you a display of the XML schema in the bindings panel. You can then drag and drop elements and attributes (relatively) painlessly onto your XSL document:

The nuts and bolts of my stylesheet are as follows:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8"/>
<xsl:template match="/">
<h3>
<a href="http://www.flickr.com/photos/{rsp/photoset/@owner}/sets/
{rsp/photoset/@id}">Pictures of d.construct2006 in Brighton</a>
by <a href="http://www.flickr.com/people/{rsp/photoset/@owner}"><xsl:value-of select='rsp/photoset/@ownername'/></a>
</h3>
<ul class="thumbnails">
<xsl:for-each select="rsp/photoset/photo">
<li><a href="http://static.flickr.com/{@server}/{@id}_{@secret}_o.jpg" title="{@title}" >
<img src="http://static.flickr.com/{@server}/{@id}_{@secret}_s.jpg" alt="{@title}" name="{@id}" width="75" height="75" id="{@id}" />
<br /><xsl:value-of select="@title"/></a></li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>

The Photo Source URLs page was extremely useful in telling me what paths I needed to construct for the image thumbnails and originals. Even so, I spent a frustrating half hour getting the syntax right. I learned the hard way that copy/paste in the code view doesn't always get you the right path - but if you drag an attribute from the bindings panel onto the design view of the file (not the code view), the path is sorted out for you!

Basically, I was mistakenly adding:

{rsp/photoset/photo/@attribute}

instead of just {@attribute}, in the loop, and nothing showed up. But the overall title bit worked fine - because this was outside the loop, and did require the rest of the path to parse correctly. Argh!

With a bit of CSS styling, the photoset is displayed nicely in Playpen #7. Clicking the title or thumbnail then brings up the LightboxJS function to display the original image from Flickr, with it's title and prev/next links to the other pictures in the set.

RSS - Consumer Indegestion

As well as problems generating my own RSS feeds, I've been banging my head against the Adobe brick wall as far as consuming RSS is concerned.

Dreamweaver8 is my weapon of choice for development (so shoot me), and I tried a few months ago to get the BBC's Rugby Union RSS feed added to my rugbypix.com page. Adobe have a tutorial which explains a lot. Trouble was, I did everything they said, and on my localhost test environment, I kept getting an error message:

MM_XSLTransform error:
"http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/rugby_union/rss.xml" is not a valid XML document.
The underlying connection was closed: Unable to connect to the remote server.

The claim that it wasn't a valid XML document was obviously rubbish, since the BBC's feed works in all the feed readers I've tried! Googling for the error didn't produce anything sensible, so I shelved the project and put it on the back burner for a while.

Returning to it this afternoon, I tried uploading the XSL fragment (which does the data repeat for the feed) and the page in which the transformation is called, onto my live server. I got a different message - the MM_XSLTransform.cs file was missing - progress! I knew that on my previous attempts, the only transform I could find available was the MM_XSLTransform.vb file, which was the wrong server model for my site.

Another quick google for the C# transform got me to this page. And, voilà! a link to download the missing MM_XSLTransform.cs. Bung it in the includes/MM_XSLTransform/ folder and upload it to the site, and Bob's your uncle... BBC Sport Rugby Union feed at rugbypix.com

Great, another niggling problem ticked off my list!

20x2 v6.5 - Where Am I?

I had fun at last night's 20x2 event, which was well attended by those keen to see the first event held outside Texas. The speakers were:

1. allison pickett (artist)
   
2. steve day (comedian)
   
3. jaye joseph (designer)
   
4. jon roobottom (designer)
   
5. ann mcmeekin (designer/photographer)
   
6. steve marshall (developer/designer)
   
7. bobby pathak (journalist)
   
8. frances berriman (designer)
   
9. diego brown & the good fairy (band)
   
10. james edwards (developer/designer) - no-show :-(
    
11. david frew (acerbia)
    
12. john bergaman (artist)
    
13. jen dixon (writer, photographer, web geek)
    
14. andy galletly (producer/cinematographer)
    
15. gavin strange (designer)
    
16. leisa reichelt (user experience consultant)
    
17. gia milinovich (blogger/tv presenter)
    
18. sam sethi (entrepreneur, techcrunch uk)
    
19. buswell (band)
    
20. foundry (artist)

As you can see, a varied bunch, and certainly a varied interpretation of the question, where am i?

And here are a few photos from the evening:

[my name is roobottom...]

[frances berriman... cue hysteria!]

[foundary whizzes up some art in 2 minutes]

You can see a few more photos from the event at my flickr account.

Playpen #6 - sIFR Headlines

I've been meaning to experiment with sIFR headline styling ever since hearing Dave Shea's Fine Typography On The Web piece during the @media 2006 conference. I've finally got a demo going at playpen #6.

What does sIFR mean?
sIFR stands for Scalable Inline Flash Replacement, and is an unobtrusive JavaScript/Flash solution for providing lovely fonts on your site (eg for headlines) whilst still remaining accessible, and not relying on that font being installed on a user's machine. Read more about the techniqute by visitng the official sIFR Wiki/Documentation site. H1 and H2 headings are best restyled using sIFR, rather than large bodies of text. If a browser does not have JavaScript enabled, the headlines will just be styled by the regular CSS definitions, so it degrades gracefully.

Why Bother?
There are several techniques for image replacement. The Gilder/Levin method is one such (see Dave Shea's article which explains some of the others too). Gilder/Levin is recognised as one of the best from an accessibility standpoint. But the down side, is that you have to manually generate each graphic used to replace your text, plus add a specific CSS rule for each in your stylesheet. That's all very well if you have a smallish, static site, and not many headings to replace. But what about database-driven sites and blogs, where you don't know in advance what the text will be which needs replacing? The only practical way to go is sIFR under these circumstances.

Where Can I Get It?
More information and a download for the code can be found at Mike Davidson's sIFR page.

Where Is It Used?
Keep an eye out for any sites which use unusual typography for headings or recurrent elements. If this is a database-driven site (such as ecommerce or blog), the chances are, sIFR will be the method that's used. Two likely candidates off the top of my head are:

• iPod411.com
• Bobble's Blog (it's not all about cup cakes)

Playpen #5 - Well Fed

Generating RSS
I've been meaning to get some rss feeds sorted out for my photographic sites for some time. There were some technicalities which I was wracking my brains to overcome, and for a while, I couldn't make up my mind which format to support. But in the end, it only took a couple of dollars to pull my finger out - I found a great tutorial at CommunityMX about blog authoring, which gave me the final push.

I also found the rss2.0 specification and feed validator for Atom and RSS invaluable in getting a valid feed sorted out.

Where Are My Feeds?

• http://www.cazphoto.co.uk/rss/
  is the feed for my general photography
  
• http://www.rugbypix.com/rss/
  is the feed for my rugby photography

Feed Reader Interpretations
One thing I'd not really taken much notice of, as a consumer of other people's feeds, was how various feed readers actually present the information. But once I started authoring feeds, it's become a bit more obvious how each aggregator parses the xml file to display the feed. Some will only show 20 posts (no matter how many are actually in the feed), others keep a cached copy and don't seem to want to update the feed if the order of posts hasn't changed but the layout and content has. All rather frustrating if you're trying to author a feed and test it!

Some Anomalies
First off, Bloglines keeps a cache of the feed, and so it's only showing an early version of the rugbypix feed (without thumbnails) in this screenshot:

Also, if a feed has 40 items (I sometimes post a large batch of images so didn't want to limit the feed to the last dozen or so), it only shows 20 - the oldest 20. So when other feed readers show the last two matches (40 images = 2 games, 20 images each), Bloglines will only display the last but one game's pictures, not the latest 20. [Add: between composing this and actually posting it, Bloglines has now caught up and refreshed the feed - but it did take about 48 hours!]

The cazphoto feed looks a little better (I'd got the hang of formatting by now):

Next we see what it looks like in YahooMail Beta feed reader:

Quite a nice presentation, but it doesn't show the date up very well.

Google's feed reader makes a nice job of things in expanded view:

Plus it offers a cutdown list view if you so wish:

I also tried the Sage plugin for Firefox, which gives yet another take on the display, showing a 3-pane affair, feeds at top left, item summary of feed in bottom left and a rather more snazzily-laid out view of each item in the right pane:


So there we have it - a small sampling of feed readers. What's your favourite feed reader, and how well does it render your chosen feeds? One final (surprising) thing I found out during my investigations was that the standard Flickr Photo Feeds don't validate! Oops!

Publicising Your Feed
It's no good having a feed and no-one knows it's there. Adding a suitable link (often showing the icon) to your website can help. Also, add a link in the head of your page to tell feed readers your feed is available. This takes the format:

<link rel="alternate" type="application/rss+xml" title="My Feed " href="http://www.mysite.com/rss/">

Third Party services such as pingomatic can also help raise the profile of your feed. Happy pinging.

World Usability Day

Did you know that today was World Usability Day? No? Neither did I until an email landed in my inbox from Userfocus, a UK-based usability/accessibility consultancy.

There's a one-day event held in Nottingham today, with lots of interesting speakers. But I'm particularly gutted to be missing the talk entitled:

“What Farmer Buckley's exploding trousers can tell us about web usability”, by Dave Travis of Userfocus Ltd, (211 Piccadilly London W1J 9HF)

What, indeed?

I'd love to hear from anyone who attended, and might be able to shed some light on Farmer Buckley's mishap!

Making The Most of Yourself

As an aspiring freelancer, soon to be cast adrift from corporate life, I've obviously been taking all opportunities to get advice on promoting my services and attracting clients. Three great posts have come to light in the past couple of weeks:

• First up, Andy Budd lists 7 Habits of a Highly Successful Freelance Web Designer - some great tips, and ones I shall be keeping in mind for my own career development.
• Andy also raises some interesting questions in his Blogging For Business and Pleasure article. One way to raise your profile in the web sphere is to blog regularly, and whilst it might not attract huge numbers of clients beating down your door (depending on their tech-savvy research), it can certainly pay dividends in terms of securing freelance work with other design companies, for instance. Andy employs freelancers on a regular basis, and says:
  

  By building your reputation as an expert, people will be happy using your services and recommending you to others. Blogging is a particularly good way of doing this and is something I highly recommend. When looking for a new freelancer I’ll get a much better sense of their interests and abilities though their blog than I’d ever get from reading a resume.

• One of Andy's recommendations is to get a killer portfolio. On this theme, Jeff Veen gives us Five Steps to a Better Design Portfolio. Again, lots of good advice from people that have been there and done it (and done it very well).

Back to the networking theme...
I've just attened a two-day workshop, run by Penna, which helps people with their career transitions - what a nice way of saying "redundancy", LOL. One statistic to come out of that was the fact that only 10-20% of new appointments are actually filled via advertised recruitment - the rest come from personal recommendations or individuals targeting the right people with their resumes. I was really surprised by how low that figure was, but our course leader pointed out that most people will spend their energies concentrating on this 20% and completely ignore the other 80% of, albeit hidden, opportunities.

Networking in a formal, business sort of environment has always struck me as particularly dull, but I've had a great time at recent geek events, chatting over a beer, and getting to know people. Now that sort of networking, I could really get to enjoy!

And of course, it's not a case of bounding up to people and saying "gizza job!" - oh, no. The seeds might be planted now, but the rewards might not be reaped for months or even years. It's a long term bet, but one in which it's well worth investing.

Patronage And Other Musings

You may have noticed the "i'm patronising" badge on the side of this blog. What's it all about? Well, Joe Clark has a big plan and he needs small donations towards keeping him fed, while he spends four months trying to raise $7 million (canadian) to undertake the research he wants to carry out. He's targeting four major strands of accessibility, and has set up the Open & Closed Project in order to do so. By donating a modest sum, folks like you and me can make a small contribution, which in turn will allow Joe to make a big one. Good luck Joe!

Two more recent posts concerning accessibility have caught my eye:

• Frances Berriman raises some good questions in her Developing for Others post, and also encourages some useful feedback. I'm hoping to be able to attend one of the Screen Reader demonstrations on offer in the near future. Whilst I do have access to a copy of JAWS for testing the sites I work on, I've no doubt that a non-sighted user would actually use the software in a completely different way to me - so observing some real-world users first hand will be a great learning experience.
  
• Meanwhile, Chris Heilmann makes us question the way we approach design, by asking, if the Needs of the disabled spark inventions, why not in web design?

London 2.0 RC9

That sounds like a mouthful, but was actually a fun evening at the Old Bank of England, a wonderfully atmospheric pub in Fleet Street.

It's the first time Sheila and I had been to a "London 2.0" event, and we got there quite early due to being able to skive off our regular commitments in plenty of time.

Before long, we were joined by other new faces and old timers. It was great to catch up with some people I'd not seen for a while and make other new friends, including:

• Liam Clancy - sporting a new haircut, but we still recongnised him!
  
• Mike Butcher of Techcrunch, who kindly bought a round and promptly wandered off before we could have a proper chat.
• Richard Livsey a newbie to the London developers scene, who had rather bravely cycled to the venue - hope your bike was still chained where you left it, Richard!
• Simon Whatley who was happy to chat with us, drink beer and blether on about the rugby for most of the evening.

Looking forward to the next London 2.0 do, I'll certainly hope to speak to some more of the regulars next time.