Tag: web design

Getting Started with HTML5

I’m working on a project now were we’ve decided to go with as pure HTML5 as posible, and it’s a breath of fresh air. Things work more or less how they should, and Internet Explorer is even playing along, with a little help. Getting started was a bit of a trick, though, as it can be hard to find information on how HTML5 works without diving into specification documents, which is never fun, or easy, (if you don’t want to read the story, skip straight to the resources).

I hadn’t been following the development of HTML5 with more than a passing interest. I figured that when it was ready, then I would start using it. I also understood that there were different parts that may reach completion at different times, and was keeping my eye open for some sort of “completion” signal. 2009’s 24 Ways was that signal for me. There were several articles on using HTML5 features along with their CSS3 counterparts, and enough evidence that browser support is there to start my investigation.

Here’s the deal: Basic HTML5 support is pretty good in webkit-based browsers, alright, (read usable), in Gecko, and kind of lacking in Internet Explorer. However, if you can rely on Javascript being present, (which I can in my project), there’s an HTML5 Shiv Javascript by Remy Sharp that makes it so that you can style HTML5 in Internet Explorer. Add it using a conditional comment and you’re good to go.

So, we have useable cross-browser support, but where do we turn to learn about which tags are in, which are out, the correct doctype and mime-type, and all that? We could read the specification, (and we will have to read a bit, at least), but it would be nice if there was an introduction to HTML5 somewhere. It turns out that Robert Nyman has written an Introduction to HTML5. It’s detailed enough to get you started, but not so detailed that you get lost, (like the spec), and if you’re looking to be convinced of the value of HTML5, check out HTML5: Tool of Satan, or Yule of Santa?, Have a Field Day with HTML5 Forms, and Breaking out the Edges of the Browser from 24 Ways 2009.

Once you dive a little deeper you’ll find that there are elements of HTML5 that you need more in-depth information for, so it’s time to turn to the spec. However, there are 2 groups, (W3C and WHATWG), working on HTML5, and therefore 2 spec documents, (fun!). Fortunately, the two groups have the same editor, so they’re more or less working on the same thing. I find the WHATWG HTML5 document easier to read, but if you prefer the W3C version, go nuts.

Finally, the whole content-type debate that’s been going on for what seems like centuries is still a mess. In HTML5 you’re supposed to include a Document Type Definition and there should be no namespaces on the HTML element if you’re serving as text/html, and you’re supposed to serve in application/xhtml+xml if you want to use namespaces, or force XML validation, or anything like that. The problem is that Internet Explorer really doesn’t like application/xhtml+xml, (it shows the raw XML document), so if you need a namespace for some reason, (for example, you want to use Facebook Connect on the site), you can’t serve valid markup.

So, that’s it. HTML5 has arrived, or at least parts of it. If you can rely on Javascript being present, or rely on IE users not using your web app, you can go ahead and start using it. Here’s a quick recap of the resources:

(Failing to) Find the Olympic Flame Online

Yesterday, I went out on Rue St-Denis to see the Olympic Flame pass by for the second time in my life, and I hope to see it again at some point. I also hope that next time it will be much easier to find out where to go to find the flame.

The 106-day torch relay for the 2010 Olympic games in Vancouver is a big deal here in Canada. It is on the news every day and is travelling 45,000 kilometres making a great loop around the country. Right now, with the games approaching but not right on our doorstep, the torch relay is the most important part of the olympics to me, probably to many Canadians. However, when I went looking on vancouver2010.com to see where I could find the torch I was thoroughly confused. It is easy to find out about every sport that will be played in 63 days time, but learn about the torch relay happening right now I had to dive deep into a pop-down menu, then take a guess at which icon would lead me to a map or description of the torch route.

These are the choices I had:

Which icon gets us to a map of the torch route?
Which icon gets us to a map of the torch route?

And this is the right choice:

Apparently this means "Map"
Apparently this means "Map"

The map should have been simple to read, after all, it’s a map with a route drawn on it. Just zoom in to see what’s going on near you. Well, good luck, when you zoom in too much the route disappears! It turns out that you have to choose your “community” then you can see a detailed map of what’s happening in that community. I’m not sure why this is, and it’s quite confusing. Once you’ve got your community selected, you may have to select different routes in your community, (the relay is less like a relay around the country and more like a travelling roadshow with some stops where people get out and run than I had thought), and you can see what time the flame will be in different places, in the HTC timezone, whatever that is.

I hear the games are over budget, but it would be a wise investment to put a direct link on the vancouver2010.com homepage to the map. There are lots of links to videos of previous days, and in truth they do sometimes link the Latest News block on the page to the map, but for me, when I went to the site, I was looking for a more permanent link to the torch relay information. After all, the torch relay is on for 6 times as many days as the games themselves.

I was lucky, I found where the torch would be, and was there at the right time, (for me HTC was Eastern Standard Time, but I don’t know if it is everywhere, maybe it just means Local Time). I hope everyone else who is looking for the map can find it.

In case you’re having trouble, here’s a link to the map.

And here is the torch, (I didn’t have a camera with me, so this is from Flickr:
The Torch in Montreal