HTML5를 활용한 하이브리드 앱개발하기
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 23,463 views

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

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

Statistics

Views

Total Views
23,463
Views on SlideShare
20,347
Embed Views
3,116

Actions

Likes
14
Downloads
364
Comments
0

19 Embeds 3,116

http://using.tistory.com 1892
http://webstorykim.tistory.com 479
http://www.hoons.kr 364
http://devilchen.tistory.com 155
http://hoons.kr 115
http://blog.kinorama.com 52
http://www.hoons.net 27
http://hoons.net 10
http://twitter.com 5
https://www.google.co.kr 4
http://www.google.co.kr 2
http://211.233.63.3 2
http://cafe.naver.com 2
url_unknown 2
http://www.hanrss.com 1
http://ucclight.hoons.kr 1
http://paper.li 1
http://www.google.com 1
http://www.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • HTML5 :
  • HYBRID? · Convert WebApp to Native App
  • Native Apps / UX / . / View slide
  • Web Apps - iPhone/iPad/Android/BlackBerry - HTML5, CSS, Javascript HTML5 View slide
  • Hybrid Apps Native + Web / / Device OS Hybrid Framework Web Browser Web Application css/js/html
  • 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
  • PhoneGap Cross Platform Mobile Application Framework Web App Native App WebApp Device javascript ! http://www.phonegap.com
  • 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
  • PhoneGap
  • PhoneGap
  • PhoneGap
  • Titanium Web App Native App http://www.appcelerator.com
  • 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
  • Appspresso http://www.appspresso.com PhoneGap Web App Native App , Eclipse IDE KTH iOS & Android
  • Appspresso Eclips Appspresso Project UI FrameWork Template
  • Appspresso
  • UI Fraemwork
  • jQuery Beta , , . . . . http://jquerymobile.com/
  • <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>
  • Sencha Touch Mobile JavaScript FrameworkjQueryMobile . , , . .Ext.js . .
  • Sencha Touch Mobile JavaScript Framework
  • 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 ] }); }});
  • Sencha Touch Mobile JavaScript Framework http://touchsolitaire.mobi/app/ jQueryMobile UI SenchaTouch
  • 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.jquerymobile.com http://www.sencha.com http://www.ibare.kr/talk/358
  • Q&A