Cover image for Programming the Mobile Web

Programming the Mobile Web

by Maximiliano Firtman
Publisher: O'Reilly Media, Inc.
Release Date: July 2010
ISBN: 9780596807788
Topics:
Start reading now

Book Description

How do you take advantage of the new opportunities opening up in mobile web development? With this book, you'll learn the intricacies and pitfalls involved in building HTML and CSS-based apps that you can extend to work with particular devices, including the iPhone, Android devices, and other smartphones. You'll not only learn how to deal with platform variations, finicky browsers, CSS compatibility, and other issues, but also how to create pleasant user experiences in a constrained environment.

Table of Contents

  1. Programming the Mobile Web
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. 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
    3. 1. The Mobile Jungle
      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. Mobile Web Is Really Easy; Just Create a WML File
        5. Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile Website
        6. Native Mobile Applications Will Kill the Mobile Web
        7. People Are Not Using Their Mobile Browsers
      2. 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. Low-end mobile devices
          3. Mid-end mobile devices
          4. High-end mobile devices
          5. Smartphones
          6. Non-phone devices
          7. Small Personal Object Technology (SPOTs)
          8. Tablets, netbooks, and notebooks
      3. Mobile Knowledge
        1. Display
          1. Resolution
          2. Physical dimensions
          3. Aspect ratio
          4. Input methods
          5. Other features
      4. Brands, Models, and Platforms
        1. Apple
        2. Nokia
          1. Series 40
          2. S60
          3. Maemo/MeeGo
        3. BlackBerry
        4. Samsung
        5. Sony Ericsson
        6. Motorola
        7. LG Mobile
        8. HTC
        9. Android
        10. Windows Mobile
        11. Palm
        12. Symbian Foundation
        13. Other Platforms
      5. Technical Information
      6. Market Statistics
    4. 2. Mobile Browsing
      1. The Mobile Browsing Experience
        1. Browsing Types
        2. Zoom Experience
        3. Reflow Engines
        4. Direct Versus Proxied Browsers
        5. Multipage Experience
        6. The WebKit Engine
        7. Preinstalled Browsers
          1. NetFront
          2. Myriad
          3. Internet Explorer
          4. Safari on iOS
          5. Nokia Series 40 browser
          6. Sony Ericsson browsers
          7. Obigo browser
          8. Motorola Mobile Internet Browser (MIB)
          9. Symbian browser
          10. Android browser
          11. webOS browser
          12. BlackBerry browser
          13. Samsung WebKit browser
          14. MicroB (Maemo browser)
        8. User-Installable Browsers
          1. Opera Mobile
          2. Opera Mini
          3. Firefox for mobile
          4. UC Browser
          5. SkyFire
          6. Bolt
          7. Chromium
        9. Browser Overview
      2. Mobile Web Eras
        1. WAP 1
        2. WAP 2.0
          1. The dotMobi era
          2. On-Device Portals and rich clients
        3. Mobile Web 2.0
    5. 3. Architecture and Design
      1. Website Architecture
        1. Navigation
        2. Context
        3. Progressive Enhancement
        4. Different Version Approach
      2. Design and Usability
        1. Touch Design Patterns
        2. Official UI Guidelines
    6. 4. Setting Up Your Environment
      1. Setting Up a Development Environment
        1. Working with Code
        2. Emulators and Simulators
          1. Android emulator
          2. Nokia emulators
          3. iPhone simulator
          4. Palm emulator
          5. BlackBerry simulators
          6. Windows Mobile emulators
          7. Windows Phone emulator
          8. i-mode HTML simulator
          9. Opera Mobile emulator
          10. Openwave simulator
          11. Adobe Device Central
          12. Comparison
          13. Online simulators
            1. Opera Mini Simulator
            2. ready.mobi
            3. iPhone web simulation
      2. Production Environment
        1. Web Hosting
        2. Domain
        3. Error Management
        4. Statistics
    7. 5. Markups and Standards
      1. First, the Old Ones
        1. WML
          1. WML was not alone
          2. Serving WML
      2. Current Standards
        1. Politics of the Mobile Web
          1. Managing multiple standards
        2. Delivering Markup
          1. Top mobile websites
          2. Charset encoding
          3. 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. CSS for Mobile
        1. WCSS Extensions
          1. Access key
          2. Marquee
          3. CSS form extensions
      5. Confusion
    8. 6. Coding Markup
      1. Heading Structure
        1. Icons for the Mobile Web
        2. Hey! I’m Mobile Friendly
          1. Defining the viewport
            1. Viewport compatibility
          2. Changing the navigation method
      2. The Document Body
        1. Main Structure
          1. Go to top
        2. Images
          1. Tag usage
          2. Formats
          3. Inline images
          4. Local pictograms
          5. Using images effectively
        3. Lists
        4. Links
          1. New windows
          2. Navigation lists
          3. Linking to phone features
            1. Making a call
            2. Sending email
            3. Sending an SMS
            4. Adding a contact to the phonebook
          4. Integrating with other applications
            1. iOS URL schemes
            2. Symbian local applications
            3. Android intents
          5. Document download
        5. Forms
          1. Form design
          2. Select lists
            1. Option groups
            2. Select list compatibility
          3. Radio buttons and checkboxes
          4. Buttons
          5. Hidden fields
          6. File upload
          7. Text input
            1. Placeholder
            2. Text input validation
            3. Safari extensions
            4. BlackBerry extensions
            5. Autocomplete
        6. Tables
        7. Frames
      3. Plug-ins and Extensions
        1. Adobe Flash
          1. Flash on the iPhone? Yes, you can!
        2. Microsoft Silverlight
        3. SVG
          1. Tools for SVGT
          2. SVG for beginners
          3. Embedding the SVG
        4. Canvas
    9. 7. CSS for Mobile Browsers
      1. Where to Insert the CSS
        1. Media Filtering
          1. Desktop websites
          2. Media queries
      2. Selectors
      3. CSS Techniques
        1. Reset CSS Files
        2. Box Model
        3. Text Format
          1. Font family
            1. Custom fonts
          2. Font size
          3. Text alignment
          4. Other standard text styles
          5. Text shadows
          6. Text overflow
          7. iPhone text adjustment
      4. Common Patterns
        1. Display Properties
          1. Absolute and floating positions
          2. Rounded corners
          3. Titles
          4. Pseudoclasses
          5. Backgrounds
          6. Overflow
          7. Content
          8. Opacity
          9. List design
          10. Visibility
          11. Cursor management
      5. CSS Sprites
        1. Samples and Compatibility
        2. CSS Sprites Alternatives
          1. Inline images
          2. Join images
          3. Box borders
      6. WebKit Extensions
        1. Text Stroke and Fill
        2. Border Image
        3. Safari-Only Extensions
    10. 8. JavaScript Mobile
      1. Supported Technologies
        1. Document Object Model
        2. Ajax
        3. JSON
        4. HTML 5 APIs
        5. Platform Extensions
      2. Coding JavaScript for Mobile Browsers
        1. Code Execution
        2. JavaScript Mobile Compatibility
          1. Feature detection
          2. Standard dialogs
          3. Writing to the document
          4. Platform detection
          5. Window size
          6. History and URL management
          7. Manipulating windows
          8. Focus and scroll management
          9. Timers
          10. Waking up
          11. Changing the title
          12. Regular expressions
          13. Cookie management
        3. DOM
          1. Versions
          2. Browsing
          3. Query selectors
          4. Changing properties
          5. Changing content
          6. Preloading images
          7. Adding and removing elements
        4. Scripting Styles
          1. Changing styles
          2. Showing and hiding styles
        5. Event Handling
          1. Managing events
          2. Load and unload events
          3. Click events
            1. Double tap
            2. Touch and multitouch events
          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
        6. Touch Gestures
          1. Swipe gesture
          2. Zoom and rotate gestures
    11. 9. Ajax, RIA, and HTML 5
      1. Ajax Support
        1. XML Parsing
        2. JSON Parsing
        3. JSONP and Lazy Loading
        4. Comet Techniques
      2. JavaScript Libraries
        1. Mobile Libraries
          1. baseJS
          2. XUI
      3. WebKit CSS Extensions
        1. WebKit Functions
        2. Gradients
        3. Reflection Effects
        4. Masked Images
        5. Transitions
          1. Animation properties
          2. Transition ending
        6. Animations
          1. Keyframe at-rule
          2. Animation events
        7. Transformations
          1. Perspective
          2. Transform style
          3. Backface visibility
          4. The CardFlip pattern
      4. Mobile Rich Internet Applications
        1. JavaScript UI Libraries
          1. Mobile-specific UI libraries
            1. iUI
            2. jQTouch
        2. JavaScript Mobile UI Patterns
          1. Clear text box button
          2. Autogrowing textarea
          3. Floating bar
          4. Cascading menu
          5. Autocomplete
      5. HTML 5
        1. The Standard
        2. Editable Content
        3. New Input Types
        4. Data Lists
        5. The canvas Element
          1. The context
          2. Lines and strokes
          3. Drawing methods
          4. Advanced features
          5. Canvas compatibility
        6. Offline Operation
          1. The manifest file
          2. Cache detection
          3. Cache events
        7. Client Storage
          1. Key/value storage
          2. SQL database
            1. Gears storage
          3. Client JSON store
    12. 10. Server-Side Browser Detection and Content Delivery
      1. Mobile Detection
        1. HTTP
          1. The request
          2. The request header
          3. The user agent
          4. What we can identify
          5. The User Agent Profile
        2. Detecting the Context
          1. How to read a header
          2. How to read the IP address
          3. Opera Mini
          4. Mobile detection
        3. Transcoders
          1. What is a transcoder?
          2. Why are transcoders a problem?
          3. Parties involved in the transcoding problem
          4. What was the response from carriers after receiving complaints?
          5. Practical tips
          6. Operator whitelists
          7. Making content transformation a standard
          8. Transcoder detection
          9. What to do after detection
        4. Device Libraries
          1. WURFL
            1. Architecture
            2. Patch file
            3. Capabilities
          2. WURFL usage
            1. PHP API installation
            2. Using the PHP API
            3. WURFL-related products
          3. DeviceAtlas
            1. Installation
            2. Properties
            3. PHP API
          4. The ASP.NET Mobile Device Browser File
            1. Capabilities
          5. Service-based solutions
            1. Movila DetectFree
            2. DetectRight
      2. Content Delivery
        1. Defining 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
        4. Java ME
          1. Serving JAD files
            1. Icon definition
          2. Custom properties
          3. Java ME for BlackBerry
        5. Flash Lite Content
        6. iPhone Applications
      3. Multimedia and Streaming
        1. Delivering Multimedia Content
        2. Embedding Audio and Video
          1. Flash Video
          2. Object embedding
          3. HTML 5
          4. Reference movies for iPhone
        3. Streaming
          1. HTTP Live Streaming
      4. Content Adaptation
        1. Adaptation Frameworks
          1. WALL Next Generation
        2. Microsoft ASP.NET Mobile Controls
        3. mobileOK Pythia
        4. Yahoo! Blueprint
      5. Mobilizing WordPress and Other CMSs
        1. WordPress
          1. Joomla!
          2. phpBB
    13. 11. 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. Detecting API availability
          5. Defining optional attributes
        2. Google Gears
          1. Getting the position
          2. Obtaining permission
          3. Customizing location preferences
          4. Reading the address
          5. Handling errors
          6. Tracking the location
        3. BlackBerry Location API
        4. Widget APIs
        5. GSMA OneAPI
        6. Multiplatform Geolocation API
          1. Simulating movement
        7. IP Geolocation
          1. Reading the IP address
          2. Google’s ClientLocation object
      3. Showing a Map
        1. Google Maps API v3
        2. Google Maps Static API
        3. Following LBS
    14. 12. Widgets and Offline Webapps
      1. Mobile Widget Platforms
        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
        2. Platform Access
          1. BONDI
          2. PhoneGap
          3. Nokia Platform Services 2.0
          4. Apple Dashboard
      3. Platforms
        1. Symbian/Nokia
          1. Package
          2. Features
          3. JavaScript API
          4. MiniView
          5. Tools and libraries
          6. The APIBridge runtime
          7. Widget distribution
        2. iPhone, iPod, and iPad
          1. Webapp creation
            1. Full-screen metatags
            2. Distribution
          2. PhoneGap projects
            1. Distribution
        3. webOS
          1. Distribution
          2. HTML 5 applications
        4. Android
          1. HTML 5 webapp
          2. PhoneGap solution
            1. Distribution
        5. Windows Mobile
          1. Widgets
            1. Distribution
          2. Hybrid solutions
        6. BlackBerry
          1. Widget API
          2. Configuration file
          3. Distribution
          4. PhoneGap
        7. LG Mobile
          1. Distribution
        8. Samsung Mobile
          1. Distribution
        9. JIL
        10. Opera Widgets
          1. Distribution
        11. Operator-Based Widget Platforms
      4. Widget Design Patterns
        1. Multiple Views
        2. Layout
        3. Input Method
        4. One-View Widget
        5. Dynamic Application Engine
        6. Multiplatform Widgets
    15. 13. Testing, Debugging, and Performance
      1. Testing and Debugging
        1. Remote Labs
          1. Remote Device Access
          2. Samsung Lab.Dev
          3. DeviceAnywhere
            1. Usage for mobile web testing
            2. Testing automation
          4. Perfecto Mobile
            1. Pricing structure
            2. Main features
        2. Server-Side Debugging
        3. Markup Debugging
          1. W3C mobileOK Checker
          2. ready.mobi
          3. Firefox plug-ins
        4. Client-Side Debugging
          1. Browser-based solutions
            1. Safari on iOS Debug Console
            2. Opera Dragonfly
            3. Android Debug Bridge
            4. BlackBerry web development tools
            5. Widget debuggers
          2. JavaScript solutions
      2. Performance Optimization
        1. Measurement
        2. Best Practices
          1. Reducing requests
          2. Compressing
          3. HTTP compression
          4. Other tips
          5. JavaScript performance
    16. 14. 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
        3. User Fidelizing
          1. Web shortcuts
          2. RSS
          3. Open Search
          4. BlackBerry Web Signals
      2. Mobile Web Statistics
        1. Google Analytics for Mobile
        2. Yahoo! Web Analytics
        3. Mobilytics
        4. Motally Web Analytics
        5. Pion for Mobile Web
      3. Mobile Web Advertising
        1. Monetizing Your Website
          1. Google AdSense for mobile content
        2. AdMob
        3. Other Companies
      4. Mobile Web Social Features
        1. Facebook
        2. Share Content
    17. 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. Widget and Webapp MIME Types
    18. Index
    19. About the Author
    20. Colophon
    21. SPECIAL OFFER: Upgrade this ebook with O’Reilly