Document Type Definition DTD

1
Document Type Definition (DTD)

• WML has its own DTD which is referred to by WML
  browsers for rules about how to display data
  (i.e. what the tags in WML do).
• The DTDs used to define WML are located at
  http//www.wapforum.org/DTD/
• If a mobile device is said to be WAP-capable,
  this means it has a piece of software loaded onto
  it (known as a micro-browser) that understands
  how to handle the entities in the given WML DTD.

2
The Prolog

• A prolog consists of two lines of code the XML
  declaration (used to define the XML version)
• and the document type declaration (a pointer to
  the documents DTD).
• Example ltxml version'1.0'gt lt!DOCTYPE wml PUBLIC
  "-//WAPFORUM//DTD WML 1.1//EN" "http//www.wapforu
  m.org/DTD/wml_1.1.xml"gt
• Following the prolog, every XML document contains
  a single element that contains all other
  sub-elements and entities.
• Like HTML, elements are bracketed by the ltgt and
  lt/gt characters (but more strictly so).

3
Decks and Cards

• WML documents are called decks.
• Each deck (document) contains one or more cards,
  this is what users generally see as a page on
  their mobile.
• Just as a Web browser can navigate from one page
  to another, the micro-browser can navigate from
  one card to another.

4
Decks and Cards

• Users navigate between cards depending on
  conditions that you define.
• The deck gets sent to the mobile as a single
  document.

5
A Single Card Deck

• lt?xml version'1.0'?gt
• lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.1//EN" "http//www.wapforum.org/DTD/wml_1.1.xml"
  gt
• ltwmlgt
• ltcard id"home" title"Home page"gt
• ltpgtHello Worldlt/pgt
• lt/cardgt
• lt/wmlgt
• WML is CASE SenSiTive so make sure all tags are
  in lower case.

6
Elements and Attributes

• WML uses code elements to instruct the browser,
  the elements can have various attributes or
  features defined.
• Elements and attributes let you specify page and
  interface settings.
• E.g. the do element and the type attribute.

7
Using the ltdogt element to navigate between two or
more cards

• ltwmlgt
• ltcard id"home" title"Home page"gt
• ltdo type"options" label"Next card"gt
• ltgo href"card2"/gtlt/dogt
• ltpgtHello Worldlt/pgt
• lt/cardgt
• ltcard id"card2" title"Card 2"gt
• ltpgtPut what you want herelt/pgt
• lt/cardgt
• lt/wmlgt

8
What does "do" do? The "type" attribute

• Every mobile has buttons which are used for tasks
  like initiating calls, ending conversations, or
  navigating through screen menus.
• Each of these keys has a function. When pressed
  they start a process that runs behind the scenes.
• When a user accepts a call, (s)he invokes the
  ACCEPT mechanism, when (s)he deletes an entry
  from a phone book, (s)he uses the DELETE
  mechanism and so on.
• WML provides the ltdogt element to access these
  events. The ltdogt element comes with a "type"
  attribute, which tells the phone which process to
  start.

9
The "type" attribute

• The important values of the "type" attribute
  areACCEPT - invokes the "accept/OK"
  mechanismDELETE - invokes the "delete"
  mechanismPREV - invokes the "go back"
  mechanismHELP - invokes the help mechanism
• Note Context is important here what page is
  the user on? How do the different phones respond
  to these functions?

10
Name and Label attributes

• In addition to the "type" attribute, ltdogt also
  comes with both "name" and "label" attributes
• the label specifies a text string to be displayed
  on the display device
• the name is a unique identifier for that
  particular instance of the ltdogt element.

11
Task Elements

• Triggering an event is only half the story. WML
  also provides a number of "task elements" that
  allow you to define what happens once the event
  has been identified. These task elements
  includeltgo/gt - load another card or
  deckltprev/gt - go to the previous deck or
  cardltnoop/gt - do nothingltrefresh/gt - refresh
  the current deck or cardNote that all of these
  are "empty" tags, and need to be explicitly
  closed with a forward slash.
• http//www.softsteel.co.uk/tutorials/wmltut/les8.h
  tml (info about do element)

12
In code

