Webmaster''''s Guide to the Wireless Internet part 37 docx

332 Chapter 7 • Deck of Cards: Designing Small Viewpoint Content Summary In this chapter, we have discussed the pyramidal navigational structure that is fairly prevalent on the WWW.We have discussed the many mistakes that are commonly made by Webmasters making the transition to wireless, and how these mistakes are largely the result of an attempt to represent the WWW on a small- viewpoint device. In order for Webmasters to provide effective, compelling applications, it is necessary for us to work within the constraints of the wireless landscape.This involves accommodations of a technical nature, such as the minimized use of images and extraneous markup; as well as accommodations of a human nature, such as taking mobility into consideration and minimizing the data a user must input to interact with an application. There are some unique features to WML that allow us to send multiple screens to the user at once, and it is possible to use this feature to our user’s advantage by limiting the number of server connections that must be initiated by the handheld device. It’s possible to build a swift-feeling application by making use of the hub-and-spoke metaphor and parceling our site into one deck for nav- igation and several decks of content. In addition, a linear, task-based navigation scheme will result in a more efficient relay of information to the user. In this chapter, we also examined the display differences among the different browsers, and found that there are significant differences in how the most common WML browsers display content and UI elements. Designing an applica- tion and branching your code with these differences in mind will help to ensure the best user experience possible. It is of critical importance to test your applications on a wide variety of devices, and although we’re dealing with a great many devices and input mecha- nisms, it is possible to apply some thought to the usability of our applications so as to create a more effective user experience. Last, but certainly not least, it is of utmost importance to test your application with real users in the field.As of yet, there is no emulator that can effectively recreate the experience of entering text into a mobile phone browser on a crowded train at rush hour! With a little forethought and a lot of patience, it is possible to build usable WML applications and debunk the myth that WML is, by nature, a hindrance to usability. www.syngress.com 159_wg_wi_07 10/23/01 10:36 AM Page 332 Deck of Cards: Designing Small Viewpoint Content • Chapter 7 333 Solutions Fast Track Thinking In the Hand, not On the Web ; The wireless Internet provides us with a smaller viewpoint for content, and it is not possible to represent the typical pyramidal site structure of the WWW on handheld devices. ; It is difficult to provide both horizontal and vertical navigation on a mobile device due to a lack of screen real estate. ; The needs of the mobile user necessitate a fairly linear, task-based navigational scheme, with a frequency of access-based segregation of tasks. ; Working within the bandwidth and input constraints of the wireless medium can prevent the mistakes that are typically made by many Webmasters. Stacking a Deck of Cards ; It is possible to make many small refinements to your markup that will have a cumulative effect on the final size of your content. ; A hub-and-spoke metaphor can be used effectively within the framework of WML. Users have full freedom of vertical navigation, though this metaphor does not use horizontal navigation. ; Minimizing the number of server connections can greatly increase a site’s usability, and one of the easiest ways to do this for small sites is to send one deck consisting of navigation, and, on request, send decks that contain the sections’ content. ; WML variables are stored on the device (similar to cookies), and are persistent between decks as well as cards.You should be aware of the state of the user’s variables in your application, and clear them as appropriate. www.syngress.com 159_wg_wi_07 10/23/01 10:36 AM Page 333 334 Chapter 7 • Deck of Cards: Designing Small Viewpoint Content Examining Display Differences Between Browsers ; One of the most notable differences between the UP.Browser and the Nokia browser is in the rendering of the <SELECT> and <INPUT> elements. On average, the Nokia browser user will need to enter twice as many keystrokes. ; The 4thpass Kbrowser (for the Palm OS) renders WML differently than either the Nokia or the UP.Browser. If you are supporting this browser in your site, you should take care to branch your code and test your application thoroughly. Q: How many devices should I test my application on? A:You should test your application on as many devices as is possible, because each device manufacturer may interpret your code slightly differently depending on the browser and carrier. Emulators are widely available, but they do not necessarily provide the same real-world experience. Furthermore, once your code is run through a gateway, it may function differently on dif- ferent devices. Q: How can I disable the user’s Back button? A:You can use the following code to prevent your users from re-entering your application: <do type="prev"> <noop/> </do> www.syngress.com Frequently Asked Questions The following Frequently Asked Questions, answered by the authors of this book, are designed to both measure your understanding of the concepts presented in this chapter and to assist you with real-life implementation of these concepts. To have your questions about this chapter answered by the author, browse to www.syngress.com/solutions and click on the “Ask the Author” form. 159_wg_wi_07 10/23/01 10:36 AM Page 334 Deck of Cards: Designing Small Viewpoint Content • Chapter 7 335 Q: Where can I learn more about usability? A: Jakob Nielsen is one of the foremost usability experts. He publishes regular usability reports (mostly pertaining to the Web), and has a comprehensive archive of his articles on his Web site at www.useit.com. Q: Should I use <SELECT> lists for navigation? A: It is generally recommended that <SELECT> lists be used for navigation on the UP.Browser, but that a list of links be presented to the Nokia browser. If you do use select list for the Nokia browser, be sure to use the onpick attribute to save your users a click. www.syngress.com 159_wg_wi_07 10/23/01 10:36 AM Page 335 159_wg_wi_07 10/23/01 10:36 AM Page 336 Wireless Enabling Your Big Bandwidth Site Solutions in this chapter: ■ Defining WAP MIME Types ■ Detecting WAP Devices ■ Optimizing Content Distribution ■ Delivering Wireless Data ■ Implementing Wireless Graphics  Summary  Solutions Fast Track  Frequently Asked Questions Chapter 8 337 159_wg_wi_08 10/22/01 5:21 PM Page 337 338 Chapter 8 • Wireless Enabling Your Big Bandwidth Site Introduction So, your supervisor has told you that your company must take advantage of the wireless Internet and that as the Webmaster, you are to convert the company’s existing Web site to a wireless version. Seems easy enough, right? You should be able to run a program over the document area of your site and in a day or so your site will be available to any user with a wireless device! Although the idea is appealing, it certainly is not a reality. Delivering content over the airwaves to mobile devices carries with it several limitations, most notably in terms of device display, bandwidth, and the sheer number of different devices capable of browsing Internet content over a wireless connection. It is of utmost importance that Webmasters be aware of the limitations of wireless devices and devise a new strategy for delivering content to said devices. In this chapter, we will cover the nuts-and-bolts issues of adding wireless capabilities to your existing site.We will cover server configuration for the two most common Web servers on the market and discuss methods for detecting which users can access wireless content.We will discuss the issues and solutions surrounding the automated conversion of existing Web sites.We will also cover how to make your wireless data applications accessible and how to implement graphics that will be viewable on wireless devices. This chapter assumes that you already have some experience with server con- figuration and CGI programming, and that you have a basic knowledge of WML. If you do not have any experience working on the server-side, then this chapter will cover the basics, and you should not have a problem setting up the wireless section of your site. Defining WAP MIME Types Setting up your Web server software to dispatch wireless content is the first step to making your Web site available to the wireless Internet.The steps needed to accomplish this will differ according the server software and platform, but the basic process is the same. As you probably already know,Web browsers recognize and handle content according to information sent in the response header by the server. In any given response, the Web server will send out a file accompanied by a Multipurpose Internet Mail Extension (MIME) type.A MIME type, in relation to an HTTP transaction, is a definition of the type of content contained in a given file being sent to a Web browser. www.syngress.com 159_wg_wi_08 10/22/01 5:21 PM Page 338 www.syngress.com MIME types are typically associated with file extensions that are mapped in the server configuration and sent out with all files containing that extension. In a server-side programming environment (using PHP or ASP, for example), it is pos- sible to specify the MIME type manually within the response. Selecting which MIME Types to Add First off, depending on the market in which you want to provide your wireless content, and the extent to which you use WMLScript, you will need to add some or all of the MIME types and file extensions to your server configuration that are listed in Table 8.1. Table 8.1 MIME types and file extensions for your server configuration MIME Type File Extension Text/vnd.wap.wml .wml application/vnd.wap.wmlc .wmlc Text/vnd.wap.wmls .wmls application/vnd.wap.wmlscriptc .wmlsc image/vnd.wap.wbmp .wbmp Text/x-hdml .hdml NOTE If you are already familiar with the basics of WML and with adding MIME types to your server, you may want to add the types from Table 8.1 and skip down to the section titled “Detecting WAP Devices.” If your audience is located in the U.S , it is important to define the last MIME type listed above and to build support for HDML into your site.The reason for this is that there are many phones in use in the United States that do not support WML, and many of the phones that do support WML do so only via gateway translation.You may be able to get around this by restricting your use of WML to the features that are supported in HDML 3.0, however. More details on this can be found at the developer section of the OpenWave Web site (http://developer.openwave.com). Wireless Enabling Your Big Bandwidth Site • Chapter 8 339 159_wg_wi_08 10/22/01 5:21 PM Page 339 340 Chapter 8 • Wireless Enabling Your Big Bandwidth Site Adding MIME Types to Your Server Configuration In this section, we will discuss how to add the requisite wireless MIME types to your site in order to dispatch wireless content. Before we get into the details of adding MIME types to your server configuration, it makes sense to have at least one piece of content to dispatch for testing purposes.The following code, saved as hello.wml, will create your first WML page; Figure 8.1 shows the resulting screen on the UP.Browser. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="hi" title="Hello!"> <p> <b>Hello, world!</b> </p> </card> </wml> www.syngress.com Figure 8.1 Our hello.wml File as viewed with the UP.Browser SDK 159_wg_wi_08 10/22/01 5:21 PM Page 340 Wireless Enabling Your Big Bandwidth Site • Chapter 8 341 The first two elements of this file are very important.They carry the message that the file is an Extensible Markup Language (XML) document, and that it must be validated against the Document Type Definition (DTD) specified. In this case, our markup needs to comply with the DTD published by the WAP Forum. These lines are a form of guarantee that the document will contain valid markup without any stray, missing, or uncompleted tags.You should place this file in a publicly accessible place in the document area of your site. If you try to access this file from a WML browser without setting the MIME types in your server configuration, you will receive an error. On most Web servers, text/html is set as the default MIME type, so if you have yet to associate the .wml extension with the text/vnd.wap.wml MIME type your server will not recognize the content of the file as WML or send out the correct MIME type. Correspondingly, the client will not be able to render the content. Depending on the server software you are running, you will need to perform a different set of steps to add the MIME types.We will cover adding the MIME types to the two most common Web servers on the market: the Apache Web Server (www.apache.org) and Microsoft’s Internet Information Server (www.microsoft.com/iis). Configuring the Apache Web Server There are many options available to add MIME types to the Apache environ- ment.Where you choose to add the configuration depends largely on the imple- mentation of the server itself. If you want to implement the MIME types in a global manner, simply add a few new lines to the mime.types file. If you are run- ning many individual Web sites (VirtualHosts), you may want to add the MIME types on a site-by-site basis. If you do not have root access to the machine run- ning the Web server, it may make the most sense to use an .htaccess file to add new directives to the server configuration.We will examine these three method- ologies in detail. WARNING Before making any changes to a server configuration file, it is generally good practice to make a backup of the file you are editing. That way, in the event that you make a mistake while editing, you can be assured to have a working version of your configuration file. www.syngress.com 159_wg_wi_08 10/22/01 5:21 PM Page 341 . server software to dispatch wireless content is the first step to making your Web site available to the wireless Internet .The steps needed to accomplish this will differ according the server software. your supervisor has told you that your company must take advantage of the wireless Internet and that as the Webmaster, you are to convert the company’s existing Web site to a wireless version have root access to the machine run- ning the Web server, it may make the most sense to use an .htaccess file to add new directives to the server configuration.We will examine these three method- ologies