252 Chapter 6 • Web Clipping When you build your WCA, all of the elements shown in the WCA Builder window will be included in a single file that you can install on the device.The WCA Builder is a handy, easy-to-use tool that allows you to concentrate on writing your HTML instead of learning another markup language or converting images.The fact that it scans your HTML automatically and includes any ele- ments that you have linked to in your code makes the creation of a WCA simple and straightforward. In this section, we have covered how to use the WCA Builder to create our first Web clipping application, and how to include images and additional pages into our application.We discussed how to install and run a WCA, and provided instructions on how to uninstall application from your handheld or the POSE. In the next section, we will discuss, in detail, which elements of HTML are or are not supported within Web clipping, as well as items unique to Clipper. Web Clipping Basics A Web clipping application, as previously mentioned, is a collection of HTML pages and images that are compiled and installed on a Palm-Compatible handheld device.A Web Clipping Application Viewer renders the content of the WCA on the device. Although the basic building blocks of a WCA are HTML and images, Clipper does not actually render HTML, per se. Rather, Clipper renders Compact HTML, a subset of HTML 3.2 developed specifically for Web clipping. Don’t let that scare you, however, because there is no need to learn another markup lan- guage. It is only necessary to know basic HTML to build a WCA. First, we will discuss HTML features that are not supported by Clipper, and then cover the most common HTML tags and how they behave in a WCA.We will then cover some elements that are unique to Web clipping, and how to implement them in your application.We will then discuss how to interact with a Web server using a WCA, and cover some examples. Finally, we will suggest some general guidelines to make your WCA more user-friendly. Unsupported Tags and Elements There are some features of the HTML that are not supported in Web clipping to any degree.The following list consists of elements that you cannot include in your WCA: www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 252 Web Clipping • Chapter 6 253 ■ Animated GIFs ■ Cascading style sheets (CSS) ■ Cookies ■ ECMAScript (JavaScript, jscript) ■ Frames ■ Imagemaps ■ Java Applets ■ Layers ■ Named typefaces ■ Nested tables NOTE Palm OS version 4.0 does support cookies, although it is unrealistic at this point to assume that your users will have this OS installed. Simply put, device constraints are responsible for the lack of support for these elements.As time progresses, we can expect that some of these features will become available to handheld devices (although not necessarily under Web clip- ping). It is up to you as a Webmaster to make effective use of the limited features that are available. The fortunate thing about Web clipping is that there are several very useful extensions that help to alleviate the constraints of the environment. For example, there is an object called datepicker that allows your users to choose a date using a calendar interface and send a string to your server.To gain the same functionality with a desktop browser, you would have to create the calendar object yourself, using a combination of HTML and JavaScript.Also, for some users, you will be able to gain information about their location (ZIP code) and have access to a unique device identifier. Before we get into the details of these Web clipping-specific extensions to HTML, we will examine the subset of HTML that is utilized by Clipper. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 253 254 Chapter 6 • Web Clipping Supported Tags and Elements As mentioned previously, the markup used to author a WCA is a subset of HTML 3.2, meaning that not all of the elements of the 3.2 specification are available. Furthermore, some of the elements that are supported may not behave exactly as they do on a desktop Web browser. One of the most problematic of these elements is the lack of support for nested tables. If you are in the habit of using tables extensively for layout, you will need to rethink how you apply these features. Form elements are also rendered slightly differently (most notably radio buttons). In general, if you are comfortable with hand-coding your HTML the jump to Web clipping will give you a new environment in which to apply your skills. When designing and building your application, you will want to take the limita- tions into consideration and keep your code simple, lean, and optimized for a low bandwidth connection and a small screen size. For the most part, however, you will be able to build WCAs using tools and skills that you already possess. NOTE A Document Type Definition (DTD) can be downloaded at www.palm.com/dev/webclipping-html-dtd-11.dtd, and you can specify this DTD at the top of your page using the standard DTD syntax. Once you have done this, you can use the W3C validator at validator.w3.org to ensure that your server-side HTML is error-free without running it through the WCA Builder. The subset of HTML 3.2 that comprises the markup for Web clipping appli- cations is fairly large, and it is not necessary to run through a laundry list of the entire tag set.We will, however, cover the most common and useful supported tags in this section, as well as their attributes and possible values. In the event that you can code HTML with your eyes closed (as many of us can), you may already be familiar with the elements and attributes presented here. On the other hand, if you have been using a What-You-See-Is-What-You-Get (WYSIWYG) editor such as FrontPage or DreamWeaver, this section will read as a crash-course in HTML. Most likely, you have encountered the following tags in your experience as a Webmaster: www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 254 Web Clipping • Chapter 6 255 ■ <title> ■ <meta> ■ <body> ■ <table>, <tr>, <td> ■ <p> ■ <b>, <i>, <u> ■ <strong>, <em> ■ <ol>, <ul>, <li> ■ <h1> – <h6> ■ <img> ■ <a> ■ <form> ■ <select> ■ <input> Let’s now take a look at how these elements are similar and different from their desktop equivalents, and cover how they behave differently when viewed with the Web Clipping Application Viewer. Using the <title> Tag First things first—let’s take a look at the <title> tag. In a normal HTML docu- ment, the <title> tag is displayed in the top of the browser window, as shown in Figure 6.16. www.syngress.com Figure 6.16 <title> Tag in a Desktop Browser 159_wg_wi_06 10/22/01 4:37 PM Page 255 256 Chapter 6 • Web Clipping Likewise, in a WCA, the text within the <title> tag is displayed at the top of the Web Clipping Application Viewer, illustrated in Figure 6.17. One important item to note about this tag is that the length of the title bar in Clipper is slightly less than one-half of the screen width. If your <title> tag is too long, it will be truncated and appended with an ellipsis (…), as illustrated in Figure 6.18. Using the <meta> Tag The <meta> tag, used to send HTTP header information inline in a document, is less supported by Clipper than it is for standard desktop browsers. Primarily, you will use the <meta> tag to relay information to the Palm.net Proxy Server that your page is built specifically for Web clipping. Palm-specific <meta> tags are discussed later. www.syngress.com Figure 6.17 <title> Tag within Clipper Figure 6.18 Truncated <title> tag in Clipper 159_wg_wi_06 10/22/01 4:37 PM Page 256 Web Clipping • Chapter 6 257 Clipper is unable to process HTTP redirects by using a <meta> tag. In the event that you do need to do a redirect, you can do it in a server response by using the Location header. Bear in mind that if you do multiple redirects in the same response, an error will be generated and sent to Clipper.The best guideline is for you to use redirects only when necessary, and ensure that only one redirect is sent in a response. Using the <body> Tag The <body> tag attributes of HTML 3.2 are supported in Web clipping.You may specify the background color of the document, as well as text and link colors. However, for the most part, you will be dealing with monochrome or grayscale displays, which greatly reduces your color choices. In fact, there are only four colors supported on all devices that support Web clipping, shown in Table 6.1. Table 6.1 Colors Supported by All Web Clipping Devices Hex Value Display #000000 Black #C0C0C0 Silver #808080 Gray #FFFFFF White NOTE It is important to avoid selecting low-contrast colors for backgrounds and text. Should you employ the use of colors, be judicious in their use and make sure that your application retains usability on monochrome displays. Using the <table>, <tr>, and <td> Tags Tables, when they were first introduced in HTML 2.0, were intended to mark up data displayed in rows and columns.As time progressed (and as many Webmasters can recall), tables were commonly used as a page layout tool to dictate the posi- tioning and display of text and graphics.With the advent of HTML 4.0 and CSS, www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 257 258 Chapter 6 • Web Clipping tables are now being phased out as a design tool, and being used for data once again. WARNING The most important item to note is Clipper’s lack of support for nested tables. In the event that you include a nested table in your application, Clipper will render the nested table as plain text, which will rarely create the desired effect. You should take this into consideration when designing your WCA. The <table> tag supports the more common elements of tables used in stan- dard HTML, outlined in Table 6.2. Table 6.2 Table Elements Supported by the <table> Tag Attribute Description Possible Values Default Value Align The horizontal alignment of Left, center, right Left the table Width The width of the table, in Numeric value Width of pixels; percentage values contained are not supported elements, up to browser width Cellpadding The number of pixels Numeric value Two pixels between the edge of a cell and its contents Cellpacing The number of pixels Numeric value Two pixels between rows and columns NOTE Tables have a maximum width of 153 pixels under Palm OS 3.5 (due to a lack of horizontal scrolling). It is recommended that you keep the width element unspecified when writing your code. This way, your tables will be rendered by Clipper’s table algorithm, which operates similarly to how tables are rendered on a desktop browser. The table will wrap around the elements in the cells, and stretch to the edge of the screen before wrapping cell contents. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 258 Web Clipping • Chapter 6 259 The <tr> tag is used to designate the beginning of a row within a <table>. The only valid attribute for the <tr> tag is the align attribute, which has possible values of left, center, and right (with a default value of left). A <tr> tag may contain two elements, <td> (table data cell) or <th> (table header cell).Table 6.3 shows possible attributes for the <td> element, what they specify, as well as the valid and default values for each. Table 6.3 Table Elements Supported by the <td> Element Attribute Description Possible Values Default Value Align The horizontal alignment of Left, center, right Left the cell Width The width of the cell, in Numeric value Auto pixels Rowspan The number of rows that Numeric value Single row the cell spans within the table Colspan The number of columns Numeric value Single column that the cell spans within the table As in standard HTML, the only difference between the <td> and <th> cells is that the text within a <th> is, by default, bold and centered. NOTE If you are sending HTML containing table code back in a server response, you must ensure that you also include the palmcomputingplatform=true header either in the response itself or contained within a <meta> tag. Otherwise, the Palm.net Proxy Server will treat your code as if it origi- nated on a traditional Web site, and your table code will be modified, often with undesirable results! Using the <p> Tag The <p> tag denotes a paragraph of text, which supports the align attribute. There are several values to specify the alignment of the <p> tag: left, center, and right.The default, as with desktop browsers, is left alignment. Astute readers will note that the rarely used justify value for this attribute is unsupported by Clipper. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 259 260 Chapter 6 • Web Clipping Using the <b>, <i>, and <u> Tags These tags specify the appearance of text within a document as bold, italicized, or underlined, and are functionally equivalent to their HTML counterparts. Using the <strong> and <em> Tags These tags logically specify the appearance of text within a document. Clipper will render the <strong> tag as bold text, and the <em> tag as italicized text. In general, there is a current trend to replace display-based markup (<b>, <i>) with logically-based markup. Using the <ol>, <ul>, and <li> Tags These tags specify elements of a list.This list may be unordered (<ul>) or ordered (<ol>).These elements behave much as they do on a desktop browser, with an indent from the left side of the browser. The <ol> element supports the start attribute, which specifies the number at which the listing should start.This is often used to split ordered lists between side-by-side table cells. Chances are you will not have the horizontal real estate to implement this within Clipper, however.You can use this to split lists between pages, of course. In addition, the <ol> tag also supports the type attribute.You may specify the types shown in Table 6.4 with the effects indicated. Table 6.4 Type Attribute Effects for an Ordered List Value Effect 1 (default) Incremental numeric listing A Ascending uppercase letter listing a Ascending lowercase letter listing I Ascending uppercase roman numeral listing i Ascending lowercase roman numeral listing The <ul> element specifies an unordered list, and has no optional attributes within Clipper, just like its desktop counterpart.The <li> element specifies a list item.There are several possible values that specify the display of the bullet next to list items in an unordered list.These values are specified with the type attribute, and have possible values of circle, disc, and square. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 260 Web Clipping • Chapter 6 261 Using the <h1> – <h6> Tags These elements specify headings within a document, and provide display of bolded text with line breaks before and after the element.They behave similarly to their desktop counterparts, but the size difference is not as great.Also, it is worth mentioning that the <h4>, <h5>, and <h6> elements display rather small within Clipper.When you consider that your users are often on –the go and may not be using your WCA under optimal conditions, it makes sense to keep the headers used within your application at a maximum depth of three levels (<h1> – <h3>). Using the <img> Tag The image tag is supported by Clipper, but it behaves somewhat differently than you might expect.As we mentioned earlier, a WCA built using the WCA Builder has the capability of containing one and only one file with a given filename.This means that you cannot have multiple images with the same name within your application, as Clipper will treat them both as the same image.The attributes shown in Table 6.5 are supported for the <img> tag; remember that only the src attribute is required. Table 6.5 Image Attributes Supported by the <img> Tag Attribute Description Src The location of the image relative to the HTML page Width The display width of the image, in pixels Height The display height of the image, in pixels Hspace Horizontal padding around the image, in pixels Vspace Vertical padding around the image, in pixels Alt Alternate text for the image, used in place of graphic Align Alignment of image: left, center, or right Border Specifies a border around the image, in pixels (default is 0) www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 261 . Supported by the <img> Tag Attribute Description Src The location of the image relative to the HTML page Width The display width of the image, in pixels Height The display height of the image,. (<ol>).These elements behave much as they do on a desktop browser, with an indent from the left side of the browser. The <ol> element supports the start attribute, which specifies the number. algorithm, which operates similarly to how tables are rendered on a desktop browser. The table will wrap around the elements in the cells, and stretch to the edge of the screen before wrapping cell