In this part of his series on HTML5 and CSS3, author and expert looks at creating compelling web applications using the latest features in HTML5. You’ll learn how to play and script both audio and video and draw graphics using Canvas and SVG. You’ll also see how to store data client-side by using the web storage API and how to work with the two types of web storage: local storage and session storage. This course also explores HTML5 techniques and features for creating games in a browser. This workshop focuses on HTML5 techniques for creating web applications and games. The contents of this course include:
This chapter introduces the tools you’ll use in this course and provides a sneak preview of the features that will be covered. We’ll also look at some example applications that illustrate techniques for creating dynamic HTML5 user interfaces.
Audio and Video
The growth in handheld devices that do not support plug-in programs like Flash makes the topic of this chapter particularly crucial. You’ll learn how to embed audio and video content natively in a Web page, without the need for plug-ins to play the content.
Creating Graphics with <canvas>
Creating Graphics with SVG
Scalable Vector Graphics (SVG) elements offer a wide range of functionality in creating both static and dynamic graphics. This chapter demonstrates how easy and fun it is to create graphical content by using SVG.
Using the Web Storage API
This chapter describes how to store data client-side by using the web storage API. You’ll get an overview of the types of web storage, as well as detailed examples of common data storage situations and how to best handle them.
This chapter will show you how to use HTML5 techniques and features to create games to be played in a Web browser. You’ll be introduced to the key elements of an HTML5 game, learn some key data considerations, and get a behind-the-scenes tour of a real live game.
The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.