Thin Client Development and Wireless Markup …dtipper/2727/2727_Slides11.pdfThin Client Development...

Thin Client Development and Thin Client Development and Wireless Wireless MarkupMarkup Languages Languages

David TipperAssociate ProfessorAssociate Professor

Department of Information Science and Telecommunications

University of Pittsburgh

[email protected]@tele.pitt.eduhttp://www.sis.pitt.edu/~dtipper/2727.html

Slides 11Slides 11

Infsci 1073/Telcom 27272

Thin Client Development• Adopt architecture similar to wired Internet

• Components– microbrowser (thin client), Web Server, content/data source, possibly a

proxy gateway• Advantages

– Rapid deployment, fresh data, easy to use, broad deployment

WWANInternet

Base Station Web Server

WirelessMicrobrowser

Clients

EnterpriseData Sources

WirelessGateway


Content • Content Creation

– Make content specifically for wireless handhelds– Use wireless markup languages (cHMTL, WML, XHTML-MP)

• Content Adaptation – Adapt content for desktops to handheld devices on the fly

• How to adapt (XLST, web clipping, image mapping, etc.)• Where to adapt?

– Server – Portal between server and wireless gateway– Gateway to WWAN (WAP approach) – Client device

WWANInternet

Base Station Web Server

WirelessMicrobrowser

Clients

EnterpriseData Sources

WirelessGateway


Wireless Markup Languages• Markup Languages: ML

describe how a document is rendered

• HDML: Handheld Device ML • WML : Wireless ML

– Attempt to get one markup language – part of WAP

• cHTML: compact HTML– Developed from i-mode

service in Asia• XHTML-MP: extensible HTML

mobile profile – Part of WAP 2.0

• Recent survey found that most content in cHTML and WML. WAP 2.0 browsers support WML and XHTML-MP.

cHTML• compact HTML (cHTML)• Developed by NTT DoCoMo for i-mode cell phone

service - now a W3C standard• Basically a pared down version of HTML does Not

support many HTML features– JPEG images, – Tables– Multiple fonts – Frames– Stylesheets– Color background– Script programming

• List of supported html tags maintained by NTT DoCoMO

http://www.nttdocomo.co.jp/english/p_s/i/make/tag/index.html


cHTML Example• 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN"

2 3 4 5 <html>6 <head>7 <title>Wireless</title>8 </head>9 10 <body>11 <p>Welcome to i-mode!</p>12 </body>13 </html>

cHTML• cHTML contains two extensions to HTML

– Access key element – allows URL anchor tag to be activated by a defined key

– Use of emoji icons to save screen real estate and memory

• Over 256 defined referenced by &#4digit number

&#E63E &#E641

• http://www.nttdocomo.co.jp/english/p_s/i/make/tag/index.html

• Note does not provide card/deck format of WML – If content exceeds display size must scroll down page– NTT DoCoMo maintains list of cHTML display limits

• cHTML websites can be viewed and developed using standard web tools


cHTML Example 2

• 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN"2 3 4 5 6 <html>7 <head>8 <title>Wireless</title>9 </head>10 11 <body>12 <h1>Internet Search Engines</h1>13 14 <p><strong>Click on the Search Engine 15 address.</strong></p> 16 17 18 <p><a href = http://www.google.comaccesskey=1>Google</a></p>19 20 <p><a href = http://www.askjeeves.com accesskey= 3>Ask Jeeves</a></p> 21 </body>22 </html>


cHTML

• cHTML/i-mode simulators available• cHTML also called i-mode compatible HTML• Seems to be going out of favor in countries that were

late to implement (Germany, Australia)


i-mode• Access to Internet services in Japan provided by NTT DoCoMo

– Services• Email, short messages, web, picture exchange, horoscope, ...

– Big success – more than 30 million users in Japan• Many use i-mode as PC replacement• Very simple to use, convenient – specific I-mode button

– Technology • Originally 2G Cellular Technology 28.8 kbit/s, packet oriented • Compact HTML plus proprietary tags, special transport layer (Stop/go, ARQ,

push, connection oriented)

Cellular Net

TLHTTP(S)

cHTML + tagsmobile terminal

CellularNet

TL

mobile network gatewaycontent provider

L1L2IP

TCP

L1L2IP

TCP

L1L2IP

TCP

L1L2IP

TCPHTTP(S)

cHTML + tags


i-mode business model

application

WSP

WTP

WDP

SMS

Example: Operator sends an SMS containing a push message if a new email has arrived. If the user wants to read the email, an HTTP get follows with the email as response.

Popular misconception:WAP was a failure, i-mode is different and a success – wrong from a technology point of view, right from a business point of view…

i-mode as a business model:• Free Development Software• Few access restrictions

DoMoCo‘s ``bill-on-behalf“ for 9%-independent of technology

(GSM/GPRS in Europe,PDC/UMTS in Japan)


i-mode based on WAP 2.0

