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. &quot; Quotation Mark &apos; Apostrophe &amp; Ampersand &lt; less than &gt; greater than &nbsp; non-breaking space &shy; "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