Back to description
The introduction of the iPhone and subsequent unveiling of the iPod touch revolutionized the way people interacted with handheld... more
The introduction of the iPhone and subsequent unveiling of the iPod touch revolutionized the way people interacted with handheld devices. No longer did users have to use a keypad for screen navigation or browse the Web through “dumbed down” pages. These Apple devices brought touch screen input, a revolutionary interface design, and a fully functional Web browser right into the palms of people’s hands. However, the question in the developer community in the months leading up to the release of the iPhone was: Will Apple allow third-party developers to develop custom applications for this new mobile platform? Apple’s response was one that made Web developers happy and Objective-C programmers sadiPhone and iPod touch applications would be Safari-based apps that are built using standard Web technologies. Apple opted for this solution as a way to provide developers with the freedom to create custom apps, all the while maintaining control of the user experience of these two devices.
... less
User interface design has been evolutionary rather than revolutionary over the past decade. Most would argue that Mac OS... more
User interface design has been evolutionary rather than revolutionary over the past decade. Most would argue that Mac OS X and Windows Vista both have much more refined UIs than their predecessors. As true as that may be, their changes improve upon existing ideas rather than offer groundbreaking new ways of interacting with the computer. Web design is no different. All of the innovations that have transpiredsuch as AJAX and XHTMLhave revolutionized the structure and composition of a Web site, but not how users interact with it. Moreover, mobile and handheld devices offered a variety of new platforms to design for, but these were either lightweight versions of a desktop OS or a simplistic character-based menu.
Enter iPhone and iPod touch.
An iPhone/iPod touch interface (I’ll refer to it as an “iPhone interface” for short) is not a traditional desktop interface, though it is has a codebase closely based on Mac OS X. It is not a traditional mobile interface, though iPhone and iPod touch are mobile devices. Despite the fact that you build apps using Web technologies, an iPhone interface is not a normal Web application interface either. iPhone is clearly the first groundbreaking UI platform that many developers will have ever worked with.
Because the underlying guts of iPhone applications are based on Web 2.0 technologies, many Web developers will come to the iPhone platform and naturally think they are just creating a Web application that runs on a new device. That’s why the biggest mindset change for developers is to grasp that they are creating iPhone applications, not Web applications that run on iPhone. The difference is significant. In many ways, iPhone applications are far more like Mac or Windows desktop applicationsusers have a certain look and feel and core functionality that they will expect to see in your iPhone application.
On the Web, users expect every interface design to be one-offs. Navigation, controls, and other functionality are unique to each site. However, when working on a platformbe it Windows, Mac OS X, or iPhonethe expectation is much different. Users anticipate a common way to do tasksfrom application to application. Operating systems provide application program interfaces (APIs) for applications to call to display a common graphical user interface (GUI). Since the iPhone does not have such a concept, it is up to the application developer to implement such consistency.
This chapter will provide the high-level details and specifications you need to consider when designing a UI for iPhone. Chapter 4 continues on by diving into the actual code needed to implement these user interfaces.
The previous chapter surveyed the UI standards and guidelines that you need to keep in mind as you design an application... more
The previous chapter surveyed the UI standards and guidelines that you need to keep in mind as you design an application that works well on iPhone and iPod touch. With these design principles in hand, you are ready to apply them as you develop and program your application.
In order to demonstrate how to implement an iPhone interface, I will walk you through a case study application I am calling iRealtor. The concept of iRealtor is to provide a mobile house-hunter application for potential buyers. The current pattern for Internet-based house hunting is to search MLS listings online, print out individual listing addresses, get directions, and then travel to these houses. However, with iRealtor, all of those tasks can be done on the road with an iPhone-based application. The design goals of iRealtor are to provide a way for users to:
Browse and search the MLS listings of a local realtor.
Get a map of an individual listing directly from its listing page.
Access information about the realtor and easily contact the realtor using iPhone phone or mail services.
Browse other helpful tools and tips.
As you look at these overall objectives, an edge-to-edge navigation design looks like an obvious choice given the task-based nature of the application. Joe Hewitt’s iUI (code.google.com/p/iui/) will serve as the underlying framework for the user interface. iUI is designed to retrieve and format HTML fragments and automatically handle many application events, such as phone rotation. The realtor information will be relatively static, but the MLS listings will need to be database-driven. Therefore, you will take advantage of the AJAX capabilities of iUI to seamlessly integrate listing data into the application.
code.google.com/p/iui/
Note
The initial version of iUI should be used only in iPhone and iPod touch–specific applications. It is not compatible with Internet Explorer, Firefox, and earlier versions of Safari for Mac.
Here’s an overview of the technologies that will be used for iRealtor:
XHTML/HTML and CSS for presentation layer
JavaScript for client-side logic
AJAX for loading data into the application
PHP or other server-side technology to serve MLS listing data (not included in case study example)
As I walk you through the application, I’ll examine both the custom code I am writing for iRealtor as well as the underlying iUI styles and code that power it. Therefore, even if you decide not to use iUI, then you at least will have a solid grasp on the key design issues you will need to consider.
Like its Mac and Windows cousins, Mobile Safari provides some of the best CSS support of all Web browsers. As you develop... more
Like its Mac and Windows cousins, Mobile Safari provides some of the best CSS support of all Web browsers. As you develop iPhone and iPod touch applications, you can utilize CSS to make powerful user interfaces.
Mobile Safari provides support for several of the more advanced -webkit- styles that are not part of the W3C CSS standard. (A -webkit- prefix is added to the names of these properties.) For a normal Web application, developers will typically stay away from these experimental properties or at least not rely upon them for their application's design. However, because you know that an iPhone and iPod touch user will be using Mobile Safari, you can safely use these more advanced styles as you create your UI.
-webkit-
An essential part of any Web 2.0 application is the ability to respond to events triggered by the user or by a condition... more
An essential part of any Web 2.0 application is the ability to respond to events triggered by the user or by a condition that occurs on the client. The clicking of a button. The pressing of a key. The scrolling of a window. While the user interacts with an HTML element, the entire document, or the browser window, JavaScript serves as the watchful eye behind the scenes that monitors all of this activity taking place and fires off events as they occur.
With its touch screen interface, iPhone is all about direct interactivity with the user. As a result, you would expect any iPhone/iPod touch application you create to be able to handle the variety of finger taps, flicks, swipes, and pinches that a user naturally performs as they interact with their mobile device. However, because of the current capabilities of Mobile Safari browser, you have to work with these interactions differently than what you might expect.
The unique platform capabilities of iPhone and iPod touch enable developers to create innovative applications inside of Mobile... more
The unique platform capabilities of iPhone and iPod touch enable developers to create innovative applications inside of Mobile Safari that go beyond the normal “Web app” fare. Mobile Safari's support for the canvas element opens drawing and animation capabilities in an ordinary HTML page that was previously available only by using Flash or Java. What’s more, deep inside the heart of these two Apple devices lies the best portable audio and video media player that money can buy. As an application developer, you can take advantage of these iPod capabilities by seamlessly integrating multimedia into your mobile applications.
canvas
However, once you begin to open up these capabilities of Mobile Safari or the device itself, you need to be sure that you are working with an iPhone and iPod touch rather than a desktop browser. So, I'll start by showing you how to identify the user agent for iPhone and iPod touch.
One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the application with core... more
One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the application with core mobile services, such as dialing phone numbers or sending e-mails. After all, once you break those inside the browser barriers, the application becomes more than just a Web app and extends its functionality across the mobile device.
However, iPhone service integration is a mixed bag; it’s a “good news, bad news” situation. On the upside, perhaps the three most important mobile functions (Phone, Mail, and Google Maps) are accessible to the developer. On the downside, there are no means of tapping into other core services, such as SMS messaging, Calendar, Address Book, Camera, Clock, iPod, and Settings.
In order to demonstrate the integration with iPhone services, you’ll be working with a sample application called iProspector, which is a mocked up contact management system that emulates the iPhone Contact UI. To create the UI, you will be starting with Joe Hewitt’s iUI framework, which is discussed fully in Chapter 3. However, because it does not provide support for the specific controls needed for the Contact UI, this chapter will show you how to extend iUI as service integration is discussed.
Because iPod touch does not provide support for Phone and Mail services, any iPhone-specific integration should degrade gracefully when running on iPod touch.
Oh, the irony. On the same day that I began writing a chapter on enabling Web sites for iPhone and iPod touch, I would realize... more
Oh, the irony. On the same day that I began writing a chapter on enabling Web sites for iPhone and iPod touch, I would realize firsthand the frustration of browsing sites that just don’t work with my iPhone. My boys and I were watching the third quarter of a Monday Night Football game when the electricity suddenly went out because of a town-wide outage. Because my son’s favorite team was playing, he was frantic. What’s happening in the game? Are the Titans still winning? I immediately pulled out my iPhone and confidently launched Mobile Safari in search of answers. But upon going to NFL.com, I discovered that its live updating scoreboard is Flash only. I was left with a gray box with a Lego-like block in its place. I then pointed the browser to the official Tennessee Titans site, only to discover useless Lego blocks scattered across its front page as well. We then spent the rest of the outage scouring the Web, looking for a site to help us.
If you manage a Web site, Apple’s release of iPhone and iPod touch introduce a whole new way of thinking in the design and development of a site. In the past, you could design a minimalist, text-only style sheet for mobile usersfully expecting your normal Web site to be viewed only by desktop browsers. However, expectations of iPhone and iPod touch users are not so modest. They are expecting to view the full Web in the palm of their hands. Therefore, as you design and develop your Web site, you will want to consider the level of support you wish to provide for these Apple deviceswhether to offer mere compatibility, device friendliness, or even a design specifically targeting them. This chapter goes over the four tiers of enabling your Web site for Mobile Safari:
Tier 1: Compatibility
Tier 2: Navigation friendliness
Tier 3: Device-specific style sheets
Tier 4: Dedicated alternative site
Once Apple made the strategic decision to support Web-based applications for iPhone and iPod touch rather than native applications... more
Once Apple made the strategic decision to support Web-based applications for iPhone and iPod touch rather than native applications, optimization emerged as a front burner issue for application developers. With native applications, programmers can code in their personal style, efficient or not, because the actual performance hit is negligible, even on a mobile device like iPhone. What’s more, in a decade where broadband is now the norm, many Web developers have fallen into those same tendencies and allow their sites and applications to be composed of ill-formed HTML, massive JavaScript libraries, and multiple CSS style sheets.
However, when you are developing applications for iPhone and iPod touch, you need to refocus your programming and development efforts toward optimization and efficiency. What makes it different from normal Web 2.0 apps is that the developer can no longer rely on the fact that the user is accessing the application from a broadband connection. iPhone users may be coming to your application using Wi-Fi or a much slower EDGE connection.
Therefore, as you develop your applications, you will want to formulate an optimization strategy that makes the most sense for your context. You’ll want to think about both bandwidth and code performance optimizations.
Because iPhone and iPod touch applications function inside of the Mobile Safari environment, there are two seemingly obvious... more
Because iPhone and iPod touch applications function inside of the Mobile Safari environment, there are two seemingly obvious restrictions for the Web developer: You must live with the built-in capabilities of the Mobile Safari browser; and you need a constant Wi-Fi (or, for iPhone, EDGE) connection in order to run any application.
The truth is that you can get around these limitations by taking advantage of two lesser-known technologiesbookmarklets and data URLs. These technologies have actually been around for years, but they have tended to exist on the periphery of mainstream Web development. However, developers are now reexamining these two developer tools to maximize the potential of the iPhone application platform.
Bookmarklets (short for bookmark applets) are mini JavaScript “applets” that can be stored as a bookmark inside of Safari. A data URL is a technique for storing an entire Web page or application (pages, styles, images, data, and scripts) inside of a single URL, which can then be saved as an iPhone/iPod touch Bookmark. This application-in-a-bookmark can then be accessed in offline mode.
Throughout this book, you’ve focused on building iPhone and iPod touch applications that generally adhere to the edge-to-edge... more
Throughout this book, you’ve focused on building iPhone and iPod touch applications that generally adhere to the edge-to-edge navigation UI model. For example, Chapter 3 used the standard UI model for iRealtor, a home buyers application. Chapter 7 did the same for iProspector, a contact manager. However, not all applications that you wish to create lend themselves to standard navigation lists and destination pages. Just a quick scan of built-in applications on iPhone and iPod touch shows a variety of different UI design models.
This chapter walks you through two case study applications that offer new takes on extending the normal application models. The first application extends iRealtor to provide an iPhone-like photo viewer to display home photos. The second application, WYFFL Online, demonstrates more techniques on converting a standard Web site into an iPhone/iPod touch application. Both of these case studies show you how to extend the iUI application framework for your own custom needs.
Get in, get out. That's the attitude that most developers have in testing and debugging their applications. Few developers... more
Get in, get out. That's the attitude that most developers have in testing and debugging their applications. Few developers look forward to these tasks during the development cycle, and so they want to efficiently get into the code, figure out what's working and what's not, fix any problems, and then move on.
Given the heterogeneous nature of Web applications, debugging has always been challenging, particularly when trying to work with client-side JavaScript. To address this need, fairly sophisticated debugging tools have emerged over the past few years among the developer community, most notably Firebug and other add-ons to Firefox. However, the problem is that most of these testing tools that Web developers have come to rely on for desktop browsers are not yet compatible with the iPhone and iPod touch platform.
Many iPhone developers, unsure of where else to turn, end up resorting to alert() debuggingyou know, adding alert() throughout the body of the script code to determine programmatic flow and variable values. However, not only is this type of debugging painful, but it can also throw off the timing of your script, making it difficult or impossible to simulate real world results. While the number of debugging and testing tools are indeed limited right now for Mobile Safari, you still have options that either work directly inside Mobile Safari or emulate Mobile Safari on your desktop. You will probably want to incorporate aspects of both as part of your regular debugging and testing process.
alert()
Purchase Before purchasing this product, please be sure you have met all software and system requirements, and that you understand any limits placed upon its use.
Return Policy Wrox Chapters on Demand are non-returnable and non-refundable.
Reader Software Wrox Chapters on Demand are offered as PDFs, and they must be viewed using the Adobe Reader. If you do not have the Reader installed, it can be downloaded for free at Adobe.com.
Test Download As Wrox Chapters on Demand purchases are non-returnable, it is advisable that you test your system and software configurations with a free sample download before you place an order.
Usage Rights for a Wrox Chapter on Demand File Any Wrox Chapter on Demand product you purchase from this site will come with certain restrictions that allow Wiley to protect the copyrights of its products. After you purchase and download this title, you:
If you have any questions about these restrictions, you may contact Customer Care at (877) 762-2974 (8 a.m. - 5 p.m. EST, Monday - Friday). If you have any issues related to Technical Support, please contact us at 800-762-2974 (United States only) or 317-572-3994 (International) 8 a.m. - 8 p.m. EST, Monday - Friday).
Related Books