Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript pdf

COMPANION eBOOK SEE LAST PAGE FOR DETAILS ON $10 eBOOK VERSION

US $39.99

Shelve in

Mobile Development

User level:

www.apress.com Beginner

SOURCE CODE ONLINE

BOOKS FOR PROFESSIONALS BY PROFESSIONALS®

this print for content only—size & color not accurate

CYAN

MAGENTA

YELLOW

BLACK

PANTONE 123 C

SPOT MATTE

ISBN 978-1-4302-3045-8

9 781430 230458

5 39 9 9

This book will help you join the thousands of successful iPhone App devel￾opers without needing to learn Objective-C or the Cocoa touch APIs. If you

want to apply your existing web development skills to iPhone and iPad devel￾opment, then now you can. WebKit’s support for HTML5 means any web devel￾oper can create compelling apps for both the iPhone and the larger-screen iPad.

Beginning iPhone & iPad Web Apps takes you through the latest Mobile Web

Standards as well as the specific features of the iPhone and iPad. You’ll learn

about WebKit and Mobile Safari, HTML5 and CSS3, Vector Graphics and Multi￾media support. You’ll discover the built-in hardware features of the iPhone and

iPad and how best to take advantage of them.

The market for web apps for the iPhone and iPad is expanding rapidly. You’ll

want to know about all the advantages, and Beginning iPhone & iPad Web Apps

is the perfect starting point.

What you’ll learn:

• How to take your existing web skills and deploy them on iPad and iPhone

• User interface design basics for both the smaller iPhone screen and the

larger iPad display

• The keys to web app development built into HTML5, WebKit, and Mobile

Safari

• How to address Apple’s multitouch screen interface and interact with

Cocoa touch APIs

This book is for web designers and developers who want to use their hard￾earned skills and knowledge to create compelling mobile web experiences for

iPhone and iPad users.

Trim: 7.5 x 9.25 spine = 0.96875" 512 page count

Creating Custom Web Sites and

Web Apps for iOS Devices

Beginning

iPhone and iPad

Web Apps

Scripting with HTML5, CSS3 and JavaScript

Chris Apers | Daniel Paterson

Apers Paterson iPhone and iPad Web Apps

Companion

eBook

Available Beginning

Download from Wow! eBook <www.wowebook.com>

i

Beginning iPhone and

iPad Web Apps

Scripting with HTML5, CSS3,

and JavaScript

■ ■ ■

Chris Apers

Daniel Paterson

ii

Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript

Copyright © 2010 by Chris Apers and Daniel Paterson

All rights reserved. No part of this work may be reproduced or transmitted in any form or by

any means, electronic or mechanical, including photocopying, recording, or by any

information storage or retrieval system, without the prior written permission of the

copyright owner and the publisher.

ISBN-13 (pbk): 978-1-4302-3045-8

ISBN-13 (electronic): 978-1-4302-3046-5

Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1

Trademarked names, logos, and images may appear in this book. Rather than use a

trademark symbol with every occurrence of a trademarked name, logo, or image we use the

names, logos, and images only in an editorial fashion and to the benefit of the trademark

owner, with no intention of infringement of the trademark.

The use in this publication of trade names, trademarks, service marks, and similar terms,

even if they are not identified as such, is not to be taken as an expression of opinion as to

whether or not they are subject to proprietary rights.

President and Publisher: Paul Manning

Lead Editor: Steve Anglin

Technical Reviewer: Paul Haine

Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan

Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes,

Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic

Shakeshaft, Matt Wade, Tom Welsh

Coordinating Editor: Adam Heath

Copy Editor: Kim Wimpsett

Compositor: MacPS, LLC

Indexer: BIM Indexing & Proofreading Services

Cover Designer: Anna Ishchenko

Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233

Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505,

e-mail [email protected], or visit www.springeronline.com.

For information on translations, please e-mail [email protected], or visit www.apress.com.

Apress and friends of ED books may be purchased in bulk for academic, corporate, or

promotional use. eBook versions and licenses are also available for most titles. For more

