Microdata 184 Cross-Document Messaging 187 Accessible Rich Internet Applications (ARIA) 188 Accessibility 188 in Conclusion 191
Total Page:16
File Type:pdf, Size:1020Kb
Mobile HTML5 Estelle Weyl Mobile HTML5 by Estelle Weyl Copyright © 2014 Estelle Weyl. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/ institutional sales department: 800-998-9938 or [email protected]. Editors: Simon St. Laurent and Meghan Blanchette Indexer: Lucie Haskins Production Editor: Kristen Brown Cover Designer: Randy Comer Copyeditor: Kiel Van Horn Interior Designer: David Futato Proofreaders: Troy Mott and Jasmine Kwityn Illustrator: Rebecca Demarest November 2013: First Edition Revision History for the First Edition: 2013-11-12: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449311414 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Mobile HTML5, the image of a Racket-tailed Drongo, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trade‐ mark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-31141-4 [LSI] Table of Contents Introduction. xi Native Applications Versus Web Applications xii What’s New(t)? New Elements and APIs xvii What’s New in CSS? xix Mobile-Specific Considerations xx Why This Book? xx What’s in This Book xxii Conventions Used in This Book xxiii Using Code Examples xxiii Safari® Books Online xxiv How to Contact Us xxiv Acknowledgments xxv 1. Setting the Stage to Learn Mobile HTML5, CSS3, and JavaScript APIs. 1 CubeeDoo: HTML5 Mobile Game 2 Development Tools 4 Text Editor 4 Browser 5 Debugging Tools 5 Desktop Debuggers 6 Remote Debugging 8 Testing Tools 15 Emulators and Simulators 15 Online Tools 17 Phones 18 Automated Testing 20 2. Upgrading to HTML5. 23 HTML5 Syntax 24 Elements 24 iii Attributes 25 Global and Internationalization Attributes 26 HTML 4 Attributes Made Core in HTML5 29 New to HTML5: Global Accessibility and Interactive Attributes 31 HTML Element/Attribute Syntax 35 Self-Closing Elements 37 Best Practices 38 The Required Components 39 Elements Found in the <head> 44 <meta>: Adding Metadata 45 Mobile Meta Tags 47 Mobile Vendor-Specific Values 49 The <base> of Your Web Page 50 <link>s Aren’t Just for Stylesheets 51 3. Elements That Are New in HTML5. 59 Sectioning Elements in HTML5 60 <section> 61 <article> 62 <section> Versus <article> 62 <nav> 63 <aside> 64 <header> 64 <footer> 65 CubeeDoo Header and Footer 65 Not New, but Not Often Used: <address> 66 Grouping Content: Other New HTML5 Elements 66 <main> 67 <figure> and <figcaption> 67 <hr> 68 <li> and <ol> Attribute Changes 68 Text-Level Semantic Elements New to HTML5 68 <mark> 69 <time> 70 <rp>, <rt>, and <ruby> 71 <bdi> 72 <wbr> 72 Changed Text-Level Semantic Elements 72 <a> 72 Text-Level Element Changes from HTML 4 74 Unchanged Elements 75 Embedded Elements 76 Changes to Embedded Elements 76 iv | Table of Contents Interactive Elements 78 <details> and <summary> 78 <menu> and <menuitem> 80 All of XHTML Is in HTML5, Except... 81 In Conclusion 82 4. HTML5 Web Forms. 83 Attributes of <input> (and Other Form Elements) 85 The type Attribute 85 The required Attribute 85 Minimum and Maximum Values: The min and max Attributes 86 The step Attribute 87 The placeholder Attribute 88 The pattern Attribute 89 The readonly Attribute 91 The disabled Attribute 91 The maxlength Attribute 91 The size Attribute 92 The form Attribute 92 The autocomplete Attribute 93 The autofocus Attribute 94 <input> Types and Attributes 94 Re-introduction to Input Types You Think You Know 94 Text: <input type=“text”> 95 Password: <input type=“password”> 96 Checkbox: <input type=“checkbox”> 97 Radio: <input type=“radio”> 97 Submit: <input type=“submit”> 98 Reset: <input type=“reset”> 99 File: <input type=“file”> 100 Hidden: <input type=“hidden”> 101 Image: <input type=“image”> 101 Button: <input type=“button”> 102 Styling Input Types 102 New Values for <input> Type 102 Email: <input type=“email”> 104 URL: <input type=“url”> 106 Telephone: <input type=“tel”> 107 Number: <input type=“number”> 108 Range: <input type=“range”> 111 Search: <input type=“search”> 112 Color: <input type=“color”> 112 Date and Time Input Types 113 Table of Contents | v Date: <input type=“date”> 114 Datetime: <input type=“datetime”> 116 Datetime-local: <input type=“datetime-local”> 116 Month: <input type=“month”> 116 Time: <input type=“time”> 116 Week: <input type=“week”> 117 Form Validation 118 Easy UI Improvements with CSS 122 New Form Elements 123 The <datalist> Element and the list Attribute 123 The <output> element 126 <meter> 127 <progress> 128 <keygen> 129 Other Form Elements 130 The <form> element 130 <fieldset> and <legend> 130 <select>, <option>, <optgroup> 130 <textarea> 130 <button> 131 The <label> Element 131 In Conclusion 132 5. SVG, Canvas, Audio, and Video. 133 HTML5 Media APIs 133 SVG 134 Including SVG in Your Documents 136 Clown Car Technique: SVG for Responsive Foreground Images 136 Learning SVG 138 CubeeDoo SVG 139 Canvas 141 Canvas Versus SVG 146 Audio/Video 147 Media Types 147 Adding <video> to Your Website 148 Attributes of <video> and <audio> 149 Video and Audio and JavaScript 153 Styling Video 156 6. Other HTML5 APIs. 159 Offline Web Applications 159 Am I Even Connected to the Internet? 159 Application Cache 160 vi | Table of Contents Local and Session Storage 164 SQL/Database Storage 174 Enhanced User Experience 179 Geolocation 179 Web Workers 182 Microdata 184 Cross-Document Messaging 187 Accessible Rich Internet Applications (ARIA) 188 Accessibility 188 In Conclusion 191 7. Upgrading to CSS3. 193 CSS: A Definition and Syntax 194 CSS Syntax 195 Using External Stylesheets: <link> Revisited 197 Media Queries 199 CSS Best Practices 202 CSS Selectors 206 Basic Selectors 207 More CSS3 Selectors 210 General Selectors 210 Using the Selectors 211 Relational Selectors: Rules Based on Code Order 212 Attribute Selectors 216 Pseudoclasses 222 State Pseudoclasses 225 Structural Pseudoclasses 226 The Math of the nth Types 227 More Pseudoclasses 230 Pseudoelements 233 Other Selectors: Shadow DOM 236 Specificity Trumps Cascade: Understanding CSS Specificity 237 In Conclusion 238 8. Expanding Options with CSS3 Values. 239 CSS Color Values 239 Hexadecimal Values 240 rgb() Syntax 241 Adding Transparency with RGBA 242 Hue, Saturation, and Lightness: HSL() 243 CMYK 244 Named Colors 244 CurrentColor 245 Table of Contents | vii Browser Color Values 245 CSS Units of Measurement 249 CSS Length Values 249 Angles, Times, and Frequencies 252 CSS Angle Measurements 252 Times 254 Frequencies 254 Avoiding TRouBLe: Shorthand Properties and Value Declarations 255 In Conclusion 257 9. CSS3: Modules, Models, and Images. 259 CSS Box Model Properties 260 border 261 border-style 262 border-color 262 border-width 263 The CSS Box Model 264 box-sizing 265 Learning CSS3 266 border-radius 268 CSS Gradients 271 Gradient Type: Linear or Radial 271 Radial Gradients 272 Linear Gradients 272 background-size 282 Stripey Gradients 285 Repeating Linear Gradients 287 Shadows 291 Text Shadow 292 Fitting Text with width, overflow, and text-overflow 294 Box Shadow 295 Putting It All Together: CubeeDoo 298 10. CSS3: Transforms, Transitions, and Animations. 303 CSS Transitions 304 The transition-property Property 306 The transition-duration Property 309 The transition-timing-function Property 309 The transition-delay Property 310 The Shorthand transition Property 311 Multiple Transitions 312 CSS3 Transforms 314 The transform-origin Property 314 viii | Table of Contents The transform Property 315 Multiple Transforms 320 Transitioning Transformations 321 3D Transform Functions 321 Other 3D Transform Properties 323 Putting It All Together 325 CSS3 Animation 328 Keyframes 329 Transitions, Animations, and Performance 336 11. CSS Features in Responsive Web Design. 339 Media Queries, Breakpoints, and Fluid Layouts 339 Multiple Columns 340 Border Images 342 Setting Border Images 344 Flexbox 349 flex 352 Feature Detection with @supports 354 Responsive Media 355 Serving Images 356 CSS Masking: Creating Transparent JPEGs 362 Client Hints 362 12. Designing Mobile Applications. 365 Considerations Before You Start 366 Design Considerations 367 Tools: Productivity Applications 368 Entertainment: Immersive Applications 369 Utility 370 What Is Right for You? 371 The Mobile Platform: Rich with Possibilities 372 Small Screen 372 Less Memory 373 One Window, One Application at a Time 375 Minimal Documentation 375 Development Considerations 376 Targeting Mobile WebKit 377 Status Bar 377 Navigation Bar 378 Startup Image 380 Home Screen Icons 381 Minimize Keyboard Entry 382 Be Succinct 382 Table of Contents | ix Make it Obvious 382 Minimize Required Input 383 Minimize Text 383 Other User Experience Considerations 383 13. Targeting Mobile Devices and Touch. 385 Scaling Down to Size 385 @viewport 386 Touch Me 386 Touch Areas 387 Mouse Events, Touch Events 387 Pseudo or Not-So-Pseudo Click Events 390 Hardware Access 393 Phone Movement and Direction 393 Device Status 394 Native Web Apps, Packaged Apps, and Hybrids 396 Testing 397 14. Mobile Performance. 401 Battery Life 401 Use Dark Colors 402 Use JPEGs 402 Reduce JavaScript 403 Eliminate Network Requests 404 Hardware Acceleration 405 Latency 408 Reduce the Number of HTTP Requests 408 Reduce Size of Requests 412 Memory 415 Optimize Images 416 UI Responsiveness 422 Touch Events 422 Animation 423 In Conclusion 423 A.