New trend of making mobile
apps with web technology
Manyoung Cho | WebDevMobile.com

manyoung@gmail.com
About Me
  Web Evangelist
  WebDevMobile.com

  Opera Software

  manyoung@gmail.com


  Blog : http://manyoung.net

...
Agenda
 History of WebApps

 Web as Apps

 Smartphone Wars

 PhoneGap

 Mobile Web or Mobile App?
History of WebApps
Web as Application
 Old days = ASP/PHP/JSP

 Web program for web service

 Mostly e-commerce sites
Web technology evolves
HTML5/CSS3
 HTML5 makes web standalone application
  http://www.hongkiat.com/blog/48-excellent-
  html5-demos/



 CSS3 ...
Opera Widget = First
browser based WebApp
 Opera introduced browser based application
  called widget in 2006

 Widget i...
2007 : Apple MacOS 10.5
 MacOs Dashboard Widget

 http://developer.apple.com/macosx/
  dashboard.html

 http://en.wikip...
2008 : Widget Chaos!
 Google Desktop widget

 Yahoo Widget

 Naver, Daum Widget

 All gone…

 Non standard based
2010 : Chrome Webstore
 Chrome WebStore = Desktop WebApps

 https://chrome.google.com/webstore

 Chrome to Phone = Mobi...
Web apps Demo
 Web apps? = Piece of cake
Smartphone wars
Smartphone Wars
 2007 : Success of iPhone

 2008 : Success of AppStore

 iPhone : Mobile internet machine

 iPhone : A...
Browser Wars
 Browser is a killer app of the smartphone

 Opera mobile 10

 iPhone Safari

 Chrome lite

 Mobile brow...
Mobile Apps Wars
Mobile Apps Wars
 Apple is the only winner

 iPod, iPhone2G, iPhone 3G users

 Followers can’t defeat this.
Anti Apple alliances
 Operators

 Handset makers

 Too many platforms 

 Windows Mobile, Limo, Android, Brew, SHP,
  ...
It’s WEB!
 Cross Device

 Cross Platform
Web as mobile apps
Anti Apple alliances
 2008 : Using web as cross platform mobile
  application by Operators
Widget runtime
 Web application platform

 Browser rendering engine based

 HTML/CSS/Javascript is the main technology
