Professionali Phone and iPod touch Programming phần 8 ppt

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 Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 202 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 c08.indd 202c08.indd 202 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 203 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 > < p > 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 c08.indd 203c08.indd 203 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 204 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 c08.indd 204c08.indd 204 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 205 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) c08.indd 205c08.indd 205 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 206 < 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 > < p > 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) c08.indd 206c08.indd 206 12/7/07 2:54:45 PM12/7/07 2:54:45 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 207 < 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 > c08.indd 207c08.indd 207 12/7/07 2:54:45 PM12/7/07 2:54:45 PM c08.indd 208c08.indd 208 12/7/07 2:54:45 PM12/7/07 2:54:45 PM Bandwidth and Performance Optimizations 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. Your Optimization Strategy If you spend much time at all researching optimization strategy and techniques, you quickly discover that there are two main schools of thought. The first camp is referred to as hyper - optimizers in this book. A hyper - optimizer will do almost anything to save a byte or an unneeded call to the Web server. They are far more concerned with saving milliseconds than they are about the read- ability of the code that they are optimizing. The second camp, perhaps best described as relaxed optimizers , are interested in optimizing their applications. But, they are not interested in sacrificing code readability and manageability in an effort to save a nanosecond here or there. c09.indd 209c09.indd 209 12/7/07 2:55:43 PM12/7/07 2:55:43 PM [...]... 3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initialscale%3D1.0%3B%20user-scalable%3D0%3B%20maximumscale%3D0.6667%3B%20width%3D 480 %22/%3E%3Cscript%3Efunction%20do_onload% 28% 29%7BsetT imeout%28function% 28% 29%7Bwindow.scrollTo% 280 ,1%29%3B%7D,100%29%3B%7Dif%28navigator userAgent.indexOf% 28% 22iPhone%22%29!%3D1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/ht ml%3E%27%29%3B%0AnewDoc.close% 28% 29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newD oc.createElement% 28% 22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28d ocument.documentElement.innerHTML%29%29%3B... storage Creating an Offline iPhone /iPod touch Application After examining these constraints, it is clear that the best candidates for offline iPhone /iPod touch applications are those that are relatively small in both scope and overall code base A tip calculator, for example, is a good example applet because its UI would be simple and its programming logic would be straightforward and not require accessing... minifies, and caches JavaScript and CSS files to decrease the number of page requests that a page has to make To do so, it combines multiple style sheets and script libraries into a single download (code.google.com/p/minify) 213 c09.indd 213 12/7/07 2:55:45 PM Chapter 9: Bandwidth and Performance Optimizations JavaScript Performance Optimizations The performance of JavaScript on iPhone and iPod touch is... // More efficient // Assign val of d to 100 divs and perform y on them // based on val of a and b var a=0,c=100; for (var i=0;i . Figure 8 - 19 shows the top - level menu when displayed on the iPhone. Figure 8- 19: OC for iPhone /iPod touch c 08. indd 201c 08. indd 201 12/7/07 2:54:43 PM12/7/07 2:54:43 PM Chapter 8: Enabling and. 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. < /ul > Figure 8- 20: News entries by date c 08. indd 202c 08. indd 202 12/7/07 2:54:44 PM12/7/07 2:54:44 PM Chapter 8: Enabling and Optimizing Web Sites for iPhone and iPod touch 203 Each of