This document discusses various options for developing mobile applications including native apps, web apps, and hybrid apps. It focuses on hybrid frameworks like PhoneGap, Titanium, and Appspresso which allow developing apps using web technologies that are then wrapped into native containers. These hybrid frameworks provide access to device features while developing using HTML, CSS, and JavaScript instead of native languages. Demo code examples are provided for building hybrid mobile apps with jQuery Mobile and Sencha Touch using the Appspresso framework.

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