利用 HTML5 + JavaScript + CSS 開發手機應用程式
Upcoming SlideShare
Loading in...5
×
 

利用 HTML5 + JavaScript + CSS 開發手機應用程式

on

  • 24,360 views

for 非技術人員

for 非技術人員

Statistics

Views

Total Views
24,360
Views on SlideShare
24,357
Embed Views
3

Actions

Likes
27
Downloads
239
Comments
1

1 Embed 3

http://www.plurk.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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…
  • thank you
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

利用 HTML5 + JavaScript + CSS 開發手機應用程式 利用 HTML5 + JavaScript + CSS 開發手機應用程式 Presentation Transcript

  • 技術分享利用 HTML5 + JavaScript + CSS開發手機應用程式(以 Android 為例) http://slidesha.re/xeqC4C R3 kuro
  • 常見行動裝置 App 類型: 1. Native App. 2. Web App. 3. Hybrid App.
  • Native App (原生介面,為裝置量身訂做)1. 對系統/手機硬體支援度好2. 執行效率最佳3. 開發門檻相對高 Android: Java iOS: Objective-C
  • Web App (在行動裝置上的瀏覽器執行)1. 完全利用 HTML 開發,開發速度相對快 2. UI 交給瀏覽器 Rendering,執行效率好壞全依賴裝置硬體規格 3. 對硬體支援度差,無法使用行動裝置特殊功能 (如拍照,加速度計,GPS,檔案系統存取… 等功能)
  • Hybrid App(混合型,將網站包進全螢幕瀏覽器)1. 開發方式與 Web App 類似2. 透過 Mobile App Framework 包裝成原生 App,可以使 Web App 使用行動裝置上的特殊功能Android: WebView iOS: UIWebView
  • Native App. Hybrid App. Web App. HTML5 + JS + CSS HTML5 + JS + 技術門檻 Java / Obj-C + JS API CSS 跨平台 X O O使用者經驗 最佳 普通 普通 離線使用 O O X裝置功能整合 最佳 普通 低*上架賣錢 O O X * Android Market 因為某某因素…
  • UI Component:提供適用於觸控螢幕的UI元件JavaScript Library:讓開發更有效率的 JavaScript 函式庫。Wrapper:可把 Mobile Web App 包裝成原生軟體 (Native App),同時提供一些 function 讓 JavaScript 可以存取一些底層的功能
  • 今天的主角
  • 為何使用 PhoneGap ? 使用容易 支援多種行動裝置平台 Open Source 社群支援 免費
  • 開發需求Android : Android SDK + PhoneGap Eclipse (非必要)iOS : Mac OS X 10.6+ iOS SDK + Phonegap Xcode (非必要)
  • PhoneGap API 介紹 ACCELEROMETER (加速度計) CAMERA (相機) COMPASS (指南針) DEVICE (裝置資訊) GEOLOCATION (地理定位)
  • PhoneGap API 介紹 EVENTS (事件處理) FILE (檔案系統) CONNECTION (連線偵測) MEDIA (多媒體) STORAGE (LOCAL 資料存儲)
  • DEMO 1 :透過台北市政府公開資料平台線上取得台北超市商場資料資料來源:http://data.taipei.gov.tw/ct.asp?xitem=3448994&ctnode=45112&mp=datataipei
  • JQuery mobile (UI)Geolocation APIAjax
  • DEMO 2 : 搖靈籤 APP (安裝前需先勾選允許安裝非 Market 應用程式)
  • Accelerometer (加速度計)Events APIMedia APILocal Storage APIHTML5 Canvas
  • Q&A
  • 參考資料:1. PhoneGap: http://phonegap.com/start/#android2. PhoneGap API: http://docs.phonegap.com/en/1.3.0/index.html3. PhoneGap Wiki http://wiki.phonegap.com/w/page/16494772/FrontPage4. Mobile web app framework 總整理: http://www.lis186.com/?p=20305. 你的第一支 PhoneGap 應用程式:HELLO INSIDE!http://www.inside.com.tw/2011/01/29/hello-inside-phonegap6. 跨平台手機服務開發 JQuery Mobilehttp://www.cc.ntu.edu.tw/chinese/epaper/0016/20110320_1609.html7. 使用 JQuery Mobile 快速開發 Mobile 網站http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development8. JQuery Mobile framework – a forms tutorialhttp://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms
  • 謝謝大家