Connecting to the Web Using Mobile Devices

1
Connecting to the Web Using Mobile Devices

• Representation and Management of Data on the Web

2
What are Mobile Devices?
3
Example Scenario
Hmm.. Harry Potter (5) costs 30.00 here
Harry Potter (5) Price 25.95 Copies in Stock 2
4
Characteristics of Mobile Devices

• Small screen
• Difficult to type in data
• Slow connection
• Small bandwidth
• Small memory
• Limited CPU
• Speech capability
• Unsecure line
• Devices are very different one from another

5
Statistics about Mobile Devices
Projected cellular subscribers
More handsets than PCs connected to the Internet
bythe end of 2003!
Projected Web handsets
Projected PCs connected to the Internet (Dataquest
10/98)
'putting the Internet in everyone's pocket'
6
Standards Evolution

• http//www.littlespringsdesign.com/design/xhtmlinf
  o.html

7
WAP Wireless Application Protocol
8
What is WAP?

• WAP is used to access services and information
• WAP is inherited from Internet standards
• WAP is for handheld devices such as mobile phones
  
• WAP is a protocol designed for micro browsers
• WAP enables the creating of web applications for
  mobile devices.
• WAP uses the mark-up language WML
• WML is defined as an XML 1.0 application

9
More about WAP

• Developed by the WAP Forum
• The WAP Forum represents over 90 of the global
  handset market
• Based on Internet standards (HTML, XML and
  TCP/IP)
• Consists of
• A WML language specification
• A WMLScript specification
• A Wireless Telephony Application Interface (WTAI)
  specification

10
What is a Micro Browser?

• A small piece of software that makes minimal
  demands on hardware, memory and CPU.
• Can display information written in a restricted
  mark-up language called WML.
• Can also interpret a reduced version of
  JavaScript called WMLScript.

11
Examples of WAP Use

• Checking train table information
• Ticket purchase
• Viewing traffic information
• Checking weather conditions
• Looking up stock values
• Looking up phone numbers
• Looking up addresses
• Looking up sport results

12
Architecture
13
Phone Actually Sends HTTP Request!!

• Observe that you phone is "sending" and HTTP
  request
• Request may be to any page
• Important to distinguish between requests
  originating from phone vs from browser.
• Solution Use User-Agent header

14
public class BookStoreServlet extends HttpServlet
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws
ServletException, IOException
String agent request.getHeader("User-Agent")
// you have to write the isMobilePhoneAgent
method if (isMobilePhoneAgent(agent))
RequestDispatcher dispatcher
getServletContext().getRequestDispatcher("Store.wm
l") dispatcher.forward(request,
response) ....
15
public class XSQLProcessorServlet extends
HttpServlet public void doGet(HttpServletReques
t request, HttpServletResponse
response) throws ServletException,
IOException String agent
request.getHeader("User-Agent") String
styleSheet "" if (isMobilePhoneAgent(agent))
styleSheet "phone-version.xsl"
else styleSheet "computer-version.xsl" ....

16
WML Wireless Markup Language
17
WML Basics

• Tag-based browsing language, which contains
• Text, images
• User input via forms
• Hyperlinks navigation support
• Based on XML

18
WML Basics (cont.)

• Screen views are split into cards
• Several cards can be put in a wml documents
• Navigation occurs between cards (in the same or
  different wml document)
• One card is display at a time!
• Note Several "pages" are downloaded at once

19
All Decks Must Contain

• Document prologue
• XML document type declaration
• ltWMLgt element
• Must contain one or more cards

lt?xml version"1.0?gt lt!DOCTYPE WML PUBLIC
"-//WAPFORUM//DTD WML 1.0//EN" "http//www.wapforu
m.org/DTD/wml.xml"gt ltWMLgt ... lt/WMLgt
20
Hello World Example

• 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"Card1" title"The dbi Course"gt
• ltpgt
• lt!-- Hello World example --gt
• Hello World
• lt/pgt
• lt/cardgt
• lt/wmlgt

21
Basic Tags

• ltwmlgt lt/wmlgt defines the beginning and the ending
  of the deck, like lthtmlgt lt/htmlgt
