HTML5項目筆記1：項目準(zhǔn)備和工具使用

緣夢書摘 2014-01-18

展開全文

公司的 New Case，有需要離線應(yīng)用工作系統(tǒng)這一塊，目標(biāo)是網(wǎng)絡(luò)無論在線或離線情況下都可以執(zhí)行系統(tǒng)操作，這樣員工在無網(wǎng)絡(luò)的情況下依然可以執(zhí)行公司的項目任務(wù)，進行表單填報和數(shù)據(jù)的客戶端保存，并在網(wǎng)絡(luò)通暢的時候與服務(wù)端進行交付和數(shù)據(jù)通信。整體設(shè)計經(jīng)過討論使用HTML5的功能開發(fā)，并指定用戶使用特定的瀏覽器。

該系統(tǒng)包含了HTML5的Form API（表單），WebStorage API，Communication API(用于跨域訪問)，WebDataBase API，File System API，以及離線應(yīng)用程序的幾個部分的操作，最后做成Chrome的應(yīng)用程序插件（CRX文件），并發(fā)布給客戶使用…

使用HTML5來設(shè)計該離線工作系統(tǒng)的可能性和可行性：

1、兼容性：HTML5不是顛覆性的革新，一旦瀏覽器不支持HTML5的某項功能，針對HTML5功能的備選方案就會被進行…

2、效率和用戶優(yōu)先性：HTML5規(guī)范是基于用戶優(yōu)先準(zhǔn)則編寫的：在遇到無法解決的沖突的時候，會把用戶放在第一位，其次是頁面作者，再次是實現(xiàn)者（或瀏覽器），接著才是規(guī)范制定者（W3C、WHATWG）

3、安全機制的設(shè)計：每個規(guī)范都對安全機制的章節(jié)

4、表現(xiàn)和內(nèi)容分離

5、通用訪問

6、無插件范式，提供原生的支持

簡化功能 DOCTYPE聲明簡化，由原來的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

改為 <!doctype html>

字符集聲明簡化：<meta http-equiv="content-type" content="text/html" charset="utf-8" />

簡化為：<meta charset="utf-8" />

7、 HTML5片段類元素（語義化標(biāo)記）：

header：標(biāo)記頭部區(qū)域的內(nèi)容

footer：標(biāo)記腳步區(qū)域的內(nèi)容

section：Web頁面的一塊區(qū)域

article：獨立的文章區(qū)域

aside：相關(guān)引文或區(qū)域

nav：導(dǎo)航類輔助區(qū)域

8、便捷的Javascript日志和調(diào)試

Console.log(msg);可以在控制臺輸出用戶的自定義的調(diào)試信息，它不會像alert 那樣破壞和中斷程序。

9、 window.JSON: JSON API

JSON.parse 用于將字符串序列化成DOM對象

JSON..stringify 將DOM對象轉(zhuǎn)化為字符串

10、離線數(shù)據(jù)存儲，包括WebDataBase和 File System API 和Storage API等模塊，用于臨時或持久地在客戶端保存數(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ā)，那就去下載一個HTML5 安裝包（HTML5 Pack），其實就是一個基于dreamware的擴展，它在 dreamweaver 中添加對 HTML5 和 CSS3 的支持。

如果你是Dreamweaver CS5，那就下載HTML5 Pack for Dreamweaver CS5

（http://download.macromedia.com/pub/dreamweaver/updates/cs5/11_0_4/win/AdobeDreamweaver-11-0-All-Update.zip）

如果你是Adobe Dreamweaver CS5.5，那就下載 HTML5 Pack for Dreamweaver CS5.5

（http://download.macromedia.com/pub/dreamweaver/updates/cs5/11_5_1/win/AdobeDreamweaver-11.5-All-Update.zip）

如果你的項目是在VS中進行開發(fā)，那你就去擴展管理器中下載安裝Web Standards Update for Microsoft Visual Studio 2010 SP1（基于VS2010的補丁包）, 里面包含了CSS3的級聯(lián)樣式表版本和 HTML5的目標(biāo)驗證架構(gòu) ,

官方地址：

http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83?SRC=Home

HTML5和CSS3部分的介紹：

http://www./blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx

安裝后的清單如下：

Microsoft Visual Studio 2010 SP1 Tools for SQL Server Compact4.0 Installer for Repaire(Chinese-China)

Microsoft Visual Studio 2010 SP1 Tools for SQL Server Compact4.0 Installer

ASP.NET MVC 3 Tools Update Installer

Microsoft Visual Studio 2010 SP1 Tools for ASP.NET Web Pages

ASP.NET MVC3 Tools Update Language Packs Install

不只是對HTML5的支持，還有其他如MVC和SQL Server之類的更新。如果你不需要，可以到控制面板里面去單個清除。安裝之后，你的VS就帥多了，可以智能感知HTML5的新的標(biāo)簽屬性和樣式屬性：

支持HTML5的主流瀏覽器有：

Chrom	3.0以上
Firefox	1.5版本開始支持
Internet Explorer	9.0以上
Opera	9.0版本以上
Safari	1.3版本以上

Chrome3.0以上版本基本支持了HTML5的特性和所有API，一直處于支持度的領(lǐng)先地位，而且有著的易于操作的開發(fā)人員工具，所以我們的項目的瀏覽器支持平臺就是谷歌Chrome。

