• Save
Making mobile apps with web technology
Upcoming SlideShare
Loading in...5
×
 

Making mobile apps with web technology

on

  • 2,997 views

 

Statistics

Views

Total Views
2,997
Views on SlideShare
2,441
Embed Views
556

Actions

Likes
1
Downloads
32
Comments
0

7 Embeds 556

http://manyoung.net 325
http://webstorykim.tistory.com 198
http://manyoung.tistory.com 25
http://www.hanrss.com 5
http://www.manyoung.net 1
http://cafe.naver.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Making mobile apps with web technology Making mobile apps with web technology Presentation Transcript

    • 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
      Twitter : @manyoungc
      Me2Day : http://me2day.net/manyoung
    • Agenda
      History of WebApps
      Web as Apps
      Smartphone Wars
      PhoneGap
      Mobile Web or Mobile App?
    • History of WebApps
    • 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
    • 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
    • 2008 : Widget Chaos!
      Google Desktop widget
      Yahoo Widget
      Naver, Daum Widget
      All gone…
      Non standard based
    • Web as Apps
    • Web apps Demo
      Web apps? = Piece of cake
    • 2010 : Chrome Webstore
      https://chrome.google.com/webstore
    • Smartphone wars
    • 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
    • Smartphone Wars
      Success of iPhone
      Success of AppStore
      Application contents matter!
    • 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, Symbian, Proprietrary OS….
      What can be the crossplatform?
    • It’s WEB!
      Cross Device
      Cross Platform
    • Web as mobile apps
    • 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)
    • Widget Store
      Android(WRT)
      Widget
      Store
      Mobile Widget
      HTML/CSS/JS
      WM7(WRT)
      Web Developer
      Bada(WRT)
      Mobile Phones
    • Widget Runtime Demo
      http://www.youtube.com/watch?v=3xpS21aR-BQ
    • 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.
    • 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.
    • 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.
    • 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 Mobilehttp://www.jil.org/
      BONDI(OMTP driven)
      W3C Device APIs and Policyhttp://www.w3.org/2009/dap/
    • Samsung Widget SDK
      http://innovator.samsungmobile.com
    • Nokia Ovi Developer
      http://www.forum.nokia.com/
    • Vodafone Betavine
      http://www.betavine.net/bvportal/home.html
    • Widgets = Mobile apps
    • WAC
      Cross-platform mobile apps
      Cross-device apps
      Wholesale Applications Community
    • WAC
      Widgets – Widget Runtime, SDK, Documentation, WAC Device API spec.
      Operator API
    • Size does matter
    • Altogether!
      HTML5/CSS3/SVG
      Devices API
      Huge market
      20 Global operators
      5 Handset makers
    • PhoneGap
    • 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
    • PhoneGap
      Android
      Market
      Android
      PhoneGap
      Apple
      Appstore
      Mobile Widget
      HTML/CSS/JS
      iPhone
      Blackberry
      Market
      Blackberry
      Web Developer
      Mobile Phones
    • PhoneGap.js
      Device API to control phone resources
    • Phonegap
      http://phonegap.com
    • Mobile Web or Mobile App?
    • Thank you for listening
      http://webdevmobile.com
      Blog : http://manyoung.net
      Twitter : @manyoungc
      Me2Day : http://me2day.net/manyoung