Programming the Mobile Web

Programming the Mobile Web

by Maximiliano Firtman
Released July 2010
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596807788

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.

Buy on Amazon
Start your free trial

Book description

Today's market for mobile apps goes beyond the iPhone to include BlackBerry, Nokia, Windows Phone, and smartphones powered by Android, webOS, and other platforms. If you're an experienced web developer, this book shows you how to build a standard app core that you can extend to work with specific devices. You'll learn the particulars and pitfalls of building mobile apps with HTML, CSS, and other standard web tools.

You'll also explore platform variations, finicky mobile browsers, Ajax design patterns for mobile, and much more. Before you know it, you'll be able to create mashups using Web 2.0 APIs in apps for the App Store, App World, OVI Store, Android Market, and other online retailers.

  • Learn how to use your existing web skills to move into mobile development
  • Discover key differences in mobile app design and navigation, including touch devices
  • Use HTML, CSS, JavaScript, and Ajax to create effective user interfaces in the mobile environment
  • Learn about technologies such as HTML5, XHTML MP, and WebKit extensions
  • Understand variations of platforms such as Symbian, BlackBerry, webOS, Bada, Android, and iOS for iPhone and iPad
  • Bypass the browser to create offline apps and widgets using web technologies

Publisher resources

View/Submit Errata

Table of contents

  1. Dedication
  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. Copyright

Product information

  • Title: Programming the Mobile Web
  • Author(s): Maximiliano Firtman
  • Release date: July 2010
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596807788