第一次 Mobile App 就上手

6,286 views
6,156 views

Published on

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,286
On SlideShare
0
From Embeds
0
Number of Embeds
1,101
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

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/
  • 第一次 Mobile App 就上手

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

    ×