用ASP.NET打造HTML5新應用（摘录）

炙手可熱的HTML 5

雖然目前HTML 5尚未正式成為主流標準，但由於Google、Youtube等資訊業龍頭頻頻向各界展示HTML 5各項酷炫的實驗作品，各家資訊廠商也開始對於自家的瀏覽器頻繁的改版，因此HTML 5已逐漸變成許多資訊人員、企業與個人用戶關注的對象。

以瀏覽器使用者來說，HTML5讓使用者介面變得更豐富，有更佳的效能表現。使用者不需要安裝Adobe Flash、Microsoft Silverlight、JAVA Applet等附加元件就可以進行觀賞影片、聆聽音樂、進行小遊戲等互動性高的行為，並提供離線操作的功能，讓使用者在離線的情況下也可以進行部分應用程式操作。

以開發人員來說，HTML5變得更容易開發，不用耗費大量的時間去學習各種多媒體開發軟體，新的標籤類型也可以省去許多撰寫各種Scriptlet的苦工。

一、HTML4 v.s HTML5

HTML5所提供較為重要的功能列舉於下：

• canvas標籤元素（可結合js檔使其成為繪圖容器，支持點、線、面、圓、漸進色彩效果等等）。
• video 和audio 標籤元素，可不透過第三方程式直接在網頁上撥放影片及音樂檔。
• 支援本地離線存取。
• 增加標籤元素，如：article、footer、header、nav、section、calendar、date、time、email、url、search。

二、新的輸入型別

HTML 5提供了Search, Range, Date Picker, Color Picker等輸入標籤提供網頁程式開發者使用。透過套用這些新的輸入標籤，開發者不需要再自行開發相同的功能。

三、排版

HTML 5的排版方式與HTML 4及XHTML差異很大。傳統HTML 4使用Ｆrame、Table進行排版、XHTML使用DIV + CSS進行排版，而HTML5則提供定義更明確的標籤來進行排版，排版方式如下圖所示。由於使用了這些標籤，網頁程式開發者在排版以及DOM物件的操作上的會更直覺。

四、網站暫存

HTML5可以透過宣告的方式告訴瀏覽器那些網頁可以下載到本機離線作業，宣告方式如下圖例：

網站暫存的功能除了提供使用者離線瀏覽的能力外，由於網頁已經儲存在本機，因此與沒有暫存的網頁比起來，有暫存機制的HTML 5網站可以得到較佳的效能。

五、資料暫存

HTML 5提供了SessionStorage與LocalStorage兩個資料暫存物件，可以儲存Key-value對應的物件，也可以方便地透過Key來取得對應的value。SessionStorage的生命週期是瀏覽器關閉時就會失效。LocalStorage則是會半永久性的儲存在本機電腦中，如果沒有刻意刪除，資料就會持續的有效。

除此之外，HTML 5還提供了Web SQL Database，網站程式設計師可以在Javascript中下SQL對Web SQL Database進行增刪改查等資料庫操作，資料的操作將會儲存在本機的檔案系統中。

由此我們可以知道，與HTML 4有一點非常大的不同，HTML 5的出現，改變了HTML 4無狀態(Stateless)的先天限制，並且讓網路應用程式不再需要安裝各種外掛就可以輕易實現RIA(Rich Internet Application) 的效果。

六、非同步Javascript

HTML 5在Script標籤中除了預設與defer屬性外，新增了async屬性。預設代表著由Script標籤圍繞的Javascript會在網頁畫面讀取前進行載入，因此若Javascript檔案較大且與此網頁元素關聯性較低時，會由於網頁必須等待Javascript讀取完成導致回應速度被不太相關的Javascript所拖慢。defer屬性則代表Javascript讀取時間是網頁畫面讀取完成後再進行讀取，雖然畫面呈現的速度不會被Javascript所綁住，但有可能會由於Javascript尚未讀取完成導致使用者進行操作時找不到相應的Javascript。async屬性則是在網頁畫面讀取時同時異步進行讀取，可在不影響效能的情況下維持網頁程式的正確性。

七、Web Ｗorker

HTML 5給予了Javascript多執行續(Multithreading)的能力，也就是Javascript可以創建多個子執行續。每個執行續獨立運作，而主執行續可透過訊息的傳遞來對個子執行續下命令，各子執行續也透過訊息傳遞將處理結果或異常情況傳回給主執行續。

八、地理資訊

HTML 5提供了Geolocation介面，這個介面可以藉由GPS、IP位置、手機位置等資訊判斷使用者目前所在的地理位置。目前已經漸漸成為主流的智慧型手機，可以透過這樣的技術來取得目前持有者的所在位置以及周邊相關資訊。

九、瀏覽器支援程度

