Delivering the ALEPH Web OPAC to Handheld Devices


This site describes the development of an experimental version of the Aleph web catalogue interface intended for low bandwidth handheld devices. By taking advantage of the "other language" capability in Aleph to customize the features and display of the web catalogue, one can create an interface optimized for the handheld environment.


Where to begin

Setting up a new Aleph language

In one of the Powerpoint slideshows from the ExLibris 2002 System Seminar in Cyprus - "Customized Web Interface for ALEPH" by Luda Cherinsky, the suggestion is presented that one can set up a parallel development environment for customizing the Web OPAC by creating a new "language". This capability might also be a way of providing a smaller, lighter version of the catalogue designed with handheld devices in mind.

Luda describes in detail how to set up the parallel environment using ALEPH's conv-lng feature. (Contact ExLibris for copies of this document.)

Once a new 'language' is created in Aleph, one can then add it to the language display options, and link to it directly.

By limiting the functionality and using as concise code as possible, one can deliver very light pages. Limiting the functionality also limits editing the required www files resulting in less work.

Here is a complete list of files edited for this project (some of these are locally created files, and not part of the default set).

60 www_f files

bor-info
bor-info-push
bor-loan-body
bor-loan-exp
bor-loan-head
bor-loan-no-loan
bor-loan-tail

copyrights

edit-hol-split-line

find-a
find-b
find-b-include
find-c

full-999-body
full-set-head
full-set-tail
full-xxx-body

head-1-bor
head-1-nobor

help-codes
help-index
help-location

history-body
history-cross
history-cross-body
history-cross-tail
history-head
history-tail

include-stylesheets

item-global-body
item-global-head-1
item-global-head-2
item-global-head-2-a
item-global-head-3-a
item-global-head-3-b
item-global-head-3-b1
item-global-head-3-b2
item-global-head-3-b3
item-global-head-3-b4
item-global-head-3-c
item-global-tail
item-hold-request
item-hold-verify

login-session
logout

meta-tags
meta-tags-mp

option-display-nobor
option-lng-nobor

pda.css

scan
scan-acc-body
scan-acc-head
scan-acc-tail
scan-include-2
scan-include-2-codes

short-1-head
short-2-head
short-a-body
short-a-head
short-a-tail
short-filter
short-include-2
short-mail
short-tail

start-1-mgu01

Path_Convert

In path_convert, everywhere you have your "f" you need to map to your new language - in this case "pda", or create a different "pda" tab. The more you use path_convert, the less work you have to do to keep things in synch:

$mgu01_dev/mgu01/www_f_pda            $alephe_root/www_f_pda
$mgu01_dev/mgu01/tab/tab00.pda        $mgu01_dev/mgu01/tab/tab00.eng
$mgu01_dev/mgu01/tab/tab01.pda        $mgu01_dev/mgu01/tab/tab01.eng
$mgu10_dev/mgu10/www_f_pda            $alephe_root/www_f_pda
$mgu11_dev/mgu11/www_f_pda            $alephe_root/www_f_pda
$mgu12_dev/mgu12/www_f_pda            $alephe_root/www_f_pda
$mgu30_dev/mgu30/www_f_pda            $alephe_root/www_f_pda
$mgu50_dev/mgu50/www_f_pda            $alephe_root/www_f_pda

$mgu50_dev/mgu50/tab/tab00.pda        $mgu50_dev/mgu50/tab/tab00.eng
$mgu50_dev/mgu50/tab/tab01.pda        $mgu50_dev/mgu50/tab/tab01.eng
$mgu50_dev/mgu50/tab/tab15.pda        $mgu50_dev/mgu50/tab/tab15.eng
$mgu50_dev/mgu50/tab/tab18.pda        $mgu50_dev/mgu50/tab/tab18.eng
$mgu50_dev/mgu50/tab/tab25.pda        $mgu50_dev/mgu50/tab/tab25.eng
$mgu50_dev/mgu50/tab/tab26.pda        $mgu50_dev/mgu50/tab/tab26.eng
$mgu50_dev/mgu50/tab/tab40.pda        $mgu50_dev/mgu50/tab/tab40.eng
$mgu50_dev/mgu50/tab/tab45.pda        $mgu50_dev/mgu50/tab/tab45.eng
$mgu50_dev/mgu50/tab/tab46.pda        $mgu50_dev/mgu50/tab/tab46.eng
$mgu50_dev/mgu50/tab/tab47.pda        $mgu50_dev/mgu50/tab/tab47.eng

