HTML5 on mobile

41,963 views

Published on

왜 모바일에서 HTML5 가 중요한지, 현재 모바일 환경에서의 HTML5 지원은 어느 수준에 와있는지를 알아본다. 그리고, HTML5 를 이용한 모바일 웹 애플리케이션 개발이 어떻게 이루어지는지에 대해 소개한다.

6 Comments
58 Likes
Statistics
Notes
No Downloads
Views
Total views
41,963
On SlideShare
0
From Embeds
0
Number of Embeds
19,109
Actions
Shares
0
Downloads
1,416
Comments
6
Likes
58
Embeds 0
No embeds

No notes for slide

HTML5 on mobile

  1. 1. HTML5 on Mobile http://xguru.net Monday, July 5, 2010
  2. 2. • ➡ - http://xguru.net ➡ - @xguru ➡ - guru @ xguru.net Monday, July 5, 2010
  3. 3. Mobile vs. Desktop Internet User http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210 Monday, July 5, 2010
  4. 4. OS iPhone (iOS) 40% Android 26% Blackberry 6% Symbian 24% Other 1% webOS WM 1% 2% Source : AdMob 2010 May Mobile Metrics Highlights * Monday, July 5, 2010
  5. 5. HTML5 ? Monday, July 5, 2010
  6. 6. HTML5 ? . Monday, July 5, 2010
  7. 7. HTML5 ? . Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP Monday, July 5, 2010
  8. 8. http://j.mp/mopasweb Monday, July 5, 2010
  9. 9. http://j.mp/mopasweb Monday, July 5, 2010
  10. 10. Mobile HTML5 Browser (OS) Version Score ( ? / 160 ) IE ( Win ) 6.0 11 IE ( Win ) 8.0.7600 19 Opera Mini 1.0 33 iPhone ( Mobile Safari ) 2.0 37 Android 1.6 39 iPhone ( Mobile Safari ) 2.1 - 2.2 45 Maemo microB 5 PR-1.1.1 55 Firefox Mobile 1.0 101 Firefox ( Win ) 3.6.3 101 Palm WebOS 1.4 107 iPhone ( Mobile Safari ) 3.0 110 Safari ( Mac ) 4.0.5 113 iPad ( Mobile Safari ) 3.2 115 Android 2.0 - 2.1 118 Android 2.2 122 iPhone ( Mobile Safari ) 4.0 Beta 4 133 Safari ( Mac ) 5.0 138 Chrome ( Win , Mac ) 6.0.422.0 142 Mobile test result from http://www.callingallgeeks.org Tested with http://html5test.com Monday, July 5, 2010
  11. 11. HTML5 Key Elements for Mobile • Offline Support : Web database, LocalStorage, App Cache • Canvas • Video • GeoLocation • Advanced Forms • Camera & Device (html-device) W3C DAP , JIL , OMTP BONDI , PhoneGap Monday, July 5, 2010
  12. 12. Web Apps Monday, July 5, 2010
  13. 13. Mobile Web App Monday, July 5, 2010
  14. 14. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ Monday, July 5, 2010
  15. 15. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : Monday, July 5, 2010
  16. 16. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , Monday, July 5, 2010
  17. 17. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , • Web Mashup Monday, July 5, 2010
  18. 18. Mobile Web App Types Monday, July 5, 2010
  19. 19. Monday, July 5, 2010
  20. 20. Monday, July 5, 2010
  21. 21. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Monday, July 5, 2010
  22. 22. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Monday, July 5, 2010
  23. 23. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Monday, July 5, 2010
  24. 24. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Native Data Monday, July 5, 2010
  25. 25. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ Server Resources Monday, July 5, 2010
  26. 26. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5 , CSS3 , Javascript Flash Web Database Server Resources http://j.mp/hogapp http://j.mp/spinapp Monday, July 5, 2010
  27. 27. Mobile Device Server Online Web Application ✓ GeoLocation Web App UI ✓ / Open API Web Database Server Resources http://j.mp/myasik http://j.mp/opimap Monday, July 5, 2010
  28. 28. Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Gmail - http://gmail.com <html manifest="https://mail.google.com/mail/mu/manifest"> • Web SQL Database , App Cache : Offline • Offline Online • HTML ( CSS , Javascript , ) Monday, July 5, 2010
  29. 29. Mobile Device Server Offline Enabled Web App ✓ Web App UI Local ✓ Local Cache Web Database Data Server Resources ✓ GeoLocation nextstop - http://nextstop.com • Local Storage Prefetch • App Cache • GeoLocation API Monday, July 5, 2010
  30. 30. Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Checklist - http://j.mp/checkapp • App Cache • Web SQL Database DB • Offline Monday, July 5, 2010
  31. 31. Mobile Device Server Offline Web App ✓ HTML5 Web ✓ EPUB HTML App UI Local Web Data Server ✓ http://j.mp/monocle_ebook Monocle - eBook for Web Browser Monday, July 5, 2010
  32. 32. Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Cross Platform Mobile App Framework Data PhoneGap , Titanium Mobile .. Harmonious - HTML5 Canvas + jQTouch + PhoneGap Monday, July 5, 2010
  33. 33. Web App vs. Native App Web App Native App • • • HTML , CSS , Javascript • Objective-C ( iPhone ) , Java ( Android ) • • XCode ( iPhone ) , Eclipse ( Android ) • , iUI , JQTouch .. • Cocoa Touch ( iPhone ) , UI Framework (Android) • Mac • Mac ( iPhone ) , Android • App 1) • App $99 or $35 • - / .. 2) • • • App Store/Market / & • • ( iPhone ) • Android / Blackberry • 1) Phonegap 2) Phonegap , QuickConnect / <= Hybrid App Monday, July 5, 2010
  34. 34. Mobile Web App Helpers Monday, July 5, 2010
  35. 35. Monday, July 5, 2010
  36. 36. UI Library for Touch Devices #1 • iPhone style UI library ★ JQTouch - http://jqtouch.com/ ★ iUI - http://code.google.com/p/iui/ ★ WebApp.Net - http://webapp-net.com/ Monday, July 5, 2010
  37. 37. UI Library for Touch Devices #2 • Sencha Touch : jQTouch + Ext JS + Raphaël http://sencha.com ★ HTML5 + CSS + Javascript Mobile App Framework ★ Support for iOS , Android ★ Touch UI ★ iPad / iPhone / Android • : http://j.mp/senchak Monday, July 5, 2010
  38. 38. UI Library for Touch Devices #3 • iAd JS : Appleʼs Javascript Web UI Library ★ HTML5 + CSS + Javascript UI Framework ★ CocoaTouch Web ★ Controls : Button, Checkbox, Radio Button, Slider, Switch, Page Control ,, ★ UI Control ★ Menu : Hide/Reveal , Horizontal Slider , Orbit , Pinwheel ★ Galleries : 360-Degree Object Rotation & Panorama, Horizontal/Vertical Slide, Coverflow ★ Audio / Video : Using HTML5 audio/video element Monday, July 5, 2010
  39. 39. Web App to Native App Framework • PhoneGap ★ http://www.phonegap.com/ ★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile • Titanium Mobile ★ http://www.appcelerator.com/ ★ iPhone, Android • QuickConnect ★ http://quickconnectfamily.org/ ★ iPhone, Android, Blackberry • NimbleKit ★ http://www.nimblekit.com/ ★ iPhone Monday, July 5, 2010
  40. 40. PhoneGap #1 • Cross Platform Mobile Application Framework • HTML+Javascript Web App Container • Web App Native App • Web App Device Javascript iPhone Android Blackberry Symbian Palm Geolocation ✓ ✓ ✓ ✓ ✓ Accelerometer ✓ ✓ ✓ ✓ ✓ Camera ✓ ✓ ✓ ✓ ★ Vibration ✓ ✓ ✓ ✓ ✓ Contacts ✓ ✓ ✓ ✓ Sound ✓ ✓ ✓ ✓ ✓ SMS ★ ✓ ✓ ✓ ✓ Telephone ★ ★ ✓ ✓ ★ Monday, July 5, 2010
  41. 41. PhoneGap #2 Android iOS ( iPhone OS ) PhoneGap framework PhoneGap framework ( Container App ) ( Container App ) Android App Files iOS App Files Manifest.xml and resources plist,icon,png file resources Phonegap Application FW integration CocoaTouch FW integration Webkit ( WebView ) Webkit (UIWebView) phonegap.js phonegap.js application application css/js/html css/js/html Web Application Monday, July 5, 2010
  42. 42. PhoneGap #3 Monday, July 5, 2010
  43. 43. Mobile Web App • HTML5 & APIs ★ Web SQL, Local Storage, App Cache, Canvas,Video, Forms, GeoLocation ★ CSS UI Effects , ( html-device ) • UI & Application Framework ★ iUI , jQTouch , WebApp.Net , Sencha ★ Javascript UI , CSS3 • App Packaging & Device Integration ★ Framework : PhoneGap , NimbleKit , Titanium Mobile .. ★ Specification : W3C DAP , JIL , OMTP BONDI Monday, July 5, 2010
  44. 44. ! email : guru @ xguru.net twitter : @xguru Monday, July 5, 2010
  45. 45. References • http://code.google.com/p/html5-slides/ • http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html • http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/ • http://building-iphone-apps.labs.oreilly.com/ • http://www.phonegap.com/ • http://sencha.com • http://jqtouch.com • http://quickconnectfamily.org/ • http://www.appcelerator.com/products/titanium-mobile-application-development/ • http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview Monday, July 5, 2010

×