This year’s dConstruct was a lot larger than I was expecting: the last time I went in 2006 there was a comfortable number of folks there, and it felt really friendly. I didn’t go in 2007 as it clashed with the Rugby World Cup opening game in Paris. But this year there were about 500 attendees who gathered at the Dome in Brighton for the event. I found it a little difficult to find people, even though I knew they were there, as there were so many folks milling about during the breaks.

Here are a few photos I took during the event:

[Above] Aleks Krotoski on Playing the Web: how gaming makes the internet (and the world) a better place. Listen to the audio (mp3).

[Left] Joshua Porter talks about Leveraging Cognitive Bias in Social Design. Listen to the audio (mp3).

Daniel Burka [below] talked about Designing For Interaction. Listen to the audio (mp3).

Next up was Tantek Çelik, talking at length about Social Network Portability and how Microformats can help you to take your friends with you to a new network. Listen to the audio (mp3).

The two Matts, Biddulph and Jones, [below] did a two-handed presentation called Designing For The Coral Reef. They talked about “delighters” – little things which are present in design which can really make the difference to the user experience. Listen to the audio (mp3).

Clearlefter Jeremy Keith wrapped up the event with a thought-provoking session entitled The System Of The World. There doesn’t seem to be an adio transcript of that available.

The first do I managed to get to was Tuesday’s Microformats vEvent, where we were treated to presentations from Tom Morris and Dan Brickley.

Putting microformats on the Semantic Web with GRDDL
Another good session from Tom, his slides are now available as a PDF dowload.

One Big Happy Family
Dan’s slides from his talk can be found on Slideshare.

Gareth gave us a quick rundown of the various parsers which are available.

Language Specific – most available apart from Java.
Language agnostic – web services

hKit – open source PHP stuff.
Mofo – for Ruby
Sumo Javascript (from Dan Webb) – generic parser for JS.
XSLT – at Brian Suda’s site
Optimus – is down at the moment
Google’s Social Graph API – parses XFN relationships

Semantic Camp Session 7 – WTF is RDF?
Tom Morris

Always worth hearing, Tom did an idiots’ guide to RDF, just the thing for a bear of very little brain such as myself.

RDF = Resource Description Framework! 1999 originally, 2004 updated into 6 docs:

• Primer
• Schema
• Syntax Spec
• Concepts & Abstract Syntax
• Semantics
• Test Cases

RDF files at their simplest form:

3 things – subject, predicate, object (see above). The simplest form is – Triples (N3)
Subject and Predicate are Resources – Not literals; Object – Literal sting of text
foo.n3 – text file containing triples.

Tools to parse are available in – Java, C, Perl, Python, PHP, Ruby

He then talked some more about RDF validation and FOAF – which seems like the most friendly and usable aspect of RDF from this bear’s perspective. If you want to make your own FOAF file, why not use the foaf-o-matic

The Rest of the Afternoon

There were other talks going on, but I got distracted by a rather fab game, made by John Linklater-Johnson called Semantopoly. A fab idea [not in the least based on Monopoly] which had us all amused for some hours:

[Matt, Gareth and Isabelle get to grips with the rules of Semantopoly]

It had a slightly different feel to it, in that we didn’t stay overnight. But it was good to see some different faces in the crowd than the usual BarCamp suspects – there seemed to be a good few academics in the mix this time.

Session 1 – Accessibility
Jonathan Chetwynd

Current UK research tells us that 20-25% of the population suffer from “functional illiteracy”! The tools available for making sites all require significant literacy skills. So it is difficult for low-literacy people to access/make sites themselves.

JobCentre Plus – low literacy is strongly correlated with unemployment. The site for searching for jobs isn’t friendly for low literacy users – they encounter lots of check boxes and job titles.

GUI with graphics can be a better way of presenting things to low-literacy users. Currently, SVG not very supported by browsers at present and there is no easy accessible SVG authoring tool.

Another friend of mine, Antonia Hyde, is heavily involved with producing websites for people with learning disabilities over at United Response, and so this would have been a great session for her to attend.

Session 2 – Bringing Semantic Web to Bloggers
Jure Čuhalev

Jure demonstrated a product from Zemanta, a startup from Slovenia.  It empowers bloggers to write better posts. Plugin to Blogger etc – which gives you extra media content relevent to stuff as you write. Point and click on relevent article from list – gets added to bottom of code. Quick links for Technorati etc.

Focus is not on readers with widgets but authors with tools – via Firefox extensions or IE plugins (if Blogger etc does not support plugins). Free. Basic functions are free, upgraded functions for a small fee.

3rd party developers – get full API docs, support, promotion, it’s all open sourced stuff. Should be available from mid-March 2008.

Session 3 – hAvatar
Cristiano Betta

hAvatar – what is it? Instead of using 3rd party to host avatar, use a photo from your own site’s hCard. Made by Alper.nl as a plugin for WordPress. Goes and fetches the photo from your own site’s hCard to show as humbnails on comments etc.

Problems – if there’s multiple hCards on the provided URL, which to use? Can hack to see if any of the hCards have the URL specified which you’ve just looked at. Web service available at

http://alper.nl/cgi-bin/OpenAvatar.py?openid=http://yoursite.com/pictureurl

More info in Cristiano’s blog post, or download the plugin here.

Session 4 – Microformats “State of the Nation”
Ben Ward and Frances Berrmian.

A quick session from Ben and Frances about the current state of play with Microformats:

• Google – maps has hCard in the info bubble and sidebar stuff.
• The common formats have been widely adopted. Newer ones are being tested in the wild.
• hRecipes – marking up food!
• hAudio – development for over a year. Means of marking up music references. Could be used by last.fm and Songbird.
• Google Social Graph API – indexes XFN and hCards – give them a URL and it brings back a list of your XFN contacts

Then we decided to head for a curry before I eventually ended up in an extremely orange room at the easyHotel Kensington for the night.

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:

1. Use Source Control software
2. Validate markup – XML, RSS, Atom and JSON
3. CSS validation
4. Broken Links! check them thoroughly – W3C Link checker
5. Performance – do you have metrics for measuring the performance – YSlow is a Firebug enhancement, httperf – use uptime checker too such as Pingdom
6. Maintainable Javascript – JSLint gives you good tips
7. Carry out Unit Testing
8. Carry out Functional tests
9. Asset Compilation
10. 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.

[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 16×16 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 16×16 icon, 32×32 and 64×64 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.

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 i
con]

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.

• 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.

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.

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!