Mobile Web 開發架構與入門



一   Mobile Web 與 Web 開發差異性
二   Target
三   開發環境與工具
四   CSS JS HTML
五   網路資源
一 . Mobile Web 與 Web 開發差異性
                Web         Mobile Web
Browser         需考慮各家多種版本   只需考慮 WebKit

Window Size     固定大小        因旋轉而改變


HTML5 Support   非所有瀏覽器都支援   IOS 完全支援, Android
                            絕大部分都支援
                            (android2.2 以下佔有率大
                            約是 6%)
Display Area    window      viewport


Performance     PC 效能通常不差   CPU Memory Storage 通
                            常都比較小
二 .Target

Broswer
 只需針對 Webkit-base Browser
 Chrome and Safari 做測試


開發技術
 採 HTML5+CSS3+JavaScript(JSON)
三 . 開發環境與工具

開發 IDE 工具
 Eclips and Aptana

Debug
 1.Adobe Shadow(iOS and Android)
 2.Android Chrome USB Debug(Android)
 3.iOS Debug
 4.debug.phonegap.com (weinre)
四 .CSS JS HTML

CSS
 1.Bootstrap
 2.Less
 3.Compass


JS 框架
 1.jQueryMobile+jQuery
 2.BackboneJS +Zepto+RequireJS
 3.Sencha Touch+ExtJS
四 .CSS JS HTML

Package Tool
  1.RequireJS
  2.Sencha Touch

Wrapper Tool
  1.PhoneGap
  2.Sencha Touch

Utils
  1.UnderscoreJS
  2.SoundManager
  3.iScroll
五 . 網路資源

Github

電子報
 JavascriptWeekly
 Html5Weekly

社團
 FB HTML5
CodeIgniter 使用經驗

特色
1. 目前效能最好也輕量的 Server 端 MVC 架構
2. 使用 URI Router
3. 使用簡單 , 幾乎不用設定

安裝
codeIgniter官網

安裝參考
CodeIgniter 使用經驗

使用
1.Router
   例
   $route['admin/store/(:id)/(:cmd)'] = 'admin/store/$id/$cmd'
   $route['admin/citys'] = 'admin/citys';

2.Controller
   public function citys(){
      header('Content-type: application/json');
      $this->load->database();
      $citys=$this->_citys();
      $this->db->close();
      echo json_encode($citys);

Mobile web開發架構與入門

  • 1.
    Mobile Web 開發架構與入門 一 Mobile Web 與 Web 開發差異性 二 Target 三 開發環境與工具 四 CSS JS HTML 五 網路資源
  • 2.
    一 . MobileWeb 與 Web 開發差異性 Web Mobile Web Browser 需考慮各家多種版本 只需考慮 WebKit Window Size 固定大小 因旋轉而改變 HTML5 Support 非所有瀏覽器都支援 IOS 完全支援, Android 絕大部分都支援 (android2.2 以下佔有率大 約是 6%) Display Area window viewport Performance PC 效能通常不差 CPU Memory Storage 通 常都比較小
  • 3.
    二 .Target Broswer 只需針對Webkit-base Browser Chrome and Safari 做測試 開發技術 採 HTML5+CSS3+JavaScript(JSON)
  • 4.
    三 . 開發環境與工具 開發IDE 工具 Eclips and Aptana Debug 1.Adobe Shadow(iOS and Android) 2.Android Chrome USB Debug(Android) 3.iOS Debug 4.debug.phonegap.com (weinre)
  • 5.
    四 .CSS JSHTML CSS 1.Bootstrap 2.Less 3.Compass JS 框架 1.jQueryMobile+jQuery 2.BackboneJS +Zepto+RequireJS 3.Sencha Touch+ExtJS
  • 6.
    四 .CSS JSHTML Package Tool 1.RequireJS 2.Sencha Touch Wrapper Tool 1.PhoneGap 2.Sencha Touch Utils 1.UnderscoreJS 2.SoundManager 3.iScroll
  • 7.
    五 . 網路資源 Github 電子報 JavascriptWeekly Html5Weekly 社團 FB HTML5
  • 8.
    CodeIgniter 使用經驗 特色 1. 目前效能最好也輕量的Server 端 MVC 架構 2. 使用 URI Router 3. 使用簡單 , 幾乎不用設定 安裝 codeIgniter官網 安裝參考
  • 9.
    CodeIgniter 使用經驗 使用 1.Router 例 $route['admin/store/(:id)/(:cmd)'] = 'admin/store/$id/$cmd' $route['admin/citys'] = 'admin/citys'; 2.Controller public function citys(){ header('Content-type: application/json'); $this->load->database(); $citys=$this->_citys(); $this->db->close(); echo json_encode($citys);