Book Image

HTML5 Mobile Development Cookbook

By : Shi Chuan
Book Image

HTML5 Mobile Development Cookbook

By: Shi Chuan

Overview of this book

<p>How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question. This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a range of mobile devices. <br /><br />HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.<br /><br />Build a rock-solid default mobile HTML template and understand mobile user interaction. Make your site fast and responsive, leveraging the uniqueness of location-based mobile features and mobile rich media. Make your mobile website perfect using debugging, performance optimization and server-side tuning. The book finishes with a sneak preview of future mobile web technologies.</p>

Related Content you might be interested in

Current Title:

Small book image
HTML5 Mobile Development Cookbook
Shi Chuan
Feb, 2012 | 254 pages
No titles found
Table of Contents (16 chapters)
HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
HTML5 and the Mobile Web
HTML5 and the Mobile Web
Introduction
Setting up mobile development tools
BlackBerry simulator
Setting up the mobile development environment
Using HTML5 on the mobile web
Rendering HTML5 across different browsers
Designing for mobile
Defining a content strategy
2
Mobile Setup and Optimization
Mobile Setup and Optimization
Introduction
Adding a home screen button icon
Preventing text resize
Optimizing viewport width
Fixing Mobile Safari screen re-flow scale
Launching phone-specific programs from the browser
Enabling iPhone start screen in full screen mode
Prevent iOS from zooming onfocus
Disabling or limiting WebKit features
3
Interactive Media with Mobile Events
Interactive Media with Mobile Events
Introduction
Moving an element with touch events
Detecting and handling orientation event
Rotating an HTML element with gesture events
Making a carousel with swipe events
Zooming an image with gesture events
4
Building Fast and Responsive Websites
Building Fast and Responsive Websites
Introduction
Building pages using HTML5 semantics
Using CSS3 features for progressive enhancement
Applying responsive design
Optimizing polyfills script loading
Applying user agent detection
Adding mobile bookmark bubble to the home page
Building Contact page with textarea and autogrow forms
Making buttons with instant response
Hiding WebKit chrome
Building a mobile sitemap
5
Mobile Device Access
Mobile Device Access
Introduction
Getting your location
Handling cross-browser geolocation
Displaying a map based on your geolocation
Displaying location in realtime
Using the DeviceOrientation event
Using geolocation with foursquare
6
Mobile Rich Media
Mobile Rich Media
Introduction
Playing audio on mobile
Streaming video on your mobile
Using offline caching
Using Web Storage on mobile
Using web workers
Creating Flash-like navigation with session and history API
7
Mobile Debugging
Mobile Debugging
Introduction
Remote debugging with Opera Dragonfly
Remote debugging with weinre
Using Firebug on mobile
Remote JavaScript debugging with JS Console
Setting up Mobile Safari debugging
8
Server-Side Tuning
Server-Side Tuning
Introduction
Preventing mobile transcoding
Adding mobile MIME types
Making cache manifest display properly
Setting far future expire headers
Compressing files using Gzip
Removing ETags
9
Mobile Performance Testing
Mobile Performance Testing
Introduction
Speed testing your device with Blaze
Analyzing mobile page speed online
Analyzing mobile performance with PCAP Web Performance Analyzer
Using HTTP Archive Mobile
Storing performance data with Jdrop
10
Emerging Mobile Web Features
Emerging Mobile Web Features
Introduction
window.onerror
Using ECMAScript 5 methods
New HTML5 input types
Inline SVG in text/HTML
position:fixed
overflow:scroll

Remote debugging with weinre

Target browsers: iOS, Android, Blackberry, webOS

In the previous recipe, we saw how you can debug Opera mobile pages remotely. In this recipe, we will see how we can debug remotely in other mobile devices. Weinre is a Web Inspector Remote.

The supported OS include:

  • Android 2.2 Browser application

  • Android 2.2 w/PhoneGap 0.9.2iOS 4.2.x

  • Mobile Safari application

  • BlackBerry v6.x simulator

  • webOS 2.x (unspecified version)

Getting ready

First, we must download weinre from the official website; there are two versions available, one for PC and one for Mac:

https://github.com/phonegap/weinre/archives/master

How to do it...

  1. 1. First, get your IP address by running ipconfig in your console.

  2. 2. Create an HTML document and name it ch07r01.html. Replace 192.168.1.11 with your own IP address:

    <!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
Previous Section
End of Section 4
Next Section