際際滷

際際滷Share a Scribd company logo
New trend of making mobile apps with web technologyManyoung Cho | WebDevMobile.commanyoung@gmail.com
About MeWeb EvangelistWebDevMobile.com伎Opera Software 谿 manyoung@gmail.comBlog : http://manyoung.netTwitter : @manyoungcMe2Day : http://me2day.net/manyoung
AgendaHistory of WebAppsWeb as AppsSmartphone WarsPhoneGapMobile Web or Mobile App?
History of WebApps
2006 : Long time ago galaxy far far awayOpera introduced browser based application called widget in 2006Widget is W3C standardhttp://www.w3.org/TR/widgets/Opera Widgethttp://widgets.opera.comWidget = browser based standalone web application
2007 : Apple MacOS 10.5  MacOs Dashboard Widgethttp://developer.apple.com/macosx/dashboard.htmlhttp://en.wikipedia.org/wiki/Dashboard_(software)HTML5 Canvas was also introducted by Apple
2008 : Widget Chaos!	Google Desktop widgetYahoo WidgetNaver, Daum WidgetAll gone Non standard based
Web as Apps
Web apps DemoWeb apps? = Piece of cake
2010 : Chrome Webstorehttps://chrome.google.com/webstore
Smartphone wars
Browser WarsBrowser is a killer app of the smartphoneOpera mobile 10iPhone SafariChrome liteMobile browser war is more severe than desktopNew technology is applied in mobile browser
Smartphone WarsSuccess of iPhoneSuccess of AppStoreApplication contents matter!
Mobile Apps Wars
Mobile Apps WarsApple is the only winneriPod, iPhone2G, iPhone 3G usersFollowers cant defeat this.
Anti Apple alliancesOperators Handset makersToo many platforms Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS.What can be the crossplatform?
Its WEB!Cross DeviceCross Platform
Web as mobile apps
Widget runtimeWeb application platformBrowser rendering engine basedHTML/CSS/Javascript is the main technologyOperator/OEM drivenWidget Manager UIWidget Runtime Engine= Browser Engine (Opera, Webkit)
Widget StoreAndroid(WRT)WidgetStoreMobile WidgetHTML/CSS/JSWM7(WRT)Web DeveloperBada(WRT)Mobile Phones
Widget Runtime Demohttp://www.youtube.com/watch?v=3xpS21aR-BQ
EBay search and shoppingUser 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.
FacebookFacebook 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.
TwitterUser 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.
Extend Web : Device APIsContactCalendarFile systemMessagingSystem info : CPU, Battery, etc
Extending Web SpecJIL (Joint Innovation Lab)Vodafone, VZW, Softbank, China Mobilehttp://www.jil.org/BONDI(OMTP driven)W3C Device APIs and Policyhttp://www.w3.org/2009/dap/
Samsung Widget SDKhttp://innovator.samsungmobile.com
Nokia Ovi Developerhttp://www.forum.nokia.com/
Vodafone Betavinehttp://www.betavine.net/bvportal/home.html
Widgets = Mobile apps
WACCross-platform mobile appsCross-device appsWholesale Applications Community
WACWidgets  Widget Runtime, SDK, Documentation, WAC Device API spec.Operator API
Size does matter
Altogether!HTML5/CSS3/SVGDevices APIHuge market20 Global operators5 Handset makers
PhoneGap
PhoneGapPhoneGap 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. Learnhttp://phonegap.com
PhoneGapAndroidMarketAndroidPhoneGapAppleAppstoreMobile WidgetHTML/CSS/JSiPhoneBlackberryMarketBlackberryWeb DeveloperMobile Phones
PhoneGap.jsDevice API to control phone resources
Phonegaphttp://phonegap.com
Mobile Web or Mobile App?
Thank you for listeninghttp://webdevmobile.comBlog : http://manyoung.netTwitter : @manyoungcMe2Day : http://me2day.net/manyoung

More Related Content