information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/

info/bulksales.

The information in this book is distributed on an “as is” basis, without warranty. Although

every precaution has been taken in the preparation of this work, neither the author(s) nor

Apress shall have any liability to any person or entity with respect to any loss or damage

caused or alleged to be caused directly or indirectly by the information contained in this

work.

The source code for this book is available to readers at www.apress.com.

iii

To Aoï, who had to put up with my moods for so long.

A thousand thanks. With love.

—Chris

To Alice, for I can never thank you enough

for the inspiration your love and brilliance provide.

—Daniel

iv

Contents at a Glance

■Contents .......................................................................................................... v

■About the Authors ..........................................................................................xv

■About the Technical Reviewer.......................................................................xvi

■Acknowledgments........................................................................................xvii

■Introduction.................................................................................................xviii

Part I: Getting Started with Web App Development............................................ 1

■Chapter 1: Development Tools......................................................................... 3

■Chapter 2: Development Environment........................................................... 13

■Chapter 3: Introducing Developer and Debugging Tools ............................... 29

Part II: Web App Design with HTML5 and CSS3................................................ 65

■Chapter 4: The Anatomy of a Web Application .............................................. 67

■Chapter 5: User Experience and Interface Guidelines ................................... 89

■Chapter 6: Interesting CSS Features for Your Web Application

User Interface ............................................................................ 117

■Chapter 7: Bitmap and Vector Graphics and Downloadable Fonts

with Canvas and SVG................................................................. 165

■Chapter 8: Embedding Audio and Video Content in

Your Web Application ................................................................ 219

■Chapter 9: Handling Transformations, Animations,

and Special Effects with CSS..................................................... 257

Part III: Going Futher with JavaScript and Web Standards ............................ 299

■Chapter 10: An Object-Oriented JavaScript Programming Primer.............. 301

■Chapter 11: Cross-Document Communication ............................................ 321

■Chapter 12: Ajax and Dynamic Content....................................................... 343

■Chapter 13: Using Touch and Gesture Events.............................................. 367

■Chapter 14: Location-Aware Web Applications........................................... 397

■Chapter 15: A Better Handling of Client-Side Data Storage......................... 431

■Index............................................................................................................ 467

v

Contents

■Contents at a Glance....................................................................................... iv

■About the Authors ..........................................................................................xv

■About the Technical Reviewer.......................................................................xvi

■Acknowledgments........................................................................................xvii

■Introduction.................................................................................................xviii

Part I: Getting Started with Web App Development............................................ 1

■Chapter 1: Development Tools......................................................................... 3

The Source Editor ...................................................................................................................................................3

Varanus Komodoensis .......................................................................................................................................3

Make Yourself Comfortable ...............................................................................................................................4

What About Dashcode?...........................................................................................................................................5

Using the Right Browser .........................................................................................................................................6

The WebKit.........................................................................................................................................................6

The Gecko and the Fox ......................................................................................................................................7

Opera .................................................................................................................................................................7

Internet Explorer, Lost at Sea ............................................................................................................................7

Developing Web-Wise.............................................................................................................................................8

Acid...Acid...Acid ................................................................................................................................................8

HTML5 Conformance .........................................................................................................................................8

A Satellite in Your Browser ................................................................................................................................8

Developing for iOS ..................................................................................................................................................9

Using the iPhone and iPad Simulator.................................................................................................................9

Using a Real Device Anyway............................................................................................................................10

The ADC Is Your Friend ....................................................................................................................................10

Summary ..............................................................................................................................................................11

■Chapter 2: Development Environment........................................................... 13

Serving the Web Application.................................................................................................................................13

Mac OS, Making Things Easy................................................................................................................................14

■ CONTENTS

vi

An Apache in Your Mac....................................................................................................................................14

The Script Engine.............................................................................................................................................15

Windows, Choose Your Weapons..........................................................................................................................16

An All-in-One Installation Process ...................................................................................................................17

Security Settings..............................................................................................................................................20

