Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

Jennifer Kyrnin has been teaching HTML, XML, and web design online since 1997. She has built and maintained websites of all sizes from small, single-page brochure sites to large, million-page databased sites for international audiences. She lives with her husband, son, and numerous animals on a small farm in Washington state.

Learn how to turn Web pages into stunning mobile applications in just 24 hours or less! HTML5 adds a number of new features and APIs to the language that allow web designers to be more descriptive and effective in creating their Web pages. Using the new APIs you can build offline Web applications, work with location data, store data on a local computer in a manner similar to cookies and more! In this book author Jennifer Kyrnin walks you through how to get started with the HTML5 specification to build great mobile applications.

This Rough Cut is an early draft version of the book.

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 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 Hour 10: Drawing with the HTML5 Canvas Element 163 Using the Canvas Element 163 Drawing Shapes on the 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 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 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 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 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 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 Index 449