Tài liệu HTML5 Mobile Development Cookbook doc

HTML5 Mobile

Development

Cookbook

Over 60 recipes for building fast, responsive HTML5

mobile websites for iPhone 5, Android, Windows Phone,

and Blackberry

Shi Chuan

BIRMINGHAM - MUMBAI

HTML5 Mobile Development Cookbook

Copyright © 2012 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or

transmitted in any form or by any means, without the prior written permission of the publisher,

except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the

information presented. However, the information contained in this book is sold without

warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers

and distributors will be held liable for any damages caused or alleged to be caused directly

or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies

and products mentioned in this book by the appropriate use of capitals. However, Packt

Publishing cannot guarantee the accuracy of this information.

First published: February, 2012

Production Reference: 1240112

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-196-3

www.packtpub.com

Cover Image by Rakesh Shejwal ([email protected])

Credits

Author

Shi Chuan

Reviewers

Dale Cruse

Sarah Soward

Shawn McBurnie

Acquisition Editor

Alina Lewis

Lead Technical Editor

Shreerang Deshpande

Technical Editor

Sakina Kaydawala

Project Coordinator

Leena Purkait

Proofreader

Bernadette Watkins

Indexer

Monica Ajmera Mehta

Production Coordinator

Prachali Bhiwandkar

Cover Work

Prachali Bhiwandkar

About the Author

Shi Chuan has over five years experience in web development. He is a member of the

HTML5 Boilerplate project, lead developer of Mobile Boilerplate (http://h5bp.com/

mobile), owner of the JavaScript Patterns project (http://shichuan.github.com/

javascript-patterns). He is now an independent developer living in the UK and China.

You can find out more about him on his personal website at: http://www.blog.highub.

com. He loves reading, travelling, great food, and eclectic and indie music.

I would like to thank my parents, and the whole family who have been my

positive and unconditional supporters. I would also like to thank Jiang Xue,

who taught me so many things about life, in ways she does not even know.

I would also like to thank my friends from the Boilerplate Team - Paul Irish,

Divya Manian, Mathias Bynens, and Nicolas Gallagher. Former CTO of the

company I worked for - Chi Tran. They have been and will always be my

inspiration and aspiration.

About the Reviewers

Dale Cruse, a Boston-area web developer, is the author of HTML5 Multimedia

Development Cookbook. He has been publishing websites for high-profile clients ranging

from the U.S. Army to Bloomingdale's since 1995. He has been a guest lecturer at the Art

Institute of New England and is currently pursuing speaking opportunities. Contact him at

http://dalejcruse.com. He is also the author of the Champagne blog Drinks Are On

Me at http://drinksareonme.net.

Sarah Soward teaches coding, design, and the Adobe Creative suite at the Bay Area

Video Coalition and AcademyX. In addition to teaching, she also developed the curriculum for

BAVC's HTML5/CSS3, Color Theory, Typography, Fireworks, and Web Design Workflow classes.

For a number of years, she was the Art Director of non-profits. She is the co-author of the

WordPress and Flash Cookbook. When she isn't teaching, she's designing and developing

everything from business cards to websites, painting rhinos, building stuff, and banging on a

drum till her hands keep their own beat. She likes to keep busy.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to

your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub

files available? You can upgrade to the eBook version at www.PacktPub.com and as a print

book customer, you are entitled to a discount on the eBook copy. Get in touch with us at

[email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up

for a range of free newsletters and receive exclusive discounts and offers on Packt books

and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book

library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

f Fully searchable across every book published by Packt

f Copy and paste, print and bookmark content

f On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access

PacktLib today and view nine entirely free books. Simply use your login credentials for

immediate access.

For Claire Jiang Xue

Table of Contents

Preface 1

Chapter 1: HTML5 and the Mobile Web 5

Introduction 5

Setting up mobile development tools 9

BlackBerry simulator 11

Setting up the mobile development environment 13

Using HTML5 on the mobile web 18

Rendering HTML5 across different browsers 20

Designing for mobile 23

Defining a content strategy 31

Chapter 2: Mobile Setup and Optimization 35

Introduction 35

Adding a home screen button icon 36

Preventing text resize 39

Optimizing viewport width 44

Fixing Mobile Safari screen re-flow scale 48

Launching phone-specific programs from the browser 52

Enabling iPhone start screen in full screen mode 56

Prevent iOS from zooming onfocus 58

Disabling or limiting WebKit features 59

Chapter 3: Interactive Media with Mobile Events 63

Introduction 63

Moving an element with touch events 63

Detecting and handling orientation event 66

Rotating an HTML element with gesture events 74

Making a carousel with swipe events 77

Zooming an image with gesture events 82

ii

Table of Contents

Chapter 4: Building Fast and Responsive Websites 85

Introduction 85

Building pages using HTML5 semantics 86

Using CSS3 features for progressive enhancement 89

Applying responsive design 94

Optimizing polyfills script loading 97

Applying user agent detection 100

Adding mobile bookmark bubble to the home page 102

Building Contact page with textarea and autogrow forms 104

Making buttons with instant response 106

Hiding WebKit chrome 109

Building a mobile sitemap 112

Chapter 5: Mobile Device Access 115

Introduction 115

Getting your location 116

Handling cross-browser geolocation 119

Displaying a map based on your geolocation 121

Displaying location in realtime 126

Using the DeviceOrientation event 130

Using geolocation with foursquare 134

Chapter 6: Mobile Rich Media 137

Introduction 137

Playing audio on mobile 138

Streaming video on your mobile 142

Using offline caching 145

Using Web Storage on mobile 148

Using web workers 152

Creating Flash-like navigation with session and history API 157

Chapter 7: Mobile Debugging 163

Introduction 163

Remote debugging with Opera Dragonfly 163

Remote debugging with weinre 167

Using Firebug on mobile 171

Remote JavaScript debugging with JS Console 174

Setting up Mobile Safari debugging 179

Chapter 8: Server-Side Tuning 187

Introduction 187

Preventing mobile transcoding 188

Adding mobile MIME types 189

iii

Table of Contents

Making cache manifest display properly 191

Setting far future expire headers 191

Compressing files using Gzip 194

Removing ETags 197

Chapter 9: Mobile Performance Testing 201

Introduction 201

Speed testing your device with Blaze 202

Analyzing mobile page speed online 205

Analyzing mobile performance with PCAP Web Performance Analyzer 207

Using HTTP Archive Mobile 209

Storing performance data with Jdrop 211

Chapter 10: Emerging Mobile Web Features 215

Introduction 215

window.onerror 216

Using ECMAScript 5 methods 217

New HTML5 input types 222

Inline SVG in text/HTML 224

position:fixed 225

overflow:scroll 226

Index 229