Linux, Take Control ...............................................................................................................................................22

Handling Multiple Hosts........................................................................................................................................23

Unix-Based System..........................................................................................................................................23

Windows-Based System ..................................................................................................................................24

Configuring Multiple Web Sites.............................................................................................................................24

Apache 2: Get Carried Away ............................................................................................................................24

The Windows Case...........................................................................................................................................26

Have You Made It? ................................................................................................................................................27

Bet You Have! .......................................................................................................................................................28

■Chapter 3: Introducing Developer and Debugging Tools ............................... 29

Making Friends with WebKit’s Developer Tools....................................................................................................29

Enabling the Develop Menu .............................................................................................................................30

The Develop Menu Exposed.............................................................................................................................30

Developing on Mobile Safari ............................................................................................................................32

Overview of the Web Inspector.............................................................................................................................34

The Developer Tools Window...........................................................................................................................35

Error Notifications............................................................................................................................................36

Master Your Code .................................................................................................................................................37

Make the Document Yours...............................................................................................................................37

Dig Your Style ..................................................................................................................................................38

Editing Styles ...................................................................................................................................................40

Metrics.............................................................................................................................................................40

Advanced Search.............................................................................................................................................43

The Resources Viewer ..........................................................................................................................................44

Debugging JavaScript...........................................................................................................................................46

Logging to the Console ....................................................................................................................................46

Using the Interactive Shell...............................................................................................................................48

Let the Debugger Do the Job ...........................................................................................................................49

The Life Cycle of Your Page ..................................................................................................................................55

Profiling Your Scripts ............................................................................................................................................57

Understanding the Profiles ..............................................................................................................................58

Filtering with the Search Field.........................................................................................................................59

Client-Side Data Storage ......................................................................................................................................60

Database Storage ............................................................................................................................................61

Cookies ............................................................................................................................................................61

Other Storage Features....................................................................................................................................61

Auditing Your Page ...............................................................................................................................................61

Still Unsure?..........................................................................................................................................................63

Summary ..............................................................................................................................................................63

Part II: Web App Design with HTML5 and CSS3................................................ 65

■Chapter 4: The Anatomy of a Web Application .............................................. 67

The iPhone Revolution ..........................................................................................................................................67

■ CONTENTS

vii

Belief in Web Apps...........................................................................................................................................68

But What is a Web App Exactly? ......................................................................................................................70

Planet of the Apps: Who Rules..............................................................................................................................71

Cross-Platform Master.....................................................................................................................................71

Hardware Access Is No Forbidden Weapon Anymore......................................................................................72

Free Your Content ............................................................................................................................................72

Release Model .................................................................................................................................................73

Web Apps: Not the Little Brother Anymore ......................................................................................................73

Web Apps on Mobile Safari...................................................................................................................................73

Master the Browser .........................................................................................................................................73

Browser Metrics...............................................................................................................................................74

Think “Web App” .............................................................................................................................................75

Configuring the Viewport ......................................................................................................................................75

Seriously Appy: Using Stand-Alone Mode.............................................................................................................77

Showcasing a Proper Icon ...............................................................................................................................77

Running Your Application Full-Screen .............................................................................................................79

An Awesome Startup .......................................................................................................................................79

Tweaking the Status Bar..................................................................................................................................80

Staying in Stand-Alone Mode ..........................................................................................................................80

Build Your First Web App Base Project .................................................................................................................81

Your Document Template in Komodo Edit .......................................................................................................82

Hiding Mobile Safari’s Address Bar .................................................................................................................85

Handling Screen Orientation Changes .............................................................................................................86

Final Touch ......................................................................................................................................................87

Ready to Go...........................................................................................................................................................88

■Chapter 5: User Experience and Interface Guidelines ................................... 89

From the Web on the Desktop to the Mobile Web ................................................................................................90

Forget the Desktop ..........................................................................................................................................91

Change Navigation Habits................................................................................................................................91

Show Ads Thoughtfully ....................................................................................................................................92

