Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.
-
date post
21-Dec-2015 -
Category
Documents
-
view
216 -
download
2
Transcript of Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.
![Page 1: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/1.jpg)
Connecting to the Web Using Connecting to the Web Using Mobile DevicesMobile Devices
Representation and
Management of Data on the
Web
![Page 2: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/2.jpg)
What are Mobile Devices?What are Mobile Devices?
![Page 3: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/3.jpg)
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…
![Page 4: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/4.jpg)
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
![Page 5: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/5.jpg)
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
![Page 6: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/6.jpg)
Standards Standards EvolutionEvolution
http://www.littlespringsdesign.com/design/xhtmlinfo.html
![Page 7: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/7.jpg)
WAP: Wireless Application WAP: Wireless Application ProtocolProtocol
![Page 8: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/8.jpg)
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
![Page 9: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/9.jpg)
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
![Page 10: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/10.jpg)
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.
![Page 11: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/11.jpg)
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
![Page 12: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/12.jpg)
ArchitectureArchitecture
![Page 13: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/13.jpg)
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
![Page 14: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/14.jpg)
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);
}
....
}
}
![Page 15: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/15.jpg)
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";
....
}
}
![Page 16: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/16.jpg)
WML: Wireless Markup WML: Wireless Markup LanguageLanguage
![Page 17: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/17.jpg)
WML BasicsWML Basics
• Tag-based browsing language, which
contains:
– Text, images
– User input via forms
– Hyperlinks & navigation support
• Based on XML
![Page 18: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/18.jpg)
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
![Page 19: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/19.jpg)
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>
![Page 20: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/20.jpg)
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>
![Page 21: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/21.jpg)
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
![Page 22: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/22.jpg)
The Result on Different The Result on Different "Phones""Phones"
![Page 23: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/23.jpg)
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
![Page 24: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/24.jpg)
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>
![Page 25: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/25.jpg)
deckit
![Page 26: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/26.jpg)
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>
![Page 27: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/27.jpg)
![Page 28: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/28.jpg)
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>
![Page 29: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/29.jpg)
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
![Page 30: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/30.jpg)
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>
![Page 31: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/31.jpg)
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
![Page 32: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/32.jpg)
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>
![Page 33: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/33.jpg)
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>
![Page 34: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/34.jpg)
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)
![Page 35: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/35.jpg)
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)
![Page 36: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/36.jpg)
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>
![Page 37: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/37.jpg)
![Page 38: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/38.jpg)
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)
![Page 39: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/39.jpg)
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"/>
![Page 40: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/40.jpg)
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>
![Page 41: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/41.jpg)
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>
![Page 42: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/42.jpg)
![Page 43: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/43.jpg)
![Page 44: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/44.jpg)
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>
![Page 45: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/45.jpg)
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>
![Page 46: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/46.jpg)
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>
![Page 47: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/47.jpg)
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
![Page 48: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/48.jpg)
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>
![Page 49: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/49.jpg)
After 15 seconds
![Page 50: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/50.jpg)
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
![Page 51: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/51.jpg)
<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
![Page 52: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/52.jpg)
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"/>
![Page 53: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/53.jpg)
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
![Page 54: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/54.jpg)
<?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>
![Page 55: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/55.jpg)
Adding ImagesAdding Images
![Page 56: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/56.jpg)
WMLScriptWMLScript
![Page 57: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/57.jpg)
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
![Page 58: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/58.jpg)
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
![Page 59: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/59.jpg)
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
![Page 60: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/60.jpg)
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
![Page 61: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/61.jpg)
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
![Page 62: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/62.jpg)
WTAI: Wireless Telephony WTAI: Wireless Telephony Application Interface Application Interface
![Page 63: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/63.jpg)
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
![Page 64: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/64.jpg)
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
![Page 65: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/65.jpg)
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.
![Page 66: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/66.jpg)
Calling a WTAI Function Calling a WTAI Function (cont.)(cont.)
• Example:
<do type="accept" label="Tellme
Networks">
<go href="wtai://wp/mc;18005558355"/>
</do>
![Page 67: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/67.jpg)
XHTML-MPXHTML-MP
![Page 68: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/68.jpg)
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
![Page 69: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/69.jpg)
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
![Page 70: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/70.jpg)
What is WCSS?What is WCSS?
• WCSS is an extension of CSS to be
used for mobile devices
• Same syntax as CSS
![Page 71: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/71.jpg)
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;}
![Page 72: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/72.jpg)
<?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>
![Page 73: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/73.jpg)
![Page 74: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/74.jpg)
<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>
![Page 75: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/75.jpg)
![Page 76: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/76.jpg)
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?)
![Page 77: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/77.jpg)
VoiceXMLVoiceXML
![Page 78: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/78.jpg)
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
![Page 79: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/79.jpg)
ArchitectureArchitecture
You don't actually have to own an application that "understands" speech!!
![Page 80: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/80.jpg)
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
![Page 81: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/81.jpg)
<?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"/>
![Page 82: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/82.jpg)
<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>
![Page 83: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/83.jpg)
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?
![Page 84: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/84.jpg)
Unified MessagingUnified Messaging
![Page 85: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/85.jpg)
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
![Page 86: Connecting to the Web Using Mobile Devices Representation and Management of Data on the Web.](https://reader031.fdocuments.net/reader031/viewer/2022013011/56649d615503460f94a428b2/html5/thumbnails/86.jpg)
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