• ltwmlgt
• ltcard id"home" title"Home page"gt
• ltdo type"options" label"Next card"gt
• ltgo href"card2"/gtlt/dogt
• ltpgtHello Worldlt/pgtlt/cardgt
• ltcard id"card2" title"Card 2"gt
• ltdo type"prev" label"Home page"gt
• ltgo href"home"/gtlt/dogt
• ltpgtPut what you want herelt/pgt
• lt/cardgt
• lt/wmlgt

13
Formatting Text

• ltpgtParagraphlt/pgt
• ltbr/gtLine Break
• ltemgtemphasized textlt/emgt
• ltstronggtstrong textlt/stronggt
• ltbgtbold textlt/bgt
• ltigtitalic textlt/igt
• ltugtunderlined textlt/ugt
• ltbiggtbig textlt/biggt
• ltsmallgtsmall textlt/smallgt

14
Inserting a third card

• ltdo type"options" label"Formatting"gt
• ltgo href"formatting"/gt lt/dogt
• _____________________________________________
• ltcard id"formatting"gt ltpgt
• ltemgtemphasized textlt/emgtltbr/gt
• ltstronggtstrong textlt/stronggtltbr/gt
• ltbgtbold textlt/bgtltbr/gt
• ltigtitalic textlt/igtltbr/gt
• ltugtunderlined textlt/ugtltbr/gt
• ltbiggtbig textlt/biggtltbr/gt
• ltsmallgtsmall textlt/smallgtlt/pgt
• lt/cardgt

15
All tags must be closed

• E.g. ltpgt must end with lt/pgt or it wont display
  (this is how WML is stricter than HTML).
• Also not that lt/Pgt will only close an uppercase
  ltPgt and will NOT close a tag that opened in lower
  case e.g. ltpgt
• Single tags such as the line break tag ltbr/gt must
  have the closing forward slash or they just wont
  work properly.

16
Navigating outside the deck

• ltdo type"options" label"BBC WAP"gt
• ltgo href"http//www.bbc.co.uk/wap"/gt
• lt/dogt
• Sometimes you may only want one card in a deck
  and instead insert hyperlinks between them.
• This is because some phones can only handle a
  deck of just over 1k in length. So not too big!
• However everything you can squash in one page
  saves the user downloading another page.

17
Task

• Produce a mini mobile CV with at least four cards
  (Personal details, Qualifications, Experience,
  Hobbies).
• Think about how the text appears on a small
  screen and what kind of writing is appropriate
  for these devices.
• Consider navigation issues how will the user
  navigate backwards, forwards and in-between your
  pages?
• Consider layout issues how is information best
  displayed on the small screen?

18
Gallery of friends

• Save your CV project somewhere safe
• Now open a new WML 1.3 project and save it in a
  folder called "friends".

19
Images

• Were going to look at how to add a Wireless
  Bitmap format (WBMP) to a card for display on a
  monochrome mobile device.
• Most older WAP phones (which means most WAP
  phones) can only display limited 2 colour images.
• Open Adobe Photoshop.

20
Make a small image

• WBMPs are monochrome

21
Saving as a WBMP

• Simply select Save for Web from the File menu and
  choose the WBMP option

22
Onevent "splash screen" example

• ltonevent type"ontimer"gt         ltgo
  href"menu"/gt   lt/oneventgt 
• lttimer value"40"/gt
• Return to your new WML document
• Insert the above just after an opening card tag.
• When the timer counts down from 40 to 0 the
  user will automatically be sent to the card
  called "menu".
• (We have to create a card called "menu" of course
  or change the word "menu" to an existing card
  in your CV).

23
Inserting WBMPs into a card

• Work out where you need to insert the below to
  make an image splash screen.
• ltp align"center"gtltimg src"images/smile.wbmp"
  alt"Welcome Image"/gtlt/pgt
• Note images take time to load on low bandwidth
  phones so they should be small, have sufficient
  time to load and MUST have alt text included.

24
Templates

• In WML, after the Prolog and the opening ltwmlgt
  tag, template information can be inserted.
• In the template you insert rules that are
  designed to apply to all the cards.
• E.g. If you want to have the same ltdogt function
  on every card in your deck, you can set this
  information just once here, rather than in each
  individual card.
• You can override the instructions set in the
  template in an individual card if you wish to
  make an exception.

25
Helping navigation

