Programming the Mobile Web by Firtman, Maximiliano -- Read -- Imperial Library of Trantor

Index

Programming the Mobile Web Dedication Preface

Who This Book Is For Who This Book Is Not For What You’ll Learn Other Options If You Like (or Don’t Like) This Book Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. The Mobile Jungle

The Mobile Ecosystem

What Is a Mobile Device?

Portable Personal Companion Easy to use Connected

Mobile Device Categories

Mobile phones Feature phones Social phones Smartphones Tablets Nonphone mobile devices Netbooks

Brands, Models, and Platforms

Apple iOS Android

Versions Google’s Nexus devices Fragmentation

Windows

Windows Phone Windows 8 Windows Mobile and Embedded Compact

Nokia

Windows Phone Tablets Series 40 Symbian MeeGo

BlackBerry

The PlayBook tablet BlackBerry 10

Samsung Sony Mobile Motorola Mobililty Amazon LG Mobile HTC HP and Palm Firefox OS Ubuntu for Phones Chinese Platforms Other Platforms Smart TV Platforms

Technical Information

2. Understanding the Mobile Web

Myths of the Mobile Web

It’s Not the Mobile Web; It’s Just the Web! You Don’t Need to Do Anything Special About Your Desktop Website One Website Should Work for All Devices (Desktop, Mobile, TV) Just Create an HTML File with a Width of 320 Pixels, and You Have a Mobile Website Native Mobile Applications Will Kill the Mobile Web People Are Not Using Their Mobile Browsers

What Is the Mobile Web?

Differences

Mobile Web Eras

WAP 1 WAP 2.0

The dotMobi era The iPhone era The mobile HTML5 era

The Mobile Browsing Experience

Navigation Methods Zoom Experience Reflow Layout Engines Direct Versus Cloud-Based Browsers Multipage Experience Web Engines

Rendering engines JavaScript engines

Fragmentation

Display

Resolution Physical dimensions Pixel density ratio Aspect ratio

Input Methods Other Features

Market Statistics

3. Browsers and Web Platforms

Web Platforms That Are Not Browsers

HTML5 Web Apps

iOS web apps Chrome apps Firefox open web apps Symbian standalone web apps S40 web apps Samsung web API

Web Views Pseudo-Browsers Native Web Apps, Packaged Apps, and Hybrids

Platform-specific solutions Apache Cordova and Adobe PhoneGap Sencha Touch Appcelerator Titanium

Ebooks

Mobile Browsers

Preinstalled Browsers

Safari on iOS Android browser Google Chrome Amazon Silk Internet Explorer Nokia Browser

Nokia Browser for Series 40 Nokia Browser for Symbian Nokia Browser for MeeGo

webOS browser BlackBerry browser UC Browser Samsung Dolfin & Jasmine LG Phantom NetFront Myriad browser Obigo browser Legacy mobile browsers

MicroB for Maemo Sony Mobile (formerly Sony Ericsson) browsers Motorola Mobile Internet Browser (MIB)

User-Installable Browsers

Opera Mobile Opera Mini Firefox Dolphin Baidu Browser SkyFire

Browser Overview

4. Tools for Mobile Web Development

Working with Code

Adobe Dreamweaver Adobe Edge Tools Microsoft Visual Studio and WebMatrix Eclipse Native Web IDEs

Testing

Emulators and Simulators

Android emulator iOS Simulator Nokia emulators BlackBerry simulators

Ripple BlackBerry smartphones PlayBook and BB10

webOS emulator Windows emulators Opera Mobile Emulator

Opera Mini Simulator

Other official emulation platforms Adobe Device Central Keynote MITE Comparison Remote emulation services

BrowserStack Browshot

Real Device Testing

Adobe Edge Inspect

Remote Labs

Nokia Remote Device Access Samsung Remote Test Lab Keynote DeviceAnywhere

Usage for mobile web testing Testing automation

Perfecto Mobile

Pricing structure Main features

Production Environment

Web Hosting Domain Error Management Statistics

5. Architecture and Design

Mobile Strategy

When to Get Out of the Browser Context Server-Side Adaptation Progressive Enhancement Responsive Web Design

