HTML5 Developer's Cookbook

and Style Techniques with CSS3 69 INTERMEDIATE RECIPE: Creating a Responsive Design with CSS3 Media Queries 69 BEGINNER RECIPE: Using Custom Fonts with @font-face 77 INTERMEDIATE RECIPE: Making Buttons with CSS Gradients and Multiple Backgrounds 80 INTERMEDIATE RECIPE: Enhancing a Site with Transformations and Transitions 84 ADVANCED RECIPE: Creating Animations with CSS 89 Summary 94 Chapter 5: HTML5 Web Forms 95 Validation 95 HTML 4 Input Types 95 BEGINNER RECIPE: Creating a Form to Collect Contact Information 97 BEGINNER RECIPE: Creating a Search Form with input type="search" 101 BEGINNER RECIPE: Creating Calendar and Time Controls 102 BEGINNER RECIPE: Creating a Number Picker 105 BEGINNER RECIPE: Creating a Slider (Without the Need for JavaScript) 106 BEGINNER RECIPE: Creating a Color Picker 107 BEGINNER RECIPE: Displaying Results with the output Element 108 BEGINNER RECIPE: Using Form Placeholder Text 109 BEGINNER RECIPE: Creating an Autocomplete Feature with list and datalist 110 BEGINNER RECIPE: Tracking the Completion of a Task with the progress Element 111 BEGINNER RECIPE: Measuring with the meter Element 112 BEGINNER RECIPE: Jumping to a form Element When the Page Loads 114 BEGINNER RECIPE: Allowing Multiple Entries 115 BEGINNER RECIPE: Basic Validation with the required Attribute 116 INTERMEDIATE RECIPE: Writing Your Own Validation Rule 117 BEGINNER RECIPE: Limiting User Input 118 INTERMEDIATE RECIPE: Customizing and Styling the Form 119 Error Messages 121 ADVANCED RECIPE: Putting It All Together to Make a Sign-Up Form 121 Summary 125 Chapter 6: Drawing with Canvas 127 Canvas Overview 127 BEGINNER RECIPE: Laying a Grid on the Canvas 130 Canvas Tools 134 BEGINNER RECIPE: Making Simple Shapes and Lines 134 INTERMEDIATE RECIPE: Drawing Polygons with a Path 139 INTERMEDIATE RECIPE: Drawing Arcs and Circles 143 BEGINNER RECIPE: Adding Text 144 BEGINNER RECIPE: Drawing an Image 145 INTERMEDIATE RECIPE: Cropping an Image 146 INTERMEDIATE RECIPE: Animating a Sprite Map 147 Canvas Transformations 150 ADVANCED RECIPE: Animating an Image 151 ADVANCED RECIPE: Animating a Vertical Bar Chart 155 Summary 162 Chapter 7: Embedding Video with HTML5 163 BEGINNER RECIPE: Including Video with the video Element 163 INTERMEDIATE RECIPE: Enabling Video for All Browsers 166 INTERMEDIATE RECIPE: Creating a Video with Subtitles and Captions 173 The Media API 177 ADVANCED RECIPE: Making Your Own Custom Controls 178 Summary 186 Chapter 8: Embedding Audio with HTML5 187 BEGINNER RECIPE: Including Audio with the audio Element 187 INTERMEDIATE RECIPE: Enabling Audio for All Browsers 188 New Audio Attributes 190 The Media API 192 INTERMEDIATE RECIPE: Creating a Beat Mixer 193 ADVANCED RECIPE: Adding Streaming Radio 197 Summary 206 Chapter 9: Changing Browser History 207 History Basics 207 BEGINNER RECIPE: Adding to History with pushState 208 BEGINNER RECIPE: Creating an Image Viewer 211 INTERMEDIATE RECIPE: Popping State in the Image Viewer 214 BEGINNER RECIPE: Changing History with replaceState 216 INTERMEDIATE RECIPE: Changing the Page History 218 ADVANCED RECIPE: Using Advanced State Data Objects to Pass Information Across Pages 221 INTERMEDIATE RECIPE: Testing History Security 225 Helpful Libraries 228 Summary 228 Chapter 10: Location Awareness with the Geolocation API 231 Geolocation Overview 231 BEGINNER RECIPE: Determining Your Location with a Simple getCurrentPosition 233 INTERMEDIATE RECIPE: Mapping a Location with getCurrentPosition 237 INTERMEDIATE RECIPE: Determining Distance with PositionOptions 243 ADVANCED RECIPE: Following a Moving Location with watchPosition 250 Summary 257 Chapter 11: Client-Side Storage 259 Client-Side Storage Overview 259 BEGINNER RECIPE: Getting and Setting Session Storage 263 BEGINNER RECIPE: Styling from Session Storage 266 INTERMEDIATE RECIPE: Storing Forms with Local Storage 271 ADVANCED RECIPE: Catching Events in Local Storage 275 Web SQL Database API 283 ADVANCED RECIPE: Using a Web Database for a Grocery List 286 Summary 295 Chapter 12: Communication and Threading 297 WebSocket API Overview 297 BEGINNER RECIPE: Talking Through Web Sockets 299 Threading Through Web Workers 302 BEGINNER RECIPE: Creating a Web Worker 304 INTERMEDIATE RECIPE: Adding Two-Way Communication 308 ADVANCED RECIPE: Leveraging a Shared Web Worker 311 Summary 318 Chapter 13: Browser Experience in HTML5 319 Drag and Drop API 319 BEGINNER RECIPE: Dragging and Dropping Across divs 321 ADVANCED RECIPE: Leveraging Events and dataTransfer 325 Application Cache and API 334 BEGINNER RECIPE: Creating a Manifest File 335 BEGINNER RECIPE: Using Web Pages Offline 337 Application Cache API 340 Notification API 341 BEGINNER RECIPE: Displaying a Simple Notification 344 ADVANCED RECIPE: Creating a Tweet Notification Page 348 Summary 357 Chapter 14: Working with Local Files 359 File API Overview 359 BEGINNER RECIPE: Getting File Attributes 360 BEGINNER RECIPE: Processing Multiple Files with Drag and Drop 362 The FileReader Interface 367 INTERMEDIATE RECIPE: Previewing Images Through readAsDataURL 368 ADVANCED RECIPE: Parsing a CSV File with readAsText 373 File API Extended Specifications 381 ADVANCED RECIPE: Creating a Local File 382 Summary 388 Chapter 15: Integrating Device Data 389 Brief Device APIs History 389 Contacts API 391 BEGINNER RECIPE: Retrieving All Contacts and Mobile Numbers 393 Messaging API 396 Network Information API 397 Battery Status Events 398 HTML Media Capture 398 INTERMEDIATE RECIPE: Capturing Pictures with File Input 399 Device Orientation and Motion Events 403 INTERMEDIATE RECIPE: Creating a Bubble Level 404 Summary 409 Recipes 411 Index 415