【正文】 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 35 圖 510 小屏幕圖片瀏覽訂閱頁面 2. 小屏幕圖片瀏覽訂閱 說明 使用 CSS3 的 media query（媒體查詢）檢測 屏幕 的寬度 ， 當(dāng)屏幕寬度小于 720 像素是使用小屏幕 的 CSS 樣式。 height:28ex。 } = function(key) { return ((key))。 } 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 38 . 管理?xiàng)l目模塊 圖 512 新聞條目管理頁面 圖 513 分享到微博界面 1. 功能說明 新聞條目管理提供了更改條目瀏覽記錄、收藏、分享到微博、發(fā)布評論等功能。 }else{ mode=article。 return false。 } })。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 40 . 新聞評論模塊 圖 514 新聞評論頁面 。 $.(page, { transition: slide, role: page, reverse: true, changeHash: true })。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 39 if ($(this).attr(isRead)) { 2. 切換條目記錄狀態(tài) 代碼片段 //切換記錄狀態(tài) $(.unread).click(function() { var mode=$(mode).attr(mode)。 var user=new Object()。 padding:1ex 5px。 4. 列表瀏覽訂閱 頁面代碼片段 ul datarole=listview id=itemlist pageNo=1 ! 列表模板 li isRead= isCollect= rid= class=model listbox a href=model img class=imgstar uiliicon uilithumb src=%=basePath%resources/images/ alt=圖片無法加載 section/section /a /li ! /列表模板 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 37 /ul 5. CSS3 媒體查詢代碼片段 /*屏幕分辯率大于 720px 小于 1200px*/ media screen and (minwidth:720px) and (maxwidth:1200px){ { margin: 。 }//拖放結(jié)束 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 34 . 瀏覽訂閱模塊 圖 59 列表瀏覽訂閱頁面 1. 列表瀏覽訂閱說明 使用 jQuery Mobile 的列表 UI 組件作為列表瀏覽訂閱的核心內(nèi)容，另外添加額外元素（星號標(biāo)記）提供收藏功能。)。 (39。 = 39。 3. Drag and Drop 特性代碼片段 //將 dataTransfer 事件添加到 jQuery 事件隊(duì)列中 $.(dataTransfer)。 $(cover).fadeIn(fast)。 var catalogId = $(this).attr(catalogId)。另外 為了數(shù)據(jù)的安全，數(shù)據(jù)表沒有使用外鍵約束，而是使用程序進(jìn)行約束。另外由于 HTML5 與 jQuery Mobile 等新技術(shù)的引入，使得應(yīng)用能夠?qū)崿F(xiàn)豐富的功能，并且在界面設(shè)計(jì)上有較 大的選擇空間，能夠開發(fā)出類似客戶端的應(yīng)用程序。 應(yīng)用運(yùn)行環(huán)境 應(yīng)用必須部署到服務(wù)器上才可以為用戶提供服務(wù)，同時客戶端也要滿足應(yīng)用的部分需要才可以較好地運(yùn)行應(yīng)用，以下對推薦的運(yùn)行環(huán)境對簡單的介紹： 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 23 . 服務(wù)器端硬件與軟件環(huán)境 表 38 服務(wù)器軟件與硬件推薦配置 處理器： Intel 最強(qiáng)處理器 內(nèi)存： 4G 硬盤： 500G SATA 硬盤 操作系統(tǒng)： Linux/Unix Web 服務(wù)器： Tomcat 數(shù)據(jù)庫： MySQL . 客戶端硬件與軟件環(huán)境 表 39 客戶端軟件與硬件推薦配置 處理器： 1 GHz 內(nèi)存： 512M 操作系統(tǒng)： Android 、 IOS 或以上 瀏覽器： 系統(tǒng)瀏覽器或 Opera 瀏覽器 屏幕： 觸摸屏 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 24 4 跨移動平臺的新聞閱讀應(yīng)用的概要設(shè)計(jì) 應(yīng)用的系統(tǒng)結(jié)構(gòu)與開發(fā)模型 為了滿足跨移動平臺的新聞閱讀應(yīng)用的需求，必須選擇合適的系統(tǒng)結(jié)構(gòu)與開發(fā)模型，以下對這些內(nèi)容作概要介紹。 ???用戶瀏覽訂閱評論。 ???用戶收藏該條新聞內(nèi)容。 ???用戶瀏覽新聞目錄 ????用戶瀏覽新聞的具體內(nèi)容 。 ???成功添加訂閱 。 備選流： ???登錄失敗。 備選流： ???注冊失敗。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 15 跨移動平臺的新聞閱讀應(yīng)用的 DFD圖 圖 31 跨移動平臺的新聞閱讀應(yīng)用的 DFD 圖關(guān)鍵字 用戶 登錄 用戶表 用戶信息 注冊 注冊信息 訂閱表 應(yīng)用初始化 搜索新聞源 新聞源表 新聞瀏覽 訂 閱 條目表 瀏覽操作 新 聞 記錄表 評論操作 評論表 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 16 跨移動平臺的新聞閱讀應(yīng)用的 ER圖 圖 32跨移動平臺的新聞閱讀應(yīng)用的 ER圖 用戶 新聞源 評論 新聞 訂閱 新聞條目 目錄 閱讀記錄 11 N 1 N 等于 擁有 包含 1 1 包含 1 N 擁有 1 1 擁有 1 N 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 17 用例的實(shí)現(xiàn)與說明 . 用例圖示 圖 33 注冊用戶用例圖 . 用例規(guī)約 表 32 注冊用例規(guī)約 用例名稱： 注冊 涉及的參與者： 未注冊用戶 涉及的用例： 登錄 描述： 未注冊用戶進(jìn)行注冊。系統(tǒng)還支持用戶瀏覽自己收藏的 新聞，或者應(yīng)用推薦的新聞條目（即用戶推薦）。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 13 3 跨移動平臺的新聞閱讀應(yīng)用的需求分析 系統(tǒng)性能需求 表 31 系統(tǒng)性能需求 主要質(zhì)量屬性 詳細(xì)要求 正確性 無邏輯錯誤 穩(wěn)定性 Web 服務(wù)持續(xù)穩(wěn)定工作時間≥ 3 天（ 72 小時） 可靠性 有針對異常的處理，防止非法操作 性能，效率 應(yīng)用響應(yīng)時間小于等于 3 秒 易用性 精簡操作步驟，相關(guān)操作有一定的提示 清晰性 界面條理清楚，操作明確 安全性 保護(hù)用戶信息 可擴(kuò)展性 可在當(dāng)前需求基礎(chǔ)之上進(jìn) 行功能上的擴(kuò)展 跨平臺性 可運(yùn)行在主流的移動平臺上 系統(tǒng)功能需求分析 . 注冊與登錄模塊 為用戶提供注冊帳號，使之能夠登錄到系統(tǒng)，以獨(dú)立的身份使用應(yīng)用，瀏覽或者管理自己的新聞信息。 . 經(jīng)濟(jì)可行性 后臺應(yīng)用的框架 Spring、 Hibernate 都基于開源框架，能免費(fèi)使用并獲得一定的支持服務(wù)。 HTML5 與 jQuery Mobile 是 Web 最新的技術(shù)與新誕生的框架，所有相關(guān)資料與經(jīng)驗(yàn)會比較欠缺，但是可以參考官方詳細(xì)文檔，并通過實(shí)驗(yàn)驗(yàn)證效果，所以也可以對這些新技術(shù)新框架進(jìn)行使用，開發(fā)跨平臺應(yīng)用。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 10 RSS技術(shù) RSS（信息聚合 ）是一種描述與同步網(wǎng)站信息的格式。 4. Spring MVC： Spring MVC 框架是一個全功能的 Web 應(yīng)用程序的 MVC 實(shí)現(xiàn)。委托 Spring 容器對對象生命周期進(jìn)行管理，從而使開發(fā)人員可以更加注重與業(yè)務(wù)上的工作。 列表視圖 提供了多種樣式可帶統(tǒng)計(jì)數(shù)字的列表：基本的網(wǎng)格列表、數(shù)字列表、分割顯示的列表、帶分割標(biāo)題的列表等，提供列表內(nèi)查詢的功能 支持。 按鈕 提供三種顏色主題的 18 種不同標(biāo)志的圖標(biāo)按鈕，并且可以設(shè)置按鈕的圖標(biāo)位置、是否帶有文字、是否行內(nèi)按鈕，或者一組相關(guān)的按鈕。在這些設(shè)備解析 CSS 和JavaScript 的過程中，以一種不明顯的方式將語義化的頁面轉(zhuǎn)化為富客戶端頁面。 8. 媒體查詢： media query 可以 測定瀏覽 設(shè)備 的類型和大小，從而編寫不同的樣式 ，使 網(wǎng)頁的平臺適應(yīng)性大大提高 ，提供更好瀏覽體驗(yàn) 。 Text（文本）屬性有所增強(qiáng)，支持一些文字處理，或者文字效果 。 2. 更豐富的色彩效果 ： 顏色取值 HSL 能夠設(shè)定色調(diào)的飽和度和亮度， RGBA 和 HSLA 的參數(shù) Alpha可以 指定 元素的透明度，另外還可以使用 transparent 指定 全透明色彩 。 6. 畫布元素 canvas元素 是只 用于 圖形 的容器，可以通過腳本語言 繪制 自定義的 圖形，或者繪制圖片文件，它與其它圖片元素的區(qū)別在于它是通過腳本來實(shí)現(xiàn)的 。 3. 新的表單元素 fieldset元素把表單 內(nèi)容的一部分打包，生成一組相關(guān)表單的字段 。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 4 1 相關(guān)技術(shù)介紹 HTML5相關(guān)新特性介紹 HTML5 的上一個版本是 ，發(fā)布時間在 1999 年，這會使人覺得奇怪為什么一個版本間會隔了十多年， 其實(shí)這是因?yàn)?W3C 在發(fā)布 版本后就改變研究方向到 XHTML，但是因?yàn)?XHTML 發(fā)展的過于超前和規(guī)范太嚴(yán)格，所以沒被業(yè)界接受，反而是 Opera、 Apple 的瀏覽器廠商在 HTML 基礎(chǔ)上面發(fā)展的新版本受到歡迎，后來W3C 加入到 HTML 新版本的開發(fā)上 面，這就是現(xiàn)在的 HTML5，這個新版本有如下幾點(diǎn)新特性： 1. 簡單的聲明 之前的 文件類型聲明 ： ! DOCTYPE html PUBLIC //W3C/DTD HTML 和 文件類型聲明 ： ! DOCTYPE html PUBLIC //W3C/DTD XHTML Strict//EN 到 HTML5 聲明文件類型只要如下簡單即可： ! DOCTYPE html 因?yàn)?HTML5 的一個設(shè)計(jì)原理就是必須要向后兼容，兼容未來的 HTML 版本，所以再寫一個聲明版本的 doctype 已經(jīng)沒有多大意義，對驗(yàn)證器來說也是一樣。 ：《 Google reader》與《鮮果閱讀》作為商業(yè)化應(yīng)用在瀏覽器兼容上面考慮廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 3 更多，所以他們在移動網(wǎng)頁上的功能會有所精簡，而重點(diǎn)維護(hù)客戶端版本。本應(yīng)用基于移動網(wǎng)頁提供了一致的功能體驗(yàn)，但是需要較新的瀏覽器支持