Why learn HTML5 for the holidays?
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.
Coming up: Webcast about HTML5 Programming, Dec 2, 2011
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?
- Do I need to know JavaScript to use HTML5?
- What are “web workers” anyway?
Tutorial: Video Selection Menu for Webville TV
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.
A History of Web Standards in poster form
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.
Can I learn everything about JavaScript from Head First HTML5 Programming?
Today, I received a question from Phil about JavaScript. Phil is just getting started with JavaScript and wants to know if he can learn JavaScript from Head First HTML5 Programming, or if he needs another book.
Eric and I wrote the JavaScript chapters in Head First HTML5 Programming for those who have some experience with scripting languages already, as a way to get you up to speed on JavaScript quickly. It’s just enough information so that you can make it through the rest of the book, and does not comprehensively teach JavaScript or programming. However, you will learn the fundamentals, and then get an opportunity to practice those fundamentals as you use them with HTML5 in the rest of the book, so it’s a great way to get started. And we’ve received feedback from some newbie programmers who have found the JavaScript material useful and were able to learn from it, even without a background in programming.
If your aim is to not just get through the book and learn HTML5, but to master JavaScript to some level, then we recommend (as we do in the book) seeking out a few other resources to help with JavaScript. One gentle introduction that I’ve seen is Eloquent JavaScript. For a complete guide and reference, we recommend the JavaScript Definitive Guide.
Eric and I plan to create a set of JavaScript learning resources as our next big project. And, I’ll be posting regularly on JavaScript topics on my blog, so keep checking back for more JavaScript goodies.
Thanks Phil for your great question!
Head First HTML and CSS 
Head First Design Patterns
leave a comment