Your SlideShare is downloading. ×
第一次 Mobile App 就上手
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

第一次 Mobile App 就上手

5,652
views

Published on

Published in: Technology

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,652
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
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 ( 繁中 )