• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第一次 Mobile App 就上手
 

第一次 Mobile App 就上手

on

  • 6,048 views

 

Statistics

Views

Total Views
6,048
Views on SlideShare
5,077
Embed Views
971

Actions

Likes
12
Downloads
0
Comments
0

14 Embeds 971

http://clayliao.blogspot.com 480
http://clayliao.blogspot.tw 395
http://clayliao.blogspot.hk 43
url_unknown 14
http://feeds2.feedburner.com 10
http://feeds.feedburner.com 8
http://www.linkedin.com 7
http://clayliao.blogspot.jp 5
http://xianguo.com 3
http://www.slideshare.net 2
http://clayliao.blogspot.ca 1
http://clayliao.blogspot.com.au 1
http://cloud.feedly.com 1
http://clayliao.blogspot.se 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 就上手 第一次 Mobile App 就上手 Presentation Transcript

  • 第一次 Mobile App 就上手 Yahoo! Search, F2E clayliao May 26, 2011
  • 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
  • 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
    • 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?
  • Mobile Web
    • Geolocation information
    • Offline cache and storage
    • Touch and gesture event handling
    • Easily deployed
    • Cross-platform
  • Get Start for Mobile Web
  • 偵測使用者上網工具
    • 當使用者以行動裝置造訪網站時,將使用者導引到行動版本網頁。
    • 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…
  • Mobile Web 頁面基本架構
  • jQuery Mobile
    • jQuery 官方行動版本
    • 良好的 跨裝置 / 平台 能力
    • 官方網站
    • Demo
  • jQTouch
    • jQuery 外掛
    • 早期熱門的 Mobile Library
    • 官方網站
    • Demo
  • iWebkit
    • 使用 CSS 3 模擬外觀
    • UI 與 Native App 相似
    • 官方網站
    • Demo
  • Sencha Touch
    • 完整支援 Touch event
      • Tap, double tap
      • Swipe, pitch, rotate
      • Tap and hold
    • Data intergration
      • Jsonp, YQL, Ajax
    • 官方網站
    • Demo
  • Jo HTML5 Mobile App Framework
    • 在不同裝置顯示對應的 UI
    • 支援 HTML5, 例如 Audio
    • 官方網站
  • 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%.
  • 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
    • 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
    • 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
  • iOS / Android Native App in Practice
  • 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
  • iTunes Store
  • Xcode Live Demo
  • Interface Builder
  • iPhone Simulator
  • 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
    • * 免費 *
  • Eclipse for Android Live Demo
  • Android App Inventor Live Demo
  • 跨平台開發 Mobile App
  • Build Native App by Tools
    • 使用 HTML, CSS and J ava S cript 開發 Apps
    • 不需要重新學習新語言、適應新開發工具
    • 跨平台開發  Native App  的解決方案
    • 可使用部分硬體功能
    • 限制
  • PhoneGap
    • HTML5 / CSS3 / JavaScript
    • Access Native features
    • Open Source
    • 支援 6 種平台
    • 利用 WebView 渲染 App
    • Xcode / DreamWeaver CS plugin
  • How PhoneGap works phonegap.com
  • Developer Tool Live Demo
  • Titanium appcelerator.com
  • Titanuim
    • HTML5 / CSS3 / JavaScript
    • Access Native features
    • Open Source
    • 免費版支援 iOS 以及 Android 平台
    • 將 JavaScript 編譯成為平台語言
    • 非 Web View 渲染
  • Developer Tool Live Demo
  • iPhone / Android Simulator Live Demo
  • Mobile First!
    • GROWTH = OPPORTUNITY
    • CONSTRAINTS = FOCUS
    • CAPABILITIES = INNOVATION
    Source --by Luke Wroblewski
  • Thank You!
  • 學習資源
    • Mobile Safari Web Application Tutorial
    • Handling Events
    • Mobile Web Programming
    • Stanford iPhone Application Development
    • Beginning iPhone 4 DevelopmentExploring the iOS SDK
    • Become an Xcoder ( 繁中 )