$mgu60_dev/mgu60/www_f_pda            $alephe_root/www_f_pda

$pwd50_dev/pwd50/www_f_pda            $alephe_root/www_f_pda

Also edit the following tables:


Picking a markup language and doctype

The catalogue is not a static web page, or even a few web pages.
It is more like an application than a brochure.
This will affect what you can do, and how you can get it done.

You can't, for instance, download a set of pages to be read through later, or download a "deck" of WML pages. Because one is constantly sending requests to the server and reloading pages, you should make all files as small as possible. Also, since handheld devices don't usually have caches, each associated file gets reloaded with every request, so images and CSS files should also be very small. It may even be a good idea to embed the CSS as inline style to avoid multiple file requests for a single page.

This demo uses XHTML 1.0 Transitional for all pages, and several style sheets for testing purposes. While there are some proprietary markup indicators for specific devices and platforms, these were excluded so as to preserve a modest common denominator in the interests of simplicity.

One exception is the "Help" page which uses XHTML Mobile 1.0 and where the CSS indicates media="handheld".


Preliminary decisions

The basic functionality was limited to:

  1. basic keyword searches (find-b)
  2. browse searches (scan)
  3. simple limits (short-filter)
  4. save/email records (short-mail)
  5. view history (history-h/b/t)
  6. renew items (bor-info, bor-loan)
  7. recall items (item-global files)

The model kept in mind was of someone who needed to check if a certain book was in the library and available, or who needed to renew a book. This version was intended as a means to a very quick recovery of a known item, or to perform a specific task (renewing a book).

A Common Command Line search option (find-c) was included, to allow for the full range of search functionality through complex searches.

Help pages was limited to lists of field and location or collection codes, and lists of available access keys. Brief tips were included on the search pages.


Be concise

The pages were carefully edited to be as light as possible (5k - 10k per page).

