Caroline Mockett

A New Home!

2008-06-16T15:32:00.003Z

It's always been my ambition to get my various blogs integrated properly with their relevent website. And whilst I've enjoyed being hosted with Blogger for the past couple of years, now I've finally managed to get everything set up properly on my personal website.

The main site lives at http://www.cazmockett.com/ and you can now find this blog migrated to the site too, with a properly integrated version of WordPress and a lovely new style to match the rest of the site.

I shall be leaving this site here as a permanent record, but all new posts will now appear at the other site. I hope you follow me there!

Some Browser Share Analysis of My Blogs

2008-01-30T18:06:00.000Z

As web designers, we all know how important it is that you are aware of your target audience, and what sort of browser they might be using to view your sites.

I was idly fiddling with the Sitemeter Stats for my blogs today, and was intrigued by the variation in browser share between them - largely reflecting their readerships, and how "geeky"/computer literate the visitors may be. They're all hosted on Blogger and have referrals from a variety of sources.

First up, this blog shows the largest number of different browers - even getting a few percent of views with Konqueror and Opera 9. I see 2% of folks are still straggling along with Netscape 5 too! The majority are on Firefox 2 - just edging IE7 by 6%. I guess this wide spread of browsers reflects the "geekery" of the content and people using niche browsers are likely to read webhead stuff!

[Browser Share pie chart for this blog readership]

The second chart is my Rugby Mad blog - the first one I started back in Feb 2006. Although the subject is just limited to rugby, I'm guessing that the readers represent a more "average" web user - the blog was linked from the BBC's Six Nations blog last year, and I got massive numbers of hits from that. They are certainly a less geeky crowd than above. This is reflected by the stats - nearly half of them are using IE7 - with IE6 the next largest chunk at 28% <sigh />. Firefox has plummeted 20% compared to the geeky blog. And it looks like around 8% read from a Mac (although I suppose some could be using Safari on a PC now). But no Netscape in sight!

[Browser Share pie chart for my RugbyMad blog readership]

My Photographic blog is most similar to the web design one - although there aren't any die-hard Konqueror or Opera fans amongst the readership! The Netscape stragglers are back in about the same numbers :-)

[Browser Share pie chart for my Photographic blog readership]

Last of all is my newest blog, My Year In Pictures. It's been running less than a month, whereas the rest have been going for a year or more. I guess potential users of older browsers may have upgraded before this one went live (I think the stats are derived from the last 12 months if the blog has been going that long). The most surprising is Firefox 2 with a whopping 42% share, a good 8% ahead of IE7. There's still around 18% of users clinging to IE6. Safari and Netscape figure in the few percent.

[Browser Share pie chart for my Year In Pictures blog readership]

So, what does all this tell me? It just shows that with the proliferation of new browsers, while Firefox is doing well in the geeksphere, IE7 is gaining ground - but IE6 is still alive and kicking (us) amongst the "average" web user. And yes, there are still some poor folks using Netscape - people, if it's within your power, upgrade to a nice shiny new browser!

When I build sites for clients, I'll always design it for Firefox. Then test/fix for IE7 (some niggles but not major problems) and pesky IE6 (usually requires more tweaks). I'll also have a look at them in Safari (PC) and Opera 9.02 - there may be slight presentational differences, but no show-stoppers.

For a laugh, I'll also take a peek in IE5.5 (and 5.02 if I'm feeling masochistic), but I'm not going to waste any time fixing bugs for them. Let's face it - none of the above readers have registered as using them - and I'm guessing on average, these stats are pretty applicable for most web users these days, no matter what content they are browsing - so why should I flog myself unneccessarily?

Lifestream, Yahoo! Pipes and jQuery

2007-12-05T16:44:00.000Z

Jeremy Keith's lifestream was the first I saw online, where he'd aggregated together his many RSS feeds into one place. It shows the various sources ordered by time, and it can be quite interesting to follow along and see what sort of sources are most prevalent at any one time. I'd been meaning to have a play with something similar myself for some time, but wasn't sure how to go about it. Then a couple of weekends ago, I went to BarCampLondon3 and Cristiano Betta did a great session on how to author your lifestream using Yahoo! Pipes. There's bags more information about how to do it at his blog. Finally, I thought it was about time I had a play with it myself. The feeds I used were the following:

My photographic blog
My rubgymad blog
My web design blog
Stuff I post to Flickr
My tweets from Twitter
Stuff I'm reading via del.icio.us