Similar to Making mobile apps with web technology (20)

Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)
Manyoung Cho
Facebook Connect Integration
Facebook Connect IntegrationFacebook Connect Integration
Facebook Connect Integration
mujahidslideshare
Download PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering studentsDownload PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering students
SkyingBlogger
Introduction to facebook platform
Introduction to facebook platformIntroduction to facebook platform
Introduction to facebook platform
Venkatesh Narayanan
Vertex The All in one Web Application
Vertex  The All in one Web ApplicationVertex  The All in one Web Application
Vertex The All in one Web Application
IRJET Journal
Yahoo! Application Platform Technical Deep Dive
Yahoo! Application Platform Technical Deep DiveYahoo! Application Platform Technical Deep Dive
Yahoo! Application Platform Technical Deep Dive
Tony Ng
Android Minnebar
Android MinnebarAndroid Minnebar
Android Minnebar
Justin Grammens
Mobile application
Mobile applicationMobile application
Mobile application
aspnet123
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
Facebook API
Facebook APIFacebook API
Facebook API
snipermkd
Facebook api
Facebook api Facebook api
Facebook api
snipermkd
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
james smith
Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)
Carlo Vaccari
Beautifully Usable, Multiple Screens Too
Beautifully Usable, Multiple Screens TooBeautifully Usable, Multiple Screens Too
Beautifully Usable, Multiple Screens Too
Motorola Mobility - MOTODEV
Ui patterns
Ui patternsUi patterns
Ui patterns
OSCON Byrum
Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy
Limbs AndThings
Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy
Limbs AndThings
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
Oral recitations
Oral recitationsOral recitations
Oral recitations
Angelito Pera
Creating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouchCreating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouch
St. Petersburg College
Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)Making mobile apps with web technology (revised)
Making mobile apps with web technology (revised)
Manyoung Cho
Facebook Connect Integration
Facebook Connect IntegrationFacebook Connect Integration
Facebook Connect Integration
mujahidslideshare
Download PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering studentsDownload PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering students
SkyingBlogger
Introduction to facebook platform
Introduction to facebook platformIntroduction to facebook platform
Introduction to facebook platform
Venkatesh Narayanan
Vertex The All in one Web Application
Vertex  The All in one Web ApplicationVertex  The All in one Web Application
Vertex The All in one Web Application
IRJET Journal
Yahoo! Application Platform Technical Deep Dive
Yahoo! Application Platform Technical Deep DiveYahoo! Application Platform Technical Deep Dive
Yahoo! Application Platform Technical Deep Dive
Tony Ng
Mobile application
Mobile applicationMobile application
Mobile application
aspnet123
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
Facebook API
Facebook APIFacebook API
Facebook API
snipermkd
Facebook api
Facebook api Facebook api
Facebook api
snipermkd
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
james smith
Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)Web 2.0: characteristics and tools (2010 eng)
Web 2.0: characteristics and tools (2010 eng)
Carlo Vaccari
Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy
Limbs AndThings
Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy Facial Videos Facebook Anatomy
Facial Videos Facebook Anatomy
Limbs AndThings
Creating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouchCreating a Slick Web App Using jQTouch
Creating a Slick Web App Using jQTouch
St. Petersburg College

Making mobile apps with web technology

  • 1. New trend of making mobile apps with web technologyManyoung Cho | WebDevMobile.commanyoung@gmail.com
  • 2. About MeWeb EvangelistWebDevMobile.com伎Opera Software 谿 manyoung@gmail.comBlog : http://manyoung.netTwitter : @manyoungcMe2Day : http://me2day.net/manyoung
  • 3. AgendaHistory of WebAppsWeb as AppsSmartphone WarsPhoneGapMobile Web or Mobile App?
  • 5. 2006 : Long time ago galaxy far far awayOpera introduced browser based application called widget in 2006Widget is W3C standardhttp://www.w3.org/TR/widgets/Opera Widgethttp://widgets.opera.comWidget = browser based standalone web application
  • 6. 2007 : Apple MacOS 10.5 MacOs Dashboard Widgethttp://developer.apple.com/macosx/dashboard.htmlhttp://en.wikipedia.org/wiki/Dashboard_(software)HTML5 Canvas was also introducted by Apple
  • 7. 2008 : Widget Chaos! Google Desktop widgetYahoo WidgetNaver, Daum WidgetAll gone Non standard based
  • 9. Web apps DemoWeb apps? = Piece of cake
  • 10. 2010 : Chrome Webstorehttps://chrome.google.com/webstore
  • 12. Browser WarsBrowser is a killer app of the smartphoneOpera mobile 10iPhone SafariChrome liteMobile browser war is more severe than desktopNew technology is applied in mobile browser
  • 13. Smartphone WarsSuccess of iPhoneSuccess of AppStoreApplication contents matter!
  • 15. Mobile Apps WarsApple is the only winneriPod, iPhone2G, iPhone 3G usersFollowers cant defeat this.
  • 16. Anti Apple alliancesOperators Handset makersToo many platforms Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietrary OS.What can be the crossplatform?
  • 19. Widget runtimeWeb application platformBrowser rendering engine basedHTML/CSS/Javascript is the main technologyOperator/OEM drivenWidget Manager UIWidget Runtime Engine= Browser Engine (Opera, Webkit)
  • 22. EBay search and shoppingUser 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. FacebookFacebook 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. TwitterUser 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 APIsContactCalendarFile systemMessagingSystem info : CPU, Battery, etc
  • 26. Extending Web SpecJIL (Joint Innovation Lab)Vodafone, VZW, Softbank, China Mobilehttp://www.jil.org/BONDI(OMTP driven)W3C Device APIs and Policyhttp://www.w3.org/2009/dap/
  • 31. WACCross-platform mobile appsCross-device appsWholesale Applications Community
  • 32. WACWidgets Widget Runtime, SDK, Documentation, WAC Device API spec.Operator API
  • 34. Altogether!HTML5/CSS3/SVGDevices APIHuge market20 Global operators5 Handset makers
  • 36. PhoneGapPhoneGap 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. Learnhttp://phonegap.com
  • 38. PhoneGap.jsDevice API to control phone resources
  • 40. Mobile Web or Mobile App?
  • 41. Thank you for listeninghttp://webdevmobile.comBlog : http://manyoung.netTwitter : @manyoungcMe2Day : http://me2day.net/manyoung