connecting to the web using mobile devices representation and management of data on the web
Post on 21-Dec-2015
216 views
TRANSCRIPT
Connecting to the Web Using Connecting to the Web Using Mobile DevicesMobile Devices
Representation and
Management of Data on the
Web
What are Mobile Devices?What are Mobile Devices?
Example ScenarioExample Scenario
Web Book Store
Harry Potter (5)Price: 25.95
Copies in Stock: 3
Harry Potter (5)Price: 25.95
Copies in Stock: 2
How Much is Harry Potter (5)?
Buy it
25.95
Hmm.. Harry
Potter (5) costs
$30.00 here…
Characteristics of Characteristics of Mobile DevicesMobile 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 Statistics about Mobile DevicesDevices
Millions
1996 1997 1998 1999 2000 2001 2002 2003 2004 2005
1,400
1,200
1,000
800
600
400
200
0
ProjectedcellularsubscribersMore handsets than PCs
connected to the Internet bythe end of 2003!
'putting the Internet in everyone's pocket'
Projected PCsconnected tothe Internet(Dataquest 10/98)
Projected Webhandsets
Standards Standards EvolutionEvolution
http://www.littlespringsdesign.com/design/xhtmlinfo.html
WAP: Wireless Application WAP: Wireless Application ProtocolProtocol
What is WAP?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 WAPMore 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?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 UseExamples 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
ArchitectureArchitecture
Phone Actually Sends Phone Actually Sends HTTP Request!!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 WML: Wireless Markup LanguageLanguage
WML BasicsWML Basics
• Tag-based browsing language, which
contains:
– Text, images
– User input via forms
– Hyperlinks & navigation support
• Based on XML
WML Basics (cont.)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…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 ExampleHello 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 TagsBasic 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 The Result on Different "Phones""Phones"
Seeing the ResultSeeing 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 FormatsText 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
TablesTables
<?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>
AnchorsAnchors
• 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>
TasksTasks
• 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
ExampleExample
<?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 InputHandling 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 OptionsSelect 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 FieldsInput 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 FORMAT Control CharactersCharacters
• 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 ActionThe 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 ClickDetecting 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 SyntaxDo 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)
VariablesVariables
• 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 Setting Variables From InputInput
<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>
InputInput
<?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>
Sending Data to the Sending Data to the ServerServer
<?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 ServerSending Data to the Server
<CARD> <DO TYPE="ACCEPT"> <GO URL=“dbi/myServlet?id=$(sno)"/> </DO> <SELECT KEY=“sno” >
<OPTION VALUE="1">Bart</OPTION> <OPTION VALUE="2">Lisa</OPTION> <OPTION VALUE="3">Homer</OPTION> <OPTION ONCLICK="#card2">More...</OPTION> </SELECT></CARD>
Collecting Data from More Collecting Data from More Than One CardThan 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&last=$lname"/> </DO> Last name: <INPUT KEY="lname"/></CARD>
Three Types of EventsThree 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
TimerTimer
<?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>
After 15 seconds
Template ElementTemplate 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
<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>
The TEMPLATE ElementThe TEMPLATE Element
First story…
_____________Next Main
Second story...
_____________OK Main
Displaying ImagesDisplaying 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"/>
WBMPWBMP
• 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 ImagesAdding Images
WMLScriptWMLScript
What is 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 UsesWMLScript 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 ExampleWMLScript 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> </card> </wml>
Calls function go_url in file check.wmls with parameter
HelloWorld
WMLScript ExampleWMLScript 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 WMLScript Standard LibrariesLibraries
• 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 WTAI: Wireless Telephony Application Interface Application Interface
Using Your Phone as a...Using Your Phone as a...PhonePhone
• 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 CapabilitiesWTAI 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 FunctionCalling 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 Calling a WTAI Function (cont.)(cont.)
• Example:
<do type="accept" label="Tellme
Networks">
<go href="wtai://wp/mc;18005558355"/>
</do>
XHTML-MPXHTML-MP
Do we REALLY have to Do we REALLY have to Learn Another New Learn Another New
Language?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)?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?What is WCSS?
• WCSS is an extension of CSS to be
used for mobile devices
• Same syntax as CSS
Example: style.cssExample: 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-MPAdvantages 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?)
VoiceXMLVoiceXML
Voice BrowserVoice 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
ArchitectureArchitecture
You don't actually have to own an application that "understands" speech!!
VoiceXML ExampleVoiceXML Example
<?xml version="1.0"?>
<vxml version="2.0">
<form>
<block>
<audio>Hello, World</audio>
</block>
</form>
</vxml>
An interactive element. There can
be as many of these as you want
<?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>
ChallengesChallenges
• 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 MessagingUnified Messaging
The VisionThe 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
ChallengesChallenges
• 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