I decided against using my Last.fm feed for the moment, as it would probably swamp all the other inputs (I listen to a lot of music while working, it's one of the perks of working from home, no-one moans about your choice of songs!).

Having got the basic lifestream out of Pipes, I used Dreamweaver's XSLT transform functionality to generate a list which would sit in my ASP.NET page. I wanted to use specific icons to show which feed each item was from. Cristiano was using a JSON output for his pipe, but mine is coming out as RSS, so the custom ID's applied in the pipe weren't getting through, since they're not part of the RSS spec.

CSS3 attribute selectors are one option, but they don't work in clunky browsers like IE6. So having also been at Simon Willison's jQuery session at BarCampLondon3, I thought I'd have a play with with the library to see if I could do some neat DOM manipulation to add the correct class to each list item.

The Llifestream list is marked up thus: <ul id="lifestream">. I added some jQuery to insert the class for the list element, based on the attribute of the link it contains. That requires a parent element to be changed, based on it's child's attributes. Slightly tricky for a jQuery novice like myself. It took me a while but eventually I found the correct syntax:

$(document).ready(function() {
$("#lifestream > li > a[@href^=http://twitter]").parent("li").addClass("twitter");
});

The first line calls jQuery once the full DOM is loaded; line 2 (which looks rather horrible with text wrap, but bear with me) selects an anchor with the attribute which begins with "http://twitter", but I wanted the class added to the parent LI, so hence the chaining of jQuery functions.

Now all I needed to do was to add a case for each link type to my new lifestreamclasses.js file and add a linke to it in the header of my lifestream page, and the proper stylings can be applied. I decided to keep them in a separate JS file for ease of maintenance. Once the pipe has mashed it all together and I've written the relevant styles into the stylesheet, the resulting RSS aggregated feed looks like this.

BarCampLondon3 - Day 2

2007-11-25T22:03:00.000Z

Sunday morning saw various folks rise from the dead and gather for breakfast - another mighty catering WIN from Google's chefs - Full English if you so wished, fruit and cereals for those of a more delicate constitution.

It took a while for the brain cells to get going (copious amounts of coffee and fresh orange juice helped), so the first session I sat in on was the second of the day.

What To Teach The Next Gen Web Devs - Dan Dixon
Dan is a lecturer teaching today's university-age students about the web. His round-table discussion focussed on what sort of curriculum they should be getting, from a working designer/industry expert opinion. The whiteboard proved useful in splitting up the syllabus into 4 stages and brainstorming the essentials of what should be covered:

Universals:

Accessibility as best practice, not an afterthought
Make them aware of an international web (localisation issues)
Good communications skills - ability to present their projects and lead discussions
Need good writing skills for email, reports, blog posts
Give them business context for their skills
Point them towards the developer community

Foundation:

Not too much emphasis on specific tools - teach basics of HTML/CSS
Fundamentals of design
Typography
HCI and UX design
The ideas of the web - a bit of history about the technology?
Empowerment
What is the web for? - show them it's not just Facebook
Different ways of working
Tell them about realistic career paths
Basics of how to program

Middle:

Practice-based
CSS, JavaScript
PHP/Ruby
Wireframes/IA/Sitemaps
Do usability testing
Make sure something they have worked on is torn apart (might sound harsh, but it's going to happen sooner or later!)
Small groups/projects
Understand project management skills

Internship:

Need good HTML/CSS skills so they are immediately useful - don't want to end up just making the tea
Need to work as part of a team
Know about browser testing
How to interact with clients - people skills
Innovation
Time estimation
Should be able to choose a path - Front End or Design or Programming or UX/IA and be able to gain relevent experience in that

End:

More on localisation
Project Manage a 2nd-year team
Start a project from scratch
More about business and how it works

It was a very thought-provoking session, and a few of us continued in well into the break. Then coffee called, so I ended up missing another session! Oh well.

Self Publishing - Vicky Lamburn
Vicky has self-published several fiction books and gave us some tips on the tools she uses for writing and typesetting (Word on Window), Lyx (for Ubuntu). Then she gave us a quick tour round the Lulu self publishing site. It is possible to get a book with ISBN - or self-promote, distribute, sell via web etc. In general, covers need to be 300dpi TIFF while text is usually send as a PDF (fonts only embedded where licencing is not an issue).

Then it was time for lunch! Still more food...

BarCamp Rhine - Sebastian "CB" Grünwaldt
CB gave a great presentation on the proposals for BarCampRhine, which basically involves BarCamp on a ship sailing from Basel (Switzerland) to Rotterdam (Netherlands), with static BarCamps in cities along the way, such as Basel, Karlsrühe, Mannheim, Köln, Strasbourg, and Rotterdam. The idea was originally suggested by Frenchman Sacha Lemaire and has been presented at various BarCamps in Europe since then.

[CB explaining the BarCampRhine idea to those in the room and in the chatroom]

If it goes ahead, it sounds like it will be a brilliant fortnight - but it needs lots of work and enthusiasm to make it happen - so if you are interested, go and sign up at the Wiki and let the other folks know you want to help. CB's talk led on nicely to Ryan Alexander's which followed:

Future of BarCamps - Ryan Alexander
Ryan's session involved asking two recent BarCamp organisers up on stage and asking some important questions about how much work was involved with putting on a BarCamp. Ian Forrester (London) and Oliver Berger (German BarCamps) kindly shared their experiences with us:

[Question Time]

Q. How long have you spent working on BarCamp?
A. Ian - Backstage are a sponsor, some time can be claimed from work time - at least a week's time.

Q. How much personal risk did you need to take?
A. Ian - does not put himself at risk, sponsors take the can. Oliver, some risk.

Q. How many others helped out?
A. Oliver 12-15. Ian 2 Googles.

Q. How many others would think about organising an event
A. Most people in room. Alistair organising one in Tyneside. Previous experience to give it a go.

Q. Norm - what would you do for a first step?
A. Get people to help - people who are passionate about it.

Q. How would you find those people?
A. Don't know (Norm). Ian - says its a lot easier to go it along to begin with. Oliver - don't need to look for passionate people - they will ask you if they can help.

Ryan's suggested BarCamp² - a BarCamp about organising a BarCamp. This seemed to go down well, and hopefully something concrete will begin to take shape soon.

[So meta, it hurts]

Anatomy of a Business Card - Ross Bruniges
Ross's lighthearted look at the power of a business card can be summarised as follows:

Keep in touch with the people you meet up with.
Once you have a name you can see where people are going - Flickr, etc
Twitter - finding out what people are doing now.
Upcoming - what's going to happen

He ended with a favourite photo of himself:

[Ross and his Pimp goblet]

Then we were all encouraged to exchange cards with folks in the room who didn't already have ours.

Rise & Inevitable Fall of Pub Standards - Dan Webb
In the beginning... Dan took us on a little historical tour on how PubStandards formed, why it's good and why you shoulnd't miss the next one:

[Who needs the conference?]

As the sessions came to a close, everyone reconvened in the main canteen for the farewell closing speeches. I think everyone agreed it was a spectacularly successful BarCamp, certainly the best I've been to.

The Highs? - brilliant wifi, food to die for, lots of geek toys to play with and plenty of friends old and new to hang out with, winning at Werewolf!

The lows? - not getting enough sleep, not wanting to leave! Roll on BarCampLondon4...

BarCampLondon3 - After Hours

2007-11-25T09:41:00.000Z

If you're staying overnight (which is essential for the full BarCamp experience), then there isn't really an "after hours" - you just keep going for as long as there's a geek still standing.

After the first day's sessions came to a close, the socialising began in earnest. Here we see Mr Boozeniges living up to his name:

[First steps in drinking the mighty Google dry]

Inevitably, where geeks gather, there will be interminable rounds of Werewolf, for it is writ in Lore.

[Short break in a round of Werewolf. Cheer up! Anyone would think someone just died... oh wait!]

I think I must have played at least half a dozen games during the evening. But the most satisfying has to be the one that wrapped up around 5am - final round me [Werewolf] versus Tom Hughes-Croucher and Sebastian "CB" Grünwaldt [villagers] and Tom decides to nominate CB - mwahhaha! I win! Yum yum, tasty villagers.

Talking of tasty, as if the mountains of food served for dinner weren't enough, Google laid on a midnight feast for the geeks - freshly cooked waffles, pancakes and a chocolate fountain. Man, you could get soooo fat working here...

[The chocolate fountain - just had to be tried, didn't it?]

There were loads of games to play (Wii sports, tabletennis, fussball) and even a Segway to fool around with. However, Jan and CB, two of the crazy German LondonBubble guys decided they could go one better than the Segway with their two-seater "find":

[Ticket To Ride - CB drives with Jan on the back, looking justifyably worried]

But the weirdest trick of the evning must go to Oliver Uuberholz (another LondonBubble boy) who decided the empty beer fridges were going to waste and his Mac was getting too warm:
[Macs in the fridge]

Enough craziness, and being about dead on my feet by 5:30am, I went to find a quiet bit of floor to collapse on for 3 hours.

BarCampLondon3 - Day 1

2007-11-24T19:00:00.000Z

The time for another BarCampLondon3 has rolled around, and I was lucky enough to get a ticket. We all turned up at Google's swanky offices in Victoria knowing we would have a good time, but not quite realising what a great time we were in for.

The organisation went very smoothly, the wifi was rock solid, there was more food, beer and snacks than even a BarCamp-load of geeks could consume (well, apart from the beer - it's the first time Google's fridges have been emptied, oops!)

As usual with an unconference, it was all about the sessions folks decided to give, and we were treated to some really thought-provoking and fun discussions. It was a shame that out of the 100 attendees, about 30 chose not to present. So the schedule was a little light at times, but that's not always a bad thing - nice to catch your breath every now and then! Jeremy marked up the timetable for us all to refer to easily.

The first session I went to was Tom Morris - Scraping Sucks - where he was giving us more usable alternatives to scraping HTML, namely doing clever stuff with GRDDL. He says it's much easier that way. As usual, I nodded sagely at the time, and then a couple of hours later, wondered what it was all about. Tom is a great geek, but he's several steps ahead of me when it comes to brain-wracking abilities :-) He's put up a page of GRDDL Profiles here - which lets you look at (X)HTML and with an XSLT transform, spits out XML/RDF which can be used as you want.
[Tom gets stuck in to his presentation]

Norm's Law
This was an excellent presentation from Mark Norman Francis. He gave us some very good reasons for doing code his way - especially for fostering interoperability betweeen different members of the team, or yourself coming back to code at a later date. Some points included:

Use spaces not tabs
Code goes no further than col 77
No-one ever died from using too much whitespace
Separate operators and braces - more of a cognitive burden to parse squashed up code
Always indent by 4 spaces ONLY
Line up assignments of variables (equals sign in the same place etc)
Line up data tables too (arrays or whatever)
Space keys out from brackets $vote[ $value }++; etc
Space keywords out not functions
Vertical rhythm - break bits up with comments for each sub part - make a story out of it
Respect left-to-right comprehension
K&R bracketing - opening brace should be tied to RHS end of line, closing brace should be on a new line - aligned with the starting coment
Don't cuddle and else!
One statement per line - you can easily miss the ";" in the middle of the line separating the two commands
Break lines before operators - EXCEPT in JavaScript or it won't work
Ignore operator precidence - use brackets to make it more "English readable"
Use single quotes where possible - ' in PHP will just be stuffed in, " will make PHP parse the contents looking for variables
Factor out long expressions and use intermediate variables (with english-sensible names) to break up
Always use x on regexpressions
Don't use camelCase! unless you're in JavaScript
Systems Hungarian is harmful, Apps Hungarian is too
All short variable names are harmful
Use grammatical variable names and function calls
Optimise for humans first! Machines - throw more hardware at it - but you can't refactor comprehension
HTML indents use 2 spaces not 4
Write the whole document FIRST before you do any CSS etc
Insert Microformat classes
Always use single quotes in attributes
Inline CSS means you've done it wrong
If it only works in JS don't
VALIDATE
Start with base stylesheets - reset, fonts, layout
Use Uppercase tags in HTML
Keep z-index below 50

[Norm - I can haz 4 skreenz]

Next up was a session about new developments from the BBC's web team:

BBC APIs First Look
PIPs is the system to list all broadcasted stuff - telly and radio

bbc.co.uk/programmes
Gives a list of all current programmes - by genre or alphabetically
Nice URLs which can have .yaml or .json can be added for the feed in that format
bbc.co.uk/programmes/formats
Pid is the 8-character id for each episode - taken from user experience tests and will always be constant (never change)
JSON and YAML are the two formats currently supported - XML coming? - RDF ontology has been produced
RSS feed is coming so you could subscribe to know when "every episode of Doctor Who" is on
Data model - "programme" can be brand, series or episode - an episode can have multiple versions (signed, extended etc) which then have broadcast (tv) or ondemand (iPlayer) times
Historical data back to May 2006
Can filter out to network (tv or radio) eg Radio4
Next release (API stuff) in New Year
http://catalogue.bbc.co.uk/ - is historical data - grand plan is to have them merged

DIY User Research - Leisa Reichelt
Leisa gave us lots of good advice on how to carry out some DIY user research - her premise being that it doesn't have to take days and days and cost big bucks - and often talking to more than half a dozen victims volunteers gives you diminishing returns. Leisa's slides are already available at the Slideshare BarCampLondon3 group.

Building Lifestream with Yahoo! Pipes - Cristiano Betta
I didn't take many notes as I was listening as I was actually playing with a real Yahoo pipe of my own and trying to follow along with what Cristiano had to say. I've been meaning to use Pipes to create my own Lifestream for some time, but had a quick go before and things weren't coming out as I wanted. Cristiano has done a series of excellent blog posts to get you going, or you can watch Tom Morris' video of Cristiano's presentation. Or view Cristiano's own Lifestream.

10 Things You Should Do In Project Management But Probably Don't - Gareth Rushgrove
Gareth's top ten tips:

Use Source Control software
Validate markup - XML, RSS, Atom and JSON
CSS validation
Broken Links! check them thoroughly - W3C Link checker
Performance - do you have metrics for measuring the performance - YSlow is a Firebug enhancement, httperf - use uptime checker too such as Pingdom
Maintainable Javascript - JSLint gives you good tips
Carry out Unit Testing
Carry out Functional tests
Asset Compilation
Building Scripts

More at morethanseven.net

Learning jQuery - Simon Willison
Simon gave us a lightining half hour tour of the jQuery Javascript library with great examples and succinct slides - you can get them from Slideshare. I've been meaning to beef up my JavaScript skills, and getting to grips with jQuery sounds like a good place to start.

[Simon talks about jQuery's Ajax capabilities]

Ask Them Anything
For the final sessions of day one, Norm and friends held an Ask Us Anything panel - just a bit of silliness to round off the proceedings before dinner. The guys from the Londonbubble did a live stream of the session to their mogulus chatroom, and it all got a bit recursive when this was put up on the main screen behind the guys:

[Behind you!]

The chatroom folks even got to ask a question or two - and Ross got a marriage proposal from a lady named Picki which he had to graciously decline!

[Ross, Norm and Ryan answer the online questions]

And so to dinner... but that's for another post.

Subquery Problems in mySQL

2007-10-04T16:49:00.000Z

I'm having trouble selecting data for a web-based application. There are three tables, Articles, Keywords and KeywordsInArticle. There is a many-to-many relationship between the articles and keywords, which is handled by the piggy-in-the-middle KeywordsInArticle table. So, if we have the following scenario:

Articles
articleID articleName
1             First Article
2             Second Article
3             Third Article
4             Fourth Article

Keywords
keywdID keyWord
1             apples
2             oranges
3             bananas
4             grapes

KeywordsInArticle
articleID keywdID
1             1
1             3
2             1
2             2 etc

We know that "First Article" is all about apples and bananas while "Second Article" is about apples and oranges etc. And for article #1, I can pull out a list of the relevent keywords by using the following SQL statement:

SELECT keywordsinarticle.articleID, keywordsinarticle.keywdID, keywords.keyWord
FROM keywords, keywordsinarticle
WHERE ((keywordsinarticle.keywdID=keywords.keywdID) AND (keywordsinarticle.articleID=1))

This would give the following result:

articleID   keywdID   keyWord
1             1              apples
1             3              bananas

So far, straighthforward. However, in the Content Management side of the application, there needs to be a way of managing the keywords associated with each article, to update the KeywordsInArticle table. However, this has a compound key value made up from the articleID and the keywdID. It cannot contain duplicate rows, so when adding a keyword entry to the list, I want to be able to select all keywords not already associated with that article. In the example, I need to select only "oranges" and "grapes" from the keywords table, to give them as options to add.

I want to be able to invert my selection, so I tried a using the above as a subquery and negating the result:

SELECT *
FROM keywords
WHERE keywdID NOT IN (SELECT keywordsinarticle.articleID, keywordsinarticle.keywdID, keywords.keyWord
FROM keywords, keywordsinarticle
WHERE ((keywordsinarticle.keywdID=keywords.keywdID) AND (keywordsinarticle.articleID=1)))

Sadly, mySQL throws a wobbler at this, telling me:

Message = "Operand should contain 1 column(s)"

Looking up this error at the mySQL website directed me towards the Row Subqueries page, but I'm not convinced this fits my problem either. So now I'm rather stuck. If anyone has any ideas, I'd love to hear them!

A Stitch In Time

2007-08-29T12:46:00.000Z

I've got a probem with date sorting.

I have a PHP/mySQL application which requires sorting a dataset by year.

As mySQL won't let you store just the year, I originally used a varchar (text) field to store the year, YYYY, which sorts nicely.

However, I now have a client who wants to be more specific with some dates only, ie they want to be able to store YYYY, YYYY/MM or YYYY/MM/DD in the same field and still have it sort nicely.

OK, so I can force them to input the full date (when required) in the YYYY/MM/DD format, but that looks really ugly when output to the web page as a human-readable date.

So my problem is this:

If I want human-readable dates, like 1 January 2007, and go for a text field, they won't sort properly as 1 April 2007 comes before 1 January 2007 in that case.
If I opt for the date field, it would sort properly but I can't store dates which are just month/year or year only, as mySQL throws a wobbler and protests when you don't have the full date input.

Storing the "date" as a string: 2007/08/01 (the pubDate) sorts nicely, and I had hoped using the following PHP:

<?php echo date('j F Y', strtotime($row_rsByDate['pubDate'])); ?>

would solve the problem, since it gives a nice date 1 August 2007. But there are still issues with just storing part of the date - see screenshot below:

The entries are sorted correctly (most specific at the top, descending order). The first date (red) is the nice output of the PHP function - the second (puce green) is the actual stored text.

It falls over horribly when only the YYYY/MM is stored (returning 1st January 1970) or YYYY (returning today's date).

EUREKA!

After much discussion (via the comments on this post and my buddies on Twitter) , I was almost ready to explode with frustration at not being able to find a solution. Turns out, that's exactly what I needed to do!

James Aylett suggested I use the PHP explode() and implode() functions to write a custom parser. I didn't actually need the implode() half as it happens. Being a relative newbie to PHP, I'd never heard of the explode function, so thanks for the pointer, James!

So, to recap. The database column should be stored as TEXT or VARCHAR(10) not DATETIME. That way, all variations of YYYY, YYYY/MM or YYYY/MM/DD are acceptable, and will sort correctly. This will look horrible if put straight into the page, so use something like the following to present it nicely to the web page:

<?php $split = explode("/",$row_rsByDate['pubDate'],3);
print_r($split[2]);
echo " ";
if ($split[1]==1) print_r("Jan");
elseif ($split[1]==2) print_r("Feb");
elseif ($split[1]==3) print_r("Mar");
elseif ($split[1]==4) print_r("Apr");
elseif ($split[1]==5) print_r("May");
elseif ($split[1]==6) print_r("Jun");
elseif ($split[1]==7) print_r("Jul");
elseif ($split[1]==8) print_r("Aug");
elseif ($split[1]==9) print_r("Sep");
elseif ($split[1]==10) print_r("Oct");
elseif ($split[1]==11) print_r("Nov");
elseif ($split[1]==12) print_r("Dec");
echo " ";
print_r($split[0]);
?>

explode() - separates the string found in pubDate into its component parts (the separator is set by the first parameter, "/"), giving the $split array. This containts up to 3 elements, depending on how specific the stored "date" is.
$split[2] is the DD day element and is printed directly.
$split[0] is the YYYY year element and can be printed directly.
$split[1] is the MM month element, which requires the pretty formatting. So a match against each month number prints out a more human-readable month. Voilà!

Another screenshot - this time the green output is the unprocessed pubDate text field, and the preceding red date is the bespoke-parsed version - allowing for all cases of "date" format.

Some caveats:
I wouldn't normally recommend spoofing the date like this - if it's a real date (specified to day, month, year for every record) then use the DATETIME type in your database - this will sort and you can perform arithmetic on it quite readily (eg next month, last week etc).

I only went through this pain because of the special case I was finding - the publication "dates" of newspaper articles (day, month, year), journals (month, year) and books (year only) which my data required. Using this solution lets it all sort properly and look nice to viewers. Win!

@media - Five Steps To Better Typography

2007-06-07T16:24:00.000Z

Next up was Mark Boulton, who wanted us to work with typography in a better way.

Be Appropriate & Adaptable
Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn't want an invitation to a Black Tie event done in it though. Similarly, the BBC's use of Gill Sans evokes order and authority. The BBC logo has a twist - by reversing the type and blocking out the shapes of Gill Sans.
Don't let type and design get in the way of words.
Be adaptable to requirements, and appropriate for the story.
Use Rhythm
Richard Rutter's Compose To A Vertical Rhythm explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.
[Text in the sidebar bears no relation to the main body copy. It looks messy.]
The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar
If you're using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.
[This looks much better now everything is aligned vertically]
Optical Grey
If you squint at a block of text, you'll see the page has different tonal ranges depending on font, leading, letter spacing etc.
Verdana has a more open shape, so is paler at smaller sizes.
Combining serif and sans-serif fonts can be effective, giving different "colours". Minimize dark grey and balance the line height.
Use The Right Tools For The Job
Hyphens "-" are NOT em dashes!! "—". Use an em — or en – where appropriate.
Use a Grid System
Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too - you might have a 3em high by 4.5em wide block, which divides nicely into 2x3 squares each of 1.5em width and height.
Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.
Using Alternate Row colours in tables must be done with care - don't use colours which are too strong.
Set type to your grid, and align everything! The smallest error can really stick out.

In Summary
Typography is all about the details. Tiny increments can make a huge difference. The full slides are available at Mark's website.

@media - Design Interface Juggling

2007-06-07T15:30:00.000Z

Dan Cederholm took us through the various elements of interface design that a good juggler should be able to "keep in the air".

[Dan and his interface-juggling octopus]

Colour
Colour evokes an emotional response in the viewer, and we need to be careful when choosing a palette. At Wellstyled.com, there's a handy widget for generating complimentary colour schemes. Try it out.

Dan had mocked up a site especially to demonstrate some of his points - go have a giggle over at ToupéePal!

One good way of choosing a palette is by taking shades from a photo - either sample direstly, or pixellate it and use some of the blocks. Dan often starts with colour as the inspiration for a site and works from there. He will re-use certain strategic colours throughout a site, eg Links, headings etc. The colour used for links will always carry weight in the design.

Typography
Great typography is actually invisible - we don't notice it. But do it badly and it sticks out like a sore thumb. He recommended the article, Web Design is 95% Typography to read.

There are a limited number of fonts we can realistically guarantee a user having on their system, but within these constraints, we can still get creative. Try using the text-transform uppercase or lowercase styles, change the letterspacing, text-align, leading etc to vary the typographical colour of a block of text. Good reading: "The Elements of Typographical Style" by Robert Bringhurst, if you can find it. Read more on applying it to the web here.

Favicons
Could be regarded as the most important design element on your site! They are the thing that represents it in the shortcut icon, browser address bar etc.

[Subtraction.com uses each site's favicon as shorthand branding for the link]

So when creating a favicon, it has to be something memorable. They must:

Scale well down to 16x16 pixels
If the whole logo doesn't work, choose a fragment to focus on
Use something unique about the site that still ties in with the branding

Icon files can be made with Iconographer or a plugin for Photoshop. As well as the standard 16x16 icon, 32x32 and 64x64 pixel icons can be inserted into the same .ico file. There's an interesting collection of Favicons at Delta Tango Bravo's blog.

Add Detail But Not Complexity
Understand the limitations of the browser, and suggest the box [model] but with minimal suggestions. Perhaps use just one rounded corner on an element. Re-use graphic elements where you can.

Microformats
If you site contains any sort of contact information, events lists, reviews or relationships, then you should be marking them up with Microformats. Using what works today can encourage others to do the same:

[The Microformats can be used by people, applications and as hooks for CSS]

Brian Suda did some parsing of Cork'd for Microformats, and used this information to add wine reviews (from Cork'd) to his Scrugy site, where you can learn all about wine. Corkd's Microformats had produced an accidental API. If you were to mash this up with a list of your XFN friends, you could use it as a filter for just returning reviews from your trusted sources.

@media - High-Noon Shoot Out: Design vs Implementation

2007-06-07T13:20:00.000Z

This was a bit of light-hearted fun, with two heavyweights standing in opposing corners and trying to convince us their point of view was right.

[the protagonists on the podium]

In The Design Corner - Mr Simon Collison
The Design Manifesto went thus:

Visual design is not complex engineering
Design interfaces visually, don't be afraid to take risks
Reserve the right to veto decisions of technologists
Think, build & design organically
Don't pander to personal prefereneces
Deliver a rich, considered visual experience for all
Be expressive with web typography
Layout decisions are the preserve of the designer
Visual design makes the first impression - respect it!
Build everything in Flash (not really)

[Evil Drew - New Implementation, New Danger!]

In The Implementation Corner - Mr Drew McLellan
It all started with nxoc01.cern.ch, the very first web server. Drew said we were all implementers, and as such, we needed to know our enemies:

Fixed width layouts
Flash for non-media presentation
(Flash breaks the basic nature of the web when used for anything other than a player for graphics or audio, and each Flash player instance impacts on performance of the browser)
Text replacement, since text on a web page is a solved problem
Styled form elements
Potent GETs
Controlled heights
Controlled text size
Colour schemes and low contrast
The user agent
The FOLD - THERE IS NO FOLD since we never know where it's going to be from one browser/user to the next!!

[Drew gets all fervant and placard-wavey saying There Is No Fold]

Conclusion
Of course, we all know that life's not so black and white, and at different times, we may have to sit in different camps. So it was a nice way of stimulating some light-hearted debate, but there's definitely no "right" answer on this one!

@media - Diabolical Design: The Devil Is In The Details

2007-06-07T12:30:00.000Z

The conference split into two tracks, and I chose to listen to Jason Santa Maria of Happy Cog Studios talking about Design. Design is intent, and that must be reflected in the finer details.

Colour
Colour means different things to different people and evokes emotional responses. Use colour for emphasis and to help deliver the message. Faith Inkubators uses purple sparingly for emphasis and it works nicely. A Film uses pink and a particular headline motif to great effect.

Sometimes unexpected colours can be equally effective, The Times' acid green isn't obvious for a serious newspaper, but it works. Some other sites may take a colour from a photo or logo and use this to add emphasis.

Hierarchy
Visual hierarchy should reflect the underlying semantics of headingd hierarchy. It will give users a sense of what's important and what's not in the page. Use a focal point to grab attention and drive home the message. Providing variety can also lead the viewer through a page.

[The visual hierarchy should reflect the underlying document's semantics]

Whitespace
Whitespace is often something designers are afraid of - but used effectively, the "nothing" can be just as important as the "something" it surrounds. Also, optimum line length is 66 characters (anything between 45-75 is OK) for easy reading. The longer the line length, the more leading is required for better legibility.

Organisation - Grids
Grids can be liberating rather than restrictive. But giving users a solid framework can mean they will find it easier to get around your site - less time investment is required to "learn" the grid. He showed us maps of Philadelphia and London and asked us which we would be happier in negotiating as a tourist:

[Philadelphia's regular street plan contrasts with London's maze of tiny streets]

Even when using a grid, there are many ways of breaking the rigid order and still getting interesting designs. These three screenshots are from Australian agency Trout:

[Trout's home page, a regular grid, but even this is broken up with the bright colour emphasis]

[Detail page when you click through from the home page. More of the grid is broken up into bigger chunks]

[The About Trout page, dominated by the main text panel]

Having said all that, make sure that alignment happens and doesn't fall down - subliminal effects can be powerful and if something doesn't quite line up, it will still look "wrong" without the user being able to put their finger on why.

Planning
It's easy to jump into the finished product right from the start. Step back and plan! Keep a sketchbook to jot down ideas - they may all come together at a much later date, but you have them to hand.

[Jason's sketch book showing early doodles for the A List Apart design]

Design should be an iterative process. Grey box comping can help you decide the best weight for various layouts. Jason doesn't show these grey box comps to clients, but just uses them for his own purposes. He would then expect a PSD comp to show to clients, and perhaps 1-2 iterations round the loop before they are happy. The whole process can take a couple of months.

Strive For Clarity
Storytelling gives people hooks and things to remember, they will come back!

Fonts
Use fonts in such a way to give some extra interest to the page. sIFR can be a useful method of delivering certain fonts if they are mandatory branding requirements.

Handover
The all-important step that is often overlooked. A style guide is best kept short, under 10 pages, and provide a dummy template for each type of page, so that other people can look after the site going forward.

Customer Interference!
We all know what he means. But if you find your client is trying to steamroller you, set up a meeting and let them know you are the expert. Try to convince them of you design, as long as it conveys their message and isn't just kudos for your portfolio.

@media - Beyond Ajax

2007-06-07T11:00:00.000Z

@media has rolled around super-quick this year. It kicked off with Jesse James Garrett of Adaptive Path talking about the future of web beyond Ajax.

He started by asking us "what is the web good for (at)? It's still quite a young medium - as TV and Radio started out emulating theatre, before finding their own feet, a new medium needs about 10 years for us to find out what it's good for - so we should be getting some good clues very soon!

[Be careful not to get confused by the many faces of Ajax!]

Web apps such as Flickr are part of a much larger ecosystem, but benefit it by having an open API that other applications can hook into. The web is now moving away from static pages of documents towards applications and interaction. The kayak.co.uk interface (airline ticket price comparison) was cited as one where Ajax enables users to dynamically filter the search results almost instantaneously. And these products get better with use.

Value can come from the users themselves - YouTube's a good example. The OK GO Treadmill video was home made, posted on YouTube, has been watched more than 18.5million times, eventually got onto MTV and won a Grammy! Then Google buys YouTube for $1bn - it obviously recognises the value in the userbase.

Websites are now delivering a rich user experience via Ajax and other native browser technologies - ideal as no plugins are required. Bruce Sterling coined the phrase that Ajax is "roller skates for the web". It's like the way that gmail and google maps have revolutionised the way we think about interfaces, and now we want everything to be drag and drop.

What's the highest form of praise? Not "makes loads of money" or "never crashes" but "I can't live without it!". Making systems work is all about the balance between technology, features and the user experience. The Diamond Rio was the first ever mp3 player, but it pretty much bombed. Three years later, along comes the iPod - costs more, does less, but it's all about the way users buy into the experience.

Dealing with interactive products stimulates the same part of the brain as when we are dealing with other people. "People are products too". So, products who "know who they are" also seem to pique our attention and become successful. It's why we like things like the iGuy and TiVo logo:

[Anthropomorphic Personification aka "oh look, isn't that cuuuuuute!!!"]

[Developers look at technology but the users think it's all just magic underneath]

Successful web2.0 applications are designed from the "outside in" and focus on the user experience strategy. This was the way Google Calendar was built, and within 9 months it had overtaken the second most popular competitor on the market.

With photography, no-one owns the endo to end solution, but Flickr takes the same philosophy. The About Flickr page states the site's two main goals:

We want to help people make their photos available to the people who matter to them.
We want to enable new ways of organizing photos.

The longer explanation on the page sets out the goals, but puts no limits on the technology. "The experience is the product"

Interaction vs Passivity

2007-06-06T21:00:00.000Z

It's that time of year again, and the Adobe Live roadshow has been to town. The two-day event was held at the Business Design Centre in Islington, and I went along to see demos of the latest versions of Photoshop, Dreamweaver and all the other goodies in the CS3 Suite.

As well as the product demos, there were also other seminars covering design topics. One by a guy from Avenue A/Razorfish was entitled Web Design With Emotion

This was quite thought provoking, saying users are starting to expect more and more from things like eCommerce applications, and there are more ways of presenting results that just boring old lists of stuff. Two examples he gave were:

Amaznode
Great way of querying Amazon - I ran a search for rugby books on the UK site, and got the following interconnectedness results back:

[Amaznode search results show a web of connectedness for the items]

It's fun watching the network to build up. You can pick up an item and drag it about (the blue knot). Double-clicking the centre book will bring up the item detail panel, which lets you Add to Cart or Go to Amazon. I liked the way it presents related stuff - could be good if you're looking for recommendations based on what you have already. Not sure how reliable they are though!

Etsy's Shop By Colour
Etsy is a site where folks who hand make craft items can sell to individuals. There's the usual way of browsing boring old categories, but the Shop By Colour feature is fun - especially if you are trying to co-ordinate stuff for an outfit or room.

[Etsy shop by colour display]

Swirl your mouse round to stir up the colour trail, and click one you like the look of. The database will bring back a cluster of stuff that matches. It's great fun - go and have a play!

So, just two bits of food for thought which show search results don't have to be boring. Users are getting smarter and prefer interaction to passivity, so whilst this kind of interface would have been unheard of even a couple of years ago, things are changing fast.

Geek Dinner With Becky Hogge

2007-05-31T23:12:00.000Z

This Geek Dinner saw us in a new venue, Ye Olde Cock Tavern on Fleet Street, since our old haunt, The Bottlescrue has called time for good. The new place is actually better, I think, because we can have one floor of the pub to ourselves and not encroach on anyone else too much. And the food was much better, too! Thanks to Ian for finding such a great place for us to meet.Becky Hogge was the guest. She heads the Open Rights Group, and explained the work of the ORG, who summarise their goals as:

To raise awareness in the media of digital rights abuses
To provide a media clearinghouse, connecting journalists with experts and activists
To preserve and extend traditional civil liberties in the digital world
To collaborate with other digital rights and related organisations
To nurture a community of campaigning volunteers, from grassroots activists to technical and legal experts

[Becky explains the work of the Open Rights Group]

[Attentive audience]

The ORG's website is well worth a read if you are interested in any issues regarding digital rights of various kinds.

Playing Catchup

2007-05-17T23:35:00.000Z

I seem to have got out of the blogging habit, so I'm hoping to catch up on a few posts now. I'll tweak the dates so they're relevent to the events roughly as they happened (chronology? what's that?!)

The first event I'd like to make a post about was the excellent -

Web Standards Group Meeting on Javascript

Some of us shy away from JavaScript (until recently, myself included) on the grounds that it's not accessible. But these days, if it's done right, it can be positively beneficial to accessibility.

Demystifying Screen Readers - Steve Faulkner
Steve is very knowledgable on screen readers and all their foibles, and is Director of the Web Accessibility Tools Consortium. This talk mainly centred around Jaws (65%) and Window Eyes (35%). The bracketed figures are from a US National Federation of the Blind market share survey - it's obvious these are the two big players.

The key issues revolve around:

Dynamic updates - user initiated and independent
Can the user access the updated content?
Is the user aware that the content has been updated?
Rich Internet Applications (RIA)
Can the user understand the role of the control?
Can the user successfully interact with the control?
Is the user able to access information about the current state of the control?

He then explained the differences in screen reader modes:

Browse Mode (virtual buffer) - the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can't be input into form fields, or interact with select elements in this mode.
Forms Mode (browse mode off) - the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to "read all" functionality. Most of advanced content navigation is unavailable.

The crucial question we have to consider is, when and how does content become available to the user after it's been updated in the browser?

[Steve Faulkner and the Latency Issue]

Latency is a problem because the virtual buffer does not update and the user doesn't know anything has changed. However, JAWS v7.1 started "listening" for virtual buffer updates in response to things like:

window.setInverval()
object.innerText (for IE)
object.textContent and object.appendChild (in Firefox)
changes in form control values
And other stuff like ALT or TITLE attribute value changes.

Jez Lemon has an excellent article on Improving Ajax Applications For JAWS Users on his webiste. Steve summed up with some recommendations:

Do not code to accommodate the poor support shown by JAWS and Window Eyes.
Use unobtrusive methods where available and appropriate, to help screen readers along.
Don't use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.
Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.

Steve's thought-provoking presentation was followed by a turn from Christian Heilmann entitled Seven Reasons For Code Bloat

[Christain's been on the beanz again]

His notes are available for download from his blog, so I won't repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten ;-). Meanwhile, he's thinking of this as the title of his next book:

[Christian's Next Book?]

PubStandards XVIII
Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here's one photo, but you can see more on Flickr.

[Patrick & Ashe go head-to-head, while Ross butts in the middle]

Disconnected

2007-03-22T15:57:00.000Z

When I first started cutting my teeth on dynamic web site development, I was pleased that Dreamweaver has plenty of tools to help out. Because we used it at work for sites, I chose the ASP.NET/C# server model, and used Access as the database (perfectly adequate for the size and features of the sites I was building).

Now I'm beginning to get to grips with PHP/mySQL for development. That's going well too. And having used mySQL for a while, I can see the advantages over Access. But what I'd really like to do is upsize a few of my Access databases to mySQL and have them connect to my existing .NET applications, without having to re-write the damned things.

The data migration tools available to s smooth job, and the data is sitting there, ready to go. But now I've hit a brick wall. How to tell Dreamweaver I want to use a mySQL database instead of access! So I began looking for the correct connection string, this was some help. I also downloaded MySQL ODBC 3.51 and installed it.

Then I set the web.config file entry to this (bold being the connection string given in the link above):

Driver={MySQL ODBC 3.51 Driver};Server=localhost;Database=myDatabase;User=myUser;
Password=myPassword;Option=3;" />

I tried the TEST button and Dreamweaver connected successfully! But try running the site via the browser (or Dreamweaver Live Data View) and it falls over with an error:

System.ArgumentException: An OLE DB Provider was not specified in the ConnectionString. An example would be, 'Provider=SQLOLEDB;'.
at System.Data.OleDb.OleDbConnectionString.ValidateParse()

So tried a different connection method, using Connector/Net 1.0.9 with this syntax in the web.config file - but got very similar results. Then I found this following in an Adobe Tech Note (my emphasis):

Do I have to use ODBC?
No. For ASP sites you can also connect to a database using OLEDB. For ASP.NET sites you must use OLEDB or the native ASP.NET SQL Server connector.

So it looks like it has to be OLEDB, but how to put the correct provider in the connection string? Nothing I've tried seems to work! Any clues? Has anybody actually got this combination to work?

Dreamweaver 8
ASP.NET/C# server model
mySQL database

Mobile Web Best Practices

2007-03-20T15:55:00.000Z

Sheila went to the 3GSM World Congress in Barcelona a few weeks ago, and picked up a handy set of cue cards on designing for the mobile web, which she was kind enough to give to me. It was great timing, since I'd been thinking for a while about the best way to go about designing for mobile devices. The cue cards promote the W3C's Mobile Web Initiative, and are great prompts on the best techniques to use.

[Mobile Web Best Practices cue cards]
So for those who don't have a copy, I thought I would share the wisdom that they detail. More info can be found at http://www.w3.org/TR/mobile-bp/ - but the below is a distilled and much more user-friendly summary.

10 Ways To Mobilise
The cards are broken into ten topics, with hints and advice on each:

1. Design for One Web
Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

Thematic constistency - ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

Capabilities - exploit device capabilities to provide an enhanced user experience.

Deficiencies - take reasonable steps to work around deficient implementations.

Testing - carry out testing on actual devices as well as emulators.

2. Rely on Web Standards
In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.

Validate Markup - create documents that validate to published formal grammars.

Content Format Support - send content in a format that is known to be supported by the device.

Content Format Preferred - where possible, send content in a preferred format.

Character Encoding Support - ensure that content is encoded using a character encoding that is known to be supported by the target device.

Character Encoding Use - indicate in the response the character encoding being used.

Style Sheet Use - use style sheets to control layout and presentation, unless the device is known not to support them.

Structure - use features of the markup language to indicate logical document structure.

Error Messages - provide informative error messages and a means of navigating away from an error message back to useful information.

3. Stay away from known hazards
Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.

Pop Ups - do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

Tables Nested - do not use nested tables.

Tables Layout - do not use tables for layout.

Graphics For Spacing - do not use graphics for spacing.

No Frames - do not use frames.

Image Maps - do not use image maps unless you know the device supports them effectively.

4. Be cautious of device limitations
When choosing to use a particular web technology, consider that mobile devices vary greatly in capability.

Cookies - do not rely on cookies being available.

Objects or Script - do not rely on embedded objects or script.

Tables Support - do not use tables unless the device is known to support them.

Tables Alternatives - where possible, use an alternative to tabular presentation.

Style Sheets Support - Organise documents so that, if necessary, they may be read without style sheets.

Fonts - do not rely on support of font related styling.

Use of Colours - Ensure that information conveyed with colour is also available without colour.

5. Optimize navigation
Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.

Navbar - provide only minimal navigation at the top of the page.

Navigation - provide consistent navigation mechanisms.

Link Target ID - cleary identify the target of each link.

Link Target Format - Note the target file's format unless you know the device supports it.

Access Keys - assign access keys to links in navigational menus and frequently accessed functionality.

URIs - keep the URIs of site entry points short.

Balance - take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.

6. Check graphics & colours
Images, colours and style brighten content, but require care due to inconsistent support for some formats low-contrast screens.

Images Resizing - resize images at the server, if they have an intrinsic size.

Large Graphics - do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.

Images Specify Size - specify the size of images in markup, if they have an intrinsic size.

No Text Alternative - provide a text equivalent for every non-text element.

Colour Contrast - ensure that foreground and background colour combinations provide sufficient contrast.

Background Image Readability - when using background images, make sure that content remains readable on the device.

Measures - do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

7. Keep it small
Smaller sites make users happier by costing less in time and money.

Minimise - use terse, efficient markup.

Page Size Limit - ensure that the overall size of page is appropriate to the memory limitations of the device.

Style Sheet Size - keep style sheets small.

Scrolling - limit scrolling to one direction, unless secondary scrolling cannot be avoided.

8. Use the network sparingly
Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.

Auto refresh - do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.

Redirection - do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.

External Resources - keep the number of externally linked resources to a minimum.

Caching - provide caching information in HTTP responses.

9. Help & guide user input
Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.

Minimise Keystrokes - keept the number of keystrokes to a minimum.

Avoid Free Text - avoid free text entry in forms, where possible.

Provide Defaults - provide pre-selected default values where possible.

Default Input Mode - Specify a default text entry mode, language and/or input format, if the target device is known to support it.

Tab Order - Create a logical order through links, form controls and objects.

Control Labelling - label all form controls appropriately and explicitly associate labels with form controls.

Control Position - position labels so they lay out properly in relation to the form control to which they refer.

10. Think of users on the go
Web users on the go want compact information when time is short and distractions many.

Page Title - provide a short but descriptive page title for every page.

Clarity - use clear and simple language.

Central Meaning - ensure that material that is central to the meaning of the page precedes material that is not.

Limited - limit content to what the user has requested.

Suitable - ensure that content is suitable for use in a mobile context.

Page Size Usable - devide pages into usable but limited size portions.

And reading through these, most of the list sounds equally applicable to overcome other accessibility issues. Wise advice, which isn't always easy to follow!

Decisions, Decisions

2007-03-14T17:05:00.000Z

I've been in a dilemma for the past few days. Ever since finding out that d.Construct2007 and BarCampBrighton are scheduled for 7th, 8th & 9th of September, it's posed me a problem. Which is that it's the exact same dates that the Rugby World Cup starts in France, and the opening games with France vs Argentina and then England vs USA are the ones I want to go to.

So, there's been some weighing up of pro's and con's, and I've just booked the rugby trip! I figured that, even though I had a great time at last year's d.Construct, since it's an annual event, there's always 2008 - whereas World Cups only come round once every four years - and the next one is in New Zealand - hardly a convenient hop across the channel!

The worse-case scenario would have been me prevaricating for so long that tickets to both events had sold out. So I thought it best to jump now and forever hold my peace :-)

MiniBar4

2007-03-04T19:50:00.000Z

Friday 2nd was the first time I had attended a MiniBar session, this time it was MiniBar4, held near Liverpool Street. I wasn't really sure of the format, but it was basically a chance for developers and investors to get together with a bit of free beer thrown in!

Each potential project was given a five minute slot to present their idea or website, and questions were taken at the end. The following sites were presented:

sellaband.com
The basic premise is that "believers" invest in shares of new acts, so they can raise $50K to record an album. Each share is for $10 and will guarantee the believer one copy of the resulting CD. So buy $50 of shares and you get 5 CDs. Once the $50K has been raised, the website puts the band in touch with producers and the recording goes ahead. At any time before the full amount is raised, either band or believers may withdraw their offers. Two acts have already raised the neccessary capital and a third is well on the way.
spikesource.com
Is a site for the Open Source community to collaborate and set standards for business-ready applications
flirtnik.com
Billed as "Smart personals for smart people", it's apparently the first Web2.0 dating site, using folksonomy tagging. Users are able to add relevent tags for themselves and others, which can then be searched. Results can be filtered out on the basis of gender etc.
play.tm
Site aimed at gamers and has loads of news about the latest gear, games, etc. Also has community section.
metaweather.com
The site seems to default to Chinese (!), which was slightly disconcerting. It is an automated weather data aggregator that take the weather predictions from various forecasters and calculates the most likely outcome.
rouq.com
An unusual search engine which brings up thumbnails of the results pages.
trustedplaces.com
A site where users can rate restaurants, shops, or other places, and tag them with relevent meta data. You can play the tastefinder game, which will then match your tastes with other users on the site, in order that you get the recommendations which are most appropriate to you.
openrightsgroup.org
The last presentation was from the Open Rights Group, telling us about the work they are doing spreading the word on copyright, DRM, and other tech stuff happening on the web today.

So, if you're an investor looking to put up some cash for good ideas, or a developer looking for financial input, MiniBar is the place for you. The next one is scheduled for 20th April.

There's also an event called the London OpenCoffee Meetup which does more or less the same thing. Only this time it's over coffee, every Thursday morning between 10:00 and 12:00 in Starbucks, Regent Street. I'll bear it in mind when I have my big idea and need funding!

WSG London #3 - Accessibility

2007-03-03T22:44:00.000Z

I'm playing catch-up a bit with blogging. I was at the third London Web Standards meeting on 28th February, which had an Accessibility theme.

We had three very different talks, each highly informative and enjoyable.

Niqui Merret on Accessbile Flash
Niqui started out by saying that Flash and accessibility don't have to be mutually exclusive, as many people presume. However, in the real world:

No single technology can be 100% accessible to all users. Aim to achieve the most accessible solution possible.

It's up to developers, programmers and copywriters to make sure their contributions are as accessible as possible. It's also up to the software vendors (eg of screen readers) to try and implement the standards properly and as quickly as possible. She also mentioned FlashAid (talks to screen reader and turns off the Javascript/Ajax so browser sees alternative accessible content) and SWFFix (a tool for progressive enhancement) as useful resources for Flash developers.

She talked a bit about the Accessibility panel in the Flash authoring environment, which allows developers to set things like Tab order and ALT text. And she demonstrated a fun little game in Flash, which was fully accessible without mouse and to screenreaders:

[Niqui demonstrates her accessible Flash game]

Ann McMeekin on Accessibility - What Not To Do
Ann is a Web Accessibility Consultant for the RNIB, and clearly knew her subject inside out.

She made many excellent points, but some of the most salient were:

Don't assume all users with disabilities are the same
Don't ignore users who come to you with a problem
Don't forget to set your page's default colours - background and foreground (if not, changing Windows default colour scheme could have a dramatic effect)
Don't waffle - be clear and concise, don't repeat yourself
Just because you can add a title attribute to almost anything, doesn't mean you should - it's largely redundant if your link text is descriptive enough
Don't be shy - show skiplinks, and use :focus and :active as well as :hover
Put instructions before forms - otherwise someone who has zoomed the page (magnified) doesn't have a hope in hell of seeing what the labels are

One of the most surprising things was to learn that most screen readers will read out the legend to an accompanying fieldset before every label in the fieldset - so it's important to keep legends short and concise, and so they will make sense when read with the form field label.

[right, Ann in full flow]

Two final thoughts from Ann:

Don't jump on the bandwagon and implement the latest cool widget without knowing what impact this might have on your users
Accessibility doesn't mean you can't be creative

Mike Davies on Web Accessibility - The Developer's Tale
Mike's talk was a case study of the re-design of Legal & General's website services and applications, which he had been heavily involved with before his move to Yahoo! in the summer of 2006.

Four years ago, before the project started, L&G's website was ranked 92nd in a FTSE100 survey of websites; it ranked badly with search engines, had at least 150 links on every page and was horribly inaccessible. Through the vision of the website manager, the site was completely redesigned with accessibility at the heart of the thinking.

They reaped the benefits very quickly:

40% increase in website traffic
doubled conversion rates (that is, number of people completing an online application for insurance etc, versus those who start the process)
doubled online revenue
cut maintenance costs by two thirds
increased natural search-engine traffic by 50%
paid for itself in five months

[conversion rates for Home Insurance - lilac = old site, burgundy = new site. The first two bars are the numbers starting the process, middle represents those finishing a quote and last pair are numbers of completed applications]

And the website is now held up as a highly-regarded example of how to do things properly - it is a PAS 78 and AccessibilityNet case study, has accreditation from the Shaw Trust, and is cited in books on accessibility.

Thanks again to Stuart for organising an excellent event. I look forward to the next one.

My New Photographic Blog

2007-03-02T14:45:00.000Z

I've decided to start a new blog, dedicated to purely photographic topics. Having thought about it for a while, the balance was finally tipped after BarCamp when I wrote up my tutorials from the presentation I did.

More and more of my photographic (non-geek) friends have been asking about them, and I thought it was easier to separate the content out into a new blog, rather than them having to wade through lots of web geekery here.

So please take a look at http://cazphoto.blogspot.com/ for the new publication!

Some posts from this blog's archives have moved to the new one; other posts are replicated (mainly my BarCamp2 stuff, or those with a few comments attached, which have stayed put here and been copied to the new address).

Henceforth, I shall be putting any photography-related topics on the new blog, so please put the address in your feedreaders if you'd like to keep up with my posts there.

WebCards Extension For FireFox

2007-03-01T16:17:00.000Z

Discovering Microformats
For viewing Microformats, and discovering them in a web page, I've blogged about Tails for Firefox in the past. But recently, I've been beta testing Andy Mitchell's excellent Webcards 0.3 extension for Firefox. So what does it do?

The first time you load a page containing Microformatted information, the green WebCards ribbon pops up at the bottom of the browser viewport to alert you. This also appears when you mouse over the bottom of the browser:

[WebCards ribbon tells you what sort of Microformats are in the page]

Playing Tag
Clicking the "Tags" link in the ribbon brings up the Tags panel:

[Default view of the "tags" panel is the Related option, allowing easy search of del.icio.us or Upcoming for the tags in question; "brian suda" in this example.]

Similarly, clicking the Feedback or Media icons gives alternative search options for that tag:

[Feedback offers to search Technorati, Media offers to search Flickr for the tag in question]

An alternate way to access the tags panel is to right click any tag on the page (which will be highlighted by the green icon):

[Right-click (configurable) the TAG icon to get a floating version of the Tags panel]

Making Contact
When displaying contact information, the extension will display the blue icon whenever it encounters any hCard info. Right click to get the floating panel for the hCard information:

[Default view for hCard is the Information icon. Shows multiple links if they are in the hCard]

The Application icon will allow export of the hCard info to Outlook or other address book application. The Related icon shows other search options for that person:

[Related search options are LinkedIn, Google or Wikipedia]

Getting Friendly
My blogroll is marked up with XFN and when you mouse over the relevant link, WebCards will let you see the orange icon. Right click and it shows relationship in the XFN panel:

[The XFN panel shows the page owner's relationship to the linked person]

Make A Date
The last major category of Microformat that I've been exploring with WebCards is of course, hCalendar. These are indicated by the little red icon:

[Upcoming occasions displayed in the Calendar panel]

As with the other format panels, the Application icon lets you export the event to Outlook or Google Calendar applications; Related will search Upcoming or Google for the event:

[Add an event to my GoogleCalendar with the Applications icon]

Summing Up
So far, I've seen several iterations of this extension, and Andy has always welcomed feedback on the app. I like it a lot better than Tails for Firefox, it just seems to do more and looks much nicer - don't accuse me of being shallow, it just adds up to a nicer user experience! Anyway, I'd recommend it to anyone who is looking to get the most out of Microformats in the wild.

RDF - What's It Good For?

2007-02-28T15:07:00.000Z

One of the presentations that I missed at BarCampLondon2 (I was attending another session) was a light-hearted debate about the similarities and differences between Microformats and RDF. The main protagonists were:

Jeremy Keith and Brian Suda in the Microformats corner
Tom Hughes-Croucher, Tom Morris and Ian Forrester in the RDF corner.

Thankfully, for those who didn't see the debate, Ian has uploaded a video of the session. It makes interesting viewing! And shortly afterwards, I found Ben Ward's insightful post about the whole subject too. I think Ben's second paragraph hits the nail on the head:

The thing about RDF is that no-one has yet demonstrated any real-world reason to care about it. It fascinates academics who would love — just for the sake of it — to model the entire universe in triples but in the real world of web browsers the value has never really been promoted.

Spot on.

The Microformats advocates have been very quick to explain what they are for, what they do, and how to implement them. I use them regularly in this blog, and try to incorporate them wherever I can into new projects. It's so easy to build them in from scratch when marking up events (hCalendar), people (XFN) or contact details (hCard).

But as yet, I'm really stumped as to what RDF - or more importantly, eRDF can do for me. Tom Morris has started a website called GetSemantic which hopes to chart the progress of developments about eRDF and spread the word. I'll be keeping an eye on it from time to time, to see what's cooking, but until then, I'll be sticking to my diet of Microformats.

Photographic Tutorials

2007-02-27T21:58:00.000Z

Sheila had a good idea, to collect the titles/links of my tutorials on photography, initially written for BarCampLondon2. I'll also be updating the list regularly when I post a new photography tutorial, so you can easily keep tabs on them.

Taking Better Pictures
These were the posts which formed my presentation at BarCampLondon2. They are aimed at anyone who would like to improve their photography, whether they use a fully-automatic compact camera or SLR. The principles apply equally to film and digital photography.

Getting Technical
These are aimed at people with a bit of photographic knowledge, but would like to learn more about the technicalities. They will explain the affects of ISO speed, shutter speed, apertures and more.

All About ISO
All About Apertures & F-numbers
All About Shutter Speeds
Putting It All Together - Exposure
More on Depth of Field
White Balance & Colour Temperature
Lenses And Perspective
Compression, File Size & Resolution - coming soon

Please get in touch by leaving a comment if you would like any other aspect of photography explained.

Flickr And Self-Referential Folksonomy

2007-02-21T00:05:00.000Z

I've been thinking a lot about Flickr and tagging recently, having just had to bash a load of tags onto my BarCamp pictures.

Lots of my mates are members, and when we've got together for socials, we share the pictures via Flickr afterwards. Many tag the images by subject, or use something like Upcoming's machine tags: upcoming:event=138806, which refer to the relevent event tag, and can be used by Upcoming's API to display photos from that event (held on Flickr), in the event page on Upcoming. "Old hat", some of you may say.

The other thing that regularly happens is that folks tag pictures with people's names or nicknames. Thus, you can see all the photos of me on Flickr (which have been appropriately tagged), whether they be in my photostream or someone else's. But here's where we get the problems.

Some people have particular tags by which they would like to be known, as well as their normal names. Ben (74 results currently) is a case in point, who also goes by the nickname of Kapowaz (56 results, some of them the same). Mark Norman Francis (390 pics) (aka Norm! - 2,324, not all of them him) thinks he's King Of The Britons (122). Adding all these tags by hand every time gets very tedious.

Now Flickr is very good at letting you organise your pictures, by set, date of upload, geographical position, etc. Their drag and drop interface is easy enough to get your head round with a bit of practice.

So I was thinking, why not let each Flickr user asign their own tags to describe themselves. Then give the Organiser Panel the facility to set which Flickr users appear in the photo, and that user's tags then get applied automatically. As long as you know that a person in one of your pictures is a Flickr member, you ought to be able to drag their icon onto a picture to set up the tagging, even if they are not in your friends, family or contact lists (these could easily load by default in the appropriate new "choose Flickr member" panel):

[mockup of the "choose member in photo" facility, via the Organiser panel]

Or when you come cross an individual picture in your Flickrstream, you can currently add it to a group via one of the fuction buttons at the top. Similarly, you could have:

[mockup of the "add member in photo" facility, in the Flickrstream view]

I'm sure that would save some donkey work on everyone's part, and would be quite interesting to follow the reference tag trails around Flickr until you get dizzy.

Comments anyone?

Vibrant Colour

2007-02-19T16:44:00.000Z

Theory
Subjects with vivid colours have immediate impact.

Again, this can be one single colour or perhaps two complimentary colours from opposite ends of the specrum - eg. blue and yellow.

For the most vibrant colours, you need good strong lighting - plenty of sun or perhaps flash, depending on the subject.

Examples

[The Mini Crevass - anything red has an immediate impact, and this macro shot of frost patterns on my car is no exception]

[The Green Lens - still striking, but grabs the attention a little bit less than it's red brother. The lighthouse lens is lit from behind by a shaft of sun]

[The Stamping Ground - stage lighting gives this shot a dramatic feel. I liked the contrast between red and yellow gels]

[Blue Luzzu - strong Mediterranean sun (and a polarising filter) brought out the depth of the colours in this Maltese fishing boat. I liked the complimentary blues and yellows]

Subdued Or Single-Colour Images

2007-02-19T16:38:00.000Z

Theory
Selecting subjects with subdued colours, or all from one end of the spectrum, can evoke a particular mood.

It can be particularly effective in showing shapes and textures

Examples

[Smokey Shed - this is actually a colour image, showing the merest hint of grey/green in the shafts of light and pale pink and blue in the skylights]

[The Rusty Cog - a combination of browns and oranges show this scene in a very limited colour palette. The differentiation between foreground and background is largely through focus]

[Autumn Vines - the vines show leaves of green and pale yellow, with a bit of brown at their feet. Notice also the strong lead-in lines and "stop" (the darker green fir tree) at the back]

[Question Mark - just a few shades of cream and brown give a calm atmosphere and clean lines]

Texture & Tone in Monochrome

2007-02-19T16:30:00.000Z

Theory
The right lighting is vital for conveying the texture and defining the tone in monochrome pictures.

Strong side lighting on the subject will create the best emphasis of light and shadow.

Soft lighting will lead to a more subdued image with smaller tonal range:

Images with lots of dark tones are said to be "low-key"
Images with lots of light tones are said to be "high-key"

Examples

[Cycle Lane - with a predominance of dark tones in the picture, this is definitely a low-key image]

[Mist Over The Farm - even though this has a very bright sky, the images is more low-key than high-key, with the dark silhouettes in the foreground dominating the image]

[Grey Horizons - this is probably more high-key than low-key - there is a predominance of paler tones, with only a few darker shapes]

[And Let Thy Feet… with only one small area of black in the frame, this is a high-key image]

Composition #8 - Using Triangles

2007-02-19T16:26:00.000Z

Theory
The humble triangle can be a useful compositional device to improve your pictures.

Upright or inverted, they act as extra lead-in lines or can encapsulate the subject being photographed.

The triangle can be formed by tangible straight lines, or objects at each virtual corner.

Placing three objects in triangular formation is much stronger than the eye "bouncing" between two subjects - odd number repetition is best if possible.

Examples

[Bringing In The Catch - three boats in the harbour form the corners of a flattish triangle, also main interest in the picture is restricted to the middle third strip]

[Fungi and Treestump - here, the main content of the picture forms a natural inverted triangle, albeit made from circular objects (repetition with different sizes). I was careful to line up the top "side" with the edge of the frame]

[Overthrow - the players make up most of this upright triangle with their lineout jump - but it is capped off by the all-important ball. Neither of them caught it!]

[Louvre Geometry - this one is a special case, with two triangles (outlined). The lower, inverted one is very obvious, but the upper part is just as important]

Composition #7 - Fill The Frame, Or Not?

2007-02-19T16:21:00.000Z

Theory
Nobody wants to play "hunt the interesting bit" with your photos! So get in close, and fill the frame. Remember:

"If it's not good enough, you're not close enough"

[Good advice for all except war photographers and wild animal specialists]

Or, make a point of not filling the frame, but giving the picture some "positive space" - a tricky thing to define, but examples should make things clearer. The skill is knowing which to go for under what circumstances!

Examples

[It Takes Allsorts - get in close, fill the frame]

[Lovely Bubbly Aero - get in close, then fill your tum after the photo shoot!]

[The Racing Line - most of the frame is empty track, but having the car so far off to the right does give an impression it's struggling to stay on the tarmac]

[The Red Roof - most of the picture is sky, but the gull and hut balance each other well]

Composition #6 - Using Repetition

2007-02-19T16:15:00.000Z

Theory
Repetition can be appealing, but too much of the same thing can be boring.

Instead, take subjects which show repetition but with a slight difference:

Similar objects, of different sizes or focus
Similar objects, of different colours
Similar objects, in different positions

Examples

[Pencils I - the variation here is colour, size and position - the ends of the pencils were all lined up, and the difference in their lengths was entirely down to how much they had been used in the past]

[Windows Within Windows - foreground windows repeat uniformly, their reflected counterparts all suffer from different distortions in the glass]

[The Table Setting - a simple found still-life shot - the wine glasses, condiment set and red gerbera, each of different sizes and gradually getting less sharp as they get further back]

[Floral Details II - the blooms repeat in different positions and gradually less focussed further back in the picture]

Composition #5 - Creating Depth

2007-02-19T16:09:00.000Z

Theory
Depth can be emphasised with good lead-in lines.

Also, make sure there is something of interest in the three areas of your picture:

Foreground [rocks]
Middle distance [sheep]
Background [hills]

It's those thirds again…

Examples

[Beached Lobster Pot - getting up close to the lobster pot (with a wide-angle lens) made it appear bigger in the frame; the rocks lead through the middle ground to the background hills]

[Heavy Traffic - the huskies in the foreground lead to skiers (middle ground) and hills beyond]

[Twilight Expedition - foreground interest is provided by the figures and dinghy, mid-ground is the tethered boat and more hills in the background]

[My Imaginary Friend - foreground girl is reflected to give some middle-distance interest; the background is not so significant in this shot]

Composition #4 - Framing Elements

2007-02-19T16:03:00.000Z

Theory
There are two aspects to framing your pictures:

Make sure unwanted things don't cut into the side of your photos - always look around the viewfinder (or LCD screen) to check
Pictures can be enhanced by carefully framing the view - eg. with tree brances

Examples

[Le Chat Qui Pêche - the foreground path and overhanging trees frame the scene top and bottom, and the leaves cover up some boring sky]

[Ingatestone Hall - the horizon is placed high up, while the tree and its shadow appear to wrap around the building]

[The Castle Keep - I moved into a position where the archway framed the buildings beyond and the sunlight reflected from a window appeared behind the lamp fitting]

[Scrum Between The Posts - a scrum at the other end of the field, framed through the posts, provided a shot which showed more context to the situation]

Composition #3 - Using Symmetry

2007-02-19T15:36:00.000Z

Theory
The rule of thirds is useful for many subjects, but not all.

If you see a symmetrical subject, it's often better to compoase so that the line of symmetry is right in the middle of the picture.

Take care to make sure the symmetrical subject really is in the middle - slightly off-centre and it will look odd.

Examples

[Transporter Bridge - I stood right in the middle of the roadway (waiting for the bridge to com back to our side) and got everything balanced]

[Southwark Roof - taken from the middle of the aisle, also showing lead-in lines pointing to the stained glass window at the end]

[Victorian Hangar - carefully composed, with all lines leading towards the window at the end of the room]

[Picture Window - sometimes you get lucky with two planes of symmetry - here the horizontal and vertical framing was very carefully controlled to be equal on opposite sides, even though the main content (the reflections) are not perfectly symmetrical]

Composition #2 - Lead-In Lines

2007-02-19T13:34:00.000Z

Theory
Try to encourage the viewer's eye to go deeper into a picture. Lead the eye around the frame by using:
[straight lines, gentle curves]

[imaginary lines formed by picture elements]

Always make sure there is an object at the "stop" point where the line finishes, which reinforces the lead into something tangible.

Examples

[The Time Tunnel - lines converge towards the figure in the bottom left hand third]

[Sunlit Cloisters - imaginary lines formed by arches and shadows converge towards the two windows at the end of the corridor]

[The Long Trek For Water - curved line formed by the footprints lead to the figures at the water hole]

[Lights On London Hill - the snaking s-curve leads off into the distance, but the presence of the car heading towards us stops the eye wandering off too]

Composition #1 - The Rule Of Thirds

2007-02-19T11:41:00.000Z

Theory
Try to put the main point of interest in your picture at one of the intersections of the thirds:

Or devide the sky/land line on a 1/3rd 2/3rd ratio. Try to avoid putting the horizon half way down the picture.

Examples

[Over The Rainbow - horizon on the lower third, protruding flower is on the horizontal and vertical third intersection]

[Sunrise, Calanais - horizon on the lower third, sun is on the intersection of the horizontal and vertical third]

[Pienza Hillside - high horizon on the upper third]

[Pencils IV - point of focus on the left hand third, but half way up this time]

BarCamp Day 2 - Morning & Afternoon

2007-02-18T20:42:00.000Z

Simon Willison on OpenID
Simon talked about systems for single sign-on across multiple sites. You don't give away your user name to the site, but do it via a third party signon, such as Yahoo!. MyOpenID https://www.myopenid.com

Attribute Exchange
Registering personas. You can set up personas which lets you act as different people on each site, with perhaps a different circle of friends or interests..

A bit prone to phishing - an evil site could redirect you to a phishing site which could catch your ID and password (if you are signing into openID via any old site (rather than at the mothership). AOL have turned OpenID on for 68 million accounts now.

idproxy.net is a site which Simon has written, which acts as a middle man for yahoo signin/openID.

[Simon demos openID signon for Magnolia]

What happens if your provider goes away? You can use your own url as a delegation by inserting a couple of lines of HTML in the code of your site.

If you log into a blog to comment, you can populate a white list of trusted friends' openIDs which would then bypass comment spam moderation.

http://jyte.com is a way to enhance your reputation as a distributed profile. Other users vote yes or no to say if they agree with your opinion. Jyte has a group for BarCamp (effectively a white list) which could be exported to another social network, lock, stock and barrell.

Janette Girod on Optimising The Everyday: Finding Flow
Janette's presentation was all about the art of training your attention. You get out what you put in - pay attention and you'll get more benefit. Also need to set up circumstances to allow you to pay full attention to what you're doing. This can be helped by:

Defining clear goals
Focus one one small thing to achieve per session.
Heighten concentration
Can be increased by practice. Make it easier on yourself by removing apps you're not using, ban im, email, twitter!! Don't sabotage yourself.
Loss of self-consciousness
Become absorbed in what you're doing.
Distorted sense of time
Specifically allot a period of time to concentrate - it can take 15-20 minutes to zone-in. 48 minutes on, 12 minutes off. Fun to race against the clock. At the end, it gives you break - get up, make tea, check email: this break means your next session of 48 minutes is more productive.
Direct & immediate feedback
Test all the time, immediate reward for your work, seeing when something works
Balance between ability level and challenge
T oo hard, you freak out, too easy, you switch off. If you have a really hard task, break it down into smaller chunks and get those out of the way one by one
Sense of personal control of activity
Master your tools, then you will feel in control of what you are doing
Intrinsically rewarding action
If you have a choice, do something you want to do, rather than something you have to
Focus of awareness narrowed down to concentrate
Be strict with yourself if you find your attention wandering off track. If you keep practising this, you will need to do it less often.

[Janette, in full FLOW]

As a soon-to-be freelancer, I found her ideas and suggestions most welcome, as self-motivation will be a big factor in my success!

Erin Staniland on Web Sites For Photographers
Erin demonstrated With Associates' Flash-based galleries for photographers, with a cms. The customer gets their own domain name, a unique design on a small budget, they manage pictures themselves. Some examples of the system:

http://justice.withassociates.com/
http://www.jameshatt.com/
http://www.175pairslater.com/

The CMS is Ajax on Rails, which creates an XML file which can be manipulated with Flash.

Minibooks - cheap, quick and dirty website for quickly showing work to potential clients. These have standard templates, slight customisations.

Ben Ward on ASP.NET Active Standards Pages
Ben concurred that ASP1.1 not designed with standards in mind. Therefore it was crap at it, at times. Visual studio tends to insert nastyinline JavaScript in certain circumstances, eg Image Buttons, form validation, hyper link pagination on datagrids.

Some controls need to be nested inside forms. Gridview (.NET2) MUST be inside a form. <label> is a pain. The code will generate unique codes for each element - it can screw up css id selections. Page doesn't validate under some circumstances - viewstate can cause problems.

.NET2.0 Master Page templates are better now to set header, nav, footer and define content area into which we can drop the form controls etc. Easy to pass unique page ID for body class switching. Other useful stuff in the header - such as setting the RSS feed link for auto discovery of feeds.

Wrapping Up
After such an action-packed couple of days, there were a few dropouts by the end, but the vast majority made it to the final session. Thanks were given all round, especially to everyone who helped out or organised. There was a discussion about the format of the whole event, and it was general concensus that sleepover was an integral part of the event, and a one-day format wouldn't be the same (besides, when would we play Werewolf?!).

As a first-time BarCamper, would I go again? Most definitely! It was fantastic to meet such great people - going to PubStandards with some of them regularly is one thing, but this is a chance to "jam" in a completely different way. There was laughter in the air virtually all the while during social times, and you could almost see the ideas sparking off each other during the speaking sessions.

So, we departed until next time, full of inspiration and in need of some sleep!

[All wrapped up, and the photos are posted on Flickr already.

BarCamp Day 1 - Evening Sessions

2007-02-17T23:59:00.000Z

Mark Norman Francis on Don't Be Scared of Code Reviews

Norm explained that the purpose of a code review is not to criticise other people's code. The findings are not escalated, there is no formal output - just for folks involved. Except Security problems, which are tracked in Bugzilla. So why bother?

Verification - adhere to internal standards.
Training - informal education of expectations of new hires
Collective wisdom - [you will be assimilated!] Experts pass on their knowledge.

They are looking for, in HTML - valid, semantic, accessible.
CSS - valid (hacks separated out), modular (hung off ONE id - means you can reuse code on another part of site without relying on cascade), cross-browser (graded browser support)
Javascript - unobtrusive (pull it out into separate files, still get to the content with JS off), optimised, cross-browser.

Don't care too much about programmed page weight - ads multiply page weight hugely anyway. Page weight is not very relevent to each user but is to Yahoo!, since so many hits could mean server overload.

Perl/PHP must be documented (in the code, externally), understandable, standardised

[Olé Norm!]

How do they work? Time taken doing them is minimised. Quiet time is set aside beforehand for people doing the reviewing, away from email, IM etc.
During review, items are explained by reviewer, while the coder keeps quiet. A mooderator takes notes for them both, which are tabled for later. Then follow-up - the lead developer confirms that the problems identified have been rectified before code goes live.

Me on Taking Better Pictures
I'll post the main contents of my presentation in later posts, but it seemed to be fairly well received, with about a dozen folks coming to listen.

Andy Mitchell & James McCarthy on "Free Schmee"
Andy and James were talking about APIs and using them in a modular fashion - why invent the wheel again when you could reuse another API to do certain tasks, such as user verification. They freely admitted they'd been penning their presentation hastily when they'd rather have been attending mine. But never mind, it was still an interesting few minutes!

[James and Andy argue about who's going to work the slides...]

Next was dinner: geeks + pizza + beer = culinary carnage. At least there was no washing up!

[Colin Schlüter surveys the carnage]

I stayed chat with Andy Mitchell and John Wilson for quite a while after dinner, but made it to the main auditorium , back end of Ask Us Anything panel. Someone rashly asked to see the panel dance!

[Norm! shakes his booty, watched by Simon, Steve, James and Aral]

Of course, it wasn't long before someone asked "when can we play Werewolf!" So, most reconvened to the restaurant area and three groups started. Not sure how many games were played altogether, but I think it was at least nine, with various permutations of people flitting from one circle to anther.

[a wolf in gnome's clothing, perhaps? Tom Coates ponders who he's going to bite next; James Wheare (Wolf??) and Cristiano Betta don't seem worried by his proximity!]

And so to bed, perchance to sleep, at 4am... fat chance - wished the floor wasn't so hard. Got up again 4 hours later to find most still comatose:

[geek dorm, aka conference room]

BarCamp Day 1 - Afternoon Sessions

2007-02-17T18:50:00.000Z

Tom Scott on Open Source Incremental Backups For Windows
Tom's presentation was useful for those who want to manage incremental backups for Windows in a sensible way. His full presentation is available here: http://www.thomasscott.net/barcamp2/

I backup my system less often than I probably should (photographs aside, which get saved in at least 3 places regularly - I'm paranoid!). So perhaps I should take the time to have a go at this myself.

Meri Williams on Project Management For Busy Geeks
Meri's talk started with the Basic lifecycle of a project. Few projects go through the whole lifecycle properly. The Big Secret is that, for smaller projects, PM is all about Initiating, Planning & Closing (and not worrying too much about execution and control). Planning should NOT be about planning a step by step guide - but something that helps you understand what you're doing. And communicating this to stakeholders. She also mentioned that lots of projects are not closed properly - haven't we all been plagued by customers that just won't go away but pester by saying "can you just do this bit extra?".

[Meri's running order]

Leisa Reichelt on Design Consequences
Leisa's was a hands-on session where she demonstrated her techniques for initial brainstorming of site layouts and designs. We all had to break out the pen and paper (and post-its!), and "mock up" a screen to show the BarCamp Schedule (the real thing was done the low-tech way as you can see):

[Day 1 Schedule - done the low-tech way - but it works very well]

Then we talked about what we'd done and why. It was nice to get away from the computers for a bit, and everyone had fun explaining how they had implemented their solution to their neighbour.

[Andy and Nat listen intently to one BarCamper's version of the schedule solution]

Robert Lee-Cann on Over-Engineering Is Fun!
Leeky's presentation was a light-hearted and thoroughly enjoyable look at solutions to problems which have been hugely over-engineered, and he wondered if this was a typical trait of geeks in general?

[right, Leeky having a geeky- brained moment]

Problem: Is the coffee machine full?
Easy Solution: get off your butt and go and look
Geek Solution: we all know where a bit of over-thinking can get us: webcam trained on the coffee maker

[below: The man needs coffee!]

Problem: Who's going to make the tea round?
Easy Solution: Press-gang someone into doing it
Geek Solution: Web-based ordering of drinks, LED display in the kitchen showing the round required, online voting afterwards to see how well it was made!

Confessions:
Having described the above solution which is in use at his work (!), he asked us all if we would like to confess our most ludicrous over-engineered solutions. Some of the best were as follows:

Meri - private IRC channel to decide the flavour of your pizza before ordering it - used by people living in the same house
John - set up a telly, Freeview box and video transmitter in one room and a reciever in the other room - when they could have run a cable through the wall!
Brave Geek: had written 112K JavaScript file to write a whole web page on the fly, built in the days of Netscape 3 and IE3! He got a round of applause for that one!

Pitch An Idea
The final part was for the audience to come up with a solution to the perennial problem of putting the loo seat up or down in the bathroom. Many outrageous examples were put forward, which ranged from having a finger-print recognition pad on the loo door, so the loo "knew" who was about to sit down, to weight/position sensitive pads just in front of the loo, so it knew if gents were standing or sitting down! All great fun.

Andy Budd on The User Experience
Andy started by talking about the early desktop interface, when abstracting the interface made it easier for "non-tech" users. At the time, it was revolutionary. Similarly, Joe Bloggs doesn't want to learn Unix to use their iPods. People DON'T read the manual. No wonder we say RTFM so often.

We learn by experience - programming DVD recorder is very similar to programming the video. So the building blocks are there and users learn the metaphores. It makes it important not to break common interaction habits.

Users learn new technology by exploring - you switch it on and start clicking buttons to see what happens! So make buttons look like buttons. And make sure it's not fragile so that inexperienced users can't break the system with one click.

Modern life constantly demands our attention. How easy is it to send a text while crossing the road? Rarely do people give your application 100% of their attention. Design it to make things easy, as people are adept at multitasking.

Make error reports blindingly obvious. It's a great place to make the user experience a good one - as soon as something breaks, you want immediate service or fix, or at very least, a human-readable error message. Don't make users feel stupid when they do something wrong.

[I'm no dunce]

Usability is all about making technology easier to use. Plan user experiences carefully. Create wireframe storyboards - think how filming is never done without paper mockups. Then test it on REAL users. Can be as simple as chatting to coffee shop customers - feed them donuts and buy them a coffee and get their feedback on your site - one day user testing, low budget - anything is better than nothing.

UCD is sometimes confused with Business Centred Design or Marketing Centred Design. You should not have to deal with politics. But we all know how hard that can be. Designing with a focus on business unit function is also horribly bad. Technology Centred Design - designing around our own technical ability - we do it that way because we can - is also a no-no.

Get out and talk to the users - find out what they're trying to do with your site. Users don't just want to know what the weather is going to do for the sake of interest, they are more likely to need to know if whether to take an umbrella with them today!

Build up Personas for each broad type of user. Design with these in mind. Very easy isn't always best - maintain a balance. Sites or games companies know about flow - you lose time when you are interested in something.

Starbucks are masters of the "coffee experience" - which is why we are willing to shell out 3 quid for a cup coffee!

Lastly, he made the point that the iPod would probably fail user testing. People buy into the brand. You might struggle through learning the interface, but you're willing to learn it because your friends tell you it's a cool gagdet. So for the right brand, people are willing to take the time to learn new ways of working.

BarCamp Day 1 - Morning Sessions

2007-02-17T12:31:00.000Z

Introductions
We met in the plush surroundings of BT's offices in St. Paul's. They have some fantastic facilities and it was great to be able to make use of them for the weekend.

[hi-tech ramp down to the main auditorium]

The Three Musketeers - Ian, Nat and Jason - set the ball rolling with a few words and generally explained what was going on, and how the format of the weekend would run. Then we were all encouraged to say a few brief words about ourselves as an icebreaker, by passing the mic round the auditorium. I thought this was a great idea as you could note down someone's name if you had similar interests, and seek them out later.

[the fun begins with the Three Museketeers introducing themselves]

Ian Forrester on Pipelines
Ian was explaining what Pipelines were about, basically inputting a stream of data (can be rss but also other formats), transforming via XSLT to give an output such as HTML. Several online applications currently let you do these sorts of mashups, eg BlogWaves 1.0 is a GUI application with which you can do transforms. Also, pipes.yahoo.com does a similar thing. Ian was disappointed that none of them seem to allow you to include information from your own desktop in the aggregation, which might also be useful.

http://www.touchstonelive.com - is a "glorified rss reader" plus extras. Allows you to set alerts as popup for desktop, or as an rss feed (via pebbles). Preloadr passes pictures through Flickr and out to Moo. All have APIs and so the pipeline can be automated right through, end to end, without the user having to intervene manually. Here's Ian strutting his stuff:

[Ian talks about pipelines in the main auditorium]

Tom Morris on The Semantic Web
Tom's talk was a tad too technical for a bear of very little brain like me. He started by saying that tagging data isn't a very scaleable thing to do. RDF is a more complex way of tagging stuff. It can have the same design model as relational databases. And gives us a way to represent something like the relationship: Pants = Trousers - users of both terms are now able to understand each other. [It's helped now I've looked up the definition of ontology!]

eRDF is embeddable - ids, titles, attributes etc. It can be parsed with XSLT if your page is XHTML. RDFa is the next thing coming along with XHTML2.0

GRDDL (griddle), Protégé, SparQL are tools to help you do this stuff easily. SparQL lets you bypass APIs which would otherwise require all methods to have been published as an API.

[Tom talks triples]

After all that brain-bending stuff, it was lunchtime! Thank goodness.

Vista Destroys Photo Metadata

2007-02-13T17:04:00.000Z

I read with interest that Windows Vista has a bit of trouble with editing digital photo's EXIF data.

Basically, if you edit the metadata with the built-in Photo Info tool, such as adding a tag, it destroys the data used by other programmes such as Photoshop. Of particular problem are RAW files from Nikons, which become unreadable after Vista's intervention.

Many comments on the aforementioned blog defend Vista, pointing out it's actually the fault of the camera manufacturers using proprietory formats for the data. However, I believe it's just as much Microsoft's fault for letting you do it without giving you a warning that it might trash the original information.

Yet another example of silly usability issues with upgrades that could really get very annoying.

On a more positive note, after months of ranting at TalkTalk to get my broadband sorted out, it seems the line is finally ADSL-ready! Yeah!

Before I rush headlong into installing their connection software, however, I'll do a full system backup. A colleague at work learned the hard way after his system was trashed by the installation. Ouch. I would have done it this coming weekend, but I'll be at BarCamp, and besides, I've not bought a wireless router yet. Any recommendations?

Previews

2007-02-12T17:32:00.000Z

BarCamp Presentation
I'm happy to have finished writing my presentation for BarCampLondon2. I've decided to do a spot on Better Picture Taking as there seem to be plenty of folks with digital cameras who want to know more about getting the most out of their gear. It won't be technical, and it won't be biased towards any particular type or brand of camera. Instead, I'll be covering the basics of good composition and lighting, plus editing your pictures for showing to friends. After BarCamp, I hope to blog most of the content for those who couldn't attend.

I've gone for a non web-related topic as I figure I'll be teaching many of the attendees how to suck eggs if I talk about web standards or css. Others have said that some of the most interesting topics last time round were those which were a bit off the beaten track. So here's hoping it will go down well.

Geek/Girlgeek Dinners
I notice there are a couple of geeky dinners coming up soon. They seem to have shot themselves in the foot slightly in that they're both on the same day! So, clone yourself or toss a coin to decided which of the following you'd rather attend on 21st February:

London Girl Geek Dinner 10 Sponsored by Amazon!
The speaker for the evening is Jeff Barr from Amazon and he will be speaking on web services.
Geekdinner with Tara Hunt & Chris Messina of Citizen Agency
Both Tara and Chris are best described as Upstanding Citizens of the Internet world. They are well known for looking at the longer term view and talk with words like vision, attention to detail, community, sustainable, open, higher purpose, etc.

Unfortunately, I'm unable to attend either event as I'm already busy, but I will be keen to read any blogs about them afterwards. Please let me know if you write a review.

WSG London #3 - Accessibility
Stuart has put together another great programme for the forthcoming WSG meeting on 28th February. Now that's one I will be able to attend, and am looking forward to what Anne McMeekin, Niqui Merret and Mike Davies have to say on the subject.

Misc Bits

2007-02-09T17:26:00.000Z

Pubstandards Logo
First off, a quick update on the Pubstandards logo comp - Kapowaz has set up a group on Flickr for the challenge, and there's now quite a few entries.

BarCamp Worries
I've got my ticket for next weekend's BarCampLondon2 - but I've still got little idea what I'm going to present. There will be plenty of folks there who are better able to say something new about CSS, Microformats or whatever. So I think I might go a bit lateral and perhaps do something biased towards the photography. We'll see.

Playpen #8 - Pub Standards Logos

2007-01-18T14:07:00.000Z

A couple of days ago, Dan threw down the gauntlet asking if anyone could come up with a logo for the pub standardistas to use on their blogs. Here'e one of my efforts, which will henceforth grace this blog.

You can see some alternatives in the Playpen #8 page.

Hopefully, some more folks will have a go at designing some logos too. When they are available, I'll let you know - the more the merrier :-)

I'm also very pleased to have secured my place for @media 2007 europe europe this morning! I really enjoyed the 2006 conference, and look forward to all the new sessions on offer. You can read some of my past posts for @media 2006.

Upgrades That Suck

2007-01-04T11:23:00.000Z

Upgrades, gotta love 'em.

As it turned out, I foolishly accepted the offer of an upgrade to Windows Media Player 11 a couple of days ago. It all looked to have gone smoothly to begin with, and in fact I like the look of it - seems easier to find things and is a much nicer interface, all in all.

So I ripped a couple of CD's I'd been meaning to put on my PC for a while, then connected my MP3 player. And... nada. Well, the helpful error message said words to the effect that my player was using an old USB driver which was no longer supported, and I should go get a new one. Great! It was getting very late, so I decided not to wrestle with it and left it til the next day.

The player in question is a Creative Nomad Jukebox Zen NX (nice and snappy that, ha), so I hopped over to Creative Europe's website and downloaded the latest USB driver and installed that. Still the same error message.

A bit of Googling later, and I found that WMP11 has "known issues" with Zen portable devices. It would have been nice to have been told this before I did the upgrade, Microsoft! The suggested ~~bodge~~ fix is to roll back to WMP10, upgrade the firmware on the Jukebox and reinstall WMP11.

OK, I'll give that a go. Except that, having trawled around Creative's support site (again) and found the supposedly correct firmware upgrade, I get this lovely little error message when trying to run it:
Brilliant! So I send off an email to Creative's Support asking just which file I should be using, and sit back to wait for a reply.

Meanwhile, there's a troubleshooting bit on Creative's site which suggests another possible ~~bodge~~ fix if the device is seen in Device Manager (it is) but not recognised by WMP10 (it isn't). I follow the instructions which get me to mess about with the registry! And it still does nada.

Last resort is the section of Microsoft's Readme for WMP11 which says your player might have problems after rolling back to v10; uninstall the USB device in Device Mangler™, disconnect device and reconnect, forcing Windows to reinstall. Still five parts of you know what.

So now I've got the (un)shiny Media Player 10 back on my system but I'm not even back to square one as the Jukebox is still not being recognised.

Thank you Creative Labs, and Microsoft, for wasting at least three hours of my time. And I'm still not done. You need your collective heads banging together. I don't care who's problem it is, but it shouldn't be mine.

Property Is Theft

2007-01-03T13:38:00.000Z

19th-Century French politician Pierre-Joseph Proudhon might have coined the phrase, but it's still pretty relevent today. As a soon-to-be-freelance web designer and photographer, I was particularly alarmed to read Sion Touhig's piece at The Register, about how the glut of freely- (or cheaply-) available images on the web has "devasted" the freelance photography and photojournalism sector. Not only is content on the web more easy to pinch, but also the rise in "user generated content" has made things increasingly difficult. He states:

"User Contributed Content should be more accurately termed 'Audience Stolen Content', because media groups rarely pay for Citizen Journalism images and more often than not, either claim the copyright or an all-encompassing license from contributors, when they send their pictures in. That's a copyright grab in all but name."

The article runs to three pages and make many other salient points, but this one stuck out too:

"The perception is "if it's on the web, it's either free, or I'm gonna nick it anyway because, hey, 'they' can afford it". The reality is that there are now more copyright-free or near-free images on the web than copyright images. Most of them will be on Flickr (owned by Yahoo!), MySpace (owned by Rupert Murdoch's News Corporation) or the major corporate image portals. Neither Flickr nor MySpace exist to commercially leverage images, but clients now go there trawling for free content, so they don't have to pay a photographer for it. It has caused a crash in the unit cost of any images which aren't given away and which are licensed for profit."

As a victim of copyright theft in the past, I can entirely sympathise with his point of view. In my case, I was minding my own business reading one of the broadsheets' weekend colour suppliments a few years ago, when I stumbled across a picture which I knew incontrovertibly to have been stolen from one of my websites and used without my permission. After writing an incensed letter to the paper's picture editor, they freely admitted that it was their fault (blaming a lazy researcher for not checking the copyright status of the image!) and agreed to pay me their standard repro fee.

It took another 4 letters and six months for them to finally honour their promise. And that was for a picture which wasn't particularly important or valuable, and would not have earned me anything anywhere else - it was just for the principle of it that I pursued them. What would have happened if I hadn't spotted it? I wonder how many more times newspapers get away with this sort of thing - not to mention the millions of folks online who can trawl the web for all of your pictures and do with them what they will.

And I'm afraid that's why you'll find I put a copyright watermark in all my images which I put online - they're usually only 600x400 resolution too. And my Flickr images aren't tagged with a Creative Commons licence. Once bitten, twice shy.

On a related note, recently a client gave me a brief, and I worked up a proposed site layout. But despite me following the brief, the client was not happy and has basically admitted they want me to rip off the design of another site! I flatly refuse to do so. Asking me to do this would basically be asking me to throw away my professional integrity and risk being sued for breach of copyright.

Fortunately, there was PR agency inbetween me and the client in question, who managed to mediate the situation. They were pretty much in agreement with me that it wasn't not a healthly thing to be suggesting. And from a prospective customer's point of view, I wouldn't be too impressed if I found a site which had obviously pinched a design from a competitor - that wouldn't say much for the company's buisness ethics!

Tagged By Sheila

2007-01-02T15:00:00.000Z

Sheila The Sheila has tagged me with a little blog ditty, and in the spirit of New Year I thought I would carry it on. The idea is this:

"For those of you going "huh?", I have been blog tagged, a game started by Jeff Pulver which seems to be spreading quite quickly. The object of the game is to reveal 5 things about you, which most readers probably don't know, then nominate 5 friends to do the same."

So, here are my five "surprises":

I had my first photograph published when I was 8 years old.
It was taken when I was seven, at Darnholm, on the North Yorkshire Moors Railway. I used my father's manual camera (he had set the exposure for me) and managed to pan the shot when the steam train came round a curve under the bridge. Dad regularly submits pictures for publication in preserved railway magazines, and so he sent it along with some of his, and it was published in Modern Railways. So I'm a bit of a closet steam-head as well as nethead.
I mushed a team of six huskies for a week in the arctic circle.
We toured northern Sweden and Norway. It was the best trip I've ever done, but totally knackering. We ate for England, but expended so much energy, I'd lost 4lbs by the time I came home. My experiences during that week have taught me that teamwork is invaluable, and that plastic is not as good as polystyrene for making loo seats for use in sub-zero temperatures!
I started learning to play Bass Guitar in 2002.
I'd wanted to play bass since I was a teenager. Then one day I woke up and thought, "why don't I just go and buy one, rather than dithering all this time?" Not sure the neighbours were pleased. But my amp doesn't go up to 11! I started out with a cheap 4-string model, but now have a custom 5-string Iceni Funkmeister, with a purple paint job. I guess I'm a late starter when it comes to rebellion and rock-goddess pretentions, ha ha.
I'm a PAGB-accredited judge, and regularly visit photographic clubs in East Anglia and North London, to judge their competitions. For some reason, they like my opinions and keep inviting me back.
Danny Grewcock (England and Bath Lock) once signed my rugby shirt. I was still wearing it at the time. 'Nuff said.

And I'm going to tag these good folks to reveal themselves: Litlove, Andy Mitchell, Bobble, Prof. John Flood and his RATS, FakeBob.

Lies, Damned Lies, And Statistics

2006-12-15T11:57:00.000Z

No matter who coined the phrase, it has often been used to cite the inaccuracy of some conclusions which can be drawn from analysing statistics. I'm usually pretty wary of them myself, but sometimes your server stats are your best friend.

I have recently been involved with the redesign of a website which has been online since the end of 2003. It was originally written by another team, and it contained many nested tables, a few styles, but basically not terribly semantic. The team I work with have been looking after the site's content since it's original launch, and a few months ago, the site owner came to us to ask if we could give it a fresh new look, and a bit of a re-organisation. It had grown organically since it's inception, and things had got a little muddled. It was felt that documents in certain areas of the site just weren't being found.

We undertook some user-centred design, testing our new proposals with paper wireframes and some open and closed card sorting. On the basis of these results, we tinkered a bit more and tested again. Then we set about reorganising the content and making much more semantic pages - lists of documents were coded as a list. I'll admit that one table remains for the basic layout, but this was pretty much proscribed by the templating system in use on the server. Everything else has been pared down to provide minimum tag soup.

On 1st November, the new-look site was relaunched. Fast forward a month, and I ran a statistics check on the site, comparing results from October 2006 (old style) and November 2006 (after relaunch). The results were startling.

October - Access Statistics

Total page impressions: 98,037
Top URL was the site root (no surprise)
4th was the search page, with 1,530 hits.
That suggested people weren't finding what they were looking for.
"Responses" section (where the bulk of the answers to the public's FOI requests were published) was at 46th, with only 262 hits.
We were regularly publishing responses to very similar questions - because users didn't find them on the site before making their own request.

November - Access Statistics

Total page impressions: 108,632
Top URL was site root, 2nd was the new "responses" index page, with 1,658 hits.
Search page had plummeted to 437th - with a mere 24 hits!
Other (new) subpages of the responses section were getting plenty of traffic as people explored the new way of accessing the documents.
We are still publishing lots of responses to requests, but the number of near-duplicate queries has dropped significantly.

Page Weight Statistics
Some pages were completely re-structred in terms of their content, but about 20 pretty much retained their original information - it was just recoded from tables to lists. I did some analysis on these as a before and after comparison too.

The smallest page started out at 16Kb, and went down to 7Kb (56% reduction); the largest page was originally 119Kb and dropped to 20Kb (83% reduction). On average these 20 files' sizes were reduced by 73%. Not bad in itself, but when you multiply that by the number of page impresesions, you get an idea of the considerable reduction in bandwidth being used.

Conclusions
So there you have it - some numbers to back up the priciples of good user-centred design. I felt that the search page statistic was the most significant - and certainly backed up the old adage that if you have a decent navigation and information hierarchy, people won't need to use the search but will naturally find things themselves.

Pub Standards Party

2006-12-15T11:51:00.000Z

As if last Saturday's BBC Backstage Xmas party wasn't enough, a group of hardy drinkers gathered last night for the Pub Standards Christmas party.

Much beer was consumed. It was Norm!'s birthday, and he'd very kindly paid for food to be provided, so the gannets soon swooped and demolished that too. The CSS Div had made a very sticky chocolate confection in Birthday Boy's honour, and that was handed round. Very rich, one tiny piece could send you into hyper-glycemic shock.

Frances was quite tipsy, although she's sworn me to secrecy on that one. Oops! And before I left, Matt and Patrick had persuaded me to go along to Matt's birthday showing of Raiders Of The Lost Ark tomorrow. Renting the whole cinema! Extravagance, or what? Most of us just rent the DVD. Ah, well, I could not provide a good alibi for not attending, so I'll be in the audience at 3pm - Matt might even give me a free "John Wayne" badge...

A Quick Roundup

2006-12-14T17:08:00.000Z

Screen Reader Demo
I've been very poor at keeping up with my blogging of late. I meant to post a few days ago after attending an excellent Screen Reader demo at Test Partners. Steve Green led the session, and John Welsman (Freelance Assistive Technology Consultant) amazed us all with his speed and dexterity at negotiating the web with JAWS. John also brought along his lovely dog, Dalton, who sat very quietly in the corner all afternoon.

It's only when you witness a blind user having to negotiate the tag soup and badly muddled code that still makes up a huge proportion of the web, that you really appreciate why semantic markup is so important.

A website may look great, but take off those stylesheets, and if there are no headings in a document, the user has no way of knowing which sections are which, without wading through loads of text.
Jaws will announce how many items are in a list, so it can be very easy to get a mental picture of the navigation items, if they are marked up this way, rather than dumped in a table.
A visually impared user builds up a mental model of the page in a completely different way to a sighted user - they have no sense of left or right, everything is top-down - so source order of your code is vital in aiding their understanding.
Consistency is the byword - not just in the way things look, but in source order, for instance. Markup pages the same way, and you will give a blind user a head start in visualising the next page they visit on your site - because some of the mental model will still apply from previous pages they may have visited.

Frances also did a writeup of the event, and so I won't repeat too much stuff here. Steve Green also makes some excellent comments on Frances' post.

BBC Backstage Xmas Bash
The geek Christmas event of 2006 was great fun, at The Cuban bar in Citipoint. Ably organised by Ian Forrester, nearly 400 folks attended. It was really nice to catch up with The Usual Suspects, and I was also able to chat with a few people I hadn't had the pleasure of talking to before, including Eric Meyer, who was in London running a 2-day Carson Workshop. I'm kicking myself that I wasn't able to go along to share Eric's knowledge, but work wouldn't pay! Maybe next time?

Glutton For Punishment
Talking of parties, I'm just about to head off to the Pub Standards Christmas party this evening, so I better get my skates on...

Cowboys (Me) And Indians (That'll be Apache)

2006-12-06T18:45:00.000Z

I'm A PHP Newbie
For some weeks, I've been meaning to try my hand at some PHP development, having done most of my projects to date with .NET. I bought the excellent book Blog Design Solutions in September, and have been gradually reading my way through it in my spare time. It gives advice on installing and tweaking some of the most common blog engines such as Movable Type, ExpressionEngine, WordPress and TextPattern, but the last chapter leads you through building your own blogging solution.

I thought this was a good place to start for a PHP newbie, since there were copious examples and plenty of advice about setting up your test environment, a notorious minefield to tread safely on your own.

Setting Up The Test Environment
Unfortunately, this is where the pain and suffering began... I downloaded the lastest stable Apache release (as adivsed by the book), which was supposedly 2.2.3, as the Win MSI installer. It half loaded up, but would not run as a service on my WinXP Pro machine. The Apache icon appared in my SysTray, but the context menu was blank, and it did not appear in my list of services to start manually! After going round the loop several times, I gave up and went back for the 2.0.59 release instead - which worked first time!

Because I've already got IIS running as my default web server on localhost, I had to tell Apache to use a different port - 8080 is the conventional one for a second web server. Then you can use this in your URL to call on Apache to serve your pages:

http://localhost:8080/blog/index.php

I had already installed MySQL 5.0.22 a while back, along with useful tools such as the accompanying Administrator, Query Browser and Migration Toolkit, but had not really used any of it in anger since.Consequently, it took a few minutes to remember what I'd chosen as the root password for the MySQL Administratior package! Eventually, I set up my database (all very straightfoward with the Admin plugin, you don't have to go messing about with SQL statements to make a new table etc, it's all done from a neat little GUI). I'd also got PHP 5.2.0 installed by now.

Connecting To The Database
The next hurdle came when I tried actually running a PHP page with a database connection. I kept getting an error:

Call to undefined function mysql_connect()

After some reading around in my book Beginning PHP and MySQL 5 book (another one which has been propping up the coffee table of late but came into it's own for this), it turns out that PHP5 does not ship with native MySQL support embedded; you have to download some extra libraries and then go fiddling around with the php.ini file. I found this tutorial page really useful in explaining what was needed. And for all the knocking that Microsoft gets in various quarters, I don't ever remember this much effort being required to set up IIS to run with the .NET framework! Bah, humbug.

Once the environment was properly configured, the actual blog development wasn't too bad. I had a few "moments" of frustration trying to chase down some syntax typos which caused various things to blow up, but you get used to that with hand coding!

Telling The Time
Another tricky thing to get right is date and time formatting. My PHP book gave me info if you want to use PHP to display the current date:

<?php echo "".date("l, jS F, Y"); ?>

Gives you "Wednesday, 6th December 2006".

There are occasions when you want to format the date in the SQL statement, and trying to get your head round a seemingly-arbitrary set of case-sensitive parameters in the format string is difficult. Which is where Dan Winchester's guide to MySQL date_format was also very handy. You might use something like this:

SELECT post_id, title, post
DATE_FORMAT(postdate, '%W, %D %M %Y') AS dateposted, DATE_FORMAT(postdate, '%H:%i') AS timeposted
FROM posts WHERE post_id=$post_id LIMIT 1

dateposted would display "Wednesday, 6th December 2006" as before, and the timeposted variable shows "22:45". I split these in two so the parsed date string could be displayed separately from the time portion - if you made two posts in a day, it's nice not to repeat the day/date element every time. If you wanted to lump them together, just use this instead:

SELECT post_id, title, post
DATE_FORMAT(postdate, '%W, %D %M %Y' at %H:%i) AS dateposted
FROM posts WHERE post_id=$post_id LIMIT 1

This will give "Wednesday, 6th December 2006 at 22:25" as one string.

Future Developments?
So now, I have my own blogging engine running on my localhost using PHP and MySQL. I'm not about to share the new blog with the world, as it largely consists of a personal diary and various rants, but it's been a very worthwhile exercise in dipping my toes in the murky PHP waters.

I may decide to develop the code further, and perhaps use it to host this blog on my own server in due course, but for the moment, it's staying right here at blogger.

Playpen #7 - Flickr API

2006-11-22T17:20:00.000Z

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

2006-11-22T12:37:00.000Z

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?

2006-11-20T16:34:00.000Z

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:

allison pickett (artist)
steve day (comedian)
jaye joseph (designer)
jon roobottom (designer)
ann mcmeekin (designer/photographer)
steve marshall (developer/designer)
bobby pathak (journalist)
frances berriman (designer)
diego brown & the good fairy (band)
james edwards (developer/designer) - no-show :-(
david frew (acerbia)
john bergaman (artist)
jen dixon (writer, photographer, web geek)
andy galletly (producer/cinematographer)
gavin strange (designer)
leisa reichelt (user experience consultant)
gia milinovich (blogger/tv presenter)
sam sethi (entrepreneur, techcrunch uk)
buswell (band)
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

2006-11-18T23:55:00.000Z

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

2006-11-17T11:24:00.000Z

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

2006-11-14T15:18:00.000Z

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

2006-11-11T10:31:00.000Z

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

2006-11-10T15:48:00.000Z

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

2006-11-07T21:31:00.000Z

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.

Wonky Feeds

2006-10-31T12:42:00.000Z

Apologies for anyone reading my posts via feedreaders, rather than directly on the blog, who may have been wondering why some of my oldest posts are suddenly appearing.

In addition to the new design, I've also been making use of the blogger beta's "label" feature (aka tagging) and updating old posts with suitable tags. Unlike the old version of blogger, which never seemed to care if you went back and updated a post, the beta version makes updated posts float up to the top of your site feed. Hence some older stuff appearing on the list!

Hopefully, it won't happen again on the same scale, since I'll be tagging each post as I write it. Sorry for any confusion!

I've Had A Facelift!

2006-10-30T14:56:00.000Z

A virtual one, not a real nip & tuck.

After weeks of dithering, I've finally upgraded my blogs to the blogger beta account (there was no going back, so I wanted to be sure before I jumped!). And while I was at it, I thought I would take the opportunity to choose a new template, more in keeping with the colour scheme of my website, carolinemockett.com

It's taken me a while to get my head round the new blogger template widgets, and when I've had more of a play, there may well be a few more tweaks to the Emperor's New Clothes (or should that be Empress?)

Browser Wars or Spoiled For Choice?

2006-10-29T12:00:00.001Z

Two new browsers have launched in the same week. As Olly says, it's a bit like London Buses. First a drought, and then they all come at once.

Firefox 2 - first impressions

As a regular user of FF1.5, I was keen to get the 2.0 release and like the slightly "shinier" look of the browser - someone's polished the chrome!

I found an excellent article on tweaking Firefox, and have done a little customisation to make myself happy with it. One thing I was having trouble with - the new version put an "X" on every tab to close it, whereas 1.5 just had the one at the righ hand end of the tab bar.

Fiddling with the browser.tabs.closeButtons parameter, and setting it to "0" just gives you the close button on the active tab. Much better!

The browser.tabs.tabMinWidth default is 100[px]. If you have many tabs open at once, you end up with scroll arrows in the tab bar, and only get about 7 tabs across by default before this happens. Changing this parameter to 75 gives you about 10 tabs before they start scrolling.

I like the "Recently closed tabs" in the History menu too - how many times have you closed a tab, only to think, "damn, I wanted that one"? Restore it quickly via this menu, and voilà!

Setting browser.urlbar.hideGoButton to "true" (default false) will get rid of the annoying green arrow next to the address bar. Personally, I never use it, I'm in the habit of bashing "return" once I've typed in a URL.

There are other new features, but I've yet to fully explore them.

IE7 - first impressions

I've been waiting in trepidation for Microsoft's latest browser to be released. Yet ANOTHER browser us poor web developers will have to take into account when testing our sites. Yesterday, I bit the bullet.

No troubles in downloading the update, or installing it (thankfully!). Similarly, I went and trawled the evolt.org browser archive for a standalone version of IE6. I've heard some people have had problems with these standalone versions, but thankfully, no aggro as yet. So I've now got IE6, IE5.5 and IE5.01 on my PC too. Along with Opera, that has most of the major PC browsers covered.

Looks like none of my sites have major issues in IE7 - thank heavens! But I would have been surprised if they did - most were designed with standards in mind (IE7 is just catching up with the standards used by Firefox for years), and I haven't got loads of IE-specific hacks lurking in my code.

Two things about IE7 I do like, and don't think Firefox2 has (let me know if I've missed these options buried in FF somewhere):

Page thumbnails
Whole-page zoom

Page Thumbnails

If you click the thumbnails tab at the LHS of the tab bar (outlined in red) -
the browser gives you a large thumbnail of what each tab's page looks like. A bit trivial if you have lots of different sites open, perhaps, but useful if you quickly want to tell the difference between several pages from the same site. The thumbnail display looks like this:

Whole-Page Zoom

And secondly, with accessibility in mind, IE7 will actually zoom the whole page, rather than just text. So if your standard page looks like this:

Once the page is zoomed, even up to 400%, it makes a pretty decent job of rendering text in graphics at this larger size (click the image below to see an actual-pixels version):

I'm sure there will be little niggles and glitches which become apparent as the web community gets used to these new browsers. For the moment, although I see IE7 as a massive improvement over the crusty old IE6, I don't think it's quite persuded me to swich from Firefox as my default browser. And that's largely to do with the developer extensions and addons I use. Perhaps for a regular surfer, it would be enough.

Finally, A Night At The Opera

Lastly, I've just downloaded the upgrade for Opera, now version 9. The Opera website details what's new in Opera9. Haven't really had a chance to look at this in depth, but it's always good to have another browser option to test.

Playpen #4 - Microformats/Too Many Tails?

2006-10-24T08:13:00.000Z

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.

Advanced Driving Techniques

2006-10-23T12:05:00.000Z

I had to take a drive down to the main sorting office earlier on, to collect a parcel. It had a customs charge of £3.68 - fair enough - and a £4.00 "Royal Mail Administration Fee" on top.

<rant> HOW MUCH ?!?!?! </rant>

Anyway, that wasn't the point of this post...

My route home from the PO takes me past the County Police HQ, and just outside it, a vehicle cut me up by pulling in front and proceeded to do 15mph (in a 30 limit) until the next junction, where it turned left without indicating! Sadly, I was going the same way, and the car (still doing 15mph) then pulled up outside the County Court, giving 1 second's worth of indication and "parking" half in and half out of the layby.

It was a display truely worthy of someone out on their first driving lesson. But the reason I was so shocked? It was a marked patrol car!

Microformats Extension for Dreamweaver8

2006-10-22T09:27:00.000Z

Having downloaded Brian Suda's Microformat Cheat Sheet, I had been methodically adding XFN and hCard info to previous blog posts by messing under the hood in split/code view. All very tedious. As I added similar stuff for the nth time, I was just thinking, "wouldn't it be nice if some clever type had written a DW extension to do this..."

No sooner thought, than found - more or less by accident, I've just discovered the Microformats Extension for Dreamweaver8 at the WaSP website. Now it really is a no-brainer to add Microformats to any page.

After installing the extension, you get the Microformats tab appear at the end of the Insert Bar:

The first icon gives you the hCal dialogue box:

Fill it in, and lo! and behold, you get the relevent hCal code in your page:

<div class="vevent">
<a class="url" href="http://www.mypub.com">
<abbr
class="dtstart" title="20070101T1200"> January 01, 2007 - 12:00 </abbr> - <abbr class="dtend" title="20070101T2344"> 23:44 </abbr> - <span class="summary"> My Birthday </span> - at <span lass="location"> down the pub </span> </a>
<div class="description"> Let's meet for a few New Year drinks! </div>
</div>

Next up is the icon for hCard, and pushing the button gives us:

Which produces:

<div class="vcard"> <a class="url fn" href="http://www.carolinemockett.com/">Caz Mockett</a>
<div class="org">Freelance</div>
<div class="adr"> <span class="locality">Chelmsford</span>, <span class="region">Essex</span> </div>
</div>

The third icon is for the rel-licence attribute:

giving the very simple

<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="license">some rights reserved</a>

The little "luggage tag" icon gives us the rel-tag dialogue (of course):

which gives us

<span class="technoratitag">
<a href="http://technorati.com/tag/microformats" rel="tag">microformats</a> </span>

Finally, the dizzy-looking heads icon is for the XFN widget, which really is very neat indeed:

giving us this little code snippet:

<a href="http://www.sheilafarrell.com" rel="met colleague friend">Sheila Farrell</a>

Fab. All of a sudden, my life has become easier. Drew, you're a genius!

Geek Dinner With Molly Holzschlag

2006-10-21T23:16:00.000Z

Great evening at the Geek Dinner last night, with guest Molly Holzschlag. I've only been to one other, where Chris Anderson gave us a talk about The Long Tail, so I was a bit surprised that Molly didn't give a presentation as such, but we all enjoyed her company and she was pleased to chat with anyone about anything.

It was nice to catch up with existing friends; Sheila Farrell, Robert Lee-Cann, Ross Bruniges, Ian Forrester and Chris Heilmann, plus make some new ones! I had interesting chats with:

Laurence Postgate about freelancing, design, beer and rugby
Paul Boag on freelance photography
Molly about her nomadic lifestyle!
Andy Mitchell about beer and geeks ;-)
Eystein Alnæs on web design, Norway and Huskies
David Long about blogging and design
Frances Berriman on girlie geeks

So there we are, a good group of names I can now put faces to - see you at the next one folks!

Oh, and fresh from the recent Microformats WSG-meet, I've marked this up with a load of hCard info :-)

WSG London #2 - Microformats

2006-10-20T17:38:00.000Z

The second London WSG meeting was all about Microformats, something I've been meaning to get to grips with for a while. What are they, and what are they good for? We had three Microformats "Ghosts" to help us understand more about them:

The Ghost of Microformats Past - Mark Norman Francis Esq of Ye Olde Yahoo! Corp. Norman gave us an overview of what Microformats are for, and why they have evolved:

They should be there for humans first and machines second
They are a way of encoding data
Start simply, and re-use building blocks from other standards
They are modular and embeddable
And most importantly, they should attach extra (explicit) meaning to (implicit) content.

One of the first Microformats to evolve was the XFN standard in 2003. In its simplest form, this adds the "rel" tag to an anchor link (for a person's blog, say), where you can specify your relationship to them. See my other post on XFN for more info.

In 2004, the Creative Commons Licences took off, and the rel="licence" tag was added to the Microformats arsenal, eg: Creative Commons, <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="licence">some rights reserved</a>

A lot of sites have invisible meta data hidden in their pages, but which might as well be invisible - visitors can't see it, and content authors often forget to update it. Norm's phrase was out of site/sight, out of mind. If a human can't see it, the metadata might as well not be there.

He briefly discussed why using XML namespaces was considered harmful. They are not well supported, even in modern browsers, and are antisocial (giving rise to the namespaces Tower of Babel).

But on 20th June 2005, http://microformats.org was unleashed on the web community. In 15 months, there has been a huge adoption of them, basically because they are simple, sensible and extensible. Most popular have been the hCard and hCal formats, along with the rel-licence, rel-tag and afforementioned XFN.

Out in the wild, heavyweights such as WordPress, Yahoo!, Google, Technorati have adopted microformats. With a very small tweak to one of their PHP templates, Yahoo Local have suddenly made 15m new hCards available on the web!

Next up was The Ghost of Microformats Present, Mr Jeremy Keith of Clearleft

Jeremy started out by reminding us that the (X)HTML specs do not have specific tags for semantic items such as contact details, relationships, events or reviews, and with the addition of a little bit of extra markup (mainly attributes to existing elements), we can explicitly specify these things in existing markup.

Elemental Microformats

the rel attribute:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
In this case, the rel atribute defines the relationship of the linked resource to the current document (something that had never really occurred to me until the blindingly obvious was pointed out!) Similarly, <a rel="help" href="help.html">Help page</a> might explicitly define a help document for the page containing the link.
<a rel="tag" href="http://en.wikipedia.org/Microformats">Microformats </a> tells us that the link is also a tag.
He also mentioned rel-licence and XFN as above.
the rev attribute:
Less well known and trickier to get your hear round, the rev attribute defines the reverse relationship to "rel". So in the above example, on the help.html page, you might find a link thus: <a rev="help" href="checkout.html">the checkout page</a> which would say, the current page is the help resource for the checkout page.
the vote-for/against attribute:
You might include a link to someone else's blog, which expresses an opion (be it negative or positive) which you agree with. Then use:
<a rel="vote-for" href="review.html">a damning critique</a>. The rel="vote-against" is of course, the opposite (you disagree with the opinion, whether it is positive or negative)

Compound Microformats
These add more than one attribute - usually classes - to elements. We mustn't forget that classes are for general purpose processing by user agents - NOT just for CSS - and should add extra semantic meaning to a document. He cited the hCard example for contact details on a blog:
<address class="vcard">
<a href="http://joebloggs.com/blog" class="url org">
Joe's Blog</a> is the online home of
<a href="mailto:me@jobloggs.com" class="email
fn">Joe Bloggs</a>, a <span class="title">web
developer</span> living and working in <span class="adr">
<span class="locality">London</span>,
<span class="country-name">England</span>
</span>.
</address>

Other things we need to consider are tools for creating and viewing Microformats. The hCard-O-Matic will give you a head start on writing an hCard for contact details, as will the hCal-O-Matic for events. Brian Suda's Microformat Cheat Sheet should also be a must if you're needing a quick reference guide.

On the discovery end of things, the Tails extension for Firefox is great for finding microformats on a page. For those folks not running Firefox, John Hicks has written a client-side stylesheet to highlight microformats, and he's updated it already. Tantek's microformats favelets let you copy hCard or hCal information into your address book or calendar. And Technorati have started to index microformats too!

Jeremy has kindly put his slides together as a PDF - but they're never as much fun as seeing them delivered "live" ;-)

Finally, a taste of things to come? The Ghost of Microformats Future, aka Drew McLellan , also of Yahoo! Europe, and a member of WaSP

Drew immediately got everyone's attention by asking, could using Microformats on your current site effectively replace your API? He demonstrated numerous instances where complex calls to APIs could be supplanted with the relevent microformat codes in the page, and pretty much showed us what they could become given enough widespread adoption. You cane see Drew's slides online, as I didn't have time to scribble all the fiddly bits of code he demonstrated.

One site which has no API but is littered with useful microformats is corkd.com. You can extract contact info or reviews at will, if you have the right plugin widgets.

Drew also drew our attention to some useful tools:

Brian Suda's X2V transformer - takes XHTML hCal/hCard and munches them into vCard/iCalendar files. Then there's Drew's new tools.microformatic.com site.

Questions and answers were welcomed by our Three Musketeers. Yahoo! memory sticks were given out as goodies to anyone who asked a question. One interesting question that stuck in my mind was asking if there were any microformats for mobile? Jeremy quipped that they are smaller than that, and there's more information on picoformats at the microformats wiki.

A very long post; wrapping up I'll say we all enjoyed a beer with the other geeks in the pub afterwards! Thanks to Stuart for organising the meet. He's already put up the podcast feed from the event. I'm looking forward to the next one, whenever that comes round.

Gone Into Hiding?

2006-10-17T16:24:00.000Z

You may have wondered if I've gone into hiding as the blog has been very quiet lately. Well, the answer's no, but I have had a week off doing stuff at home and not going near the computer very much. Makes a nice change, every now and then!

Emerging from my exile, I'm blinking in the bright light of day and trying to catch up with a bit of blog reading, writing and other pc-related stuff.

Olly Hodgson has some excellent links, which I've been following up, and then generally getting lost in the blogsphere. I'm also waiting with baited breath to see how The CSS Div almost got himself killed...

Here's a few good posts about accessibility issues:

Bruce Lawson talks about making accessible PDFs
Punkchip gets to grips with relative & absolute units and makes some excellent suggestions about Accessible Radio Buttons and Checkboxes
A List Apart gives us What Is Web Accessibility? and Working with Others: Accessibility and User Research
And Rob Cherny has an interesting post entitled Ajax and Accessibility: You're Doing it Wrong (Hijax)

As an antidote to my recent exile, I'm also being very sociable this week, with the upcoming events in London to attend - WSG London #2 - Microformats and the London Geek Dinner with Molly H. Will report back on them later in the week.

Tips For Business

2006-09-29T14:12:00.000Z

I was perusing Derek Featherstone's blog the other day (entitled Box of Chocolates, which immediately got my attention!) when I came across two articles of interest about success in business:

Five Business Mistakes I’ve Made
Ten Smart Moves to Improve your Business

Both contain wise words, which are now of particular relevence to me, since I heard yesterday that my current employer has agreed to let me take voluntary redundancy in the New Year. Looks like I'll be working my notice and then free to set up my own freelance design & development company with my payoff! All very exciting, and just a little scary; but I'm looking forward to the challenge immensely.

Playpen #3 - Changing Your Stripes

2006-09-27T16:11:00.000Z

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?

Upcoming Events

2006-09-24T20:44:00.000Z

I've recently signed up for Upcoming.org so I can keep an eye out on what's in the pipeline in the near future. Two events caught my eye, coincidentally on consecutive evenings (all we need is a third one and they'll be like London Buses...)

Thursday 19th October
Web Standards Group Meeting # 2 where Microformats will be discussed. See Muffinresearch.co.uk for more details.

Friday 20th October
London Geek Dinner, special guest Molly E. Holzschlag. See the Geek Dinner website for more details.

Both events look like a good evening; perhaps I'll see some of you there.

Playpen #2 - Lightbox JS

2006-09-23T23:09:00.000Z

The d.Construct Backnewtwork has a neat feature which hooks into the Flickr API and pulls out all suitably-tagged images of the conference. Then when you click an image, it appears in a rather sexy overlay window.

I've been looking for some time, for an unobtrusive javascript method of displaying a photo + caption in a popup, as I have several sites which require this feature, without needing to go for the overhead of dynamic pages or a page per image. Trouble is, most of the methods I've found haven't been friendly if you turn off JavaScript!

The latest issue of .Net magazine (#154) also has a tutorial on Lightboxes (Javascript Image gallery widgets), so I thought I'd give Lightbox JS a try.

It works great straight out of the box, is dead easy to inplement, and will let you customise quite a few features. If users have Javascript disabled, they still get to see the content (the larger image when you click on the thumbnail, albeit in a boring vanilla window), so it's fine from an accessibility standpoint. And I'm pretty sure it's the very same method the backnetwork uses.

I knocked a quick gallery together, which you can see at the Playpen #2 page.

Beta Blockers?

2006-09-21T10:47:00.000Z

Blogger has a new beta version out and is inviting bloggers to move over from their existing account. This involves signing in with a Google account - either using an existing one, or signing up for a new account.

Using systems in beta can be a "fun" experience - you might be the person to come across that little-known bug which completely ruins your day! Or you might find that all the new features are worth the little rough patches while everything gets ironed out.

I'll admit I'm dithering over whether I should jump ship and go for the beta release. There are certainly some great new features like the ability to restrict read access and add "labels" (tags to you and me) for searching and categorising your blog posts. OK, these two are features which other publishing systems like WordPress have had for some time (and I know of folks who have defected to WordPress from Blogger in the past due to these deficiencies).

One "hidden" benefit is their new dynamic serving of pages. In the past, you had to "Publish" each new entry or the whole blog when you made changes, to give the static HTML pages which made up your blog. If you forgot to republish, the changes weren't seen until the next time you republished. This was pretty tedious and took quite a while if you had large blog. In the new version, changes are made to the database immediately and each page is served dynamically on the fly at each request. No more waiting for the spinning logo to finish its whirling!

My ideal scenario would be to move just one blog (probably the RugbyMad one) and play with it for a bit to see if I have any problems, before moving this blog too. But it's not clear from the support info if I can do this - effectivley, both blogs are linked from one account, and I think it's the account I'm moving and not the blog specifically.

Anyway, if you're interested in what new features are in the beta release, here are a few links for you to digest:

What's new in Blogger beta?
Known Issues for Blogger in beta
Blogger Buzz - general comments and news
Switch Me Over to the new account

Playpen #1 - Google Maps

2006-09-20T22:18:00.000Z

Inspired by Jeremy Keith's piece at d.Construct the other week, I've finally dipped my toe in the water of fiddling with APIs - and like many, I decided to go for a Google Map.

It helped that there was a tutorial about that very subject in .Net magazine (issue #153), but when I tried it out, it wasn't working properly. I checked my typing repeatedly for spelling errors, but couldn't find why the map was rendering OK but the overlay bubble was not. Firefox's JavaScript debugger kept coming up with some weird error message about XML mismatches on a line which didn't even exist in the file!

So I turned to my newly acquired tome by Chris Heilemann (see, Chris, after your earlier teasing, I did go out and buy it!): Beginning JavaScript with DOM Scripting and AJAX. Sure enough, in the AJAX-based chapter at the end, I found Chris' take on Google Maps.

Between that, and the Google Maps documentation, I finally figured out how to make a map, add custom marker, and have the info bubble pop up when the marker is clicked. You can see my bit of fun on the Playpen #1 page

Podcasts - Usability & Accessibility

2006-09-13T20:33:00.000Z

Roger Kondrat over at TechWinter has two excellent Podcasts about usability and accessibility - two areas of particular interest to me.

To listen to the podcasts, go directly to Roger's blog:

#1: What is Usability and what does it mean to me? - a discussion with Lisa Halabi, Head of Usability at WebCredible.

#2: What is Accessibility and what does it mean to me? - a discussion with Trenton Moss, Head of Accessibility at WebCredible

They both make excellent points, and give sensible advice for those wishing to convince clients or superiours of the value of good usability and accessible sites.

It amazes me that, with so many positive benefits to using semantic XHTML and CSS, (not least the "freebie" benefit of much better SEO for your site), some company'sdesign mindsets are still rooted in tables and inline code soup.

Blogger/Web2.0 Mixer Event #2

2006-09-12T23:55:00.000Z

Roger Kondrat over at TechWinter organised the second Blogger/Web2.0 Mixer Event last night, and a great success it was. About 40-50 bloggers, startups and web entrepreneurs got together for chat, beer and chips, at All Bar One in Soho.

I met some interesting people, including:

Chris Toudic of Jobneters, a new job network which has just gone live.
Chris Scollo and Philip Wilkinson of Crowdstorm (good to see you guys again), a new Social Shopping site which launched in public beta last week.
Ewan MacLean from SMSTextnews, who was very enthusiastic about all things mobile. He agreed to interviewed for a podcast by Andy White, of Summit Solutions, who was polling people about their Blackberries. Ewan made some very interesting comments about his use of mobile email devices.

Thanks again to Roger for organising the event; keep an eye out on his
blog for future events (I'll almost certainly mention it here too, when
there's more info to pass on).