The Wireless Web: The Wireless Web: Not!Not!

T376 / CS471, Winter 01T376 / CS471, Winter 01© 1999-2001 Armando Fox© 1999-2001 Armando Fox

fox@cs.stanford.edufox@cs.stanford.edu

© 2001

Stanford

Project AdministriviaProject Administrivia

By today: teams formed, proposals on WebBy today: teams formed, proposals on Web Advisors will start to review them shortlyAdvisors will start to review them shortly

Design review meetings: you can schedule Design review meetings: you can schedule yourself for…yourself for… Feb 8-9 time slotsFeb 8-9 time slots

Use link in email sent to cs241Use link in email sent to cs241

What hardware/software will you need to What hardware/software will you need to borrow/buy?borrow/buy?

© 2001

Stanford

OutlineOutline

Approaches to wireless “thin clients”Approaches to wireless “thin clients” ““Straight but reduced” ports: MS Pocket IE, C-HTML, etc.Straight but reduced” ports: MS Pocket IE, C-HTML, etc.

Adaptation by proxy: ProxiNet and Palm VII “Web Adaptation by proxy: ProxiNet and Palm VII “Web clipping”clipping”

Targeting phones: the WAP Forum and protocolsTargeting phones: the WAP Forum and protocols

The thinnest of clients: smart pagersThe thinnest of clients: smart pagers

Wireless and Palms - technology choicesWireless and Palms - technology choices

HCI: why technology improvements are largely HCI: why technology improvements are largely irrelevantirrelevant

© 2001

Stanford

1996-1998: Three-Way 1996-1998: Three-Way ConvergenceConvergence

WWWTechnologies

WirelessAccess

Thin Clients

Complex content, services, corporate applications

High functionalitybut palm-size

portable devices

Inexpensive but slowwireless access

Wireless Internet Becomes Real

Wireless Internet Becomes Real

© 2001

Stanford

Specific Announcements & Specific Announcements & ProductsProducts

Palm Pilot: the resurrection of PDA’sPalm Pilot: the resurrection of PDA’s Cut the right corners to solve someone’s problemCut the right corners to solve someone’s problem

Even better when combined with wireless…though its Even better when combined with wireless…though its designers didn’t intend thatdesigners didn’t intend that

WAP Forum announcementWAP Forum announcement Took a long time to pick up steam, but it placed a stake in Took a long time to pick up steam, but it placed a stake in

the ground for wireless data to smart phonesthe ground for wireless data to smart phones

Japanese (primarily) hybrid phonesJapanese (primarily) hybrid phones I-mode: compact HTML, a simple text-centric Web all over I-mode: compact HTML, a simple text-centric Web all over

again; what can happen when you control the phones again; what can happen when you control the phones andand the servicethe service

J-mode: the next stepJ-mode: the next step

© 2001

Stanford

The Big PictureThe Big Picture

Existing Web content and services are not designed Existing Web content and services are not designed for non-PC devicesfor non-PC devices Displays too small or text-onlyDisplays too small or text-only

Slow connection speedSlow connection speed

Data input methods very limited (phone keypad or pager Data input methods very limited (phone keypad or pager buttons)buttons)

etc.etc.

But the Web is where the action is…so we can:But the Web is where the action is…so we can:

1.1. Adapt existing content on the fly and automaticallyAdapt existing content on the fly and automatically

2.2. Make browsers run on non-PC devicesMake browsers run on non-PC devices

3.3. Manually reauthor to new standards (there are so many!)Manually reauthor to new standards (there are so many!)

4.4. Make an end run around the problem and move closer to Make an end run around the problem and move closer to the sourcethe source

© 2001

Stanford

Get content from origin Get content from origin Internet serversInternet servers

Separate by datatypeSeparate by datatype

Perform device-specific Perform device-specific transformationstransformations

Compression is a nice Compression is a nice side effect…side effect…

We’ll discuss structure We’ll discuss structure of this app in detail of this app in detail laterlater

Armando Fox

