Only web technology can gurantee cross device, cross platform application. This is true beauty of web standard technology. This will be next generation development of application development in CE market.
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Making mobile apps with web technology (revised)
1. New trend of making mobile
apps with web technology
Manyoung Cho | WebDevMobile.com
manyoung@gmail.com
2. About Me
Web Evangelist
WebDevMobile.com
Opera Software
manyoung@gmail.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung
7. HTML5/CSS3
HTML5 makes web standalone application
http://www.hongkiat.com/blog/48-excellent-
html5-demos/
CSS3 gives rich user experiences
http://www.webdesignerwall.com/trends/47-
amazing-css3-animation-demos/
8. Opera Widget = First
browser based WebApp
Opera introduced browser based application
called widget in 2006
Widget is W3C standard
http://www.w3.org/TR/widgets/
Opera Widget
http://widgets.opera.com
Widget = browser based standalone web
application
9.
10. 2007 : Apple MacOS 10.5
MacOs Dashboard Widget
http://developer.apple.com/macosx/
dashboard.html
http://en.wikipedia.org/wiki/Dashboard_
(software)
HTML5 Canvas was also introducted by Apple
11. 2008 : Widget Chaos!
Google Desktop widget
Yahoo Widget
Naver, Daum Widget
All gone…
Non standard based
12. 2010 : Chrome Webstore
Chrome WebStore = Desktop WebApps
https://chrome.google.com/webstore
Chrome to Phone = Mobile WebApps
15. Smartphone Wars
2007 : Success of iPhone
2008 : Success of AppStore
iPhone : Mobile internet machine
iPhone : Application contents matter
16. Browser Wars
Browser is a killer app of the smartphone
Opera mobile 10
iPhone Safari
Chrome lite
Mobile browser war is more severe than desktop
New technology is applied in mobile browser
18. Mobile Apps Wars
Apple is the only winner
iPod, iPhone2G, iPhone 3G users
Followers can’t defeat this.
19. Anti Apple alliances
Operators
Handset makers
Too many platforms
Windows Mobile, Limo, Android, Brew, SHP,
Symbian, Proprietrary OS….
What can be the crossplatform?
25. Widget Store
Android
(Widget
Engine)
Mobile
Widget Widget
Widget WM
Widget
HTML/ Store
Store
(Widget
CSS/JS Store Engine)
Web Developer
Operator Stores
OEMs Stores
LIMO
(Widget
Engine)
Mobile Phones
27. Widget Examples : ebay
User observes his watching, buying and selling
items.
Each item shows picture, description, price, number
of bids and remaining auction time.
Clicking on the item will open item details in the
browser, where user will be able to log in and bid for
item.
In menu screen user can set his ebay username/
password and configure autorefresh time (in
minutes).
Main screen should contain refresh button.
Widget will contact eBay API directly using HTTP
protocol and retrieve data in JSON or XML format.
28. Widget Examples : Facebook
User will be able to browse list of his friends, see friends details ,see friends
status message history, see and write messages to the friend's wall.
User will be able to poke selected friend, and write a message to him.
If phone and widget runtime supports it, user will be able to take a photo
and post it directly to Facebook, or post photo from phone gallery.
Widget will periodically (time configurable in widget preferences, in minutes)
check if there are new pokes, personal messages or wall messages for the
user.
In case of new action, user will be informed by overlay icon on the widget in
widget gallery.
Note: API key is needed. Check Terms and conditions for using it.
29. Widget Examples : Twitter
User will be able to reply or between any messages from another people.
Clicking on another user username will show this person details at the top of
the screen, and messages just from this user below.
User will be able to set his status on twitter.
User will be able to see list of people he is following and his followers.
Clicking on follower/following name will open that user page.
Each relevant page will also contain a link that opens that page in the
browser.
30. WebApps Pros/Cons
Pros
Easy development than Java/Objective-C
Easy use of OpenAPI/MeshUp
Easy delivery of web contents
Cross platform deployment
Cons
No device H/W controls
Low graphics, multimedia control
31. Extend Web : Device APIs
Contact
Calendar
File system
Messaging
System info :
CPU, Battery, etc
32. Extending Web Spec
JIL (Joint Innovation Lab)
Vodafone, VZW, Softbank, China Mobile
http://www.jil.org/
BONDI(OMTP driven)
W3C Device APIs and Policy
http://www.w3.org/2009/dap/
48. PhoneGap
PhoneGap is an open source development
framework for building cross-platform mobile
apps. Build apps in HTML and JavaScript and still
take advantage of core features in iPhone/
iTouch, iPad, Google Android, Palm, Symbian
and Blackberry SDKs. Learn
http://phonegap.com
49. PhoneGap
Android Android
Market
PhoneGap
Mobile
Widget Apple iPhone
HTML/ Appstore
CSS/JS
Web Developer Blackberr Blackb
y erry
Market
Mobile Phones