Let Users Decide by Themselves .....................................................................................................................95

Simplicity and Ease of Use ...................................................................................................................................96

Avoid Clutter ....................................................................................................................................................96

User Interface ..................................................................................................................................................97

Avoid Unnecessary Interaction .............................................................................................................................99

Make Use of New Input Types Capabilities....................................................................................................100

Ponder Upon User-Supplied Information .......................................................................................................101

Avoid Multiplying Steps .................................................................................................................................102

The Spirit: Be Focused........................................................................................................................................102

Make Things Responsive ....................................................................................................................................103

Make Your Web App Responsive ...................................................................................................................103

Make Your Web App Reactive........................................................................................................................105

iOS Interface Design Good Practices ..................................................................................................................105

Adaptability....................................................................................................................................................105

List vs. Icon Approach....................................................................................................................................106

Considering UI Alternatives.................................................................................................................................109

Mimicking the iOS UI......................................................................................................................................109

■ CONTENTS

viii

Building the iPad Experience .........................................................................................................................110

Be Creative and Innovative .................................................................................................................................115

Summary ............................................................................................................................................................116

■Chapter 6: Interesting CSS Features for Your Web Application

User Interface ............................................................................ 117

Improving the User Experience with CSS ...........................................................................................................117

User Feedback ...............................................................................................................................................118

Disabling Copy/Paste Functionalities.............................................................................................................119

Control Over Callout .......................................................................................................................................120

Selectors.............................................................................................................................................................121

Overview of Available CSS Selectors.............................................................................................................121

Position in Suite Selectors: Structural Pseudoclasses...................................................................................122

Advanced Handling of Backgrounds...................................................................................................................124

Origin of the Background...............................................................................................................................125

Global Background Clipping...........................................................................................................................126

Text-Based Background Clipping...................................................................................................................128

Sizing the Background...................................................................................................................................128

Developing a Photos-Like Gallery ..................................................................................................................130

Multilayer Backgrounds.................................................................................................................................134

Colors..................................................................................................................................................................135

The Alpha Channel.........................................................................................................................................135

New Color Definitions ....................................................................................................................................136

Using Gradients...................................................................................................................................................137

Basic Syntax ..................................................................................................................................................137

Changing the Size of the Gradient .................................................................................................................139

Complete Gradient Syntax .............................................................................................................................139

Advanced Color Handling...............................................................................................................................140

Boxes and Borders..............................................................................................................................................142

Box Sizing ......................................................................................................................................................142

Rounded Box Corners ....................................................................................................................................143

Borders Drawn with Images ..........................................................................................................................145

Shadows .............................................................................................................................................................147

Box Shadows .................................................................................................................................................148

Text Shadows ................................................................................................................................................149

Text Effect with Shadows and Outline...........................................................................................................150

Adding a Button to Your Header..........................................................................................................................150

Columns Layout ..................................................................................................................................................152

CSS Column Properties..................................................................................................................................152

Porting Press Content to the Web..................................................................................................................155

The Flexible Box Model.......................................................................................................................................158

A Clean and Flexible Way to Handle Column Layouts....................................................................................158

Ordering Boxes ..............................................................................................................................................159

Flexibility........................................................................................................................................................160

Packing and Alignment..................................................................................................................................161

Targeting WebKit Specifically .............................................................................................................................162

Summary ............................................................................................................................................................163

■ CONTENTS

ix

■Chapter 7: Bitmap and Vector Graphics and Downloadable Fonts

with Canvas and SVG................................................................. 165

Working with the Canvas Area............................................................................................................................165

The Drawing Context......................................................................................................................................167

Drawing Simple Shapes.................................................................................................................................172

Colors, Gradients, and Patterns .....................................................................................................................174

More Complex Shapes with Paths .................................................................................................................175

Applying Transformations..............................................................................................................................181

Simplifying Drawing State Modifications.......................................................................................................183

Using Text ......................................................................................................................................................183

Shadows ........................................................................................................................................................187

Clipping and Compositing ..............................................................................................................................188