PhD Candidate, UC Berkeley Computer Science Division

Advisor: Eric Brewer

Armando Fox

PhD Candidate, UC Berkeley Computer Science Division

Advisor: Eric Brewer

1. Content Adaptation1. Content Adaptation

© 2001

Stanford

Pay Only For the Bytes You NeedPay Only For the Bytes You Need

Ultimately, users know bestUltimately, users know best proxy transforms as best as it can, but gives users a way proxy transforms as best as it can, but gives users a way

to “force” proxy to deliver original contentto “force” proxy to deliver original content

here, a simple client-side UI enhancement is coupled with here, a simple client-side UI enhancement is coupled with proxy-side refinement intelligenceproxy-side refinement intelligence

transformed contentfrom Proxy

refined contentfrom Proxy

local UIinteraction

© 2001

Stanford

More On AdaptationMore On Adaptation

How to make adaptation dynamicHow to make adaptation dynamic Why would you want to do this?Why would you want to do this?

How to structure an adaptation systemHow to structure an adaptation system

Adaptation workloads have nice systems Adaptation workloads have nice systems propertiesproperties State managementState management

Replication/parallelizationReplication/parallelization

CachingCaching

An excellent workload for clustersAn excellent workload for clusters

© 2001

Stanford

Limitations of AdaptationLimitations of Adaptation

Presentation is messed upPresentation is messed up Some content just doesn’t translate to smaller screensSome content just doesn’t translate to smaller screens

Some content is purpose designed at the pixel level for Some content is purpose designed at the pixel level for desktop browsersdesktop browsers

User experience is often terrible: navigation is User experience is often terrible: navigation is cumbersome…why?cumbersome…why? Limited inputLimited input

Each roundtrip to server takes a lot longerEach roundtrip to server takes a lot longer

Feedback often provided using graphics that don’t reproduce Feedback often provided using graphics that don’t reproduce wellwell

Adaptation of existing Web content is a useful Adaptation of existing Web content is a useful technology, but by itself won’t result in an acceptable technology, but by itself won’t result in an acceptable user experience.user experience.

© 2001

Stanford

2. Straight Ports2. Straight Ports

Example: Microsoft Pocket Internet Explorer Example: Microsoft Pocket Internet Explorer (WinCE)(WinCE) Subset of MSIE desktop functionalitySubset of MSIE desktop functionality

No Java, JavaScript, or plug-insNo Java, JavaScript, or plug-ins

Slow to render complex pagesSlow to render complex pages

Power-intensive! Power-intensive! (Battery life does (Battery life does notnot follow Moore’s Law) follow Moore’s Law)

Real limitations come from HTTP/HTMLReal limitations come from HTTP/HTML Images are scaled -- Images are scaled -- afterafter downloading downloading

Complex pages (many frames, etc.) difficult to render -- Complex pages (many frames, etc.) difficult to render -- browser can only throw up its hands browser can only throw up its hands afterafter content arrives content arrives

Many roundtrips (separate connections)Many roundtrips (separate connections)

Suffers from similar limitations as adaptationSuffers from similar limitations as adaptation

© 2001

Stanford

Performance of Ports vs. ProxiesPerformance of Ports vs. Proxies

UC Berkeley research prototype of ProxiWeb, UC Berkeley research prototype of ProxiWeb, vs. Netscape Navigator on laptop w/same vs. Netscape Navigator on laptop w/same

bandwidthbandwidth

© 2001

Stanford

3. Reauthoring: Compact HTML3. Reauthoring: Compact HTML

Proposed by Japanese ACCESS ConsortiumProposed by Japanese ACCESS Consortium engages in Internet and middleware standards activities in engages in Internet and middleware standards activities in

JapanJapan

Similar to W3C, but focused on practical applications for Similar to W3C, but focused on practical applications for consumer electronics (Web terminals, kiosks, etc.)consumer electronics (Web terminals, kiosks, etc.)

Approach: subset HTML (no frames, tables, JPG, image Approach: subset HTML (no frames, tables, JPG, image map, background images, stylesheets)map, background images, stylesheets) Reauthoring assumedReauthoring assumed

