Join Lee Brimelow for an in-depth discussion in this video What is HTML5?, part of HTML5 for Flash Developers.
So in our case here, we are going to talk about HTML5 as that grouping of new technologies which allow you to do really rich content directly in the browser. Now I have this little site pulled up from the W3, it's a w3.org/html/logo and they have a nice little thing that talks about what some of the new features are in HTML5. So if we look at the first one; it's Semantics, and this is essentially a set of new tags which make your HTML code more meaningful.
I mean we've always done web development with tons and tons of divs; you would use a div for everything. Well now we have new tags, like a header tag, a nav tag, a footer tag, which makes HTML a lot more meaningful. The other is Offline & Storage. So this actually allows you to save to local databases, as well as caching data offline, so that you can create web applications that actually run without a connection.
And this is really important, especially on mobile, where you can create an HTML5 experience and still be able to reach and use that experience even when you don't have network connectivity. Device Access is another big one. This includes things like the Geolocation API for making your applications location aware, and also to be able to access different sensors on the device. Connectivity; this is the ability to do real-time applications using Web Sockets which are really important for a lot of applications.
Multimedia is an area that we're going to be specifically focusing on here, and this is the ability now to incorporate audio and video directly into the browser without needing a plugin like Flash. The other area we are going to focus a lot on is 3D, Graphics & Effects, and this is using some new tags, particularly the Canvas tag, which allow you to do really impressive visual effects, and is very similar to the way in which you used to do those things in Flash.
Performance & Integration; this is essentially allowing you to build more performance robust applications. This includes things like Web Workers which allow you to actually do multithreading now directly in the browser. And lastly we have CSS3. This is not technically part of the HTML5 specification, but it's made in conjunction with it to allow you to do some really stunning visual effects directly in CSS3. So this is kind of an overview of what's new in HTML5.
Let's just look at a few examples. So if we want to look at an example of an excellent game made directly using web technologies, we can look at Cut The Rope. If you go to cuttherope.ie, I can actually play this for a second here, And we go to one of these levels, and this is typically the thing that you would see built in Flash, but again, this is all built using web technologies. So I am sure you're familiar with playing this game, it's a very popular game, and you can see that the performance of this is actually really, really nice, and again, we didn't have to use a plugin to create this.
I can open up this book and we can see we have this nice page curl effect here, where I can actually click through and turn the pages of this book. Now if you're coming from the Flash world, you say, okay, well, we did that five years ago. And that's true, but again, the new thing here is that we're able to do this now directly in the browser, and coming from a Flash background, you're particularly well suited to do this type of work now directly in the browser. So now that we've gone over what the major new features are in HTML5 and looked at a few examples, we can now get started and actually utilize some of these technologies to create some really cool content.
- Understanding HTML5 browser support
- Creating class files and animation loops
- Comparing Canvas and BitmapData
- Drawing dynamic graphics
- Exploring DOM animation
- Understanding CSS3 design properties
- Using CSS animations and transforms
- Understanding WebGL
- Using Adobe Edge and the CreateJS library