第一次 Mobile App 就上手

  • 5,589 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
5,589
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
0
Comments
0
Likes
12

Embeds 0

No embeds

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 ( 繁中 )