user equipment gateway

i-mode can use WAP 2.0/Internet protocols (example: i-mode in Germany over GSM/GPRS)

server

cHTML

HTTP

WTCP

IP

L2

L1

SSL

WTCP

IP

L2

L1

TCP

IP

L2

L1

cHTML

HTTPSSL

TCP

IP

L2

L1


i-mode system requirements

3GPP standard system

MVoice termination notified and responded during i-mode communications

Voice call notification during i-mode session

GIF (O: JPEG)MStand-by screen downloadImage download

SMF basedMRinging melody downloadRinging tone download

Compatible i-mode JAVA

OJava application made availableJava

SSL (Version 2, 3), TLS 1

OEnd-End securitySecurity

HTTP 1.1MInternet e-mail and inter-terminal emailE-mail

i-mode compatible HTML (cHTML+tags)

MPortal Site / Internet AccessWEB Access

RequirementStatusDescriptionsFunctions


i-mode requirements

Hard or soft keyODedicated buttoni-mode button

HTTP 1.1MBrowser specifications to be notifiedUser Agent

To be defined by operators

MCharacter code set supported by browser and used to develop content

Character code set supported

To be defined by operators (e.g. 500 byte, 1K byte, 10K byte)

MNumber of characters (byte) per e-mailNumber of characters per e-mail

Specifications depend on each operator’s billing system

OPacket usage charges can be billed to third party

Reverse billing

Specifications depend on each operator’s billing system

MContent charge collection on behalf of Content Provider

Third party payment collection

RequirementStatusDescriptionsFunctions


i-mode examples


Wireless Markup Languages• Markup Languages: ML

describe how a document is rendered

• HDML: Handheld Device ML • WML : Wireless ML

– Attempt to get one markup language – part of WAP

• cHTML: compact HTML– Developed from i-mode

service in Asia• XHTML-MP: extensible HTML

mobile profile – Part of WAP 2.0

• Recent survey found that most content in cHTML and WML. WAP 2.0 browsers support WML and XHTML-MP.


XHTML-MP• XHTML-MP: eXtensible HTML Mobile Profile• The official mark-up language of WAP 2.0• Evolved from WML, HTML and cHTML• Meant to unify development and replace older

markup languages• Contains:

– Subset of XHTML (which is an XML version of HTML)– Some of WML 1.0 (WTIA)– Mobile Profile specific components

• Format more similar to HTML– easier for HTML developers to learn

• Leverage XML development base


XHTML-MP• Excludes many XML functions

– Frames– Image Maps– Scripting– Complex forms– Nested cascading style sheets

• Also excludes many WML functions– No scripting– No Deck/card structure– No Timer– No Softkeys


XHTML-MP• Like XML support cascading style sheets (CSS)

– CSS allows one to establish a consistent design and format across a set of documents

• Excludes many XML functions– Frames– Image Maps– Scripting– Complex forms– Nested cascading style sheets

• Also excludes many WML functions– No scripting– No Deck/card structure– No Timer– No Softkeys


XHTML-MP

• Inherits the following from XHTML Basic– Structure– Text– Hypertext– List– Basic forms– Basic tables– Images (GIF,JPEG, PNG)– Meta-information– Subset of XHTML forms and presentation modules– Style Sheets


XHTML-MP Format• Document prologue:

– Document type and XML Version– Prepares parsing engine to interpret deck

according to Document Type Definition (DTD)<?xml version="1.0" charset="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile

1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

– Markup begins with <html> tag and concludes with </html>

– All elements are bracketed <> and </><element> value </element>


XHTML-MP

<base>Base<link> for style sheetsLink<meta>Meta info<object>,<param>Object<img>Image<caption>,<table>,<td>,<trt>,<th>Basic Tables

<form>,<input>,<select>,<option>,<textarea>, <fieldset>, <optgroup>

Basic Forms<dl>,<dt>,<dd>,<ol>,<ul>,<li>List<a>Hypertext

<abbr>,<big>, <small> <br>,<em>, <h1>, <h2>, <p>,<var>,,…

Text<body>,<head>,<title>,<html>Structure

Sample ElementsModule

See Tutorial Links on class web page for complete list


XHTML-MP Example <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head><title>About this Site</title>

</head><body><p>This is a test site. </p><hr/>

</body></html>


XHTML-MP Example <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Form Example</title>

</head><body><form method="post" action="/cgi-bin/mailscript">First Name: <input type="text" name="firstname"

size = "10" maxlength="30"/><br>Last: <input type="text" name="lastname" size =

"10“ maxlength="30"/> </form></body>

</html>


XHTML-MP Example 2<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN" "http://www.openwave.com/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<title>XHTML Samples</title></head><body>

<ol><li><a accesskey="1" href="inbox.html">Check

emails</a></li><li><a accesskey="2" href="movies.html">Movies

Info</a></li><li><a accesskey="3"

