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

1. HTML5
on
Mobile
http://xguru.net
Monday, July 5, 2010

2. •
➡ - http://xguru.net
➡ - @xguru
➡ - guru @ xguru.net
Monday, July 5, 2010

3. Mobile vs. Desktop Internet User
http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210
Monday, July 5, 2010

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. HTML5 ?
Monday, July 5, 2010

6. HTML5 ?
.
Monday, July 5, 2010

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. http://j.mp/mopasweb
Monday, July 5, 2010

9. http://j.mp/mopasweb
Monday, July 5, 2010

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. 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. Web Apps
Monday, July 5, 2010

13. Mobile Web App
Monday, July 5, 2010

14. Mobile Web App
•
★ iPhone/iPad/Android/BlackBerry..
★
Monday, July 5, 2010

15. Mobile Web App
•
★ iPhone/iPad/Android/BlackBerry..
★
• :
Monday, July 5, 2010

16. Mobile Web App
•
★ iPhone/iPad/Android/BlackBerry..
★
• :
• Web
★ HTML5 , CSS , Javascript ,
Monday, July 5, 2010

17. Mobile Web App
•
★ iPhone/iPad/Android/BlackBerry..
★
• :
• Web
★ HTML5 , CSS , Javascript ,
• Web Mashup
Monday, July 5, 2010

18. Mobile Web App Types
Monday, July 5, 2010

19. Monday, July 5, 2010

20. Monday, July 5, 2010

21. Mobile Device Server Online Web Application
✓
Web App UI ✓ HTML5,CSS3 UI
Web Database ✓ GeoLocation
Server Resources ✓
Monday, July 5, 2010

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. 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. 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. Mobile Device Server Online Web Application
✓
Web App UI ✓ HTML5,CSS3 UI
Web Database ✓
Server Resources
Monday, July 5, 2010

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. 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. 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. 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. 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. 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. 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. 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. Mobile Web App Helpers
Monday, July 5, 2010

35. Monday, July 5, 2010

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. 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. 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. 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. 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. 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. PhoneGap #3
Monday, July 5, 2010

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. !
email : guru @ xguru.net
twitter : @xguru
Monday, July 5, 2010

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