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

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 y

T ier 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

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() {

if ( isAppleMobile ) { var o = document.getElementById( ‘iphone-ipod-notify’ );

o.innerHTML = “ < h1 style=’textalign: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

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 >

< 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

The news entries from the regular homepage are converted to their own list of new articles Notice that

the entries are organized by date (see Figure 8 - 20 ) using the iUI class group :

< ! News menu >

< ul id=”news” title=”Latest News” >

< li class=”group” > Sept 20, 2007 < /li >

< li > < a href=”#news1” > 20 Year Celebration Coming Soon < /a > < /li >

< li class=”group” > Aug 18, 2007 < /li >

< li > < a href=”#news2” > Dr Marke To Attend Graduate School < /a > < /li >

< li > < a href=”#news3” > Workteam Scheduled for Kissy Clinic < /a > < /li >

< li class=”group” > June 23, 2007 < /li >

< li > < a href=”#news4” > Special Speakers Coming to Indiana in October < /a > < /li >

< li class=”group” > May 24, 2007 < /li >

< li > < a href=”#Bill_Drake” > Combat Malnutrition in Sierra Leone < /a > < /li >

< /ul >

Figure 8-20: News entries by date

Each of these links is connected with a destination page:

< div id=”news1” class=”panel” title=”OC News” >

< h2 > 20 Year Celebration Coming Soon < /h2 >

< > Have you sent to the OC office to get your ticket for the 20th year celebration

on Sunday October 28? The event will be held at JB’s Cafeteria in Greeley, IN The evening begins at 5:00pm with a gathering time and the dinner and program starts at 6:00pm The price of the meal is $25.00 Email the OC office for your ticket

Please include your check for the tickets A number of persons from Liberia and Sierra Leone will be a part of the evening < /p >

< /div >

Figure 8 - 21 displays the results of this page

Figure 8-21: News article as a destination page

iPhone services integration offers you some special things with Contact Us pages For example, when

displaying contact information for the organization, you use a cUI destination page, which is discussed

in Chapter 7 :

< ! Contact panel >

< div id=”about” title=”About Us” class=”panel” >

< div class=”cuiHeader” >

< img class=”cui” src=”images/iclass.png”/ >

< h1 class=”cui” > Operation Classroom < /h1 >

< h2 class=”cui” > Partnering in Sierra Leone and Liberia < /h2 >

< /div >

< fieldset >

< div class=”row” >

< label class=”cui” > office < /label >

< a class=”cuiServiceLink” target=”_self” href=”tel:(765) 555-1212”

onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 555-1212 < /a >

< /div >

< div class=”row” >

< label class=”cui” > mobile < /label >

< a class=”cuiServiceLink” target=”_self” href=”tel:(765) 545-1211”

onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 545-1211 < /a >

< /div >

< div class=”row” >

< label class=”cui” > email < /label >

< a class=”cuiServiceLink” target=”_self”

href=”mailto:info@operationclassroom.org” onclick=”return

(navigator.userAgent.indexOf(‘iPhone’) != -1)” > info@oc.org < /a >

< /div >

< /fieldset >

< fieldset >

< div class=”rowCuiAddressBox” >

< label class=”cui” > office < /label >

< p class=”cui” > P.O Box 120208.N < /p >

< p class=”cui” > Colfax, IN 46035 < /p >

< /div >

< /fieldset >

< fieldset >

< div class=”row” >

< a class=”cuiServiceButton” target=”_self”

href=”http://maps.google.com/maps?q=2012+Main,+Lapel,+IN” > Map To Warehouse < /a >

< /div >

< /fieldset >

< /div >

The top div contains a thumbnail image and a place for company name and tagline The next fieldset

provides telephone and email links (see Figure 8 - 22 ) iPod touch users will not be able to link to Phone or

Mail applications, so an onclick handler is added to each link to enable the link only if it is running on

Figure 8-22: iPhone service integration

an iPhone (That ’ s also why the text label for the email link displays the actual address instead of “ Email

Us ” ) The middle fieldset provides static address information, while the bottom fieldset contains a Google Maps link to the Operation Classroom warehouse (see Figure 8 - 23 ) If running on an iPhone, the Maps application will open If running on an iPod touch, the Google Maps Web site is displayed

Figure 8-23: The link to Google Maps works in both iPhone and iPod touch

The following code shows the full source code for the sample OC for iPhone/iPod touch site Note that many sections are not shown for this example that would need to be implemented for a live site

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” >

< html xmlns=”http://www.w3.org/1999/xhtml” >

< head >

< title > Operation Classroom < /title >

< meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0;

user-scalable=0;”/ >

(continued)

< style type=”text/css” media=”screen” > @import “ /iui/iui.css”; < /style >

< style type=”text/css” media=”screen” > @import “ /iui/cui.css”; < /style >

< script type=”application/x-javascript” src=” /iui/iui.js” > < /script >

< /head >

< body >

< ! Top iUI toolbar >

< div class=”toolbar” >

< h1 id=”pageTitle” > < /h1 >

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

< ! News menu >

< ul id=”news” title=”Latest News” >

< li class=”group” > Sept 20, 2007 < /li >

< li > < a href=”#news1” > 20 Year Celebration Coming Soon < /a > < /li >

< li class=”group” > Aug 18, 2007 < /li >

< li > < a href=”#news2” > Dr Marke To Attend Graduate School < /a > < /li >

< li > < a href=”#news3” > Workteam Scheduled for Kissy Clinic < /a > < /li >

< li class=”group” > June 23, 2007 < /li >

< li > < a href=”#news4” > Special Speakers Coming to Indiana in October < /a > < /li >

< li class=”group” > May 24, 2007 < /li >

< li > < a href=”#Bill_Drake” > Combat Malnutrition in Sierra Leone < /a > < /li >

< /ul >

< div id=”news1” class=”panel” title=”OC News” >

< h2 > 20 Year Celebration Coming Soon < /h2 >

< >

Have you sent to the OC office to get your ticket for the 20th year celebration on

Sunday October 28? The event will be held at JB’s Cafeteria in Greeley, IN The

evening begins at 5:00pm with a gathering time and the dinner and program starts at

6:00pm The price of the meal is $25.00 Email the OC office for your ticket

Please include your check for the tickets A number of persons from Liberia and

Sierra Leone will be a part of the evening < /p >

< /div >

< ! More content would appear here >

< ! About Us panel >

< div id=”about” title=”About Us” class=”panel” >

< div class=”cuiHeader” >

< img class=”cui” src=”images/iclass.png”/ >

< h1 class=”cui” > Operation Classroom < /h1 >

< h2 class=”cui” > Partnering in Sierra Leone and Liberia < /h2 >

< /div >

(continued)

< fieldset >

< div class=”row” >

< label class=”cui” > office < /label >

< a class=”cuiServiceLink” target=”_self” href=”tel:(765) 555-1212” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 555-1212 < /a >

< /div >

< div class=”row” >

< label class=”cui” > mobile < /label >

< a class=”cuiServiceLink” target=”_self” href=”tel:(765) 545-1211”

onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > (765) 545-1211 < /a >

< /div >

< div class=”row” >

< label class=”cui” > email < /label >

< a class=”cuiServiceLink” target=”_self”

href=”mailto:info@operationclassroom.org” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” > info@oc.org < /a >

< /div >

< /fieldset >

< fieldset >

< div class=”rowCuiAddressBox” >

< label class=”cui” > office < /label >

< p class=”cui” > P.O Box 120208.N < /p >

< p class=”cui” > Colfax, IN 46035 < /p >

< /div >

< /fieldset >

< fieldset >

< div class=”row” >

< a class=”cuiServiceButton” target=”_self”

href=”http://maps.google.com/maps?q=2012+Main,+Lapel,+IN” > Map To Warehouse < /a >

< /div >

< /fieldset >

< /div >

< /body >

< /html >