This book covers the various aspects of developing web-based applications for iOS. Over the past four years, the iPhone and iPad have been amazingly successful. Because of this success, application developers are entering a world of sophisticated, multifunctional mobile applications. Now mobile web-based applications can bring together web apps, native apps, multimedia video and audio, and the mobile device itself. By using this book you will learn how to create a mobile application from beginning to end, utilizing open source frameworks to speed up development times, emulate the look and feel of built-in Apple applications, capture finger touch interactions, and optimize applications for Wi-Fi and wireless networks.
The book introduces you to the web application platform for iOS. It also guides you through the process of building new applications from scratch as well as migrating existing web applications to this new mobile platform. By doing this, the book helps readers design a user interface that is optimized for iOS touch-screen displays and integrate their applications with iPhone services, including Phone, Mail, Google Maps, and GPS.
This book is aimed at beginning and intermediate web developers who want to learn how to build new applications for iOS or migrate existing web apps to this platform. In general, you will find it helpful if you have a working knowledge of these technologies:
|Product dimensions:||7.40(w) x 9.20(h) x 0.90(d)|
About the Author
Richard Wagner is Lead Product Architect of Mobile/Web at Maark, LLC. He is an experienced web designer and developer and the author of several web-related books on the underlying technologies of the iPhone application platform.
Read an Excerpt
By Richard Wagner
John Wiley & SonsCopyright © 2012 John Wiley & Sons, Ltd
All right reserved.
Chapter OneIntroducing iOS Development Using Web Technologies
WHAT YOU WILL LEARN IN THIS CHAPTER:
* Using Safari on iOS as a development environment
* Developing touch-oriented apps
* Setting up your development environment
The introduction of the iPhone, and the subsequent unveilings of the iPod touch and iPad, revolutionized the way people interacted with hand-held devices. No longer did users have to use a keypad for screen navigation or browse the Web through "dumbed down" pages. These mobile devices brought touch screen input, a revolutionary interface design, and a fully functional web browser right into the palms of people's hands.
Seeing the platform's potential, the developer community jumped on board. Although native applications may receive most of the attention, you can still create apps for iOS devices without writing a single line of Objective-C. In fact, the Safari on iOS browser provides a compelling application development platform for web developers who want to create custom apps for iOS using familiar web technologies.
DISCOVERING THE SAFARI ON IOS PLATFORM
An iOS web application runs inside the built-in Safari browser that is based on web standards, including the following:
* HTML/XHTML (HTML 4.01 and XHTML 1.9, XHTML mobile profile document types)
* CSS (CSS 2.1 and partial CSS3)
* AJAX (for example, XMLHTTPRequest)
* SVG (Scalable Vector Graphics) 1.1
* HTML5 media tags
* Ancillary technologies (video and audio media, PDF, and so on)
Safari on iOS (which I refer to throughout the book interchangeably as Safari or Safari on iOS) becomes the platform upon which you develop applications and becomes the shell in which your apps must operate (see Figure 1-1).
Quite obviously, native apps and Web apps are not identical to each other — both from developer and end-user standpoints. From a developer standpoint, the major difference is the programming language — utilizing Web technologies rather than Objective-C. However, there are also key end-user implications, including the following:
* Performance: The performance of a Safari-based web application is not going to be as responsive as a native compiled application, both because of the interpretive nature of the programming languages as well as the fact that the application operates over Wi-Fi and 3G networks. (Remember, some iPad models and all models of the iPod touch support Wi-Fi access only.) However, in spite of the technological constraints, you can perform many optimizations to achieve acceptable performance.
* Launching: Native applications are all launched from the main Home screen of the iOS device (see Figure 1-3). In the original iPhone OS release, Apple provided no way for web apps to be launched from here, which meant that web apps to be accessed from the Safari Bookmarks list. Fortunately, the most recent iOS enables users to add "Web Clip" icons for their web app (such as the Color Mail web app shown in Figure 1-4) so that they can appear on the Home screen, too.
What's more, recent upgrades to the iOS now enable you to hide all Safari browser UI elements through meta tags, so you can essentially emulate the look and feel of a native app. (See Figure 1-7.)
KEY SAFARI FEATURES FOR WEB DEVELOPERS
There are several capabilities available to web app developers with the recent releases of iOS. These are highlighted in the following list.
Google, for example, uses this capability with its Web-based Latitude service for sharing your location with your friends.
* CSS animation and effects: The new release of Safari supports CSS animation, which enables you to manipulate elements in various ways, such as scaling, rotating, fading, and skewing. Safari on iOS also supports CSS effects, which enable you to create gradients, masks, and reflections entirely through CSS.
* SVG: SVG (Scalable Vector Graphics) is an XML-based format for creating static and animated vector graphics. With SVG support, Safari on iOS not only provides a way to work with scalable graphics, but actually provides a technology that could replace the need for Flash to create animated media.
FOUR WAYS TO DEVELOP WEB APPS FOR IOS
* Level 1 — Fully compatible website or application: The ground level approach is to develop a website or app that is "iOS friendly" and is fully compatible with the Apple mobile devices (see Figure 1-10). These sites avoid using technologies that the Apple mobile devices do not support, including Flash, Java, and other plug-ins. The basic structure of the presentation layer also maximizes use of blocks and columns to make it easy for users to navigate and zoom within the site. This basic approach does not do anything specific for iOS users, but makes sure that there are no barriers to a satisfactory browsing experience.
* Level 2 — Website or application optimized for Safari on iOS: The second level of support for iOS is to not only provide a basic level of experience for the user of Safari on iOS but also to provide an optimized user experience for users who use Safari browsers, such as utilizing some of the enhanced WebKit CSS properties supported by Safari.
* Level 3 — Dedicated mobile website or application: A third level of support is to provide a website or app tailored to the viewport dimensions of iPhone and/or iPad and provide a strong web browsing experience for all mobile device users (see Figures 1-11 and 1-12). However, although these sites are tailored for mobile viewing, they are not designed to take full advantage of iOS capabilities. And, in many cases, these are often stripped-down versions of a more complete website or application.
* Level 4 — iOS web application: The final approach is to provide a web application that is designed exclusively for iPhone and/or iPad and has a UI design that resembles a native app or one that takes full advantage of the capabilities of iOS devices (see Figure 1-13). One of the design goals is to minimize users' awareness that they are even inside of a browser environment. Moreover, a full-fledged iOS application will, as is relevant, integrate with iOS-specific services, including Phone, Mail, and Maps apps.
Therefore, as you consider your application specifications, be sure to identify which level of user experience you want to provide iOS users and design your application accordingly. In this book, I focus primarily on developing web applications optimized for iOS.
THE FINGER IS NOT A MOUSE
As you develop applications for iOS, one key design consideration that you need to drill into your consciousness is that the finger is not a mouse. On the desktop, a user can use a variety of input devices — such as an Apple Magic Mouse, a Logitech trackball, or a laptop touchpad. But, on screen, the mouse pointer for each of these pieces of hardware is always identical in shape, size, and behavior. However, on iOS, the pointing device is always going to be unique. Ballerinas, for example, probably input with tiny, thin fingers, while NFL players use big, fat input devices. Most of the rest of us will fall somewhere in between. Additionally, fingers are also not nearly as precise as mouse pointers are, making interface sizing and positioning issues very important, whether you are creating an iOS-friendly website or a full-fledged iPhone or iPad web application.
Additionally, finger input does not always correspond to a mouse input. A mouse has a left click, right click, scroll, and mouse move. In contrast, a finger has a tap, flick, drag, and pinch. However, as an application developer, you want to manage what types of gestures your application supports. Some of the gestures that are used for browsing websites (such as the double-tap zoom) are actually not something you normally want to support inside of an iOS web app. Table 1-2 displays the gestures that are supported on iOS as well as an indication as to whether this type of gesture should be supported on a website or full web application.
LIMITATIONS AND CONSTRAINTS
Because iPhone, iPad, and iPod touch are mobile devices, they are obviously going to have resource constraints that you need to be fully aware of as you develop applications. Table 1-3 lists the resource limitations and technical constraints. What's more, certain technologies (listed in Table 1-4) are unsupported, and you need to steer away from them when you develop for iOS devices.
SETTING UP YOUR DEVELOPMENT ENVIRONMENT ON A LOCAL NETWORK
Because iOS does not allow you to access the local file system, you cannot place your application directly onto the device itself. As a result, you need to access your web application through another computer. On a live application, you obviously want to place your application on a publicly accessible Web server. However, testing is another matter. If you have a Wi-Fi network at your office or home, I recommend running a web server on your main desktop computer to use as your test server during deployment.
If you are running Mac OS X, you already have Apache web server installed on your system. To enable iOS access, go to System Preferences, Sharing Services and turn the Web Sharing option on (see Figure 1-14). When this feature is enabled, the URL for the website is shown at the bottom of the window. You use this base URL to access your web files from an iOS device.
You can add files either in the computer's website directory (/Library/WebServer/Documents) or your personal website directory (/Users/YourName/Sites) and then access them from the URL bar on your iPhone or iPad (see Figure 1-15).
1. What's the difference between a native iOS app and a web app?
2. Can a web app be placed on the Home screen alongside native apps?
3. Does finger input always correspond to mouse input?
Answers to the Exercises can be found in Appendix A.
WHAT YOU LEARNED IN THIS CHAPTER
TOPIC KEY CONCEPTS
Key Safari features for developers Geolocation support, HTML5 media tags, CSS animation and effects, and SVG
Supporting mobile devices on your Level 1: Fully compatible website/application website Level 2: Website/application optimized for Safari on iOS
Level 3: Dedicated mobile website/application
Level 4: iOS web application
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.
Table of Contents
PART I: GETTING STARTED
CHAPTER 1: INTRODUCING IOS DEVELOPMENT USING WEB TECHNOLOGIES 3
CHAPTER 2: WORKING WITH CORE TECHNOLOGIES 15
CHAPTER 3: THE DOCUMENT OBJECT MODEL 47
CHAPTER 4: WRITING YOUR FIRST HELLO WORLD APPLICATION 65
CHAPTER 5: ENABLING AND OPTIMIZING WEB SITES FOR THE IPHONE AND IPAD 79
PART II: APPLICATION DESIGN
CHAPTER 6: DESIGNING THE IPHONE UI 99
CHAPTER 7: DESIGNING FOR IPAD 117
CHAPTER 8: STYLING WITH CSS 135
PART III: APPLICATION DEVELOPMENT
CHAPTER 9: PROGRAMMING THE INTERFACE 153
CHAPTER 10: HANDLING TOUCH INTERACTIONS AND EVENTS 189
CHAPTER 11: SPECIAL EFFECTS AND ANIMATION 207
CHAPTER 12: INTEGRATING WITH IOS SERVICES 223
CHAPTER 13: PACKAGING APPS AS BOOKMARKS: BOOKMARKLETS AND DATA URLS 235
PART IV: ADVANCED PROGRAMMING TECHNIQUES
CHAPTER 14: PROGRAMMING THE CANVAS 251
CHAPTER 15: OFFLINE APPLICATIONS 269
CHAPTER 16: BUILDING WITH WEB APP FRAMEWORKS 287
CHAPTER 17: BANDWIDTH AND PERFORMANCE
CHAPTER 18: DEBUG AND DEPLOY 317
CHAPTER 19: PREPARING FOR NATIVE IOS DEVELOPMENT 333
CHAPTER 21: SUBMITTING YOUR APP TO THE APP STORE 363
APPENDIX: EXERCISE ANSWERS 375