|
公司的 New Case，有需要離線應(yīng)用工作系統(tǒng)這一塊，目標(biāo)是網(wǎng)絡(luò)無論在線或離線情況下都可以執(zhí)行系統(tǒng)操作，這樣員工在無網(wǎng)絡(luò)的情況下依然可以執(zhí)行公司的項(xiàng)目任務(wù)，進(jìn)行表單填報(bào)和數(shù)據(jù)的客戶端保存，并在網(wǎng)絡(luò)通暢的時(shí)候與服務(wù)端進(jìn)行交付和數(shù)據(jù)通信。整體設(shè)計(jì)經(jīng)過討論使用HTML5的功能開發(fā)，并指定用戶使用特定的瀏覽器。 該系統(tǒng)包含了HTML5的Form API（表單），WebStorage API，Communication API(用于跨域訪問)，WebDataBase API，File System API，以及離線應(yīng)用程序的幾個(gè)部分的操作，最后做成Chrome的應(yīng)用程序插件（CRX文件），并發(fā)布給客戶使用… 使用HTML5來設(shè)計(jì)該離線工作系統(tǒng)的可能性和可行性： 1、 兼容性：HTML5不是顛覆性的革新，一旦瀏覽器不支持HTML5的某項(xiàng)功能，針對(duì)HTML5功能的備選方案就會(huì)被進(jìn)行… 2、 效率和用戶優(yōu)先性：HTML5規(guī)范是基于用戶優(yōu)先準(zhǔn)則編寫的：在遇到無法解決的沖突的時(shí)候，會(huì)把用戶放在第一位，其次是頁(yè)面作者，再次是實(shí)現(xiàn)者（或?yàn)g覽器），接著才是規(guī)范制定者（W3C、WHATWG） 3、 安全機(jī)制的設(shè)計(jì)：每個(gè)規(guī)范都對(duì)安全機(jī)制的章節(jié) 4、 表現(xiàn)和內(nèi)容分離 5、 通用訪問 6、 無插件范式，提供原生的支持 簡(jiǎn)化功能 DOCTYPE聲明簡(jiǎn)化，由原來的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 改為 <!doctype html> 字符集聲明簡(jiǎn)化：<meta http-equiv="content-type" content="text/html" charset="utf-8" /> 簡(jiǎn)化為：<meta charset="utf-8" /> 7、 HTML5片段類元素（語義化標(biāo)記）： header：標(biāo)記頭部區(qū)域的內(nèi)容 footer：標(biāo)記腳步區(qū)域的內(nèi)容 section：Web頁(yè)面的一塊區(qū)域 article：獨(dú)立的文章區(qū)域 aside：相關(guān)引文或區(qū)域 nav：導(dǎo)航類輔助區(qū)域 8、 便捷的Javascript日志和調(diào)試 Console.log(msg);可以在控制臺(tái)輸出用戶的自定義的調(diào)試信息，它不會(huì)像alert 那樣破壞和中斷程序。 9、 window.JSON: JSON API JSON.parse 用于將字符串序列化成DOM對(duì)象 JSON..stringify 將DOM對(duì)象轉(zhuǎn)化為字符串 10、 離線數(shù)據(jù)存儲(chǔ)，包括WebDataBase和 File System API 和Storage API等模塊，用于臨時(shí)或持久地在客戶端保存數(shù)據(jù)。 11、 跨域數(shù)據(jù)通信：Communication API，用于在網(wǎng)絡(luò)接通的情況下離線系統(tǒng)與服務(wù)端系統(tǒng)的數(shù)據(jù)同步和操作的交互。 HTLM5 開發(fā)工具： 網(wǎng)上有很多HTML5開發(fā)工具， http://www.cnblogs.com/lhb25/archive/2011/10/09/10-online-tools-to-simplify-html5-coding.html 如果你是使用dreamwear開發(fā)，那就去下載一個(gè)HTML5 安裝包（HTML5 Pack），其實(shí)就是一個(gè)基于dreamware的擴(kuò)展，它在 dreamweaver 中添加對(duì) HTML5 和 CSS3 的支持。 如果你是Dreamweaver CS5，那就下載HTML5 Pack for Dreamweaver CS5 如果你是Adobe Dreamweaver CS5.5，那就下載 HTML5 Pack for Dreamweaver CS5.5 如果你的項(xiàng)目是在VS中進(jìn)行開發(fā)，那你就去擴(kuò)展管理器中下載安裝Web Standards Update for Microsoft Visual Studio 2010 SP1（基于VS2010的補(bǔ)丁包）, 里面包含了CSS3的級(jí)聯(lián)樣式表版本 和 HTML5的目標(biāo)驗(yàn)證架構(gòu) , 官方地址： http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83?SRC=Home HTML5和CSS3部分的介紹： http://www./blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx 安裝后的清單如下：
不只是對(duì)HTML5的支持，還有其他如MVC和SQL Server之類的更新。如果你不需要，可以到控制面板里面去單個(gè)清除。安裝之后，你的VS就帥多了，可以智能感知HTML5的新的標(biāo)簽屬性和樣式屬性：
支持HTML5的主流瀏覽器有：
Chrome3.0以上版本基本支持了HTML5的特性和所有API，一直處于支持度的領(lǐng)先地位，而且有著的易于操作的開發(fā)人員工具，所以我們的項(xiàng)目的瀏覽器支持平臺(tái)就是谷歌Chrome。 工欲善其事必先利其器，我們先來了解下谷歌瀏覽器的開發(fā)人員工具： 可以通過點(diǎn)擊谷歌瀏覽器右上角的工具標(biāo)簽 在窗口的最上方的工具欄里排列著 8 個(gè)圖標(biāo)，分別對(duì)應(yīng)不同的功能，每一個(gè)圖標(biāo)點(diǎn)擊后都會(huì)打開相應(yīng)的調(diào)試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁(yè)面相關(guān)的腳本等。通過 Ctrl+[ 和 Ctrl+] 鍵，可以在這些項(xiàng)之間進(jìn)行切換。工具欄最右方還提供了一個(gè)搜索框，方便在當(dāng)前面板中進(jìn)行搜索。
開發(fā)者工具箱左下角的三個(gè)固定圖標(biāo) 第一個(gè)圖標(biāo)：會(huì)提示是Undock into separeter windown 還是Dock to main window,提醒你是將開發(fā)者工具箱停靠在主窗體中還是單獨(dú)一個(gè)窗體。 第二個(gè)圖標(biāo)：show console， 是否顯示控制臺(tái) 第三個(gè)圖標(biāo)選擇相應(yīng)的頁(yè)面元素 1、 元素面板（Elements）： 元素面板：元素面板允許你像瀏覽器本身那樣去查看和讀取web頁(yè)面的內(nèi)容和結(jié)構(gòu)，使用這個(gè)元素面板，你可以看到原生的HTML源碼，CSS樣式代碼,文檔結(jié)構(gòu)模型，以及瀏覽器對(duì)頁(yè)面實(shí)時(shí)的處理和操作。 打開開發(fā)者工具箱，選擇Elaments面板
在這個(gè)元素面板中，我們可以在左邊的面板中看到HTML元素，在右邊的面板中看到樣式，框架度量（metrics），屬性（properties）和事件監(jiān)聽（event listeners）等東西Dom Element Tree (文檔元素樹)： 包含了內(nèi)嵌腳本和元素，選擇相應(yīng)的元素會(huì)鎖定該段源碼，如選擇看了該段<p>元素
當(dāng)你選擇了這個(gè)元素的時(shí)候，你可以添加，編輯，刪除該元素的的屬性，甚至刪除整個(gè)節(jié)點(diǎn) CSS Styles（CSS 樣式）：選擇某個(gè)元素之后，在右邊面板的Styles選項(xiàng)中，可以查看到該選定元素的所有樣式信息，并可以對(duì)其樣式進(jìn)行修改
你可以使用 盒模型（Box Model）：在右邊的面板中選擇Metrics標(biāo)簽，會(huì)顯示該選定元素在整個(gè)Dom文檔中的模型位置，它還允許你編輯任意的 絕對(duì)，相對(duì)，固定的頁(yè)面元素的CSS 盒模型度量,如圖：
屬性（Properties），在右邊面板中選擇屬性標(biāo)簽，并修改屬性值
事件監(jiān)聽：捕獲也頁(yè)面元素的的事件，如click，kendown和 mouseover 2、 資源面板（Resources）
Frames：框架資源，你可以看到從頁(yè)面上載入的資源，里面包含了HTML頁(yè)面，腳本，Font文件，Images文件，Scripts文件，StyleSheets文件，都是從顯示的網(wǎng)站是獲取的相關(guān)資源文件。 Databases：基于Chrome的數(shù)據(jù)庫(kù)，使用SQLite,我們的離線系統(tǒng)采用這個(gè)為離線存儲(chǔ)數(shù)據(jù)庫(kù) LocalStorage：來源于WebStorage API，用于在緩存中存儲(chǔ)數(shù)據(jù) SessionStorage：來源于WebStorage API，用于在緩存中存儲(chǔ)數(shù)據(jù) LocalStorage 和 SessionStorage的區(qū)別
Cookies：查看瀏覽器的Cookies，可以修改和刪除Cookies對(duì)象 3、 網(wǎng)絡(luò)面板（NetWork）： 網(wǎng)絡(luò)面板用以檢查資源載入的時(shí)間和詳細(xì)信息
4、 腳本面板（Scripts）： 用于調(diào)試腳本的面板，這個(gè)面板相當(dāng)重要，我們的離線系統(tǒng)幾乎都是用腳本（JavaScript）加HTMLAPI來構(gòu)建的，所以經(jīng)常要在這里進(jìn)行腳本調(diào)試。
如圖，左邊顯示的是當(dāng)前Page所使用的腳本集合，選擇你要調(diào)試的腳本，并在左邊添加斷點(diǎn)（Add BreakPoint）,右邊面板上的圖標(biāo)分別代表的是：運(yùn)行/停止、不跳如函數(shù)（F10）、跳入下一行或者下一個(gè)函數(shù)內(nèi)，跳出當(dāng)前函數(shù)，使當(dāng)前所有斷點(diǎn)都無效。 其他快捷鍵:
5、 控制臺(tái)面板（Scripts）： 用以顯示控制臺(tái)信息的面板，如果系統(tǒng)這邊有任何錯(cuò)誤或者警告都會(huì)出現(xiàn)在這個(gè)面板里面，這個(gè)面板還能輸出開發(fā)人員自定義的信息：console.debug(message)，我們的離線系統(tǒng)中已經(jīng)包行了對(duì)自定義信息的封裝。 6、 搜索框（Search）： 查找相應(yīng)的頁(yè)面元素、腳本代碼，樣式代碼等
Chrome官方有詳細(xì)開發(fā)者工具文檔，教你認(rèn)識(shí)和使用它的開發(fā)者工具，有興趣可以全面地了解下。 https://developers.google.com/chrome-developer-tools/docs/overview
|
|
|
=
按鈕添加新的樣式元素，使用
設(shè)定一個(gè)元素的偽狀態(tài) (:active, :hover, :focus, :visited)。
