Mobile Services - Sheffield Hallam University

advertisement
Sheffield Hallam University
School of Computing and Management Sciences
Mobile Services
Wireless Application Protocol (WAP) Tutorial
Requirements
For this tutorial you will need your username and account details for the universitty web
server. You don't need a WAP-enabled phone to view the site, but you might want to try it out
if you have one!
Overview
We shall create a small WAP website that can be viewed either with a WAP emulator or a
WAP-enabled mobile phone.
Whereas browsers use HTML to present information on a computer screen, Wireless Markup
Language (WML) can be used to present information on a range of devices that have much
smaller integrated displays such as mobile phones. The files are text based and have the
suffix '*.wml'. We shall use MS Notepad, but any text editor (most word processors) will do.
Once we have created the files, they can then be uploaded to your web space with a ftp
program such as WS FTP.
WapForum.org is the place to look for the most up-to-date information on the WML standard.
Elements
Just like XML (eXtensible Markup Language), 'elements' are used to structure the text to be
presented. Also, like HTML, opening and closing tags help define where the reference to the
text begins and ends. It is important to note that WML is case sensitive, all tags being
lowercase.
<tag>Material</tag>
<tag/>
<tag attribute="value1">Material</tag>
<tag attribute="value"/>
Decks and Cards
The conceptual view of a WAP site is represented by the terms 'deck' and 'card'. A deck can
comprise one or many cards. A WAP browser is prepared by downloading a site, one deck at
a time, so it is important to consider the size of the deck (that is how many separate cards
does it contain) when we are designing a site.
Each deck is referenced by the <wml> and </wml> tags, whereas each card is defined by
the <card id = ' '> and </card> tags.
Cards are similar to hyperlinks in HTML, except they refer to a portion of the wml that a user
can navigate between. It is also possible to link to a card in another deck, as well as the
currently loaded deck.
<card id="cardname" title="Title">
<p>
Wow this is easy
</p>
</card>
Page 1 of 4
07/02/2001
DIY WAP Site
Sheffield Hallam University
School of Computing and Management Sciences
Validity
For our WAP site to be 'valid', we must include the following lines at the beginning of each
separate page:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml_1.2.xml">
Extra Information
Don't forget the search engines! We will need them if the world is going to be bowled over by
our WAP skills, so get the 'meta-tags' into the header section as follows:
<head>
<meta name="keyword" content="wap"/>
<meta name="desc" content="my first wap page"/>
<meta name="author" content="The WAP Master"/>
</head>
Make sure that you put this before the <wml> tag.
Comments
Comments are not displayed in the browser.
<!--This is a comment-->
Cards
A Card is the part of a Deck where the user navigates. We jump from one <card> to another
- which may reside in the same deck (in the same file) or somewhere else.
<card id="cardid" title="Card Title">
<p>
Text on this card
</p>
</card>
id: card id, used as jump target (see Links)
title: A card title
Links
Links may be given in two ways, but the <a> tag is preferred.
<anchor>Go to URL<go href="url.wml"/></anchor>
<anchor>Go to URL<go href="http://wml.domain.de/url.wml"/></anchor>
<a accesskey="1" href="#card">Go to card</a>
<a href="http://wml.domain.de/deck.wml/#card">Go to card</a>
href: Target; either a deck or a card; a card is prefixed by #, the target can either be given
relative or absolute. If no card is given, the first card of a deck is linked. This adresss is called
URL (Uniform Resource Locator).
Attributes
Many elements (<a>, <input>, ...) can be attributed with positioning aids (for the order
in which a Tab key press traverses them or for a shortcut key directly selecting an element).
<a tabindex="1" accesskey="1" href="#card1"/>
Page 2 of 4
07/02/2001
DIY WAP Site
Sheffield Hallam University
School of Computing and Management Sciences
tabindex: order of selection with tab key
accesskey: key shortcut
Text Masking
As with HTML special characters have to be masked to be displayed correctly.
" Quotation Mark
' Apostrophe
& Ampersand
< less than
> greater than
  non-breaking space
­ "soft hyphen", a conditional hyphenation
Now for the fun bit! Copy the code below into a text editor like Notepad or PFE and name the
file 'testpage1.wml'.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id='aaa'>
<p>eShare Deal UK Menu</p>
<p>FTSE Top 100 down 13 points</p>
<p>Go to <a href='#bbb'>sell</a> to sell your shares</p>
<p>Go to <a href='#ccc'>buy</a> to buy more shares</p>
</card>
<card id='bbb'>
<p>eShare Deal UK Selling</p>
<p>You wimp. You will never get rich!</p>
<p>Go to <a href='#aaa'>enquire</a></p>
<p>Go to <a href='#ccc'>buy</a></p>
</card>
<card id='ccc'>
<p>eShare Deal UK Buying</p>
<p>Feeling lucky?</p>
<p>Go to <a href='#aaa'>enquire</a></p>
<p>Go to <a href='#bbb'>sell</a></p>
</card>
</wml>
FTP the file onto your web server and access a WAP emulator. You will find one at:
http://www.gelon.net/about/wapalizer.html
Even if your phone is WAP-enabled, it is much cheaper to debug it using an emulator!
Type the URL of your homespace into the emulator and try out your first WAP site. Look at
the code and change some of the text to see what happens. Don't forget to ftp your edited
files back onto the server before you view the WAP site again.
Once you have the site working, you may wish to try it on a WAP-enabled phone. You will
need to prefix your URL with 'wsp' instead of 'http', e.g.
Page 3 of 4
07/02/2001
DIY WAP Site
Sheffield Hallam University
School of Computing and Management Sciences
wsp://pertinax.cms.shu.ac.uk/yourhomespace/testpage.wml
rather than,
http://pertinax.cms.shu.ac.uk/yourhomespace/testpage.wml
Page 4 of 4
07/02/2001
DIY WAP Site
Download