href="about.html">About</a></li></ol>

</body></html>

Quick access key


XHTML-MP Example 3<?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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Plain Text</title> </head> <body> <p>

Plain text<br/> <em>Lots of emphasis</em><br/> <i>Some italics</i><br/> <b>This should be bold</b><br/> <strong>This one bold too</strong><br/> <b><i>Bold and italic</i></b><br/><q>Just a quote</q><br/> <kbd>mono-spaced</kbd>

</p> </body>


XHTML –MP Example 4

<?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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>

<title>Contacts - R</title> <link href="style.css" rel="stylesheet" type="text/css"/>

</head><body> <p> Pick contact: <ol> <li><a href="contact.jsp?id=32" accesskey="1">Ramona</a></li> <li><a href="contact.jsp?id=45" accesskey="2">Robert</a></li> <li><a href="contact.jsp?id=21" accesskey="3">Romeo</a></li> <li><a href="contact.jsp?id=17" accesskey="4">Ronan</a></li></ol> </p> </body> </html>


XHTML-MP Example 4

<table> <tr><td><img src="pix/titolo.gif" alt=""/></td></tr><tr><td><img src="pix/meandlogo.gif" alt=""/></td></tr> </table> <table> <tr class="purple2">

<td><img src="pix/fr.gif" alt=""/><a class="white" href="http://www.openwave.com">Openwave</a> </td>

</tr><tr class="purple3">

<td><img src="pix/fr2.gif" alt=""/> <a class="white" href="http://oui.sourceforge.net">Open Usability Interface</a>

</td></tr>

<tr class="purple2"> <td><img src="pix/fr.gif" alt=""/> <a class="white"

href="http://wurfl.sourceforge.net">The WURFL</a> </td> </tr> </table> Note fancy presentations may not be consistent on

different devices


Style Options

• XHTML-MP support three options for setting the style/layout of pages

1. In line formating(e.g., <b> bold text </b>)

2. In document (e.g., <style> p { text-align: center} </style>

3. External Style sheet (.css file)<head> <link href="mystyle.css" type="text/css"

rel="stylesheet"/> ... </head> Allows one to establish a consistent design and formating

across all pages (e.g., color, text size, alignment, etc.)See Pitt Lacross example


Transformation of Web content

• XML separates the data from a fixed description of how the data should be displayed

• Stylesheets describe how to display content on client – Method to change look and feel of web site

• One of the big advantages to XML is XLST• Extensible Stylesheet Language Transformation

(XSLT)– Transform XML data into target document formats

(HTML, WML, XHTML-MP, cHTML, etc.)– XSLT engine parses source XML and XSLT

stylesheet


XSLT

• XSLT engine performs transformations on document object model (DOM)

• DOM – logical tree shaped representation of the source document.

• XSLT stylesheet includes matching rules defined on the DOM, a match produces output in the target document.

• Output can include static templates• Some WebDKs aimed at XSLT (Apache

Cocoon)


XSLT to Target XML to Different Devices

WML

cHTML

XHTML-MP

<?xml version=‘1.0’?><weather><country> USA</country><city> Pittsburgh</city><type>Light Rain</type><temperature> 52</temperature><wind-dir> SW </wind-dir><wind-speed> 9</wind-speed></weather>

XSLTfor WMLWAP 1.0

XSLTfor i-mode

XSLTXHTML-MP

WAP 2.0

XSLTParserEngine


XSLT to transform to WML<?xml version = “1.0” ?><xsl :stylesheetVersion = “1.0”xmlns:xsl = “http://www.w3.org/1999/XSL/Transform”><xsl :template match = “weather”><wml><card title = “{country}-today”><p align = “center”><i>city:</i></p><p><u><xsl :value-of select = “city”/></u><br/><xsl:value-of select = “type”/> <xsl:text> </xsl:text> <xsl:value-of select = “temperature”/>oF<br/><xsl:value-of select = “wind-dir”/> Wind <xsl:value-of select = “wind-speed”/> km/h</card></wml></xsl :template></xsl :stylesheet>


WML Output

<?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 = “USA-today”><p align = “center”><i>city:</i></p><p><u>Pittsburgh</u><br/>Light Rain 52oC<br/>SW Wind 9m/h</p></card></wml>


XSLT

• In theory XSLT should work -– not easy to get consistent results across

platforms– Effort needed to develop SLT documents– May need multiple XSLT for same WML,

cHTML for different devices – Must manage XSLT versions, etc

• Content adaptation approach – Developing one set of content then adapting it

on the fly to the device


Summary

• Developing web content for handhelds directly– WML– cHTML– XHTML-MP

• Style sheet and transformation possible

• Content Adaptation an issue

Thin Client Development and Wireless Markup …dtipper/2727/2727_Slides11.pdfThin Client Development...

Documents

Transcript of Thin Client Development and Wireless Markup …dtipper/2727/2727_Slides11.pdfThin Client Development...