Webmaster''''s Guide to the Wireless Internet part 29 doc

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 un

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:

■ 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

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

■ <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

Figure 6.16<title> Tag in a Desktop Browser

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

Figure 6.17<title> Tag within Clipper

Figure 6.18 Truncated <title> tag in Clipper

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.1Colors Supported by All Web Clipping Devices

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,

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.2Table Elements Supported by the <table> Tag

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

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.3Table Elements Supported by the <td> Element

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

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.4Type Attribute Effects for an Ordered List

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

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.5Image Attributes Supported by the <img> Tag

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)