Beginning iPhone and iPad Web Apps
Scripting with HTML5, CSS3, and JavaScript
■ 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
■ 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
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
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
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
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
■ 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
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
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
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
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
Updating Data .................................................................................................................. ..............................449
Using Database in Place of Storage............................................................................................. ..................451
Handling Transaction and Query Errors .......................................................................................... ...............452
Maintaining Coherent Access with Versioning .................................................................................... ..........454
Deleting the Database.......................................................................................................... ..........................456
Security Again................................................................................................................. ...............................457
Offline Web Application Cache............................................................................................................................458
How Does It Work?.............................................................................................................. ...........................458
The Manifest File ...........................................................................................................................................459
Controlling the Cache with JavaScript...........................................................................................................462
Reacting to Events Sent by the Application Cache ............................................................................... .........464
Deleting Cache................................................................................................................. ..............................465
Is the User Online?.........................................................................................................................................466
Summary ............................................................................................................................................................466
■ Index............................................................................................................ 467
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
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
■ 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
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
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
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
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
Updating Data .................................................................................................................. ..............................449
Using Database in Place of Storage............................................................................................. ..................451
Handling Transaction and Query Errors .......................................................................................... ...............452
Maintaining Coherent Access with Versioning .................................................................................... ..........454
Deleting the Database.......................................................................................................... ..........................456
Security Again................................................................................................................. ...............................457
Offline Web Application Cache............................................................................................................................458
How Does It Work?.............................................................................................................. ...........................458
The Manifest File ...........................................................................................................................................459
Controlling the Cache with JavaScript...........................................................................................................462
Reacting to Events Sent by the Application Cache ............................................................................... .........464
Deleting Cache................................................................................................................. ..............................465
Is the User Online?.........................................................................................................................................466
Summary ............................................................................................................................................................466
■ Index............................................................................................................ 467
Enregistrer un commentaire