Deployed in jMode phonesDeployed in jMode phones

Note: Japanese “Internet phones”Note: Japanese “Internet phones” are much more ambitious than are much more ambitious than current U.S. and European current U.S. and European models!models! Kyocera video cell phone

© 2001

Stanford

Reauthoring: WAPReauthoring: WAP

WAP: Wireless Applications ProtocolWAP: Wireless Applications Protocol Not-for-profit “WAP forum” (analogous to W3C) formed in Not-for-profit “WAP forum” (analogous to W3C) formed in

19941994

Founding members: Unwired Planet (now Phone.com), Founding members: Unwired Planet (now Phone.com), Motorola, Ericsson, NokiaMotorola, Ericsson, Nokia

Membership now ~100 companiesMembership now ~100 companies

The WAP protocolsThe WAP protocols Cover everything from link layer to application layerCover everything from link layer to application layer

Of interest here: WML (formerly HDML)Of interest here: WML (formerly HDML)

© 2001

Stanford

Wireless Markup LanguageWireless Markup Language

Formerly HDML, proprietary to Unwired PlanetFormerly HDML, proprietary to Unwired Planet Became “open standard” after WAP forum startedBecame “open standard” after WAP forum started

Target: cell phones with 2-10 line text-only displays, icon Target: cell phones with 2-10 line text-only displays, icon graphicsgraphics

A cross between a markup language and HyperCardA cross between a markup language and HyperCard Metaphor: a “deck” of display cardsMetaphor: a “deck” of display cards

Display information (including support for images, rarely Display information (including support for images, rarely used)used)

Encode a series of menus for keypad navigationEncode a series of menus for keypad navigation

Data entry using alphanumeric mode of phone keypadData entry using alphanumeric mode of phone keypad

““Form submission” -like mechanism to retrieve data from Form submission” -like mechanism to retrieve data from InternetInternet

© 2001

Stanford

WML, cont’d.WML, cont’d.

The WML browserThe WML browser Interprets WML decks, displays info, etc.Interprets WML decks, displays info, etc.

Maps phone’s user interface (keypad, soft buttons, dials, Maps phone’s user interface (keypad, soft buttons, dials, etc.) to UI controls for menu navigation, data entry, etc.etc.) to UI controls for menu navigation, data entry, etc.

WML apps served from HTTP server via WAP WML apps served from HTTP server via WAP gatewaygateway Apps live onApps live on

standard Webstandard Webserversservers

Gateway Gateway operated byoperated bywireless datawireless dataproviderprovider

Diagram © 1999 WAP Forum

© 2001

Stanford

WML Architecture NotesWML Architecture Notes

WAP architecture isolates application delivery WAP architecture isolates application delivery App developers don’t deal with wireless transport directly App developers don’t deal with wireless transport directly

(since WAP leverages HTTP infrastructure for app distribution)(since WAP leverages HTTP infrastructure for app distribution)

Becomes a non-differentiator for phonesBecomes a non-differentiator for phones

App developers don’t have to commit to one phone platformApp developers don’t have to commit to one phone platform

Lots of incompatibilities across devices and browsersLots of incompatibilities across devices and browsers WMLscript scripting language: part of the spec, but not WMLscript scripting language: part of the spec, but not

deployed in practicedeployed in practice

HDML 1.0 vs 1.1 vs WMLHDML 1.0 vs 1.1 vs WML

VXML in future?VXML in future?

In practice, everyone uses least-common-denominatorIn practice, everyone uses least-common-denominator

Free emulator available from Unwired PlanetFree emulator available from Unwired Planet

© 2001

Stanford

WML Is Not HTMLWML Is Not HTML

reauthoring required, or applications have to be reauthoring required, or applications have to be developed from the ground updeveloped from the ground up

Differences are conceptual, not syntacticDifferences are conceptual, not syntactic WAP browser/apps are highly stateful (why?)WAP browser/apps are highly stateful (why?)

No metaphor for “clicking on a link”…only menu selectionNo metaphor for “clicking on a link”…only menu selection

WAP deck can control history stack WAP deck can control history stack

A thought: can we use the proxy approach again?A thought: can we use the proxy approach again? At least two scenarios for converting WML to HTMLAt least two scenarios for converting WML to HTML

Case 1: we can make strong assumptions about structure, Case 1: we can make strong assumptions about structure, semantics, syntax of contentsemantics, syntax of content

Case 2: we can’tCase 2: we can’t

© 2001

Stanford

Merging WAP With the Web: Case Merging WAP With the Web: Case 11

Semantic/structural assumptionsSemantic/structural assumptions Content was specifically authored for “small” devicesContent was specifically authored for “small” devices

Content sourced from more structured data (e.g. Web Content sourced from more structured data (e.g. Web front end to a database)front end to a database)

Future: XML and WIDL for describing content (more later)Future: XML and WIDL for describing content (more later)

Syntactic assumptionsSyntactic assumptions Simple runtime scan of contentSimple runtime scan of content

Look for “troublesome” elements: frames, tables, Look for “troublesome” elements: frames, tables, imagemaps, …imagemaps, …

Translate, or drop?Translate, or drop?

© 2001

Stanford

Case 1, cont’d.Case 1, cont’d.

Example: WirelessKnowledgeExample: WirelessKnowledge Exchange Server is the center of the worldExchange Server is the center of the world

Revolv service makes WAP phone into limited Exchange Revolv service makes WAP phone into limited Exchange clientclient

Example: Oracle Panama (last year)Example: Oracle Panama (last year) Many Web sites already backed by RDBMSMany Web sites already backed by RDBMS

Instead of wrapping query output in HTML, wrap in HDMLInstead of wrapping query output in HTML, wrap in HDML

Better: wrap in XML, then use XSL/XSLT for presentationBetter: wrap in XML, then use XSL/XSLT for presentation

© 2001

Stanford

Merging WAP With the Web: Case Merging WAP With the Web: Case 22

No No assumptions about contentassumptions about content

Can apply some standard tricks for a few things…Can apply some standard tricks for a few things… Client side imagemaps: extract ALT text and anchorsClient side imagemaps: extract ALT text and anchors

Images: extract ALT textImages: extract ALT text

Navbars: hope there’s a textual version farther down the Navbars: hope there’s a textual version farther down the pagepage

Making the result Making the result syntactically acceptablesyntactically acceptable is “easy” is “easy”

Making it Making it usableusable is a different story is a different story

If you use WAP, plan for it from the moment you start If you use WAP, plan for it from the moment you start designing your data schema and user interactionsdesigning your data schema and user interactions

© 2001

Stanford

The Age of “Everywhere”The Age of “Everywhere”

Everything is EverywhereEverything is Everywhere ““Java Everywhere”Java Everywhere”

““Windows Everywhere”Windows Everywhere”

““WAP Everywhere??” How about “IP everywhere”?WAP Everywhere??” How about “IP everywhere”?

How about it? IP to a cell phone?How about it? IP to a cell phone? How does this argument play in the “proxy camp”?How does this argument play in the “proxy camp”?

Yet, many (most?) proxies are TCP/IP based…Yet, many (most?) proxies are TCP/IP based…

So how about “Existing standards everywhere”?So how about “Existing standards everywhere”?

© 2001

Stanford

Pagers: the Thinnest of ClientsPagers: the Thinnest of Clients

Early yearsEarly years 1921: first use of paging, Detroit Police Dept.1921: first use of paging, Detroit Police Dept.

1976: POCSAG radio paging code1976: POCSAG radio paging code

1980’s: numeric-display pagers1980’s: numeric-display pagers

Current growth: >20% per year in USCurrent growth: >20% per year in US In Japan, paging is on the way out!In Japan, paging is on the way out!

Far thinnerFar thinner than PDA’s or WAP phones than PDA’s or WAP phones Tens of KB of memory, embedded OSTens of KB of memory, embedded OS

