Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.

transcript

Connecting to the Web Using Connecting to the Web Using Mobile DevicesMobile Devices

Representation and

Management of Data on the

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

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

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

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">

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">

Hello World

</card>

</wml>

Basic TagsBasic Tags

• <wml> </wml> defines the beginning

and the ending of the ‘deck’, like

• <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

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“

<p> normal, <strong>strong</strong>,

<em>emphasized</em>, <b>bold</b>, <i>italic</i>,

<u>underline</u>, <big>big</big> and

</card>

</wml>

deckit

TablesTables

<th><b>Phone</b></th></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

• 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

<!DOCTYPE wml PUBLIC

"-//WAPFORUM//DTD WML 1.1//EN“

<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

<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

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">

<p> Select Next to go to Card 2. </p>

</card>

</card>

</wml>

Do Tag SyntaxDo Tag Syntax

• Attribute type with value ACCEPT,

OPTIONS, HELP, PREV, DELETE, or

• 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

• Can be defined explicitly, or defined by

input from the user

• Setting a value to a variable:

Setting Variables From Setting Variables From InputInput

<card id=“card1"> <select key=“i"> <option value=“500">The Number 500</option>

</card>

<card id="card2"> <p>You selected: $(i)</p> </card>

InputInput

<p> Please enter your name:

<p> Your name is $(iname).

Click Back to go to previous page.

</p> </card> </wml>

Sending Data to the Sending Data to the ServerServer

</go> </do>

<p> Please enter your first name:

</card>

</wml>

Sending Data to the ServerSending Data to the Server

<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>

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

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD

WML 1.1//EN“ "http://www.wapforum.org/

DTD/wml_1.1.xml">

<p> Welcome to the dbi site!! We will bring you to

our main page after 15 seconds. </p> </card>

<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

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

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

</card>

</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

• 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

• 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">

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

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

<form>

<block>

<audio>Hello, World</audio>

</block>

</form>

</vxml>

An interactive element. There can

be as many of these as you want

<audio>Which do you like better, dogs or cats?</audio> </prompt>

<else/>

<goto expr="'psychological_evaluation.cgi?affliction=' +

favorite_animal"/>

</filled>

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

Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.

Documents