Transcript Connecting to the Web Using Mobile Devices Representation and Management

Connecting to the Web Using
Mobile Devices
Representation and Management
of Data on the Web
What are Mobile Devices?
Example Scenario
Buy it
How Much is
Harry Potter (5)?
25.95
Web Book Store
Harry Potter (5)
Price: 25.95
Copies in Stock: 2
3
Hmm..
Harry
Potter (5)
costs
$30.00
here…
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
Statistics about Mobile Devices
Millions
1,400
1,200
1,000
More handsets than PCs
connected to the Internet by
the end of 2003!
Projected
cellular
subscribers
Projected Web
handsets
800
600
Projected PCs
connected to
the Internet
400
(Dataquest 10/98)
200
0
1996 1997 1998 1999 2000 2001 2002 2003 2004 2005
'putting the Internet in everyone's pocket'
Standards
Evolution
http://www.littlespringsdesign.com/design/xhtmlinfo.html
WAP: Wireless Application
Protocol
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
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
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.
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
Architecture
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
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.wml");
dispatcher.forward(request, response);
}
....
}
}
public class XSQLProcessorServlet extends HttpServlet {
public void doGet(HttpServletRequest 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";
....
}
}
WML: Wireless Markup Language
WML Basics
• Tag-based browsing language, which
contains:
– Text, images
– User input via forms
– Hyperlinks & navigation support
• Based on XML
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
All Decks Must Contain…
• Document prologue
– XML & document type declaration
• <WML> element
– Must contain one or more cards
<?xml version="1.0“?>
<!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML
1.0//EN" "http://www.wapforum.org/DTD/wml.xml">
<WML>
...
</WML>
Hello World Example
<?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="Card1" title="The dbi Course">
<p>
<!-- Hello World example -->
Hello World
</p>
</card>
</wml>
Basic Tags
• <wml> </wml> defines the beginning and
the ending of the ‘deck’, like <html>
</html>
• <card> </card> defines the beginning and
the ending of a card
The Result on Different "Phones"
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
Text Formats
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title=“Text Formats">
<p> normal, <strong>strong</strong>,
<em>emphasized</em>, <b>bold</b>, <i>italic</i>,
<u>underline</u>, <big>big</big> and
<big><big>very big</big></big></p>
</card>
</wml>
deckit
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title=“Table">
<p> <table columns="2">
<tr><th><b>Name</b></th>
<th><b>Phone</b></th></tr>
<tr><td>Bart</td><td>123</td></tr>
<tr><td>Lisa</td><td>321</td></tr>
</table></p>
</card>
</wml>
Tables
Anchors
• The <anchor> tag defines a link and what to do
when a user chooses it
• Possible tasks: go, prev, refresh
• Example:
<anchor>Login page
<go href=“login.wml"/> </anchor>
• The <a> tag always performs a "go" task
<a href=“login.wml">Login page</a>
Tasks
• The <go> task represents the action of switching
to a new card
• The <prev> task represents the action of going
back to the previous card
• The <refresh> task refreshes the variables
defined on the page
• The <noop> task says that nothing should be
done
Example
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.1//EN“
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title=“Using A Tag">
<p>
<a href=“hello.wml">To Hello World</a>
</p></card>
</wml>
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
Select From Options
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title=“Tutorials">
<p>
<select key="choice">
<option value="htm">HTML Tutorial</option>
<option value="xml">XML Tutorial</option>
<option value="wap">WAP Tutorial</option>
</select>
</p> </card> </wml>
Input Fields
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Input">
<p>
Name: <input key="Name" size="15"/><br/>
Age: <input key="Age" size="15" format="*N"/><br/>
Sex: <input key="Sex" size="15"/> </p>
</card>
</wml>
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)
The do Action
• The anchor tag allowed us to make text on
the screen into a link
• The <do> 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)
Detecting a Click
<?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=“Card1” title=“The DBI Course”>
<do type=“accept” label=“Next”>
<go href=“#Card2”/>
</do>
<p> Select Next to go to Card 2. </p>
</card>
<card id=“Card2” title=“The DBI Course”>
<p> I'm Card 2. </p>
</card>
</wml>
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)
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:
<setvar name="i" value="500"/>
Setting Variables From Input
<card id=“card1">
<select key=“i">
<option value=“500">The Number 500</option>
<option value=“Five Hundred">500 in Text</option>
</select>
</card>
<card id="card2">
<p>You selected: $(i)</p>
</card>
<?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="main" title=“DBI Example">
<do type="accept" label="Next">
<go href="#wel"/> </do>
<p> Please enter your name:
<input type="text" name=“iname"/> </p> </card>
<card id="wel" title="Welcome">
<do type="prev" label="Back"> <prev/> </do>
<p> Your name is $(iname).
Click Back to go to previous page.
</p> </card> </wml>
Input
<?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="main" title=“DBI Example">
<do type="accept" label=“Send">
<go method=“POST" href=“dbi/registerServlet">
<postfield name="firstname" value="$(first)"/>
<postfield name=“course" value=“dbi"/>
</go> </do>
<p> Please enter your first name:
<input type="text" name="first"/> </p>
</card>
</wml>
Sending Data to the Server
Sending Data to the Server
<CARD>
<DO TYPE="ACCEPT">
<GO URL=“dbi/myServlet?id=$(sno)"/>
</DO>
<SELECT KEY=“sno” >
<OPTION
<OPTION
<OPTION
<OPTION
</SELECT>
</CARD>
VALUE="1">Bart</OPTION>
VALUE="2">Lisa</OPTION>
VALUE="3">Homer</OPTION>
ONCLICK="#card2">More...</OPTION>
Collecting Data from More
Than One Card
<CARD>
<DO TYPE="ACCEPT" LABEL="Next">
<GO URL="#card2"/>
</DO>
First name:
<INPUT KEY="fname"/>
</CARD>
<CARD NAME="card2">
<DO TYPE="ACCEPT" LABEL="Done">
<GO URL=“dbi/myServlet" METHOD="POST"
POSTDATA="first=$fname&amp;last=$lname"/>
</DO>
Last name:
<INPUT KEY="lname"/>
</CARD>
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
<?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="Intro" ontimer="#Main" title=“DBI Course">
<timer value="150"/>
<p> Welcome to the dbi site!! We will bring you to
our main page after 15 seconds. </p> </card>
<card id="Main" title="Menu">
<p> This is our main page. Under construction. </p>
</card>
</wml>
Timer
After 15
seconds
Template Element
• The <template> tag defines a template for all
the cards in a deck
• The contents of the <template> tag is added to
each card in the deck
• You can specify only one <template> tag for each
deck
• A template tag can only contain <do> and
<onevent> tags
The TEMPLATE Element
<WML>
<TEMPLATE>
<DO TYPE="OPTIONS" LABEL="Main">
<GO URL="main_menu.wml"/>
</DO>
</TEMPLATE>
<CARD NAME="msg1">
<DO TYPE="ACCEPT" LABEL="Next">
<GO URL="#msg2"/>
</DO>
First story
</CARD>
<CARD NAME="msg2">
Second story
</CARD>
</WML>
First story
…
_____________
Next
Main
Second story
...
_____________
OK
Main
Displaying Images
• It is possible to insert images or local icons
within display text
• Images are ignored by non-bitmapped devices
<IMG LOCALSRC="righthand" ALT="" />
<IMG SRC="../images/logo.bmp"
ALT="Unwired Planet"/>
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
<?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="main" title="Where are you?">
<timer value="10"/>
<img src="snail2.wbmp" alt="A search snail"/>
</card>
<card id="look" title="I found you">
<img src="snail3.wbmp" alt="A looking snail"/>
</card>
</wml>
Adding Images
WMLScript
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
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
WMLScript Example
<?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=“card1" title="Go to URL">
<do type="options" label="Go">
<go href="check.wmls#go_url('HelloWorld')"/>
</do>
Calls function go_url in file
</card>
check.wmls with parameter
</wml>
HelloWorld
WMLScript Example
extern function go_url(val) {
if (val=='HelloWorld') {
WMLBrowser.go("http://wap.google.com/start.wml")
}
else ...
}
Allows function go_url to be called
from outside the file
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
WTAI: Wireless Telephony
Application Interface
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
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
Calling a WTAI Function
• Format:
wtai://<library>/<function>(; <parameter>)* [! <result>]
• <library> is the type of function (usually wp)
• <parameter> are parameters sent to the
function
• <result> is a WTAI that may be set as a result
of the call.
Calling a WTAI Function
(cont.)
• Example:
<do type="accept" label="Tellme Networks">
<go href="wtai://wp/mc;18005558355"/>
</do>
XHTML-MP
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
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
/>
• XHTML Basic is a subset of XHTML that
can easily be supported by mobile devices
– e.g., does not contain frames, nested tables
What is WCSS?
• WCSS is an extension of CSS to be used
for mobile devices
• Same syntax as CSS
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;}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile
1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<title>MovieLife</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body> <img align="right" src="logomm.png" alt=""/>
<b><i>Your #1 wireless movie guide!</i></b>
<table>
<tr class="blue"> <td>1 <a accesskey="1" href="quick.html">Quick
Search</a></td></tr>
<tr><td>2 <a accesskey="2" class="bluetext" href="top5.html">Top Five
Movies</a></td></tr>
<tr class="blue"><td>3 <a accesskey="3" href="findmovie.html">Find a
Movie</a></td></tr>
</table></body></html>
<form action="waitforpush.html" method="get">
<p>
Your offer ($):<br/>
<input type="text" name="price" value="3" format="2N" /><br/>
Valid for (mins):<br/>
<input type="text" name="minutes" value="20" format="3N" /><br/>
Parking meter spot acceptable?<br/>
<input type="radio" name="parkmeter" value="yes" checked />
Yes<br/>
<input type="radio" name="parkmeter" value="no" />No<br/>
</p>
<div class="centered">
<input type="submit" value="Submit"/>
</div>
</form>
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?)
VoiceXML
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
Architecture
You don't actually have to own an application
that "understands" speech!!
VoiceXML Example
<?xml version="1.0"?>
<vxml version="2.0">
<form>
An interactive
element. There can
be as many of these
as you want
<block>
<audio>Hello, World</audio>
</block>
</form>
</vxml>
<?xml version="1.0"?>
<vxml version="2.0">
<form id="animal_questionnaire">
<field name="favorite_animal">
<prompt>
<audio>Which do you like better, dogs or cats?</audio>
</prompt>
<grammar> <![CDATA[ [ [dog dogs] {<option "dogs">} [cat cats]
{<option "cats">} ] ]]> </grammar>
<filled>
<if cond="favorite_animal == 'dogs'">
<goto next="#popular_dog_facts"/>
<else/>
<goto expr="'psychological_evaluation.cgi?affliction=' +
favorite_animal"/>
</if>
</filled>
<nomatch>
I'm sorry, I didn't understand what you said. <reprompt/>
</nomatch>
<noinput> I'm sorry, I didn't hear you. <reprompt/>
</noinput>
</field>
</form>
</vxml>
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?
Unified Messaging
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
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