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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

第一次 Mobile App 就上手

  • 5,622 views
Published

 

Published 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,622
On SlideShare
0
From Embeds
0
Number of Embeds
8

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