Chapter 4 系統設計與開發
4.3 閱讀介面設計
4.3.2 外觀調整
介面架構整理好之後，我們希望可以讓系統看起來更為美觀，並且加入一些 動畫操作等等，而其實動畫操作在 HTML5+CSS3 上面便可以很簡單的就加入開發系 統，而不需要用到任何一點 javascript 的程式碼，下面幾個是我們想加入的動畫 操作，而我們只需要 CSS3 便可以簡單完成。
Stack & Grow
圖表 4-12 CSS3
左邊列表上，我們可以看到很多標題列表以及來源列表，這一塊塊的區塊，
我們可以套用這個 CSS，讓每一塊區塊在選擇時可以更為明顯。
#sidebar{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
如上面的 CSS 程式碼，這是我們在還沒選擇時會呈現的狀態，而動畫時間我 們設定為一秒。
這是選擇之後的程式碼，選擇之後我們會將該項目左移 5px。
Fade In and Reflect
圖表 4-13 CSS3
這是一個讓圖片或是選項可以出現反射效果的 CSS3，而從來源抓取到的文字 及圖片，我們也可以用這項 CSS 去做調整，這樣看起來會美觀很多。
#side-select { height: 133px;
width: 400px;
margin-left: -5px;
}
#item-content a img {
border-color: #deb887;
border-width:thick;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left
top, left bottom, from(transparent), color-stop(.7, transparent),
to(rgba(0,0,0,0.4)));
這是 CSS3 的程式碼，我們只需要上述藍色這一行，就可以為樸片製造出反射的效 果
圖表 4-14 倒影呈現 這樣看起來就更美觀了。
4.3.3 無障礙控制
鍵盤快速鍵
圖表 4-15 鍵盤快速鍵畫面
在這邊，我們希望有障礙的使用者，無法方便的使用滑鼠，所以我們希望提 供鍵盤的快速鍵讓使用者可以方便的使用，而鍵盤快速鍵包含了上下頁、呼叫使 用說明、更新等等，而要製作鍵盤快速鍵，就必須要將鍵盤的控制對應到程式碼 之中，這必須使用到 jQuery。
而如上所示，只要系統執行的同時，如果偵測到 input 為設定的按鍵，
jQuery(document).ready(function (a) {
$("a[hotkey]").each(function () {
$.hotkey($(this).attr("hotkey"), $(this).attr("href")) });
$(document).bind("keydown.hotkey", function (c) { if (!$(c.target).is(":input")) {
if (c.ctrlKey || c.altKey || c.metaKey) return true;
c = c.shiftKey ? c.keyCode : c.keyCode + 32;
if (c = $.hotkeys.cache[c]) {
$.isFunction(c) ? c.call(this) : (window.location = c);
return false }
}
則會執行相關的動作並且回傳 true 值。，
Voice Ove 語音調用
由於我們主要測試的平台還是 ipad 及 iphone，所以我們直接將系統內的 Voice Over 拿來使用，由於他原先的設計，就是可以分段落來唸出所點選的文字，
而我們在內容呈現，剛好是一頁一頁，所以只要使用者點選，內容的框架欄位，
系統便會自動將整篇內容唸出來，這絕對會對視障的使用者帶來極大的方便。
4.3.4 離線閱讀
如圖所示，假設有 A、B、C、D 設備，那在使用本系統的時候，一般都是連到 我們的的伺服器端，伺服器端存有我們的帳戶資料，例如來源項目，Instapaper 的帳號密碼等等，而幻想有一天我們在沒有網路的時候該怎麼辦，這也是一般雲 端概念最為詬病的一個部分，就是離現時幾乎所有系統會停擺，而關於這個問題，
我們使用的 HTML5 的離線規格，讓這個系統在離現時也可以很方便的使用。
而如圖所示，每一位使用者，在使用本系統的時候，只要是使用者
曾經瀏覽過的資料，或是加入的來源項目，會存在每一個設備之中，所以每一位 使用者，只要是你曾經在此設備瀏覽過的資料，都會存在設備之中，換言之，一
A
Cloud
B C D
圖表 4-16 離線閱讀儲存圖
旦連上網路，不同的是惡被看到的內容會是相同的，但是在離現時，我們會根據 此設備曾經瀏覽過的紀錄，而呈現給使用者觀賞，這就必須使用到 HTML5 的離線 機制，這樣子，使用者只要曾經觀看過的資料，都會存在於系統之中。
HTML5 的強大功能，未來只用 HTML 與 Java Script 便可以實做出許多的網 頁版本的應用軟體也就是所謂的 Web Application，在行動裝置如 iPhone,ipad 上已經有許多軟體實做。其中一項我們要來拿實作的的功能就是離線 Web Apps 的 應用。離線網頁的第一個問題，是必須使頁面中所使用的各項網頁、圖片先行快 取於系統中。欲達到此目的，規格中定義了一個 manifest 宣告機制，你必須在 此檔案中宣告所有要快取的檔案列表。規格中亦定義了一組 Application Cache API，使你知道目前快取狀態。若要作離線程式，第一個要判斷的可能還是網路連 線狀態，雖說有時會是電腦依然接在網路上，但是卻連不上網路的狀態，但是若 系統可以自行告知目前連線狀態，就可以省下不停確認連線狀態的白工。
接著我們來看看 HTML5 的離線規格，主要分為三部分 1. 在 html 標籤裡面指定 manifest 檔案
2. 在 manifest 檔案裡面指定離線資源 3. API 及相關的事件
在 html 標籤上設定 manifest 屬性
<html lang="zh-TW" manifest="test642.manifest">
在離線應用上，HTML5 制定了 ApplicationCache 介面：
在一般的使用狀況下，通常只要設定好 manifest 檔案就可以離線運作了，複 雜的應用程式，可能還需要搭配 locationStorage、sessionStorage 還有 Web SQL 等等方式，來存放應用程式需要的資料。這樣一來只要在系統中設定好 HTML5 的 manifest 之後，就可以使系統擁有離線的閱讀的功能了。
interface ApplicationCache { // update status