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.
iOS / Android / HTML5 (Javascript)
2013.12.21 @淡江大學
Taien Wang<taien_wang@hiiir.com>
時間軸科技股份有限公司
大綱
•

iOS
– 技術架構
– 設計

•

Android
– 技術架構

– 設計
•

HTML5/JavaScript Framework
iOS
開始開發 iOS
•

MAC 環境
– 買台 MAC
– VMWare: os-x-mountain-lion-10.8.3-vmware-image
• 同時支援 AMD/Intel
• i7 等級以上順暢, i5 稍微 Lag

資料來源...
iOS 架構

資料來源:
https://developer.apple.com/library/IOs/documentation/Miscellaneous/Conceptual/iPhoneO
STechOverview/Introdu...
Xcode 5 下載

資料來源:
https://developer.apple.com/xcode/
資料來源:
http://www.takobear.tw/12/post/2013/10/-bear-xcode-5-ios.html

XCode5 開發
更多資料
http://www.apple.com/ios/whats-new/
iOS 7 UI Transition Guide

資料來源:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Transitio...
UX 與動線設計
App 設計流程

資料來源:
https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/index.html
Storybroad

資料來源:
https://medium.com/design-ux/62b643a3a0f7
POP – Prototyping on Paper

更多資料: https://popapp.in/
不建議的流程設計
*Menu Bar

功能A

Return?

Click

功能C

功能….

Click

功能A-列表

功能C-列表

功能B-列表

Click

功能A-內頁

功能B

Click
Cross

功能B-內頁...
建議的流程設計
*Menu Bar
Cross

功能A

Click

功能B
Return

功能A-列表
Click

Return

功能A-內頁

Click

功能C
Return

Click

Click

Return

功能...
建議的流程設計—範例
iOS 學習資源
•

iOS Developer Library

•

iOS Developer Library - Getting Started

•

iOS Developer Library – Sample Code

•

...
Apple
給的聖誕節禮物….
送審時間要提早了…..
Android
開始開發 Android
•

Android Developer Tool
– Eclipse
– Android Studio
• IntelliJ
如果你想玩更核心的…
•

請準備 Ubuntu
– Android Source

•

可以做整合原 Android 系統
– 原通訊錄
– Pre-Install

資料來源:
Taien’s Blog – 編譯 Android 原始嗎
整合通訊錄(2.2 範例)
Andorid 藍圖

資料來源:

Android Apps Security, Sheran A. Gunasekera, 2012
Eclipse 開發
Android 模擬器
•

官方模擬器

•

Bluestacks

•

Genymotion
Android 最麻煩的事情 – 尺寸太多
•

目前大致上的手機不跳脫這 7 類
螢幕大小

大小

QVGA

240*320

WQVGA400(WQVGA)

240*400

WQVGA432(FWQVGA)

240*432

HV...
多尺寸螢幕類型
•

Google 將這 7 類分成四類與四個解析度

資料來源:
http://developer.android.com/guide/practices/screens_support.html
解決方案
•

使用
– FreeLayout
– XML
• 熟悉布局
• 搭配自動圖片轉檔
Android 布局
•

Layouts
– Linear Layout
– Relative Layout
– List View
– Grid View

資料來源:
http://developer.android.com/guide/...
另一個問題是版本也很多
系統改版時不要擔心
如果所有東西都沒不改變,你就失業了
Android 學習資源
•

Google Play 開發人員計畫政策

•

Android Design Principles

•

Android Develop - API Guides

•

深入淺出 Android -- Go...
不寫程式的人有福了
除了 Xcode 的故事情節
免寫程式碼產生 App
App.net

還有其他類似的產品, 請自行找
初學者建議可以多了解系統架構與基礎

Conduit
HTML5
更多資料:
W3C – HTML5
Wiki – HTML5
HTML 5 案例整理

•

http://html5demos.com/

•

http://html5gallery.com/

•

http://blog.teamtreehouse.com/23-essential-html-5-...
馬克說: HTML 5 是個錯誤

資料來源:
http://vimeo.com/55486684#at=15

Jamie Avins’fastbook:
https://github.com/extjs/fastbook

Facebook...
HTML + CSS + JS => App
•

PhoneGap

•

Tianium
到底這種 Framework 是什麼?
以 PhoneGap 為例

資料來源:
http://www.youtube.com/watch?v=wOH4aGows40
PhoneGap 支援

資料來源:
http://phonegap.com/about/feature/
淡江大學 - ios+android+html5(javascript)
Upcoming SlideShare
Loading in …5
×

淡江大學 - ios+android+html5(javascript)

4,768 views

Published on

淡江大學行動應用實務課程

Published in: Technology, Design
  • Be the first to comment

