If you haven’t encountered Nibbler before, Nibbler is a free-to-use website quality checker.  It’s developed and maintained by Silktide, and is a tool for checking up to 5 pages of a website against 20 different quality checks – from Social Media to W3C compliance, Alternative text to Semantic HTML.

You can test any website – be it your own or a competitors’ website, and you’ll get the results from of a wide range of tests returned to you with both a grade, from 0.0  to a perfect 10, along with some background information and suggestions for improvement. Pretty neat, eh?

See how well Psyked.co.uk does on Nibbler.

So, it turns out that the good old Facebook ‘Like’ buttons and Google’s ‘Plus one’ buttons don’t behave well on HTML5 format websites. That’s because they make use of XHTML and namespaces. Sure, mixing XHTML and HTML5 together on a single page works just fine for the end-user, but when it comes to validating your pages on the W3C, it just won’t work.

What’s the ‘solution’? Why, hacking it, of course. Take the code for those elements out of the source, and embed it with JavaScript instead.  And it doesn’t have to be complex either – you can use inline JavaScript code.

Wrap your button embed HTML in a <script> tag, add a CDATA block, and encompass it in a document.write() function, and you’re done.

So this code:

Becomes this code:

Of course, this being a hack, I can’t really speak for this being good practice, but it works. Evaluating the pitfalls will come later, I’m sure!

http://x264dev.multimedia.cx/?p=292

First things first – what features actually make up HTML5, and how widely supported are they?
Turns out, there’s already a site which tracks the features and their browser support:

http://www.findmebyip.com/litmus

HTML5 is made up of a lot of things – storage, offline modes, video, audio, dynamic drawing, clever forms.  Make sense I guess – HTML5 is a cherry-picked set of features we can implement already with plugins and javascript.  Reading through the checklist it’s clear that there’s a couple of hands down winners on the adoption front, and total losers too.  None of them implement everything just yet though.

CSS 3 is the most kick-ass part of the specification in my opinion – finally bringing things like native rounded corners, drop shadows and advanced dynamic graphics to the web.  The rest of it is all ‘meh’ as it currently exists in acceptable formats.

Is it practical? No.

“Oh Internet Explorer, how your legacy haunts us.”
If the browser adoption statistics are to be believed – even the most pessimistic ones – Internet Explorer’s market share is not something to take lightly.  You can’t ignore 40-60% of your users because they use a browser that isn’t up to the same standard as its competitors.  I’d dearly like too, but I can’t.  Which means everything has to be developed without HTML5 & CSS 3, either using browser targeting and using multiple styles and coding options, or developed to the lowest common denominator – IE.

You might say that things will eventually catch up – but considering IE6 is still at 10% market share, you’re always going to be developing something for IE6, or IE7, or IE8.  None of which have very much HTML5 support at all.  IE9 isn’t going to be available for users on Windows XP, which means the best they’ll ever get is IE8, which means… argh, this really isn’t going to work.

If we’re ever going to accept HTML5 as a development language for the web we’re just going to have to adopt a more fractured development style than we use right now – develop twice, deploy once (with browser targeting).  HTML5 is effectively never coming to Internet Explorer, and if it does; by the time it’s arrived it’ll be too late for the party.

From the users’ point of view, your Calendar event appears as every other hyperlink does in your html pages – but when they click on the link, instead of being taken to a new page, Outlook opens up an ‘add event’ just as if they’d clicked on a meeting request (in Outlook).

From the developers’ point of view, once you have your server configured correctly, it’s just a case of creating and linking to an .ics file instead of a .htm file – at which point the client’s email software should take over.

Does it work for me?

I don’t know – try clicking on this link.  If MIME types are incorrectly set you’ll probably see a plain text file, and if you don’t have an application setup that’s compatable with iCalendar events, you’ll probably just be asked to save the file to your hard drive.

How do you create a Calendar event then?

First up, you need to sort out your MIME-types.  I’m not going into that because it can get a little too complex, but just make sure you have the file extension .ics registered under the MIME-type “text/calendar” – if you’re lucky it might already be setup!

Next, you need to make the actual file, which is simple in one sense and complex in another.  iCalendar files are plain text files, so you just need notepad or something to create them, but they do have a very specific format. Wikipedia has a very simple example, so we’re going to use that as a basis for our sample file.

So lets create a working example – and we’ll use the Flash on the Beach conference as a basis.

This is the example on Wikipedia;

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
DTSTART:19970714T170000Z
DTEND:19970715T035959Z
SUMMARY:Bastille Day Party
END:VEVENT
END:VCALENDAR

The framework we need to keep is pretty self explanitory – there’s elements like the beginning and ending of portions of the file, and a basic framework for the dates and summary.  According to the RFC iCalendar specification, VERSION and PRODID are both required, so we’ll leave those in also – which just leaves us with some customizing to do on the dates and summary information;

BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//hacksw/handcal//NONSGML v1.0//EN
BEGIN:VEVENT
DTSTART:20080928T000000Z
DTEND:20081001T000000Z
SUMMARY:Flash on the Beach 08 Conference
DESCRIPTION:Flash on the Beach 08 is here again!
Wow, Flash on the Beach is in it's third year already! FOTB06 was awesome,
FOTB07 was even better, and we are now pulling out all the stops to make
FOTB08 the best yet! We have the best talent around speaking, new speakers
to FOTB, the Inspired Sessions, workshops, parties and more! It's gonna rock!
END:VEVENT
END:VCALENDAR

You can see that there’s practically no special formatting for the actual content – just plain text.  (Which is a shock after working with XML and CDATA for so long.)  And date formatting is just a condensed string – 1/11/2008, 15:30:00 just becomes 20081101T153000Z.

Whack that into notepad, change the file extension to .ics and you’re away!

That’s it?

That really is it. It’s an incredibly easy thing to customize – I’d really recommend you skim through the spec for iCalendar if you’re thinking of doing more clever things – there’s formats and properties that control priorities, due dates, durations, status, alarms, journal entries – practically everything that Outlook does (beyond emails) can be done with the iCalendar format.

Resources

• iCalendar information on Wikipedia
• iCalendar technical specification