Cover image for Programming the Mobile Web, 2nd Edition

Book description

With the second edition of this popular book, you’ll learn how to build HTML5 and CSS3-based apps that access geolocation, accelerometer, multi-touch screens, offline storage, and other features in today’s smartphones, tablets, and feature phones. The market for mobile apps continues to evolve at a breakneck pace, and this book is the most complete reference available for the mobile web.

Table of Contents

  1. Preface
    1. Who This Book Is For
    2. Who This Book Is Not For
    3. What You’ll Learn
    4. Other Options
    5. If You Like (or Don’t Like) This Book
    6. Conventions Used in This Book
    7. Using Code Examples
    8. How to Contact Us
    9. Safari® Books Online
    10. Acknowledgments
  2. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
        1. Portable
        2. Personal
        3. Companion
        4. Easy usage
        5. Connected device
      2. Mobile Device Categories
        1. Mobile phones
        2. Feature Phones
        3. Social Phones
        4. Smartphones
        5. Tablets
        6. Non-phone mobile devices
        7. Netbooks
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
        1. Versions
        2. Google’s Nexus devices
        3. Fragmentation
      3. Windows
        1. Windows Phone
        2. Windows 8
        3. Windows Mobile and Embedded Compact
      4. Nokia
        1. Windows Phone
        2. Tablets
        3. Series 40
        4. Symbian
        5. MeeGo
      5. BlackBerry
        1. The PlayBook tablet
        2. BlackBerry 10: the reborn
      6. Samsung
      7. Sony Mobile
      8. Motorola Mobililty
      9. Amazon
      10. LG Mobile
      11. HTC
      12. HP and Palm
      13. Firefox OS
      14. Ubuntu for phones
      15. Chinese platforms
      16. Other Platforms
      17. Smart TV Platforms
    3. Technical Information
  3. 2. Understanding mobile web
    1. Myths of the Mobile Web
      1. It’s Not the Mobile Web; It’s Just the Web!
      2. You Don’t Need to Do Anything Special About Your Desktop Website
      3. One Website Should Work for All Devices (Desktop, Mobile, TV, etc.)
      4. Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website
      5. Native Mobile Applications Will Kill the Mobile Web
      6. People Are Not Using Their Mobile Browsers
    2. What is the mobile web?
      1. Differences
    3. Mobile Web Eras
      1. WAP 1
      2. WAP 2.0
        1. The dotMobi era
        2. The iPhone era
        3. The Mobile HTML5 era
    4. The Mobile Browsing Experience
      1. Browsing Types
      2. Zoom Experience
      3. Reflow Layout Engines
      4. Direct Versus Cloud-based Browsers
      5. Multipage Experience
      6. Web Engines
        1. Rendering engines
        2. JavaScript engines
    5. Fragmentation
      1. Display
        1. Resolution
        2. Physical dimensions
        3. Pixel Density Ratio
        4. Aspect ratio
        5. Input methods
        6. Other features
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
        1. iOS Webapps
        2. Chrome apps
        3. Firefox Open Webapps
        4. Symbian Standalone Webapps
        5. S40 Webapps
        6. Samsung Web API
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
        1. Platform-specific solutions
        2. Apache Cordova and Adobe PhoneGap
        3. Sencha Touch
        4. Appcelerator Titanium
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
        1. Safari on iOS
        2. Android browser
        3. Google Chrome
        4. Amazon Silk
        5. Internet Explorer
        6. Nokia Browser
          1. Nokia Browser for Series 40
          2. Nokia Browser for Symbian
          3. Nokia Browser for MeeGo
        7. webOS browser
        8. BlackBerry Browser
        9. UC Browser
        10. Samsung Dolfin & Jasmine
        11. LG Phantom
        12. NetFront
        13. Myriad Browser
          1. Obigo browser
        14. Legacy Mobile Browsers
          1. MicroB for Maemo
          2. Sony Mobile browsers
          3. Motorola Mobile Internet Browser (MIB)
      2. User-Installable Browsers
        1. Opera Mobile
        2. Opera Mini
        3. Firefox
        4. Dolphin
        5. Baidu Browser
        6. SkyFire
      3. Browser Overview
  5. 4. Tools for mobile web development
    1. Working with Code
      1. Adobe Dreamweaver
      2. Adobe Edge Tools
      3. Microsoft Visual Studio and WebMatrix
      4. Eclipse
      5. Native web IDEs
    2. Testing
      1. Emulators and Simulators
        1. Android emulator
        2. iOS simulator
        3. Nokia emulators
        4. BlackBerry simulators
          1. Ripple
          2. BlackBerry Smartphones
          3. PlayBook and BB10
        5. webOS emulator
        6. Windows emulators
        7. Opera Mobile emulator
          1. Opera Mini Simulator
        8. Other official emulation platforms
        9. Adobe Device Central
        10. Keynote MITE
        11. Comparison
        12. Remote emulation services
          1. BrowserStack
          2. Browshot
      2. Real devices testing
        1. Adobe Edge Inspect
      3. Remote Labs
        1. Nokia Remote Device Access
        2. Samsung Remote Test Lab
        3. Keynote DeviceAnywhere
          1. Usage for mobile web testing
          2. Testing automation
        4. Perfecto Mobile
          1. Pricing structure
          2. Main features
    3. Production Environment
      1. Web Hosting
      2. Domain
      3. Error Management
      4. Statistics
  6. 5. Architecture and Design
    1. Mobile Strategy
      1. When to get out of the browser
      2. Context
      3. Server Side Adaptation
      4. Progressive Enhancement
      5. Responsive Web Design
        1. Responsive Layouts
        2. Responsive Images
      6. RESS
    2. Navigation
    3. Design and User Experience
      1. Touch Design Patterns
      2. Tablet Patterns
      3. Official UI Guidelines
      4. What not to do
  7. 6. Markups and Standards
    1. First, the very Old Ones
      1. WML
    2. Current Standards
      1. Politics of the Mobile Web
        1. Managing multiple standards
      2. Delivering Markup
        1. Charset encoding
        2. Conclusion about MIME types and DOCTYPEs
    3. XHTML Mobile Profile and Basic
      1. Available Tags
      2. Official Noncompatible Features
      3. Creating Our First Compatible Template
      4. Markup Additions
    4. Mobile HTML5
      1. Creating our first HTML5 template
      2. Syntax Rules
      3. New elements
    5. CSS for Mobile
      1. WCSS Extensions
        1. Access key
        2. Marquee
        3. CSS form extensions
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
        1. HTML5 Test
        2. Ringmark
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
        1. Apple Touch icon
          1. Home screen’s title
        2. Other platforms using Apple’s link
        3. Nokia Browser for Symbian
          1. Nokia Browser for MeeGo
          2. BlackBerry Browser
          3. Android Browser
        4. Windows Start Tile
          1. Live badge notifications
        5. Summary of Home Screen icons
        6. Native web and installation icons
      4. The viewport
        1. The problem
        2. Viewport declaration
        3. What is device width?
        4. Give me back the pixels
        5. Landscape behavior
        6. Viewport on CSS
          1. Viewport compatibility
          2. Viewport for older devices
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
        1. iOS Smart App Banners
        2. Windows Store App connection
    2. The Document Body
      1. Main Structure
        1. Go to top
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
        1. New windows
        2. Navigation lists
      6. Accessibility
        1. WAI-ARIA
        2. Accessibility testing
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
        1. Option groups
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
        1. Data list for suggestions
        2. Multiline text control
        3. Rich text controls
          1. Content Editable
          2. WYSIHTML5
        4. Popup control
      6. Range slider field
      7. Date input fields
      8. File selection fields
        1. Actions with files
        2. HTML Media Capture extension
        3. Mobile browser compatibility
      9. Non-interactive form elements
    3. Form Control Attributes
      1. Placeholder
      2. Auto focus
      3. Autocomplete
      4. Validation input attributes
      5. Read only
      6. Safari extensions
      7. Firefox extensions
      8. XHTML mobile
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
        1. CSS validation pseudo-classes
        2. Constraints validation API
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
        1. About polyfills
    2. Informational websites
      1. Can I use
      2. MobileHTML5.org
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
        1. CSS Conditional
      3. Vendor Prefixes
        1. CSS Preprocessors
          1. SASS
          2. LESS
        2. -prefix-free
        3. Static tools for prefixes
      4. JavaScript fallbacks
        1. Are you there?
        2. Vendor prefixes
      5. Modernizr
        1. Conditional loading
        2. All the properties
      6. Polyfills
      7. Platform detection
        1. Detect mobile browsers
    4. Server-side detection
      1. HTTP
        1. The request
        2. The request header
        3. The user agent
        4. What we can identify
        5. The User Agent Profile
        6. User Agent tricks
      2. Detecting the Context
        1. How to read a header
        2. How to read the IP address
      3. Cloud-based browsers
        1. Opera Mini
        2. Xpress Browser
        3. Amazon Silk
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
        1. WURFL
          1. Architecture
          2. Capabilities
        2. WURFL Standalone API (OnSite)
          1. PHP API installation
          2. Using the PHP API
          3. WURFL Cloud API
        3. DeviceAtlas
          1. Properties
          2. Cloud API
        4. Detect Right
        5. Movila DetectFree
        6. 51Degrees.mobi
        7. OpenDDR
  11. 10. Images and Media
    1. Images
      1. Image formats
        1. Animation formats
        2. 3D formats
        3. Inline images
        4. Format compatibility
      2. Using the img element
      3. Responsive Images
        1. Sencha.io Src
      4. Local pictograms
        1. ISO Pictograms
        2. OMA Pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
        1. Using img elements
        2. Using background images
      3. Providing image alternatives
        1. Using devicePixelRatio
        2. Using media queries
        3. Using image sets
        4. The picture element
      4. SVG
        1. Tools for SVG
        2. SVG for beginners
        3. Embedding the SVG on XHTML
        4. Embedding the SVG using object
        5. Inline SVG
        6. Raphaël
      5. Canvas
        1. The context
        2. Lines and strokes
        3. Drawing methods
        4. Advanced features
        5. Canvas as native code
        6. Canvas as a background
        7. Export canvas
        8. Canvas and pixel density
        9. WebGL
        10. Canvas compatibility
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
        1. Reference movies for iOS
      2. Delivering video
        1. Linking to video files
      3. HTML5 video element
        1. Advanced declarations
        2. Providing fallbacks
        3. Video Player API
        4. Streaming to Apple TV
      4. Streaming
        1. HTTP Live Streaming
      5. Object embedding
      6. Video compatibility
    5. Audio
      1. Invisible audio player
      2. Web Audio API
      3. Audio Compatibility
  12. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
        1. Media features
        2. all vs only screen
        3. Useful queries
        4. CSS4 Media Queries
        5. Internet Explorer 10 snap state
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
        1. Font family
        2. CSS 3 Font face
        3. Font size
        4. Text shadows
        5. Text overflow
        6. Text adjustment for small screens
        7. Text Stroke and Fill
        8. Multi-column layout
    5. Common Patterns
      1. Display Properties
        1. Absolute and floating positions
        2. Fixed position
        3. Modern layout techniques
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
        1. Selection styles
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
        1. Inline images
        2. Join images
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
        1. Perspective
        2. Transform style
        3. Backface visibility
        4. The CardFlip pattern
      8. Transitions
        1. Animation properties
        2. Transition ending
      9. Animations
        1. Keyframe at-rule
        2. Animation events
      10. CSS Filter Effects
      11. CSS Regions and Exclusions
      12. CSS New Values and Units
  13. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 script extensions
      2. Code Execution
      3. Cloud-based browsers
        1. Nokia Mobile Web Library
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
        1. Page Visibility API
        2. Waking up detection using timers
      2. Background tab notification trick
      3. Background execution compatibility
      4. Push notifications
    3. Supported Technologies
      1. Document Object Model
      2. Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native webapp APIs
    4. Standard JavaScript behavior
      1. Standard dialogs
      2. History and URL management
        1. History extension API
        2. Hashchange event
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
        1. Animation Timing
      6. Changing the title
      7. Cookie management
      8. Event Handling
        1. Managing events
        2. Load and unload events
        3. Click events
          1. Double tap
        4. Focusable and form events
        5. Over events
        6. Resizing, scrolling, and orientation change events
        7. Key events
          1. Useful keys for some devices
        8. Preventing default behavior
    5. JavaScript Libraries
      1. Mobile Libraries
        1. ZeptoJS
        2. baseJS
        3. jQMobi
        4. QuoJS
        5. XUI
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
        1. Clear text box button
        2. Autogrowing textarea
        3. Floating bar
        4. Cascading menu
        5. Autocomplete
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
        1. Fallback
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
        1. Cache Events
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
        1. Limits
      2. Web SQL Database API
        1. Limits
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
        1. Cross Domain Requests
        2. JSONP
        3. Ajax with offline resources
      2. Server Sent Events
        1. Server component
      3. Web Sockets
        1. Socket.IO
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
        1. GPS
        2. A-GPS
        3. Cell information
        4. WiFi Positioning System
      4. Server Techniques
        1. IP address
        2. Carrier connection
        3. Language
        4. Indoor location
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
        1. Getting the position
        2. Handling error messages
        3. Tracking the location
        4. Defining optional attributes
        5. Geolocation API 2.0
      2. Carrier network location APIs
        1. GSMA OneAPI
        2. Specific carriers APIs
      3. IP Geolocation
        1. Reading the IP address
        2. Google’s ClientLocation object
    3. Maps and Navigation app integration
      1. Google Maps for Android
        1. Directions and Navigation
        2. Street View
      2. iOS Maps
        1. Directions and Navigation
      3. Bing Maps
    4. Showing a Map
      1. Google Maps API v3
      2. Google Maps Static API
      3. Nokia Here
  16. 15. Device Interaction
    1. Mobile-specific URIs
      1. Making a call
      2. Sending email
      3. Sending an SMS
      4. Other communication apps
      5. Adding a contact to the phonebook
      6. Integrating with other applications
        1. iOS URL schemes
          1. X-Callback-URL
        2. Android intents
        3. Symbian local applications
        4. Windows apps
    2. JavaScript APIs
      1. Touch
        1. Touch Events
          1. Disabling scrolling
          2. BlackBerry touch behavior
          3. W3C Touch events
          4. Compatibility
        2. Pointer Events
          1. Pointer detection
          2. Touch action style
          3. Working with the touches and clicks
          4. Simulating touch on desktop
      2. Gestures
        1. Swipe gesture
        2. Frameworks
        3. Apple gesture API
        4. Microsoft Gesture API
          1. Starting a gesture detection
          2. Gesture change values
      3. Sensors
        1. DeviceOrientation Event
          1. Moving a ball
        2. Compass information
        3. Apache Cordova API
      4. Network Information
        1. Old specification
        2. New specification
      5. File Management
        1. Full File System API
      6. Full Screen
      7. Web Notifications
      8. Camera
        1. getUserMedia
        2. Apache Cordova APIs
      9. Battery
      10. Vibration
      11. Other APIs
        1. W3C
        2. Apache Cordova
        3. Mozilla
        4. For the future
  17. 16. Native and installed Webapps
    1.  
      1. Pros and Cons
      2. Architecture
        1. Meta configuration
        2. Platform access
        3. Data storage
        4. Network access
        5. Logic
        6. User interface
        7. Package
        8. Distribution
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
        1. Webapp creation
        2. Full-screen meta tag
        3. Changing status bar appearance
        4. Defining startup images
        5. How it looks like
        6. APIs
        7. Links
          1. Distribution
        8. Cubiq Add to Home Screen
      2. Symbian standalone webapps
      3. Windows 8 Store apps
        1. Windows Runtime
        2. WinJS
        3. JavaScript UI controls
        4. Application UI state
        5. Navigation
        6. Advanced topics
      4. Mozilla Open Web Apps
        1. App origin
        2. App Manifest
        3. Distribution
        4. Checking if the app is already installed
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
        1. Configuration file
        2. WebWorks APIs
        3. bbUI.js
        4. Packaging and Signing
        5. Ripple Tool
        6. Distribution
      8. Nokia S40 webapps
        1. Configuration
        2. Mobile Web Library
        3. Gesture and Keypad events
        4. Storage API
        5. Tools
      9. Nokia Symbian webapps
        1. Package
        2. Features
        3. JavaScript API
        4. MiniView
        5. Tools and libraries
        6. Webapp distribution
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
        1. DeviceReady event
        2. Other events
        3. APIs
          1. Notification API
      4. Plugins
    5. Distribution
      1. iOS AppStore
      2. Android stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    6. Full screen apps Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload my webapp
        1. Live Reload
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
        1. Apache
        2. Internet Information Server
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
        1. Download descriptor
        2. Post-download status report
    3. Application and Games Delivery
      1. iOS applications
        1. Ad Hoc OTA installation
      2. Android applications
        1. Bypassing the store
      3. Windows applications
      4. Java ME
        1. Serving JAD files
        2. Java ME for BlackBerry
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
        1. User agent spoofing
        2. HTTP Sniffing
        3. Bandwidth simulators
      2. Markup Debugging
        1. HTML5 validators
        2. W3C mobileOK Checker
        3. ready.mobi
      3. Client-Side Debugging
        1. iOS Remote Web Inspector
          1. Connecting the session
          2. Working with the session
          3. Older iOS debugging tools
        2. Chrome for Android debugger
        3. Firefox Remote Debugging
        4. BlackBerry Remote Web Inspector
        5. Opera Dragonfly
        6. Android Debug Bridge
        7. Weinre
        8. JSConsole
        9. Bookmarklet solutions
        10. Other web-based solutions
    2. Performance Optimization
      1. Measurement
        1. Remote profilers
        2. HTTP Proxies
        3. Akamai Mobitest
        4. Performance APIs
      2. Best Practices
        1. Reducing requests
        2. Compressing
        3. HTTP compression
        4. Other tips
        5. JavaScript performance
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
        1. Mobile Sitemaps
      2. How Users Find You
        1. SMS invitation
        2. Email invitation
        3. Mobile Tiny URL
        4. QR codes
        5. NFC tags
      3. User Fidelizing
        1. Web shortcuts
        2. RSS
        3. Open Search
        4. Apple Passbook
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
        1. Google AdSense for mobile content
    4. Mobile Web Social Features
      1. Authentication and sharing APIs
        1. Facebook Connect
        2. Twitter for Websites
        3. Google APIs
      2. Share Content
  21. A. MIME Types for Mobile Content
    1. Markup and Script MIME Types
    2. Image MIME Types
    3. Mobile Content MIME Types
    4. Audio and Video MIME Types
    5. Webapp MIME Types
  22. Index
  23. About the Author
  24. Colophon
  25. Copyright