Transcript 回應式設計
行動終端程式設計 授課: 洪國龍 課程大綱 Part 1: (第1週) 1. 2. 3. 跨平台APP程式設計介紹 JQuery Mobile PhoneGap Part 2:(第2週) 1. 2. 3. 4. Android簡介及環境設定 Android常用控制項及事件處理 Android版面配置 Android資料庫 (SQLite) Chapter 1 跨平台APP開發介紹 行動應用的挑戰 HTML5 行動WEB APP •以 HTML 5 技術提供資訊服務 •純網頁 (HTML/CSS/JS) == Mobile Web Pages –加入主畫面螢幕 •Hybrid混合模式 (PhoneGap) –主體為應用程式(Native Code) –內容為網頁(WebUI) 行動WEB APP的優點 •網頁幾乎可以在所有手機的瀏覽器運行 –只要寫一個版本就可以了 •利用目前的技術就可以建置 –後端: PHP 或 C# 或 Java –豐富的應用程式框架可供使用 –減少開發成本與時程 •容易維護 –不怕找不到程式師 HYBRID APP 混合APP的代碼會先以Web 技術編寫，如HTML5, CSS 和 JavaScript。這些程式再被包裹在原生容器 (Native Container) 並透過手機上的瀏覽器引擎來呈 現 HTML 和執行 JavaScript。 Hybrid App 的優點 是一個編碼程式能夠跨越不同的作業平台，不需要 為每個操作系統編寫特定的編碼。 PHONEGAP 跨平台APP開發使用的技術 HTML/HTML5 CSS JavaScript JQuery / JQuery Mobile PhoneGap JQUERY MOBILE 認識JQUERY MOBILE jQuery Mobile是由jQuery專案小組開發，在2011年 11月推出1.0正式版，它是一套建立在jQuery函數庫 之上的使用介面系統（User Interface System， UI），一個觸控最佳化的Web框架，它應用在所有 流行的手機、平板電腦、電子閱讀器、和桌面平台。 它提供眾多最佳化觸控操作的使用介面元素，可以 讓我們不用撰寫一行JavaScript程式碼，就輕鬆使 用HTML標籤建立跨行動裝置網站或Mobile Web應 用程式的使用介面。 JQUERY MOBILE 的特色 • Single-page app (單一頁面結構) –單一的HTML檔案中, 擁有多個Mobile Page • 豐富的UI組件 • 漸進增強(Progressive Enhancement) • 回應式設計(Responsive Design) • 對話框和轉場特效 • Ajax導航 • 主題化造型 JQUERY MOBILE 的基本架構 JQUERY MOBILE 的基本架構 JQUERY MOBILE 的基本架構 重點是可以用DIV在同一HTML定義出很多頁面 頁面1 Id=page1 頁面1 Id=page2 同一HTML檔案多個頁面 JQUERY MOBILE UI JQUERY MOBILE UI PROGRESSIVE ENHANCEMENT (漸進增 強) A-grade - Full enhanced experience with Ajax-based animated page transitions. B-grade - Enhanced experience except without Ajax navigation features. C-grade - Basic, non-enhanced HTML experience that is still functional RESPONSIVE DESIGN(回應式設計) 回應式設計(Responsive Design)是一種可使網站 在多種瀏覽裝置 (手機、平板及桌上型電腦）上閱 讀和導航，同時能減少縮放、平移和捲動的技術做 法。 jQuery Mobile本身被設計為具有回應式設計特性的 框架，從一開始，其內文和表單都具有一些回應式 元件，它們會根據不同的瀏覽裝置而呈現不同的顯 示尺寸。 該元件庫還包括一些回應式的佈局組件，如回應式 布局格點（responsive grids)、reflow表格、列選擇 表(column chooser tables)和 滑動面板 (sliding panels)等 。 RESPONSIVE DESIGN(回應式設計) 對話框和轉場特效 一個頁面可以被加上樣式成為一個對話框，使一個 頁面看起來就像是一個重疊在其他頁面上的模式對 話框，也就是藉著添加 data-rel=“dialog”屬性鏈 結在一個標準的頁面上而得一個模式對話框的外觀； 另外，也可在對話框中的鏈結上設定一些轉場特效 (例. data-transition=“slide“)。 對話框 對話框(方法1) 對話框(方法2) JQUERY MOBILE轉場特效 AJAX導航 每當點擊一個鏈接或提交表單時，該事件被Ajax導 航系統自動攔截，以確保在href或表單動作下，其為 一個Ajax請求而不是重新下載頁面。 當所請求的頁面被下載時，jQuery Mobile剖析文檔 中data-role="page"屬性的元素，並插入代碼到原始 頁面的DOM中。接下來，在即將進入頁面的任何組 件，都會應用所有樣式和行為來增強它們。輸入頁 面的其餘部分將被丟棄，所以任何腳本，樣式或其 他訊息都將不會被被包括在內。當這個新的頁面被 進入視野後，該框架也會查覺到進入頁面的標題資 訊，並且用以更新目前的標題。 當所請求頁面在DOM內被增強後，便會利用轉場特 效，以動畫的方式進入視野。在預設情況下，該框 架使用一個淡入淡出(fade)轉場特效。 AJAX導航 主題化造型 jQuery Mobile支援主題化的設計，讓設計人員能夠 快速製定屬於自己風格的用戶界面。預設情況下， jQuery移動提供了五個主題化的設計，讓開發者可 以靈活地應用各個主題到所有組件，包括頁面，標 題，內容和頁腳組件。一個用於創建自己主題最有 用的工具是ThemeRoller。 THEMEROLLER THEMEROLLER 利用JAVASCRIPT或JQUERY進行互動設計 jQuery 是一套物件導向式簡潔輕量級 的 JavaScript Library。透過 jQuery 你可以用最 精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、 事件處理、設計頁面元素動態效果、AJAX互動等。 利用JAVASCRIPT或JQUERY進行互動設計