Learn HTML5 and JavaScript for iOS: Web Standards-based Apps for iPhone, iPad, and iPod touch

287 Pages·2012·16.22 MB·English

by  Scott Preston

For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
Contents at a Glance
Contents..................................................................................................................vii
About the Author.................................................................................................xxix
About the Technical Reviewer.............................................................................xxix
Preface.................................................................................................................xxx
■ Chapter 1: Getting Started...................................................................................1
■ Chapter 2: HTML5 in Short.................................................................................21
■ Chapter 3: CSS3 and iOS Styling........................................................................41
■ Chapter 4: JavaScript and APIs.........................................................................65
■ Chapter 5: Mobile Frameworks..........................................................................85
■ Chapter 6: Usability, Navigation, and Touch....................................................103
■ Chapter 7: GPS and Google Maps.....................................................................121
■ Chapter 8: Animation and Effects....................................................................141
■ Chapter 9: Canvas............................................................................................157
■ Chapter 10: Audio and Video............................................................................175
■ Chapter 11: Integrating with Native Services..................................................185
■ Chapter 12: Offline Apps and Storage..............................................................195
■ Chapter 13: Mobile Testing..............................................................................203
■ Chapter 14: Advanced Topics..........................................................................219
■ Chapter 15: Going Native with PhoneGap........................................................229
v
■ Appendix: Companion Site References............................................................249
Index.....................................................................................................................263

vi
C H A P T E R 1

■ ■ ■

Getting Started
Congratulations! You are building your first web application for your iOS device (iPhone, iPad, or iPod
Touch) using HTML5 and JavaScript.
You might think that you can pick up one of your HTML or JavaScript books from years past and
then just scale it down to the size of your target device and you’ll be good to go. You’d be wrong. A lot
has changed.
In this chapter we lay the groundwork for building a mobile web app. Here we cover things like
getting familiar with your browser, setting up your mobile project, architecting the site, and creating a
site map as well as selecting the tools you’ll use to build it.
All you need is an idea, and I’ll help you take care of the rest.
You purchased this book to get started building a mobile web app. I won’t beat around the bush and
tell you about the history of the Internet or the history of browsers. Instead, let’s just jump in.
Your Browser (Mobile Safari)
The browser we’ll focus on is Mobile Safari—a WebKit-based browser engine that does an excellent job
of parsing HTML5 and interpreting JavaScript.
■ Note Browsers use different rendering engines. Safari and Google Chrome use WebKit, Opera uses Presto,
Firefox uses Gecko, and Internet Explorer uses Trident. In later chapters we’ll need to use specific features of
WebKit to achieve a more native-looking mobile web application.
Mobile Safari acts and renders in many ways similar to regular Safari, but it has a smaller screen, of
course, and responds to gestures and touches as opposed to clicks. It also has noticeable performance
differences and does not support Adobe Flash.
One of mobile Safari’s most important screens is its Settings screen. You can get to it by clicking on
Settings, and then Safari on the iPhone or iPad home screen. You’ll see a screen like the one shown in
Figure 1-1.
1
CHAPTER 1 ■ GETTING STARTED

Figure 1-1. Safari Settings screen
Many of the settings here are straightforward and familiar to you from your desktop or laptop
browser. Above all, I’d recommend that you set your Advanced ➤ Debug Console to On. This will help in
debugging your app from within your simulator or on your phone. You can see this in Figure 1-2 below.
2
CHAPTER 1 ■ GETTING STARTED

Figure 1-2. Debug settings for Safari
Planning Your Project
Before embarking on a mobile project, you need to have certain things in place, which I’ll talk about
next. If you’re a seasoned web developer you probably know all of this stuff and can skip ahead;
otherwise, keep in mind this is just an overview. If you have detailed questions, you can ask me via my
site: http://www.learnhtml5book.com.
First, I’ll talk about setting up your environment.
Local Environment
Fortunately, OS X comes with Apache built in. To enable Apache to work with your site, go to System
Preferences ➤ Sharing, and then enable Apache by clicking on the Web Sharing box, as shown in Figure 1-3.
You now have an Apache web server serving content from /Users/{username}/Sites.
3
CHAPTER 1 ■ GETTING STARTED

