You are previewing Programming the Mobile Web, 2nd Edition.

Programming the Mobile Web, 2nd Edition

Cover of Programming the Mobile Web, 2nd Edition by Maximiliano Firtman Published by O'Reilly Media, Inc.
  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?
      2. Mobile Device Categories
    2. Brands, Models, and Platforms
      1. Apple iOS
      2. Android
      3. Windows
      4. Nokia
      5. BlackBerry
      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
    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
    5. Fragmentation
      1. Display
    6. Market Statistics
  4. 3. Browsers and Web Platforms
    1. Web platforms that are not browsers
      1. HTML5 Webapps
      2. Web Views
      3. Pseudo-browsers
      4. Native Web apps, packaged apps and hybrids
      5. Ebooks
    2. Mobile Browsers
      1. Preinstalled Browsers
      2. User-Installable Browsers
      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
      2. Real devices testing
      3. Remote Labs
    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
      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
      2. Delivering Markup
    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
      2. CSS 3
    6. HTML5 Compatibility levels
      1. Testing your browser
    7. Confusion
  8. 7. Basics of Mobile HTML5
    1. Heading Structure
      1. Title
      2. Website icon
      3. Home Screen icons
      4. The viewport
      5. Changing the navigation method
      6. Removing automatic links
      7. Meta data for sharing
      8. Hiding URL address bar
      9. Native app integration
    2. The Document Body
      1. Main Structure
    3. HTML5 Mobile Boilerplate
    4. The content
      1. Block Elements
      2. Lists
      3. Tables
      4. Frames
      5. Links
      6. Accessibility
  9. 8. HTML5 Forms
    1. Form design
    2. Form elements
      1. Select lists
      2. Radio buttons and checkboxes
      3. Buttons
      4. Hidden fields
      5. Text input fields
      6. Range slider field
      7. Date input fields
      8. File selection fields
      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 <code xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg" class="literal">inputmode</code>
      9. Additional form attributes
    4. Form validation
      1. HTML5 validation
      2. WAP CSS validation
  10. 9. Feature and device detection
    1. Possible problems
      1. Possible solutions
    2. Informational websites
      1. Can I use
      2. MobileHTML5.org
      3. Web Platform
    3. Client-side detection
      1. HTML Fallbacks
      2. CSS Fallbacks
      3. Vendor Prefixes
      4. JavaScript fallbacks
      5. Modernizr
      6. Polyfills
      7. Platform detection
    4. Server-side detection
      1. HTTP
      2. Detecting the Context
      3. Cloud-based browsers
      4. Mobile detection
      5. Transcoders
      6. Device Libraries
  11. 10. Images and Media
    1. Images
      1. Image formats
      2. Using the img element
      3. Responsive Images
      4. Local pictograms
    2. Multiple density screens
      1. Using vector-based solutions
      2. Providing one single image
      3. Providing image alternatives
      4. SVG
      5. Canvas
    3. Adobe Flash
    4. Video
      1. Containers and Codecs
      2. Delivering video
      3. HTML5 video element
      4. 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
    3. Selectors
    4. CSS Techniques
      1. Reset CSS Files
      2. Text Format
    5. Common Patterns
      1. Display Properties
      2. Rounded corners
      3. Border Image
      4. Pseudoclasses
      5. Backgrounds
      6. Scrollable areas
      7. Content
      8. Opacity
      9. Cursor management
      10. Selection management
      11. Touch Callout
      12. Highlight color
      13. Appearance override
    6. CSS Sprites
      1. Samples and Compatibility
      2. CSS Sprites Alternatives
      3. CSS3 Modules
      4. Gradients
      5. Reflection
      6. Masks
      7. Transforms
      8. Transitions
      9. Animations
      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
      4. JavaScript debugging and profiling
      5. Battery consumption
    2. Background execution
      1. Status detection
      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
      3. Manipulating windows
      4. Focus and scroll management
      5. Timers
      6. Changing the title
      7. Cookie management
      8. Event Handling
    5. JavaScript Libraries
      1. Mobile Libraries
    6. UI Frameworks
      1. Sencha Touch
      2. jQuery Mobile
      3. Enyo
      4. Montage
      5. iUI
      6. jQTouch
      7. JavaScript Mobile UI Patterns
  14. 13. Offline, Storage and Network
    1. Offline webapps
      1. The manifest file
      2. Reusing the manifest
      3. Accessing online resources
      4. Updating the package
      5. Deleting the package
      6. JavaScript API
      7. Compatibility and limits
    2. Client-side Storage
      1. Web Storage
      2. Web SQL Database API
      3. Indexed Database API
      4. FileSystem API
      5. User’s power
      6. Debugging storages
    3. Network communication
      1. Ajax
      2. Server Sent Events
      3. Web Sockets
  15. 14. Geolocation and Maps
    1. Location Techniques
      1. Accuracy
      2. Indoor Location
      3. Client Techniques
      4. Server Techniques
      5. Asking the User
    2. Detecting the Location
      1. W3C Geolocation API
      2. Carrier network location APIs
      3. IP Geolocation
    3. Maps and Navigation app integration
      1. Google Maps for Android
      2. iOS Maps
      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
    2. JavaScript APIs
      1. Touch
      2. Gestures
      3. Sensors
      4. Network Information
      5. File Management
      6. Full Screen
      7. Web Notifications
      8. Camera
      9. Battery
      10. Vibration
      11. Other APIs
  17. 16. Native and installed Webapps
    1.  
      1. Pros and Cons
      2. Architecture
    2. Standards
      1. Packaging and Configuration Standards
    3. Official platforms
      1. iOS Web apps
      2. Symbian standalone webapps
      3. Windows 8 Store apps
      4. Mozilla Open Web Apps
      5. Chrome apps
      6. Samsung Web apps
      7. BlackBerry WebWorks
      8. Nokia S40 webapps
      9. Nokia Symbian webapps
    4. Apache Cordova / PhoneGap
      1. Template creation
      2. Cordova WebView
      3. CordovaJS
      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
  18. 17. Content Delivery
    1. MIME Types
      1. Static definition
      2. Dynamic definition
    2. File Delivery
      1. Direct linking
      2. Delayed linking
      3. OMA Download
    3. Application and Games Delivery
      1. iOS applications
      2. Android applications
      3. Windows applications
      4. Java ME
  19. 18. Debugging and Performance
    1. Debugging
      1. Server-Side Debugging
      2. Markup Debugging
      3. Client-Side Debugging
    2. Performance Optimization
      1. Measurement
      2. Best Practices
  20. 19. Distribution and Social Web 2.0
    1. Mobile SEO
      1. Spiders and Discoverability
      2. How Users Find You
      3. User Fidelizing
    2. Mobile Web Statistics
      1. Google Analytics for Mobile
      2. Yahoo! Web Analytics
      3. Mobilytics
    3. Monetizing your website
      1. Mobile Advertisement
    4. Mobile Web Social Features
      1. Authentication and sharing 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
O'Reilly logo

Chapter 18. Debugging and Performance

Debugging and performance optimization are the two scariest activities in the mobile web development world after testing, but don’t worry. There are lots of ways to tame them. On Chapter 4 we have already discussed tools and techniques for testing. In this chapter we will focus on more advanced features, for debugging and performance.

Debugging

For years I’ve complained that web developers were second-class developers against native developers in terms of tools and documentation. Fortunately starting in 2012, vendors realize that web developers needs more tools for debugging and performance measurement and the tools’ catalog available today is growing.

Server-Side Debugging

To debug server-side detection, adaptation, or content delivery scripts, we can use some HTTP tools before turning to real devices.

User agent spoofing

User agent spoofing tools allow us to cheat the server about the browser that is currently requesting the webpage changing how the client identifies itself to the server. Therefore using a desktop browser we can say it is a mobile browser and the server will fall into the trap. We can use these tools to debug mobile redirects and detection frameworks as we have covered in Chapter 9 without the need of real devices or even emulators.

You can then browse to any website and see how the server manages the user agent and which content it serves. Remember to go back to the default user agent after finishing the debug session, or you may ...

The best content for your career. Discover unlimited learning on demand for around $1/day.