2012 Jolt Productivity Award winner!
Using HTML5, web developers can create standards-based browser applications with extraordinary richness and power, incorporating everything from drag-and-drop to native audio and video–all without any third-party plug-ins. Simply put, every web developer needs to master HTML5–and the sooner you do so, the greater advantage you’ll have. HTML5 Developer’s Cookbook provides all the expert advice and proven code you need to start building production-quality HTML5 applications right now.
Authors Chuck Hudson and Tom Leadbetter present tested, modular recipes at beginner, intermediate, and advanced levels. You’ll learn exactly how to deliver state-of-the-art user experiences by integrating HTML5’s new and enhanced elements with CSS3, multimedia, and JavaScript APIs. Reflecting current standards, this book prioritizes HTML5 features with substantial browser support and identifies the level of browser support for each feature discussed. Coverage includes
- Understanding and using HTML5’s new structural elements
- Using grouping, text-level, and redefined semantics
- Managing browser-handling in HTML5
- Leveraging new CSS3 layout and style techniques
- Maximizing interactivity with HTML5 Web Forms
- Embedding audio and video with HTML5
- Drawing with the canvas
- Controlling browser histories
- Integrating location awareness with the Geolocation API
- Implementing client side storage
- Working with local files
- Managing communication and threading
- Optimizing the HTML5 browser experience
- Integrating device data
Turn to HTML5 Developer’s Cookbook for expert answers, real solutions, and the code required to implement them. It’s all you need to jumpstart any HTML5 project and create rich, high-value web applications your users will love.
Table of Contents:
Introduction xix Acknowledgments xxvii
About the Authors xxix
Chapter 1: New Structural Elements in HTML5 1
BEGINNER RECIPE: Building an HTML5 Starter Document 2
Where Do All the New Elements Come From? 4
BEGINNER RECIPE: Using the header Element to Create a Site Header 5
BEGINNER RECIPE: Using the hgroup Element to Group Headings 7
BEGINNER RECIPE: Creating Navigation with the nav Element 8
INTERMEDIATE RECIPE: Using the New article Element 11
INTERMEDIATE RECIPE: Grouping Content with the section Element 12
BEGINNER RECIPE: Creating a Sidebar with the aside Element 15
BEGINNER RECIPE: Using the footer Element 17
INTERMEDIATE RECIPE: Using the HTML5 Outliner to Ensure the Correct Structure 19
ADVANCED RECIPE: Using All the New Elements to Build a News Page 21
ADVANCED RECIPE: Using All the New Elements to Build a Search Results Page 25
Summary 30
Chapter 2: Grouping, Text-Level, and Redefined Semantics 31
BEGINNER RECIPE: Marking Up Figures and Captions with the figure and figcaption Elements 31
BEGINNER RECIPE: Marking Up the Date and Time with the time Element 34
BEGINNER RECIPE: Making a Native Toggle Widget with the details Element 35
BEGINNER RECIPE: Using the address Element for Contact Information 37
BEGINNER RECIPE: Highlighting Text with the mark Element 38
BEGINNER RECIPE: Using the s Element to Show Inaccurate or Irrelevant Content 39
Changes to Existing Elements 39
BEGINNER RECIPE: Wrapping Links Around Elements 47
INTERMEDIATE RECIPE: Adding Semantic Information with Microdata 47
INTERMEDIATE RECIPE: Using WAI-ARIA with HTML5 49
ADVANCED RECIPE: Marking Up an Article Page with Comments 51
Summary 54
Chapter 3: Browser Handling in HTML5 55
BEGINNER RECIPE: Dealing with Internet Explorer 55
Boilerplates 57
BEGINNER RECIPE: Testing for HTML5 Features 57
INTERMEDIATE RECIPE: Leveraging jQuery to Replace a Calendar 59
INTERMEDIATE RECIPE: Using Modernizr to Detect Features 62
Polyfilling 66
Useful HTML5 Verification Sites 67
Summary 67
Chapter 4: New Layout 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
About the Author :
Chuck Hudson has developed mobile web and mobile solutions since the 1990s. A successful “techpreneur” and long-time geek-in-training, he is a certified PHP programmer and PayPal developer. He teaches web programming, mobile technology, and entrepreneurship throughout the Boston and Atlanta regions. In 2008, he received the eBay Star Developer award for the first iPhone mobile web and native apps.
Tom Leadbetter is a web designer and developer based in Liverpool, England. He has been working with HTML5 since early 2009 and blogs about it at HTML5Doctor.com.