Figure 1-3. Enabling Apache in OSX
Remote Environment (Hosting)
If you don’t have a web host for your site, you’ll eventually need to get one. You have plenty to choose
from. In the past I’ve had good luck with Host Gator (http://www.hostgator.com). You can get a site there
starting at around $4 per month for Linux hosting.
Bug and Feature Tracking
Your site will not be perfect at launch, and you’ll want to add features to it over time. For this, I’d
recommend a ticketing and feature-tracking system.
If you want, you can start out with a spreadsheet or a text file, but for more elaborate projects you
can use online sites like:
• http://16bugs.com
• http://www.lighthouseapp.com
Two other options, which even integrate with your version control system, are:
• Trac (http://trac.edgewall.org/)
4
CHAPTER 1 ■ GETTING STARTED

• Redmine (http://www.redmine.org/)
Redmine is my current favorite.
Version Control
Every project needs version control software and there are two main version control systems out there.
Basically, the two version control systems do the same thing—they keep track of your code:
• Subversion (SVN) keeps track of all your code in a single repository or server. SVN
has been around a lot longer than Git (the other option), there’s more
documentation, and it’s a little easier to learn and understand. You can find free
online SVN providers including http://www.beanstalkapp.com and
http://www.springloops.com.
• Git keeps track of everything locally and on a server. Git is newer and faster than
SVN but is a little more difficult to understand. There are also free online providers
like: http://www.github.com, and http://www.springloops.com.
If you don’t know either, then pick Git; the investment is well worth it.
Deployments
At some point, you’ll want to push your code to your host. You can do this in one of two ways:
• Manually, by uploading via FTP to your host
• Automatically, from your version control provider via online tools
Springloops (http://www.springloops.com) gives you the SVN or Git version control system, and
then, based on schedule or commit, automatically deploys to your host. This will save you a lot of time
and prevent you from overwriting files accidently.
Editor (IDE or Text Editor)
The editor is where you do all your work in building your site. You can choose to use either an IDE
(integrated development environment) or a text editor.
• An IDE (like Xcode, Eclipse, Dreamweaver, PHPStorm, and RubyMine) has the
added benefits of code/content assist, version control Integration, and color
coding, all of which make your programming easier and you more productive.
• A text editor like TextMate, Vim, or Emacs can have the same features and there
are extensions that allow some to come close to an IDE, but often the learning
curve is a little steeper.
Site Integration
How do you want to integrate with your site? You can do this in one of two ways:
• Fully integrate: Everything all together in the same web project including the
database code, your MVC framework, and your mobile site. The benefits of a fully
integrated approach is you have less JavaScript and can build your pages on the fly.
5
CHAPTER 1 ■ GETTING STARTED

• Service layer integration: You have your mobile site with HTML, CSS, and
JavaScript, and all calls for data and interaction to your MVC framework are done
via Ajax (asynchronous JavaScript and XML).
The benefits of the service layer integration is that you can add different mobile sites optimized for
different browsers without changing your back end. You can also change your back end, for example
from CakePHP to Ruby on Rails, and you won’t need to change your mobile site at all. The last benefit is
that turning your mobile site into a native app will be very easy.
I will use both these approaches for the sample mobile web app and native app. You will see the
benefits of both methods as you progress through the building of your app.
Site Maps
There are two kinds of site maps:
• The first is what a web crawler like Google uses to better index a web site.
• The second is a high-level block diagram or outline of your site that shows all the
pages and how they link together. That’s the site map you need to create before
you start your project.
You can create a sitemap either in a block diagram or with plain text. Sometimes block diagrams are
better for explaining site structure to customers. A text version might look something like this:
• Home
• Page 1 (get data from web API)
• Page 1 Detail 1 (get more data from web API)
• Page 1 Detail 2
• Detail 2 Info
• Page 2
• Contact
• Link to Twitter
• Link to Facebook
• About
Wireframes
A wireframe is a rough sketch of a page or screen without any colors or details. For this I recommend
that you just take a blank iPhone or iPad template and start drawing what you want your app to look like.
Figure 1-4 shows a sample wireframe of a simple mobile web app with tabbed navigation at the
bottom.
6