Responsive layouts Responsive images

RESS

Navigation Design and User Experience

Touch Design Patterns Tablet Patterns Official UI Guidelines What Not to Do

6. Markups and Standards

First, the Very Old Ones

WML

Current Standards

Politics of the Mobile Web

Managing multiple standards

Delivering Markup

Charset encoding Conclusion about MIME types and DOCTYPEs

XHTML Mobile Profile and Basic

Available Tags Official Noncompatible Features Creating Our First Compatible Template Markup Additions

Mobile HTML5

Creating Our First HTML5 Template Syntax Rules New Elements

CSS for Mobile

WCSS Extensions

Access keys Marquees CSS form extensions

CSS3

HTML5 Compatibility Levels

Testing Your Browser

HTML5 Test Ringmark

7. Basics of Mobile HTML5

The Document Head

Title Website Icons Home Screen Icons

Apple Touch Icons

Icon titles

Other platforms using Apple’s link

Nokia Browser for Symbian Nokia Browser for MeeGo BlackBerry browser Android browser

Windows Start tiles

Live badge notifications

Summary of Home screen icon compatibility Native and installed web app icons

The Viewport

The problem Viewport declaration What is device width? Give me back the pixels Landscape behavior Viewports in CSS

Viewport compatibility Viewports for older devices

Changing the Navigation Method Removing Automatic Links Metadata for Sharing Hiding the URL Address Bar Native App Integration

iOS Smart App Banners Windows Store app connections

The Document Body

Main Structure

Go to top

HTML5 Mobile Boilerplate The Content

Block Elements Lists Tables Frames Links

New windows Navigation lists

Accessibility

WAI-ARIA Accessibility testing

8. HTML5 Forms

Form Design Form Elements

Select Lists

Option groups

Radio Buttons and Checkboxes Buttons Hidden Fields Text Input Fields

Data lists for suggestions Multiline text controls Rich text controls

contenteditable WYSIHTML5

Pop-up controls

Range Slider Fields Date Input Fields File Selection Fields

Actions with files The HTML Media Capture extension Mobile browser compatibility

Noninteractive Form Elements

Form Control Attributes

Placeholder autofocus autocomplete readonly Input Validation Attributes Safari Extensions Firefox Extensions XHTML Mobile inputmode Additional Form Attributes

Form Validation

HTML5 Validation

CSS validation pseudoclasses Constraints validation API

WAP CSS Validation

9. Feature and Device Detection

Possible Problems

Possible Solutions

About polyfills

Informational Websites

Can I Use MobileHTML5.org WebPlatform.org

Client-Side Detection

HTML Fallbacks CSS Fallbacks

CSS conditionals

Vendor Prefixes

CSS preprocessors

SASS LESS

-prefix-free Static tools for prefixes

JavaScript Fallbacks

Are you there? Vendor prefixes

Modernizr

Conditional loading All the properties HTML5 main features CSS main mobile features Other features

Polyfills Platform Detection

Detect Mobile Browsers

Server-Side Detection

HTTP

The request The request header The user agent What we can identify The User Agent Profile User agent tricks

Detecting the Context

How to read a header How to read the IP address

Cloud-Based Browsers

Opera Mini Xpress browser Amazon Silk

Mobile Detection Transcoders Device Libraries

WURFL

Architecture Capabilities WURFL Standalone API (OnSite) PHP API installation Using the PHP API The WURFL Cloud API

DeviceAtlas

Properties Cloud API

DetectRight Movila DetectFree 51Degrees.mobi OpenDDR

10. Images and Media

Images

Image Formats

Animation formats 3D formats Inline images Format compatibility

Using the img Element Responsive Images

Sencha.io Src

Local Pictograms

ISO pictograms OMA pictograms

Dealing with Multiple Screen Densities

Using Vector-Based Solutions Providing One Single Image

Using img elements Using background images

Providing Image Alternatives

Using devicePixelRatio Using media queries Using image sets The picture element

SVG

Tools for SVG SVG for beginners Embedding the SVG in XHTML Embedding the SVG using img Inline SVG Raphaël

Canvas

The context Lines and strokes Drawing methods Advanced features Canvas as native code Canvas as a background Exporting canvas drawings Canvas and pixel density WebGL Canvas compatibility

