© 2004the University of Greenwich1 Introduction to WAP and WML Kevin McManus Material re-cycled from Gill Windall

© 2004the University of Greenwich2 What is WAP? WAP = Wireless Application Protocol WML = Wireless Markup Language A series of specifications for delivering and presenting information on mobile (wireless) devices. originally from the WAP Forum now the Open Mobile Alliance Ericsson, Nokia, Motorola, Microsoft, Visa, IBM etc. Why WAP & WML? because the standard Internet and Web technologies (e.g. TCP/IP, HTTP, HTML) don't work well for small mobile devices across wireless networks Isn't WAP & WML dead? not yet although it will be superseded before it ever achieves its full potential ‘Rumours of my death have been greatly exaggerated’ Mark Twain

© 2004the University of Greenwich3 Constraints of the wireless/mobile environment Low bandwidth compared to wired networks commonly 9600 bps or less – unless you have 3G Less reliable networks e.g. when your train goes into the tunnel Devices with little memory and processing power Small screens with low resolution Fiddly user interface devices Even greater diversity of devices than on the normal wired network So basically: data arrives slowly, if at all when it arrives the device hasn't the power to do much with it and anyway you can hardly see it and still less interact with it!

© 2004the University of Greenwich4 And yet... “By 2003 it is estimated that in Western Europe 20% (78 million people) of the population will be active WAP users and over 40% of the population will own WAP enabled phones” Carl Henrick Marcussen 2000 “1.5 billion mobile subscribers by 2006, 684 million of which will use microbrowser enabled services” Mackenzie & O’Loughlin 2000

© 2004the University of Greenwich5 Comparing WAP with the Web A simplistic view of the layers of Web technologies As a developer of websites and web applications which of these do you need to deal with? TCP/IP HTTP Browser layer HTML, JavaScript, PNG, etc. high level user oriented low level hardware oriented

Non-WAP "bearer" protocols IP, PPP, SMS, GSM, GPRS WTP (wireless transaction protocol), WTLS (Wireless Transaction Layer Security), WDP (Wireless Datagram Protocol) WSP (Wireless Session Protocol) - the WAP equivalent of HTTP - binary rather than text based WAE Wireless Application Environment: WML - equivalent of HTML WMLScript - equivalent of JavaScript WBMP - Wireless Bitmap - graphics format As a developer of WAP sites and applications which of these do you need to deal with?

© 2004the University of Greenwich7 Comparing WAP with the Web The low-level protocols involved in wireless/mobile communication are not part of WAP. WAP runs over them In ye olden times mobile phones in Europe, Asia and parts of the USA used GSM (Global System for Mobile Communications) pay for the time of connection GPRS (General Packet Radio Service) is an extension to GSM which offers higher bandwidth than GSM only pay for the data transferred was referred to as 3rd Generation wireless network technology 3G only recently arrived with high bandwidth (~2Mbit)

© 2004the University of Greenwich8 Comparing WAP with the Web WTP, WTLS, WDP are WAP protocols that that provide glue between the low level non-WAP protocols and the higher level WAP protocols. WSP (Wireless Session Protocol) is the WAP equivalent of HTTP. HTTP is text based (human readable) whereas WSP is binary why might that be? WML, WBMP & WMLScript versions of standard Web client technologies adapted for a wireless environment

© 2004the University of Greenwich9 How do WAP web pages get to a WAP device? HTTP server Page written in WML hello.wml WAP gateway performs compression and translation the wired web the wireless web Pages written in WML are served from a standard HTTP server - this can be, and often is a normal web server which also contains HTML pages, runs server side programs (e.g. ASP, PHP, JSP), communicates with databases etc.

© 2004the University of Greenwich10 WAP gateway Communication between the WAP gateway and the HTTP server uses normal web protocols (i.e. HTTP over TCP/IP). The WAP gateway may be run by the cell phone carrier or a third party gateway provider Its role is to: physically link the wired and wireless networks translate between web protocols (HTTP and TCP/IP) and WAP protocols (WSP, WTP etc) perform compression - WML is stored on the HTTP server in text format, the gateway converts it to binary format for transmission

