Introducing HTML5 (2nd Edition)

HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain. More than ever, you need to get acquainted with the powerful new possibilities in web and application design. That’s why we’ve crafted a second edition of this book to help you stay on top of current developments. This book shows you how to start adapting the language now to realize its benefits on today’s browsers. It concentrates on the practical—the problems HTML5 can solve for you right away. By following the book’s hands-on HTML5 code examples you’ll learn about: - new semantics and structures to help your site become richer and more accessible - applying the most important JavaScript APIs that are already implemented - using and controlling native multimedia - how to build more intelligent web forms - implementing new storage options and web databases, including both WebSQL and IndexedDB - how geolocation works with HTML5 in both web and mobile applications And this new edition adds: - even more detail on canvas, geolocation and offline storage options - a peek around the corner for audio and video’s new element, subtitling formats, in-browser web conference - browser history controls to make applications more usable and bookmarkable - ways to use HTML5 now in older browsers Contents......Page 7 Introduction......Page 10 CHAPTER 1 Main Structure......Page 18 The ......Page 19 Using new HTML5 structural elements......Page 23 Styling HTML5 with CSS......Page 27 When to use the new HTML5 structural elements......Page 30 What’s the point?......Page 37 Summary......Page 38 CHAPTER 2 Text......Page 40 Structuring main content areas......Page 41 Adding blog posts and comments......Page 47 Working with HTML5 outlines......Page 48 Understanding WAI-ARIA......Page 66 Even more new structures!......Page 70 Redefined elements......Page 82 Global attributes......Page 87 Removed attributes......Page 92 Features not covered in this book......Page 94 Summary......Page 95 CHAPTER 3 Forms......Page 96 New input types......Page 97 New attributes......Page 104 , elements......Page 111 Putting all this together......Page 112 Backwards compatibility with legacy browsers......Page 116 Styling new form fields and error messages......Page 117 Overriding browser defaults......Page 119 Using JavaScript for DIY validation......Page 121 Avoiding validation......Page 122 Summary......Page 125 CHAPTER 4 Video and Audio......Page 126 Native multimedia: why, what, and how?......Page 127 Codecs—the horror, the horror......Page 134 Rolling custom controls......Page 140 Multimedia accessibility......Page 153 Synchronising media tracks......Page 156 Summary......Page 159 CHAPTER 5 Canvas......Page 160 Canvas basics......Page 163 Drawing paths......Page 167 Using transformers: pixels in disguise......Page 170 Capturing images......Page 172 Pushing pixels......Page 176 Animating your canvas paintings......Page 180 Summary......Page 185 CHAPTER 6 Data Storage......Page 186 Storage options......Page 187 Web Storage......Page 189 Web SQL Database......Page 201 IndexedDB......Page 212 Summary......Page 222 CHAPTER 7 Offline......Page 224 Pulling the plug: going offline......Page 225 The cache manifest......Page 226 Network and fallback in detail......Page 229 The browser-server process......Page 231 applicationCache......Page 234 Debugging tips......Page 236 Using the manifest to detect connectivity......Page 238 Killing the cache......Page 239 Summary......Page 240 CHAPTER 8 Drag and Drop......Page 242 Getting into drag......Page 243 Interoperability of dragged data......Page 247 How to drag any element......Page 249 Adding custom drag icons......Page 250 Accessibility......Page 251 Summary......Page 253 CHAPTER 9 Geolocation......Page 254 Sticking a pin in your user......Page 255 API methods......Page 257 Summary......Page 265 CHAPTER 10 Messaging and Workers......Page 266 Chit chat with the Messaging API......Page 267 Threading using Web Workers......Page 269 Summary......Page 281 CHAPTER 11 Real Time......Page 282 WebSockets: working with streaming data......Page 283 Server-Sent Events......Page 287 Summary......Page 291 CHAPTER 12 Polyfilling: Patching Old Browsers to Support HTML5 Today......Page 292 Introducing polyfills......Page 293 Feature detection......Page 294 Detecting properties......Page 295 Where to find polyfills......Page 298 A working example with Modernizr......Page 299 Summary......Page 301 And finally.........Page 302 B......Page 303 D......Page 304 F......Page 305 I......Page 306 K......Page 307 M......Page 308 O......Page 309 S......Page 310 V......Page 311 X-Z......Page 312 Contents 7 Introduction 10 CHAPTER 1 Main Structure 18 The 19 Using new HTML5 structural elements 23 Styling HTML5 with CSS 27 When to use the new HTML5 structural elements 30 What’s the point? 37 Summary 38 CHAPTER 2 Text 40 Structuring main content areas 41 Adding blog posts and comments 47 Working with HTML5 outlines 48 Understanding WAI-ARIA 66 Even more new structures! 70 Redefined elements 82 Global attributes 87 Removed attributes 92 Features not covered in this book 94 Summary 95 CHAPTER 3 Forms 96 We (Omitted) HTML, and now it (Omitted)s us back 97 New input types 97 New attributes 104 , elements 111 Putting all this together 112 Backwards compatibility with legacy browsers 116 Styling new form fields and error messages 117 Overriding browser defaults 119 Using JavaScript for DIY validation 121 Avoiding validation 122 Summary 125 CHAPTER 4 Video and Audio 126 Native multimedia: why, what, and how? 127 Codecs—the horror, the horror 134 Rolling custom controls 140 Multimedia accessibility 153 Synchronising media tracks 156 Summary 159 CHAPTER 5 Canvas 160 Canvas basics 163 Drawing paths 167 Using transformers: pixels in disguise 170 Capturing images 172 Pushing pixels 176 Animating your canvas paintings 180 Summary 185 CHAPTER 6 Data Storage 186 Storage options 187 Web Storage 189 Web SQL Database 201 IndexedDB 212 Summary 222 CHAPTER 7 Offline 224 Pulling the plug: going offline 225 The cache manifest 226 Network and fallback in detail 229 How to serve the manifest 231 The browser-server process 231 applicationCache 234 Debugging tips 236 Using the manifest to detect connectivity 238 Killing the cache 239 Summary 240 CHAPTER 8 Drag and Drop 242 Getting into drag 243 Interoperability of dragged data 247 How to drag any element 249 Adding custom drag icons 250 Accessibility 251 Summary 253 CHAPTER 9 Geolocation 254 Sticking a pin in your user 255 API methods 257 Summary 265 CHAPTER 10 Messaging and Workers 266 Chit chat with the Messaging API 267 Threading using Web Workers 269 Summary 281 CHAPTER 11 Real Time 282 WebSockets: working with streaming data 283 Server-Sent Events 287 Summary 291 CHAPTER 12 Polyfilling: Patching Old Browsers to Support HTML5 Today 292 Introducing polyfills 293 Feature detection 294 Detecting properties 295 The undetectables 298 Where to find polyfills 298 A working example with Modernizr 299 Summary 301 And finally... 302 Index 303 A 303 B 303 C 304 D 304 E 305 F 305 G 306 H 306 I 306 J 307 K 307 L 308 M 308 N 309 O 309 P 310 Q 310 R 310 S 310 T 311 U 311 V 311 W 312 X-Z 312