Mobile Markup Languages

1
Mobile Markup Languages

• An introduction to
• The need for Mobile Markup Languages WAP
• The Basics of WAP, WML XHTML-MP
• You have successfully learnt this if you can
• List the key features of WAP WML
• Compare WML XHTML
• Evaluate the use of CSS
• Why does WML use cards?

2
Wireless Access

• Why access Web pages from a mobile?
• Frequently updated information
• e.g. stock prices
• Travellers information
• e.g. weather, traffic information, timetables
• To request services
• e.g. directions and maps, addresses, menus

3
What's the Problem?

• Small displays
• (e.g. Nokia Series 20 phones are 84 wide x 48
  tall,
• Series 60 phones have 176 x 208 pixel resolution)
• Grayscale or monochrome images
• Limited processing capability
• Low bandwidth (14.4 kbps)
• High latency (delay from transmission to receipt)

4
Wireless Application Protocol

• What is WAP?
• A protocol like HTTP for transferring data
  reliably and efficiently over wireless.
• Use binary rather than text format (why?)
• How is WAP Used?
• WAP servers - gateways between HTTP servers on
  the Internet and WAP-enabled devices.
• Servers may translate HTML to WML
• May be poor quality.

5
WAP in Action

• Phone uses Wireless Transport Layer Security
  (WTLS)
• Create encrypted URL request with subscriber's id
• Send to a WAP gateway server,
• Gateway converts to a HTTP request to Web server.
  
• Note The link between 2 secure connections is a
  risk.
• Web Server returns the relevant information
• WAP gateway removes unnecessary headers,
  translates document to binary, passes to the
  phone.

6
Wireless Markup Language

• What is WML?
• A HTML-like language using XML
• Structure of a WML document
• Document Type Definition (DTD)
• 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
• Root Element
• ltwmlgt ... lt/wmlgt tags.
• Containing a deck related cards ltcardgt ...
  lt/cardgt
• Downloaded in a single page

7
Cards

• ltwmlgt
• ltcard id"Card_1" title"Welcome!"gt
• ltpgt
• Hello WML World!
• lt/pgt
• lt/cardgt
• lt/wmlgt
• The id attribute is a bookmark
• a target for a link in another card in the deck.
• up to 18 characters, unique in the deck
• The title is a name for the card to display.
• No limit on the number of cards in a deck

8
Example WML page Card 1
Use value of variable

• ltwmlgt
• ltcard id"home_card" title"Welcome!"gt
• ltp align"center"gt
• ltimg src"logo.wbmp" alt"logo" /gtltbr/gt
• ltbiggtA(done) Screenlt/biggtltbr/gt
• ltanchorgt
• ltgo href"maps"gt
• ltsetvar name"done" value"n old"/gt
• lt/gogtView Maps
• lt/anchorgt
• ltdo type"options" label"Decision"gt
• ltgo href"decision"gt
• lt/dogt
• lt/pgt
• lt/cardgt

Assignment
Menu / softkey
9
Example WML page Card 2

• ltcard id"maps" title"Map Links"gt
• ltpgtChoose a map ...
• ltselect name"maptype" value"town"gt
• ltoption value"street"gtstreet maplt/optiongt
• ltoption value"town"gttown maplt/optiongt
• lt/selectgt
• ltbr/gt
• lta href"home_card"gtHomelt/agt
• lt/pgt
• lt/cardgt

10
Example WML page Card 3

• ltcard id"decision" title"Your choice"gt
• ltpgtchoice (maptype)lt/pgt
• ltdo type"accept" label"Home"gt
• ltgo href"home_card"gt
• lt/dogt
• lt/cardgt
• lt/wmlgt

Link
11
XHTML-Mobile Profile Head

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile 1.0//EN" "http//www.wapforum.org/DTD/xhtm
  l-mobile10.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en"gt
• ltheadgt lttitlegtFind a Filmlt/titlegt
• ltlink rel"stylesheet" href"style.css"
  type"text/css" /gt
• lt/headgt

Namespace XHTML
Relationship this is a link to a stylesheet
12
XHTML-Mobile Profile Body 1

• ltbodygt
• ltpgtltimg align"right" src"logo.gif" alt"logo"
  width"40" height"28"/gt
• ltbgtFilm Guidelt/bgt ltbr clear"all" /gt
• lttablegt
• lttr class"blue"gt
• lttdgt1 lta accesskey"1" href"src.html"gt
  Findlt/agtlt/tdgt
• lt/trgt
• lttrgt
• lttdgt2 lta accesskey"2" class"bluetext
  href"best.html"gtBestlt/agt
• lt/tdgt
• lt/trgt
• lt/tablegt

Use a class from the stylesheet
Shortcut to select the link
13
XHTML-Mobile Profile Body 2

• ltolgt
• ltligtlta accesskey"3" href"list.html"gtListlt/agtlt/
  ligt
• ltli class"blue"gtlta accesskey"4"
  class"bluetext" href"sites.html"gtSiteslt/agtlt/ligt
• lt/olgt
• lt/pgt
• lt/bodygt
• lt/htmlgt

Ordered List
14
Cascading Style Sheets (CSS)

