Mobile HTML5

Mobile HTML5

by Estelle Weyl
Released November 2013
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781491948880

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build kickass websites and applications for all mobile (and non-mobile) platforms by adding HTML5 and CSS3 to your web development toolkit. With this hands-on book, you’ll learn how to develop web apps that not only work on iOS, Android, Blackberry, and Windows Phone, but also perform well and provide good user experience.

With lots of code and markup examples, you’ll learn best practices for using HTML5 features, including new web forms, SVG, Canvas, localStorage, and related APIs. You’ll also get an in-depth look at CSS3, and discover how to design apps for large monitors and tiny screens alike.

  • Learn HTML5’s elements, syntax, and semantics
  • Build forms that provide enhanced usability with less JavaScript
  • Explore HTML5 media APIs for graphics, video, and audio
  • Enable your applications to work offline, using AppCache, localStorage, and other APIs
  • Learn what you need to know about CSS3 selectors and syntax
  • Dive into CSS3 features such as multiple backgrounds, gradients, border-images, transitions, transforms, and animations
  • Make your web applications usable, responsive, and accessible.
  • Design for performance, user experience, and reliability on all platforms

Publisher resources

View/Submit Errata

Table of contents

  1. Special Upgrade Offer
  2. Introduction
    1. Native Applications Versus Web Applications
      1. Pep Talk (or Leaving Old Internet Explorer Behind)
      2. The Browser Landscape
      3. Web Applications Versus Native Applications: A Brief History
      4. Release of the SDK: Beginning of Third-Party Applications
    2. What’s New(t)? New Elements and APIs
      1. Semantic Grouping Tags
      2. Web Forms
      3. SVG and Canvas
      4. Video and Audio
      5. Geolocation API
      6. Offline Content and Storage
      7. Other APIs
    3. What’s New in CSS?
      1. Web Fonts
    4. Mobile-Specific Considerations
    5. Why This Book?
      1. Screen Size
      2. User Goals
    6. What’s in This Book
    7. Conventions Used in This Book
    8. Using Code Examples
    9. Safari® Books Online
    10. How to Contact Us
    11. Acknowledgments
  3. 1. Setting the Stage to Learn Mobile HTML5, CSS3, and JavaScript APIs
    1. CubeeDoo: HTML5 Mobile Game
    2. Development Tools
      1. Text Editor
      2. Browser
      3. Debugging Tools
      4. Desktop Debuggers
        1. Mobile viewport
      5. Remote Debugging
        1. Android debugging tools
        2. weinre
        3. Using weinre
        4. Adobe Edge Inspect and Ghostlab
        5. JavaScript debugging with Aardwolf
        6. BlackBerry 10 Debugger
    3. Testing Tools
      1. Emulators and Simulators
      2. Online Tools
      3. Phones
        1. Browser labs
        2. iOS
        3. Android
        4. Windows
        5. BlackBerry
        6. Nokia
        7. Kindle
        8. WebOS
      4. Automated Testing
  4. 2. Upgrading to HTML5
    1. HTML5 Syntax
      1. Elements
      2. Attributes
      3. Global and Internationalization Attributes
        1. id
        2. class
        3. title
        4. style
        5. lang
        6. dir
      4. HTML 4 Attributes Made Core in HTML5
        1. tabindex
        2. accesskey
      5. New to HTML5: Global Accessibility and Interactive Attributes
        1. hidden
        2. contenteditable
        3. contextmenu
        4. draggable
        5. dropzone
        6. spellcheck
        7. ARIA accessibility attributes
        8. Custom data attributes with data-*
          1. Dataset API
        9. itemid, itemprop, itemref, itemscope, and itemtype
    2. HTML Element/Attribute Syntax
      1. Self-Closing Elements
      2. Best Practices
      3. The Required Components
        1. The Document Type Declaration
        2. The <html> element
        3. The <head> element
        4. The <title> element
        5. The <body> element
      4. Elements Found in the <head>
      5. <meta>: Adding Metadata
        1. <meta charset=“UTF-8”>
        2. Description meta tag
        3. Keyword meta tag
        4. <meta http-equiv=“. . .”>
      6. Mobile Meta Tags
        1. Viewport meta tag
      7. Mobile Vendor-Specific Values
        1. apple-mobile-web-app-capable
        2. apple-mobile-web-app-status-bar-style
        3. format-detection
      8. The <base> of Your Web Page
      9. <link>s Aren’t Just for Stylesheets
        1. Add <link>s for your stylesheets
        2. Attributes of the <link> tag
        3. The media attribute
        4. The rel attribute
        5. <style>
          1. <style> and mobile performance: standards anti-pattern
        6. Adding a <script> to your web page
          1. JavaScript performance tips
        7. When a user has JavaScript turned off, <noscript>
        8. A <body> of elements
  5. 3. Elements That Are New in HTML5
    1. Sectioning Elements in HTML5
      1. <section>
      2. <article>
      3. <section> Versus <article>
      4. <nav>
      5. <aside>
      6. <header>
      7. <footer>
      8. CubeeDoo Header and Footer
      9. Not New, but Not Often Used: <address>
      10. Grouping Content: Other New HTML5 Elements
      11. <main>
      12. <figure> and <figcaption>
      13. <hr>
      14. <li> and <ol> Attribute Changes
    2. Text-Level Semantic Elements New to HTML5
      1. <mark>
      2. <time>
      3. <rp>, <rt>, and <ruby>
      4. <bdi>
      5. <wbr>
    3. Changed Text-Level Semantic Elements
      1. <a>
        1. Mobile-specific link handling
      2. Text-Level Element Changes from HTML 4
      3. Unchanged Elements
    4. Embedded Elements
      1. Changes to Embedded Elements
        1. <iframe>
        2. <img>
        3. <object>
        4. <param>
        5. <area>
        6. <embed>
    5. Interactive Elements
      1. <details> and <summary>
      2. <menu> and <menuitem>
        1. &lt;menuitem&gt;
      3. All of XHTML Is in HTML5, Except...
    6. In Conclusion
  6. 4. HTML5 Web Forms
    1. Attributes of <input> (and Other Form Elements)
      1. The type Attribute
      2. The required Attribute
      3. Minimum and Maximum Values: The min and max Attributes
      4. The step Attribute
      5. The placeholder Attribute
      6. The pattern Attribute
      7. The readonly Attribute
      8. The disabled Attribute
      9. The maxlength Attribute
      10. The size Attribute
      11. The form Attribute
      12. The autocomplete Attribute
      13. The autofocus Attribute
    2. <input> Types and Attributes
      1. Re-introduction to Input Types You Think You Know
      2. Text: <input type=“text”>
      3. Password: <input type=“password”>
      4. Checkbox: <input type=“checkbox”>
      5. Radio: <input type=“radio”>
      6. Submit: <input type=“submit”>
      7. Reset: <input type=“reset”>
      8. File: <input type=“file”>
      9. Hidden: <input type=“hidden”>
      10. Image: <input type=“image”>
      11. Button: <input type=“button”>
      12. Styling Input Types
    3. New Values for <input> Type
      1. Email: <input type=“email”>
      2. URL: <input type=“url”>
      3. Telephone: <input type=“tel”>
      4. Number: <input type=“number”>
      5. Range: <input type=“range”>
      6. Search: <input type=“search”>
      7. Color: <input type=“color”>
    4. Date and Time Input Types
      1. Date: <input type=“date”>
      2. Datetime: <input type=“datetime”>
      3. Datetime-local: <input type=“datetime-local”>
      4. Month: <input type=“month”>
      5. Time: <input type=“time”>
      6. Week: <input type=“week”>
    5. Form Validation
      1. Easy UI Improvements with CSS
        1. Controlling validation bubbles
        2. Styling to enhance usability
    6. New Form Elements
      1. The <datalist> Element and the list Attribute
        1. Graceful degradation of the <datalist>
      2. The <output> element
        1. CubeeDoo
      3. <meter>
      4. <progress>
      5. <keygen>
    7. Other Form Elements
      1. The <form> element
      2. <fieldset> and <legend>
      3. <select>, <option>, <optgroup>
      4. <textarea>
      5. <button>
      6. The <label> Element
    8. In Conclusion
  7. 5. SVG, Canvas, Audio, and Video
    1. HTML5 Media APIs
      1. SVG
      2. Including SVG in Your Documents
      3. Clown Car Technique: SVG for Responsive Foreground Images
      4. Learning SVG
      5. CubeeDoo SVG
      6. Canvas
        1. Your first <canvas>
        2. <canvas> code example
      7. Canvas Versus SVG
        1. WebGL
    2. Audio/Video
      1. Media Types
      2. Adding <video> to Your Website
      3. Attributes of <video> and <audio>
        1. The <track> element
      4. Video and Audio and JavaScript
        1. CubeeDoo
      5. Styling Video
        1. Responsive video sizing
        2. Things to know about <video> implementation
  8. 6. Other HTML5 APIs
    1. Offline Web Applications
      1. Am I Even Connected to the Internet?
      2. Application Cache
        1. The cache manifest file
        2. Updating the cache
      3. Local and Session Storage
        1. The cookie comparison
        2. LocalStorage to enhance mobile performance
        3. CubeeDoo
          1. classList
      4. SQL/Database Storage
        1. Web SQL methods
          1. openDatabase method
          2. transaction method
          3. executeSQL() method
        2. CubeeDoo high scores code
        3. IndexedDB
    2. Enhanced User Experience
      1. Geolocation
      2. Web Workers
      3. Microdata
        1. Microdata versus microformats
        2. Microdata API
      4. Cross-Document Messaging
        1. CORS: Cross-Origin Resource Sharing
        2. Security
    3. Accessible Rich Internet Applications (ARIA)
      1. Accessibility
    4. In Conclusion
  9. 7. Upgrading to CSS3
    1. CSS: A Definition and Syntax
      1. CSS Syntax
      2. Using External Stylesheets: <link> Revisited
        1. The media attribute
      3. Media Queries
        1. window.matchMedia
      4. CSS Best Practices
        1. 1. Minimize HTTP requests
        2. 2. Use external stylesheets
        3. 3. Normalize browsers with a CSS reset or normalizer
        4. 4. Use the weakest specificity for ease of overwriting
        5. 5. Don’t use inline styles or the !important modifier
    2. CSS Selectors
      1. Basic Selectors
        1. Type selector
        2. Class selector
        3. ID selector
    3. More CSS3 Selectors
      1. General Selectors
        1. Universal selector: *
        2. Type selector: E
        3. Class selector: .class
        4. ID selector: #id
      2. Using the Selectors
      3. Relational Selectors: Rules Based on Code Order
        1. Descendant combinator: E F
        2. Child combinator: E > F
        3. Adjacent sibling combinator: E + F
        4. General sibling combinator: E ~ F
      4. Attribute Selectors
        1. CubeeDoo
      5. Pseudoclasses
      6. State Pseudoclasses
      7. Structural Pseudoclasses
      8. The Math of the nth Types
        1. Even and odd
        2. Single elements
        3. :nth-of-type versus :nth-child
        4. Number expressions
        5. Exercise
      9. More Pseudoclasses
        1. :target
        2. :lang(en)
        3. :not(s), or the negation pseudoclass
        4. Real world example
      10. Pseudoelements
        1. ::before and ::after
          1. CubeeDoo
        2. Understanding double-colon notation
    4. Other Selectors: Shadow DOM
      1. Specificity Trumps Cascade: Understanding CSS Specificity
    5. In Conclusion
  10. 8. Expanding Options with CSS3 Values
    1. CSS Color Values
      1. Hexadecimal Values
      2. rgb() Syntax
      3. Adding Transparency with RGBA
      4. Hue, Saturation, and Lightness: HSL()
      5. CMYK
      6. Named Colors
      7. CurrentColor
      8. Browser Color Values
        1. Which color syntax should I use?
    2. CSS Units of Measurement
      1. CSS Length Values
        1. dpi, dpc, dppx
        2. CubeeDoo
      2. Angles, Times, and Frequencies
      3. CSS Angle Measurements
        1. Degrees
        2. Grads
        3. Rads
        4. Turns
      4. Times
      5. Frequencies
        1. CubeeDoo
    3. Avoiding TRouBLe: Shorthand Properties and Value Declarations
    4. In Conclusion
  11. 9. CSS3: Modules, Models, and Images
    1. CSS Box Model Properties
      1. border
      2. border-style
      3. border-color
        1. Making triangles with CSS
      4. border-width
      5. The CSS Box Model
      6. box-sizing
        1. Margins
    2. Learning CSS3
      1. border-radius
        1. border-radius for native-looking buttons on the iPhone and in CubeeDoo
    3. CSS Gradients
      1. Gradient Type: Linear or Radial
      2. Radial Gradients
      3. Linear Gradients
        1. Gradient angles and directions
        2. Gradient colors
          1. iPhone and CubeeDoo linear gradients
      4. background-size
        1. DPI and background-size
      5. Stripey Gradients
      6. Repeating Linear Gradients
        1. Gradients in CubeeDoo
        2. Multiple background images
        3. Candy buttons and hard stops
        4. Tools for gradients
    4. Shadows
      1. Text Shadow
      2. Fitting Text with width, overflow, and text-overflow
        1. text-overflow property
        2. white-space property
      3. Box Shadow
      4. Putting It All Together: CubeeDoo
  12. 10. CSS3: Transforms, Transitions, and Animations
    1. CSS Transitions
      1. The transition-property Property
      2. The transition-duration Property
      3. The transition-timing-function Property
      4. The transition-delay Property
      5. The Shorthand transition Property
      6. Multiple Transitions
    2. CSS3 Transforms
      1. The transform-origin Property
      2. The transform Property
        1. translate()
        2. translateX()
        3. translateY()
        4. scale()
        5. scaleX()
        6. scaleY()
        7. rotate()
        8. rotateX()
        9. rotateY()
        10. skew()
        11. skewX()
        12. skewY()
      3. Multiple Transforms
        1. matrix()
      4. Transitioning Transformations
      5. 3D Transform Functions
        1. translate3d()
        2. translateZ()
        3. scale3d()
        4. scaleZ()
        5. rotate3d()
        6. perspective()
      6. Other 3D Transform Properties
        1. The transform-origin property revisited
        2. The perspective property
        3. The transform-style property
        4. The backface-visibility property
      7. Putting It All Together
    3. CSS3 Animation
      1. Keyframes
        1. Applying animations
        2. Bouncing ball animation
        3. Animating sprites
        4. CubeeDoo animations
      2. Transitions, Animations, and Performance
  13. 11. CSS Features in Responsive Web Design
    1. Media Queries, Breakpoints, and Fluid Layouts
    2. Multiple Columns
    3. Border Images
      1. Setting Border Images
        1. border-image-source
        2. border-image-slice
        3. border-image-width
        4. border-image-outset
        5. border-image-repeat
        6. Border-image shorthand
    4. Flexbox
      1. flex
      2. Feature Detection with @supports
    5. Responsive Media
      1. Serving Images
        1. Retina®: high pixel-density displays
          1. Connection speed
        2. background-size
        3. Data URIs
        4. Sprites
        5. image-set()
        6. Font icons
      2. CSS Masking: Creating Transparent JPEGs
      3. Client Hints
  14. 12. Designing Mobile Applications
    1. Considerations Before You Start
    2. Design Considerations
      1. Tools: Productivity Applications
      2. Entertainment: Immersive Applications
        1. Fun entertainment
        2. Serious entertainment
      3. Utility
      4. What Is Right for You?
    3. The Mobile Platform: Rich with Possibilities
      1. Small Screen
      2. Less Memory
        1. Manage memory
      3. One Window, One Application at a Time
      4. Minimal Documentation
      5. Development Considerations
    4. Targeting Mobile WebKit
      1. Status Bar
      2. Navigation Bar
        1. UX of navigation bar
          1. Page controls
        2. Navigation bar size and color
      3. Startup Image
      4. Home Screen Icons
    5. Minimize Keyboard Entry
    6. Be Succinct
      1. Make it Obvious
      2. Minimize Required Input
      3. Minimize Text
    7. Other User Experience Considerations
  15. 13. Targeting Mobile Devices and Touch
    1. Scaling Down to Size
      1. @viewport
    2. Touch Me
      1. Touch Areas
      2. Mouse Events, Touch Events
        1. Pointer events
        2. Touch events
        3. Feature detection for touch events
      3. Pseudo or Not-So-Pseudo Click Events
        1. Tap highlight color
        2. Kill the selection dialog
        3. Kill the images dialog
        4. Kill panning
        5. onTouchEnd
        6. Touching to scroll
    3. Hardware Access
      1. Phone Movement and Direction
      2. Device Status
        1. Network connection
        2. Battery
        3. Other APIs
      3. Native Web Apps, Packaged Apps, and Hybrids
        1. PhoneGap/Apache Cordova
        2. Sencha Touch
        3. Appcelerator Titanium
    4. Testing
  16. 14. Mobile Performance
    1. Battery Life
      1. Use Dark Colors
      2. Use JPEGs
      3. Reduce JavaScript
      4. Eliminate Network Requests
      5. Hardware Acceleration
        1. Avoid repaints and reflows
    2. Latency
      1. Reduce the Number of HTTP Requests
        1. Browser cache
        2. Combined JavaScript file
        3. Single stylesheet
        4. Image sprites
        5. Image compression
        6. Data URIs/inline images
        7. Icons and character sets
        8. Inspecting network requests
      2. Reduce Size of Requests
        1. Minify text-based assets
        2. Compress binary files
        3. Gzip everything
        4. Reduce image size
        5. Skip the framework
        6. Minimize cookies
        7. Defer third-party scripts
        8. Performance anti-patterns
      3. Memory
      4. Optimize Images
        1. Weigh the benefits of CSS
        2. GPU benefits and pitfalls
        3. Viewport: Out of sight does not mean out of mind
        4. Minimize the DOM
        5. Memory management
    3. UI Responsiveness
      1. Touch Events
      2. Animation
    4. In Conclusion
  17. A. CSS Selectors and Specificity
    1. CSS Selectors Level 3
    2. CSS Selector Cheat Sheet
    3. CSS Selector Specificity
    4. CSS Selectors Level 4
  18. Index
  19. About the Author
  20. Colophon
  21. Special Upgrade Offer
  22. Copyright

Product information

  • Title: Mobile HTML5
  • Author(s): Estelle Weyl
  • Release date: November 2013
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491948880