Adobe Flash Video

Containers and Codecs

Reference movies for iOS

Delivering Video

Linking to video files

The HTML5 video Element

Advanced declarations Providing fallbacks Video player API Streaming to Apple TV

Streaming

HTTP Live Streaming

Embedding with object Video Compatibility

Audio

Invisible Audio Player Web Audio API Audio Compatibility

11. CSS for Mobile Browsers

Where to Insert the CSS Media Queries

CSS3 Media Queries

Media features all versus only screen Useful queries CSS4 media queries Internet Explorer 10 snap state

Selectors CSS Techniques

Reset CSS Files Text Formatting

Font family CSS3 font-face Font size Text shadows Text overflow Text adjustment for small screens Text stroke and fill Multicolumn layout

Common Patterns

Display Properties

Absolute and floating positions Fixed position Modern layout techniques

Rounded Corners Border Image Pseudoclasses Backgrounds Scrollable Areas Content Opacity Cursor Management Selection Management

Selection styles

Touch Callout Highlight Color Appearance Override

CSS Sprites

Samples and Compatibility CSS Sprites Alternatives

Inline images Join images

CSS3 Modules

Gradients Reflection Masks Transforms

Perspective Transform style Backface visibility The CardFlip pattern

Transitions

Animation properties Transition ending

Animations

@keyframes Animation events

CSS Filter Effects CSS Regions and Exclusions New CSS Values and Units

12. JavaScript Mobile

Coding for Mobile Browsers

HTML5 Script Extensions Code Execution Cloud-Based Browsers

Nokia Mobile Web Library

JavaScript Debugging and Profiling Battery Consumption Background Execution

Status Detection

The Page Visibility API Wakeup detection using timers

Background Tab Notification Trick Background Execution Compatibility Push Notifications

Supported Technologies

The Document Object Model The Selectors API JSON Binary Data Web Workers HTML5 APIs Native Web App APIs

Standard JavaScript Behavior

Standard Dialogs History and URL Management

History API extensions The hashchange event

Manipulating Windows Focus and Scroll Management Timers

Animation timing

Changing the Title Cookie Management Event Handling

Managing events Load and unload events Click events

Double tap

Focusable and form events Over events Resizing, scrolling, and orientation change events Key events

Useful keys for some devices

Preventing default behavior

JavaScript Libraries

Mobile Libraries

Zepto.js baseJS jQMobi QuoJS XUI

UI Frameworks

Sencha Touch jQuery Mobile Enyo Montage iUI jQTouch JavaScript Mobile UI Patterns

Clear text box buttons Autogrowing textareas Floating bars Cascading menus Autocompletion

13. Offline Apps, Storage, and Networks

Offline Web Apps

The Manifest File

Reusing the manifest

Accessing Online Resources

Fallbacks

Updating the Package Deleting the Package The JavaScript API

Cache events

Compatibility and Limits

Client-Side Storage

Web Storage

Limits

The Web SQL Database API

Limits

The IndexedDB API The FileSystem API User Intervention Debugging Storage

Network Communication

Ajax

Cross-domain requests JSONP Ajax with offline resources

Server Sent Events

The server component

WebSockets

Socket.IO

14. Geolocation and Maps

Location Techniques

Accuracy Indoor Location Client Techniques

GPS A-GPS Cell information WiFi Positioning System

Server Techniques

IP address Carrier connection Language Indoor location

Asking the User

Detecting the Location

The W3C Geolocation API

Getting the position Handling error messages Tracking the location Defining optional attributes Geolocation API 2.0

Carrier Network Location APIs

GSMA OneAPI Specific carriers’ APIs

IP Geolocation

Reading the IP address Google’s ClientLocation object

Maps/Navigation App Integration

Google Maps for Android

Directions and navigation Street View

iOS Maps

Directions and navigation

Bing Maps

Showing a Map

Google Maps API v3 Google Maps Static API Nokia Here

15. Device Interaction

Mobile-Specific URIs

Making a Call Sending Email Sending an SMS Other Communication Apps Adding a Contact to the Phonebook Integrating with Other Applications

