• Save
第一次 Mobile App 就上手
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

第一次 Mobile App 就上手

  • 6,347 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,347
On Slideshare
5,345
From Embeds
1,002
Number of Embeds
14

Actions

Shares
Downloads
0
Comments
0
Likes
12

Embeds 1,002

http://clayliao.blogspot.com 480
http://clayliao.blogspot.tw 416
http://clayliao.blogspot.hk 53
url_unknown 14
http://feeds2.feedburner.com 10
http://feeds.feedburner.com 8
http://www.linkedin.com 7
http://clayliao.blogspot.jp 5
http://xianguo.com 3
http://www.slideshare.net 2
http://clayliao.blogspot.ca 1
http://clayliao.blogspot.com.au 1
http://cloud.feedly.com 1
http://clayliao.blogspot.se 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/
  • http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/

Transcript

  • 1. 第一次 Mobile App 就上手 Yahoo! Search, F2E clayliao May 26, 2011
  • 2. Agenda
    • How “Mobile” you are?
    • Should I build Native App or Mobile Web?
    • Get start for Mobile Web
    • iOS / Android Native App in practice
    • 畢其功於一役:跨平台開發 Mobile App
  • 3. Hot Apps in iTunes Store
  • 4. Hot Apps in iTunes Store
  • 5. Mobile Web or Native App?
  • 6. Mobile Web or Native App?
  • 7. Mobile Web v.s. Native App
    • Require camera, microphone or device hardware?
    • Access Address book, media library or user data?
    • Multitask and notification?
    • Online/offline user scenario?
    • Sale Apps on App Store or Market?
  • 8. Mobile Web
    • Geolocation information
    • Offline cache and storage
    • Touch and gesture event handling
    • Easily deployed
    • Cross-platform
  • 9. Get Start for Mobile Web
  • 10. 偵測使用者上網工具
    • 當使用者以行動裝置造訪網站時,將使用者導引到行動版本網頁。
    • HTTP header
      • 檢查 Accept 欄位是否包含 text/vnd.wap.wml 或 application/vnd.wap.xhtml+xml
      • 檢查是否有包含 X-Wap-Profile, Profile, X-OperaMini-Features 或 UA-pixels 等欄位
    • User-Agent
      • 比對手機品牌名稱字串,如 sony, nokia, java, moto…
  • 11. Mobile Web 頁面基本架構
  • 12. jQuery Mobile
    • jQuery 官方行動版本
    • 良好的 跨裝置 / 平台 能力
    • 官方網站
    • Demo
  • 13. jQTouch
    • jQuery 外掛
    • 早期熱門的 Mobile Library
    • 官方網站
    • Demo
  • 14. iWebkit
    • 使用 CSS 3 模擬外觀
    • UI 與 Native App 相似
    • 官方網站
    • Demo
  • 15. Sencha Touch
    • 完整支援 Touch event
      • Tap, double tap
      • Swipe, pitch, rotate
      • Tap and hold
    • Data intergration
      • Jsonp, YQL, Ajax
    • 官方網站
    • Demo
  • 16. Jo HTML5 Mobile App Framework
    • 在不同裝置顯示對應的 UI
    • 支援 HTML5, 例如 Audio
    • 官方網站
  • 17. Performance Matters! source Amazon 100ms delay results in 1% sales loss. Yahoo! 400ms delay results in 5-9% drop in full page traffic. Google 500ms delay drop search traffic by 20%. Bing 1s delay result 4% drop in revenue. AOL Fastest 10% of users stay 50% longer than slowest 10%.
  • 18. Make your mobile web faster
    • Progressive Enhancement
    • Reduce HTTP requests
    • Replace images with CSS where possible
    • Keep JavaScript/DOM small
    • Offline caching by Manifast
    • Local Storage
    • More tips from Yahoo! and Google
  • 19.
    • Source
    Few Request Browser Connections per Hostname Max Connections Android 2.2 4 4 iPad 4.0 6 30 iPhone 3.1 6 50 iPhone 4.0 4 30 Palm Pre 1.0 10 10
  • 20.
    • Source
    Small Cache Size Browser Max Cached Script Size Same Session Android 2.1 4 MB Android 2.2 2 MB iPad 4.0 4 MB iPhone 3.1 4 MB iPhone 4.0 4 MB Palm Pre 1.0 1 MB
  • 21. iOS / Android Native App in Practice
  • 22. iOS 開發前準備
    • Mac Leopard (OSX 10.5.6 or later)
    • 註冊 Apple ID
    • 安裝 iOS SDK 以及 Xcode (IDE)
    • 學習開發語言 Objective-C
    • 如需發佈至 iTunes Store 或 iPhone 實機測試,則需加入 Developer program :
        • Standard program: $99/year
        • Enterprise program: $299/year
  • 23. iTunes Store
  • 24. Xcode Live Demo
  • 25. Interface Builder
  • 26. iPhone Simulator
  • 27. Android 開發前準備
    • Windows XP / Vista / 7
    • Mac OS X 10.5.8 or later (x86 only) / Linux
    • 安裝 JDK 5/6
    • 安裝 Android SDK 以及 Eclipse (IDE)
    • 安裝 ADT Plugin for Eclipse
    • 學習開發語言 Java
    • * 免費 *
  • 28. Eclipse for Android Live Demo
  • 29. Android App Inventor Live Demo
  • 30. 跨平台開發 Mobile App
  • 31. Build Native App by Tools
    • 使用 HTML, CSS and J ava S cript 開發 Apps
    • 不需要重新學習新語言、適應新開發工具
    • 跨平台開發  Native App  的解決方案
    • 可使用部分硬體功能
    • 限制
  • 32. PhoneGap
    • HTML5 / CSS3 / JavaScript
    • Access Native features
    • Open Source
    • 支援 6 種平台
    • 利用 WebView 渲染 App
    • Xcode / DreamWeaver CS plugin
  • 33. How PhoneGap works phonegap.com
  • 34. Developer Tool Live Demo
  • 35. Titanium appcelerator.com
  • 36. Titanuim
    • HTML5 / CSS3 / JavaScript
    • Access Native features
    • Open Source
    • 免費版支援 iOS 以及 Android 平台
    • 將 JavaScript 編譯成為平台語言
    • 非 Web View 渲染
  • 37. Developer Tool Live Demo
  • 38. iPhone / Android Simulator Live Demo
  • 39. Mobile First!
    • GROWTH = OPPORTUNITY
    • CONSTRAINTS = FOCUS
    • CAPABILITIES = INNOVATION
    Source --by Luke Wroblewski
  • 40. Thank You!
  • 41. 學習資源
    • Mobile Safari Web Application Tutorial
    • Handling Events
    • Mobile Web Programming
    • Stanford iPhone Application Development
    • Beginning iPhone 4 DevelopmentExploring the iOS SDK
    • Become an Xcoder ( 繁中 )