HTML5                         on                       Mobile                            http://xguru.net                 ...
소개        • 권정혁              ➡        블로그 - http://xguru.net              ➡        트위터 - @xguru              ➡        이메일 ...
Mobile vs. Desktop Internet User                       http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trend...
전세계 모바일 OS 점유율                             iPhone (iOS)                                 40%                       Android ...
왜 HTML5가 모바일에 중요한가 ?Monday, July 5, 2010
왜 HTML5가 모바일에 중요한가 ?                        많은 회사들이 각 모바일 플랫폼용                       네이티브 앱을 모두 만들기는 어렵다.Monday, July 5, 2...
왜 HTML5가 모바일에 중요한가 ?                        많은 회사들이 각 모바일 플랫폼용                       네이티브 앱을 모두 만들기는 어렵다.           Even G...
행정안전부	 고시	 제2010-40호          http://j.mp/mopasweb   2010년	 6월	 24일Monday, July 5, 2010
행정안전부	 고시	 제2010-40호          http://j.mp/mopasweb                             2010년	 6월	 24일       ○	 국민들이	 다양한	 모바일	 기기를...
Mobile 에서의 HTML5 지원현황                         Browser (OS)                             Version          Score ( ? / 160 ) ...
HTML5 Key Elements                              for Mobile          •       Offline Support : Web database, LocalStorage, A...
Web AppsMonday, July 5, 2010
Mobile Web App 의 장점Monday, July 5, 2010
Mobile Web App 의 장점      • 다양한 플랫폼 동시 지원            ★ iPhone/iPad/Android/BlackBerry..            ★ 최신 웹브라우저가 있는 모든 디바이스Mo...
Mobile Web App 의 장점      • 다양한 플랫폼 동시 지원            ★ iPhone/iPad/Android/BlackBerry..            ★ 최신 웹브라우저가 있는 모든 디바이스  ...
Mobile Web App 의 장점      • 다양한 플랫폼 동시 지원            ★ iPhone/iPad/Android/BlackBerry..            ★ 최신 웹브라우저가 있는 모든 디바이스  ...
Mobile Web App 의 장점      • 다양한 플랫폼 동시 지원            ★ iPhone/iPad/Android/BlackBerry..            ★ 최신 웹브라우저가 있는 모든 디바이스  ...
Mobile Web App TypesMonday, July 5, 2010
Monday, July 5, 2010
Monday, July 5, 2010
Mobile Device           Server            Online Web Application                                                  ✓ 기존 모바일...
Mobile Device             Server            Online Web Application                                                    ✓ 기존...
Mobile Device             Server            Online Web Application                                                    ✓ 기존...
Mobile Device                         Server                     Online Web Application                                   ...
Mobile Device           Server            Online Web Application                                                  ✓ 기존 모바일...
Mobile Device           Server              Online Web Application                                                  ✓ 광고를 ...
Mobile Device           Server             Online Web Application                                                  ✓ GeoLo...
Mobile Device                Server              Offline Enabled Web App                                                   ...
Mobile Device             Server            Offline Enabled Web App                                                    ✓ 꼭 ...
Mobile Device        Server        Offline Web App                                        ✓ 계속 오프라인으로 사용가능한 앱      Web     ...
Mobile Device        Server         Offline Web App                                        ✓ HTML5 형태의 이북      Web         ...
Mobile Device          Server                  Hybrid Web App      App                                                    ...
Web App vs. Native App                        Web App                          Native App    • 모바일 디바이스에 최적화된 웹사이트        ...
Mobile Web App HelpersMonday, July 5, 2010
Monday, July 5, 2010
UI Library for Touch Devices #1          • iPhone style UI library                  ★ JQTouch - http://jqtouch.com/       ...
UI Library for Touch Devices #2          • Sencha Touch : jQTouch + Ext JS + Raphaël            http://sencha.com         ...
UI Library for Touch Devices #3          • iAd JS : Appleʼs Javascript Web UI Library                  ★    HTML5 + CSS + ...
Web App to Native App Framework                 • PhoneGap                       ★   http://www.phonegap.com/             ...
PhoneGap #1            •          Cross Platform Mobile Application Framework            •          HTML+Javascript 로 된 We...
PhoneGap #2                                                                         Android               iOS ( iPhone OS ...
PhoneGap #3Monday, July 5, 2010
Mobile Web App 개발   • HTML5 & APIs         ★ Web SQL, Local Storage, App Cache, Canvas,Video, Forms, GeoLocation         ★...
고맙습니다!                       email : guru @ xguru.net                       twitter : @xguruMonday, July 5, 2010
References          •       http://code.google.com/p/html5-slides/          •       http://rakaz.nl/2009/09/iphone-webapps...
Upcoming SlideShare
Loading in …5
×

HTML5 on mobile

1,714 views

Published on

2010.07.05

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,714
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
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.netMonday, July 5, 2010
  3. 3. Mobile vs. Desktop Internet User http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210Monday, 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 VPMonday, July 5, 2010
  8. 8. 행정안전부 고시 제2010-40호 http://j.mp/mopasweb 2010년 6월 24일Monday, July 5, 2010
  9. 9. 행정안전부 고시 제2010-40호 http://j.mp/mopasweb 2010년 6월 24일 ○ 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고 - 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용 ○ 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련 - 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공 - 국제표준화기구에서 제공하는 표준 사용 의무화 - 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활 용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력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.comMonday, 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 , PhoneGapMonday, July 5, 2010
  12. 12. Web AppsMonday, 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 서비스들과의 손쉬운 MashupMonday, July 5, 2010
  18. 18. Mobile Web App TypesMonday, 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 ServerMonday, 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 수준의 다양한 앱 작성 가능 DataMonday, July 5, 2010
  25. 25. Mobile Device Server Online Web Application ✓ 기존 모바일 웹페이지 포함한 웹 앱 Web App UI ✓ HTML5,CSS3 등을 통한 UI 향상 Web Database ✓ 주로 컨텐츠 리딩을 위한 앱 Server ResourcesMonday, 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/spinappMonday, 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/opimapMonday, 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 APIMonday, 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 BrowserMonday, 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 + PhoneGapMonday, 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 AppMonday, July 5, 2010
  34. 34. Mobile Web App HelpersMonday, 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/senchakMonday, 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 elementMonday, 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/ ★ iPhoneMonday, 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 ApplicationMonday, July 5, 2010
  42. 42. PhoneGap #3Monday, 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 BONDIMonday, July 5, 2010
  44. 44. 고맙습니다! email : guru @ xguru.net twitter : @xguruMonday, 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-overviewMonday, July 5, 2010

×