Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua,...
-
date post
21-Dec-2015 -
Category
Documents
-
view
213 -
download
0
Transcript of Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua,...
![Page 1: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/1.jpg)
Highlight: A System for Creating and Deploying Mobile Web Applications
Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia Institute of Technology
October 22, 2008 – 21st Annual ACM Symposium on User Interface Software and Technology
![Page 2: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/2.jpg)
Mobile Internet
![Page 3: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/3.jpg)
Accessing the Mobile Web
Site designed for mobile use– Designed for low-end devices– Limited functionality chosen by designer– Costly to create
• Only available for popular, consumer sites
Normal site through a mobile viewport– Most functionality of existing site– Greater costs of navigation
• Many items per page• More pages than needed
![Page 4: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/4.jpg)
Previous Work: Transcoding
Traditional proxy server techniques– Mostly automated
• www.skweezer.com• mobile google search
– Quality of result varies based on site
– Often includes all content of a page
Doesn’t work with AJAX/dynamic JavaScript sites
![Page 5: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/5.jpg)
Goals
Allow end users to create their own mobile “applications” for particular tasks
– No programming required
– Possible for any existing site
– All design decisions made by users
Allow programmers to extend capabilities of mobile applications
![Page 6: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/6.jpg)
mobile app designer(browser extension)
user
mobile user
proxy server
proxy browserweb server
Highlight
webserver
![Page 7: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/7.jpg)
Overview
• Introduction
• Mobile Web Applications
• Server Architecture
• Creating a Mobile Application
• Evaluation
• Conclusion
![Page 8: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/8.jpg)
AA.com – Flight Tracking
![Page 9: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/9.jpg)
AA.com – Flight Tracking
![Page 10: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/10.jpg)
BackpackIt.com – To Do List
![Page 11: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/11.jpg)
BackpackIt.com – To Do List
![Page 12: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/12.jpg)
mobile user
proxy server
proxy browserweb server
Highlight Server Architecture
webserver
mobile applicationdescription
![Page 13: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/13.jpg)
Remote Control Metaphor
![Page 14: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/14.jpg)
Remote Control Metaphor
144
![Page 15: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/15.jpg)
Remote Control Metaphor
144
![Page 16: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/16.jpg)
Remote Control Metaphor
![Page 17: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/17.jpg)
Why use this architecture?
Allows re-authoring of sites with dynamic JavaScript and Ajax
Re-authoring can be done in terms of UI design
– Easier to inspect than code, Web Service descriptions
![Page 18: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/18.jpg)
Implementationmobile users proxy
serverweb
servers
![Page 19: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/19.jpg)
Mobile Application Descriptions
Requirements– Support end user authoring environment– Increase possibilities through programming
Implementation– Structured JavaScript– Built on top of standard web APIs (e.g., DOM)– Set of Highlight API methods to make
programming with remote control metaphor easier
![Page 20: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/20.jpg)
Structured JavaScript Format
Based on Storyboard concept
Code divided into chunks corresponding to mobile page (pagelet)
Each pagelet has two methods– Clip method – selects content from page to clip– Event method – navigates to next content
based on mobile interaction
![Page 21: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/21.jpg)
Application Descriptions
clip
clip
clip
event
event
pagelet n
pagelet n+1
pagelet n-1
![Page 22: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/22.jpg)
Writing Application Descriptions
End-user authoring environment generates JavaScript code in this format
– Programmers can edit this code to modify an app
We have written several apps from scratch– BackpackIt.com To Do List– BlueMail– Fitday.com
![Page 23: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/23.jpg)
Overview
• Introduction
• Mobile Web Applications
• Server Architecture
• Creating a Mobile Application
• Evaluation– Breadth of web sites that can be re-authored– How easy is it to write mobile application
descriptions?
• Conclusion
![Page 24: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/24.jpg)
Breadth of possible applications
Created applications from a variety of different sites– AA.com– Amazon.com– Google Image Search– Mapquest.com– SFGate.com– Weather.com– Ebay– Fitday.com– Buy.com– Barnes & Noble.com– IBM internal directory
(BluePages)
– Beatthetraffic.com
– Backpackit.com
– BlueMail
– Aeo.com
– HomeDepot.com
– wellnessforlife.com
– Facebook.com
– and many more…
![Page 25: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/25.jpg)
How easy is it to create descriptions?
• Code analysis• Formative user study
![Page 26: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/26.jpg)
Mobile App Code Numbers
Application Name# of
Pagelets LinesAverage
Lines/PageletAverage Clip Lines/Pagelet
BluePages* 5 174 69.40 44.80
Google Image Search* 3 130 41.00 27.00
AEO Store Locator* 2 81 37.00 27.50
BlueMail 3 127 36.33 22.00
AA Flight Tracker* 3 112 35.33 22.33Home Depot Store Finder*
2 73 33.00 24.00
Traffic #2* 1 33 26.00 26.00
Traffic #1 3 58 18.33 15.67
Facebook Status 4 59 14.75 7.50
BackPack To-Do 3 46 14.33 5.67
* Indicates some code automatically generated by our end-user authoring tool
![Page 27: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/27.jpg)
Formative evaluation
Goals– Will programmers understand the
concepts/API?– Can they create applications of their own?
Two subjects from our research lab– Not regular users of mobile web– Experienced web programmers (JavaScript,
DOM, etc.)
![Page 28: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/28.jpg)
Procedure
• 1 hour verbal introduction to the system
• Provided with programmer guide – Complete BackPack todo list example with source
code
– API reference
• Provided with choice of authoring/debugging tools– Eclipse Web Tools Platform editor, Firebug, Venkman
• Asked users to brainstorm their own mobile app idea and then try to implement it
![Page 29: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/29.jpg)
Results
Subject-chosen applications:
– CBS 5 Traffic Reports
– Facebook Status
![Page 30: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/30.jpg)
Results, cont.
• All subjects were able to build their chosen application
• Typical problems of learning a new API– What methods are available? How are they
used?
• Conceptual model of remote control not immediately intuitive
• Clip/event method grouping does not match expectations of web programmers
![Page 31: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/31.jpg)
Overview
• Introduction
• Mobile Web Applications
• Server Architecture
• Creating a Mobile Application
• Evaluation
• Conclusion
![Page 32: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/32.jpg)
Conclusion
Mobile applications can be created by re-authoring existing web sites
– Proxy browser/remote control metaphor allows re-authoring of sites with AJAX and dynamic JavaScript
– Evaluation suggests programmers can use system
![Page 34: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/34.jpg)
![Page 35: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/35.jpg)
![Page 36: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/36.jpg)
![Page 37: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/37.jpg)
Breadth and Benefits
InteractiveElements Size (kB)
PercentSizeDescription Orig Hilght Orig Hilght
Check status of AA flight 736 3 711 3.6 0.5%
Update Facebook status 217 5 296 0.5 0.2%
Find nearby Wi-fi hotspot 74 18 1072 2.8 0.3%
Get weather in my area 486 6 1079 7 0.6%
Sprint cellphone usage 175 6 739 4.6 0.6%
Log today’s exercise 128 4 393 0.9 0.2%
Update Fitday food diary 169 38 145 12.7 8.8%
Get calories for food 88 16 63 11.5 18.3%
Real estate in my area 274 35 1036 194.1 18.7%
Show trip itineraries 77 17 726 42.7 5.9%
Find Amazon book price 823 4 844 4.1 0.5%
![Page 38: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/38.jpg)
Highlight Programmed Applications
![Page 39: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/39.jpg)
amazon.com – Buy one item
![Page 40: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/40.jpg)
amazon.com – Buy one item
![Page 41: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/41.jpg)
amazon.com – Buy one item
![Page 42: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/42.jpg)
amazon.com – Buy one item
![Page 43: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/43.jpg)
amazon.com – Buy one item
![Page 44: Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d6c5503460f94a4c348/html5/thumbnails/44.jpg)
amazon.com – Buy one item