Simon Bisson takes a look at how you can add images to your WAP pages – and tries a few little tricks with WAP’s built in timers.

Most of the WAP sites in use are pure text, lists of information and interminable menus and pick lists. It’s like the web back in the early 90’s – only this time without any pictures. But images make working with information easier, especially when user interfaces are limited. In order to be successful the wireless Internet shouldn’t just be text. A weather forecast is quicker to interpret with weather-map icons, and a what’s-on guide easier to understand if icons are used to distinguish restaurants from cinemas. So how can we make our WAP applications more compelling?

In our previous two excursions into WAP and WML we looked at how you can deliver text information to mobile phones. But text isn’t all you can send to a WAP phone, and WML has the tools you need to add images to your WML pages. You shouldn’t expect the complex graphical abilities of the latest HTML browsers – for one thing, the displays on most WAP mobile phones are very small, just four lines of text on a tiny scrollable display. Any images you start to add to your WAP decks will need to take this into account. This means that WAP isn’t a tool for banner adverts or complex graphical buttons – and even though you can use an image as a hyperlink in a WML card, it’s not really a good idea.

The simple micro-browsers used in most WAP phones just aren’t capable of handling the complex algorithms used to produce compressed colour graphics, so all images used will need to be as simple as possible. In fact, they’re as simple as it’s possible to be! As a result you won’t be able to use your favourite GIFs and JPEGs on a mobile phone. The WAP Forum, the organisation that sets the WAP standard has defined a specific image format, WBMP, the Wireless BitMaP. WBMP is a 1-bit image format, so images can only be black and white.

You can download various WBMP editing tools from the Internet, or use the tools built into some of the WML development suites provided by the various phone companies. If you’re using the popular Macromedia Dreamweaver 3.0 HTML design tool along with the Fireworks graphics package, you can download a Nokia designed WML layout tool for Dreamweaver that also includes a Fireworks add-on that will save your images in WBMP format, ready for use in your WML applications. The latest version of the Nokia WAP Toolkit also includes a WBMP editor – so you can create images and test your decks at the same time.

So how do you add images to your WML decks once you’ve created them? Well, if you’ve ever put images in a web page you’ll find adding images to a WML deck very easy. Just like HTML, WML has an “img” tag. The basic syntax of the WML image tag is very similar to its HTML equivalent:

The “img” tag is really designed to be ready for the next generation of phones. Whilst you can specify the height and width of the image, the spacing around it isn’t really applicable to the small displays used in most WAP phones. It’s only with larger screen sizes used in devices like the forthcoming Ericsson R380 phone (based on the Symbian EPOC operating system, just like the latest Psions). If you’re going to send images to the phones already in use, all you need to use are the “alt”, “src” and “localsrc” attributes.

Just like HTML the “alt” attribute defines a text message that is displayed on devices that don’t support images. Some of the more primitive WAP phones in use will need this, as they are unable to display images. You’ll also find the “alt” description used in hyperlinks rather than the image, if you’ve made the mistake of turning an image into a clickable link – something that works well in HTML, but isn’t possible in WML.

The “src” and “localsrc” attributes define the location of the image you’re using. Just like in HTML, the “src” is the URL of the image you’re going to use. This doesn’t have to be a full path – relative URLs to the parent deck are easiest to use, and the easiest to maintain. Don’t forget to make sure that you’re pointing to a WBMP image. Some WAP gateways (the proxies between the Internet and the mobile phone) will automatically convert images to WBMP, but you should never assume that this will always be the case. To speed things up, some phones support the “localsrc” attribute, as transferring even the smallest image over a 9600 bps cellular data connection takes time. This is used to describe a locally stored icon, which is held on the phone, rather than being downloaded every time you need it.