淡江大學 - ios+android+html5(javascript)

  1. 1. iOS / Android / HTML5 (Javascript) 2013.12.21 @淡江大學 Taien Wang<taien_wang@hiiir.com> 時間軸科技股份有限公司
  2. 2. 大綱 • iOS – 技術架構 – 設計 • Android – 技術架構 – 設計 • HTML5/JavaScript Framework
  3. 3. iOS
  4. 4. 開始開發 iOS • MAC 環境 – 買台 MAC – VMWare: os-x-mountain-lion-10.8.3-vmware-image • 同時支援 AMD/Intel • i7 等級以上順暢, i5 稍微 Lag 資料來源: http://www.hankcs.com/appos/amd_mac_vmware.html
  5. 5. iOS 架構 資料來源: https://developer.apple.com/library/IOs/documentation/Miscellaneous/Conceptual/iPhoneO STechOverview/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007898-CH1-SW1
  6. 6. Xcode 5 下載 資料來源: https://developer.apple.com/xcode/
  7. 7. 資料來源: http://www.takobear.tw/12/post/2013/10/-bear-xcode-5-ios.html XCode5 開發
  8. 8. 更多資料 http://www.apple.com/ios/whats-new/
  9. 9. iOS 7 UI Transition Guide 資料來源: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html
  10. 10. UX 與動線設計
  11. 11. App 設計流程 資料來源: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/RoadMapiOS/index.html
  12. 12. Storybroad 資料來源: https://medium.com/design-ux/62b643a3a0f7
  13. 13. POP – Prototyping on Paper 更多資料: https://popapp.in/
  14. 14. 不建議的流程設計 *Menu Bar 功能A Return? Click 功能C 功能…. Click 功能A-列表 功能C-列表 功能B-列表 Click 功能A-內頁 功能B Click Cross 功能B-內頁 Return? 功能C-內頁 *功能列表頁與功能內頁是有Menu bar的….冏
  15. 15. 建議的流程設計 *Menu Bar Cross 功能A Click 功能B Return 功能A-列表 Click Return 功能A-內頁 Click 功能C Return Click Click Return 功能B-內頁 Return 功能C-列表 功能B-列表 Click 功能…. Cross Return 功能C-內頁 *功能列表頁與功能內頁沒有Menu bar
  16. 16. 建議的流程設計—範例
  17. 17. iOS 學習資源 • iOS Developer Library • iOS Developer Library - Getting Started • iOS Developer Library – Sample Code • iOS Developer Library - iOS 7 Design Resources – iOS Human Interface Guidelines • Learning Xcode 5 As a Designer • App Review – 送審(中譯)
  18. 18. Apple 給的聖誕節禮物….
  19. 19. 送審時間要提早了…..
  20. 20. Android
  21. 21. 開始開發 Android • Android Developer Tool – Eclipse – Android Studio • IntelliJ
  22. 22. 如果你想玩更核心的… • 請準備 Ubuntu – Android Source • 可以做整合原 Android 系統 – 原通訊錄 – Pre-Install 資料來源: Taien’s Blog – 編譯 Android 原始嗎
  23. 23. 整合通訊錄(2.2 範例)
  24. 24. Andorid 藍圖 資料來源: Android Apps Security, Sheran A. Gunasekera, 2012
  25. 25. Eclipse 開發
  26. 26. Android 模擬器 • 官方模擬器 • Bluestacks • Genymotion
  27. 27. Android 最麻煩的事情 – 尺寸太多 • 目前大致上的手機不跳脫這 7 類 螢幕大小 大小 QVGA 240*320 WQVGA400(WQVGA) 240*400 WQVGA432(FWQVGA) 240*432 HVAG(HVGA-P/HVGA-L/QVGA-L) 320*480 WVGA(WVGA800) 480*800 WVGA854 480*854 WXGA 1280*800 資料來源: http://developer.android.com/guide/practices/screens_support.html
  28. 28. 多尺寸螢幕類型 • Google 將這 7 類分成四類與四個解析度 資料來源: http://developer.android.com/guide/practices/screens_support.html
  29. 29. 解決方案 • 使用 – FreeLayout – XML • 熟悉布局 • 搭配自動圖片轉檔
  30. 30. Android 布局 • Layouts – Linear Layout – Relative Layout – List View – Grid View 資料來源: http://developer.android.com/guide/topics/ui/declaring-layout.html
  31. 31. 另一個問題是版本也很多
  32. 32. 系統改版時不要擔心 如果所有東西都沒不改變,你就失業了
  33. 33. Android 學習資源 • Google Play 開發人員計畫政策 • Android Design Principles • Android Develop - API Guides • 深入淺出 Android -- Google 手持設備應用程式設計入門 • Android Developer Tool 安裝完內建範例專案
  34. 34. 不寫程式的人有福了 除了 Xcode 的故事情節
  35. 35. 免寫程式碼產生 App App.net 還有其他類似的產品, 請自行找 初學者建議可以多了解系統架構與基礎 Conduit
  36. 36. HTML5
  37. 37. 更多資料: W3C – HTML5 Wiki – HTML5
  38. 38. HTML 5 案例整理 • http://html5demos.com/ • http://html5gallery.com/ • http://blog.teamtreehouse.com/23-essential-html-5-resources
  39. 39. 馬克說: HTML 5 是個錯誤 資料來源: http://vimeo.com/55486684#at=15 Jamie Avins’fastbook: https://github.com/extjs/fastbook Facebook HTML5: http://fb.html5isready.com/
  40. 40. HTML + CSS + JS => App • PhoneGap • Tianium
  41. 41. 到底這種 Framework 是什麼? 以 PhoneGap 為例 資料來源: http://www.youtube.com/watch?v=wOH4aGows40
  42. 42. PhoneGap 支援 資料來源: http://phonegap.com/about/feature/

×