iOS URL schemes

X-Callback-URL

Android intents Symbian local applications Windows apps

JavaScript APIs

Touch

Apple Touch Events API

Disabling scrolling BlackBerry touch behavior

W3C Touch Event API Compatibility Microsoft pointer events

Pointer detection Touch action style Working with the touches and clicks Simulating touch on desktops

Gestures

Swipe gesture Frameworks Apple Gesture API Microsoft Gesture API

Starting a gesture detection Gesture change values

Sensors

DeviceOrientation Event

Moving a ball

Compass information Apache Cordova API

Network Information

Old specification New specification

File Management

Full FileSystem API

Full Screen Web Notifications Camera

getUserMedia Apache Cordova APIs

Battery Vibration Other APIs

W3C Apache Cordova Mozilla For the future

16. Native and Installed Web Apps

Web App Pros and Cons Architecture of a Web App

Meta Configuration Platform Access Data Storage Network Access Logic User Interface Packaging Distribution

Standards

Packaging and Configuration Standards

Official Platforms

iOS Web Apps

iOS web app pros and cons Full-screen meta tag Changing status bar appearance Defining startup images How it looks APIs Links Distribution Cubiq Add to Home Screen

Symbian Standalone Web Apps Windows 8 Store Apps

Windows Runtime WinJS JavaScript UI controls Application UI state Navigation Advanced topics

Mozilla Open Web Apps

App origin App manifest Distribution Checking if the app is already installed

Chrome Apps Samsung Web Apps BlackBerry WebWorks Apps

Configuration file WebWorks APIs bbUI.js Packaging and signing Ripple Distribution

Nokia S40 Web Apps

Configuration Mobile Web Library Gesture and keypad events Storage API Tools Distribution

Nokia Symbian Web Apps

Package Features JavaScript API MiniView Tools and libraries Distribution

Apache Cordova/PhoneGap Apps

Template Creation Cordova Web View CordovaJS

DeviceReady event Other events APIs

Notification API

Plug-ins

Distribution

iOS App Store Android Stores BlackBerry AppWorld Microsoft Windows Store Microsoft Windows Phone Store

Full-Screen App Patterns

Multiple Views Layout Input Method One-View Widget Dynamic Application Engine Reload My Web App

Live Reload

17. Content Delivery

MIME Types

Static Definition

Apache Internet Information Server

Dynamic Definition

File Delivery

Direct Linking Delayed Linking OMA Download

Download descriptor Post-download status report

Application and Games Delivery

iOS Applications

Ad hoc OTA installation

Android Applications

Bypassing the store

Windows Applications Java ME

Serving JAD files Java ME for BlackBerry

18. Debugging and Performance

Debugging

Server-Side Debugging

User agent spoofing HTTP sniffing Bandwidth simulators

Markup Debugging

HTML5 validators W3C mobileOK Checker ready.mobi

Client-Side Debugging

iOS Remote Web Inspector

Connecting the session Working with the session

Older iOS debugging tools Chrome for Android debugger Firefox remote debugging BlackBerry remote Web Inspector Opera Dragonfly Android Debug Bridge Weinre JSConsole Bookmarklet solutions Other web-based solutions

Performance Optimization

Measurement

Remote profilers HTTP proxies Akamai Mobitest Performance APIs

Best Practices

Reducing requests Compressing HTTP compression Other tips JavaScript performance

19. Distribution and Social Web 2.0

Mobile SEO

Spiders and Discoverability Mobile Sitemaps

How Users Find You

SMS Invitation Email Invitation Mobile Tiny URL QR Codes NFC Tags

User Fidelizing

Web Shortcuts RSS Open Search Apple Passbook

Mobile Web Statistics

Google Analytics for Mobile Yahoo! Web Analytics Mobilytics

Monetizing Your Website

Mobile Advertisements

Google AdSense for mobile content

Mobile Web Social Features

Authentication and Sharing APIs

Facebook Connect Twitter for Websites Google APIs

Sharing Content

A. MIME Types for Mobile Content

Markup and Script MIME Types Image MIME Types Mobile Content MIME Types Audio and Video MIME Types Webapp MIME Types

Index About the Author Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →