【文章內(nèi)容簡介】 到 HTML5 聲明文件類型只要如下簡單即可： ! DOCTYPE html 因為 HTML5 的一個設(shè)計原理就是必須要向后兼容，兼容未來的 HTML 版本，所以再寫一個聲明版本的 doctype 已經(jīng)沒有多大意義，對驗證器來說也是一樣。同時HTML5 的規(guī)范還省略了不必要的復(fù)雜性，避免不必要的復(fù)雜性。 如 style聲明rel=stylesheet后就不必要再聲明 type=text/css了，因為這兩個聲明是同樣的意思，只要有 rel= stylesheet就夠了，因為這樣瀏覽 器就可以猜測出你要鏈接的是一個 CSS樣式表 。 2. 新的有具體意義的 標(biāo)簽 header（ 頭部 ）、 nav（ 導(dǎo)航 ）、 article（ 文章 ）、 section（ 分區(qū) ）、 footer（ 腳本 ）、 這些元素的作用類似于 以前的 div（分區(qū)） ,可以把文檔分割為獨(dú)立的不廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 5 同的部分，但是新標(biāo)簽有 具體的 語義上的 含義， 可以 把網(wǎng)頁分 隔成清晰的獨(dú)立的 模塊。 3. 新的表單元素 fieldset元素把表單 內(nèi)容的一部分打包，生成一組相關(guān)表單的字段 。 input增加新的帶有瀏覽器直接支持插件的類型，提供原生的更好的用戶輸入體驗 : color date datetime datetimelocal month week time number range search tel url input增加新 屬性帶有 默認(rèn)的動作事件或者特殊的效果 ： autoplete autofocus form formaction formenctype formmethod formnovalidate formtarget height max min multiple pattern placeholder required step 4. 視頻與音頻支持 video標(biāo)簽 定義視頻，通過瀏覽器原生 支持 MP WebM 和 Ogg 三種視頻格式，各個瀏覽器公司對這三種視頻支持略有不同 。 audio標(biāo)簽 定義音頻，通過瀏覽器原生支持 MP Wav、和 Ogg 三種音頻格式，同樣各個瀏覽器對這三種音頻支持略有不同 。 5. 元素拖放 通過設(shè)置元素為可拖元素和 drag（拖到）與 drag（拖放） 事件， 和相關(guān)的動作處理事件，完成網(wǎng)頁元素的拖放事件操作，這個也是通過瀏覽器原生支持的，只需簡單的操作就可以完成 。 6. 畫布元素 canvas元素 是只 用于 圖形 的容器，可以通過腳本語言 繪制 自定義的 圖形，或者繪制圖片文件，它與其它圖片元素的區(qū)別在于它是通過腳本來實(shí)現(xiàn)的 。 7. 離線應(yīng)用與數(shù)據(jù)支持 提供比 cookies 更安全更快捷的本地存儲功能，能夠在用戶瀏覽器保存更多的數(shù)據(jù)。 8. 其它 SVG 格式支持、位置定位服務(wù)、獨(dú)立線程、服務(wù)器發(fā)送事件 。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 6 CSS3相關(guān)新特性介紹 1. 強(qiáng)大的 選擇符 ： CSS3 的 擴(kuò)展了 的基 本選擇符， 它允許在標(biāo)簽中指定特定的 HTML元素而不必使用多余的類、 ID 或者 JavaScript 腳本 ，另外增加了全新的偽對象選擇符，用來和 content 屬性一起使用，設(shè)置在對象前后使設(shè)計彈性更大 。 2. 更豐富的色彩效果 ： 顏色取值 HSL 能夠設(shè)定色調(diào)的飽和度和亮度， RGBA 和 HSLA 的參數(shù) Alpha可以 指定 元素的透明度，另外還可以使用 transparent 指定 全透明色彩 。 3. 多欄布局： CSS3 提供了多列布局的支持，通過指定 columns 的相關(guān)屬性 ， 就可以指定列數(shù)或者根據(jù)列寬動態(tài)布局 。 4. 豐富的背景屬性： CSS3 增加了多個背景屬性，如 backgroundimage、 backgroundrepeat、backgroundsize、 backgroundposition 等，這樣就可以在一個元素上添加 上不同效果的 背景圖片，設(shè)計更 美觀 的網(wǎng)頁。 5. 字體與 文字 支持 ： 支持將字體文件映射到客戶端系統(tǒng)，使的客戶端可以使用沒有安裝的字體樣式。 Text（文本）屬性有所增強(qiáng)，支持一些文字處理，或者文字效果 。 6. 增強(qiáng)邊框支持 ： 更詳細(xì)的邊框設(shè)置，和原生的圓角支持。比如：多色邊框、邊框背景圖、圓角與邊框陰影，那樣就可以通過簡單的代碼實(shí)現(xiàn)豐富的效果。 7. 新增 彈性盒子模型： 可以設(shè)定盒子的比例或者固定大小，然后就能使各個元素的自適應(yīng)窗口大小，而且還可以指定布局的取向和順序，使網(wǎng)頁元素的布局 更加 靈活 ，更有彈性 。 8. 媒體查詢： media query 可以 測定瀏覽 設(shè)備 的類型和大小，從而編寫不同的樣式 ，使 網(wǎng)頁的平臺適應(yīng)性大大提高 ，提供更好瀏覽體驗 。 9. 其它： 邊框圖片、漸變設(shè)計、動畫效果、語音樣式。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 7 jQuery Mobile 框架介紹 綜述 jQuery Mobile 框架是 jQuery 面向手機(jī)與平板等移動設(shè)備開發(fā)的核心庫，并且提供了完整統(tǒng)一的 UI 框架，為開發(fā)人員提供一個跨瀏覽器的框架，使得開發(fā)移動 Web網(wǎng)站或應(yīng)用更加快捷。 jQuery Mobile 中的頁面都是基于簡潔、語義化的 HTML 來構(gòu)建，這樣可以 確保能兼容大部分支持 web 瀏覽的設(shè)備。在這些設(shè)備解析 CSS 和JavaScript 的過程中，以一種不明顯的方式將語義化的頁面轉(zhuǎn)化為富客戶端頁面。 組件 頁面與對話框 jQuery Mobile 關(guān)于頁面提供了如下幾種組件：帶有頭部欄和底部欄的頁面，鏈接動態(tài)載入頁面，對話框頁面以及體驗比較好的頁面切換效果，同時提供動態(tài)頁面后退動作的處理，滿意開發(fā)移動應(yīng)用的需求。 工具欄 提供工具欄組件?？梢灶^部欄和底部欄添加按鈕；不同樣式的導(dǎo)航欄；頭部欄和底部欄自動適應(yīng)頁面，顯示或者隱藏；某些頁面內(nèi)容作全屏顯示，例如展示圖片。 按鈕 提供三種顏色主題的 18 種不同標(biāo)志的圖標(biāo)按鈕，并且可以設(shè)置按鈕的圖標(biāo)位置、是否帶有文字、是否行內(nèi)按鈕，或者一組相關(guān)的按鈕。 內(nèi)容格式 提供四種不同寬度的列布局，自動把元素按照比例平鋪。折疊展示的內(nèi)容，并且可以把相關(guān)的幾個折疊元素組合成一個集合。 表單元素 提供風(fēng)格統(tǒng)一的美觀的 UI 的表單元素，可以設(shè)置標(biāo)簽和元素在同一行的格式顯示，也可以把多個表單元素組和成一個獨(dú)立樣式的表單集合。 列表視圖 提供了多種樣式可帶統(tǒng)計數(shù)字的列表：基本的網(wǎng)格列表、數(shù)字列表、分割顯示的列表、帶分割標(biāo)題的列表等，提供列表內(nèi)查詢的功能 支持。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 8 圖 11 jQuery Mobile 基本組件 1 圖 12 jQuery Mobile 基本組件 2 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 9 事件與方法 jQuery Mobile 對移動設(shè)備提供了豐富的事件支持，如 ：觸摸、虛擬鼠標(biāo)、改變屏幕方向、滑動和頁面狀態(tài)改變的事件支持?；诳蚣艿姆椒ň吞峁└淖兓蚣虞d頁面、清除框架記錄緩存、顯示或隱藏通知信息、顯示或隱藏工具欄等豐富的方法，使開發(fā)人員使用 jQuery Mobile 開發(fā) Web 應(yīng)用更加得心應(yīng)手。 Spring框架 1. 管理容器： Spring 包含并管理應(yīng)用對象的配置和生命周期，可以配置 bean 的實(shí)例策略與相互之間聯(lián)系。委托 Spring 容器對對象生命周期進(jìn)行管理，從而使開發(fā)人員可以更加注重與業(yè)務(wù)上的工作。 2. 控制反轉(zhuǎn)： 通過 一種稱為 控制反轉(zhuǎn)（ Inversion of Control， IoC） 的技術(shù)完成松耦合的需求。一個對象依賴的其它對象會通過被動的方式傳遞進(jìn)來，而不用自己創(chuàng)建依賴的對象。 3. 面向切面編程： 還提供了稱為面向切面編程（ AspectOriented Programming， AOP） 方式的支持，通過分離應(yīng)用的業(yè)務(wù)邏輯與系統(tǒng)服務(wù)（如日記）實(shí)現(xiàn)高內(nèi) 聚 ， 使得對象實(shí)現(xiàn)自己的功能，完成業(yè)務(wù)邏輯就足夠了。 4. Spring MVC： Spring MVC 框架是一個全功能的 Web 應(yīng)用程序的 MVC 實(shí)現(xiàn)。通過控制器實(shí)現(xiàn)Web 應(yīng)用程序的業(yè)務(wù)邏輯，加上 Spring 框架一貫的易用性、擴(kuò)展性與靈活性 ， 使得Spring MVC 能夠高效地和其它技術(shù)協(xié)同工作 。 Hibernate 框架 基于 Java 語言的一種對象關(guān)系映射解決方案，使得 開發(fā)人員使用 通過面向?qū)ο蟮乃季S來操作 關(guān)系數(shù)據(jù)庫 。同時提供 HQL 查詢 工具 、緩存管理、延遲加載 策略 、事務(wù)管理批量操作等 方法 。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 10 RSS技術(shù) RSS（信息聚合 ）是一種描述與同步網(wǎng)站信息的格式。有些網(wǎng)站提供 RSS 輸出，即把網(wǎng)站最新的內(nèi)容實(shí)時地輸出到 RSS 上面，這樣用戶只要借助 RSS 聚合工具就能獲取到多個信息源的最新更新，在不訪問來源網(wǎng)站的情況下獲取網(wǎng)站的的資訊。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 11 2 跨移動平臺的新聞閱讀應(yīng)用的可行性分析 . 可行性分析 可行性分析主要是對跨移動平臺的新聞閱讀應(yīng)用的技術(shù)可行性、操作可行性、經(jīng)濟(jì)可行性進(jìn)行分析，所指定的解決方案是否可行，能否在規(guī)定資源和時間的約束下完成，能否獲得相應(yīng)的效益。 . 技術(shù)可行性 本應(yīng)用后臺技術(shù)采取成熟的 Spring 與 Hibernate 框架 ，擁有規(guī)范、完整的官方文檔與詳細(xì)的網(wǎng)絡(luò)教程，加上已經(jīng)有一定的使用經(jīng)驗，所以能夠應(yīng)用于開發(fā)相關(guān)功能應(yīng)用。 HTML5 與 jQuery Mobile 是 Web 最新的技術(shù)與新誕生的框架，所有相關(guān)資料與經(jīng)驗會比較欠缺，但是可以參考官方詳細(xì)文檔，并通過實(shí)驗驗證效果，所以也可以對這些新技術(shù)新框架進(jìn)行使用，開發(fā)跨平臺應(yīng)用。 . 操作可行性 本應(yīng)用基于 HTML5 與 jQuery Mobile 框架開發(fā)，框架 UI 提供了良好的用戶體驗，并且在主流的移動平臺都有較好的適應(yīng)性。另外在 jQuery Mobile 的 UI 的基礎(chǔ)上面再增加一定的優(yōu)化，使框架能滿足應(yīng)用的需求。良好的用戶體驗為操作可行性提供了保證。 . 經(jīng)濟(jì)可行性 后臺應(yīng)用的框架 Spring、 Hibernate 都基于開源框架，能免費(fèi)使用并獲得一定的支持服務(wù)。數(shù)據(jù)庫系統(tǒng)采用性能高、成本低、可靠性好的關(guān)系型數(shù)據(jù)庫 MySQL，能夠為數(shù)據(jù)存儲提供較好的支持。費(fèi)用支出主要集中于開發(fā)與維護(hù)人員的工資，以及服務(wù)器運(yùn)行與網(wǎng)絡(luò)流量的費(fèi)用。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健 基于 HTML5 與 jQuery Mobile 的跨移動平臺的新聞閱讀應(yīng)用 12 . 可行性 分析結(jié)論 通過可行性分析，跨平臺新聞閱讀應(yīng)用在技術(shù)、操作、經(jīng)濟(jì)三個方面的可行性都達(dá)到要求，具備進(jìn)行開發(fā)的價值 ，并能在開發(fā)完成上線，為用戶提供服務(wù)。 廣州大學(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)用，瀏覽或者管理自己的新聞信息。 . 訂閱管理模塊 用戶可以搜索自己感興趣的新聞，并將該新聞源添加到自己的訂閱源中，然后就可以在應(yīng)用中第一時間瀏覽到最新的新聞資訊。同時，用戶還可以刪除已訂閱的新聞源，使新聞閱讀應(yīng)用中的信息符合個人的需求。 廣州大學(xué)華軟軟件學(xué)院 軟件工程系 鄧鴻健