• BODY color 006699
• font-family Arial, sans-serif
• background-color FFFFFF
• TD font-family Arial, sans-serif
• .bluetext color 006699
• .blue color 000000 background-color
  99CCFF

• Body bluish text over white background.
• Use specified font, or nearest match

• In a table cell use specified font or near match.

• Define a 'bluetext' style for colourable elements

• A style to make colourable elements (text, link)
  black on blue

A class
15
Meaning

• Body bluish text over white background.
• Use specified font, or nearest match
• In a table cell use specified font or near match.
  
• Define a 'bluetext' style for colourable elements
• Define a 'blue' style to turn a colourable
  element (text, link) to black (000000) on a
  bluish background.
• Note
• link may not respect the CSS property defined for
  it
• not all browsers support CSS

16
CSS Advantages

• Enhancement with backward compatibility
• Can be cached and reused across pages -
  consistency

17
CSS Disadvantages

• Limited browser support
• Some features may have no effect
• Size
• ltspan style"font-weight bold"gtboldlt/spangt
• has the same effect as
• ltbgtboldlt/bgt
• Shorter, saves bandwidth and works on all
  browsers.
• Separate files may be downloaded twice
• Slower rendering snaps to start when rendered

18
Ways of using CSS

• Separate file
• shareable save download, improve consistency
• In-file style
• quicker download, reuse across elements
• In-line
• quicker download, but must repeat in document

19
Example With Forms 1

• ltheadgt
• lttitlegtBuy ticketslt/titlegt
• ltlink rel"stylesheet" href"style.css"
  type"text/css"/gt
• lt/headgt

20
Forms 2
What does this mean?
What does this mean?
What does this mean?
What does this mean?

• ltbodygt
• ltform action"buyerformreceiver.html"
  method"get"gt
• ltpgtltbgtNumberlt/bgt
• ltinput type"text" name"howmany" value"3"
  format"2N" emptyok"false"/gtltbr/gt
• ltbgtDeliverylt/bgtltbr/gt
• ltinput type"radio" name"delivery"
  value"post" checked"checked"/gt
• Postltbr/gt
• ltinput type"radio" name"delivery"
  value"collect"/gt Collectltbr/gt

What does this mean?
What does this mean?
What does this mean?
What does this mean?
What does this mean?
21
Forms 3
What does this mean?
What does this mean?
What does this mean?
What does this mean?

• ltbgtExtraslt/bgtltbr/gt
• ltselect name"extras" multiple"multiple"gt
• ltoption value"popcorn
• selected"selected"gtPopcornlt/optiongt
• ltoption value"drink"gtDrinklt/optiongt
• ltoption value"programme"gtProgrammelt/optiongt
• lt/selectgt
• lt/pgt

22
Forms 4

• ltdiv class"centered"gt
• ltinput type"submit" value"Submit"/gt
• lt/divgt
• lt/formgt
• lt/bodygtlt/htmlgt

What does this mean?
23
Notes

• lt!DOCTYPE gt
• Important for validating code, not checked by
  browsers.
• format"2N" emptyok"false
• Browser extensions.
• 2N at most 2 numbers, NNN exactly 3 numbers
• accesskey
• Selection may be implemented differently

24
How it looks
2 ways of allowing multiple selections
Openwave Simulator
Internet Explorer
25
Incompatibility

• Relatively new technology
• New standards
• New browser software
• Typical problems with browsers
• Poor or no CSS support
• No table support
• Cell borders always drawn around table cells
• Images shown centered or on a line of their own
• Hyperlinks shown on a line of their own
• No support for the accesskey attribute
• Forms (combo boxes, radio buttons and input
  fields)
• Using a secondary screen to capture input

26
Avoiding incompatibility

• Use basic features
• Use features that degrade gracefully
• Dont rely on CSS
• Test on different browsers

27
Developing for Mobiles

• Write with editor
• Check with normal browser
• Not understand WML
• Checks basic formatting and check spelling.
• Test on a simulator
• Publish on Web site
• Test with a WAP browser a simulator

28
Guidelines for Mobile Content

• Keep it simple!
• WAP browsers have limited capabilities
• Keep images small
• Use smallest palette possible (256 web-safe
  palette)
• Scale images to fit the device before delivery
• Keep the file size of your images as small as
  possible
• Always include alt text.
• The browser may not display images, or images may
  be corrupted by communications errors.

29
Guidelines for Mobile Content

• Keep your pages small.
• Wireless bandwidth is scarce big pages download
  slowly.
• Keep images small and suitable for low
  resolution.
• Test, test, test.
• Because WML XHTML-MP are relatively new, test
  compatibility with different browsers!

30
WML vs. XHTML-MP

• WML
• Multiple cards in single file, reduce downloads
• Designed for devices with small screens.
• Local variables to store data from the user
• Scripting language WMLScript
• Timers
• Soft keys
• Differs from HTML harder for designers

31
WML vs. XHTML-MP

• XHTML-MP
• Essentially HTML easier for designers
• Remove complex features
• frames, nested tables, complex forms scripting.
• XHTML basic few extra features
• Cascading style sheets
• No scripting language
• Non-standard extensions e.g. for validating
  textboxes
• Both can use WAP pictograms
• standard phone-stored image fast.