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

  • 23,554 views
Uploaded on

[30회 정기세미나] HTML5 실무적용 전략 …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
23,554
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
378
Comments
0
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 AppObjective-C, Java, C#XCode, Eclipse, Visual Studio HTML, CSS, Javascript HTML, CSS, JavascriptiPhone Mac 99$ , JQueryMobile, , jQueryMobile, jQTouch... SenchaTouch Mac
  • 7. PhoneGap Cross Platform Mobile Application Framework Web App Native App WebApp Device javascript ! http://www.phonegap.com
  • 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. PhoneGap
  • 10. PhoneGap
  • 11. PhoneGap
  • 12. Titanium Web App Native App http://www.appcelerator.com
  • 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. Appspresso http://www.appspresso.com PhoneGap Web App Native App , Eclipse IDE KTH iOS & Android
  • 15. Appspresso Eclips Appspresso Project UI FrameWork Template
  • 16. Appspresso
  • 17. UI Fraemwork
  • 18. jQuery Beta , , . . . . http://jquerymobile.com/
  • 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. Sencha Touch Mobile JavaScript FrameworkjQueryMobile . , , . .Ext.js . .
  • 21. Sencha Touch Mobile JavaScript Framework
  • 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. Sencha Touch Mobile JavaScript Framework http://touchsolitaire.mobi/app/ jQueryMobile UI SenchaTouch
  • 24. Demo Mobile Web + PhoneGap Mobile Web + Appspresso
  • 25. Demo Appspresso + jQueryMobile
  • 26. Demo Appspresso + Sencha Touch
  • 27. Demo Appspresso Device Api
  • 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. Q&A