< 6400 baud for most systems< 6400 baud for most systems

© 2001

Stanford

Paging ProtocolsPaging Protocols

Motorola FLEX: widely-licensed one-way paging Motorola FLEX: widely-licensed one-way paging protocolprotocol 6400 baud, fallback to 32006400 baud, fallback to 3200

4-bit checksum to pager4-bit checksum to pager

In principleIn principle, 30K char limit, 30K char limit

ReFLEX: Two-way extension to FLEXReFLEX: Two-way extension to FLEX

Motorola FLEXscript SDKMotorola FLEXscript SDK For designing Motorola SmartPager appsFor designing Motorola SmartPager apps

1-way or 2-way1-way or 2-way

Model seems similar to Web clippingModel seems similar to Web clipping

© 2001

Stanford

Combining Paging and 2-Way DataCombining Paging and 2-Way Data

Paging system excels at short notificationsPaging system excels at short notifications Ubiquitous coverageUbiquitous coverage

InexpensiveInexpensive

Range of devices (digits only, alphanumeric, pixel-Range of devices (digits only, alphanumeric, pixel-addressable)addressable)

2-way data link excels at selectively pulling down 2-way data link excels at selectively pulling down more contentmore content

Idea: combine the two capabilitiesIdea: combine the two capabilities Especially in devices that are capable of bothEspecially in devices that are capable of both

Examples: PCS phones, some PDA’s (with pager cards) Examples: PCS phones, some PDA’s (with pager cards)

© 2001

Stanford

Integration of Push and PullIntegration of Push and Pull

ProxiWeb (browser) used as universal display clientPushed information seamlessly integrated with pulled information

PushBack example: © 1999 ProxiNet, Inc.

© 2001

Stanford

Other Wireless TechnologiesOther Wireless Technologies

Web clipping and Palm.net (PQA)Web clipping and Palm.net (PQA) Basically a proxied approach with subset HTMLBasically a proxied approach with subset HTML

Focused on user experienceFocused on user experience

OracleMobile - a completely hosted mobile app OracleMobile - a completely hosted mobile app environmentenvironment You provide your own Web serverYou provide your own Web server

You code your presentation layer in You code your presentation layer in MobileXMLMobileXML

Your app is hosted on Your app is hosted on theirtheir server, which makes calls to server, which makes calls to youryour server and handles the WAP devices server and handles the WAP devices

They have ready made “modules” including weather, ATM They have ready made “modules” including weather, ATM locator, etc.locator, etc.

© 2001

Stanford

Reliability, Latency, CoverageReliability, Latency, Coverage

Which is most appropriate for Which is most appropriate for youryour service? service?

Cell phone Cell phone (SMS or (SMS or WAP)WAP)

1-way pager1-way pager 2-way pager2-way pager

ReliabilityReliability End-to-end End-to-end reliablereliable

Best-effort, but Best-effort, but can build e2e on can build e2e on toptop

Reliable Reliable notification notification

End-to-End-to-end ackend ack

NoNo NoNo NoNo

Delivery Delivery latencylatency

BimodalBimodal Short (<4 min)Short (<4 min) DependsDepends

PersistencPersistencee

YesYes DependsDepends DependsDepends

AvailabilitAvailability/y/CoverageCoverage

GoodGood ExcellentExcellent FairFair

© 2001

Stanford

Wireless & Palm: Technology Wireless & Palm: Technology ChoicesChoices

Direct HTML browsingDirect HTML browsing Intellisync Browse-it now in public beta Intellisync Browse-it now in public beta

(www.intellisync.com)(www.intellisync.com)

Use existing HTML authoring tools, etc.Use existing HTML authoring tools, etc.

Requires wide-area connectivity (Metricom, OmniSky)Requires wide-area connectivity (Metricom, OmniSky)

Site will be portable to WinCE browsers such as Pocket IESite will be portable to WinCE browsers such as Pocket IE

