Creating Custom Web Sites and Web Apps for iOS Devices Beginning iPhone and iPad Web Apps Scripting with HTML5, CSS3 and JavaScript Chris Apers | Daniel Paterson i Beginning iPhone and iPad Web Apps Scripting with HTML5, CSS3, and JavaScript ■ ■ ■ Chris Apers Daniel Paterson ii Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript Copyright © 2010 by Chris Apers and Daniel Paterson All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-3045-8 ISBN-13 (electronic): 978-1-4302-3046-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. President and Publisher: Paul Manning Lead Editor: Steve Anglin Technical Reviewer: Paul Haine Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Adam Heath Copy Editor: Kim Wimpsett Compositor: MacPS, LLC Indexer: BIM Indexing & Proofreading Services Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail 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. iii To Aoï, who had to put up with my moods for so long. A thousand thanks. With love. —Chris To Alice, for I can never thank you enough for the inspiration your love and brilliance provide. —Daniel iv Contents at a Glance ■Contents v ■About the Authors xv ■About the Technical Reviewer xvi ■Acknowledgments xvii ■Introduction xviii Part I: Getting Started with Web App Development 1 ■Chapter 1: Development Tools 3 ■Chapter 2: Development Environment 13 ■Chapter 3: Introducing Developer and Debugging Tools 29 Part II: Web App Design with HTML5 and CSS3 65 ■Chapter 4: The Anatomy of a Web Application 67 ■Chapter 5: User Experience and Interface Guidelines 89 ■Chapter 6: Interesting CSS Features for Your Web Application User Interface 117 ■Chapter 7: Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG 165 ■Chapter 8: Embedding Audio and Video Content in Your Web Application 219 ■Chapter 9: Handling Transformations, Animations, and Special Effects with CSS 257 Part III: Going Futher with JavaScript and Web Standards 299 ■Chapter 10: An Object-Oriented JavaScript Programming Primer 301 ■Chapter 11: Cross-Document Communication 321 ■Chapter 12: Ajax and Dynamic Content 343 ■Chapter 13: Using Touch and Gesture Events 367 ■Chapter 14: Location-Aware Web Applications 397 ■Chapter 15: A Better Handling of Client-Side Data Storage 431 ■Index 467 v Contents ■Contents at a Glance iv ■ About the Authors xv ■ About the Technical Reviewer xvi ■Acknowledgments xvii ■Introduction xviii Part I: Getting Started with Web App Development 1 ■Chapter 1: Development Tools 3 The Source Editor 3 Varanus Komodoensis 3 Make Yourself Comfortable 4 What About Dashcode? 5 Using the Right Browser 6 The WebKit 6 The Gecko and the Fox 7 Opera 7 Internet Explorer, Lost at Sea 7 Developing Web-Wise 8 Acid Acid Acid 8 HTML5 Conformance 8 A Satellite in Your Browser 8 Developing for iOS 9 Using the iPhone and iPad Simulator 9 Using a Real Device Anyway 10 The ADC Is Your Friend 10 Summary 11 ■Chapter 2: Development Environment 13 Serving the Web Application 13 Mac OS, Making Things Easy 14 ■ CONTENTS vi An Apache in Your Mac 14 The Script Engine 15 Windows, Choose Your Weapons 16 An All-in-One Installation Process 17 Security Settings 20 Linux, Take Control 22 Handling Multiple Hosts 23 Unix-Based System 23 Windows-Based System 24 Configuring Multiple Web Sites 24 Apache 2: Get Carried Away 24 The Windows Case 26 Have You Made It? 27 Bet You Have! 28 ■Chapter 3: Introducing Developer and Debugging Tools 29 Making Friends with WebKit’s Developer Tools 29 Enabling the Develop Menu 30 The Develop Menu Exposed 30 Developing on Mobile Safari 32 Overview of the Web Inspector 34 The Developer Tools Window 35 Error Notifications 36 Master Your Code 37 Make the Document Yours 37 Dig Your Style 38 Editing Styles 40 Metrics 40 Advanced Search 43 The Resources Viewer 44 Debugging JavaScript 46 Logging to the Console 46 Using the Interactive Shell 48 Let the Debugger Do the Job 49 The Life Cycle of Your Page 55 Profiling Your Scripts 57 Understanding the Profiles 58 Filtering with the Search Field 59 Client-Side Data Storage 60 Database Storage 61 Cookies 61 Other Storage Features 61 Auditing Your Page 61 Still Unsure? 63 Summary 63 Part II: Web App Design with HTML5 and CSS3 65 ■Chapter 4: The Anatomy of a Web Application 67 The iPhone Revolution 67 ■ CONTENTS vii Belief in Web Apps 68 But What is a Web App Exactly? 70 Planet of the Apps: Who Rules 71 Cross-Platform Master 71 Hardware Access Is No Forbidden Weapon Anymore 72 Free Your Content 72 Release Model 73 Web Apps: Not the Little Brother Anymore 73 Web Apps on Mobile Safari 73 Master the Browser 73 Browser Metrics 74 Think “Web App” 75 Configuring the Viewport 75 Seriously Appy: Using Stand-Alone Mode 77 Showcasing a Proper Icon 77 Running Your Application Full-Screen 79 An Awesome Startup 79 Tweaking the Status Bar 80 Staying in Stand-Alone Mode 80 Build Your First Web App Base Project 81 Your Document Template in Komodo Edit 82 Hiding Mobile Safari’s Address Bar 85 Handling Screen Orientation Changes 86 Final Touch 87 Ready to Go 88 ■Chapter 5: User Experience and Interface Guidelines 89 From the Web on the Desktop to the Mobile Web 90 Forget the Desktop 91 Change Navigation Habits 91 Show Ads Thoughtfully 92 Let Users Decide by Themselves 95 Simplicity and Ease of Use 96 Avoid Clutter 96 User Interface 97 Avoid Unnecessary Interaction 99 Make Use of New Input Types Capabilities 100 Ponder Upon User-Supplied Information 101 Avoid Multiplying Steps 102 The Spirit: Be Focused 102 Make Things Responsive 103 Make Your Web App Responsive 103 Make Your Web App Reactive 105 iOS Interface Design Good Practices 105 Adaptability 105 List vs. Icon Approach 106 Considering UI Alternatives 109 Mimicking the iOS UI 109 ■ CONTENTS viii Building the iPad Experience 110 Be Creative and Innovative 115 Summary 116 ■ Chapter 6: Interesting CSS Features for Your Web Application User Interface 117 Improving the User Experience with CSS 117 User Feedback 118 Disabling Copy/Paste Functionalities 119 Control Over Callout 120 Selectors 121 Overview of Available CSS Selectors 121 Position in Suite Selectors: Structural Pseudoclasses 122 Advanced Handling of Backgrounds 124 Origin of the Background 125 Global Background Clipping 126 Text-Based Background Clipping 128 Sizing the Background 128 Developing a Photos-Like Gallery 130 Multilayer Backgrounds 134 Colors 135 The Alpha Channel 135 New Color Definitions 136 Using Gradients 137 Basic Syntax 137 Changing the Size of the Gradient 139 Complete Gradient Syntax 139 Advanced Color Handling 140 Boxes and Borders 142 Box Sizing 142 Rounded Box Corners 143 Borders Drawn with Images 145 Shadows 147 Box Shadows 148 Text Shadows 149 Text Effect with Shadows and Outline 150 Adding a Button to Your Header 150 Columns Layout 152 CSS Column Properties 152 Porting Press Content to the Web 155 The Flexible Box Model 158 A Clean and Flexible Way to Handle Column Layouts 158 Ordering Boxes 159 Flexibility 160 Packing and Alignment 161 Targeting WebKit Specifically 162 Summary 163 [...]... 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... 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... habits, with 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... 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... 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 to encourage a community-driven development of open and non proprietary web technologies to ensure the viability and open evolution of the Web 3 4 CHAPTER 1: Development Tools Starting with version 6.0, Komodo Edit... 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... 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... 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 Multi-Touch control, for instance, are no longer just a dream HTML5, on the other side, is not only a new version of the markup language; the new specification comes with a full range of new... on the Gecko engine Its compliance with standards is very good, and you might appreciate one of Firefox’s strongest points: its community It is infinitely extensible with rich addons, such as Firebug, which is a thorough and usable development and debugging tool This makes Firefox an excellent companion when developing for the Web with features similar to those of WebKit Opera Opera is also available... 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 . Web Sites and Web Apps for iOS Devices Beginning iPhone and iPad Web Apps Scripting with HTML5, CSS3 and JavaScript Chris Apers | Daniel Paterson i Beginning iPhone and iPad Web Apps Scripting. Web Apps Scripting with HTML5, CSS3, and JavaScript ■ ■ ■ Chris Apers Daniel Paterson ii Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript Copyright. Design with HTML5 and CSS3 65 ■Chapter 4: The Anatomy of a Web Application 67 The iPhone Revolution 67 ■ CONTENTS vii Belief in Web Apps 68 But What is a Web App Exactly? 70 Planet of the Apps: