Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours

Description

In just 24 sessions of one hour or less, learn how to build rich, robust mobile apps that run on smartphones, tablets, and other devices and interact with users in powerful new ways. Using this book’s straightforward, step-by-step approach, you’ll master leading-edge practical skills you can use whether you’re developing for the iPad/iPhone or Android. Discover how to quickly build new mobile apps and upgrade older apps, provide cutting-edge media content, leverage advanced features ranging from geolocation to the semantic web, and even simplify complex back-end development. Each lesson builds on what you’ve already learned, giving you a rock-solid foundation for real-world success!

Step-by-step instructions carefully walk you through the most common HTML5 mobile development tasks.

Quizzes and Exercises at the end of each chapter help you test your knowledge.

By the Way notes present interesting information related to the discussion.

Did you Know? tips offer advice or show you easier ways to perform tasks.

Watch Out! cautions alert you to possible problems and give you advice on how to avoid them.

Learn how to…

• Work with the new HTML5 tags most valuable for mobile development
• Get started fast with HTML5 features already supported by today’s browsers
• Detect mobile devices and HTML5 support and upgrade sites to support them
• Style and build more efficient, usable mobile pages
• Use jQuery Mobile to quickly create mobile apps
• Leverage HTML5’s breakthrough drawing and typography features
• Efficiently integrate media content into your apps
• Add meaning with HTML5 sectioning and semantic elements
• Implement drag-and-drop more easily than ever
• Build offline applications and other apps that use local storage
• Detect and work with location data via the GeoLocation API
• Use microformats and microdata to make web pages friendlier to computers
• Add powerful back-end functionality with WebSockets, Web Workers, and File APIs
• Improve user navigation with the History API

Sample Content

Table of Contents

Preface     xiv

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

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 <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
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

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

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

Updates

Submit Errata