© 2004the University of Greenwich11 WAP browser The WAP browser running on the mobile device (phone or PDA) works in a similar way as a normal web browser to format pages for display. Because mobile devices tend to be even more diverse than static ones the same page may get displayed in very different ways by different browsers on different devices e.g. the same page displayed in WinWAP (a PC based WAP browser) and on a simulator of a Nokia phone.

© 2004the University of Greenwich12 Thoughts What are the implications of the last point about the diversity of devices for the web developer? How could the web developer avoid duplicating content by having to provide a normal web version of pages and a WAP version?

© 2004the University of Greenwich13 Configuring an HTTP server to deliver WAP content For most servers this just means configuring it to recognise the file types used by WAP and to generate the appropriate MIME Types. ExtensionMeaningMIME Type.wmlWMLtext/vnd.wap.wml.wmlsWMLScripttext/vnd.wap.wmlscript.wbmpWBMP imageimage/vnd.wap.wbmp If you want to publish a WAP site via an ISP then you need to check with them whether the server is configured to deliver WAP content.

© 2004the University of Greenwich14 WML - Wireless Markup Language Smaller language than HTML adapted for: limited display and user input facilities low bandwidth limited device power - memory and processing An XML language all the usual XML syntax rules apply - attribute values in quotes, every tag must have a closing tag etc. It contains a subset of XHTML It contains some powerful things not found in XHTML variables user input validation templates DTD available from the Open Mobile Alliance

© 2004the University of Greenwich15 Structure of a WML document We're very used to the idea of each HTML document containing one HTML page WML has a different structure. Each WML document consists of a deck of cards normally only one card is displayed at a time. intro.wmlshop.wml

© 2004the University of Greenwich16 WML The whole deck is referred to by the URL of the WML page Decks are downloaded at one time saves the overhead of multiple requests for small documents. Individual cards can be referenced What are the implications of the above if a WML document was to contain a large number of cards?

© 2004the University of Greenwich17 WML document structure <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " information about the document (i.e. meta data) can go in the head the template can contain code that will appear on every card in the deck e.g. a "back" and "home" option cards contain the basic displayable content..... etc reference to the WML DTD

© 2004the University of Greenwich18 cms1.wml - a three card deck card 1 card 3 card 2

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " CMS school About our courses Contact details Undergraduate Postgraduate CMS School University of Greenwich Old Royal Naval College Greenwich Tel: 44(0) Fax: 44(0) cms1.wml template card 1 card 2 card 3

© 2004the University of Greenwich20 cms1.wml – card 1 CMS school About our courses Contact details note how the title is displayed in the browser id attribute allows the card to be referred to as #cms1 most content is contained inside a tag anchor tags work just like HTML what does ‘link’ do? where does this come from?

© 2004the University of Greenwich21 cms1.wml – card 2 Undergraduate Postgraduate In this example selection of an option has no effect but in a more realistic case it may trigger an action such as linking to another card or sending to a server side program the and elements offer user interactivity in a similar way as they do in HTML

© 2004the University of Greenwich22 cms1.wml – card 2 Because of the limited space on most WAP phones these elements are displayed rather clumsily On a larger device (e.g. a PDA) they may be displayed differently e.g. The other main user input element is There is no element

© 2004the University of Greenwich23 cms1.wml – card 3 CMS School University of Greenwich Old Royal Naval College Greenwich Tel: 44(0) Fax: 44(0) Notice how even a small amount of information such as this requires scrolling on a mobile phone

© 2004the University of Greenwich24 cms1.wml – template Templates add the same controls to all the cards in a deck commonly used to add "back" and "home" controls. Individual cards can override what they get from the template by a process known as shadowing we won't look at this. The element is used to add a control to a card the precise form of display is determined by the browser e.g. a button or a menu item as above. All elements have a type= attribute the most common are "prev" and "accept" A element contains a task (in this case ) that is executed when the element is activated. is a task element which returns to the previously displayed card other task elements include and

vareg.wml - user input and variables First name Family name Hello $(fname) $(lname)

