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.

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

3. Agenda
 History of WebApps
 Web as Apps
 Smartphone Wars
 PhoneGap
 Mobile Web or Mobile App?

4. History of WebApps

5. Web as Application
 Old days = ASP/PHP/JSP
 Web program for web service
 Mostly e-commerce sites

6. Web technology evolves

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

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

13. Web apps Demo
 Web apps? = Piece of cake

14. Smartphone wars

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

17. Mobile Apps Wars

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?

20. It’s WEB!
 Cross Device
 Cross Platform

21. Web as mobile apps

22. Anti Apple alliances
 2008 : Using web as cross platform mobile
application by Operators

23. Widget runtime
 Web application platform
 Browser rendering engine based
 HTML/CSS/Javascript is the main technology
 Operator/OEM driven
Widget Manager UI
Widget Runtime Engine
= Browser Engine
(Opera, Webkit, etc)
Android WM LIMO

24. Widget Runtime

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

26. Widget Runtime Demo
 http://www.youtube.com/watch?v=3xpS21aR-
BQ
 http://widget.developer.vodafone.com/en/
 http://www.youtube.com/watch?v=3xpS21aR-
BQ

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/

33. Widgets = Mobile apps

34. Samsung Widget SDK
 http://innovator.samsungmobile.com

35. Nokia Ovi Developer
 http://www.forum.nokia.com/

36. Vodafone Betavine
 http://www.betavine.net/bvportal/home.html

37. WAC(Wholesale Application
Community)
 Cross-platform mobile apps
 Cross-device apps
 Wholesale Applications Community

38. Global Appstore

39. WAC
 Widgets – Widget Runtime, SDK, Documentation,
WAC Device API spec.
 Operator API

40. K-WAC

41. Size does matter
Units
Cellphone
Smartphone
Units
iPhone
0 200 400 600 800 1000 1200 1400

42. Altogether!
 HTML5/CSS3/SVG
 Devices API
 Huge market
 20 Global operators
 5 Handset makers

43. Web UI Components

44. Web UI Framework : iUI
 iUI: iPhone User Interface Framework
 Javascript, HTML, CSS
 Demo
http://chriscarey.com/projects/mythtv/iphone/

45. Web UI Framework :
JQTouch
 JQTouch
 Similar to native app UI
 Javascript, HTML, CSS
 JS Library
 http://www.jqtouch.com/preview/demos/main/
#home

46. Web UI Framework : Sencha
 HTML5, CSS3, Javascript
 Resolution independent
 JS Library
 http://touchstyle.mobi/app/

47. PhoneGap

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

50. PhoneGap.js
 Device API to control phone resources

51. Phonegap
 http://phonegap.com

52. Web or Apps?

53. Web or Apps?
 Same UX
 Doesn’t matter
 http://www.youtube.com/watch?v=-61h8UGsi_M

54. Web as application
 New era of mobile apps
 By Web standard technology
 HTML5/CSS3 is much powerful
 Cross device/platform

55. Thank you for listening
http://webdevmobile.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung