Chapter 1

Introducing 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)
• JavaScript (ECMAScript 3 (ECMA 262), JavaScript 1.4)
• 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).

FIGURE 1-1

Safari is built with the same open source WebKit browser engine as Safari for OS X and Safari for Windows. However, although the Safari family of browsers is built on a common framework, you’ll find it helpful to think of Safari on IOS as a close sibling to its Mac and Windows counterparts rather than as an identical twin to either of them. Safari on IOS, for example, does not provide the full extent of CSS or JavaScript functionality that its desktop counterpart does.

In addition, Safari on IOS provides only a limited number of settings that users can configure. As Figure 1-2 shows, users can turn off and on support for JavaScript, plug-ins, and a pop-up blocker. Users can also choose whether they want to always accept cookies, accept cookies only from sites they visit, or never accept cookies. A user can also manually clear the history, cookies, and cache from this screen.

FIGURE 1-2

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.

Table 1-1 shows the bandwidth performance of Wi-Fi, 3G, and the older EDGE networks.

TABLE 1-1: Network 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.
• User interface (UI): Native IOS applications often adhere to Apple UI design guidelines. When you design a web app, you should never feel compelled to try to perfectly re-create a native-looking UI. At the same time, you should create a UI that is ideally suited for a mobile, touch device. Fortunately, using open source frameworks and standard web technologies, you can do so using a combination of HTML, CSS, and JavaScript. Figures 1-5 and 1-6 compare the UI design of a native application and a Safari-based web app.

FIGURE 1-3

FIGURE 1-4

FIGURE 1-5

FIGURE 1-6

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.)

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.

• Geolocation: Safari on IOS supports HTML5 geolocation capabilities, which enables JavaScript to interact with the iPhone or iPad’s GPS service to retrieve the current location of the device (see Figures 1-8 and 1-9). As a result, you can create apps that can broadcast the location of a GPS-enabled IOS device.

  Google, for example, uses this capability with its Web-based Latitude service for sharing your location with your friends.

• HTML5 Media Tags: Safari on IOS supports HTML5 video and audio elements for embedding video and audio content in Web pages. These new elements eliminate the need for complicated embed and object tags for embedding multimedia elements and enable you to utilize a powerful JavaScript API. What’s more, because IOS devices don’t support Flash, you can use the video tag to embed QuickTime .mov files. Because Safari is the first major browser to provide full support for HTML5 media tags, you have to be careful in their usage on standard websites because other browsers may not support it yet. However, because you are creating an app specifically for IOS, you can make full use of these tags.
• 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.

FIGURE 1-8

FIGURE 1-9

FOUR WAYS TO DEVELOP WEB APPS FOR IOS

A web application that you can run in any browser and an IOS web application are certainly made using the same common ingredients — HTML, CSS, JavaScript, and AJAX — but they are not identical. In fact, there are four approaches to consider when developing for IOS devices:

• 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.

FIGURE 1-10

FIGURE 1-11

FIGURE 1-12

FIGURE 1-13

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.

Table 1-2: Finger Gestures

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.

TABLE 1-3: Resource Constraints

TABLE 1-4: Technologies Not Supported by iPhone and iPod touch

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.

FIGURE 1-14

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).

FIGURE 1-15

• WHAT YOU LEARNED IN THIS CHAPTER