Table of Contents
Preface ............................................................................................ xiv
Part I: Building Web Pages and Applications with the Open Web Standard
HOUR 1: Improving Mobile Web Application Development with HTML5 1 Understanding How We Got to HTML5 .................................................... 1 Learning What’s Different with HTML5.................................................... 3 Defining Web Applications .................................................................... 4 Using the Open Web Standard................................................................ 4 Using HTML5 with iOS and Android Devices ............................................ 6 Writing Mobile Websites ........................................................................ 7 Summary .......................................................................................... 11 Q&A ................................................................................................ 12 Workshop .......................................................................................... 13
HOUR 2: New HTML5 Tags and Attributes with Mobile Development 15 The New HTML5 Tags.......................................................................... 15 The New HTML5 Attributes .................................................................. 24 Changes to HTML 4 Tags and Attributes ................................................ 25 Changes to HTML Syntax in HTML5...................................................... 27 Mobile Support of HTML5 Tags and Attributes ........................................ 28 Benefits of HTML5 for Mobile Web Development...................................... 29 Summary .......................................................................................... 30 Q&A ................................................................................................ 30 Workshop .......................................................................................... 31
HOUR 3: Styling Mobile Pages with CSS3 33 Quick Introduction to CSS .................................................................... 33 What CSS3 Adds to the Party................................................................ 42 Using CSS3 on Mobile Devices .............................................................. 46
Summary .......................................................................................... 46 Q&A ................................................................................................ 46 Workshop .......................................................................................... 47
HOUR 4: Detecting Mobile Devices and HTML5 Support 49 Choosing What HTML5 Elements to Use ................................................ 50 Android and iOS Support for HTML5 .................................................... 50 Detecting HTML5 Functions.................................................................. 52 Degrading Gracefully .......................................................................... 58 Using CSS3 Media Queries to Detect Mobile Browsers................................ 60 Testing Your Applications .................................................................... 63 Summary .......................................................................................... 64 Q&A ................................................................................................ 64 Workshop .......................................................................................... 65
HOUR 5: JavaScript and HTML5 Web Applications 67 What is JavaScript? ............................................................................ 67 What is jQuery? ................................................................................ 72 Using jQuery Mobile .......................................................................... 79 Summary .......................................................................................... 82 Q&A ................................................................................................ 82 Workshop .......................................................................................... 83
HOUR 6: Building a Mobile Web Application 85 Building a Site that Works on All Devices .............................................. 85 Deciding on What Type of Application You Want .................................... 86 Building the Application in HTML ........................................................ 89 Using CSS to Make the HTML Look Good................................................ 91 Adding Mobile Meta Tags for More Effective HTML5 Pages ........................ 96 Optimizing Your Site for Mobile ............................................................ 99 Summary ........................................................................................ 102 Q&A .............................................................................................. 102 Workshop ........................................................................................ 103
vi Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours
HOUR 7: Upgrading a Site to HTML5 105 Deciding When and How to Upgrade from HTML 4................................ 105 HTML5 Features that Work Right Now.................................................. 111 The State of HTML5 Browser Support.................................................... 112 Adding HTML5 Features as Extras on Your Site ...................................... 113 HTML5 Features that Turn Your Site into a Killer Mobile Application ........ 115 Summary ........................................................................................ 116 Q&A .............................................................................................. 116 Workshop ........................................................................................ 118
HOUR 8: Converting Web Apps to Mobile 119 Choosing a Web Editor ...................................................................... 120 Testing Your Application .................................................................... 121 Evaluating Your Content .................................................................... 123 Changing the Visual Design for Mobile ................................................ 124 Checking for HTML5 and CSS3............................................................ 130 Supporting Multiple Devices .............................................................. 132 Evaluating Finished Apps on Other Devices .......................................... 133 Getting an Application to Work on Older Browsers ................................ 134 Summary ........................................................................................ 138 Q&A .............................................................................................. 139 Workshop ........................................................................................ 139
Part II: Learning the HTML5 Essentials
HOUR 9: Adding Meaning with HTML5 Sectioning and Semantic Elements 141 What Are Sectioning Elements? .......................................................... 141 Using the New Sectioning Elements...................................................... 142 Marking Up HTML Semantically.......................................................... 154 Summary ........................................................................................ 159 Q&A .............................................................................................. 159 Workshop ........................................................................................ 160
Contents vii
HOUR 10: Drawing with the HTML5 Canvas Element 163 Using the Canvas Element.................................................................. 163 Drawing Shapes on the <Canvas> Element............................................ 165 Writing Fonts and Text on the Canvas.................................................. 177 Displaying Images ............................................................................ 179 How Is Canvas Different from SVG or Flash .......................................... 182 Summary ........................................................................................ 183 Q&A .............................................................................................. 184 Workshop ........................................................................................ 185
HOUR 11: Fonts and Typography in HTML5 187 Defining the Elements of Typography .................................................. 187 Using Proper Typographical Entities .................................................... 196 Understanding Web Open Font Format (WOFF)...................................... 198 Summary ........................................................................................ 202 Q&A .............................................................................................. 202 Workshop ........................................................................................ 203
HOUR 12: Audio and Video in HTML5 205 Why Use HTML5 for Audio and Video vs. Flash...................................... 205 Choosing Video Formats for the Best Compatibility ................................ 207 Choosing Audio Codecs for the Widest Support...................................... 208 The New HTML5 Media Elements ........................................................ 210 Useful Attributes to Extend Your Media ................................................ 212 Creating Fallback Options for Internet Explorer .................................... 216 Creating Custom Controls with API Methods ........................................ 217 Summary ........................................................................................ 219 Q&A .............................................................................................. 220 Workshop ........................................................................................ 220
HOUR 13: HTML5 Forms 223 New Usability Features in HTML5 Forms .............................................. 223 HTML5 Input Types .......................................................................... 228 Other New Form Elements.................................................................. 235
viii Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours
Form Validation................................................................................ 237 Summary ........................................................................................ 241 Q&A .............................................................................................. 242 Workshop ........................................................................................ 242
HOUR 14: Editing Content and User Interaction with HTML5 245 The New contenteditable Attribute .................................................. 245 The execCommand Method .................................................................. 247 Adding Spellcheck to Web Pages.......................................................... 251 Hiding Elements .............................................................................. 252 Additional UI Components of HTML5 .................................................. 253 Browser Support of UI and Editing Features .......................................... 255 Summary ........................................................................................ 257 Q&A .............................................................................................. 258 Workshop ........................................................................................ 258
HOUR 15: Microformats and Microdata 261 Using Microformats .......................................................................... 261 Using Microdata .............................................................................. 267 Using RDFa...................................................................................... 269 Deciding Which Format to Use............................................................ 270 Mobile and Microformats .................................................................. 271 Summary ........................................................................................ 272 Q&A .............................................................................................. 273 Workshop ........................................................................................ 274
HOUR 16: Working with HTML5 Drag-and-Drop Functionality 275 Implementing Drag and Drop ............................................................ 275 Drag-and-Drop Events ...................................................................... 276 Drag-and-Drop Attributes .................................................................. 279 Helpful CSS Extensions ...................................................................... 280 Building a Drag-and-Drop Interface .................................................... 280 Using Drag and Drop on iOS .............................................................. 287
Contents ix
Summary ........................................................................................ 290 Q&A .............................................................................................. 290 Workshop ........................................................................................ 291
HOUR 17: HTML5 Links 293 How Links Have Changed in HTML5.................................................... 293 Link Types and Relationships.............................................................. 299 Using the New Link Types .................................................................. 300 Summary ........................................................................................ 306 Q&A .............................................................................................. 306 Workshop ........................................................................................ 307
Part III: HTML5 for Mobile and Web Applications
HOUR 18: Web Application APIs and Datasets 309 Creating Web Applications ................................................................ 309 Datasets and data-* Attributes .......................................................... 318 Summary ........................................................................................ 320 Q&A .............................................................................................. 320 Workshop ........................................................................................ 321
HOUR 19: WebSockets, Web Workers, and Files 323 Two-Way Communication with WebSockets .......................................... 323 Running Scripts in the Background with Web Workers ............................ 326 Handling Client-Side Files with the File API .......................................... 331 Summary ........................................................................................ 337 Q&A .............................................................................................. 338 Workshop ........................................................................................ 339
HOUR 20: Offline Web Applications 341 Building Offline Apps and Converting Apps to Work Offline.................... 341 The Cache Manifest .......................................................................... 343 Using DOM Events and Properties for Offline Apps ................................ 347 Debugging the Application Cache ...................................................... 351
x Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours
Summary ........................................................................................ 352 Q&A .............................................................................................. 352 Workshop ........................................................................................ 353
HOUR 21: Web Storage in HTML5 355 What Is Web Storage?........................................................................ 356 Web SQL and Indexed DB .................................................................. 361 Summary ........................................................................................ 370 Q&A .............................................................................................. 371 Workshop ........................................................................................ 372
HOUR 22: Controlling the Browser History with the History API 373 Why Control the Browser History? ...................................................... 373 History API Methods.......................................................................... 375 Using the History API ........................................................................ 375 Dangers and Annoyances of the History API ........................................ 383 Summary ........................................................................................ 384 Q&A .............................................................................................. 385 Workshop ........................................................................................ 386
HOUR 23: Adding Location Detection with Geolocation 387 What Is Geolocation? ........................................................................ 387 Privacy and Geolocation .................................................................... 394 Creating a Mobile Geolocation Application .......................................... 396 Summary ........................................................................................ 401 Q&A .............................................................................................. 401 Workshop ........................................................................................ 402
HOUR 24: Converting HTML5 Apps to Native Apps 405 Comparing the Difference Between Native and HTML5 Apps .................. 405 Converting to Native Apps ................................................................ 408 Creating Application Icons ................................................................ 414 Testing Your Applications .................................................................. 416 Selling Your App in the App Stores ...................................................... 418
Contents xi
Options Other Than Converting to Native Apps .................................... 419 Summary ........................................................................................ 419 Q&A .............................................................................................. 420 Workshop ........................................................................................ 421
Part IV: Appendixes
APPENDIX A: Answers to Quizzes 423 Hour 1, “Improving Mobile Web Application Development with HTML5” .................................................................................. 423 Hour 2, “New HTML5 Tags and Attributes with Mobile Development” ...... 423 Hour 3, “Styling Mobile Pages with CSS3” ............................................ 424 Hour 4, “Detecting Mobile Devices and HTML5 Support” ........................ 424 Hour 5, “JavaScript and HTML5 Web Applications”................................ 425 Hour 6, “Building a Mobile Web Application” ...................................... 425 Hour 7, “Upgrading a Site to HTML5” .................................................. 426 Hour 8, “Converting Web Apps to Mobile”............................................ 426 Hour 9, “Adding Meaning with HTML5 Sectioning and Semantic Elements” .......................................................................... 427 Hour 10, “Drawing with the HTML5 Canvas Element” ............................ 427 Hour 11, “Fonts and Typography in HTML5” ........................................ 428 Hour 12, “Audio and Video in HTML5” ................................................ 428 Hour 13, “HTML5 Forms” .................................................................. 429 Hour 14, “Editing Content and User Interaction with HTML5”.................. 429 Hour 15, “Microformats and Microdata” .............................................. 430 Hour 16, “Working with HTML5 Drag-and-Drop Functionality”................ 430 Hour 17, “HTML5 Links”.................................................................... 430 Hour 18, “Web Application APIs and Datasets”...................................... 431 Hour 19, “WebSockets, Web Workers, and Files” .................................... 431 Hour 20, “Offline Web Applications”.................................................... 432 Hour 21, “Web Storage in HTML5” ...................................................... 432
xii Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours
Hour 22, “Controlling the Browser History with the History API” .............. 433 Hour 23, “Adding Location Detection with Geolocation” ........................ 434 Hour 24, “Converting HTML5 Apps to Native Apps” .............................. 434
APPENDIX B: HTML Elements and Attributes 437 HTML5 Elements .............................................................................. 437 HTML5 Attributes.............................................................................. 442
APPENDIX C: HTML5 and Mobile Application Resources 447 Books.............................................................................................. 447 Websites .......................................................................................... 448 This Book’s Website .......................................................................... 448
