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

513 Pages·2010·15.14 MB·English

by  Chris Apers

Creating Custom Web Sites and
Web Apps for iOS Devices
Beginning
iPhone iPad
and
Web Apps
Scripting with HTML5, CSS3 and JavaScript
Chris Apers | Daniel Paterson

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

■ ■ ■
Chris Apers
Daniel Paterson

i
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 [phone],
e-mail [e-mail], or visit www.springeronline.com.
For information on translations, please e-mail [e-mail], 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.

ii
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

iii
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
iv
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

v
■ CONTENTS
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
vi
■ CONTENTS
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
vii
■ CONTENTS
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
viii