• The following example just given instructs the
  micro-browser that every time a user presses
  their option button on the phone, theyre to be
  given the option to return to the main menu.

26
Example template

• Insert just after the opening ltwmlgt tag
• lttemplategt
• ltdo type"next" label"Menu"gtltgo
  href"menu"/gtlt/dogt
• lt/templategt
• In a nutshell, the lttemplategt tag defines a
  template for all the cards in a deck. The code in
  the lttemplategt tag is added to each card in the
  deck. 
• You can specify only one lttemplategt tag for each
  deck. 
• This tag can only contain ltdogt and ltoneventgt
  tags. 

27
Over-riding the template

• Occasionally you dont want exactly the same
  navigation option on each page.
• It would seem pointless on the splash screen as
  the ontimer command is automatically forwarding
  you to the main menu anyway.
• From the main menu theres no point allowing
  the user to select "main menu" either.

28
Override!

• Inserting ltdo type"next"gtltnoop/gtlt/dogt after the
  ontimer code for the splash screen means that
  noop (no operation i.e. nothing) occurs when
  the user selects options.
• Inserting ltdo type"next" label"Splash
  screen"gtltgo href"welcome"/gtlt/dogt after the open
  card tag on the image menu card this means the
  user can go back to the splash screen instead.

29
Navigation Links

• A simple way to aid navigation for the user is to
  include navigation tools as links within the
  decks also.
• Inserting
• ltpgt
• ltbr/gt
• lta href"menu"gtMain Menult/agt
• lt/pgt
• Helps the user get back to the menu easily.
  Despite the technical simplicity, the importance
  of simple navigation aids cannot be
  underestimated in a mobile environment

30
Create a menu card

• ltcard id"menu" title"Image Menu"gt
• ltpgtltbiggtltbgtMy imaginary friendslt/bgtlt/biggtltbr/gtlt/pgt
  
• ltpgtlta href"friend1"gtBobby Brownlt/agtltbr/gt
• lta href"friend2"gtDolly Mixturelt/agtltbr/gt
• lta href"friend3"gtAli Rashidlt/agtlt/pgt
• lt/cardgt

31

• The cards to which the menu links to might look
  like this
• ltcard id"friend1" title"Bob Brown"gt
• ltp align"center"gtltimg src"images/bob.wbmp"
  alt"Image of Bob Brown"/gtlt/pgt
• lt/cardgt
• ltcard id"friend2" title"Dolly Mixture "gt
• ltp align"center"gtltimg src"images/dolly.wbmp"
  alt"Image of Dolly Mixture "/gtlt/pgt
• lt/cardgt
• ltcard id"friend3" title"Ali Rashid"gt
• ltp align"center"gtltimg src"images/ali.wbmp"
  alt"Image of Ali Rashid"/gtlt/pgt
• lt/cardgt

32
The next two slides contain full example code for
the previous slides in todays lecture
33

• lt?xml version"1.0" encoding"utf-8"?gt lt!DOCTYPE
  wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
  "http//www.wapforum.org/DTD/wml13.dtd"gt
• ltwmlgt
• lttemplategt
• ltdo type"next" label"Image menu"gtltgo
  href"menu"/gtlt/dogt
• lt/templategt
• ltcard id"welcome" title"Welcome!"gt
• ltonevent type"ontimer"gt ltgo href"menu"/gt
  lt/oneventgt lttimer value"40"/gt
• ltdo type"next"gtltnoop/gtlt/dogt
• ltp align"center"gtltimg src"images/smile.wbmp"
  alt"Welcome Image"/gtlt/pgt
• lt/cardgt
• ltcard id"menu" title"Image Menu"gt
• ltdo type"next" label"Splash screen"gtltgo
  href"welcome"/gtlt/dogt
• ltpgtltbiggtltbgtMy imaginary friendslt/bgtlt/biggtltbr/gtlt/p
  gt
• ltpgtlta href"friend1"gtBob Brownlt/agtltbr/gt
• lta href"friend2"gtDolly Mixturelt/agtltbr/gt
• lta href"friend3"gtAli Rashidlt/agtlt/pgt

34

• ltcard id"friend1" title"Bob Brown"gt
• ltp align"center"gtltimg src"images/bob.wbmp"
  alt"Image of Bob Brown"/gtlt/pgt
