Thông tin tài liệu
COMPANION eBOOK SEE LAST PAGE FOR DETAILS ON $10 eBOOK VERSION
US $39.99
Shelve in
Mobile Development
User level:
Beginner
www.apress.com
SOURCE CODE ONLINE
BOOKS FOR PROFESSIONALS BY PROFESSIONALS
®
this print for content only—size & color not accurate
CYAN
MAGENTA
YELLOW
BLACK
PANTONE 123 C
SPOT MATTE
ISBN 978-1-4302-3045-8
9 781430 230458
53999
T
his book will help you join the thousands of successful iPhone App devel-
opers without needing to learn Objective-C or the Cocoa touch APIs. If you
want to apply your existing web development skills to iPhone and iPad devel-
opment, then now you can. WebKit’s support for HTML5 means any web devel-
oper can create compelling apps for both the iPhone and the larger-screen iPad.
Beginning iPhone & iPad Web Apps takes you through the latest Mobile Web
Standards as well as the specic features of the iPhone and iPad. You’ll learn
about WebKit and Mobile Safari, HTML5 and CSS3, Vector Graphics and Multi-
media support. You’ll discover the built-in hardware features of the iPhone and
iPad and how best to take advantage of them.
The market for web apps for the iPhone and iPad is expanding rapidly. You’ll
want to know about all the advantages, and Beginning iPhone & iPad Web Apps
is the perfect starting point.
What you’ll learn:
•
How to take your existing web skills and deploy them on iPad and iPhone
•
User interface design basics for both the smaller iPhone screen and the
larger iPad display
•
The keys to web app development built into HTML5, WebKit, and Mobile
Safari
•
How to address Apple’s multitouch screen interface and interact with
Cocoa touch APIs
This book is for web designers and developers who want to use their hard-
earned skills and knowledge to create compelling mobile web experiences for
iPhone and iPad users.
Trim: 7.5 x 9.25 spine = 0.96875" 512 page count
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
Apers
Paterson
iPhone and iPad Web Apps
Companion
eBook
Available
Beginning
Download from Wow! eBook <www.wowebook.com>
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... 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... 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... 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... 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... 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 . Apps
Scripting with HTML5, CSS3,
and JavaScript
■ ■ ■
Chris Apers
Daniel Paterson
ii
Beginning iPhone and iPad Web Apps: Scripting with HTML5,. count
Creating Custom Web Sites and
Web Apps for iOS Devices
Beginning
iPhone and iPad
Web Apps
Scripting with HTML5, CSS3 and JavaScript
Chris Apers
Ngày đăng: 06/03/2014, 07:20
Xem thêm: Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript pdf, Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript pdf