There are many good reasons to learn HTML5. One really great one is the <canvas> element. This element gives you the ability to add graphics and animation to your page without any plugins. If you’re at all interested in HTML5, you’ve very likely seen some compelling canvas demos. And once you know canvas, you can make your very own winter scenes for your browser. Then you can impress your whole family and keep the conversation around the holiday dinner table much more interesting. What’s not to like about that? (And yes, this web app will work on your iPad so you can pass it around easily for demos.)
In this post, I’ll show you how to create a falling snowflake winter scene using HTML5′s <canvas> element and the canvas API. This little web app will display a canvas that fills the browser window. When you click on the canvas, a snowflake image is added to the canvas, which then proceeds to fall to the bottom of the window. When it reaches the bottom, it reappears at the top of the window, and continues to fall.
Eric and I will be doing a 60 minute webcast about our new book, Head First HTML5 Programming, on December 2, 2011. It’s free to join; just sign up to attend. If you’re curious about the kinds of topics we cover in Head First HTML5 Programming, or you just want to know more about HTML5, this is a good webcast for you. Hope to see you there, online!
10 things every web developer, designer (and manager) should know about HTML5
Is HTML5 just an incremental update to HTML4.01, or is it a new, revolutionary technology that is gong to change the web? Well, it’s actually a bit of both, and in this webcast we’ll give you a 45 minute jumpstart on this new technology and everything you need to know when you walk into your next staff meeting and the subject comes up. You can expect to leave this webcast with the answers to questions like:
- Do I need to rewrite my HTML4.01 pages to be HTML5 compliant?
- Is web video as easy as it looks with the new <video> element?
- What are “web workers” anyway?
Today, I received a question from Eva, a reader of Head First HTML5 Programming. Eva asks about how to create a clickable list of videos, so that if you click the name of a video in the menu it will play or pause.
In Chapter 8 of Head First HTML5 Programming, we show you how to create a custom video player with a choice of two videos, as well as play and pause buttons (along with various other buttons to add video effects). Here’s the custom video player you build in that chapter:
While you’ll learn everything you need to know to create a video selection menu with the behavior that Eva asks about as you build the custom video player in Chapter 8, I thought I’d also show you how you could add a plain menu of videos to the other example in Chapter 8, Webville TV. I’ve kept it plain and simple so you can easily see exactly how it works.
As you can see, I’ve added a simple menu bar below the TV, with the names of the three videos we used in that example. When you load the page, the Preroll video automatically loads and begins to play. I’ve left the controls in the browser video player, but you can also control playback by clicking on the name of the video. Clicking on a different video loads and plays that video. This is a very basic interface, and easy to do with the video API.
Vitamin T has created this wonderful poster of the history of web standards. As their blog post so rightly points out, without web standards, we might have to use different browsers to access different web sites, and mobile web browsing would be essentially impossible. While we web developers know that web standards and the browsers that implement them still have a long way to go, we’re in pretty good shape compared to where we could be, and compared to the “browser wars” of the late 90′s. So enjoy the poster (full size) and give a little thank you to all those dedicated people who create the standards.
Thanks Phil for your great question!