Thông tin tài liệu
www.it-ebooks.info www.it-ebooks.info Estelle Weyl Mobile HTML5 www.it-ebooks.info 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 corporate@oreilly.com. Editors: Simon St. Laurent and Meghan Blanchette Production Editor: Kristen Brown Copyeditor: Kiel Van Horn Proofreaders: Troy Mott and Jasmine Kwityn Indexer: Lucie Haskins Cover Designer: Randy Comer Interior Designer: David Futato 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] www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info [...]... in this list IE9 has some HTML5 support, but is a browser that is holding back the Web So, while not all browsers provide support for HTML5, it is supported by all WebKit/Blink browsers, Opera Mobile, 5 Firefox OS, and the new Windows phones It is finally time to start playing with HTML5 HTML5 is an umbrella term describing the new web API standards, some of which are in the HTML5 specification (e.g.,... 14 Mobile viewport To mimic the mobile viewport, you can simply resize the desktop browser window to the size of the mobile viewport you want to test The desktop browser viewport is the 3 Firefox comes with web developer tools, but most developers use Firebug, a Firefox add-on 6 | Chapter 1: Setting the Stage to Learn Mobile HTML5, CSS3, and JavaScript APIs www.it-ebooks.info browser window In mobile, ... submission, and clear out the placeholder text when a form element receives focus With HTML5, you may no longer need to validate forms with JavaScript! Form elements have been updated in HTML5 with new features and methods for defining data types 4 HTML5 has become an umbrella term HTML5 is just a component of the HTML5 “umbrella.” Bruce Lawson has suggested the term NEWT for this large umbrella, for... Bur‐ toft, Tomomi Imura, and Justin Lowery Bruce Lawson coauthored the first book on HTML5, Introducing HTML5 (New Riders) He’s one of the founders of HTML5Doctor.com, and was a member of W3C’s Mobile Web Best Practices Working Group He evangelizes open web standards for Opera, the oldest browser manufacturer, whose mobile, desktop, TV, and embedded browsers are used by 300 million people across the... has had a mobile and web consultancy since 2000, as well as stints as an adjunct web design and art history professor Follow her at @msjen, or http://blackphoebe.com/msjen Tomomi Imura is an open web advocate and frontend engineer with mobile focus who has been active in the mobile space since before it was cool She has been developing mobile web, platform UI/UX, and frameworks at Yahoo! Mobile and... book teaches you that This book covers CSS3, HTML5, and the associated APIs The focus is learning the technologies in a mobile landscape We live in a mobile world, but there is no mobile web.” There is simply the Web But if you focus on the desktop only, the version of the Web you create may not work for the increasing population that only accesses the Web via mobile devices And, if you only focus on... on iOS either Et cetera Unlike native applications, your HTML5/ CSS3 web applications can be made to work on all WebKit, IE10, Blink, Opera Mobile (not mini), and Firefox mobile browsers And your web applications will work on other devices that have modern browsers that by default support features of HTML5 and CSS3 Web applications built with HTML5 and CSS3, for the most part, already work in modern... both mobile and modern desktop browsers, with responsive web design features highlighted in Chapter 11 In Chapters 12–14, we focus on the mobile platform, including touch events, user ex‐ perience design, and mobile performance considerations Lessons covered will ensure site performance, user experience, and reliability of web pages on all platforms Yes, our goal is to develop kickass websites for mobile. .. Firefox, Opera, and IE10 (in both their desktop and mobile versions) all support modern web standards, including HTML 4.01, XHTML, and parts of HTML5; almost all of CSS 2.1 and most of CSS3; JavaScript, including AJAX technol‐ ogies; and DOM Level 2 Windows was a bit late to the game, but newer phones are supporting HTML5 Did you even know anyone with a Windows mobile phone in 2010? Not until February 2012... scriptable! HTML5 browsers natively support webM and mp4 formats With the DOM, you can control video and audio, including muting, forwarding, and stopping With CSS, you can style the players While iOS devices may never support Flash or Silverlight, all mobile browsers support HTML5 video and audio We will learn about and in Chap‐ ter 5 Geolocation API Geolocation is not part of the HTML5 . www.it-ebooks.info www.it-ebooks.info Estelle Weyl Mobile HTML5 www.it-ebooks.info Mobile HTML5 by Estelle Weyl Copyright © 2014 Estelle Weyl. All rights reserved. Printed. 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. their application (with HTML5, your changes are live immediately) xvi | Introduction www.it-ebooks.info 4. HTML5 has become an umbrella term. HTML5 is just a component of the HTML5 “umbrella.” Bruce
Ngày đăng: 23/07/2014, 09:51
Xem thêm: mobile html5, mobile html5, Chapter 1. Setting the Stage to Learn Mobile HTML5, CSS3, and JavaScript APIs, Chapter 3. Elements That Are New in HTML5, Chapter 5. SVG, Canvas, Audio, and Video, Chapter 8. Expanding Options with CSS3 Values, Chapter 9. CSS3: Modules, Models, and Images, Chapter 10. CSS3: Transforms, Transitions, and Animations, Chapter 11. CSS Features in Responsive Web Design, Chapter 13. Targeting Mobile Devices and Touch, Appendix A. CSS Selectors and Specificity
