[30회 정기세미나] HTML5 실무적용 전략 HTML5를 활용한 하이브리드 앱개발하기 / 발표자 황정현

1. HTML5
:

2. HYBRID?
·
Convert WebApp to Native App

3. Native Apps
/
UX
/
.
/

4. Web Apps
- iPhone/iPad/Android/BlackBerry
- HTML5, CSS, Javascript
HTML5

5. Hybrid Apps
Native + Web
/
/
Device OS
Hybrid Framework
Web Browser
Web Application
css/js/html

6. Native App vs Hybrid App vs Web App
Native App Hybrid App Web App
Objective-C, Java, C#
XCode, Eclipse, Visual Studio HTML, CSS, Javascript HTML, CSS, Javascript
iPhone Mac
99$ , JQueryMobile, , jQueryMobile, jQTouch...
SenchaTouch Mac

8. PhoneGap
Cross Platform Mobile Application Framework
Web App Native App
WebApp Device
javascript
!
http://www.phonegap.com

9. PhoneGap
PhoneGap framework
(Container App)
iOS or Android App File
resources, CocoaTouch & App Fw PhoneGap
Webkit(UIWebView)
Phonegap.js
application
css/js/html
Web Application

10. PhoneGap

11. PhoneGap

12. PhoneGap

13. Titanium
Web App Native App
http://www.appcelerator.com

14. Titanium
Titanium framework
iOS or Android
Titanium
Bridge - Javascript - java /
Javascript - Objective-C
Phone Optional
UI API
API Modules
application
css/js/html
Web Application

15. Appspresso
http://www.appspresso.com
PhoneGap Web App Native App
, Eclipse IDE
KTH
iOS & Android

16. Appspresso
Eclips Appspresso
Project UI FrameWork
Template

17. Appspresso

18. UI Fraemwork

19. jQuery
Beta
, ,
.
.
.
.
http://jquerymobile.com/

21. <div data-role="page" id="/main.html">
<div data-role="header" data-position="fixed">
<h1>Main Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="/listContent.html">Acura</a></li>
<li><a href="/listContent.html">Audi</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul data-inset="true">
<li><a id="main_btn" href="/main.html" data-role="button" data-icon="star" data-iconpos="top">Main</a></li>
<li><a id="plus_btn" href="/plus.html" data-role="button" data-icon="plus" data-iconpos="top">Plus</a></li>
<li><a id="arrow_btn" href="/arrow.html" data-role="button" data-icon="arrow-d" data-iconpos="top">Arrow</a></li>
<li><a id="gear_btn" href="/gear.html" data-role="button" data-icon="gear" data-iconpos="top">Setting</a></li>
<li><a id="info_btn" href="/info.html" data-role="button" data-icon="info" data-iconpos="top">Info</a></li>
</ul>
</div>
</div>
</div>

22. Sencha Touch
Mobile JavaScript Framework
jQueryMobile
.
, ,
.
.
Ext.js .
.

23. Sencha Touch
Mobile JavaScript Framework

24. Sencha Touch
Mobile JavaScript Framework
<!-- Application JS -->
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript" src="./js/about.js"></script>
<script type="text/javascript" src="./js/favorite.js"></script>
<script type="text/javascript" src="./js/download.js"></script>
<script type="text/javascript" src="./js/user.js"></script>
<script type="text/javascript" src="./js/setting.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var panel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
fullscreen: true,
cardSwitchAnimation: 'slide',//'fade', 'slide', 'flip', 'cube', 'pop', 'wipe'
items: [itemlist, favorite, download, setting, user ]
});
}
});

25. Sencha Touch
Mobile JavaScript Framework
http://touchsolitaire.mobi/app/
jQueryMobile UI
SenchaTouch

26. Demo
Mobile Web + PhoneGap
Mobile Web + Appspresso

27. Demo
Appspresso + jQueryMobile

28. Demo
Appspresso + Sencha Touch

29. Demo
Appspresso Device Api

30. http://www.phonegap.com
http://www.appcelerator.com
http://www.appspresso.com
http://www.jquerymobile.com
http://www.sencha.com
http://www.ibare.kr/talk/358

31. Q&A