• ltpgtltbr/gt
• lta href"menu"gtMain Menult/agtlt/pgtlt/cardgt
• ltcard id"friend2" title"Dolly Mixture"gt
• ltp align"center"gtltimg src"images/dolly.wbmp"
  alt"Image of Dolly Mixture "/gtlt/pgt
• ltpgtltbr/gt
• lta href"menu"gtMain Menult/agtlt/pgtlt/cardgt
• ltcard id"friend3" title"Ali Rashid"gt
• ltp align"center"gtltimg src"images/ali.wbmp"
  alt"Image of Ali Rashid"/gtlt/pgt
• ltpgtltbr/gt
• lta href"menu"gtMain Menult/agtlt/pgtlt/cardgt
• lt/wmlgt

35
Further Reading

• WML and WAP
• http//www.w3schools.com/wap/
• http//www.wirelessdevnet.com/channels/wap/
• http//www.wapforum.org
• http//www.softsteel.co.uk/tutorials/wmltut/les8.h
  tml
• Get reading and developing your skills further.

36
In preparation for next lesson

• Please attempt to log on to blackboard and let me
  know if you encounter any problems
• Post a hello on the message board
• Post a link to one useful resource you have come
  across on the web related to mobile technology

37
For next week

• Download and install a couple of different mobile
  simulators for the Nokia kit.
• Produce a small WBMP image gallery, optimised for
  mobile device navigation. (complete Gallery of
  friends)
• Test it on at least three phones emulators (note
  about gateway).
• Read on there are countless WML resources
  available from a simple Google search.
• Investigate WMLScript

38
WML User Input and Variables

• And a brief introduction to WMLScript
• David Robison University of Bradford

39
Rules of thumb (no pun intended)

• Its currently harder to input data on a handheld
  device than on a PC so remember the following
• Enable users to select an item rather than type
  it wherever possible
• Create reasonable defaults for both selected and
  entered data
• REMEMBER previous input
• Constrain input and restrict the kinds of mistake
  users can make
• Embed Helper characters (e.g. Input Leeds
  landline 0113 _______ )

40
Other help in input

• Using application in conjunction with the WEB
  (e.g. the user could enter bank info, and profile
  online then access the data via the mobile device
  rather than have to type it all in again). This
  only works if your users have Web access.
• Taking data from the device e.g. header data,
  phone number etc.
• Provide more than one possible input method (this
  is also true of navigation)

41
Remember User in Context
42
In code Input Fields

• ltwmlgt
• ltcard title"Input"gt
• ltpgt Name ltinput name"Name" size"15"/gt
• ltbr/gt Age ltinput name"Age" size"15"
  format"N"/gtltbr/gt
• Sex ltinput name"Sex" size"15"/gt lt/pgt
• lt/cardgt
• lt/wmlgt

43
Select Item from Lists

• ltwmlgt
• ltcard title"Selectable List 1"gt
• ltpgt
• ltselectgt
• ltoption value"htm"gtHTML Tutoriallt/optiongt
• ltoption value"xml"gtXML Tutoriallt/optiongt
• ltoption value"wap"gtWAP Tutoriallt/optiongt
  lt/selectgt
• lt/pgt
• lt/cardgt
• lt/wmlgt

44
More than one option

• ltwmlgt
• ltcard title"Selectable List 2"gt
• ltpgt
• ltselect multiple"true"gt
• ltoption value"htm"gtHTML Tutoriallt/optiongt
  ltoption value"xml"gtXML Tutoriallt/optiongt ltoption
  value"wap"gtWAP Tutoriallt/optiongt
• lt/selectgt
• lt/pgt lt/cardgt
• lt/wmlgt

45
Input Element

• ltcard idinput titleInput Screengt
• ltpgtWhat's your favourite name?
• ltinput type"text" namename" /gt
• lt/pgt
• ltpgtChoose a password
• ltinput type"password name"password" /gt
• lt/pgt
• ltpgt
• lta hrefwelcomegtEnterlt/agt
• lt/pgt
• lt/cardgt

46
Variables

• ltcard id"welcome" title"Welcome!"gt
• ltpgt
• ltbiggtWelcome (name)lt/biggt
• ltbr /gt
• lt/pgt
• ltpgt
• You've chosen ltbgt (password) lt/bgt as your
  password.
