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. 2006 : Long time ago galaxy far far away Opera introduced browser based application called widget in 2006 Widget is W3C standardhttp://www.w3.org/TR/widgets/ Opera Widgethttp://widgets.opera.com Widget = browser based standalone web application

6. 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

7. 2008 : Widget Chaos! Google Desktop widget Yahoo Widget Naver, Daum Widget All gone… Non standard based

8. Web as Apps

9. Web apps Demo Web apps? = Piece of cake

10. 2010 : Chrome Webstore https://chrome.google.com/webstore

11. Smartphone wars

12. 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

13. Smartphone Wars Success of iPhone Success of AppStore Application contents matter!

14. Mobile Apps Wars

15. Mobile Apps Wars Apple is the only winner iPod, iPhone2G, iPhone 3G users Followers can’t defeat this.

16. Anti Apple alliances Operators Handset makers Too many platforms  Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS…. What can be the crossplatform?

17. It’s WEB! Cross Device Cross Platform

18. Web as mobile apps

19. 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)

20. Widget Store Android(WRT) Widget Store Mobile Widget HTML/CSS/JS WM7(WRT) Web Developer Bada(WRT) Mobile Phones

21. Widget Runtime Demo http://www.youtube.com/watch?v=3xpS21aR-BQ

22. EBay search and shopping 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.

23. Facebook Facebook API described at http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library and http://developers.facebook.com/docs/ will be used. User will be able to store his username/password in the widget. User will be able to set his status message, and will see his own status messages history. User will be able to see his own personal details. 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.

24. Twitter User will be able to store his twitter username and password in the widget (in the options menu). There will be field in the option menu will be auto refresh time(in minutes) [we have to keep in mind twitter API request limits]. On the widget main page user will see list of statuses from people he is following. Each status will show user image, user profile name, message, date and 'from' field. User will be able to delete his own message. User will be able to start any message. 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.

25. Extend Web : Device APIs Contact Calendar File system Messaging System info : CPU, Battery, etc

26. Extending Web Spec JIL (Joint Innovation Lab) Vodafone, VZW, Softbank, China Mobilehttp://www.jil.org/ BONDI(OMTP driven) W3C Device APIs and Policyhttp://www.w3.org/2009/dap/

27. Samsung Widget SDK http://innovator.samsungmobile.com

28. Nokia Ovi Developer http://www.forum.nokia.com/

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

30. Widgets = Mobile apps

31. WAC Cross-platform mobile apps Cross-device apps Wholesale Applications Community

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

33. Size does matter

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

35. PhoneGap

36. 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

37. PhoneGap Android Market Android PhoneGap Apple Appstore Mobile Widget HTML/CSS/JS iPhone Blackberry Market Blackberry Web Developer Mobile Phones

38. PhoneGap.js Device API to control phone resources

39. Phonegap http://phonegap.com

40. Mobile Web or Mobile App?

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