www.it-ebooks.info www.it-ebooks.info Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript Copyright © 2010 by Chris Apers and Daniel Paterson All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-3045-8 ISBN-13 (electronic): 978-1-4302-3046-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. President and Publisher: Paul Manning Lead Editor: Steve Anglin Technical Reviewer: Paul Haine Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Adam Heath Copy Editor: Kim Wimpsett Compositor: MacPS, LLC Indexer: BIM Indexing & Proofreading Services Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. For information on translations, please e-mail rights@apress.com, or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/ info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at www.apress.com. www.it-ebooks.info iv Contents at a Glance ■Contents v ■About the Authors xv ■About the Technical Reviewer xvi ■Acknowledgments xvii ■Introduction xviii Part I: Getting Started with Web App Development 1 ■Chapter 1: Development Tools 3 ■Chapter 2: Development Environment 13 ■Chapter 3: Introducing Developer and Debugging Tools 29 Part II: Web App Design with HTML5 and CSS3 65 ■Chapter 4: The Anatomy of a Web Application 67 ■Chapter 5: User Experience and Interface Guidelines 89 ■Chapter 6: Interesting CSS Features for Your Web Application User Interface 117 ■Chapter 7: Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG 165 ■Chapter 8: Embedding Audio and Video Content in Your Web Application 219 ■Chapter 9: Handling Transformations, Animations, and Special Effects with CSS 257 Part III: Going Futher with JavaScript and Web Standards 299 ■Chapter 10: An Object-Oriented JavaScript Programming Primer 301 ■Chapter 11: Cross-Document Communication 321 ■Chapter 12: Ajax and Dynamic Content 343 ■Chapter 13: Using Touch and Gesture Events 367 ■Chapter 14: Location-Aware Web Applications 397 ■Chapter 15: A Better Handling of Client-Side Data Storage 431 ■Index 467 www.it-ebooks.info v Contents ■Contents at a Glance iv ■ About the Authors xv ■ About the Technical Reviewer xvi ■Acknowledgments xvii ■Introduction xviii Part I: Getting Started with Web App Development 1 ■Chapter 1: Development Tools 3 The Source Editor 3 Varanus Komodoensis 3 Make Yourself Comfortable 4 What About Dashcode? 5 Using the Right Browser 6 The WebKit 6 The Gecko and the Fox 7 Opera 7 Internet Explorer, Lost at Sea 7 Developing Web-Wise 8 Acid Acid Acid 8 HTML5 Conformance 8 A Satellite in Your Browser 8 Developing for iOS 9 Using the iPhone and iPad Simulator 9 Using a Real Device Anyway 10 The ADC Is Your Friend 10 Summary 11 ■Chapter 2: Development Environment 13 Serving the Web Application 13 Mac OS, Making Things Easy 14 www.it-ebooks.info ■ CONTENTS vi An Apache in Your Mac 14 The Script Engine 15 Windows, Choose Your Weapons 16 An All-in-One Installation Process 17 Security Settings 20 Linux, Take Control 22 Handling Multiple Hosts 23 Unix-Based System 23 Windows-Based System 24 Configuring Multiple Web Sites 24 Apache 2: Get Carried Away 24 The Windows Case 26 Have You Made It? 27 Bet You Have! 28 ■Chapter 3: Introducing Developer and Debugging Tools 29 Making Friends with WebKit’s Developer Tools 29 Enabling the Develop Menu 30 The Develop Menu Exposed 30 Developing on Mobile Safari 32 Overview of the Web Inspector 34 The Developer Tools Window 35 Error Notifications 36 Master Your Code 37 Make the Document Yours 37 Dig Your Style 38 Editing Styles 40 Metrics 40 Advanced Search 43 The Resources Viewer 44 Debugging JavaScript 46 Logging to the Console 46 Using the Interactive Shell 48 Let the Debugger Do the Job 49 The Life Cycle of Your Page 55 Profiling Your Scripts 57 Understanding the Profiles 58 Filtering with the Search Field 59 Client-Side Data Storage 60 Database Storage 61 Cookies 61 Other Storage Features 61 Auditing Your Page 61 Still Unsure? 63 Summary 63 Part II: Web App Design with HTML5 and CSS3 65 ■Chapter 4: The Anatomy of a Web Application 67 The iPhone Revolution 67 www.it-ebooks.info ■ CONTENTS vii Belief in Web Apps 68 But What is a Web App Exactly? 70 Planet of the Apps: Who Rules 71 Cross-Platform Master 71 Hardware Access Is No Forbidden Weapon Anymore 72 Free Your Content 72 Release Model 73 Web Apps: Not the Little Brother Anymore 73 Web Apps on Mobile Safari 73 Master the Browser 73 Browser Metrics 74 Think “Web App” 75 Configuring the Viewport 75 Seriously Appy: Using Stand-Alone Mode 77 Showcasing a Proper Icon 77 Running Your Application Full-Screen 79 An Awesome Startup 79 Tweaking the Status Bar 80 Staying in Stand-Alone Mode 80 Build Your First Web App Base Project 81 Your Document Template in Komodo Edit 82 Hiding Mobile Safari’s Address Bar 85 Handling Screen Orientation Changes 86 Final Touch 87 Ready to Go 88 ■Chapter 5: User Experience and Interface Guidelines 89 From the Web on the Desktop to the Mobile Web 90 Forget the Desktop 91 Change Navigation Habits 91 Show Ads Thoughtfully 92 Let Users Decide by Themselves 95 Simplicity and Ease of Use 96 Avoid Clutter 96 User Interface 97 Avoid Unnecessary Interaction 99 Make Use of New Input Types Capabilities 100 Ponder Upon User-Supplied Information 101 Avoid Multiplying Steps 102 The Spirit: Be Focused 102 Make Things Responsive 103 Make Your Web App Responsive 103 Make Your Web App Reactive 105 iOS Interface Design Good Practices 105 Adaptability 105 List vs. Icon Approach 106 Considering UI Alternatives 109 Mimicking the iOS UI 109 www.it-ebooks.info ■ CONTENTS viii Building the iPad Experience 110 Be Creative and Innovative 115 Summary 116 ■ Chapter 6: Interesting CSS Features for Your Web Application User Interface 117 Improving the User Experience with CSS 117 User Feedback 118 Disabling Copy/Paste Functionalities 119 Control Over Callout 120 Selectors 121 Overview of Available CSS Selectors 121 Position in Suite Selectors: Structural Pseudoclasses 122 Advanced Handling of Backgrounds 124 Origin of the Background 125 Global Background Clipping 126 Text-Based Background Clipping 128 Sizing the Background 128 Developing a Photos-Like Gallery 130 Multilayer Backgrounds 134 Colors 135 The Alpha Channel 135 New Color Definitions 136 Using Gradients 137 Basic Syntax 137 Changing the Size of the Gradient 139 Complete Gradient Syntax 139 Advanced Color Handling 140 Boxes and Borders 142 Box Sizing 142 Rounded Box Corners 143 Borders Drawn with Images 145 Shadows 147 Box Shadows 148 Text Shadows 149 Text Effect with Shadows and Outline 150 Adding a Button to Your Header 150 Columns Layout 152 CSS Column Properties 152 Porting Press Content to the Web 155 The Flexible Box Model 158 A Clean and Flexible Way to Handle Column Layouts 158 Ordering Boxes 159 Flexibility 160 Packing and Alignment 161 Targeting WebKit Specifically 162 Summary 163 www.it-ebooks.info ■ CONTENTS ix ■Chapter 7: Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG 165 Working with the Canvas Area 165 The Drawing Context 167 Drawing Simple Shapes 172 Colors, Gradients, and Patterns 174 More Complex Shapes with Paths 175 Applying Transformations 181 Simplifying Drawing State Modifications 183 Using Text 183 Shadows 187 Clipping and Compositing 188 Working with Canvas Pixels 191 Using Vector Graphics 195 Inserting SVG into Your Documents 196 Understanding the Coordinates System 196 Drawing Shapes 200 Interoperability 201 Communication 205 Animation with and Without Scripting 207 Coping with Temporary Bugs 210 Preinstalled and Downloadable Fonts 211 Summary 218 ■Chapter 8: Embedding Audio and Video Content in Your Web Application 219 Embedding Video Content 220 Getting Information About the Video 221 The Video Placeholder 222 Playing the Video 223 Embedding Audio Content 224 Keep Things Reasonable 225 Take Control Over Your Content 226 Understanding and Using Ranges 227 A Number of Supported Events 232 Adding Subtitles and Chapters to Your Media 233 Creating Your Own Custom Subtitles 234 Easier Media Browsing with Chapters 243 Workarounds Let’s Go 247 Media Content for the iPhone and iPad 248 Understanding Video Formats 248 Dealing with Supported Audio Formats 250 Encoding for the Web 251 Summary 256 ■Chapter 9: Handling Transformations, Animations, and Special Effects with CSS 257 Transform Your Elements 257 Checking Transform Support 258 www.it-ebooks.info ■ CONTENTS x Applying Rotations. 259 Translating Element Coordinates. 260 Scaling Page Contents. 260 Distorting Elements 261 Custom Transformations with Matrices. 261 The Origin of the Transformation. 262 Working in a Three-Dimensional Environment . 262 New Transform Functions. 263 Setting the Perspective. 263 Preserving the 3D Aspect . 265 Back Face Visibility 266 Combining Styles with JavaScript . 268 Accessing Current Styles. 268 A Native Object to Compute Matrices . 268 Transitions . 270 The transition CSS Property. 271 Initiating a Transition 271 Timing Function Curve. 272 Telling When the Transition Is Completed . 274 Getting Ready for a Cover Flow–Like Experience . 274 The Main Document. 275 The Cover Flow Animation . 278 Flipping the Current Cover. 280 Final Touch to the Animation . 280 Double-Check: Preventing Unexpected Behavior . 281 Advanced Animations and Key Frames 282 Key Frames 282 Starting and Timing the Animation . 283 Animation Properties . 283 The Evolution Curve . 284 Working with Events. 285 Special Effects with CSS 285 Creating Reflections 286 Using Real Masks . 287 Create an iOS-Like Tab Bar Using Masks . 288 Getting the Initial Tab Bar Ready . 289 A Placeholder for Icons. 291 Icons Management . 292 Creating Icons 294 Custom Icons Using an Image . 297 Summary . 298 Part III: Going Futher with JavaScript and Web Standards 299 ■Chapter 10: An Object-Oriented JavaScript Programming Primer. 301 From the Procedural Model . 301 to Object-Oriented Programming. 302 A First Custom Object . 302 Using a Proper Constructor. 303 www.it-ebooks.info [...]... web applications have only just begun to fight Indeed, web browser performance and features make possibilities regarding user experience and provided services ever greater, and web browsers create an exciting field for web developers to play in With the arrival and implementation of new standards, the boundaries between native applications and web applications have never been so thin; geolocation and. .. experience in web technologies and mobile development, including the PalmOS, webOS, and iPhone He is a technical manager and architect at Newsweb/Lagardère Active and participates in open source projects such as porting development libraries and software to mobile devices With the creation of the open source framework WebApp.Net, he provides an easy way to create mobile content targeting WebKit browsers... Mobile Safari and Desktop Safari are based on the WebKit layout engine The engine was designed from the beginning to be lightweight and standards compliant Not only does WebKit implement the latest W3C candidate recommendations, but it also implements draft-stage features with the -webkit- prefix The WebKit engine also comes with a full set of tools for developers We will detail WebKit’s Web Inspector... Multi-Touch API, and location-aware web applications The last chapter from this part will bring the ultimate touch to building web applications that behave like native applications by introducing you to ways you can make your pages available and functional offline Are You Ready? Thanks to the incredible iOS platform found on the iPhone, iPad, and iPod touch and to the implementation of the latest web standards... a fully functional and ready-to-use development environment However, digging into the specific development tools of WebKit browsers will help you build better web applications faster Part II, Web App Design with HTML5 and CSS3: This second part will let you get into further detail about what a web application looks like and the rules that you should be aware of to build successful web applications Following... visit www.webapp-net.com and www.chrilith.com Daniel Paterson has a master’s degree in comparative literature, and he penned a memoir on integrating literary theory into fictional works, taking novels by Umberto Eco, Milan Kundera, and David Lodge as examples After his university years, Daniel entered web development and joined Newsweb/Lagardère Active in April 2009 Passionate about the Web as about... download and install Komodo Edit, a cross-platform, free, and feature-rich open source editor built on the Mozilla code base, which is going to be used throughout all our examples NOTE: You can download Komodo Edit for Mac OS X, Windows, and Linux from the ActiveState web site at www.activestate.com/komodo-edit/ Like Mozilla, Komodo Edit is an open web and open standards initiative The open web aims... background to build web applications and efficiently develop for mobile devices; take you through a number of new exciting features of CSS3, HTML5, and Mobile Safari; and get you going with more advanced uses of web standards Here is a short description of each part: Part I, Getting Started with Web App Development: The first part of this book goes through useful tools to develop web applications Of... user interface and user experience—they should be your two primary concerns—we will go through the latest technologies that will allow you to efficiently meet your style, content, and interaction goals Part III, Going Further with JavaScript and Web Standards: The final part will take you even further into client-side development, with topics such as Ajax and HTML templates, advanced handling of Apple’s... chore to alter and maintain, and it generates too much unnecessary markup and JavaScript When developing for the Web, especially for low-memory devices such as mobile browsers, lightweight code should be a primary concern Using the Right Browser To develop for the Web is to develop mainly for a web browser Although we are going to specifically target Mobile Safari (the browser used on the iPhone, the . www.it-ebooks.info www.it-ebooks.info Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript Copyright © 2010 by Chris Apers and Daniel Paterson All rights reserved years experience in web technologies and mobile development, including the PalmOS, webOS, and iPhone. He is a technical manager and architect at Newsweb/Lagardère Active and participates in. 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