Mais conteúdo relacionado Semelhante a 2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例 (20) 3. 下載了沒？
搜尋COSCUP2011
http://goo.gl/FlkFU http://goo.gl/cN3pZ
4. The Source is opened
git clone git://github.com/
lis186/COSCUP2011MobileApp.git
6. 我有個Idea
要做成App
http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
12. Web App
技術 HTML5+CSS+JS
跨平台能力 強
使用者經驗 尚可
離線能力 無
整合性與功能 弱
學習門檻 低
上架賣錢 沒辦法
13. Native App
技術 Java, Objective-C等
跨平台能力 低
使用者經驗 最佳
離線能力 有
整合性與功能 最佳
學習門檻 高
上架賣錢 可
41. 座位表
我的朋友和正妹坐哪裡？
http://www.flickr.com/photos/38664137@N07/4903778188/in/pool-1501134@N21/ Photo by D.K. CHOU
42. 即時分享
IRC,Plurk或是twitter
http://www.flickr.com/photos/timchen86/4890800578/in/pool-1502528@N22/ Photo by tim.chen
45. 不同情境，期待不同
活動前 找場地 聽講
人 人 人
找議題 找場地 查詢資訊
會議
家中 App 會場 App 室 App
怎麼找？ 下一場是？ 更多資訊
位置在哪？
46. 不同情境，限制不同
活動前 找場地 聽講
人 人 人
找議題 找場地 查詢資訊
會議
家中 App 會場 App 室 App
找到哪裡？ 邊走邊用 網路不穩定
47. 情境 功能
‧顯示所有議程
‧標記想聽的內容
‧活動提醒...
48. 功能 UI與架構
‧顯示所有議程
‧標記想聽的內容
‧活動提醒...
51. 先iOS後Android
240x320
320x480 240x400
240x432
320x480
480x800 1280x800
480x854
640x960
768x102
59. Titanium Mobile
‧Open Source (Apache 2.0)
‧支援平台: iOS, Android, BlackBerry(Beta)
‧開發平台: Mac OSX, Windows, Ubuntu
‧SDK: Titanium Mobile SDK 1.7.2
‧開發工具: Titanium Studio 1.04
63. Titanium Mobile的功能
Native User Experience Multimedia
Native performance + Native UI Camera, video camera,
(tables, animations, gestures…etc.) streaming/device audio/video
Location-based services Analytics
Augmented reality, geo-location, Custom analytics baked into every
compass, native maps application, track usage patterns
and adoption
Social sharing Titanium+Plus
Authenticated access to Facebook, Encrypted database, ecommerce,
Twitter, Yahoo YQL. ads, barcode scanners, custom
Native email/address book analytics, in-app purchase
Data Development tools
Local SQLite data store, web Create, test, and publish your app
services, lightweight key/value using the same tools across
store platforms
65. 專案架構
helloWorld/
build/ 原生專案
android/
...
iphone/
...
CHANGELOG.txt
LICENSE
LICENSE.txt
manifest
README
Resources/ 原始碼和其他資料檔
android/
... android專用檔案
app.js 起始檔
iphone/
... iphone專用檔案
KS_nav_ui.png
KS_nav_views.png
tiapp.xml 設定檔
http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure
66. Hello World!
var win = Titanium.UI.createWindow({
backgroundColor:'#fff'
});
var label = Titanium.UI.createLabel({
text: 'Hello World!',
textAlign: 'center'
});
label.addEventListener('click', function(e){
Titanium.API.info('label clicked!');
});
win.add(label);
win.open();
74. 解析度(Resolution)
240x320
320x480 240x400
240x432
320x480
480x800 1280x800
480x854
640x960
768x102
76. 為不同螢幕準備素材
iOS Android
retina normal hdpi mdpi
ldpi
79. 為不同螢幕準備素材
Android 用路徑區分
res-long-port-hdpi
res-long-port-mdpi
res-long-port-ldpi
iOS 用檔名區分
Starred@2x.png
Starred.png
80. 長度單位
var view = Titanium.UI.createView({
width: 100, //Pixel
height: '100dp',//Density independence
});
win.add(view);
win.open();
95. iOS先行
開發 審核 上架
iOS
Android
開發 上架