以下分別列舉了各種瀏覽器對於HTML5的支援程度，分數越高代表支援程度越高(針對個瀏覽器對於HTML5新增功能的支援程度請參閱html5test網站 http://html5test.com/index.html)：

• • 桌上型電腦：

• • 平板電腦：

• • 手機：

ASP.NET整合HTML5

儘管目前主流的瀏覽器Internet Explorer 9對HTML 5的支援程度上稍微薄弱，微軟的Visual Studio 2010 SP1更新並搭配MVC HTML 5 Toolkit使用之後，新推出的ASP.NET MVC 3架構可支援HTML 5的語法，讓程式設計師可以透過Visual Studio開發出HTML 5的網路應用程式。目前尚未上市的Internet Explorer 10將會全面支援HTML 5，並在手持式設備的版本將停止支援Adobe Flash的外掛。由此可知微軟未來對網路應用程式的發展是更傾向於使用HTML 5，甚至調整了微軟自家Silverlight的定位與未來發展方向，用行動來展示對HTML 5的決心。

一、開發方法

• • 使用Visual Studio建立新專案，如下圖所示。

• • 選取ASPX的View engine，勾選Use HTML5 semantic markup，並按下OK。

• • 加入MVC HTML 5 Toolkit的參考。

• • 在Web.config中加入System.Web.Mvc.Html5命名空間(Namespace)。

• • 接著我們就可以在View的內容中使用Html5的輸入型別。

二、離線作業

HTML5的另一項好處，就是可以離線瀏覽。透過ASP.NET，我們要達到離線瀏覽，有幾個規則：

• • 在IIS中必須加入MIME Type是text/cache-manifest的類型

• • 必須撰寫.manifest檔案，定義可離線瀏覽的網頁有哪些。

• • 可以離線瀏覽的網頁必須是實體檔案，所有網頁內容的呈現不能因為無法與網站主機溝通就發生錯誤。

• • 撰寫Javascript讓資料可以透過非同步資料傳輸(AJAX)儲存在遠端主機或當遠端主機不能使用時，資料可以儲存到LocalStorage中。

• • 伺服器端的控制器必需能接收並處理AJAX要求。

HTML5的設計議題

一、企業用途

一般而言，開發企業內部環境或外部環境的前端系統，使用Web的方式呈現，可以用最少的成本來維持程式佈署環境的一致性。畫面操作上要求的是簡潔、快速與直觀。在HTML 5之前，要達成上述的目的，網路程式開發人員必須花費大量的精力去對畫面中每一個使用者可以操作的內容進行防呆檢核，並自動對輸入內容進行各式各樣的型別轉換。

開發人員改用HTML 5開發後可以使用HTML 5提供的許多預設的輸入型別與預設的輸入檢核來達成此目的。使用者操作更加方便，也可以節省開發人員需要花費的精力。

然而，在規劃資料暫存機制時必須得小心謹慎。對於金融、證券、醫療等產業，若本地資料與伺服器資料不同步而造成交易資料互蓋或錯置，衍生後果非常嚴重。

二、行動設備

現今行動手機作業系統兩大族群：iOS及Android，開發其系統所使用的語言不外乎為Objective-C + CocoaTouch Framework 及Java + Android Framework，若開發應用系統時需在此兩種不同系統上運行時，必須同時維護兩種不同語言的版本，如此對程式開發者抑是不小的成本，好在此兩種作業系統其上的瀏覽器對於HTML5的支援越來越廣，若使用HTML5來開發網頁版的應用程式，即可免去維護兩種版本所耗費的多餘時間及成本。

另針對行動設備的使用者，可能會有進電梯或地下室等暫時無法使用網路的情況，因此HTML 5的離線瀏覽功能非常有用，當使用者無法連上網際網路時，透過離線瀏覽功能讓使用者得以使用應用程式的部分功能，藉此提升程式的可靠性。

透過地理資訊API，網路應用程式的個人化程度可以提升。使用者可以透過地理資訊得知周邊的各項有用資訊、公司在也可以取得使用者的地理資訊，並進行相關的商業分析。

三、娛樂用途

HTML 5內建了Video與Audio標籤，可以支援Ogg、MPEG 4、Web M等各種影片格式與Ogg Vorbis、MP3、Wav等各種音樂格式。HTML 5也提供了Canvas標籤，搭配Canvas API，可製作2D的各種動畫效果，搭配WebGL API可製作3D的動畫效果，而不需要再使用外掛程式(如Microsoft Silverlight或Adobe Flash等)。

結語

目前HTML 5尚未成為業界標準，但由於HTML 5的效能與RIA的能力，各家瀏覽器對HTML 5的發展抱持著樂觀的態度，並已經支援HTML 5的部分功能。

雖然微軟在ASP.NET 4 Web Form或ASP.NET MVC 3都可以開發HTML 5的應用程式，但是目前開發環境沒有非常好的支援度，例如Server端的控制項不足，Javascript的Intellisense也不夠完整。透過Web Form及MVC Framework標準開發方式所開發出來的應用程式也無法做到離線瀏覽。但微軟對下一個版本的Visual Studio 11將結合.NET Framework 4.5一起問世，針對HTML 5的網路應用程式開發將會有更好的支援。Server端控制項將會加入HTML 5的元素，開發環境對HTML 5的支援度也會增加，目前已經有開發者預覽版本可以下載。

參考資料

• Using HTML 5 for performance improvements. Google Code. [Online] Google.
• 多樣化網際網路應用程式. 維基百科. [Online]
• Create an offline HTML5 application for IOS with ASP.NET MVC3. Geoffrey Vandiest - Software Simplificator. [Online]
• ASP.NET 4.5 loves HTML5, CSS3 & JavaScript. Channel 9. [Online]
• Wikipedia. HTML5. Wikipedia. [Online] Wikipedia.
• HTML5新手入門. HTML5研究小組. [Online]
• Update for the .NET Framework 4. Microsoft Support. [Online] Microsoft.
• Hunt, Lachlan. A Preview of HTML 5. A List Apart. [Online]
• HE HTML5 TEST