• ltcardgt lt/cardgt defines the beginning and the
  ending of a card

22
The Result on Different "Phones"
23
Seeing the Result

• The content type of a WML text is
  text/vnd.wap.wml
• You can send a created WML file with a correct
  content type by
• Using setContentType(text/vnd.wap.wml) in a
  servlet
• By configuring Tomcat to return the right content
  type for WML pages

24
Text Formats

• 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 titleText Formats"gt
• ltpgt normal, ltstronggtstronglt/stronggt,
• ltemgtemphasizedlt/emgt, ltbgtboldlt/bgt,
  ltigtitaliclt/igt,
• ltugtunderlinelt/ugt, ltbiggtbiglt/biggt and
• ltbiggtltbiggtvery biglt/biggtlt/biggtlt/pgt
• lt/cardgt
• lt/wmlgt

25
deckit
26
Tables

• 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 titleTable"gt
• ltpgt lttable columns"2"gt
• lttrgtltthgtltbgtNamelt/bgtlt/thgt
• ltthgtltbgtPhonelt/bgtlt/thgtlt/trgt
• lttrgtlttdgtBartlt/tdgtlttdgt123lt/tdgtlt/trgt
• lttrgtlttdgtLisalt/tdgtlttdgt321lt/tdgtlt/trgt
• lt/tablegtlt/pgt
• lt/cardgt
• lt/wmlgt

27
(No Transcript)
28
Anchors

• The ltanchorgt tag defines a link and what to do
  when a user chooses it
• Possible tasks go, prev, refresh
• Example
• ltanchorgtLogin page
• ltgo hreflogin.wml"/gt lt/anchorgt
• The ltagt tag always performs a "go" task
• lta hreflogin.wml"gtLogin pagelt/agt

29
Tasks

• The ltgogt task represents the action of switching
  to a new card
• The ltprevgt task represents the action of going
  back to the previous card
• The ltrefreshgt task refreshes the variables
  defined on the page
• The ltnoopgt task says that nothing should be done

30
Example

• 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 titleUsing A Tag"gt
• ltpgt
• lta hrefhello.wml"gtTo Hello Worldlt/agt
• lt/pgtlt/cardgt
• lt/wmlgt

31
Handling User Input

• Select lists to choose from a list of options
• Input fields to enter text or numbers
• Values are put into variables defined by the
  attribute key
• Values are available to all cards in the deck
• Values can be explicitly sent in an HTTP request
  for a different URL

32
Select From Options

• 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 titleTutorials"gt
• ltpgt
• ltselect key"choice"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

33
Input Fields

• 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 title"Input"gt
• ltpgt
• Name ltinput key"Name" size"15"/gtltbr/gt
• Age ltinput key"Age" size"15"
  format"N"/gtltbr/gt
• Sex ltinput key"Sex" size"15"/gt lt/pgt
• lt/cardgt
• lt/wmlgt

34
FORMAT Control Characters

• N Numeric character
• A, a Alphabetic character
• X, x Numeric or alphabetic character
• M, m Any character
• Leading specifies 0 or more characters (N)
• Leading number specifies number of characters
  (4N)

35
The do Action

• The anchor tag allowed us to make text on the
  screen into a link
• The ltdogt tag is similar. However, the linked word
  does not appear within the text of the screen,
  but rather in a special place (e.g., bottom left
  and right)

36
Detecting a Click

• 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 idCard1 titleThe DBI Coursegt
• ltdo typeaccept labelNextgt
• ltgo hrefCard2/gt
• lt/dogt
• ltpgt Select Next to go to Card 2. lt/pgt
• lt/cardgt
• ltcard idCard2 titleThe DBI Coursegt
• ltpgt I'm Card 2. lt/pgt
• lt/cardgt
• lt/wmlgt

37
(No Transcript)
38
Do Tag Syntax

• Attribute type with value ACCEPT, OPTIONS, HELP,
  PREV, DELETE, or RESET
• Attribute label is the text to appear
• Contains a Task as a subelement (recall that this
  is one of GO, PREV, REFRESH, NOOP)

