Figure 4.x: Include a title with every web clipping page, or you will see an unsightly pathname in the title bar.
Web clipping supports a subset of HTML 3.2 standard, plus a number of web clipping-specific extensions to the language. This chapter details how HTML is supported in web clipping and how to use that support to maximum effect in your applications. We will cover the following subjects in this chapter:
Each section will describe the tags and tag attributes that are supported by web clipping, along with those tags and attributes that are not supported. Following this will be a description on how to use each tag in designing your applications. Finally, we will wrap up each section with a list of helpful hints and techniques for each feature.
Because of the inherent limitations of Palm organizers when compared with desktop computers, there are a number of features in the HTML 3.2 standard that are not supported by web clipping. A short list is included below of features that you can forget about using when developing web clipping applications:
Most of these features, such a layers and JavaScript were deemed unnessary and excluded from web clipping because they proved to be too processor or resource intensive for Palm organizers. Other features such as frames, nested tables, and style sheets would have added unwanted complexity to the release. The benefits that most of these features would have added were outweighed by the time and resources needed to implement them.
Every web clipping application should contain the following HTML code. Consider this to be the skeleton of every page:
<HTML> <HEAD> <TITLE></TITLE> <META NAME="PalmComputingPlatform" CONTENT="TRUE"> ... other header elements </HEAD> <BODY> ... document body </BODY> </HTML>
The <HTML> tag is what you start and end your HTML documents. While the
HTML 3.2 specification says that this tag is optional, we recommend that you include this tag in
all of your documents. There have been some cases where documents that did not have this tag (or
the body and head tags) were not properly transmitted to the Palm device. Unfortunately, we don't
have a concrete explanation for when it happens and when it doesn't happen.
Every Byte Counts... Really! |
You might thinking leaving out the <HTML>, <HEAD>, and
<BODY> tags would save you
a few extra bytes in your HTML documents, but in reality, it doesn't!
Omitting these tags actually adds a monstrous byte to the overall size of your
pages. Since every byte counts, these are one set of tags you'll want to keep in all
of your documents!
|
The document head contains elements that set a number of document properties. All header
tags should be placed within the starting <HEAD> and ending
</HEAD> tags. Like the <HTML> tag, we highly recommend you
placing this tag in all of your HTML documents.
If you do not include the <TITLE> tag in your page, the
pathname to this page will be displayed in the titlebar.
|
Figure 4.x: Include a title with every web clipping page, or you will see an unsightly pathname in the title bar. |
The number of characters that can be displayed in the title bar is also something that you should be mindful of. Because the title bar uses a proportionally spaced font, the maximum length of a string is variable, but on average it is around 12 characters. If the title string is longer than can be displayed, your string will be truncated, and an ellipse will be appended to the end. What you should be concerned about, however, is that the entire string will be sent down to your device from the Web. Thus, keep the number of bytes down by using a small title string.
The <BASE> tag defines the base URL for all other anchors in your HTML document.
This tag isn't very useful for web clipping developers because it simply doesn't make sense for the base
URL to point somewhere on the Internet. If you specify a base URL, you would not be able to store
any local HTML files or graphics with your web clipping application. Still, if you insist on using
this tag, it contains one required attribute, HREF, which points to the base URL. Consider
the following example:
<HEAD> <BASE HREF="http://www.yahoo.com/"> ... </HEAD> <BODY> <A HREF="headlines/news/">Breaking News</A>
We see with this code snippet that the base URL points to Yahoo!'s main web site. This makes the "local" link for Breaking News point to the index document in the headlines/news directory of Yahoo!'s site.
You can easily conclude, then, that you should avoid placing the <BASE> header tag in
any of your local web clipping documents.
<ISINDEX> tag
The <ISINDEX> is not supported by the current version of web clipping. Because of this,
you will have to create a standard form and modify your existing server-side scripts to accomodate the change.
An important item that you should know inside and out are the various web clipping-specific META
tags that you can place in your documents. These tags should be placed between the
<HEAD> and the </HEAD> tags.
This META tag means that your page is web clipping friendly. This META tag is essential if you want to display images on your pages, or if you want your pages to be downloaded completely to a Palm device from the web clipping proxy server. If this tag is not included, images will not be loaded and only the first 1024 bytes of data will be retrieved and displayed.
The format for this META tag is as follows:
<META NAME="PalmComputingPlatform" CONTENT="TRUE">
This META tag specifies the version number for your web clipping application. You place this META tag in your application's index.html file to ensure that the version number will be displayed when the user choose Get Info from the Application's Launcher (Launcher->Menu->Info->Version).
The format for this META tag is as follows:
<META NAME="PalmLauncherRevision" CONTENT="X">
where X is a string denoting your application's version number.
Figure 4-x: The value you specify in the PalmLauncherRevision META tag will
be displayed in the Info dialog box of the Application's Launcher.
|
This META tag lets you include any HTML files or graphics that have not been referenced anywhere else in your web clipping application. These additional HTML pages or graphics can then be referenced from your result pages, saving the cost and time of downloading them wirelessly.
The format for this META tag is as follows:
<META NAME="LocalIcon" CONTENT="X">
where X is the name of the image of HTML file you wish to include. We discuss the importance and use of this META tag in Chapter 5.
This is an important META tag that we recommend you include on all of your server-side web clipping pages. Every page that is retrieved over-the-air will have a corresponding History List entry. Adding this tag will allow you to give each entry a distinct title when displayed in the History List pop-up menu.
The format for this META tag is as follows:
<META NAME="HistoryListtext" CONTENT="X">
where X is a string denoting what should be displayed in the History pop-up menu. We discuss the importance and use of this META tag in Chapter 7.
Index (Root) Page |
Local Pages |
Remote Pages |
|---|---|---|
|
|
PalmComputingPlatform |
PalmComputingPlatformHistoryListText |
The <BODY> tag encloses the meat of your web clipping page and should be
in all of your HTML documents. There is one attribute that you can add to set the background color.
You can change the background of the web clipping page by adding the BGCOLOR
attribute. Acceptable values for this attribute include black, white, gray, or silver. The
default background color is white.
Figure 4.x: Them be Raiders' colors! Adorn your background with black, gray, or silver. |
We do not recommend setting this attribute because it will make your page much more difficult to read. In addition, you will be forced to adjust the color the text on the page to avoid clashing with the background color. For instance, if you made the background black, all of your text would have to be set to white, for the user to be able to see anything. Unless you absolutely want your page to be something other than white, avoid this attribute.
The Web provides the user with a broad range of fonts and font styles that, up till now, the Palm Computing Platform lacked. With web clipping-enabled Palm organizers, users and developers have a much richer selection of fonts to choose from. Web clipping introduces a new font family to the Palm OS, TD, which has sizes ranging from 7 pts to 12 pts and styles from bold to strikethrough.
Every font size contains a plain face font, except for TD 12, which only comes in bold (TD 12 B). Every font size has corresponding bold face, though only TD 9 can be rendered in italics. There are 52 possible permutations of font size and styles with the TD font in web clipping. Click on the graphic below to see a listing of the TD font family.
Figure 4.x: Click here to see a listing of all possible size and style permutations of the Palm TD font. |
The font tag has two attributes with which you can change a font's color and size, COLOR
and SIZE. Since there is only one font family, TD, the FACE attribute is
not supported.
Figure 4.x: The effects of applying the SIZE attribute to your fonts.
Figure 4.x: Four font flavors to choose from. |
You can adjust the font size in your web clipping pages in one of three ways.
You can specify an absolute or relative size value for the SIZE attribute. An absolute value
must be between 1 and 5, and a relative value can be a value between -2 and +2, excluding 0 (which would be
rendered at the smallest font size). The default font size for text on web clipping pages is 3.
| Note: |
The only way to get the TD 12 font is to use the <H1> tag. In addition,
there is no corresponding plain face version of TD 12; it only comes in bold.
|
Figure 4-x shows the different results from applying the SIZE attribute to text. Since
the <BASEFONT> tag is not supported in web clipping, setting the font size attribute
to be "-1" or "2" are equal, as are "-2" and "1", "4" and "+1", and "5" and "+2".
You can also adjust the color of text by specifying the COLOR attribute. As with the
BGCOLOR attribute of the <BODY> tag, you can choose between
black, white, gray, or silver. By default, text is rendered in black.
In most cases, you will want to avoid setting the color of text in your web clipping pages, since it is difficult to read both gray and silver text (not to mention white text!). The screen's readability depends greatly on the contrast setting of the Palm organizer's screen; sometimes gray or silver text will be practically invisible under certain contrast settings.
There are some situations, however, where you might find setting the font color useful. For instance, if you include a copyright notice at the bottom of your page, you may want to set that in gray. That way, the copyright notice won't draw the user's attention from the rest of your page. See the two screenshots below for an example of this technique.
Figure 4.x: You may want to use different font colors when you have text that you need there, but don't want the user to see. |
In documents rendered under desktop browsers, you can add the <BASEFONT>
tag to set the base font size for a document. This tag is not supported in web clipping, and
the base font size for all documents is 3 (TD 9).
As you can see from the listing of the TD font family, there are a number of font styles you can apply
to text in your HTML documents, ranging from bold to italic to strikethrough and underline. Thankfully, the
infamous <BLINK> tag is not supported in web clipping.
Each time you apply a font size or style tag, additional bytes are added to the overall size of your document. In general, each tag adds two to four bytes to your page size. This figure, while small, becomes significant if a page has many font size and style changes.
One way to reduce the number of font changes is to consolidate the changes into one tag. For instance,
if you wanted to bold and italicize some text, you could use the <ADDRESS> tag
instead of the <B> and <I> tags.
| Note: | There is only one italicized version of the TD font, TD 9 I. Applying the italics tag to fonts other than TD 9 will have no effect. |
The table below illustrates how the various style tags render in web clipping. The table assumes that you have not made any additional font size or style changes to the listed tag.
HTML Tag |
Font |
HTML Tag |
Font |
|---|---|---|---|
<H1> |
TD 12 B |
<KBD> |
TD Mono |
<H2> |
TD 11 B |
<LI> |
TD 9 |
<H3> |
TD 10 B |
<LISTING> |
TD Mono |
<H4> |
TD 9 B |
<OL> |
TD 9 |
<H5> |
TD 8 B |
<P> |
TD 9 |
<H6> |
TD 7 B |
<PLAINTEXT> |
TD Mono |
<ADDRESS> |
TD 9 BI |
<PRE> |
TD Mono |
<B> |
TD 9 B |
<SAMP> |
TD Mono |
<BLOCKQUOTE> |
TD 9 |
<STRONG> |
TD 9 B |
<CITE> |
TD 9 I |
<TABLE> |
TD 9 |
<CODE> |
TD Mono |
<TT> |
TD Mono |
<DFN> |
TD 9 I |
<UL> |
TD 9 |
<EM> |
TD 9 I |
<VAR> |
TD 9 I |
<I> |
TD 9 I |
<XMP> |
TD Mono |
<BIG> |
Increases the font size of the enclosed text. |
||
<SMALL> |
Decreases the font size of the enclosed text. |
||
<S> or <STRIKE> |
Draws a horizontal line through the enclosed text. |
||
<U> |
Underlines the enclosed text. |
||
<FONT SIZE="n"> |
Specify the font size as an integer (1 to 6), |
||
Changing the font size with some of these style tags can provide unpredictable results due to the fact that the TD font family isn't exhaustive. For instance, there is only one size to TD Mono, so enlarging the font won't do anything. Italicizing text set to TD 10 won't italicize the text because there is no corresponding TD 10 I font. Instead, the text is bolded. Go figure. It is with great hope that the next version of web clipping will include a more comprehensive font family.
This section will describe the various tags you'll be using to enter text and alignment elements on the screen.
Figure 4.x: Alignment fun: Choose from left, right, or center justified paragraphs. |
Use the <P> tag to start a paragraph. While optional, you can also include the </P> to mark
the end of the paragraph. The paragraph tag has one supported attribute, ALIGN, which you use
to align the text in the paragraph.
By default, paragraphs are left-justified. If you wish to change text alignment of a paragraph,
insert the ALIGN attribute with one of the following values: left, right, or center.
Figure 4-x depicts the possible ways to align text on your pages.
Text wraps automatically to the next line in a paragraph. If you want to maintain the exact look
of a text block, use the <PRE> tag. Use the line break tag, <BR>
to add manual line breaks to your paragraphs.
Figure 4.x: Divisions are useful at reducing the size of your pages when you are performing a lot of text alignment. |
This tag divides your page into separate sections. The formatting you apply to a division will be applied
to all elements contained with the <DIV> and </DIV> tags. The only attribute supported within the
division tag is ALIGN; the values are identical to that aligning paragraphs.
| Note: | There are some cases where division formatting is not maintained between elements. To solve this problem, simply insert a linebreak tag in between the offending elements. |
Divisions are very useful when you have a lot of elements aligned differently on a page. By separating
your page into divisions, you avoid having to specify the ALIGN tag in each division element.
This can result in savings in the overall size of your web clipping pages.
Headings are useful for organizing and structuring the flow of text and elements on your pages. There
are six levels of headings that you can use in your documents. The first heading, <H1>,
is rendered with the largest font size possible, TD 12 B, whereas the last heading, <H6>,
is rendered with the smallest font size, TD 7 B. Figure 4-x shows how the heading tags are rendered in Clipper.
Figure 4.x: Six headings from highest to lowest precedence. 
Figure 4.x: It's a matter of taste whether you like the extra white space or not. |
A potentially annoying quirk of headings is that they add a large amount of vertical space, seven pixels to be precise, between the heading text and the ensuing paragraph. Normally, there are between 4-5 pixels separating paragraphs; the extra 2-3 pixels often makes the heading look like it's associated with the previous text block instead of the next text block. Fortunately there is a workaround that involves applying font and style tags instead of heading tags. The code fragment below and Figure 4-x illustrate the problem and the workaround.
<H2>Section 2</H2> <P>See the extra amount of vertical white space? Ugly!</P> <P><FONT SIZE="+2"><B>Section 2</B></FONT><BR> More visually appealing.</P>
As we noted earlier in this chapter, there doesn't seem to be a way to access the TD 12 B font used
by the <H1> tag. As a result, you will just have to live with the extra vertical white
space between <H1> tags and text.
If you use the font size and bold trick, your pages will have a few more bytes tacked on than if you used the heading tags alone. The difference is small for each instance you use this trick, on the order of 4 bytes. The extra bytes are due to the fact that you are performing two operations on text, adjusting the font size and changing its style, instead of just one with the heading tag.
The center tag is used to center elements on the page. In web clipping applications, adding this tag also introduces a small amount of vertical space between the end of the block and what ensues.
The non-breaking space is your friend. The non-breaking space character, can be
placed anywhere where you want to have some additional horizontal space between elements in your document.
For instance, suppose you had a series of text links and you wanted them spaced apart from each other.
You can use a series of non-breaking spaces to separate them. Check out the following code snippet:
About | Help | Legal versus About | Help | Legal
This HTML code will render as follows in the screenshot shown in Figure 4-x.
Figure 4.x: If you want to position elements precisely on the screen, accept no substitutes. |
Depending on your aesthetic tastes, you may prefer the tighter spacing of the text links above. Or, you may like how using non-breaking spaces and improve the spacing of elements on your page. You can also use non-breaking spaces to add space between buttons.
Another use of non-breaking spaces is in vertical alignment of elements. When combined with linebreaks, non-breaking spaces add more vertical space than using linebreaks alone. There are situations when adding multiple linebreaks doesn't add any additional vertical space. The workaround is to slap in a couple of non-breaking spaces between the linebreak tags.
This tag inserts a linebreak in your document. Adding linebreak tags is akin to hitting the Return/Enter key in your word processing application.
There are times when adding additional linebreak tags does not appear to add any additional vertical space. If this is happening on your web clipping pages, what you need to do is add non-breaking spaces the linebreak tags. Thus, we can rewrite the code above as follows:
<BR> <BR> <BR>
The horizontal rule tag is good for separating dissimilar elements of your web clipping pages from
each other. Including the <HR> tag in your pages will create a black horizontal line.
With no attributes, each HR tag takes up between 2-3 bytes.
Figure 4.x: Various alignment values for horizontal rules. 
Figure 4.x: Various size values for horizontal rules. 
Figure 4.x: Various width values for horizontal rules. |
Web clipping supports the following attributes in the horizontal rule tag:
The ALIGN attribute is used to align the horizontal rule on the screen. The value
for this attribute can be RIGHT, LEFT, or CENTER. The default
value for this is attribute is CENTER. Since the default size of a horizontal rule spans the
width of the Palm organizer's screen, you need to specify a width for your rules when you specify the
alignment. Figure 4-x to the right illustrates how horizontal rules can be aligned by Clipper.
The SIZE attribute is used to specify the vertical height of the horizontal rule. The default
size is 1 pixel. Figure 4-x on the right illustrates horizontal rules in varying sizes.
The WIDTH attribute is used to specify the width of the horizontal rule. The default width
for a horizontal rule is 152 pixels. You can specify your value in either pixels or as a percent of
the screen size. For instance, entering:
<HR WIDTH="100"> <HR WIDTH="50%">
will create two horizontal rules of width 100 and 76 pixels respectively. Both rules will be centered on the screen and are depicted in Figure 4-x to the right.
The following attributes of the horizontal rule tag that you may be familiar with are not supported by web clipping:
Lists are very useful for displaying data in a very organized fashion. Web clipping supports most of the list features covered under the HTML 3.2 specification. There are a number of tag attributes that are not supported, but their omission prove to be of no major significance as you develop your web clipping applications.
Figure 4.x: |
Unordered lists place a small bullet next to each list item, with a small amount of space between the bullet and the beginning of the text. This should be the style of list that we recommended using in your web clipping pages.
The format for creating an unordered list is as follows:
<UL> <LI>This is the first entry. <LI>This is the second entry. <LI>This is the third entry. </UL>
There is no need to add the closing </LI> tag. When displayed within Clipper,
the HTML code above will look something like the screenshot shown in Figure 4-x.
Unordered lists have no attributes that are supported by web clipping. Thus, avoid adding the following attributes in your HTML code:
CLASS
COMPACT
STYLE
TYPE
Ordered lists list each item in ascending order according to a variety of styles, including numeric, lowercase, uppercase, large roman, and small roman. By default, an unordered list uses the numeric style and begins counting at 1.
The type attribute specifies the type of style to be used by the ordered list. You can choose from the following values:
The START attribute tells the ordered list where to start from. The value that you specify
for this attribute is a positive number. For instance, if you had the following code in your page:
<OL START="5"> <LI>This is the first entry. <LI>This is the second entry. <LI>This is the third entry. </OL>
The above code will be displayed as a numeric, ordered list that looks like this:
Unlike unordered lists, ordered lists indent each entry with a greater amount of white space.
You can change the list values on the fly by specifying the TYPE and VALUE
attributes in the <LI> tag.
<OL> <LI TYPE="A">one <LI TYPE="a">two <LI VALUE="9" TYPE="1">three <LI>four <LI TYPE="I" VALUE=5>five <LI>six </OL>
| Note: | There is a bug in the current version of web clipping dealing with changing the type in a list item in an ordered list. If you specify lower roman as the type of the list item, it will be rendered in upper roman. |
Definitions lists are supported in this version of web clipping.
The <MENU> and <DIR> tags create lists that look
identical to unordered lists.
Use this tag to create hyperlinks within your web clipping application pages.
The supported attributes that will be discussed below include:
There are a number of URLs that are supported within the anchor tag. Most of them you are undoubtedly familiar with, although there are a couple of web clipping specific URLs.
The filename to open. In a web clipping application, this refers to any pages that are stored locally in the PQA
on the Palm organizer. For instance, if you include the link:
<A HREF="help.html">Help</A> in the root page of your PQA, the hyperlink
will be associated with the help.html file that is stored within your app. On a remote result page, however,
the filename refers to a page that is stored locally on the server. So, if your remote page contains the link
<A HREF="help.html">Help</A>, the hyperlink will refer to the
help.html file stored on your server, not the one in your PQA. To point to the help page that is stored locally, you
use the file URL that will be discussed below.
In both cases, this URL specifies either the filename or the path to the desired file.
Depending on where the page that Clipper is viewing comes from, local links can either include or omit the over-the-air icon. Consider the screenshots below:
Figure 4.x: Depending on what is "local", over-the-air icons may or may not be displayed. |
The first screenshot displays the ABCNEWS.com web clipping application's main page. The Tour ABCNEWS.com link at the bottom of the screen refers to a page that is stored within the PQA. When the Headlines link is tapped, the second screenshot is displayed. This Headlines page is stored on ABCNEWS.com's web servers. For simplicity's sake, imagine the three files to which the three top articles displayed are also stored in the same directory as the Headlines page. As you can so, while the article links are local—to the server—they display the over-the-air icon.
As for the Front Page link, that is created using the file URL, which, again, will be discussed below.
By far the most common URL, the http URL is used to retrieve a document stored on the Internet.
This URL will retrieve a document on secure server.
The file URL works a little differently from what you might expect on the Palm organizer. With web clipping, you use the file URL to specify an HTML document or an image from within a web clipping application.
Consider the following example:
<A HREF="file:Weather.pqa">Weather Channel Home</A>
This will create a link on your page that, when tapped, will open the Weather Channel's web clipping application on the Palm organizer. If the file does not exist, Clipper will raise a cryptic error dialog saying that a database could not be found. This error could mean that the application isn't on the device, the HTML file or image could not be found within the application, or that you have a mispelling in your URL.
The next example demonstrates how you can specify a file or image within your web clipping application:
<IMG SRC="file:MyApp.pqa/logo.gif"> <A HREF="file:MyApp.pqa/help.html">Help</A>
In this example, we are showing how you can use the file URL to specify both an image and an HTML file within
| Note: |
You can add a single backslash, triple backslash, or no backslashes following the file:
in your URLs. For simplicity's sake, we recommend omitting the slashes. If you do not
specify a path following the application's name, Clipper will simply open the web clipping
application to its default index page. Thus, file:Weather.pqa is the same
as file:///Weather.pqa/index.html, plus a lot shorter.
|
To save on bandwidth, you will want to store many of your static pages within your web clipping application. There is a question that arises from novice web clipping developers, "How do I refer to these pages stored locally?" The answer is to use the file protocol in your hyperlinks.
Figure 4.x: mailto tag with subject and body parameters specified. |
This URL lets you create hyperlinks that, when tapped, open up your organizer's mail application. On the Palm VII,
the iMessenger application will open and create a message addressed to the value specified in the mailto tag. For
instance, suppose you have a hyperlink that read,
<A HREF="mailto:info@tow.com">Email Us!</A>, in your PQA. Tapping on this link
will create a new message in iMessenger addressed to info@tow.com.
You can add additional parameters to the end of the mailto tag to specify the subject and body of your message. The format for this is as follows:
<A HREF="mailto:email_address?subject=XXXX&body=YYYY"> ... </A>
where email_address is the email address you are sending the message to, XXXX is the subject
line and YYYY is the body of the new message. For instance, if you have a link that read
<A HREF="mailto:info@tow.com?subject=Book Feedback&body=Here is some feedback on the book">Feedback</A>,
tapping on that link will cause the screen shown in Figure 4-x to appear.
Note that mailto hyperlinks, like file, do not include the over-the-air icon.
This attribute is used to give a name to an anchor tag. You can use this attribute to create a way for the
user to jump quickly between different sections on a web clipping page. The value of the NAME
attribute is a string, enclosed within quotation marks. For example, suppose you had the following
piece of code in your index.html file:
<A HREF="#section1">Section 1: Learning Web Clipping</A>
This creates an anchor with the name "section1". You can now create a hyperlink that opens the index.html directly to this anchor, obviating the need for the user to scroll to the desired section:
<A HREF="index.html#section1">Jump to Section 1</A>
Using the NAME is helpful if you are creating a help page with many questions and answers. You could,
for instance, create a table of contents at the top of the page. This will allow the user to scan the questions
to find the one she is looking for, instead of having her scroll through each question. You could also include a
link to jump back to the top of the page after each question/answer section.
In web clipping, you have access to an additional anchor tag attribute called BUTTON. If
you include this in your hyperlinks, the link will be displayed as a button instead of an underlined
text hyperlink. Consider the following code fragments:
<A HREF="index.html">Buttons Home</A><BR> <A HREF="index.html" button>Buttons Home</A><BR> <A HREF="http://www.tow.com">Foundation Systems</A><BR> <A HREF="http://www.tow.com" button>Foundation Systems</A><BR>
Figure 4.x: Add the BUTTON attribute to change the look of your hyperlinks. |
When you add the code to a web clipping application, the screenshot to the right will be produced.
As you can see, adding the button attribute will change the way your hyperlink is rendered on the screen.
You may want to experiment with using the BUTTON attribute on your web clipping pages.
If you include this attribute, make sure the link text is not wider than the Palm organizer's screen width of 153 pixels. Unlike normal text hyperlinks, button hyperlinks do not wrap to the next line. You will get an unsightly looking button if the text of the hyperlink is too long, as shown in the screenshot to the right.
There are a number of attributes that you may be familiar with that are not supported in web clipping:
There is a bug in the current version of Clipper and web clipping where named anchors in tables are not handled properly. As a result, code similar to the fragment below will not work.
<UL> <LI><A HREF="#s1">Section 1</A> <LI><A HREF="#s2">Section 2</A> <LI><A HREF="#s3">Section 3</A> </UL> <TABLE> <TR> <TD><A NAME="ch1">Section 1</A> ... </TD> </TR> <TR> <TD><A NAME="ch2">Section 2</A> ... </TD> </TR> <TR> <TD><A NAME="ch3">Section 3</A> ... </TD> </TR> </TABLE>
Figure 4.x: Be wary of having named anchor tags in tables. They may not work. |
Figure 4-x depicts a sample page similar to the code above. At first glance, you would quickly assume that you should be able to tap on the hyperlinks in the unordered list to instantly jump you to the appropriate section. Unfortunately, this functionality appears to be broken in the current version of web clipping.
If you want to be able to jump to a specific location on a web clipping page, you will want to avoid using tables and named anchor tags together to organize your data. In the example above, if you do without the table, the code will function as expected.
Tables are excellent for organizing data on your web clipping pages.
<TH> tag
The <TH> tag is a great tag that you should be made aware of. A common use for
tables is aligning a form on a web clipping page. As we will mention in our section on forms, we
encourage making the field label distinct from the field itself by bolding and right-aligning
the field label. A beginning to web clipping, then, might use the following code:
<TD ALIGN=RIGHT><B>First Name: </B></TD>
There is certainly nothing wrong with this code from a grammatical standpoint. However, from the standpoint of the number of bytes used, the addition of the bold tag adds about 2-3 bytes, than if you used the table header tag:
<TH ALIGN=RIGHT>First Name: </TH>
Both pieces of code produce the identical looking field labels, but the latter will save you something on the order of 2-3 bytes for each field. If your tables have many fields in them, the savings can become significant. Keep in mind, though, that usually your forms will be stored locally on the Palm organizer. In this situation, you do not have to be as concerned about the file size. If you return forms over-the-air to the user, however, keep this tip in mind.
You can use tables to create sidebars and toolbars on your web clipping pages. These can be used to great effect to make your apps look more visually appealing. Check out the following sample code:
| Note: | Nested tables are not supported in web clipping. |
Begin by creating a three-column table (i.e. one table row with three cells). If you want to create a toolbar on the left-hand side of the screen, give the first cell a width of 25 pixels. The second cell will contain the meat of your web clipping page. In the first cell, it's best to place graphics whose overall size is less than 25 pixels.
<TABLE> <TR> <TD WIDTH="25"> <!-- Place your toolbar entries here --> <A HREF="date.html"><img src="small_date.gif" border=0></a><br> <A HREF="name.html"><img src="small_name.gif" border=0></a><br> <A HREF="todo.html"><img src="small_todo.gif" border=0></a><br> <img src="gray_small_memo.gif"> </TD> <td width=3><img src="long_vertical_line.gif"></td> <TD> <b>Memo:</b><BR> <TEXTAREA NAME="text" ROWS=8 WRAP=HARD></TEXTAREA> <BR> <BR> <INPUT TYPE="SUBMIT" VALUE="Add Memo"> <a href="palm:memo.appl" button>Memo Pad</a> <BR> <A HREF="index.html">QuickAdd Home</A> - <A HREF="about.html">About</A> - <A HREF="help.html">Help</A> </TD> </TR> </TABLE>
Figure 4.x: Toolbars using tables in QuickAdd. |
Note in the example above, we have the middle cell contain the vertical bar. Cells have a minimum size of three pixels.
The QuickAdd application from Foundation Systems, shown in Figure 4-X to the right, demonstrates the use of tables to create appealing looking toolbars.
Aligning table
The following attributes are not supported in this version of web clipping:
Web clipping supports many of the form input types that you may be familiar with. There are, however, a number of cosmetic and functional differences, which we will outline in this section.
The format for adding an input line is as follows:
The date picker, along with the time picker, is a very useful HTML extension introduced in web clipping. The date picker allows the user to input the date using the standard Palm UI widgets.
The date picker sends the date in the Internet-standard date format, which, of course is Y2K compliant. The format of the output is: YYYY-MM-DD.
<INPUT TYPE="datepicker" NAME="d" VALUE="2000-01-03">
If you omit the VALUE attribute, the current date will be displayed in
the date picker when you view the page. If you want to specify the date, do
so in MM/DD/YYYY format or else it won't display properly (thanks to
Jay Freeman for pointing this out).
The time picker is another useful HTML extension introduced in web clipping. It uses the standard Palm UI widget to allow the user to quickly enter the time. The format of the output is hh:mm, which is in 24-hour format. You include the time picker in your forms using the following code snippet:
<INPUT TYPE="timepicker" NAME="t" VALUE="10:40">
If you omit the VALUE attribute, the current time will be displayed in
the time picker when you view the page.
The name of your parameters should be kept as short as possible to reduce the number of bytes that is sent each time you submit a form. The format of the output is: hh:mm, which is in 24-hour format.
The best way to align fields in your forms is to use a table.
If the fields of your form are contained within a table, you enclose the table between the starting and ending tags of the form. Otherwise, your web clipping application will not work properly.
If at all possible, keep the field sizes to be identical with each other.
<FORM METHOD="GET" ACTION="http://www.myserver.com/cgi-bin/"> <TABLE> ... </TABLE> </FORM>
As for the submit and clear buttons, we recommend that you justify the buttons along the left-hand side of the screen. If your form is centered on the screen, however, you may want to center justify the form buttons, lest they look out of place on the screen.
Figure 4.x: Left-justify or center align your form buttons. Use whichever alignment that looks best with the overall style of your page. |
The other guideline to keep in mind is to place the most frequently used button as the left-most button. In this case, that button is your form's submit button. The clear button, if you decide to have one, should be placed to the right of the submit button. You may also want to add a non-breaking space between the two buttons to add some more space, but this is entirely up to your own personal design preference.
Here is some HTML code that you can use to create visually appealing forms in your web clipping application pages.
<TABLE> <!-- Row 1 --> <TR> <TH ALIGN=RIGHT></TH> <!-- Field 1 Label --> <TD></TD> <!-- Field 1 --> </TR> <!-- Row 2 --> <TR> <TH ALIGN=RIGHT></TH> <!-- Field 2 Label --> <TD></TD> <!-- Field 2 --> </TR> ... <!-- The rest of your table here --> <TR> <TD COLSPAN=2> <INPUT TYPE="SUBMIT" VALUE="Go"> <!-- Option non-breaking space here --> <INPUT TYPE="RESET" VALUE="CLEAR"> </TD> </TR> </TABLE>
Figure 4.x: The Yahoo! People Search application does a good job of formatting their forms to be visually appealing. |
A good example of this structure is shown in the Yahoo! People Search web clipping application. As you can see in the figure below, the form fields are formatted exactly as we have specified in the code above. The field labels are right-justified and bold, and the submit and clear buttons are left-justified, with the
There are a number of web clipping specific extensions to HTML that you can use to provide enhanced functionality to your applications. We mentioned two of them earlier in this chapter in the section on forms, the date picker and the time picker. In this section, we'll cover the remaining extensions, including:
The <SMALLSCREENIGNORE> tag lets you block specific sections out of your web clipping pages
that should not be sent or displayed on the Palm organizer. Of most use on your result pages, this tag
is especially useful if you are designing a page to be displayed both on a desktop browser and a web clipping
enabled Palm organizer.
The format was using this tag is as follows:
<SMALLSCREENIGNORE> ... </SMALLSCREENIGNORE>
Everything between the <SMALLSCREENIGNORE> and the </SMALLSCREENIGNORE> tags
will be ignored by either the PQA Builder application or the web clipping proxy server. Consider,
for instance, the following HTML code snippet:
<HTML> <HEAD> <TITLE>Search Results</TITLE> <META NAME="PalmComputingPlatform" CONTENT="TRUE"> </HEAD> <BODY> <!-- This graphic will be ignored by the proxy server --> <SMALLSCREENIGNORE> <CENTER><IMG SRC="advertisement.gif" ALT="Advertisement Graphic"> <A HREF="advertiser.html">Click here to find out more!</A> </CENTER> </SMALLSCREENIGNORE> The results of your search, "html": <UL> <LI>Search result #1 <LI>Search result #2 <LI>Search result #3 </UL> </BODY> </HTML>
Figure 4.x: Block out sections that you don't want downloaded using the <SMALLSCREENIGNORE> tag.
|
Figure 4-x shows what the HTML code above would look like when downloaded to the device. As you can plainly see, the advertisement graphic and link are not displayed. The proxy server strips this code out before it is sent down to the device.
At the time of this book's writing, there is a bug in the current version of the proxy server software
that prevents this tag from working properly some of the time. Sometimes, the proxy server continues to
ignore content beyond the ending </SMALLSCREENIGNORE> tag. Most of the time, the tag
should work as expected, but you should vigorously test your web clipping pages to ensure that they are
downloading and displaying properly on your device.
This is a special string that you can embed in URLs or as values in form parameters. This string will be translated to your server into the form of the Palm organizer's unique device id. You can use this string to identify a particular device on the network.
The format to the Device ID is as follows:
[-1, 0, 1].[X]
Like %deviceid, this is is a special string that you can embed in URLs or as values in form parameters. This string will be translated to your server as the ZIP code for the basestation that processed the organizer's wireless request. The distance between the organizer and the base station is variable, so you should not rely on the return value to be an accurate reading on where the user is. Typically, the range between an organizer is 5-10 miles, though it can be significantly greater.