Working with Canvas Pixels...........................................................................................................................191

Using Vector Graphics.........................................................................................................................................195

Inserting SVG into Your Documents ...............................................................................................................196

Understanding the Coordinates System.........................................................................................................196

Drawing Shapes.............................................................................................................................................200

Interoperability...............................................................................................................................................201

Communication..............................................................................................................................................205

Animation with and Without Scripting ...........................................................................................................207

Coping with Temporary Bugs.........................................................................................................................210

Preinstalled and Downloadable Fonts.................................................................................................................211

Summary ............................................................................................................................................................218

■Chapter 8: Embedding Audio and Video Content in

Your Web Application ................................................................ 219

Embedding Video Content...................................................................................................................................220

Getting Information About the Video..............................................................................................................221

The Video Placeholder ...................................................................................................................................222

Playing the Video ...........................................................................................................................................223

Embedding Audio Content ..................................................................................................................................224

Keep Things Reasonable.....................................................................................................................................225

Take Control Over Your Content..........................................................................................................................226

Understanding and Using Ranges..................................................................................................................227

A Number of Supported Events......................................................................................................................232

Adding Subtitles and Chapters to Your Media ....................................................................................................233

Creating Your Own Custom Subtitles.............................................................................................................234

Easier Media Browsing with Chapters...........................................................................................................243

Workarounds...Let’s Go.......................................................................................................................................247

Media Content for the iPhone and iPad ..............................................................................................................248

Understanding Video Formats........................................................................................................................248

Dealing with Supported Audio Formats .........................................................................................................250

Encoding for the Web.....................................................................................................................................251

Summary ............................................................................................................................................................256

■Chapter 9: Handling Transformations, Animations,

and Special Effects with CSS..................................................... 257

Transform Your Elements ...................................................................................................................................257

Checking Transform Support .........................................................................................................................258

■ CONTENTS

x

Applying Rotations .........................................................................................................................................259

Translating Element Coordinates...................................................................................................................260

Scaling Page Contents ...................................................................................................................................260

Distorting Elements........................................................................................................................................261

Custom Transformations with Matrices.........................................................................................................261

The Origin of the Transformation...................................................................................................................262

Working in a Three-Dimensional Environment . .................................................................................................262

New Transform Functions..............................................................................................................................263

Setting the Perspective..................................................................................................................................263

Preserving the 3D Aspect ..............................................................................................................................265

Back Face Visibility........................................................................................................................................266

Combining Styles with JavaScript ......................................................................................................................268

Accessing Current Styles ...............................................................................................................................268

A Native Object to Compute Matrices ............................................................................................................268

Transitions . ........................................................................................................................................................270

The transition CSS Property...........................................................................................................................271

Initiating a Transition .....................................................................................................................................271

Timing Function Curve...................................................................................................................................272

Telling When the Transition Is Completed .....................................................................................................274

Getting Ready for a Cover Flow–Like Experience . .............................................................................................274

The Main Document.......................................................................................................................................275

The Cover Flow Animation .............................................................................................................................278

Flipping the Current Cover.............................................................................................................................280

Final Touch to the Animation .........................................................................................................................280

Double-Check: Preventing Unexpected Behavior ..........................................................................................281

Advanced Animations and Key Frames...............................................................................................................282

Key Frames ....................................................................................................................................................282

Starting and Timing the Animation ................................................................................................................283

Animation Properties .....................................................................................................................................283

The Evolution Curve .......................................................................................................................................284

Working with Events ......................................................................................................................................285

Special Effects with CSS.....................................................................................................................................285

Creating Reflections.......................................................................................................................................286

Using Real Masks ..........................................................................................................................................287

Create an iOS-Like Tab Bar Using Masks ...........................................................................................................288

Getting the Initial Tab Bar Ready ...................................................................................................................289

A Placeholder for Icons ..................................................................................................................................291

Icons Management ........................................................................................................................................292

Creating Icons................................................................................................................................................294

Custom Icons Using an Image .......................................................................................................................297