vareg.wml – card 1 Will only accept input that conforms to the specified format format="aa*a" means two lower case letters followed by zero or more other lower case letters other format characters include A - any uppercase alphabetic characters N - any numeric character First name Family name up to 15 characters can be entered input data is assigned to a variable

© 2004the University of Greenwich27 vareg.wml – card 1 Another example of the element - this time of the general purpose type " accept " with the label " next " The task executed when the is activated this time is a task. tasks just cause the target href to be loaded - it may be another card in the same deck as in this example or another deck

© 2004the University of Greenwich28 vareg.wml – card 2 Variables in WML are shared by all cards in a deck The two variables fname and lname are set by the elements on card 1 When you want the value of a variable to be used then the most common form to use is $(variablename) Hello $(fname) $(lname)

© 2004the University of Greenwich29 Quick Questions What are the two most significant features shown in the previous example that have no direct equivalents in HTML. Why do you think they exist in WML and not HTML?

© 2004the University of Greenwich30 Sending data for server side processing HTML uses a to send data to server side programs data entered on to the form is automatically sent to the program named in the action= attribute sending to the program is triggered by the form button of type="submit" In WML there is no element. Sending to a server side program is often achieved by a task triggered by a element. Data for processing by the server side program can be specified using elements WML variable GET or POST name seen by the server side program

dating.wml

© 2004the University of Greenwich32 dating.wml Find a new love! WBMP image

© 2004the University of Greenwich33 dating.wml First name Family name

dating.wml Your gender female male Required gender male female

© 2004the University of Greenwich35 dating.wml Age Your best feature

dating.wml Well $(fname) we hope to find you a nice $(dateg) who loves your $(des) response from server side program Variables from other cards set up to be sent to the server

© 2004the University of Greenwich37 date.php <?php header("Content-type: text/vnd.wap.wml"); echo " \n"; ?> Sorry no-one suitable at the moment - try again later. output the appropriate MIME header POST or GET data as usual

© 2004the University of Greenwich38 Events WML has some event handling capabilities built-in to the language unlike HTML Events can be bound to a task (e.g. a task) using the element The effect of the code above is to request listungrad.php when the "Undergraduate" option is selected. There is also a shorthand for binding some events which we won't look at. task executed when the event occurs Undergraduate type of event being bound

© 2004the University of Greenwich39 timer.wml Special Offer Buy lots! 2.5 seconds later Set a timer for 2.5 seconds do this when the timer expires

© 2004the University of Greenwich40 WMLScript As we've seen WML allows you to do certain things that are not possible in HTML without resorting to the use of JavaScript or some other scripting language. However there are many things it can't do e.g. maths, detailed validation. In the wireless environment it is perhaps even more important to reduce trips to the server (e.g. to perform for validation) than on the normal web. (Why?) The answer is WMLScript!

© 2004the University of Greenwich41 WMLScript JavaScript (lovely though it is) is quite a large and complex language requires a lot of processing by the browser WMLScript is very similar to a cut down JavaScript There are many similarities (syntax, operators, loops, conditonals, etc.) but also a number of differences all WMScript code is declared in functions there are no global variables every WMLScript statement must end with a ";" WMLScript code is not interspersed with WML but is stored in a separate file (with extension.wmls) WMLScript is converted to a binary format (called bytecode) before transmission to the client WMLScript uses standard libraries to perform many tasks

© 2004the University of Greenwich42 dating2.wml Age Your best feature Sorry kid! call function validateAge() in file dating2.wmls

© 2004the University of Greenwich43 dating2.wmls extern function validateAge() { var theage = WMLBrowser.getVar("age"); if (theage < 18) { WMLBrowser.go("#tooyoung"); } else { WMLBrowser.go("#dat5"); } return; } if less than 18 go to the tooyoung card otherwise go to the next card

© 2004the University of Greenwich44 Creating sites that deliver both HTML and WML content Option 1 - Create separate content WML pages may be created using software such as Nokia WAP Toolkit or an add-in to Dreamweaver. WML pages HTML browser WML browser HTML pages Web server

© 2004the University of Greenwich45 Creating sites that deliver both HTML and WML content Option 2a - Automatically create WML from HTML content this could be a static converter HTML browser HTML pages WML pages WML browser converter