39
Variables

• Variables can be defined to store data
• Variables are available in all cards of a deck
• Can be defined explicitly, or defined by input
  from the user
• Setting a value to a variable
• ltsetvar name"i" value"500"/gt

40
Setting Variables From Input

• ltcard idcard1"gt
• ltselect keyi"gt
• ltoption value500"gtThe Number 500lt/optiongt
• ltoption valueFive Hundred"gt500 in
  Textlt/optiongt
• lt/selectgt
• lt/cardgt

ltcard id"card2"gt ltpgtYou selected (i)lt/pgt
lt/cardgt
41
Input

• 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"main" titleDBI Example"gt
• ltdo type"accept" label"Next"gt
• ltgo href"wel"/gt lt/dogt
• ltpgt Please enter your name
• ltinput type"text" nameiname"/gt lt/pgt
  lt/cardgt
• ltcard id"wel" title"Welcome"gt
• ltdo type"prev" label"Back"gt ltprev/gt lt/dogt
  
• ltpgt Your name is (iname).
• Click Back to go to previous page.
• lt/pgt lt/cardgt lt/wmlgt

42
(No Transcript)
43
(No Transcript)
44
Sending Data to the Server

• 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"main" titleDBI Example"gt
• ltdo type"accept" labelSend"gt
• ltgo methodPOST" hrefdbi/registerServlet
  "gt
• ltpostfield name"firstname"
  value"(first)"/gt
• ltpostfield namecourse" valuedbi"/gt
• lt/gogt lt/dogt
• ltpgt Please enter your first name
• ltinput type"text" name"first"/gt lt/pgt
• lt/cardgt
• lt/wmlgt

45
Sending Data to the Server
ltCARDgt ltDO TYPE"ACCEPT"gt ltGO
URLdbi/myServlet?id(sno)"/gt lt/DOgt ltSELECT
KEYsno gt ltOPTION VALUE"1"gtBartlt/OPTIONgt
ltOPTION VALUE"2"gtLisalt/OPTIONgt ltOPTION
VALUE"3"gtHomerlt/OPTIONgt ltOPTION
ONCLICK"card2"gtMore...lt/OPTIONgt
lt/SELECTgt lt/CARDgt
46
Collecting Data from More Than One Card
ltCARDgt ltDO TYPE"ACCEPT" LABEL"Next"gt ltGO
URL"card2"/gt lt/DOgt First name ltINPUT
KEY"fname"/gt lt/CARDgt ltCARD NAME"card2"gt ltDO
TYPE"ACCEPT" LABEL"Done"gt ltGO
URLdbi/myServlet" METHOD"POST"
POSTDATA"firstfnameamplastlname"/gt
lt/DOgt Last name ltINPUT
KEY"lname"/gt lt/CARDgt
47
Three Types of Events

• onenterbackward Occurs when the user navigates
  into a card using a prev task
• onenterforward Occurs when the user navigates
  into a card using a go task
• ontimer Occurs when the "timer" expires

48
Timer

• 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"Intro" ontimer"Main" titleDBI
  Course"gt
• lttimer value"150"/gt
• ltpgt Welcome to the dbi site!! We will bring you
  to
• our main page after 15 seconds. lt/pgt lt/cardgt
• ltcard id"Main" title"Menu"gt
• ltpgt This is our main page. Under construction.
  lt/pgt
• lt/cardgt
• lt/wmlgt

49
(No Transcript)
50
Template Element

• The lttemplategt tag defines a template for all the
  cards in a deck
• The contents of the lttemplategt tag is added to
  each card in the deck 
• You can specify only one lttemplategt tag for each
  deck 
• A template tag can only contain ltdogt and
  ltoneventgt tags

51
The TEMPLATE Element
ltWMLgt ltTEMPLATEgt ltDO TYPE"OPTIONS"
LABEL"Main"gt ltGO URL"main_menu.wml"/gt
lt/DOgt lt/TEMPLATEgt ltCARD NAME"msg1"gt ltDO
TYPE"ACCEPT" LABEL"Next"gt ltGO
URL"msg2"/gt lt/DOgt First story
lt/CARDgt ltCARD NAME"msg2"gt Second story
lt/CARDgt lt/WMLgt
First story _____________ Next Main
Second story ... _____________ OK Main
52
Displaying Images