• lt/pgt
• lt/cardgt

47
Restricted Input (the users friend)

• The format attribute contains a number of legal
  codes (also known as format control characters)
  that define the restriction of characters for an
  input field.
• ltInput typetext format5a namecode /gt
• Limits to five letters in lower case.

48
Format codes

• A Defines entry of uppercase letter (symbol or
  punctuation character)
• a Lowercase
• M Defaults to uppercase but allows any
  character
• m Defaults to lowercase but allows any
  character
• N Requires numbers 0-9
• 5 (or any number) Defines the number of format
  codes to apply (see previous example)
• / Placed before a character, causes this
  character to appear in the input field
• is a wildcard (e.g. N would require a number
  followed by anything)

49
Combinations

• Format NNN\-AAAA

50
Select Single item from list

• ltwmlgt
• ltcard title"Selectable List 1"gt
• ltpgt
• ltselect namesectiongt
• ltoption value"htm"gtHTML Tutoriallt/optiongt
• ltoption value"xml"gtXML Tutoriallt/optiongt
• ltoption value"wap"gtWAP Tutoriallt/optiongt
  lt/selectgt
• lt/pgt
• lt/cardgt
• lt/wmlgt

51
More than one option

• ltwmlgt
• ltcard title"Selectable List 2"gt
• ltpgt
• ltselect multiple"true"gt
• ltoption onpicknext value"htm"gtHTML
  Tutoriallt/optiongt
• ltoption onpicknext value"xml"gtXML
  Tutoriallt/optiongt
• ltoption onpicknext value"wml"gtWML
  Tutoriallt/optiongt
• lt/selectgt
• lt/pgt
• lt/cardgt
• lt/wmlgt

52
Task

• Design a sensible user registration form
• Make it as easy to use and navigate as possible
• Fields may include name, age, password, phone
  number, post or Zip code, region (from a finite
  list)
• Display the information back to the user for
  their confirmation in a presentable fashion.
  Consider small screen implications carefully.

53
Question

• How would you enable a user to select an avatar
  WBMP image and display it in their profile
  listing card?

54
Limitations of WML

• WML alone does not provide much ability to
  manipulate user data. It cannot
• store or retrieve it reliably (this would require
  a dynamic site, integrated with a server-side
  database)
• Perform client-side calculations and manipulation
  of data (this could be provided by the
  complimentary language WMLScript)

55
WMLScript Client-Side

• Limited scripting language (limited for largely
  the same reasons as WML)
• Why do client-side scripting at all when the
  devices are limited why not just use a
  database?
• Database driven services have many advantages but
  client-side scripting such as WMLScript has the
  advantage of not needing to repeatedly connect to
  the Internet in order to work.

56
What is WMLScript?

• Based on ECMAScript (created by European Computer
  Manufacturers Association)
• Uses many elements of JavaScript 1.1.
• Whereas JavaScript sits inside a HTML page,
  WMLScript is called from a separate file e.g.
• ltgo hrefvalidate.wmlscheckpass() /gt

57
Your development environment

• Must be set up to support WMLScript MIME types
• Multipurpose Internet Mail Extension specifies
  format of data (header info from every file, in
  association with file type) e.g.
• File Type MIME Type
• HTML text/html GIF image/gif JPG
  image/jpg

58
To check correct MIME types are set

• Go to My Computer
• Select Tools gt Folder Options
• Click the File Types tab
• Scroll down and check for WML and WMLScript
• If theyre not there, click New and type .wml and
  or .wmls respectively.

59
Open WMLScript file in Nokia Kit

• extern function checkpass()
• var password WMLBrowser.getVar("password")
• if (String.length(password) ! 6)
• WMLBrowser.go("login.wmlbadpass")
• else if (String.length(password) 6)
• WMLBrowser.go("menu.wmlmenu")

60
Where to go if stuck

• These slides provided are not comprehensive and
  you should seek further online tutorials and
  guides.
• http//w3schools.com/wap has a very good guide
  which you should work through (it will answer
  questions you may have about these slides)
• Also http//w3schools.com/wmlscript has a guide
  to WMLScript
• Also remember to post queries on Blackboard