...
Widget Runtime
Widget Store
                                     Android
                                     (Widget
                   ...
Widget Runtime Demo
 http://www.youtube.com/watch?v=3xpS21aR-
  BQ

 http://widget.developer.vodafone.com/en/

 http://...
Widget Examples : ebay


                 User observes his watching, buying and selling
                  items.

      ...
Widget Examples : Facebook

                User will be able to browse list of his friends, see friends details ,see fri...
Widget Examples : Twitter

                 User will be able to reply or between any messages from another people.


   ...
WebApps Pros/Cons
 Pros
   Easy development than Java/Objective-C
   Easy use of OpenAPI/MeshUp
   Easy delivery of we...
Extend Web : Device APIs
 Contact

 Calendar

 File system

 Messaging

 System info :

 CPU, Battery, etc
Extending Web Spec
 JIL (Joint Innovation Lab)
   Vodafone, VZW, Softbank, China Mobile
    http://www.jil.org/

 BONDI...
Widgets = Mobile apps
Samsung Widget SDK
 http://innovator.samsungmobile.com
Nokia Ovi Developer
 http://www.forum.nokia.com/
Vodafone Betavine
 http://www.betavine.net/bvportal/home.html
WAC(Wholesale Application
Community)
 Cross-platform mobile apps

 Cross-device apps

 Wholesale Applications Community
Global Appstore
WAC
 Widgets – Widget Runtime, SDK, Documentation,
  WAC Device API spec.

 Operator API
K-WAC
Size does matter
                             Units

 Cellphone


Smartphone
                                             ...
Altogether!
 HTML5/CSS3/SVG

 Devices API

 Huge market
   20 Global operators
   5 Handset makers
Web UI Components
Web UI Framework : iUI
 iUI: iPhone User Interface Framework

 Javascript, HTML, CSS

 Demo
  http://chriscarey.com/pro...
Web UI Framework :
JQTouch
 JQTouch

 Similar to native app UI

 Javascript, HTML, CSS

 JS Library

 http://www.jqto...
Web UI Framework : Sencha
 HTML5, CSS3, Javascript

 Resolution independent

 JS Library

 http://touchstyle.mobi/app/
PhoneGap
PhoneGap
 PhoneGap is an open source development
  framework for building cross-platform mobile
  apps. Build apps in HTM...
PhoneGap

                Android        Android
                Market

   PhoneGap
     Mobile
     Widget      Apple   ...
PhoneGap.js
 Device API to control phone resources
Phonegap
 http://phonegap.com
Web or Apps?
Web or Apps?
 Same UX

 Doesn’t matter

 http://www.youtube.com/watch?v=-61h8UGsi_M
Web as application
 New era of mobile apps

 By Web standard technology

 HTML5/CSS3 is much powerful

 Cross device/p...
Thank you for listening

http://webdevmobile.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.ne...
Making mobile apps with web technology (revised)
Upcoming SlideShare
Loading in …5
×

Making mobile apps with web technology (revised)

2,134 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,134
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Making mobile apps with web technology (revised)

  1. 1. New trend of making mobile apps with web technology Manyoung Cho | WebDevMobile.com manyoung@gmail.com
  2. 2. About Me   Web Evangelist   WebDevMobile.com   Opera Software   manyoung@gmail.com   Blog : http://manyoung.net   Twitter : @manyoungc   Me2Day : http://me2day.net/manyoung
  3. 3. Agenda  History of WebApps  Web as Apps  Smartphone Wars  PhoneGap  Mobile Web or Mobile App?
  4. 4. History of WebApps
  5. 5. Web as Application  Old days = ASP/PHP/JSP  Web program for web service  Mostly e-commerce sites
  6. 6. Web technology evolves
  7. 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. 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. 9. 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
  10. 10. 2008 : Widget Chaos!  Google Desktop widget  Yahoo Widget  Naver, Daum Widget  All gone…  Non standard based
  11. 11. 2010 : Chrome Webstore  Chrome WebStore = Desktop WebApps  https://chrome.google.com/webstore  Chrome to Phone = Mobile WebApps
  12. 12. Web apps Demo  Web apps? = Piece of cake
  13. 13. Smartphone wars
  14. 14. Smartphone Wars  2007 : Success of iPhone  2008 : Success of AppStore  iPhone : Mobile internet machine  iPhone : Application contents matter
  15. 15. 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
  16. 16. Mobile Apps Wars
  17. 17. Mobile Apps Wars  Apple is the only winner  iPod, iPhone2G, iPhone 3G users  Followers can’t defeat this.
  18. 18. Anti Apple alliances  Operators  Handset makers  Too many platforms   Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS….  What can be the crossplatform?
  19. 19. It’s WEB!  Cross Device  Cross Platform
  20. 20. Web as mobile apps
  21. 21. Anti Apple alliances  2008 : Using web as cross platform mobile application by Operators
  22. 22. 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
  23. 23. Widget Runtime
  24. 24. 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
  25. 25. 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
  26. 26. 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.
  27. 27. 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.
  28. 28. 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.
  29. 29. 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
  30. 30. Extend Web : Device APIs  Contact  Calendar  File system  Messaging  System info :  CPU, Battery, etc
  31. 31. 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/
  32. 32. Widgets = Mobile apps
  33. 33. Samsung Widget SDK  http://innovator.samsungmobile.com
  34. 34. Nokia Ovi Developer  http://www.forum.nokia.com/
  35. 35. Vodafone Betavine  http://www.betavine.net/bvportal/home.html
  36. 36. WAC(Wholesale Application Community)  Cross-platform mobile apps  Cross-device apps  Wholesale Applications Community
  37. 37. Global Appstore
  38. 38. WAC  Widgets – Widget Runtime, SDK, Documentation, WAC Device API spec.  Operator API
  39. 39. K-WAC
  40. 40. Size does matter Units Cellphone Smartphone Units iPhone 0 200 400 600 800 1000 1200 1400
  41. 41. Altogether!  HTML5/CSS3/SVG  Devices API  Huge market   20 Global operators   5 Handset makers
  42. 42. Web UI Components
  43. 43. Web UI Framework : iUI  iUI: iPhone User Interface Framework  Javascript, HTML, CSS  Demo http://chriscarey.com/projects/mythtv/iphone/
  44. 44. Web UI Framework : JQTouch  JQTouch  Similar to native app UI  Javascript, HTML, CSS  JS Library  http://www.jqtouch.com/preview/demos/main/ #home
  45. 45. Web UI Framework : Sencha  HTML5, CSS3, Javascript  Resolution independent  JS Library  http://touchstyle.mobi/app/
  46. 46. PhoneGap
  47. 47. 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
  48. 48. PhoneGap Android Android Market PhoneGap Mobile Widget Apple iPhone HTML/ Appstore CSS/JS Web Developer Blackberr Blackb y erry Market Mobile Phones
  49. 49. PhoneGap.js  Device API to control phone resources
  50. 50. Phonegap  http://phonegap.com
  51. 51. Web or Apps?
  52. 52. Web or Apps?  Same UX  Doesn’t matter  http://www.youtube.com/watch?v=-61h8UGsi_M
  53. 53. Web as application  New era of mobile apps  By Web standard technology  HTML5/CSS3 is much powerful  Cross device/platform
  54. 54. Thank you for listening http://webdevmobile.com Blog : http://manyoung.net Twitter : @manyoungc Me2Day : http://me2day.net/manyoung

×