Figure 11-3: Community sports Web site ready for iPhonification and coaches of the sports league will have fingertip access to the league schedule, game results, league news, and the rul
Trang 1The screenshots displayed in this section were captured on Safari for Mac OS X, not on iPhone or iPod
touch The results are not fully identical to the optimized UI when viewed under Mobile Safari
Figure 11-3: Community sports Web site ready for iPhonification
and coaches of the sports league will have fingertip access to the league schedule, game results, league
news, and the rule book — either at the games or else en route to them
form a community sports Web site, as shown in Figure 11 - 3 The use for this mobile app is that parents
into a useful mobile Web application For this example, you ’ ll venture out of the corporate world to
trans-A
second case study demonstrates how you can turn a plain vanilla Web site with minimal functionality
Trang 2Given the traditional site structure of the site, an edge - to - edge navigation scheme is an ideal design model for the entry - level page The iUI framework will be used in the implementation However, as you ’ ll see later on, Mobile WYFFL will employ some design ideas not included with iUI to give parts of the application a fresh look, but one that remains consistent with Apple ’ s built - in applications
Each of the links on the top - level menu will be translated to a menu item on the Mobile WYFFL applica-tion However, note the scoreboard at the top of the homepage It serves a double purpose Before games,
it provides a game schedule for the current week Then, after the games are completed each Saturday, the scoreboard is then used to display the scoring results To display this information in Mobile WYFFL, you ’ ll add a menu item called Gameday
Not all of the content on the main Web site makes sense to include in the mobile version of the applica-tion For example, the Documents page containing downloadable forms is not useful in iPhone or iPod touch Therefore, in these cases, you will simply refer them to the main Web site by adding a final link to
it in the initial list Here is the initial code for the primary HTML page of the application:
!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 > WYFFL Mobile < /title >
< meta name=”viewport” content=”width=300; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;”/ >
< style type=”text/css” media=”screen” > @import “ /iui/iui.css”; < /style >
< style type=”text/css” media=”screen” > @import “ /iui/iuiadd.css”; < /style >
< script type=”application/x-javascript” src=” /iui/iui.js” > < /script >
< /head >
< body >
< div class=”toolbar” >
< h1 id=”pageTitle” > < /h1 >
< a id=”backButton” class=”button” href=”#” > < /a >
< /div >
< ul id=”home” title=”WYFFL Mobile” selected=”true” >
< li > < a href=”news.html” > Latest News < /a > < /li >
< li > < a href=”gameday.html” > Game Day < /a > < /li >
< li > < a href=”standings.html” > Standings < /a > < /li >
< li > < a href=”#schedule” > Schedule < /a > < /li >
< li > < a href=”#rules” > Rules < /a > < /li >
< li > < a href=”about.html” > About WYFFL < /a > < /li >
< li > < a href=”http://www.wachusettflagfootball.com” target=”_self” > Visit Web Site < /a > < /li >
< /ul >
< /body >
< /html >
Note the link to the iuiadd.css style sheet, which will be used to extend the default iUI style rules
Figure 11 - 4 displays the opening page of the application
Trang 3Figure 11-4: Mobile WYFFL (as shown in Safari for Mac)
There are three types of links represented in the navigation list: AJAX links ( Latest News , Game Day ,
Standings , and About ); Page links ( Schedule and Rules ); and External links ( Visit Web Site )
The Standings and Schedule pages on the regular Web site are lengthy Therefore, for the mobile version,
these pages are broken into small readable sections These sections are displayed as second tier menus:
< ul id=”schedule” title=”Schedules” >
< li > < a href=”seniors.html” > Seniors < /a > < /li >
< li > < a href=”juniors.html” > Juniors < /a > < /li >
< li > < a href=”freshman.html” > Freshman < /a > < /li >
< li > < a href=”instructional.html” > Instructional < /a > < /li >
< /ul >
< ul id=”rules” title=”Rules” >
< li > < a href=”field.html” > Fields and Players < /a > < /li >
< li > < a href=”game.html” > Game < /a > < /li >
< li > < a href=”time.html” > Time < /a > < /li >
< li > < a href=”penalties.html” > Penalties < /a > < /li >
< li > < a href=”enforce.html” > Enforcement of Penalties < /a > < /li >
< /ul >
Figures 11 - 5 and 11 - 6 show these two submenus
Trang 4Figure 11-5: Schedule submenu (as shown in
Safari for Mac)
Figure 11-6: Rules submenu (as shown in Safari for Mac)
Text - Based Destination Pages
The Latest News page is a destination page that is designed for readability of short, bite - sized articles
Here ’ s the document fragment used for this purpose:
< div id=”news” class=”panel” title=”News” >
< fieldset >
< h3 > Top Ranked Teams Set to Battle on Oct 13 < /h3 >
< > The #1 and #2 teams of both the Junior and Senior divisions will square off on Saturday, October 13 These games will have major implications on the season rankings heading into the playoffs In the Junior division, the high flying #1 Dolphins (4-0 ) meet the upstart #2 Cowboys (4-0) at 8am In the Senior division, the defensive powerhouse #1 Steelers (4-0) will battle the #2 Bears (3-0-1) at 12pm < /p >
< h3 > No Games on Columbus Day Weekend < /h3 >
< > Just a reminder that there will be no games this week due to the holiday weekend Have a great weekend < /p >
< h3 > Open Practices for Junior and Senior Divisions < /h3 >
< > Open Practices are on Wednesday evenings from 5:30-7:00pm for both Junior and Senior Divisions, but not Freshman Division The Open Practices will be held at the Jefferson School Fields in Holden < /p >
< h3 > Wachusettflagfootball.com - Your Best Source for Weather Info < /h3 >
(continued)
Trang 5< > Be sure to come to this web site throughout the year in case it looks rainy
outside on a Saturday morning Throughout the season, the league will post any rain
postponement or cancellation announcements here by 7:00am on gameday < /p >
< h3 > Dick’s Sporting Goods as Community Partner < /h3 >
< > Wachusett Youth Flag Football would like to thank and recognize Dick’s Sporting
Goods as a sponsor and community partner < /p >
< /fieldset >
< /div >
As is standard for iUI apps, a div with class=”panel” is used to contain this type of destination page
A fieldset is used as a container for the rest of the content to take advantage of the iUI styles Custom
styles are set inside of iuiadd.css for the h3 , p , and a styles:
.panel p, panel a {
text-align: left;
padding: 0 10px 0 10px;
}
.panel h3 {
margin: 3px 0 10px 10px;
text-align: left;
font-size: 1.2em;
}
Figure 11 - 7 shows the page displayed in Safari
Figure 11-7: Latest News (as shown in Safari for Mac)
(continued)
Trang 6The text - based Rules page and About page employ the same div element structure and the same style rules
Table - Based Destination Pages
Because of the tabular nature of the information they present, the Standings and Schedule pages are implemented as table - based destination pages Here is a portion of the document fragment for the Standings page:
< div id=”standings” class=”panel” title=”Standings” >
< table border=”1” cellpadding=”0” cellspacing=”0” >
tr class=”first” >
< th > Seniors < /td >
< th > < /td >
< th > < /td >
< th > < /td >
< th > PS < /td >
< th > PA < /td >
/tr >
< tr class=”row-a” >
< td > Steelers < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 74 < /td >
< td > < /td >
/tr >
< tr class=”row-b” >
< td > Bears < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 92 < /td >
< td > 36 < /td >
/tr >
< tr class=”row-a” >
< td > Eagles < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 104 < /td >
< td > 54 < /td >
/tr >
tr class=”row-b” >
< td > Pats < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 81 < /td >
< td > 61 < /td >
/tr >
(continued)
Trang 7< tr class=”row-a” >
< td > Colts < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 51 < /td >
< td > 36 < /td >
/tr >
< tr class=”row-a” >
< td > Jets < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 74 < /td >
< td > 100 < /td >
/tr >
< tr class=”row-b” >
< td > Browns < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 53 < /td >
< td > 93 < /td >
/tr >
< tr class=”row-a” >
< td > Saints < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 62 < /td >
< td > 81 < /td >
/tr >
< tr class=”row-b” >
< td > Ravens < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 43 < /td >
< td > 97 < /td >
/tr >
< tr class=”row-a” >
< td > Bills < /td >
< td > < /td >
< td > < /td >
< td > < /td >
< td > 38 < /td >
< td > 108 < /td >
/tr >
< /table >
< /div >
(continued)
Trang 8Style rules need to be added to iuiadd.css in order to effectively display this information inside of a Mobile Safari viewport:
table { width: 100%;
font-size: 14px;
border-collapse: collapse;
color: #305A6D;
text-align: left;
}
th { height: 29px;
padding-left: 11px;
padding-right: 11px;
color: #FFFFFF;
text-align: left;
margin: 0 0 8px 14px;
font-size: inherit;
font-weight: bold;
color: #4d4d70;
text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
padding-left: 2px;
}
td { height: 2em;
padding: 1px;
padding-left: 2px;
} tr.row-a { background: #F8F8F8;
} tr.row-b { background: #EFEFEF;
}
The table is set to 100 percent of the div container The remaining rules set basic formatting properties for the th , td , and tr elements You will notice that the font size is smaller (14px) than is normal for Mobile Safari applications The reason is twofold First, no links are added to these tables, so users will never need to tap onto the smaller text Second, the 14px size is large enough for easy reading, but small enough to display several columns of tabular information Figure 11 - 8 shows the Standings page under Safari
The four Schedule pages use the identical styles, except that the HTML table declaration specifies a
border=”0” attribute to display a slightly different look (see Figure 11 - 9 )
Trang 9Figure 11-8: Standings page (as shown in Safari
for Mac)
Figure 11-9: Schedule page without a border (as shown in Safari for Mac)
Game Day Navigation List Page
While the Game Day content could be displayed in a table structure much like the Schedule pages, a
much more attractive solution would be to consider an alternative UI design for this destination page
The three pieces of information that need to be displayed for a given game are the game time,
teams, and their scores In considering alternatives, I looked around at the native Apple
applications and was intrigued with the idea of using the World Clock app as an inspiration
with its large clocks displayed in a list Figure 11 - 10 shows the end result of what you are
going to build under Safari for Mac
Trang 10The HTML document fragment used to display this page is as follows:
ul id=”gameday” title=”Game Day” >
< li class=”group” > Seniors < /li >
< li class=”grayrow” >
< a class=”clock clock8” > < /a >
< p class=”team team-visitor” > Eagles < /p >
< p class=”team team-home” > Saints < /p >
< p class=”score score-visitor” > 10 < /p >
< p class=”score score-home” > 36 < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock9” > < /a >
< p class=”team team-visitor” > Pats < /p >
< p class=”team team-home” > Jets < /p >
< p class=”score score-visitor” > 43 < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock10” > < /a >
< p class=”team team-visitor” > Ravens < /p >
Figure 11-10: Game Day page (as shown in Safari for Mac)
(continued)
Trang 11< p class=”team team-home” > Bills < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock11” > < /a >
< p class=”team team-visitor” > Browns < /p >
< p class=”team team-home” > Colts < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock12” > < /a >
< p class=”team team-visitor” > Steelers < /p >
< p class=”team team-home” > Browns < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
li class=”group” > Juniors < /li >
li class=”grayrow” >
< a class=”clock clock8” > < /a >
< p class=”team team-visitor” > Dolphins < /p >
< p class=”team team-home” > Cowboys < /p >
< p class=”score score-visitor” > 20 < /p >
< p class=”score score-home” > 32 < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock9” > < /a >
< p class=”team team-visitor” > Rams < /p >
< p class=”team team-home” > Panthers < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock10” > < /a >
< p class=”team team-visitor” > Redskins < /p >
< p class=”team team-home” > Vikings < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock11” > < /a >
< p class=”team team-visitor” > Giants < /p >
< p class=”team team-home” > Packers < /p >
< p class=”score score-visitor” > < /p >
< p class=”score score-home” > < /p >
< /li >
< li class=”grayrow” >
< a class=”clock clock12” > < /a >
< p class=”team team-visitor” > Titans < /p >
(continued)