Developing Web Clipping Applications


Techmetrix Research

Introduction
Concepts: Web Clipping and PQA
Design, HTML coding, Compilation of PQA, installation and testing
Conclusion

The implementation of a Web Clipping application involves the following stages:

  • Design.
  • HTML coding.
  • Compilation of PQA, installation and testing.

Design

The first step involves differentiating between static information and dynamic information. A PQA is made up of local Palm client pages and pages stored on a Web server. Naturally, the local pages are static. If these pages are to change, the user will have to reinstall the updated version of the PQA on his/her Palm. To avoid having to update too often, during the design phase it is important to identify the information that is static enough to be stored in the PQA. In some applications (search engines, for example), only the homepage is stored locally, as the rest is dynamic.

Local PQA

Server

  • "Completely" static pages
  • Images
  • Dynamic pages (scripts which access data stored in a base)
  • Static HTML pages whose content is often updated by the Webmaster

 

For the design of the pages themselves (local or remote), it is important to bear in mind the restrictions imposed by a Palm client:

  • The low throughput / high cost ratio means that the number of requests sent to the server must be kept to a minimum.
  • A page must not exceed 63 KB in size.
  • All elements (tables, images) cannot exceed 153 pixels in width (i.e. the width of the screen). There is no horizontal scrollbar.
  • Image formats supported are GIF (but not animated GIF) and JPEG. The Palm VII, for example, does not support colors, only four levels of gray for images: white (#FFFFFF), light gray (#C0C0C0), dark gray (#808080) and black (#000000).
  • For easy readability, do not go overboard with large fonts and bold characters.

HTML Coding

Palm offers a number of free tools for developers of Web Clipping applications (http://www.palmos.com/dev/tech/webclipping/), but no specific editor. Developers can therefore use any editor they wish.

As we mentioned above, Web Clipping uses a subset of HTML 3.2. This subset comprises all the basic tags including lists, images and simple tables. Stylesheets, frames, client scripts and applets are not supported, however.

Some other specific features have also been added to the language, such as:

  • The palmcomputingplatform metatag, which tells the Palm that it can process the page. Without this tag, images are not read (even those narrower than 153 pixels).

<meta name="palmcomputingplatform" content="true">

  • localicon metatags in the index page of the PQA designate the files (pages or images) that are stored locally:
<meta name="localicon" content="index.html">
<meta name="localicon" content="logo.gif">

To refer to these files from a Web Clipping, you need to write:

<a href="file:TrendMarkers.pqa/index.html">index</a>
<img src="file:TrendMarkers.pqa/logo.gif" border="0">

where TrendMarkers.pqa is the name of the PQA.

Compilation, installation and testing

Once all the static HTML pages have been developed, they must be compiled in order to generate the PQA.

Compilation is carried out using the Query Application Builder (QAB) available on Palmos.com. The process involves converting all the static files (HTML pages + images) into one single file with extension .pqa.

Generally speaking, to install a PQA on a Palm you need to add the application file to the add-on directory using the Install Tool utility, and then synchronize with the Palm using the HotSync tool. Both these utilities form part of the "Palm Desktop" package that is shipped with the device. As the name suggests, this package is used to manipulate data on a desktop computer, and to synchronize it with the Palm data.

Installation and testing can be done directly on a Palm, or on an emulator. PalmOS Emulator (POSE) is available on Palmos.com (with versions for Windows, Unix and Mac OS). The screen shots in the next section of this article were created using POSE.

Application example

TrendMarkers is the monthly newsletter from TechMetrix Research.

Our example will illustrate the development of a Web Clipping application accessing this newsletter. The functionalities will be as follows:

  • Consultation of articles.
  • Subscription to receive the newsletter by e-mail every month

The three code examples below are taken from this application. They illustrate the concepts covered in the preceding sections.

1) Application homepage (local PQA page):

<html>
<head>
<title>TrendMarkers (TechMetrix e-newsletter)</title>
<meta name="palmcomputingplatform" content="true">
<meta name="palmlauncherrevision" content="1.0">

<! -- local files -->
<meta name="localicon" content="index.html">
<meta name="localicon" content="corp.html">
<meta name="localicon" content="privacy.html">
<meta name="localicon" content="signup.html">
</head>

<body>
<p align="center"><img src="biglogo.gif"></p>
<p align="center">Welcome to<br>
TrendMarkers monthly newsletter </p>
<p align="center">&nbsp;</p>
<p align="center"><a href="http://www.trendmarkers.com/palm/current.html"> Read newsletter</a><Br> <a href="signup.html">Signup</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<hr>
<p align="left">
<font size="2"><a href="corp.html">Corp. Info</a>&nbsp;|&nbsp;<a href="privacy.html">Privacy</a></font>
</p>
</body>

</html>

2) The registration form (local PQA page): this page uses a form object containing two input objects. Syntax is strictly identical to that of an HTML form:

...

<form method="post" action="http://www.trendmarkers.
com/palm/sbmpalmsignup.php3">
Enter your e-mail to receive TrendMarkers monthly newsletter:<Br> <input type="text" name="TxtEmail">
<input type="submit" name="Submit">
</form>

...

NB: the submit button links to a PHP script which processes, server side, the registration attempt (checks syntactic validity of e-mail, checks whether user is already registered) and sends back an HTML stream.

3) Sample newsletter article (Web Clipping page): the TrendMarkers logo links to the application homepage. The image and the homepage are files stored on the client side, in the PQA:

<html>
<head>
<title>TrendMarkers (TechMetrix e-newsletter)</title>
<meta name="palmcomputingplatform" content="true">
</head>
<body>
<p>
<!-- TM logo -->
<a href="file:TrendMarkers.pqa/index.html">
<img src="file:TrendMarkers.pqa/smalllogo.gif"
border="0" alt="Home"> </a>
<b>&nbsp;May 2000</b></p>
...

Printer Friendly Version

TechMetrix

TechMetrix Research is a technically focused analyst firm focused on e-business application development needs. Based in Boston, Mass., the firm publishes comparison reports and product reviews designed to aid enterprises with decision making and to keep pace with the fast-moving e-business market.

TechMetrix is a U.S.-based subsidiary of SQLI, a European company that offers on-site development services to international organizations. SQLI specializes in e-business project development.