1. Mobile Device on the WWW 2. WAP, WML and WMLScript Prof. Dr. Dr. - - PowerPoint PPT Presentation

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite1

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt

Universität Karlsruhe Fakultät für Informatik Institut für Telematik Wintersemester 2000/2001

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite2

Chapter 7: Mobile and Ubiquitous WWW

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite3

• 1. Mobile Device on the WWW
• 2. WAP, WML and WMLScript
• 3. Measurement, Management and Control via the WWW
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite4

what is different?

devices have usually smaller and low-quality displays devices may not have audio output processing power is compared to a PC smaller

• ften

wireless networks with smaller bandwidth devices are used at different locations and in different situations

aim: despite these restrictions it should be possible to access

content from the Internet

approaches (

http://www.w3.org/Mobile/Activity) :

devices can tell the server there capabilities Composite Capability/Preference Profile (CC/PP)

http://www.w3.org/TR/NOTE-CCPP/ http://www.w3.org/TR/NOTE-CCPPexchange

servers can provide location depended information Point Of Interest eXchange Language (POIX) http://www.w3.org/TR/poix/ NaVigation Markup Language (NVML) http://www.w3.org/TR/NVML

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite5

Composite Capabilitiy/Preference Profile (CC/PP) (1)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite6

Composite Capabilitiy/Preference Profile (CC/PP) (2)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite7

Composite Capabilitiy/Preference Profile (CC/PP) (3)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite8

• 1. Mobile Device on the WWW
• 2. WAP, WML and WMLScript
• 3. Measurement, Management and Control via the WWW

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite9

Wireless Application Environment

WML Microbrowser WMLScript Virtual Machine WMLScript Standard Library Wireless Telephony Application Interface WAP Content Types

Wireless Protocols

Wireless Session Protocol (WSP) Wireless Transport Layer Security (WTLS) Wireless Transaction Protocol (WTP) Wireless Datagram Protocol (WDP) Wireless network interface definitions

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite10

mobile phones bring in new requirements that are not

regarded in current Internet/WWW Technologies

to ease the development and deployment WAP should be

based on standard WWW-Technologies

content can be provided on a standard HTTP1.1 Web server to generate dynamic resources CGI, ASP, NSAPI, JAVA, Servlets,

• etc. can be used.

WML is based on XML

adapted to the requirements for mobile communication

Optimized for wireless communication, e.g. data compression WML is build to suit the specific need of the UI of a mobile phone and other small user interfaces

a standard is required for interoperability

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite11

requirements and goals

network-neutral application environment; for narrow-band wireless devices; with an Internet/WWW programming model; and a high degree of interoperability initial focus on phones

slow

bearers

small

memory

limited

CPU

small

screen

limited

input model

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite12

first generation

architecture (application model, browser, gateway, content server) WML – XML based display language WMLScript (scripting language) WTA (telephony services API and architecture) content formats (data exchange, WML, WMLScript, WMBP)

in the future (now?)

user agent profiling (content customized for device) push model (network-initiated content delivery) Performance Enhancements (Caching, etc.)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite13

Web Server

Content

CGI Scripts etc. WML Decks with WML-Script

WAP Gateway

WML Encoder WMLScript Compiler Protocol Adapters

Client

WML WML- Script WTAI Etc.

HTTP WSP/WTP

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite14

WAP Application Server

Content

Application Logic

WML Decks with WML-Script

WML Encoder WMLScript Compiler Protocol Adapters

Client

WML WML- Script WTAI Etc.

WSP/WTP

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite15

HTML JavaScript HTTP TLS - SSL TCP/IP UDP/IP Wireless Application Protocol

Wireless Application Environment (WAE) Session Layer (WSP) Security Layer (WTLS) Transport Layer (WDP) Other Services and Applications Transaction Layer (WTP)

SMS USSD CSD IS-136 CDMA CDPD PDC-P Etc..

Bearers:

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite16

tag-based browsing language (XML-DTD)

screen management (text, images) data input (text, selection lists, etc.) hyperlinks & navigation support

inherits technology from HDML and HTML deck/card metaphor

document is a deck that can contain multiple cards user interactions are split into cards navigation

• ccurs

between cards

explicit inter-card navigation model

hyperlinks UI event handling history timer

state management and variables

reduce network traffic results in better caching

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite17

input deck card navigation variables

<?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="welcome" title="Card 1"> <do type="ACCEPT" label="Goto Card2"> <go href="#Card2"/> </do> <p>Text is here</p> <p><anchor>Provided by TecO <go href="http://wap.teco.edu"/> </anchor></p> </card> <card id="Card2" title="Card 2"> <do type="ACCEPT"> <go href="/cgi/age.pl?a=$(a)"/> </do> <p>your Age <input format="*N" name="a" title="Age:"/></p> </card> </wml>

prolog

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite18

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite19

<?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="welcome" title="TV-Control"> <do type="ACCEPT" label="Remote Control"> <go href="#progCard"/> </do> <p>TV Remote Control</p> <p><anchor>Use the remote control! <go href="#progCard"/> </anchor></p> <p><anchor>Provided by TecO <go href="http://wap.teco.edu"/> </anchor></p> </card> <card id="progCard " title="Program"> <do type="ACCEPT„ label="select TV"> <go href="/cgi/tv.pl?p=$(P)"/> </do> <p>Select the Program: <select name="P"> <option value="ard">ARD</option> <option value="zdf">ZDF</option> <option value="pro7">Pro7</option> <option value="sat1">Sat1</option> <option value="3sat">3Sat</option> <option value="rtl">RTL</option> <option value="rtl2">RTL2</option> <option value="srtl">S-RTL</option> <option value="arte">ARTE</option> </select></p> </card> </wml>

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite20

<wml> <template> <do type="OPTIONS" LABEL="TecO"> <go href="http://wap.teco.edu/"/> </do> </template> <card id="card1"> <do type= "accept" label="Next"> <GO URL="card2"/> </do> First Card </card> <card id="card2"> Second Card </card> </wml>

• define actions/events that are common to all card

First Card _____________ Next TecO Second Card _____________ Options TecO

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite21

<?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="start" title="Financial News"> <p align="center"> <img src="euro.wbmp" alt="Euro Graph"/> </p> </card> </wml>

• images
• 1-bit color depth
• bitmap format (WBMP)
• the

device ignores images if it cannot show images,

• r the text defined in the ALT-Tag

is shown

• file type: *.wbmp
• Content-Type: image/vnd.wap.wbmp
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite22

scripting language:

procedural logic, loops, conditionals, etc.

• ptimized

for small-memory, small-cpu devices

derived from JavaScript integrated with WML

powerful extension mechanism reduces overall network traffic

bytecode-based virtual machine

stack-oriented design ROM-able designed for simple, low-impact implementation

compiler in network

better network bandwidth use better use

• f

terminal memory/cpu.

a variety of libraries, e.g.

Math, String, URL, Browser, Dialog, Float

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite23

WML page that calls a WMLScript

(random.wml)

<?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="Random Example"> <do type="accept" label="Random"> <go href="random.wmls#getRandom()"/> </do> <p>Select Random</p> </card> <card id="card2" title="Random Result"> <p>Result: $(RESULT)</p> </card> </wml>

WMLScript (random.wmls)

extern function getRandom() { var r=Lang.random(100); WMLBrowser.setVar("RESULT", r); WMLBrowser.go("random.wml#card2"); }

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite24

Tools for building telephony applications Designed primarily for:

Network Operators / Carriers Equipment Vendors

Network security and reliability a major consideration WTA Browser

Extensions added to standard WML/WMLScript browser Exposes additional API (WTAI)

WTAI includes:

Call control, Network text messaging, Phone book interface, Indicator control Event processing

Network model for client/server interaction

Event signaling, Client requests to server

WTAI available in WML & WMLScript

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite25

WTAI call in a WML page

<?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="WTAI Example"> <do type="accept" label="Call"> <go href="wtai:cc/mc;$(N)"/> </do> <p>Enter phone number: </p> <p><input format="*N" name="N" title="Phone Number:"/></p> </card> </wml>

WTAI call in WMLScript

function checkNum (N) { if (Lang.isInt(N)) WTAI.makeCall(N); else Dialog.alert("Bad Phone Number"); }

Syntax has been changed!

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite26

• 1. Mobile Device on the WWW
• 2. WAP, WML and WMLScript
• 3. Measurement, Management and Control via the WWW
• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite27

standard web server

web is used to control external devices

e.g. CGI, Servlet, APS, ... control

using PC-measurement card, COM, LPT, USB, ...

external device is represented by a URL

when this URL is called the component is controlled, e.g. by

parameters given in the URL specific web server for control

this specific web server has to have inputs and outputs that can be controlled

specific clients that transmit data to the server

clients set up a connection to the server at a dedicated time (e.g. each hour and upload data)

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite28

terminal

power meter

power supply system transformer station database server home power network

fiber network

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite29

Internet power meter

power supply system transformer station database server home power network

fiber network

Embedded I nt ernet Appliance HTTP push & pull terminal

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite30

Coca-Cola vending machine is managed over the WWW

request current data and status e.g. sales figures, to calculate the response to adverts changing data and status e.g. price, cooling time and temperature, light, etc.

architecture web server ( StrongARM network computer) video camera, modem

SAP R/3 Server

http http

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite31

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite32

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite33

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite34

application areas

vending machines technical infrastructure (electricity, gas, water, ...) production and manufacturing private areas / homes (surveillance, heating/cooling, consumer e lectronics) car/transportation (surveillance, dynamic traffic control) administration (printer, network infrastructure, medical equipment, ...)

advantages

exchange and visualization

• f

dynamic information using web technology simple integration with existing system and infrastructure low cost for maintenance (remote maintenance and surveillance) scalability

• pen

requirements (excerpt, not universal)

“thin” server (cheap, at max 10 % of the price for the device) non standard network requirements

low

bandwidth, delays are acceptable

cheap security

Ubiquitous Web

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite35

can be build for all devices that can be controlled

electronically

control server is device independent control server must be customized to the device possibly expensive

device control server web server device protocol IP Stack protocol IP e.g. RS232 USB, ...

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite36

web server with physical input

and output to control external components

http://www.brodel.de/

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite37

with physical input and output

to control external components

based on a 80186 http://www.beck-ipc.com/ http://www.teco.edu/~albrecht/publication/networked-artifacts/

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite38

• nly possible for new developments

communication stack and web server is integrated in the device possibly cheap because hardware is already existing in the

device

device web server IP Stack IP

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite39

http://www.earthcam.com/Solutions/ether.html http://www.margherita2000.com/

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite40

minimal device dependent web interface shared functionality in the gateway (HTTP, TCP, IP) simple locale communication (e.g. cheap bus)

web-gateway web server web adapter IP Stack locales IP protocol device web interface device web interface device web interface

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite41

http://rr-vs.informatik.uni-ulm.de/rr/

• Prof. Dr. Dr. h.c. mult. Gerhard Krüger, Albrecht Schmidt: Web Engineering, WS99/00

Seite42

• Albrecht Schmidt, Henning Schröder, Oliver Frick. WAP - Designing

for Small User Interfaces. CHI2000 Conference, The

• Hague. 2000.

http://www.teco.edu/lehre/webe/unterlagen/wap-design.pdf

• Web access

from mobile devices http://www.w3.org/Mobile/

• Composite

Capability/Preference Profiles (CC/PP): Auser side framework for content negotiation http://www.w3.org/TR/NOTE-CCPP/

• CC/PP exchange

protocol based on HTTP Extension Framework http://www.w3.org/TR/NOTE-CCPPexchange

• WAP

Forum Specifications http://www.wapforum.org/what/technical.htm

• NaVigation

Markup Language (NVML) http://www.w3.org/TR/NVML

• POIX: Point Of Interest

eXchange Language Specification http://www.w3.org/TR/poix/

• Web-Eisenbahn
• Ulm. http://rr-vs.informatik.uni-ulm.de/rr/