Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5               :
HYBRID?               	                            	                          	                     	                     ...
Native Apps                    /               UX                                /                            .           ...
Web Apps          - iPhone/iPad/Android/BlackBerry      - HTML5, CSS, Javascript     HTML5
Hybrid Apps               Native + Web                              /                                                    /...
Native App vs Hybrid App vs Web App           Native App                 Hybrid App                          Web AppObject...
PhoneGap                               Cross Platform Mobile Application Framework                               Web App  ...
PhoneGap               PhoneGap framework                 (Container App)             iOS or Android App File           re...
PhoneGap
PhoneGap
PhoneGap
Titanium                                         Web App   Native App          http://www.appcelerator.com
Titanium                 Titanium framework                    iOS or Android                                             ...
Appspresso                         http://www.appspresso.com          PhoneGap             Web App           Native App   ...
Appspresso               Eclips Appspresso                  Project                 UI FrameWork                          ...
Appspresso
UI Fraemwork
jQuery                       Beta               ,   ,                                  .                                  ...
<div data-role="page" id="/main.html">  <div data-role="header" data-position="fixed">    <h1>Main Header</h1>  </div>	  <...
Sencha Touch                       Mobile JavaScript FrameworkjQueryMobile                                      .         ...
Sencha Touch               Mobile JavaScript Framework
Sencha Touch                                      Mobile JavaScript Framework<!-- Application JS --><script type="text/jav...
Sencha Touch               Mobile JavaScript Framework                                    http://touchsolitaire.mobi/app/ ...
Demo          Mobile Web + PhoneGap          Mobile Web + Appspresso
Demo     Appspresso + jQueryMobile
Demo     Appspresso + Sencha Touch
Demo               Appspresso Device Api
http://www.phonegap.com          http://www.appcelerator.com          http://www.appspresso.com          http://www.jquery...
Q&A
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
Upcoming SlideShare
Loading in …5
×

HTML5를 활용한 하이브리드 앱개발하기

40,048 views

Published on

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

Published in: Technology, Design

HTML5를 활용한 하이브리드 앱개발하기

  1. 1. HTML5 :
  2. 2. HYBRID? · Convert WebApp to Native App
  3. 3. Native Apps / UX / . /
  4. 4. Web Apps - iPhone/iPad/Android/BlackBerry - HTML5, CSS, Javascript HTML5
  5. 5. Hybrid Apps Native + Web / / Device OS Hybrid Framework Web Browser Web Application css/js/html
  6. 6. Native App vs Hybrid App vs Web App Native App Hybrid App Web AppObjective-C, Java, C#XCode, Eclipse, Visual Studio HTML, CSS, Javascript HTML, CSS, JavascriptiPhone Mac 99$ , JQueryMobile, , jQueryMobile, jQTouch... SenchaTouch Mac
  7. 7. PhoneGap Cross Platform Mobile Application Framework Web App Native App WebApp Device javascript ! http://www.phonegap.com
  8. 8. 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
  9. 9. PhoneGap
  10. 10. PhoneGap
  11. 11. PhoneGap
  12. 12. Titanium Web App Native App http://www.appcelerator.com
  13. 13. 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
  14. 14. Appspresso http://www.appspresso.com PhoneGap Web App Native App , Eclipse IDE KTH iOS & Android
  15. 15. Appspresso Eclips Appspresso Project UI FrameWork Template
  16. 16. Appspresso
  17. 17. UI Fraemwork
  18. 18. jQuery Beta , , . . . . http://jquerymobile.com/
  19. 19. <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>
  20. 20. Sencha Touch Mobile JavaScript FrameworkjQueryMobile . , , . .Ext.js . .
  21. 21. Sencha Touch Mobile JavaScript Framework
  22. 22. 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 ] }); }});
  23. 23. Sencha Touch Mobile JavaScript Framework http://touchsolitaire.mobi/app/ jQueryMobile UI SenchaTouch
  24. 24. Demo Mobile Web + PhoneGap Mobile Web + Appspresso
  25. 25. Demo Appspresso + jQueryMobile
  26. 26. Demo Appspresso + Sencha Touch
  27. 27. Demo Appspresso Device Api
  28. 28. 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
  29. 29. Q&A

×