282 Chapter 6 • Web Clipping ■ Design your application so that the minimum content needs to be downloaded over the air in response to a query. For example, if your users are searching a library of books, allow them to narrow their search by as many criteria (title, author, genre, publisher, keyword) as possible before retrieving results from a remote server. ■ When you are sending content back to the device from your server, you should link to pages within your WCA instead of sending content over the air whenever possible.Any content that does not change regularly should be stored on the device. ■ Keep graphics to a minimum, and store them locally on the device. Palm provides a specific <meta> tag (LocalIcon) for this purpose.Avoid sending images over the air wherever it is possible (dynamically gener- ated images are, of course, an exception). Remember,“A picture is worth a thousand words.” Technically, there is not a display limitation on the length of a Web clipping application page, but realistically, you should endeavor to display your content on one screen in order to limit the amount of scrolling that your users have to do. There is one limitation in terms of file size. Due to a system memory limita- tion, no individual WCA page can exceed 63KB. Bear in mind that this page would be very large, as this limitation refers to the compressed version of the page.The limitation on Web clipping application size is determined solely by the amount of memory you have on your handheld device. Regardless of any technical limitation to the size of your pages, you should keep your HTML markup to a minimum. Every character counts, including markup.You should avoid the use of tables where possible, and refrain from gratu- itous use of the <font> tag.You should also keep variable names limited to a minimum of characters. Furthermore, we suggest that the values of <select> lists be an index, as opposed to a text variable.The time that this saves your users will be greatly appreciated. Remember, they are the ones paying for the bandwidth! www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 282 Web Clipping • Chapter 6 283 Summary Web clipping allows users of Palm-powered handheld devices to view slimmed- down HTML on their handheld device.They do not use a typical browser, but rather the Web Clipping Application Viewer, also called the Clipper browser, that allows them to view specially compiled device-resident HTML applications on their PDA.These applications are almost like miniature Web sites on the device, but they are, for the most part, static until the user updates them.These applica- tions can be standalone or they can incorporate Web content via HTML links or forms. In addition, these applications have the ability to interact with other appli- cations on the handheld device by passing parameters in a URL. In this chapter, we have provided an overview of what Web clipping is and how it differs from desktop Web browsing.We have discussed the many devices and networks that may be used to connect a handheld device to the Internet and interact with Web servers.We have covered many of the HTML elements that are supported by the Web Clipping Application Viewer, and discussed the differences between these elements and their desktop counterparts.We also discussed some of the elements that are unique to the Web clipping environment and covered some of the issues that surround the usage of these elements in applications. We covered the installation and usage of the toolkit that is used to deploy Web clipping applications, including the WCA Builder and the Palm Operating System Emulator.We demonstrated in a few examples how you, the Webmaster, could apply your existing skills to offer content and services to Web clipping users. It’s not quite the same as building a Web site, and not quite as different as building WAP content, but it is an interesting step toward true mobile Internet connectivity. As demand for wireless PDAs grows, in the corporate environment in particular, we can expect to see more and more handheld devices with the ability to access the Internet in a manner similar to Web clipping. Solutions Fast Track What Is Web Clipping? Web clipping refers to a proprietary network that allows Palm- compatible handheld devices to connect to the Internet by browsing compressed HTML contained in special files installed on the device.The Web Clipping Application Viewer is also called the Clipper browser. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 283 284 Chapter 6 • Web Clipping Web clipping differs from Web browsing both in usage patterns and the actual technology used to access the Internet.WCA users are mobile, and deal with limited input mechanisms. A Web clipping application is installed on a device, and cannot be updated until the user installs a new version.This means that extra thought should be put into what interactions are included in a WCA. A subset of HTML 3.2 is used to build Web clipping applications. Not all elements of the specification are supported, but many elements are. What Types of Hardware Support Web Clipping Devices running the Palm Operating System version 3.5 or higher can take advantage of Web clipping. Many devices can access the Internet via Web clipping, including the Palm VII/VIIx connected via Mobitex and other Palm-compatible handhelds connected via the CDPD Network or Mobile Internet Kit. The RIM 957 (Blackberry) Pager can browse the content of a WCA if it is accessed via a direct link over the Internet.These devices are unable to follow links to, or display images that the WCA expects to be found locally on the device, such as links using the file: protocol. Working with the Palm OS Emulator The Palm Operating System Emulator (POSE) is freely available from the Palm Web site at www.palm.com/dev/tech/tools/. In order to use the POSE, first you need to install the emulator to emulate the hardware, and then install a ROM image of the OS to start the emulator or run any software. There are two ways to obtain ROM images: transfer one from a device that you own, or download one from the Palm Resource Pavilion.You must register as a Palm developer to obtain ROM images from Palm. It is necessary to configure the emulator to access the Internet via the network interface of the computer upon which it is installed.The emulator must be set to redirect network requests to TCP/IP, and the emulator software must be configured to use a Palm.net Proxy Server. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 284 Web Clipping • Chapter 6 285 Creating a Web Clipping Project with the Web Clipping Application Builder The Web Clipping Application (WCA) Builder, like the POSE, can be downloaded from the Palm Web site at www.palm.com/dev/tech/tools/. The WCA Builder is used to compile device-resident Web clipping applications from HTML and images. The WCA Builder automatically will scan HTML from a single index page and automatically include any linked pages or referenced images. It will do some basic error checking, but it is not foolproof, and code should be validated externally. Custom icons may be used for your Web clipping applications.These can be selected in the Build PQA dialog box, which is the final step in the application building process. Web Clipping Basics and Examples Many of the more common tags from the HTML 3.2 specification are available, but many other recent developments are not.Any elements that require client-side processing, such as animated images, imagemaps, and client-side scripting have been eliminated due to device constraints. Some useful features are unique to Web clipping, including variables that relay information about the location of the user and a unique device identifier.Two other elements are available: datepicker and timepicker. These elements help to offset the device constraints of Web clipping. Data transmitted over the air should be minimized as much as possible, and local resources on the device should be leveraged to minimize network traffic.This can be accomplished by linking to local images on the device, and by including content that is not time-sensitive on the device. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 285 286 Chapter 6 • Web Clipping Q: How can I close my WCA and return the user to the Application menu? A:You can do this by launching the launcher application via a link. Use <a href="palm:launch.appl">Quit</a>. Q: I have added bgcolor attributes to my table cells, and they are not working! What is wrong? A: Clipper supports the bgcolor attribute for <table>, but not for <tr>,<td>, or <th>. Q: Is there any way to get rid of that pesky over-the-air icon? A:Theoretically you could create an image and use that as your form submit button, but the over-the-air icon is useful for the users, as they typically will be paying for any content that they download. It is recommended that you do not implement workarounds for this. Q: Do I need to test my application on a device, or will the POSE suffice? A:The POSE will reliably render your HTML, but you should test the usability of your application with an actual device. Using a mouse and keyboard from your desktop to input data is a radically different experience than using a stylus and graffiti for input. Q: Can I create a custom icon for my WCA? A:Yes, this can be done in the WCA Builder.You can select your own custom image by clicking the Large and small buttons in the Build PQA dialog. You can author images in .gif, .jpg, or .bmp format using the editor of your choice, and check them using the Palm Image Checker (included in the WCA Builder download).The large icon must be 32x22 pixels, and the small icon must be 15x9 pixels. 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_06 10/22/01 4:37 PM Page 286 Web Clipping • Chapter 6 287 Q: Can I use <font> tags in my WCA? A:Yes, you can make use of the <font> tag, but it will control only the size of your text.Valid values are between 1 and 6, with 3 being the default. It is not possible to use named typefaces within Clipper. Q: Do I have to rewrite my existing site to be able to view it with Clipper? A: HTML from standard Web sites can be parsed by the Palm.net Proxy Server and formatted for display within Clipper. If your site is very graphics and JavaScript intensive, it will most likely not translate well. On the other hand, if your site uses logical markup (headers, lists, paragraphs), then it will display better within Clipper.You can use the <smallscreenignore> tag to mark con- tent that should be ignored by the Palm.net proxy server. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 287 159_wg_wi_06 10/22/01 4:37 PM Page 288 Deck of Cards: Designing Small Viewpoint Content Solutions in this chapter: ■ Thinking In the Hand, not On the Web ■ Stacking a Deck of Cards ■ Examining Display Differences between Browsers ; Summary ; Solutions Fast Track ; Frequently Asked Questions Chapter 7 289 159_wg_wi_07 10/23/01 10:36 AM Page 289 290 Chapter 7 • Deck of Cards: Designing Small Viewpoint Content Introduction The wireless Web, although very new, harkens back to the old days of text-only Web browsers. Minimal support for graphics and animations, miserably low band- width, tiny screen resolutions, and devices lacking processing power are a few of the commonalities between the wireless Internet and the pre-1994 World Wide Web (WWW). Due to these differences, developing for the wireless Internet will require dif- ferent tactics than those to which many Webmasters have become accustomed. Using JavaScript for form validation? Forget it.Applets? Not yet. Graphics? Barely.Tables? As long as you are careful. Images? Yes, but don’t expect everyone to see them. The wireless Internet, and Wireless Markup Language (WML) in particular, has been criticized of late as being ill-designed and hard to use.This is certainly the case in some instances, but it does not have to be. It’s up to you, the Webmaster, to design the interface for your content or application in a way that allows the user to form a coherent mental picture of your site and what they can do with it. We’re facing a world much like the early days of the WWW, where designers and Webmasters were attempting to apply print metaphors to the Internet, and failing to reach users in compelling ways. Now, we are facing a situation where Webmasters and applications designers are often expected to re-create the WWW on a handheld device, rather than taking advantages of the Internet in a means most suited to the mobile user of the wireless device.We all need to look at our users in a new way, and to think differently about meeting their needs. In this chapter, we will first discuss some common mistakes made by Webmasters in terms of information architecture and user interface, and the importance of thinking like a mobile user.We will then cover how to develop your information architecture and interface based on what it means to the wire- less user, taking advantage of server-side techniques as well as the deck of cards metaphor of the wireless Web.We will also cover display differences between browsers as they apply to usability and cover how to ensure a consistently usable presentation across a variety of devices.We will focus mainly on WML, but remember that many of these principles are applicable to Handheld Device Markup Language (HDML) and, in some cases, Hypertext Markup Language (HTML) displayed on a handheld device. www.syngress.com 159_wg_wi_07 10/23/01 10:36 AM Page 290 www.syngress.com Thinking In the Hand, not On the Web Typically, today’s Web sites tend to have a somewhat pyramidal structure, one in which the user can browse to various layers of depth within the pyramid.These sites often have a means of moving vertically or horizontally within them. By ver- tical navigation, we are referring to a user being able to move deeper into a spe- cific section of a site. By horizontal navigation, we are referring to a user being able to move across pages or subsections within the same section. Figure 7.1 pro- vides a simple example of the pyramid metaphor. In this structure, the user can browse horizontally through a section, all the while retaining the ability to move up a layer or return to the home page of the site. A breadcrumb is a common element of many Web designs, and an aid to the pyramid metaphor. In case you have not heard the term before, it refers to a list of links that correspond to the main pages of each level of the site hierarchy, which will often mirror the directory structure of the site. Breadcrumbs are typically found on every page, and allow the user to move between the various layers of the site.A typical example of this is the line at the top of the page on the Open Directory Project site at www.dmoz.org. Many dif- ferent sites use this element in a variety of ways, but the general theme is fairly consistent: it provides the user with a means of understanding where they are within a site. Figure 7.2 illustrates this element of a site. Deck of Cards: Designing Small Viewpoint Content • Chapter 7 291 Figure 7.1 The Pyramidal Navigational Structure = Hyperlinks Home Page Index Page Index Page Index Page ContentContentContentContentContentContent 159_wg_wi_07 10/23/01 10:36 AM Page 291 . over the Internet. These devices are unable to follow links to, or display images that the WCA expects to be found locally on the device, such as links using the file: protocol. Working with the. Emulator The Palm Operating System Emulator (POSE) is freely available from the Palm Web site at www.palm.com/dev/tech/tools/. In order to use the POSE, first you need to install the emulator to emulate. on their PDA.These applications are almost like miniature Web sites on the device, but they are, for the most part, static until the user updates them.These applica- tions can be standalone or they