Summary . ..........................................................................................................................................................298

Part III: Going Futher with JavaScript and Web Standards ............................ 299

■Chapter 10: An Object-Oriented JavaScript Programming Primer. ............ 301

From the Procedural Model... .............................................................................................................................301

...to Object-Oriented Programming.....................................................................................................................302

A First Custom Object ....................................................................................................................................302

Using a Proper Constructor............................................................................................................................303

Download from Wow! eBook <www.wowebook.com>

■ CONTENTS

xi

Better Performance with Prototype ...............................................................................................................304

Implementing Inheritance...................................................................................................................................305

Prototype-Based Inheritance .........................................................................................................................305

Shared Properties ..........................................................................................................................................306

The Prototype Chain.......................................................................................................................................307

The Execution Context ........................................................................................................................................308

Using the call() and apply() Methods .............................................................................................................308

Taking Care of the Execution Context............................................................................................................310

Setting the Proper Context with Handlers and Callbacks ..............................................................................310

Accessing Properties and Methods ....................................................................................................................312

Defining Getters and Setters...............................................................................................................................313

Code Isolation and Libraries ...............................................................................................................................314

Isolating Your Code........................................................................................................................................315

Creating a Library ..........................................................................................................................................316

Enhancing Your Spinner Animation ....................................................................................................................317

Summary ............................................................................................................................................................318

■Chapter 11: Cross-Document Communication ............................................ 321

Cross-Document Communication Limitations ....................................................................................................322

Communication, the HTML5 Way........................................................................................................................323

The Cross-Document Messaging API.............................................................................................................323

Data Type Support and Handling ...................................................................................................................324

Security Considerations.................................................................................................................................325

Case Study..........................................................................................................................................................325

The Main Document.......................................................................................................................................325

The Hosted Document....................................................................................................................................327

Let’s Send a Message....................................................................................................................................328

Handling the Response ..................................................................................................................................329

Specific Mobile Safari Behavior with <iframe>..................................................................................................330

Working with Proper Windows............................................................................................................................332

Notify the Page Is Loaded ..............................................................................................................................333

Properties of the Window Object ...................................................................................................................334

Encapsulating the API to Ease Communication ..................................................................................................335

An Object for the Host Document...................................................................................................................335

An Object for the Widget................................................................................................................................337

The Host Document and the Widgets.............................................................................................................338

Relaxing Subdomain Communication .................................................................................................................340

Changing the Domain.....................................................................................................................................340

Security..........................................................................................................................................................341

The Last Message...............................................................................................................................................341

■Chapter 12: Ajax and Dynamic Content....................................................... 343

Building an HTTP Request...................................................................................................................................343

Requests Using the XMLHttpRequest Object .................................................................................................344

The open() Method.........................................................................................................................................344

Sending Requests Using GET or POST ...........................................................................................................344

Handling the Request State ...........................................................................................................................345

Handling Progress Events..............................................................................................................................346

Checking the Response .................................................................................................................................347

■ CONTENTS

xii

Handling Return Formats....................................................................................................................................348

Most Common Return Formats ......................................................................................................................348

Parsing XML for Use in HTML Documents .....................................................................................................349

Specificities When Parsing JSON...................................................................................................................352

JSON Security Considerations .......................................................................................................................353

Client-Side Rendering Using Returned Data .......................................................................................................354

Handling Template Variables .........................................................................................................................354

Formatting Variables......................................................................................................................................355

Cross-Origin Communication..............................................................................................................................356

Using Proxies .................................................................................................................................................356

The JSONP Way .............................................................................................................................................357

The Cross-Origin Resource Sharing...............................................................................................................359

Real-Life Example: Display Twitter Trends.........................................................................................................360

The Twitter Trends Feed................................................................................................................................360

Fetching and Rendering Data ........................................................................................................................360

Be Kind to the Waiting User ................................................................................................................................363

Adding Visual Feedback.................................................................................................................................363

Handling Excessive Waiting Times ................................................................................................................364

