Tài liệu Lập trình iphone chuyên nghiệp part 18 pptx

Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch
197
Tier 4: Parallel Sites
Unless you are creating an iPhone or iPod touch application, developing for Tier 2 or 3 support will
provide sufficient support for most sites. However, you might find a compelling need to actually
develop a site specifically written for iPhone/iPod touch. The content may be the same, but it needs
to be structured in a manner discussed in Chapters 2 and 3 .
Avoid Handcuffs, Offer Freedom
If you are going to offer an iPhone/iPod touch version of your site, you want to offer your users the
freedom to choose between the customized site and your normal site. Don ’ t auto - redirect based on user
agent. Because Mobile Safari can navigate a normal Web site, you should always allow users to make the
decision themselves. Amazon.com provides a good model. As Figure 8 - 16 shows, when you access their
homepage on your iPhone, it clearly notifies you of the alternative site, but does not handcuff you into
using it.
c08.indd 197c08.indd 197 12/7/07 2:54:42 PM12/7/07 2:54:42 PM
Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch
198
Figure 8-16: Amazon offers freedom to use the
normal site or an iPhone-specific version.
To add a similar functionality to a Web site, begin by adding an empty
div
element at the top of your
content, just below the top menu:

< div id=”iphone-ipod-notify” > < /div >
This element will serve as the placeholder for the message that you will display to iPhone and iPod
touch users.
Next, add the following script:

< script type=”application/x-javascript” >
function isAppleMobile() {

result ((navigator.platform.indexOf(“iPhone”) != -1) ||
(navigator.userAgent.indexOf(‘iPod’) != -1))
}
function init() {
c08.indd 198c08.indd 198 12/7/07 2:54:42 PM12/7/07 2:54:42 PM
Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch
199
if ( isAppleMobile ) {
var o = document.getElementById( ‘iphone-ipod-notify’ );
o.innerHTML = “ < h1 style=’text-align:center;border: 1px solid #a23e14; -
webkit-border-radius: 10px;’ > < a href=’iphone-ipod-index.html’ > Tap here to go to
our < br/ > iPhone/iPod touch web site. < /a > < /h1 > ”;
}
}
< /script >
The
init()
function calls
isAppleMobile()
function to determine whether the user agent is an Apple
mobile device. If so, then HTML content is added to the placeholder
div
element. If not, then nothing is
added. The
init()
function is then called from the
onload
handler of the
body
. Figure 8 - 17 shows the

results when viewed from an iPhone or iPod touch.
Figure 8-17: Offering a freedom of choice to your users
c08.indd 199c08.indd 199 12/7/07 2:54:42 PM12/7/07 2:54:42 PM
Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch
200
Transform a Site to an iPhone/iPod touch Design
Once you decide to create a companion site specifically for Mobile Safari users, you have to decide
how existing content best fits inside of an iPhone and iPod touch UI design. You need to determine
whether you want to create your own custom design or model after the standard edge - to - edge naviga-
tion. (See Chapters 2 and 3 for more on UI design.) The edge - to - edge design scheme works well for
many Web sites, as you ’ ll see here.
As a case study, you ’ ll turn once again to the Operation Classroom Web site, the homepage of which is
shown in Figure 8 - 18 . Several aspects of this site lend itself to using the edge - to - edge navigation UI.
First, the site hierarchy could be easily converted to a series of nested list items. Second, the news entries
and quick links entries also work great as lists.
Top menu
Quick links section
News
entries
Figure 8-18: Operation Classroom homepage
Using the iUI framework and the cUI extension (see Chapter 7 ), you ’ ll create a new HTML page contain-
ing the top - level menu. Here ’ s the initial code:

< body >
< !-- Top iUI toolbar -- >
< div class=”toolbar” >
< h1 id=”pageTitle” > < /h1 >
c08.indd 200c08.indd 200 12/7/07 2:54:43 PM12/7/07 2:54:43 PM
Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch
201

< a id=”backButton” class=”button” href=”#” > < /a >
< /div >
< !-- Top-level menu -- >
< ul id=”home” title=”OC for iPhone” selected=”true” >
< li > < a href=”#news” > News < /a > < /li >
< li > < a href=”#quick-links” > Quick Links < /a > < /li >
< li > < a href=”#schools-programs” > Schools and Programs < /a > < /li >
< li > < a href=”#workteams” > Workteams < /a > < /li >
< li > < a href=”#shipping” > Shipping < /a > < /li >
< li > < a href=”#supplies” > Supplies < /a > < /li >
< li > < a href=”#resources” > Resources < /a > < /li >
< li > < a href=”#about” > About OC < /a > < /li >
< li > < a href=”index.html” target=”_self” > Return to Regular Web Site < /a > < /li >
< /ul >
< /body >
The top list items include both the top - level links from the regular site, along with news entries, quick
links, as well as a link back to the regular Web site. Figure 8 - 19 shows the top - level menu when
displayed on the iPhone.
Figure 8-19: OC for iPhone/iPod touch
c08.indd 201c08.indd 201 12/7/07 2:54:43 PM12/7/07 2:54:43 PM