• It is possible to insert images or local icons
  within display text
• Images are ignored by non-bitmapped devices

53
WBMP

• Wap supports WBMP (Wireless Bitmap Picture) 2 bit
  images
• It is possible to convert existing images to wbmp
• The MIME type of the images is declered with the
  following header
• Content-type image/vnd.wap.wbmp

54

• 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"main" title"Where are you?"gt
• lttimer value"10"/gt
• ltimg src"snail2.wbmp" alt"A search snail"/gt
• lt/cardgt
• ltcard id"look" title"I found you"gt
• ltimg src"snail3.wbmp" alt"A looking
  snail"/gt
• lt/cardgt
• lt/wmlgt

55
Adding Images
56
WMLScript
57
What is WMLScript?

• A scripting language for WML pages
• Derived from JavaScript
• Is not part of the WML file
• WML pages only contain references to script URLs
• Compiled to byte code on the server byte-code is
  sent to the WAP browser
• Optimized for small-memory, small-cpu devices

58
WMLScript Example Uses

• Validate user input
• Generate local message and dialog boxes
• Access facilities of the mobile device
• Reduce network round-trips and enhance
  functionality

59
WMLScript Example
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 idcard1" title"Go to URL"gt ltdo
type"options" label"Go"gt ltgo
href"check.wmlsgo_url('HelloWorld')"/gt lt/dogt
lt/cardgt lt/wmlgt
Calls function go_url in file check.wmls with
parameter HelloWorld
60
WMLScript Example
extern function go_url(val) if
(val'HelloWorld') WMLBrowser.go("http/
/wap.google.com/start.wml") else ...
61
WMLScript Standard Libraries

• Lang general-purpose math functionality, random
  number generation, etc.
• Float floating point functions
• String string processing functions
• URL URL processing
• Browser WML browser interface
• Dialog alert, confirm and prompt boxes

62
WTAI Wireless Telephony Application Interface
63
Using Your Phone as a...Phone

• So, we can browse the internet with our phone
• Suppose that there is a web site with the names
  and telephone numbers of our friends
• Would like to be able to "click" on a telephone
  and have the number be dialed
• How???
• Answer WTAI

64
WTAI Capabilities

• Place, receive and terminate voice calls
• Get information about voice calls
• Access and modify device's phone book
• Access call history
• WTAI is accessible via a link or a WMLScript

65
Calling a WTAI Function

• Format
• wtai//ltlibrarygt/ltfunctiongt( ltparametergt) !
  ltresultgt
• ltlibrarygt is the type of function (usually wp)
• ltparametergt are parameters sent to the function
• ltresultgt is a WTAI that may be set as a result of
  the call.

66
Calling a WTAI Function (cont.)

• Example
• ltdo type"accept" label"Tellme Networks"gt
• ltgo href"wtai//wp/mc18005558355"/gt
• lt/dogt

67
XHTML-MP
68
Do we REALLY have to Learn Another New Language?

• WML is similar to HTML, yet different
• Takes time to learn each new language
• Solution The new standard is XHTML Mobile
  Profile
• Contains Subset of XHTML (which is an XML
  version of HTML) and some of wml 1.0

69
What is XHTML (Basic)?

• XHTML is HTML, but
• all tags should be in lowercase (why?)
• all tags need a closing tag, or need to end with
  /gt
• XHTML Basic is a subset of XHTML that can easily
  be supported by mobile devices
• e.g., does not contain frames, nested tables

70
What is WCSS?

• WCSS is an extension of CSS to be used for mobile
  devices
• Same syntax as CSS

71
Example style.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

72

• 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
• lthtmlgt
• ltheadgt
• lttitlegtMovieLifelt/titlegt
• ltlink rel"stylesheet" href"style.css"
  type"text/css" /gt
• lt/headgt
• ltbodygt ltimg align"right" src"logomm.png"
  alt""/gt
• ltbgtltigtYour 1 wireless movie guide!lt/igtlt/bgt
• lttablegt
• lttr class"blue"gt lttdgt1 lta accesskey"1"
  href"quick.html"gtQuick Searchlt/agtlt/tdgtlt/trgt
• lttrgtlttdgt2 lta accesskey"2" class"bluetext"
  href"top5.html"gtTop Five Movieslt/agtlt/tdgtlt/trgt
• lttr class"blue"gtlttdgt3 lta accesskey"3"
  href"findmovie.html"gtFind a Movielt/agtlt/tdgtlt/trgt
• lt/tablegtlt/bodygtlt/htmlgt

73
(No Transcript)
74

• ltform action"waitforpush.html" method"get"gt
• ltpgt
• Your offer ()ltbr/gt
• ltinput type"text" name"price" value"3"
  format"2N" /gtltbr/gt
• Valid for (mins)ltbr/gt
• ltinput type"text" name"minutes" value"20"
  format"3N" /gtltbr/gt
• Parking meter spot acceptable?ltbr/gt
• ltinput type"radio" name"parkmeter"
  value"yes" checked /gt Yesltbr/gt
• ltinput type"radio" name"parkmeter"
  value"no" /gtNoltbr/gt
• lt/pgt
• ltdiv class"centered"gt
• ltinput type"submit" value"Submit"/gt
• lt/divgt
• lt/formgt

75
(No Transcript)
76
Advantages of XHTML-MP

• Based on a well known language
• Can be written as html, and then translated to
  XHTML (e.g., tidy)
• Allows separation of style from content
• Should become standard across all hand-held
  devices
• No "Deck of Cards", pages are loaded one at a
  time. (Is this an advantage or a disadvantage?)
• No variables. (Is this an advantage?)

77
VoiceXML
78
Voice Browser

• Use speech to browse internet
• Speak to choose links
• Speak to provide form input
• Instead of just "seeing" the web pages, you
  should hear them!
• Should work from any phone

79
Architecture
You don't actually have to own an application
that "understands" speech!!
80
VoiceXML Example

• lt?xml version"1.0"?gt
• ltvxml version"2.0"gt
• ltformgt
• ltblockgt
• ltaudiogtHello, Worldlt/audiogt
• lt/blockgt
• lt/formgt
• lt/vxmlgt

An interactive element. There can be as many of
these as you want
81

• lt?xml version"1.0"?gt
• ltvxml version"2.0"gt
• ltform id"animal_questionnaire"gt
• ltfield name"favorite_animal"gt
• ltpromptgt
• ltaudiogtWhich do you like better, dogs or
  cats?lt/audiogt lt/promptgt
• ltgrammargt lt!CDATA dog dogs ltoption
  "dogs"gt cat cats ltoption "cats"gt gt
  lt/grammargt
• ltfilledgt
• ltif cond"favorite_animal 'dogs'"gt
• ltgoto next"popular_dog_facts"/gt

82

• ltelse/gt
• ltgoto expr"'psychological_evaluation.cgi?affli
  ction'
• favorite_animal"/gt
• lt/ifgt
• lt/filledgt
• ltnomatchgt
• I'm sorry, I didn't understand what you said.
  ltreprompt/gt lt/nomatchgt
• ltnoinputgt I'm sorry, I didn't hear you.
  ltreprompt/gt lt/noinputgt
• lt/fieldgt
• lt/formgt
• lt/vxmlgt

83
Challenges

• VoiceXML is a standard for voice browsing that
  does not allow combining "seeing" with "talking"
• What problems are there in implementing a
  standard that combines both?

84
Unified Messaging
85
The Vision

• Using Universal Messaging, you get all your
  "mail" in one "box"
• email
• Voice mail
• SMS
• All types of mail in the "box" can accessed
  using
• computer
• telephone

86
Challenges

• Text-to-Voice Translation
• Make it sound natural
• Same words might be pronounced differently in
  different contexts ("I will read you the book",
  "I read the book to you yesterday")
• Voice-to-Text Translation
• Different accents
• Unclear speaking