如果你是一位有經驗豐富的Web開發人員，你會愛上Visual Studio 2012提供的HTML5/JavaScript/CSS3的選項。
我們知道，10月26日Windows 8將正式發布，這表示開發人員得做出決定是使用HTML5/JavaScript/CSS還是XAML/C#或者Visual Basic或者C++來構建Metro樣式的應用程序。
很多Web開發人員會選擇HTML5/JavaScript/CSS，因為對它已經很有經驗了。作出使用什么來開發的決定，下一步就是理解Windows Runtime（WinRT）和它的新API是如何與Windows 8交互的。
這篇文章將帶着你使用HTML5/JavaScript/CSS3構建一個Metro應用程序。
開發環境
1.Windows8。
2.Visual Studio 2012
3.建議下載Metro app samples，下載地址：http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples。
1.環境搭建好后，啟動Visual Studio 2012,選擇其他語言->JavaScript->Windows Metro style，選擇“空白應用程序”，名稱設置為“VSMagJS”，單擊“確定”。如下圖所示：
從上圖可以看到，JavaScript下的Windows Metro style提供了5個模板，選中模板，在右側會有相應的介紹。
組件
2.創建項目成功后，打開“解決方案資源管理器”，會看到項目的結構如下圖所示：
引用：包含此應用程序功能所需要的WinRT API。默認只添加了一個：Windows Library for JavaScript 1.0 RC，包括ui-dark.css和ui-light.css兩個文件，同樣是WinRT需要的基本API文件。在這個例子中，還包括英語語言的全局字符串文件。
CSS：default.css文件很簡單，它只包含CSS3媒體查詢，以決定設備方向。
Images：這個文件夾包括4張圖片用於表示應用程序的圖標。它還包含啟動畫面（splashscreen），在應用程序開始時顯示。
JS：包括一個文件——default.js——當應用程序啟動時運行。它包含樣板代碼以幫助你快速入門。
Default.html：標准的HTML頁。
Package.appxmanifest:描述應用程序的部署包，允許更改容量、聲明等等。
VSMagJS_TemporaryKey.pfx：個人信息交換文件，換句話就是應用程序的數字證書。
修改開始頁
打開default.html，會看到如下圖所示的內容：
上圖中，<!DOCTYPE html>是使用了HTML5文檔類型，往下是使用了其他標准的HTML標簽，如meta,title等。往下可以看到WinJS引用，再往下就是針對具體應用程序的引用，default.css確定設備的方向。
下面來修改default.html頁，代碼如下：
1: <body>
2: <h1>Hello VSM Reader</h1>
3: <p>What's your favorite magazine? </p>
4: <input id="magazineInput" type="text" />
5: <button id="questionButton">OK </button>
6: <div id="questionOutput"></div>
7: </body>
單擊調試工具攔中的“本地計算機”按鈕會出現如下圖所示：
到目前為止，當在文本框中輸入內容或單擊按鈕什么都不會發生。
給開始頁添加邏輯
打開default.js,會看到如下圖所示代碼：
注意“strict”關鍵字對代碼提供額外的錯誤檢查。
現在添加一些代碼使default.html具有交互的功能。找到下面的代碼：
args.setPromise(WinJS.UI.processAll());
在它的下面，添加下面三行代碼：
// Get the Element ID of our OK Button and attach an event handler to it.
var OKButton = document.getElementById("questionButton");
OKButton.addEventListener("click", OKbuttonClickHandler, false);
下面添加一個名為OKbuttonClickHandler的函數，當OK按鈕點擊后執行。
在app.oncheckpoint下面添加這個函數：
1: function OKbuttonClickHandler(eventInfo) {
2: var answer = document.getElementById("magazineInput").value;
3: if (answer == 'Visual Studio Magazine') {
4: var finalanswer = "Good Answer!";
5: }
6: else {
7: var finalanswer = "Try Again! - Hint type Visual Studio Magazine";
8: }
9: document.getElementById("questionOutput").innerText = finalanswer;
10: }
再次運行程序，運行結果如下圖所示：
快速輕松的設置應用程序樣式
默認情況下，default.html引用下面的代碼，使用dark樣式：
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
Metro UI也提供了一個light主題，在default.html中引用如下代碼，應用程序就會應用light樣式：
<link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
再次運行程序，如下圖所示：
了解更多
是時候進一步探討package.appxmanifest了。如前面所述，package.appxmanifest描述了應用程序的部署包。可以通過雙擊該文件打開它，如下圖所示：
每個頁面都提供了訪問應用程序可能需要或可能不需要的特定功能。當點擊Tab時，下面會出現相應Tab頁的介紹。例如，應用程序UI，它的下面對它的解釋是：使用此頁可以設置用於標識和描述應用程序的屬性。
打包應用程序
打包應用程序，執行下面的步驟：
點擊“項目”——>應用商店——>創建應用程序包，如下圖所示：
彈出對話框：
是否上傳到Windows商店，選擇“否”，點擊“下一步”：
單擊“創建”：
打開上面的目錄，找到Add-AppDevPackage.ps1，右擊選擇“使用PowerShell運行”：
結束語
以上內容大部分翻譯自Windows 8 Apps With HTML 5這篇文章！