cazmockett.com

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.

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)

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.

Enthused by the WSG meeting on Microformats last Thursday, I thought I would update my website to include some hCard information, so put together an About Me section.

I thought I would include links to “me” elsewhere on the web, too – such as Flickr and Upcoming. The hCard spec allows for these sort of additional URLs, as long as you mark them up with class=”url”, which I duely did.

However, when the Tails extension for Firefox scrapes the page for Microformat info, if you have marked up multiple links with class=”url” – it just takes the last one in the vCard element as the one which is displayed in the popup. I removed the class from the last link in the list, and Tails took the next one up. So, it seems Tails doesn’t parse mutlitple URLs and list them too, it just uses “last man wins” as the URL to display – a shame It would be nice if it took the one associated with the name or organisation element as primary. Perhaps there is a way to say which one is primary, and I’m missing the point?

In order that I don’t mess up my about me page, I’ve taken these extra classes off it, but in order to show you what I mean, I’ve replicated the problem in the playpen4 page.

If anyone has any thoughts or comments, I’d be interested to hear them.

31st October – add:

Further to Trovster’s comments, here are two screenshots for my version of Tails (0.3.4):

[click for a bigger version] – Tails displays my Contact details with just one URL: the link surrounding “Freelance Web Design & Photography” is the only anchor marked up with class=”url” on this page.

However, the playpen4 page looks like this with Tails:

[click for a bigger version] Tails still displays just one URL, but this time it’s the last one in the hCard list marked up with class=”url”, this time the link for my dConstruct Backnetwork profile.

You know what they say about Leopards… well at least you can get a table to change its stripes with a bit of DOM scripting.

It’s a fairly trivial problem, but seeing as I’m pretty green when it comes to unobtrusive JavaScript, it’s somewhere to start!

The Playpen #3 page shows off the table, which has a new class added on alternate rows, and defines a new background colour in the CSS. OnMouseOver will change the class again, to give another colour. But I’m having real trouble resetting the original class/colour onMouseOut… It’s probably because the DOM is changed on the fly, and the original (not moused over) state of the alternate row is never actually “stored” on the page. If anyone has any suggestions, I’d be very interested to hear.

For the record, my stripeTables script looks like this:

function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(”table”);
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName(”tr”);
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],”altrow”);
odd = false;
} else {
odd = true;
}
}
}
}

addLoadEvent(stripeTables);

And this is highlightRows:

function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName(”tr”);
for (var i=0; i<rows.length; i++) {
var rowclass = rows[i].getAttribute(”class”);
rows[i].onmouseover = function() {
addClass(this,”highlight”);
}
rows[i].onmouseout = function() {
this.setAttribute(”class” , “rowclass[i]“);
}
}
}
addLoadEvent(highlightRows);

I thought getting the Class attribute and storing as rowclass would allow me to reset it to what it was before the onMouseOver event, but sadly the table rows become unstripey once they are moused over!

The only other way I can think of doing it is writing some sort of subtractClass script to complement addClass, but seeing as this will almost certainly involve hideous regular expressions, I’m rather shying away from that.

Anyone have any ideas what I’m doing wrong?