O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Author and mobile development expert Maximiliano Firtman shows you how to develop a standard app core that you can extend to work with specific devices. This updated edition covers many recent advances in mobile development, including responsive web design techniques, offline storage, mobile design patterns, and new mobile browsers, platforms, and hardware APIs.

  • Learn the particulars and pitfalls of building mobile websites and apps with HTML5, CSS, JavaScript and responsive techniques
  • Create effective user interfaces for touch devices and different resolution displays
  • Understand variations among iOS, Android, Windows Phone, BlackBerry, Firefox OS, and other mobile platforms
  • Bypass the browser to create native web apps, ebooks, and PhoneGap applications
  • Build apps for browsers and online retailers such as the App Store, Google Play Store, Windows Store, and App World

Table of Contents

  1. Programming the Mobile Web
  2. Dedication
  3. 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. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
  4. 1. The Mobile Jungle
    1. The Mobile Ecosystem
      1. What Is a Mobile Device?
        1. Portable
        2. Personal
        3. Companion
        4. Easy to use
        5. Connected
      2. Mobile Device Categories
        1. Mobile phones
        2. Feature phones
        3. Social phones
        4. Smartphones
        5. Tablets
        6. Nonphone 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
      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
  5. 2. Understanding the 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)
      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. Navigation Methods
      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
      2. Input Methods
      3. Other Features
    6. Market Statistics
  6. 3. Browsers and Web Platforms
    1. Web Platforms That Are Not Browsers
      1. HTML5 Web Apps
        1. iOS web apps
        2. Chrome apps
        3. Firefox open web apps
        4. Symbian standalone web apps
        5. S40 web apps
        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
        14. Obigo browser
        15. Legacy mobile browsers
          1. MicroB for Maemo
          2. Sony Mobile (formerly Sony Ericsson) 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
  7. 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 Device 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
  8. 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
  9. 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 keys
        2. Marquees
        3. CSS form extensions
      2. CSS3
    6. HTML5 Compatibility Levels
      1. Testing Your Browser
        1. HTML5 Test
        2. Ringmark
  10. 7. Basics of Mobile HTML5
    1. The Document Head
      1. Title
      2. Website Icons
      3. Home Screen Icons
        1. Apple Touch Icons
          1. Icon titles
        2. Other platforms using Apple’s link
          1. Nokia Browser for Symbian
          2. Nokia Browser for MeeGo
          3. BlackBerry browser
          4. Android browser
        3. Windows Start tiles
          1. Live badge notifications
        4. Summary of Home screen icon compatibility
        5. Native and installed web app 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. Viewports in CSS
          1. Viewport compatibility
          2. Viewports for older devices
      5. Changing the Navigation Method
      6. Removing Automatic Links
      7. Metadata for Sharing
      8. Hiding the URL Address Bar
      9. Native App Integration
        1. iOS Smart App Banners
        2. Windows Store app connections
    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
  11. 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 lists for suggestions
        2. Multiline text controls
        3. Rich text controls
          1. contenteditable
          2. WYSIHTML5
        4. Pop-up controls
      6. Range Slider Fields
      7. Date Input Fields
      8. File Selection Fields
        1. Actions with files
        2. The HTML Media Capture extension
        3. Mobile browser compatibility
      9. Noninteractive Form Elements
    3. Form Control Attributes
      1. Placeholder
      2. autofocus
      3. autocomplete
      4. readonly
      5. Input Validation Attributes
      6. Safari Extensions
      7. Firefox Extensions
      8. XHTML Mobile inputmode
      9. Additional Form Attributes
    4. Form Validation
      1. HTML5 Validation
        1. CSS validation pseudoclasses
        2. Constraints validation API
      2. WAP CSS Validation
  12. 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. WebPlatform.org
    3. Client-Side Detection
      1. HTML Fallbacks
      2. CSS Fallbacks
        1. CSS conditionals
      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
        3. HTML5 main features
        4. CSS main mobile features
        5. Other features
      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
          3. WURFL Standalone API (OnSite)
          4. PHP API installation
          5. Using the PHP API
          6. The WURFL Cloud API
        2. DeviceAtlas
          1. Properties
          2. Cloud API
        3. DetectRight
        4. Movila DetectFree
        5. 51Degrees.mobi
        6. OpenDDR
  13. 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. Dealing with Multiple Screen Densities
      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 in XHTML
        4. Embedding the SVG using img
        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. Exporting canvas drawings
        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. The 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. Embedding with object
      6. Video Compatibility
    5. Audio
      1. Invisible Audio Player
      2. Web Audio API
      3. Audio Compatibility
  14. 11. CSS for Mobile Browsers
    1. Where to Insert the CSS
    2. Media Queries
      1. CSS3 Media Queries
        1. Media features
        2. all versus 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 Formatting
        1. Font family
        2. CSS3 font-face
        3. Font size
        4. Text shadows
        5. Text overflow
        6. Text adjustment for small screens
        7. Text stroke and fill
        8. Multicolumn 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
    7. CSS3 Modules
      1. Gradients
      2. Reflection
      3. Masks
      4. Transforms
        1. Perspective
        2. Transform style
        3. Backface visibility
        4. The CardFlip pattern
      5. Transitions
        1. Animation properties
        2. Transition ending
      6. Animations
        1. @keyframes
        2. Animation events
      7. CSS Filter Effects
      8. CSS Regions and Exclusions
      9. New CSS Values and Units
  15. 12. JavaScript Mobile
    1. Coding for Mobile Browsers
      1. HTML5 Script Extensions
      2. Code Execution
      3. Cloud-Based Browsers
        1. Nokia Mobile Web Library
    2. JavaScript Debugging and Profiling
    3. Battery Consumption
    4. Background Execution
      1. Status Detection
        1. The Page Visibility API
        2. Wakeup detection using timers
      2. Background Tab Notification Trick
      3. Background Execution Compatibility
      4. Push Notifications
    5. Supported Technologies
      1. The Document Object Model
      2. The Selectors API
      3. JSON
      4. Binary Data
      5. Web Workers
      6. HTML5 APIs
      7. Native Web App APIs
    6. Standard JavaScript Behavior
      1. Standard Dialogs
      2. History and URL Management
        1. History API extensions
        2. The 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
    7. JavaScript Libraries
      1. Mobile Libraries
        1. Zepto.js
        2. baseJS
        3. jQMobi
        4. QuoJS
        5. XUI
    8. 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 buttons
        2. Autogrowing textareas
        3. Floating bars
        4. Cascading menus
        5. Autocompletion
  16. 13. Offline Apps, Storage, and Networks
    1. Offline Web Apps
      1. The Manifest File
        1. Reusing the manifest
      2. Accessing Online Resources
        1. Fallbacks
      3. Updating the Package
      4. Deleting the Package
      5. The JavaScript API
        1. Cache events
      6. Compatibility and Limits
    2. Client-Side Storage
      1. Web Storage
        1. Limits
      2. The Web SQL Database API
        1. Limits
      3. The IndexedDB API
      4. The FileSystem API
      5. User Intervention
      6. Debugging Storage
    3. Network Communication
      1. Ajax
        1. Cross-domain requests
        2. JSONP
        3. Ajax with offline resources
      2. Server Sent Events
        1. The server component
      3. WebSockets
        1. Socket.IO
  17. 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. The 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/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
  18. 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. Apple Touch Events API
          1. Disabling scrolling
          2. BlackBerry touch behavior
        2. W3C Touch Event API
        3. Compatibility
        4. Microsoft pointer events
          1. Pointer detection
          2. Touch action style
          3. Working with the touches and clicks
          4. Simulating touch on desktops
      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 FileSystem 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
  19. 16. Native and Installed Web Apps
    1. Web App Pros and Cons
    2. Architecture of a Web App
      1. Meta Configuration
      2. Platform Access
      3. Data Storage
      4. Network Access
      5. Logic
      6. User Interface
      7. Packaging
      8. Distribution
    3. Standards
      1. Packaging and Configuration Standards
    4. Official Platforms
      1. iOS Web Apps
        1. iOS web app pros and cons
        2. Full-screen meta tag
        3. Changing status bar appearance
        4. Defining startup images
        5. How it looks
        6. APIs
        7. Links
        8. Distribution
        9. Cubiq Add to Home Screen
      2. Symbian Standalone Web Apps
      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 Apps
        1. Configuration file
        2. WebWorks APIs
        3. bbUI.js
        4. Packaging and signing
        5. Ripple
        6. Distribution
      8. Nokia S40 Web Apps
        1. Configuration
        2. Mobile Web Library
        3. Gesture and keypad events
        4. Storage API
        5. Tools
        6. Distribution
      9. Nokia Symbian Web Apps
        1. Package
        2. Features
        3. JavaScript API
        4. MiniView
        5. Tools and libraries
        6. Distribution
    5. Apache Cordova/PhoneGap Apps
      1. Template Creation
      2. Cordova Web View
      3. CordovaJS
        1. DeviceReady event
        2. Other events
        3. APIs
          1. Notification API
      4. Plug-ins
    6. Distribution
      1. iOS App Store
      2. Android Stores
      3. BlackBerry AppWorld
      4. Microsoft Windows Store
      5. Microsoft Windows Phone Store
    7. Full-Screen App Patterns
      1. Multiple Views
      2. Layout
      3. Input Method
      4. One-View Widget
      5. Dynamic Application Engine
      6. Reload My Web App
        1. Live Reload
  20. 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
  21. 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
        2. Older iOS debugging tools
        3. Chrome for Android debugger
        4. Firefox remote debugging
        5. BlackBerry remote Web Inspector
        6. Opera Dragonfly
        7. Android Debug Bridge
        8. Weinre
        9. JSConsole
        10. Bookmarklet solutions
        11. 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
  22. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. 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
    4. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    5. Monetizing Your Website
      1. Mobile Advertisements
        1. Google AdSense for mobile content
    6. Mobile Web Social Features
      1. Authentication and Sharing APIs
        1. Facebook Connect
        2. Twitter for Websites
        3. Google APIs
      2. Sharing Content
  23. 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
  24. Index
  25. About the Author
  26. Colophon
  27. Copyright