Thông tin tài liệu
ptg
ptg
The Web Designer’s Guide to iOS Apps:
Create iPhone,
iPod touch, and iPad Apps
with Web Standards
HTML5, CSS3, and JavaScript
From <www.wowebook.com>
ptg
The Web Designer’s Guide to iOS Apps: Create iPhone, iPod touch,
and iPad apps with Web Standards (HTML5, CSS3, and JavaScript)
Kristofer Layon
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to errata@peachpit.com
New Riders is an imprint of Peachpit, a division of Pearson Education.
Copyright © 2011 by Kristofer Layon
Project Editor: Michael J. Nolan
Development Editor: Je Riley/Box Twelve Communications
Technical editors: Zachary Johnson (www.zachstronaut.com), Alexander Voloshyn (www.nimblekit.com)
Production Editor: Myrna Vladic
Copyeditor: Gretchen Dykstra
Proofreader: Doug Adrianson
Indexer: Joy Dean Lee
Cover Designer: Aren Howell Straiger
Interior Designer: Danielle Foster
Compositor: David Van Ness
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmied in any form by any means, elec-
tronic, mechanical, photocopying, recording, or otherwise, without the prior wrien permission of the pub-
lisher. For information on geing permission for reprints and excerpts, contact permissions@peachpit.com.
Notice of Liability
e information in this book is distributed on an “As Is” basis without warranty. While every precaution has
been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any per-
son or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the
instructions contained in this book or by the computer soware and hardware products described in it.
Trademarks
Apple, iPod, iTunes, iPhone, iPad, and Mac are trademarks of Apple, Inc., registered in the United States
and other countries. Many of the designations used by manufacturers and sellers to distinguish their prod-
ucts are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of
a trademark claim, the designations appear as requested by the owner of the trademark. All other product
names and services identied throughout this book are used in editorial fashion only and for the benet of
such companies with no intention of infringement of the trademark. No such use, or the use of any trade
name, is intended to convey endorsement or other aliation with this book.
ISBN 13: 978-0-321-73298-9
ISBN 10: 0-321-73298-7
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
From <www.wowebook.com>
ptg
In memory of my father, Roger Layon.
His life taught me to live honorably;
his death taught me to live vigorously.
From <www.wowebook.com>
ptg
THE WEB DESIGNER’S GUIDE TO IOS APPS
iv
ACKNOWLEDGMENTS
I’m a runner with a master’s degree in interactive design—and the process
of writing this book was a lot like marathon training and graduate school.
Successfully meeting my goals (all variations of crossing a nishing line)
demanded extraordinary levels of planning and commitment.
But equally important was the support of other people. I was really
blessedwith a lot of support from friends, colleagues, and family—and
Ithank themall:
e editing, design, and marketing sta at New Riders, Peachpit, and Box
Twe lve . A sp ec ia l t ha n k s to M ic hae l Nola n, Je R i le y, a nd Glen n Bi sig na n i .
Zach Johnson, my technical editor, whose coding experience and critical
eye took the book to a much higher level.
Alexander Voloshyn, the creator of NimbleKit, for providing additional
technical assistance, several important code samples, and a lot of friendly
advice.
Martin Grider and Bill Heyman, who helped me with my rst iPhone app
and my early eorts to learn Objective-C.
Eric Meyer and Kristina Halvorson, who shared helpful advice and (even
more helpful) encouragement.
Mike McGraw at Apple, who helped get me to the 2010 WWDC in San
Francisco.
Mark Brancel, my rst app client and collaborator. anks for your
patience and for believing in my work.
Shawn, my friend and legal counsel, whose advice and assistance calmed
many a frayed nerve.
Tim, my friend and sailing liberal arts scientist, who taught me how to sail a
boat, and who inspires me to see the world dierently every time we talk.
Eric, my friend and running coach. e three marathons I ran gave me the
discipline and psychological endurance required to nish this book.
My design and communications colleagues in System Academic Admin-
istration at the University of Minnesota: Amy, Angie, Gabe, Kate, Kathy,
Mike, and Peggy.
From <www.wowebook.com>
ptg
v
ACKNOWLEDGMENTS
My MinneWebCon conference planning colleagues from 2008 to present:
Amanda, Dan, Danny, Eric, Gabe, Jesse, Peter, Sara, Simin, and Zach.
My in-laws, Marilyn and Kent, who provide a ton of childcare for us that
made this book possible; Marilyn, a writer, also helped edit the rst chapter
that I wrote, giving me the condence to submit it to the publisher.
My mother, Sharon, whose skills as a gardener, ower arranger, and stained
glass artist elevated my ability to see paerns and beauty, and inspired my
own creativity and desire to make things.
My lovely wife and daughters, who gave me the time and space to work on
this, and never complained about how tired and unhelpful I must have been
during the numerous mornings that followed many late nights of writing
and editing: Katie, Sarah, Grace, Emma, and Anne.
ABOUT THE AUTHOR
Kristofer Layon is a designer, educator, and conference director. Kris’s
rst iPhone application, ArtAlphabet, is an early childhood typography
ashcard game that went on sale in the App Store in 2009. His consulting
company, Aesthete Soware, now designs mobile applications for clients in
a diverse range of elds including medicine, photography, and education.
He has been a graphic designer since 1993 and a web designer since
1996. Since then Kris has designed sites for engineers, urban planners,
city governments, artists, musicians, retailers, the National Park Service,
and over 30 higher education clients. In addition to designing websites,
he has taught graphic design and typography in the University of Min-
nesota’s College of Design, where he was also an academic advisor. In
2008 Kris helped establish MinneWebCon, a regional conference for web
professionals.
Kris holds a Master of Fine Arts degree in interactive design from the
University of Minnesota, and a Bachelor of Arts degree in German and
pre-architecture from Saint Olaf College. He is a member of AIGA, the
HighEdWeb Association, Design Research Society, and Minnesota Inter-
active Marketing Association. His work has won design awards from the
AIGA and the Society of Marketing Professional Services, and his early
adoption of web video was featured on apple.com in 1999.
From <www.wowebook.com>
ptg
Introduction ix
1 The big impact of going small 2
Mobile magic and pocket computers . 4
Content—and context—are everything . 5
Mobile applications ≠ desktop applications . 7
e magic is transformational . 8
Design starts with people and ends with code . 10
Summary . 12
2 Establishing your app design studio
14
Geing an Apple Developer ID . 16
Downloading and installing the iOS SDK . 20
Downloading and installing NimbleKit . 22
Summary . 23
3 Fundamentals of the iOS SDK
24
Starting a new Xcode project . 26
Te st i n g a nd b u i ld i n g you r ap p bi n a r y . 38
Summary . 47
CONTENTS
From <www.wowebook.com>
ptg
4 The iOS interface and user experience 48
What is the status bar? . 51
Implementing the title bar . 53
Designing with tab bars . 55
Navigating with table views . 58
Summary . 65
5 Focus on app content: Text and images
66
Structuring text . 68
Integrating social content . 75
Working with images . 82
Summary . 91
6 Focus on app content: Maps
92
Method one: Using NKBuon . 95
Method two: Styling an HTML buon . 102
iPad considerations . 108
Summary . 113
From <www.wowebook.com>
ptg
THE WEB DESIGNER’S GUIDE TO IOS APPS
viii
7 Focus on app content: Audio 114
Playing audio with HTML5 . 116
Incorporating audio with NudioPlayer . 118
Summary . 123
8 Focus on app content: Video
124
Delivering video with HTML5 on iPad . 126
Delivering video with NKVideoPlayer . 133
Summary . 139
9 HTML5 and CSS3
140
Exploring additional HTML5 elements . 142
More design options with CSS3 . 148
Summary . 169
10 Other mobile frameworks
170
Emulating the iOS experience with
PhoneGap and jQTouch . 172
Developing native apps with Titanium Mobile . 178
Designing web apps with Sencha Touch . 180
Summary . 183
From <www.wowebook.com>
ptg
ix
CONTENTS
11 Marketing your apps 184
Who are you: Deciding on an App Store identity . 186
Using Apple’s marketing assets . 189
Designing your own app marketing communications . . .193
Summary . 201
12 Provisioning and distributing your apps
202
Using the iOS Dev Center . 204
Using iTunes Connect . 212
Adding and managing applications . 213
Summary . 220
A Appendix: Additional guiding principles
222
Content strategy . 224
App planning . 229
App usability . 234
Index 242
From <www.wowebook.com>
[...]... popularized the graphic user interface (GUI), the visual desktop metaphor, and the mouse input device to create a whole new world that now pervades all personal computing From 6 THE WEB DESIGNER’S GUIDE TO IOS APPS Today most people interact with and work on personal computers without needing to speak their languages (that is, actually program them to do all the work) The most incredible... http://developer.apple.com/devcenter /ios/ 2.4 The iOS Dev Center, your resource for iOS development From 22 THE WEB DESIGNER’S GUIDE TO IOS APPS N O T E Directory location of the SDK Note that Xcode and its related iOS SDK apps are not installed in your regular Applications directory If you went with the default location, these applications were installed Under the page heading, there is a View menu where there... can be applied to designing web apps, which can then be viewed on any mobile device with a standards- based web browser There are several other tools in the SDK, too, such as Interface Builder and a variety of diagnostic tools These are not necessary for the apps and methods covered in this book, but might be of interest if you decide to try your hand at writing your own Objective-C To start your adventurous... when they made the enormous leap from the full-size computer to the tiny iPod platform They restored the Internet connectivity that we’re used to From THE BIG IMPACT OF GOING SMALL / MOBILE APPLICATIONS DESK TOP APPLICATIONS 7 at our desktops and laptops, and reintroduced the ability to enter information via a (screen-based) keyboard after previously limiting users with the iPod s... (whether for your own project or that of a client or employer); and determine the best way to design it for iOS devices This book will continue within this paradigm, and show you how to leverage your design experience and web skills into designing iOS apps, and introduce you to some techniques that allow you to craft these projects without writing your own Objective-C code Design starts with people and. .. advantages to you down the road From 18 THE WEB DESIGNER’S GUIDE TO IOS APPS After selecting the new Developer ID option, you’ll be forwarded to personal and professional profile pages This is another area that appears to require careful answers, but don’t be particularly concerned For example, there are questions about your primary app market, the categories of apps you plan to design, and. .. reading a book about designing iOS apps with HTML, CSS, and JavaScript that you can distribute or sell in the iTunes App Store This must mean that you are a web designer and have some interest in designing native apps for the iPhone, iPod touch, and iPad It might also mean that you’re ready to take a leap of faith and start reading about something that sounds too good to be true After all, I had a workshop... makes much more sense to me than learning how to implement a feature first, then trying to think of a way to build an app around the behavior From 8 THE WEB DESIGNER’S GUIDE TO IOS APPS Designing an app for a mobile device is very different than designing a website that will be viewed on a computer with a full-size screen We tend to use desktop and even laptop—computers more often... than one way to solve a design problem with code Sometimes I show you more than one way, and other times I just show one When I choose one, it’s either an easier way or just the From xii THE WEB DESIGNER’S GUIDE TO IOS APPS way I know If you have another way (and especially a better way), feel free to tell me via this book’s website at http://iosapps.tumblr.com If you submit code that... the applause and Pomp and Circumstance playing in the background.) You’ve made it—you have a Developer ID, and are on your way to downloading what you’ve been patiently anticipating: the iOS SDK! Downloading and installing the iOS SDK Whew! Fortunately the rest of this process is quick and easy Well, mostly easy And, well, not so quick—that depends The fact of the matter is, the iOS SDK is one of the . ptg
ptg
The Web Designer’s Guide to iOS Apps:
Create iPhone,
iPod touch, and iPad Apps
with Web Standards
HTML5, CSS3, and JavaScript
From <www.wowebook.com>
ptg
The. <www.wowebook.com>
ptg
The Web Designer’s Guide to iOS Apps: Create iPhone, iPod touch,
and iPad apps with Web Standards (HTML5, CSS3, and JavaScript)
Kristofer Layon
New
Ngày đăng: 22/03/2014, 20:20
Xem thêm: The Web Designer’s Guide to iOS Apps: Create iPhone, iPod touch, and iPad Apps with Web Standards docx, The Web Designer’s Guide to iOS Apps: Create iPhone, iPod touch, and iPad Apps with Web Standards docx