Even with this limited selection of attributes you’ll need to be careful, as not every micro-browser supports every section of the tag. If you’re targeting Phone.com phones then you’ll be able to use the “localsrc” attribute. It’s one that you’ll find very useful, as it speeds up page rendering by using a local icon stored in the phone’s ROM rather than downloading it from the server over a slow wireless connection. Unfortunately Nokia phones don’t support this function, so you’ll always need to create a server copy of every image. Conversely the Nokia phones support the height and width descriptions, unlike Phone.com phones. And of course, there are phones that can’t handle graphics at all, so you’ll need to use the “alt” attribute if there’s important information in the image.

If you want to use the Phone.com library of image icons you’ll need to download the UP.SDK from the web. This is a fully featured WML development and test tool that you can use to create your WML pages. However, it’s the documentation you’ll really want to get your hands on. This is in the form of several sets of HTML pages, amongst them an excellent WML reference that includes a list of all the available phone icons – along with pictures showing you just what your users are going to see.

So what does this mean to you?

You’ll need to think very carefully how you create images for your decks. Certainly it’s a good idea to use icons that are built into the Phone.com micro-browser, but you will need to create server-side copies of them for use in Nokia and Ericsson phones.

To use the following section of WML you’ll need to create a WBMP image of a right facing arrow. The new Nokia WAP Toolkit is an excellent environment for this, as not only will you be able to edit and create your WBMP arrow, you’ll also be able to write and test your WML code.

This is a card that will display on any WAP phone, as a Nokia will download the WBMP image, whilst a Phone.com-based phone like Motorola’s P7389 will use the local icon. Any phones that don’t support WBMP graphics will use the simple ASCII art in the “alt” attribute.

Of course you can’t use WAP for animated images, but one feature of WML may help. This is the timer. By using the “ontimer” attribute of any card you can force a deck to load a specific card after a set amount of time. You can only have one timer per card, but several timed cards in sequence could give you quite a useful tool for creating animations, switching between WBMP images or local icons. Unfortunately you can’t create a loop effect, so anything you want to do will have to be a sequence of cards. Just remember not to create too large a deck!

So how do you use the WML timer? The following snippet of code is a simple two card timer driven deck. The first card initialises a 5 second timer – the value of the timer is calculated in units of 0.1 seconds, so a value of 50 is equivalent to 5 seconds – and displays a text message. The second card then displays another message.

There’s a lot you can do using the timer in conjunction with “do” blocks. You can create decks that will jump to a default page after a short wait for a user to make a selection, or just give your WML site a simple graphical entry point.

Creating WAP sites is an interesting exercise in creating compact code, and simple user interfaces. We’ve only just covered some of the features of this intriguing new technology – a technology still waiting for its killer application. So think hard about what information you want to see on a mobile phone - there’s every chance that your WAP site will be that missing killer app in the wireless Internet revolution…

WAP Development tools

The wireless Internet requires a whole new set of development tools. Where you may have used FrontPage or HomeSite to produce your web pages you’ll now find yourself working with any of several different WAP development environments. Luckily it won’t cost you a fortune to get a good WAP development tool, as the mobile phone manufacturers are giving them away! Just sign up to their developer programmes, and you can start downloading tools like Motorola’s ADK or the Nokia WAP Toolkit – which also come with excellent documentation.

A good WAP development tool will contain an editor, a debugger and a phone simulator. You can use the editor to create your WML, and then test it with the debugger and the phone. Some tools will even simulate WAP Gateways, so you can test your WAP sites as if they were connecting over a wireless connection. You’ll also be able to use the phone simulator as a WAP browser, so you can see just what sites people are putting out there – without having to pay Cellnet or Orange for the privilege.

If you’re going to work at developing a WAP site you’re going to need to download virtually all the development packages available – which can keep you on like for many hours, as most of them are over 10MB, with Motorola’s ADK clocking in at over 20MB! Whilst you may use just one tool to create your WML decks, you’ll need to use them all to test your pages, as no two WAP phones display pages the same way. In fact, they may even support different subsets of WML…