If you missed our heavily-attended O’Reilly Webcast on December 2nd, no worries, because the presentation is now available online. In addition, you’ll find a cliff notes version below:
1. HTML5 Markup isn’t such a big deal.
Check out the presentation to see some of the new markup included in HTML5. If you’re already up to speed on the markup in HTML4, most of the new markup will be fairly easy for you to get under your belt.
3. It’s not which standards document an API comes from that is important.
As we wrote Head First HTML5 Programming we commonly heard things like “Oh, geolocation is not part of the official HTML5 spec!” True enough. But it is an official spec of the W3C, and you know what, it doesn’t matter. Here is what matters: does every modern browser implement and support geolocation? That’s what we care about.
Sure, there is a time and place to be precise about specification relationships, but when we’re writing code, the important thing is “Will it be there for my users?”
4. How to know if you should embrace HTML5 now.
Check out the presentation for a simple flow chart to guide you. But for now it goes like this: If your users are using mobile devices, you should be thinking about using HTML5 today, as HTML5 browsers are common and heavily used on today’s smartphones and tablets.
If your audience is desktop based and uses largely modern browsers, you’re also good to go and should be looking into HTML5. However if your audience uses older versions of IE, you’ll need to be cautious.
In any case you always want to make sure you’re using feature detection (see below) and are up to date on which browsers support which features. Fortunately, there are a number of great resources for getting information about browser support for HTML5. A few of our favorites include:
- Wikipedia’s Comparison of Web Browsers page and Comparison of Layout Engines page.
- WHATWG’s Implementations in Web Browsers wiki page.
And of course, you should always test your web pages and applications in every browser you can!
5. Make it easy on yourself: graceful degradation and feature detection.
window properties exist, to using custom methods like the <video> element API’s
Needless to say, it’s important to check for new features so you can offer a fallback experience for users whose browsers don’t support that feature (e.g. an image or flash video instead of HTML5 video, an image or embedded Flash object instead of canvas, or even just a message indicating why the user might not be seeing what they expect and why). But with so many different ways of checking support for different features, you might be wondering if there isn’t a better way?
Check out the presentation for more concrete examples.
6. The <video> tag is the easy part; what about encodings?
If you’ve heard one thing about HTML5, it’s probably that it has a <video> element. And it’s true, by adding a <video> element to your HTML you can easily play video in your page without a plug-in. This is made possible by the folks writing the browsers, because they all agree on what the <video> element looks like. But when it comes to video formats, unfortunately, there is little agreement. Today, there are three different container formats, WebM, MP4 and Ogg, and which one you need depends on which browsers your users are using. If you’re delivering content to a narrow audience, say, users of the iPad, then your job is easy: you need only to deliver one format, MP4. If you want to support all popular browsers, then you need all three formats.
So, while getting a video into your web page is easier than ever before, making sure you’ve got a video that your users can actually play is still a bit of a mess.
7. The <canvas> is for more than just drawing.
The <canvas> element adds a native 2D drawing area to HTML. At first glance, you might think <canvas> is best for creating simple drawing programs using lines, arcs, and rectangles, but you’d be short-changing yourself if you stop there.
In fact, if you have a look at the canvas demos on the web, you’ll see that it’s being used for everything from basic drawings, to fully interactive drawing applications, creating graphs, making animations, building games, and even rendering 3D scenes.
One interesting use for <canvas> is video processing. You can take video frames from the video player, process the frame data, and then write the data into a canvas for display. For instance, you might take green screen capture video, and add a background in real-time using this technique. Similarly, you can use a canvas for double buffering image in games.
The transition and transform properties are two new properties in CSS3 that let you create interesting effects and animations. For instance, you can create a fading effect by transitioning the opacity of an element. You can manipulate elements with transform functions like rotate and scale, and when you combine a transform with a transition, create some pretty cool animations.
In the presentation, we show two simple examples of using transition and transform.
9. JSON is the new king of content formats.
In 2004 XML was going to rule the world, however things didn’t quite work out that way.
10. XHTML is dead, long live XHTML.
XHTML long ago lost its front-runner status as the language of the web, with the death of XHTML2 and the rise of HTML5, but despite rumors that doesn’t mean you can’t use XHTML; in fact we call it XHMTL5.
So, to write XHTML5 today, add a namespace and use proper XML syntax (see the presentation for an example).