RWD 進階: Mobile Web 手機動態介面設計班

【教學主題一】 Mobile Web 的基本設定

  • Apache 測試主機設定
  • RWD 討論
  • AWD 討論
  • 手機版網站 uesrAgent 轉址
  • Viewport 基本設定
  • HTML5 網頁結構
  • iPhone 與 Android 旋轉畫面調校
  • 如何區隔桌面版和行動版程式

 

【教學主題二】 jQuery Mobile 整合應用

  • 安裝使用 jQuery Mobile 開發套件
  • JQ-M 基本操作
  • 新增JQ-M 結構
  • 多頁式與單頁式的 JQ-M 結構
  • 使用 AJAX 載入資料
  • 多樣化的 JQ-M transition 動態翻頁
  • 設計完美的 Web APP 網頁
  • ThemeRoller 創建主題
  • 修改 JQ-M CSS 版型
  • 設計 JQ-M 按鈕樣式

 

【教學主題三】Mobile Web 介面調校

  • 基本 Mobile Web 使用者介面
  • 適合觸碰螢幕的選單設計
  • Android 2.x Android 4.x 相容性
  • 各種 Android 會遇到的網頁問題
  • Android 全營幕畫面設計
  • iPhone 全營幕畫面設計
  • 如何針對手機提昇網頁效能
  • JavaScript touch 觸碰事件

 

【教學主題四】CSS3 GUP 硬體加速動態效果應用

  • CSS3 transition 動畫設計
  • CSS3 transform 變形效果
  • CSS3 animation 動畫設計
  • CSS3 手機 GPU 硬體加速語法
  • CSS3 translate-3d 效果
  • CSS3 動態介面設計

 

【教學主題五】CSS3 動畫 & JavaScript jQuery 程式整合應用

  • jQuery 與 CSS3 動畫整合
  • jQuery toggleClass();
  • jQuery 與 CSS3 下拉式選單設計
  • jQuery 與 CSS3 縮放式選單設計
  • jQuery Slide 翻頁效果
  • jQuery Accordion 手風琴效果
  • CSS3 3D 翻轉效果
  • 如何提昇 jQuery 程式效能

 

【教學主題六】 Mobile Web 動態介面設計

  • jQuery Transit 外掛程式
  • 手機全螢幕滿版設計
  • 滑出式選單設計
  • 手機旋轉畫面自動調校
  • Pages Loading 設計
  • AJAX 動態翻頁效果整合應用
  • Zepto 外掛程式
  • Zepto 優化程式
  • 3D Flip 動態翻頁效果效果
  • Carousel 動態翻頁設計
  • AJAX 動態載入網頁

 

【教學主題七】Swipe 滑動事件應用

  • Photo Swipe 外掛
  • iScroll 動態捲軸設計
  • iScroll 左右捲動式選單設計
  • iScroll snap 貼合螢幕效果
  • Snap.js 拖曳式選單設計
  • Swipe 左右滑動事件
  • Swipe 滑動選單設計
  • Swipe 翻頁選單設計
  • Swipe 電子書效果
  • jQuery Cycle 外掛程式應用
   出處:飛肯設計
   飛肯設計

Be the first to comment on "RWD 進階: Mobile Web 手機動態介面設計班"

Leave a comment

Your email address will not be published.


*