Since rendering tables is problematic, they were replaced with definition lists (dl

Images were replaced with concise text links where possible, and verbiage and tips were limited or eliminate entirely.

The heaviest page is the brief view (table view - approximately 22k). The same page in the full version is approximately 41k.


Testing

Testing can be problematic due to the number of different platforms and devices. It is extremely difficult, if not impossible, to verify that the catalogue behaves predictably and reliably in all situations.

A simple style sheet switcher provided a crude way of tracking things during the initial phase, and the catalogue was tested using the Opera small screen browser view and with the Openwave emulator.


Problems

Some of the problems were the inability to replace all images with text or native form submit buttons, javascript, and invalid or poorly formed code.

Entering data with mobile phones can be difficult, awkward, or unpredictable. Openwave allows for a proprietary measure to specify the input type - letter or numeric, however this is not recognized by all devices.

In general, any problem with a function that could not be resolved or circumvented, such as the javascript popups for web services from the full record, was removed if possible.


A few tips

These tips are taken from Opera Software's site for developing for small devices.

Making Small Devices Look Great

Coding tips

  1. Use terse, efficient markup
  2. Avoid frames
  3. Avoid pop-ups
  4. Avoid using proprietary features, or use fallbacks
  5. Specify image height and width
  6. Use alternative text on images
  7. Have fallbacks for JavaScript and dynamic effects

Testing tips

  1. Test in Opera, in Small-Screen view
  2. Test with graphics turned off
  3. Test with JavaScript turned off
  4. Test with no mouse

Small-Screen design tips

  1. Design with document order in mind
  2. Design the small-screen version for maximum readability
  3. Only use images suited for a small screen, hide the rest
  4. Be careful with the use of colors, font sizes, and alignment
Opera Software

Handheld Aleph - Demo

The demo is available at:
MUSE for handheld devices

The demo version of Aleph for handheld devices was built on McGill's test server Ruckus, uses a XHTML 1.0 Transitional DTD, and four style sheets for development and testing purposes.

The first default style sheet is blank, the second has a basic fluid style, the third uses a background image and absolute body sizing to simulate a handheld device, and the fourth indicates media="handheld" for those browsers that support it.

The "Help" page uses XHTML Mobile 1.0. which would be the default DTD in principle, and has the mime type set to application/vnd.wap.xhtml+xml.

Simple text-like images were created where images could not be replaced with text.

For the presentation at NAAUG, I used multiple style sheets and style switching for display purposes and dramatic effect. Therefore the demo presented here should not be considered as a completed prototype.

I have tidied the files, used the XHTML Mobile 1.0 doctype, and supplied a basic handheld style sheet in the Zip archive.

N.B. This demo was developed on Aleph version 14.2.5, your file set may be different. Also, table changes should be done with care, the tables included in this Zip archive are for illustrative purposes only.


Bibliography

Some of these articles are extensive and technical, some are brief guides offering general principles, and a few cover the same ground in slightly different ways. They are listed in no particular order.

Pocket-Sized Design: Taking Your Website to the Small Screen
by Elika Etemad, and Jorunn D. Newth on A List Apart
Creating Web Content for Mobile Phone Browsers, Part 1, Part 2
by Robert Jones
This excellent article features a clear explanation of the Wireless Application Protocol (WAP) and XHTML Mobile Profile. In part 1 Jones supplies illustrative examples and walks through the development of a simple site using both WML and XHTML MP. In part 2 he explains how to deliver different files to different handhelds in order to take advantage of device specific features.
HTML and CSS for Mobiles
This post and commentary on HTMLDog sheds light on mobiles and how they handle HTML and CSS, a test page is provided.
Designing Web Interfaces for Handheld Devices
by Daisey Kondziola
This short and non-technical article covers some basic design principles.
From Desktop to Palmtop: Creating Usable Online Documents for Handheld Devices
by George F. Hayhoe
Hayhoe presents two pages of hardware and software challenges, and some thoughts on the user environment and user tasks.
Designing Web Sites for PDAs
by Carter Stowell
This pithy article describes the design of a Wired News mini-site for the PalmPilot's AvantGo browser.
Delivering Web Content via Handheld Devices
by Emma Rose
This short introductory article is light on the technical details, but includes some good tips.
From Web to Wireless: Designing for Low-Bandwidth Media
Panel discussion at SeyboldSF
This transcription of a panel discussion is a bit dated but contains some nuggets of insight and commentary on the industry.
Creating Sites for the Hand
by Barry Campbell
This case study from a business and e-commerce perspective offers an interesting discussion of tailoring PDA development to user groups and user needs. Campbell describes the development of a search tool for lunch menus at OrdersUp.com.
XHTML-MP Style Guide
@Openwave Developer Network
This is a comprehensive and practical explanation of XHTML MP and how to develop for PDAs.
Nokia 9210 browser style guide v1.3
by Nokia
This is the Nokia manual for developers of PDA sites and applications.
The End-All Guide to Small-Screen Web-Dev
by Heidi Pollock 5 Mar 2004
[Locally Archived version]
This article covers a broad range of topics including a harrowing description of cross-platform and cross-browser issues and trying to use various developer's kits. This is the last article published on Webmonkey (hence the locally archived version) and is typically interesting, practical, and readable. We'll miss you Webmonkey.
Authoring for Small-Screen Rendering (SSR)
by Opera Software
This series of short articles describe the basics and general good practices for developing for SSR including articles on how to improve your HTML site, how to create a CSS based site with multiple views, and how to create a mobile portal. A nice example of an Opera mobile portal is available.
Making Small Devices Look Great
by Opera Software
This article is a clear description of how to design for small devices. It covers writing, testing, pages with multiple views, and provides some useful examples.
Developing Wireless Content using XHTML Mobile
by Jean-Luc David, April 14, 2004
This is another short article covering the basics of XHTML MP, and it includes a useful list of authoring tools.
Emulators, etc.
Opera Small Screen Rendering
Openwave® Phone Simulator
Wapalizer
ThunderHawk wireless Web browser [$49.95 per year]

XHTML | CSS