Summary ............................................................................................................................................................365

■Chapter 13: Using Touch and Gesture Events.............................................. 367

How to Handle Events.........................................................................................................................................367

Calling Priority of Handlers ............................................................................................................................367

The Capture Stage .........................................................................................................................................369

Control Over Event Propagation.....................................................................................................................370

Preventing Default Behavior ..........................................................................................................................370

Handlers and Object Methods........................................................................................................................371

Classic Events with Mobile Safari.......................................................................................................................372

Behavior of Mouse Events .............................................................................................................................372

Scrolling Information .....................................................................................................................................372

Multi-Touch Events.............................................................................................................................................373

New Interaction Processes ............................................................................................................................373

Handling Multi-Touch Events.........................................................................................................................373

Unlimited Touch Points ..................................................................................................................................374

Cancelled Touch Events.................................................................................................................................376

A Page View Built with Touch and Transform.....................................................................................................377

What We Are Going to Do...............................................................................................................................377

The Container.................................................................................................................................................378

Bring Elements and Interaction .....................................................................................................................379

Creating Custom Events.................................................................................................................................382

Handling Custom Events................................................................................................................................384

Working with Precomputed Gestures .................................................................................................................385

Create Your Own Gestures..................................................................................................................................387

One Code, Many Strokes................................................................................................................................387

The Bounding Box Object...............................................................................................................................389

Registering User Strokes ...............................................................................................................................390

Using the Recognizer Object..........................................................................................................................392

Improve Accuracy ..........................................................................................................................................394

■ CONTENTS

xiii

Summary ............................................................................................................................................................395

■Chapter 14: Location-Aware Web Applications........................................... 397

The Geolocation API ............................................................................................................................................398

Privacy Considerations ..................................................................................................................................398

Setup Considerations.....................................................................................................................................398

Getting the Current Position................................................................................................................................399

Longitude, Latitude, and More.......................................................................................................................399

Handling Errors from Requests......................................................................................................................401

Accuracy, Timeout, and Cached Location......................................................................................................402

Putting the User on a Map with Google Maps.....................................................................................................403

Showing the Map...........................................................................................................................................403

Centering the Map on the Location of the User .............................................................................................405

Marking the Position of the User ...................................................................................................................407

Showing Accuracy .........................................................................................................................................409

Tracking the User’s Position ...............................................................................................................................410

Registering for Updates .................................................................................................................................410

Specific Behavior of the Watcher...................................................................................................................411

Watching Position on Google Maps................................................................................................................412

From Data to Math ..............................................................................................................................................413

Distance Between Two Points .......................................................................................................................413

Sharper Distance Between Two Points..........................................................................................................414

The Direction to Take.....................................................................................................................................415

Building a Compass Web App .............................................................................................................................416

Create the Mobile Elements...........................................................................................................................416

The Graduations.............................................................................................................................................418

The Needles ...................................................................................................................................................420

The Dial Shine................................................................................................................................................421

Render the Compass......................................................................................................................................422

Add Elements to the Document .....................................................................................................................424

Prepare the Document to Receive Location Data ..........................................................................................425

Use Location Data..........................................................................................................................................426

Animate the Compass....................................................................................................................................427

Prevent Staggering Needles ..........................................................................................................................429

Summary ............................................................................................................................................................430

■Chapter 15: A Better Handling of Client-Side Data Storage......................... 431

Different Storage Areas ......................................................................................................................................431

How to Use New Storage Capabilities............................................................................................................432

Specific Behavior of sessionStorage .............................................................................................................433

Being Notified of Storage Area Modification..................................................................................................434

Security and Privacy Considerations .............................................................................................................435

Caching Ajax Requests ..................................................................................................................................435

Sending Client Data to the Server..................................................................................................................441

SQL Local Database ............................................................................................................................................442

Opening the Database....................................................................................................................................443

Creating Tables..............................................................................................................................................444

Adding Data to Tables....................................................................................................................................446

Querying Data from the Tables ......................................................................................................................448