工欲善其事必先利其器，我們先來了解下谷歌瀏覽器的開發(fā)人員工具：

可以通過點擊谷歌瀏覽器右上角的工具標(biāo)簽 =》工具 =》開發(fā)人員工具來選擇進入開發(fā)工具面板，或者使用 Ctrl+Shift+I （或F12）快捷鍵打開開發(fā)人員工具。

在窗口的最上方的工具欄里排列著 8 個圖標(biāo)，分別對應(yīng)不同的功能，每一個圖標(biāo)點擊后都會打開相應(yīng)的調(diào)試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁面相關(guān)的腳本等。通過 Ctrl+[ 和 Ctrl+] 鍵，可以在這些項之間進行切換。工具欄最右方還提供了一個搜索框，方便在當(dāng)前面板中進行搜索。

開發(fā)者工具箱左下角的三個固定圖標(biāo)

第一個圖標(biāo)：會提示是Undock into separeter windown 還是Dock to main window,提醒你是將開發(fā)者工具箱?？吭谥鞔绑w中還是單獨一個窗體。

第二個圖標(biāo)：show console，是否顯示控制臺

第三個圖標(biāo)選擇相應(yīng)的頁面元素

1、元素面板（Elements）：

元素面板：元素面板允許你像瀏覽器本身那樣去查看和讀取web頁面的內(nèi)容和結(jié)構(gòu)，使用這個元素面板，你可以看到原生的HTML源碼，CSS樣式代碼,文檔結(jié)構(gòu)模型，以及瀏覽器對頁面實時的處理和操作。

打開開發(fā)者工具箱，選擇Elaments面板

在這個元素面板中，我們可以在左邊的面板中看到HTML元素，在右邊的面板中看到樣式，框架度量（metrics），屬性（properties）和事件監(jiān)聽（event listeners）等東西Dom Element Tree (文檔元素樹)：

包含了內(nèi)嵌腳本和元素，選擇相應(yīng)的元素會鎖定該段源碼，如選擇看了該段<p>元素

當(dāng)你選擇了這個元素的時候，你可以添加，編輯，刪除該元素的的屬性，甚至刪除整個節(jié)點

CSS Styles（CSS 樣式）：選擇某個元素之后，在右邊面板的Styles選項中，可以查看到該選定元素的所有樣式信息，并可以對其樣式進行修改

你可以使用按鈕添加新的樣式元素，使用設(shè)定一個元素的偽狀態(tài) (:active, :hover, :focus, :visited)。

盒模型（Box Model）：在右邊的面板中選擇Metrics標(biāo)簽，會顯示該選定元素在整個Dom文檔中的模型位置，它還允許你編輯任意的絕對，相對，固定的頁面元素的CSS 盒模型度量,如圖：

屬性（Properties），在右邊面板中選擇屬性標(biāo)簽，并修改屬性值

事件監(jiān)聽：捕獲也頁面元素的的事件，如click，kendown和 mouseover

2、資源面板（Resources）

Frames：框架資源，你可以看到從頁面上載入的資源，里面包含了HTML頁面，腳本，Font文件，Images文件，Scripts文件，StyleSheets文件，都是從顯示的網(wǎng)站是獲取的相關(guān)資源文件。

Databases：基于Chrome的數(shù)據(jù)庫，使用SQLite,我們的離線系統(tǒng)采用這個為離線存儲數(shù)據(jù)庫

LocalStorage：來源于WebStorage API，用于在緩存中存儲數(shù)據(jù)

SessionStorage：來源于WebStorage API，用于在緩存中存儲數(shù)據(jù)

LocalStorage 和 SessionStorage的區(qū)別

類型	生命周期	可見度
SessionStorage	數(shù)據(jù)會保存到存儲他的標(biāo)簽頁或者瀏覽器關(guān)閉時	數(shù)據(jù)只在構(gòu)建它的頁面或則瀏覽器中可見
LocalStorage	數(shù)據(jù)的生命周期比窗口或者瀏覽器的周期長	數(shù)據(jù)可被同源的每個窗口或者標(biāo)簽頁面可見

Cookies：查看瀏覽器的Cookies，可以修改和刪除Cookies對象

3、網(wǎng)絡(luò)面板（NetWork）：

網(wǎng)絡(luò)面板用以檢查資源載入的時間和詳細(xì)信息

4、腳本面板（Scripts）：

用于調(diào)試腳本的面板，這個面板相當(dāng)重要，我們的離線系統(tǒng)幾乎都是用腳本（JavaScript）加HTMLAPI來構(gòu)建的，所以經(jīng)常要在這里進行腳本調(diào)試。

如圖，左邊顯示的是當(dāng)前Page所使用的腳本集合，選擇你要調(diào)試的腳本，并在左邊添加斷點（Add BreakPoint）,右邊面板上的圖標(biāo)分別代表的是：運行/停止、不跳如函數(shù)（F10）、跳入下一行或者下一個函數(shù)內(nèi)，跳出當(dāng)前函數(shù)，使當(dāng)前所有斷點都無效。

其他快捷鍵:

Continue	F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
Step over	F10 or Command-' (apostrophe) on Mac or Control-' (apostrophe) on other platforms.
Step into	F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
Step out	Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on platforms.
Next call frame	Control-. (period) on all platforms.
Previous call frame	Control-, (comma) on all platforms.