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

4,613 views

Published on

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

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,613
On SlideShare
0
From Embeds
0
Number of Embeds
2,214
Actions
Shares
0
Downloads
38
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

淡江大學 - 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/

×