Palm VII PQAPalm VII PQA OnlyOnly works with Palm VII or OmniSky-enabled Palm III/V works with Palm VII or OmniSky-enabled Palm III/V

PQA dev kit is free from Palm, mostly use standard toolsPQA dev kit is free from Palm, mostly use standard tools

Waba (a subset of Java - but Waba (a subset of Java - but notnot the libraries!) the libraries!) Code entire standalone apps for the PalmCode entire standalone apps for the Palm

Network connectivity is something of a pain in the buttNetwork connectivity is something of a pain in the butt

© 2001

Stanford

HCI Issues: Voice ControlHCI Issues: Voice Control

Myth: perfect voice recognition will solve all HCI Myth: perfect voice recognition will solve all HCI problems related to phone-based servicesproblems related to phone-based services

Reality of voice interfaces:Reality of voice interfaces:

Inherently sequentialInherently sequential

User must remember context and choicesUser must remember context and choices

Big problem with recognizing commands vs. dataBig problem with recognizing commands vs. data

User is usually distracted because they’re doing User is usually distracted because they’re doing something else! (Otherwise they’d use a data service)something else! (Otherwise they’d use a data service)

Moral: Use voice where it’s the most natural Moral: Use voice where it’s the most natural interaction (e.g. to leave a message)interaction (e.g. to leave a message)

© 2001

Stanford

HCI Issues: Network SpeedHCI Issues: Network Speed

Myth: fast, widely-available 3G networks will solve Myth: fast, widely-available 3G networks will solve usability problems for wireless apps.usability problems for wireless apps.

Reality:Reality:

How much data can you stream to a cell phone? Is How much data can you stream to a cell phone? Is “talking head” videoconferencing that compelling?“talking head” videoconferencing that compelling?

Most Most realreal limitations are limitations are unrelatedunrelated to network speed to network speed Limited screen sizeLimited screen size

Limited data-input capabilityLimited data-input capability

Technologies have been developed that are pretty effective at Technologies have been developed that are pretty effective at working around slow networks!working around slow networks!

Slow networks hamper some apps, but are not likely to be Slow networks hamper some apps, but are not likely to be the main “dealbreaker” for today’s apps.the main “dealbreaker” for today’s apps.

© 2001

Stanford

HCI Issues SummaryHCI Issues Summary

Technology breakthroughs will not provide “magic Technology breakthroughs will not provide “magic bullet”bullet” Convenience of doing task is critical: minimize number of clicks Convenience of doing task is critical: minimize number of clicks

Compare to Palm Pilot!Compare to Palm Pilot!

How can you exploit task context to do this?How can you exploit task context to do this? Location of the phoneLocation of the phone

Stored information about user in their profileStored information about user in their profile

Other sources of context?Other sources of context?

Remember: things that are easy on a desktop Web Remember: things that are easy on a desktop Web browser become awkward on a smaller device.browser become awkward on a smaller device.

Wireless experience must be carefully designed--not Wireless experience must be carefully designed--not retrofitted from the Web experienceretrofitted from the Web experience

© 2001

Stanford

ConclusionsConclusions

Consumer wireless is here, ready or notConsumer wireless is here, ready or not

The user experience must come firstThe user experience must come first Most current efforts have floundered in not observing thisMost current efforts have floundered in not observing this

Lots of turbulence in the area right nowLots of turbulence in the area right now Competing application standards: WAP, C-HTML, HTML, Competing application standards: WAP, C-HTML, HTML,

various proxied approachesvarious proxied approaches

Phones becoming “open” platforms (via WAP)Phones becoming “open” platforms (via WAP)

PDA’s being served by proprietary wireless (Palm VII), open PDA’s being served by proprietary wireless (Palm VII), open standards based wireless (ProxiNet), cradle/dock based standards based wireless (ProxiNet), cradle/dock based offline browsing (MS Channels and Channel Viewer)offline browsing (MS Channels and Channel Viewer)

No 800-pound gorillas yet…No 800-pound gorillas yet…it may pay to stay it may pay to stay agnosticagnostic