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

Prelim......Page 1
Contents at a Glance......Page 6
Contents......Page 7
About the Authors......Page 17
About the Technical Reviewer......Page 18
Acknowledgments......Page 19
Who This Book Is For......Page 20
Are You Ready?......Page 21
Getting Started with Web App Development......Page 23
Varanus Komodoensis......Page 25
Make Yourself Comfortable......Page 26
What About Dashcode?......Page 27
The WebKit......Page 28
Internet Explorer, Lost at Sea......Page 29
A Satellite in Your Browser......Page 30
Using the iPhone and iPad Simulator......Page 31
The ADC Is Your Friend......Page 32
Summary......Page 33
Serving the Web Application......Page 35
An Apache in Your Mac......Page 36
The Script Engine......Page 37
Windows, Choose Your Weapons......Page 38
An All-in-One Installation Process......Page 39
Security Settings......Page 42
Linux, Take Control......Page 44
Unix-Based System......Page 45
Apache 2: Get Carried Away......Page 46
The Windows Case......Page 48
Have You Made It?......Page 49
Bet You Have!......Page 50
Making Friends with WebKit’s Developer Tools......Page 51
The Develop Menu Exposed......Page 52
Developing on Mobile Safari......Page 54
Overview of the Web Inspector......Page 56
The Developer Tools Window......Page 57
Error Notifications......Page 58
Make the Document Yours......Page 59
Dig Your Style......Page 60
Metrics......Page 62
Advanced Search......Page 65
The Resources Viewer......Page 66
Logging to the Console......Page 68
Using the Interactive Shell......Page 70
Let the Debugger Do the Job......Page 71
The Life Cycle of Your Page......Page 77
Profiling Your Scripts......Page 79
Understanding the Profiles......Page 80
Filtering with the Search Field......Page 81
Client-Side Data Storage......Page 82
Auditing Your Page......Page 83
Summary......Page 85
Web App Design with HTML5 and CSS3......Page 87
The iPhone Revolution......Page 89
Belief in Web Apps......Page 90
But What is a Web App Exactly?......Page 92
Cross-Platform Master......Page 93
Free Your Content......Page 94
Master the Browser......Page 95
Browser Metrics......Page 96
Configuring the Viewport......Page 97
Showcasing a Proper Icon......Page 99
An Awesome Startup......Page 101
Staying in Stand-Alone Mode......Page 102
Build Your First Web App Base Project......Page 103
Your Document Template in Komodo Edit......Page 104
Hiding Mobile Safari’s Address Bar......Page 107
Handling Screen Orientation Changes......Page 108
Final Touch......Page 109
Ready to Go......Page 110
User Experience and Interface Guidelines......Page 111
From the Web on the Desktop to the Mobile Web......Page 112
Change Navigation Habits......Page 113
Show Ads Thoughtfully......Page 114
Let Users Decide by Themselves......Page 117
Avoid Clutter......Page 118
User Interface......Page 119
Avoid Unnecessary Interaction......Page 121
Make Use of New Input Types Capabilities......Page 122
Ponder Upon User-Supplied Information......Page 123
The Spirit: Be Focused......Page 124
Make Your Web App Responsive......Page 125
Adaptability......Page 127
List vs. Icon Approach......Page 128
Mimicking the iOS UI......Page 131
Building the iPad Experience......Page 132
Be Creative and Innovative......Page 137
Summary......Page 138
Improving the User Experience with CSS......Page 139
User Feedback......Page 140
Disabling Copy/Paste Functionalities......Page 141
Control Over Callout......Page 142
Overview of Available CSS Selectors......Page 143
Position in Suite Selectors: Structural Pseudoclasses......Page 144
Advanced Handling of Backgrounds......Page 146
Origin of the Background......Page 147
Global Background Clipping......Page 148
Sizing the Background......Page 150
Developing a Photos-Like Gallery......Page 152
Multilayer Backgrounds......Page 156
The Alpha Channel......Page 157
New Color Definitions......Page 158
Basic Syntax......Page 159
Complete Gradient Syntax......Page 161
Advanced Color Handling......Page 162
Box Sizing......Page 164
Rounded Box Corners......Page 165
Borders Drawn with Images......Page 167
Shadows......Page 169
Box Shadows......Page 170
Text Shadows......Page 171
Adding a Button to Your Header......Page 172
CSS Column Properties......Page 174
Porting Press Content to the Web......Page 177
A Clean and Flexible Way to Handle Column Layouts......Page 180
Ordering Boxes......Page 181
Flexibility......Page 182
Packing and Alignment......Page 183
Targeting WebKit Specifically......Page 184
Summary......Page 185
Working with the Canvas Area......Page 187
The Drawing Context......Page 189
Drawing Simple Shapes......Page 194
Colors, Gradients, and Patterns......Page 196
More Complex Shapes with Paths......Page 197
Applying Transformations......Page 203
Using Text......Page 205
Shadows......Page 209
Clipping and Compositing......Page 210
Working with Canvas Pixels......Page 213
Using Vector Graphics......Page 217
Understanding the Coordinates System......Page 218
Drawing Shapes......Page 222
Interoperability......Page 223
Communication......Page 227
Animation with and Without Scripting......Page 229
Coping with Temporary Bugs......Page 232
Preinstalled and Downloadable Fonts......Page 233
Summary......Page 240
Embedding Audio and Video Content in Your Web Application......Page 241
Embedding Video Content......Page 242
Getting Information About the Video......Page 243
The Video Placeholder......Page 244
Playing the Video......Page 245
Embedding Audio Content......Page 246
Keep Things Reasonable......Page 247
Take Control Over Your Content......Page 248
Understanding and Using Ranges......Page 249
A Number of Supported Events......Page 254
Adding Subtitles and Chapters to Your Media......Page 255
Creating Your Own Custom Subtitles......Page 256
Easier Media Browsing with Chapters......Page 265
Workarounds...Let’s Go......Page 269
Understanding Video Formats......Page 270
Dealing with Supported Audio Formats......Page 272
Encoding for the Web......Page 273
Summary......Page 278
Transform Your Elements......Page 279
Checking Transform Support......Page 280
Applying Rotations......Page 281
Scaling Page Contents......Page 282
Custom Transformations with Matrices......Page 283
Working in a Three-Dimensional Environment......Page 284
Setting the Perspective......Page 285
Preserving the 3D Aspect......Page 287
Back Face Visibility......Page 288
A Native Object to Compute Matrices......Page 290
Transitions......Page 292
Initiating a Transition......Page 293
Timing Function Curve......Page 294
Getting Ready for a Cover Flow–Like Experience......Page 296
The Main Document......Page 297
The Cover Flow Animation......Page 300
Final Touch to the Animation......Page 302
Double-Check: Preventing Unexpected Behavior......Page 303
Key Frames......Page 304
Animation Properties......Page 305
The Evolution Curve......Page 306
Special Effects with CSS......Page 307
Creating Reflections......Page 308
Using Real Masks......Page 309
Create an iOS-Like Tab Bar Using Masks......Page 310
Getting the Initial Tab Bar Ready......Page 311
A Placeholder for Icons......Page 313
Icons Management......Page 314
Creating Icons......Page 316
Custom Icons Using an Image......Page 319
Summary......Page 320
Going Futher with JavaScript and Web Standards......Page 321
From the Procedural Model.........Page 323
A First Custom Object......Page 324
Using a Proper Constructor......Page 325
Better Performance with Prototype......Page 326
Prototype-Based Inheritance......Page 327
Shared Properties......Page 328
The Prototype Chain......Page 329
Using the call() and apply() Methods......Page 330
Setting the Proper Context with Handlers and Callbacks......Page 332
Accessing Properties and Methods......Page 334
Defining Getters and Setters......Page 335
Code Isolation and Libraries......Page 336
Isolating Your Code......Page 337
Creating a Library......Page 338
Enhancing Your Spinner Animation......Page 339
Summary......Page 340
Cross-Document Communication......Page 343
Cross-Document Communication Limitations......Page 344
The Cross-Document Messaging API......Page 345
Data Type Support and Handling......Page 346
The Main Document......Page 347
The Hosted Document......Page 349
Let’s Send a Message......Page 350
Handling the Response......Page 351
Specific Mobile Safari Behavior with