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

What are Mobile Devices?

Example Scenario Web Book Store Harry Potter (5) Price: Copies in Stock: 3 Harry Potter (5) Price: Copies in Stock: 2 How Much is Harry Potter (5)? Buy it 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 ,400 1,200 1, Projected cellular subscribers More handsets than PCs connected to the Internet by the end of 2003! 'putting the Internet in everyone's pocket' Projected PCs connected to the Internet (Dataquest 10/98) Projected Web handsets

Standards Evolution

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 element –Must contain one or more cards...

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

Basic Tags defines the beginning and the ending of the ‘deck’, like 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 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " normal, strong, emphasized, bold, italic, underline, big and very big

deckit

Tables <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " Name Phone Bart 123 Lisa 321

Anchors The tag defines a link and what to do when a user chooses it Possible tasks: go, prev, refresh Example: Login page The tag always performs a "go" task Login page

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

Example <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " To Hello World

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 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " HTML Tutorial XML Tutorial WAP Tutorial

Input Fields <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " Name: Age: Sex:

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 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 Select Next to go to Card 2. I'm Card 2.

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:

Setting Variables From Input The Number in Text You selected: $(i)

Input Please enter your name: Your name is $(iname). Click Back to go to previous page.

Sending Data to the Server Please enter your first name:

Sending Data to the Server Bart Lisa Homer More...

Collecting Data from More Than One Card First name: <GO URL=“dbi/myServlet" METHOD="POST" POSTDATA="first=$fname&last=$lname"/> Last name:

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

Timer <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN“ " DTD/wml_1.1.xml"> Welcome to the dbi site!! We will bring you to our main page after 15 seconds. This is our main page. Under construction.

After 15 seconds

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

First story Second story The TEMPLATE Element 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 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

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

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 Calls function go_url in file check.wmls with parameter HelloWorld

WMLScript Example extern function go_url(val) { if (val=='HelloWorld') { WMLBrowser.go(" } 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:// / (; )* [! ] is the type of function (usually wp) are parameters sent to the function is a WTAI that may be set as a result of the call.

Calling a WTAI Function (cont.) Example:

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

MovieLife Your #1 wireless movie guide! 1 Quick Search 2 Top Five Movies 3 Find a Movie

Your offer ($): Valid for (mins): Parking meter spot acceptable? Yes No

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 Hello, World An interactive element. There can be as many of these as you want

Which do you like better, dogs or cats? } [cat cats] { } ] ]]>

<goto expr="'psychological_evaluation.cgi?affliction=' + favorite_animal"/> I'm sorry, I didn't understand what you said. I'm sorry, I didn't hear you.

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