第一次 Mobile App 就上手 Yahoo! Search, F2E clayliao May 26, 2011
Agenda <ul><li>How “Mobile” you are? </li></ul><ul><li>Should I build Native App or Mobile Web? </li></ul><ul><li>Get star...
Hot Apps in iTunes Store
Hot Apps in iTunes Store
Mobile Web or Native App?
Mobile Web or Native App?
Mobile Web v.s. Native App <ul><li>Require camera, microphone or device hardware? </li></ul><ul><li>Access Address book, m...
Mobile Web <ul><li>Geolocation information </li></ul><ul><li>Offline cache and storage </li></ul><ul><li>Touch and gesture...
Get Start for Mobile Web
偵測使用者上網工具 <ul><li>當使用者以行動裝置造訪網站時,將使用者導引到行動版本網頁。 </li></ul><ul><li>HTTP header  </li></ul><ul><ul><li>檢查   Accept  欄位是否包含  ...
Mobile Web  頁面基本架構
jQuery Mobile <ul><li>jQuery  官方行動版本 </li></ul><ul><li>良好的 跨裝置 / 平台 能力 </li></ul><ul><li>官方網站 </li></ul><ul><li>Demo </li>...
jQTouch <ul><li>jQuery  外掛 </li></ul><ul><li>早期熱門的 Mobile Library </li></ul><ul><li>官方網站 </li></ul><ul><li>Demo </li></ul>
iWebkit <ul><li>使用  CSS 3  模擬外觀 </li></ul><ul><li>UI  與  Native App  相似 </li></ul><ul><li>官方網站 </li></ul><ul><li>Demo </li...
Sencha Touch <ul><li>完整支援  Touch event </li></ul><ul><ul><li>Tap, double tap </li></ul></ul><ul><ul><li>Swipe, pitch, rota...
Jo HTML5 Mobile App Framework <ul><li>在不同裝置顯示對應的  UI </li></ul><ul><li>支援  HTML5,  例如  Audio </li></ul><ul><li>官方網站   </li...
Performance Matters! source Amazon 100ms  delay results in 1% sales loss.  Yahoo! 400ms  delay results in 5-9% drop in ful...
Make your mobile web faster <ul><li>Progressive Enhancement </li></ul><ul><li>Reduce HTTP requests </li></ul><ul><li>Repla...
<ul><li>Source </li></ul>Few Request Browser Connections  per Hostname Max Connections Android 2.2 4 4 iPad 4.0 6 30 iPhon...
<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 i...
iOS / Android  Native App in Practice
iOS  開發前準備 <ul><li>Mac Leopard (OSX 10.5.6 or later) </li></ul><ul><li>註冊  Apple ID </li></ul><ul><li>安裝  iOS SDK  以及  Xco...
iTunes Store
Xcode Live Demo
Interface Builder
iPhone Simulator
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...
Eclipse for Android  Live Demo
Android App Inventor Live Demo
跨平台開發  Mobile App
Build Native App by Tools <ul><li>使用  HTML, CSS and J ava S cript  開發  Apps </li></ul><ul><li>不需要重新學習新語言、適應新開發工具 </li></ul...
PhoneGap <ul><li>HTML5 / CSS3 / JavaScript </li></ul><ul><li>Access Native features </li></ul><ul><li>Open Source </li></u...
How PhoneGap works phonegap.com
Developer Tool Live Demo
Titanium appcelerator.com
Titanuim <ul><li>HTML5 / CSS3 / JavaScript </li></ul><ul><li>Access Native features </li></ul><ul><li>Open Source   </li><...
Developer Tool Live Demo
iPhone / Android Simulator Live Demo
Mobile First! <ul><li>GROWTH = OPPORTUNITY </li></ul><ul><li>CONSTRAINTS = FOCUS </li></ul><ul><li>CAPABILITIES = INNOVATI...
Thank You!
學習資源 <ul><li>Mobile Safari Web Application Tutorial </li></ul><ul><li>Handling Events </li></ul><ul><li>Mobile Web Program...
Upcoming SlideShare
Loading in...5
×

第一次 Mobile App 就上手

5,911

Published on

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

No Downloads
Views
Total Views
5,911
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
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>

    ×