© 2004the University of Greenwich46 Creating sites that deliver both HTML and WML content Option 2b - Automatically create WML from HTML content with a dynamic converter HTML browser HTML pages WML browser converter

© 2004the University of Greenwich47 Creating sites that deliver both HTML and WML content Option 3 - Create both HTML and WML content from XML using XSLT XSLT for WML pages XML pages HTML browser WML browser XSLT for HTML pages XSLT processor

© 2004the University of Greenwich48 Quick Questions What advantages and disadvantages are there for the three options given above? Are there any other options?

© 2004the University of Greenwich49 XSLT to generate HTML or WML showbooks.php If browser wants HTML use toHTML.xsl If browser wants WML use toWML.xsl goodBooks.xml … toWML.xsl toHTML.xsl

© 2004the University of Greenwich50 Creating sites that deliver both HTML and WML content The user surfs to the URL of the ASP (showbooks.asp) The ASP loads the XML file containing the book details The ASP detects whether the browser wants HTML or WML and applies the appropriate stylesheet to format appropriately (e.g. no book cover image for the WML version) and transform the XML into the appropriate language

showbooks.php <?php error_reporting(15); $xh = xslt_create(); xslt_set_base($xh, 'file:///home/mk05/public_html/web/wap/book/'); if ( strpos($_SERVER['HTTP_ACCEPT'],'text/vnd.wap.wml') ) { if ( $result=xslt_process($xh, 'goodBooks.xml', 'toWML.xsl') ) { header('Content-type: text/vnd.wap.wml'); } } else { if ( $result=xslt_process($xh, 'goodBooks.xml', 'toHTML.xsl') ) { header('Content-type: text/html'); } if ($result) { echo " \n"; echo $result; } else { echo("There is an error in the XSL transformation...\n"); echo("\tError number: ". xslt_errno($xh). "\n"); echo("\tError string: ". xslt_error($xh). "\n"); exit; } xslt_free($xh); ?> If the client accepts WML use toWML.xsl otherwise use toHTML.xsl output the appropriate mime type

© 2004the University of Greenwich52 WAP applications Hunting for information rather than browsing! Services wanted when away from the office/home computer Potentially location specific (e.g. nearest cash machine, car park etc) Online banking Booking tickets - travel or entertainment Information services e.g. Share price news wap.ananova.com/business Weather Yellow pages Sports News Google wap.google.com

© 2004the University of Greenwich53 i-mode i-mode - an alternative to WAP? Developed in the USA but big in Japan launched by NTT DoCoMo in 1999 arrived in the UK in 2005 (O2) Approx 80% of the world's wireless Internet users are in Japan and approx 80% of them use i-mode rather than WAP! 45 million i-mode customers in Japan 5 million i-mode customers in the rest of the world

© 2004the University of Greenwich54 Differences between i-mode and WAP WAP is a set of protocols and languages i-mode is a complete wireless service provided by DoCoMo uses DoCoMo proprietary protocols and open standards WAP uses WML i-mode uses cHTML - compact HTML a subset of HTML with some extra features for mobile applications will render on standard browsers WAP services in Europe were circuit-switched until GPRS arrived i-mode was always based on a packet-switched system you're always connected and only pay for data downloaded WAP services are mostly business oriented i-mode services are mostly entertainment and games oriented i-mode mail interoperates with Until recently European devices were mostly black and white displays Japan led the way with early adoption of colour displays WAP never made much impact i-mode was an overnight success

© 2004the University of Greenwich55 Conclusions WAP, WML and WMLScript provide elegant alternatives to HTTP, HTML and JavaScript engineered to cope with the limitations of wireless technologies but tiny screens and fiddly keyboards will always be small and fiddly although this did not stop i-mode from catching on perhaps it was the lack of content on WAP or maybe it is a cultural thing Mobile technology is advancing rapidly high bandwidth, more memory, more processing power, larger, higher resolution colour displays Perhaps the age of WAP and i-mode is over and the WWW will arrive fully on mobile devices already seeing IE and Opera on mobile devices all we need is a decent (virtual) keyboard