繼影片《饑餓游戲》獲得票房成功后，《饑餓游戲2：火星燎原》也于2012年宣布開拍，將在今年的11月22日登陸全球各大院線。值此之際，微軟攜手美國獅門影業(yè)公司和 RED Interactive Agency 一起為影迷打造了一個基于 HTML5 現(xiàn)代網(wǎng)頁規(guī)范開發(fā)的沉浸式體驗網(wǎng)站——饑餓游戲瀏覽器（The Hunger Games Explorer），地址為 http://www.thehungergamesexplorer.com. 在這里，全世界的饑餓游戲迷們可以獲得影片上映前的一切資訊，包括獅門影業(yè)官方放出的海報、預(yù)告片等等，同時也可以參與到全球社交媒體關(guān)于饑餓游戲的討論中來。

今天，消費者們可以與我一同看看，一個優(yōu)秀的 HTML5 站點能給我們大家?guī)碓鯓拥男麦w驗，而開發(fā)者們也可以參考這個網(wǎng)站所使用的一些 HTML5 特性，去開發(fā)出您自己的優(yōu)秀 HTML5 站點。

網(wǎng)站亮點

從功能上看，該網(wǎng)站為所有的影迷們提供了一站式的影訊資源平臺，不僅可以看到獅門公司所發(fā)布的官方訊息，更可以實時查看到來自全球的社交媒體上關(guān)于饑餓游戲的討論。所有的內(nèi)容，包括圖像、視頻和文字，都是通過一個個的方塊區(qū)域組織到一起的，內(nèi)容也是直觀地呈現(xiàn)在了不同的方塊里面，并且很多區(qū)塊中的內(nèi)容是動態(tài)的，給網(wǎng)站增添了視覺上的活力。而且如果您有觸摸屏的話，不難發(fā)現(xiàn)，這個站點是支持多點觸控的，用雙指可以進行自然的縮放，來調(diào)整頁面內(nèi)容的呈現(xiàn)，很好地支持直接用手指去與整個網(wǎng)站進行交互。

這些社交媒體的數(shù)據(jù)抓取和整合自全球熱門的社交媒體網(wǎng)站，例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同時這個饑餓游戲瀏覽器網(wǎng)站也支持通過 Facebook 和 Twitter 賬號登錄，登錄后用戶可以創(chuàng)建自己的頁面來組織你所關(guān)注的資源和內(nèi)容，也可以去"贊"別人發(fā)布的內(nèi)容，因此，這個站點本身通過對第三方社交媒體網(wǎng)絡(luò)的整合，為用戶輕松提供了一個新的影迷專用社交平臺。這樣的做法是值得推薦給開發(fā)者們的。

在UI設(shè)計方面，網(wǎng)站整體呈現(xiàn)出一種現(xiàn)代感，借助 HTML5 的一些功能，網(wǎng)站可以使用自定義的字體，并且可以設(shè)計出與影片主題契合的配色風(fēng)格和界面元素。在我們點擊某一內(nèi)容方塊時，可以看見該方塊放大且周遭方塊縮小重排的動畫效果，這樣會讓內(nèi)容的切換不顯得過于突兀。用戶在剛打開這個網(wǎng)站的同時，也可以看見方塊向中間堆疊鋪陳的效果，雖然很快，但能給人舒適的感受。在功能上，用戶還可以對某一關(guān)鍵字進行檢索，也可以進行篩選。該網(wǎng)站也采用了瀑布流的方式，網(wǎng)站不設(shè)底邊，一直往下滾動會看見越來越多的來自社交媒體網(wǎng)站的內(nèi)容被整合進來，并得以呈現(xiàn)。

橫跨不同設(shè)備并提供一致用戶體驗也是該網(wǎng)站的一個亮點，因為不論是從 PC 端的 IE10 ，還是智能手機或平板的支持 HTML5 的瀏覽器訪問該站點，都可以看到一致的內(nèi)容與風(fēng)格，只不過，里面的方塊大小和排列方式會根據(jù)用戶的屏幕分辨率來自動調(diào)整。對于這樣的自適應(yīng)效果，我們也可以通過 PC 端的 IE10 瀏覽器看到，具體做法是改變窗口的尺寸。

幕后的技術(shù)

網(wǎng)站的瀑布式內(nèi)容呈現(xiàn)方式，借助了 JavaScript 將大大小小的信息方塊無縫地組織到一起。這是一個典型的網(wǎng)格布局，只不過它使用的不是傳統(tǒng)的網(wǎng)格布局技術(shù)，而是使用了 JS 將每一塊內(nèi)容放到合適的位置，并且使用 3D CSS 變換來實現(xiàn)塊移動和旋轉(zhuǎn)時候的效果。

而對于觸摸的支持，它利用了 Microsoft Pointers Model，因此可以做到使用一個 API 就可以同時管理鼠標(biāo)和手指觸摸這兩種用戶輸入。

對于 3D 翻轉(zhuǎn)動畫，網(wǎng)站運用了使用 requestAnimationFrame API 優(yōu)化的 CSS3 變換，這樣能確保動畫效果在不同的瀏覽器和設(shè)備上都一樣流暢。requestAnimationFrame 技術(shù)能夠在不犧牲運算能力的同時進一步提高響應(yīng)度，響應(yīng)度的提高也是讓用戶感覺到動畫流暢的一個關(guān)鍵。

如果您想查看這些技術(shù)范例的代碼，可以移步此處： http://www.thehungergamesexplorer.com/behind-the-scenes

創(chuàng)作用戶喜愛的網(wǎng)站

如今的互聯(lián)網(wǎng)不再單以信息內(nèi)容為第一要務(wù)，用戶對參與和交互的要求已經(jīng)越來越高，因為 Web 2.0 是一個強調(diào)用戶為中心、用戶創(chuàng)造內(nèi)容和參與交互的一個時代。因此，用戶體驗是越來越重要的一個環(huán)節(jié)。要做好用戶體驗，并且兼顧這一需求在未來的發(fā)展，舊有的一些技術(shù)似乎已不再能很好地支撐用戶體驗的今天和明天。雖然現(xiàn)在 Flash 等插件在網(wǎng)頁中有很多運用，但是我們已經(jīng)通過這些優(yōu)秀的 HTML5 網(wǎng)站看到了無插件網(wǎng)頁帶來的一些優(yōu)勢，例如高性能、省電與渾然天成的視覺效果等。對于熟知舊有技術(shù)的開發(fā)者而言，做出改變雖然看似有些困難，但是我們應(yīng)當(dāng)看到現(xiàn)代網(wǎng)頁技術(shù)的發(fā)展給我們帶來的喜悅，以及能夠給用戶帶來的驚喜與價值。我們值得為用戶做出改變，也同樣值得為網(wǎng)站用戶體驗及網(wǎng)頁技術(shù)的未來做出改變。

微軟通過參與研究和推動 HTML5 等現(xiàn)代網(wǎng)頁技術(shù)規(guī)范，改進了 IE 瀏覽器對 HTML5 等現(xiàn)代網(wǎng)頁技術(shù)的支持，也正不斷為開發(fā)者提供越來越多的指引和資源。我們看到，已經(jīng)有越來越多的開發(fā)者步入到 HTML5 開發(fā)的行列中來，也期待在不久的將來，能有更多的網(wǎng)站構(gòu)建于新的技術(shù)之上！

如果您需要更多了解HTML5 等現(xiàn)代網(wǎng)頁技術(shù)，可以前往 http://www.ietestdrive.com 查看更多技術(shù)示例及代碼。前不久，微軟也新推出了 http://www.modern.ie 網(wǎng)站，幫助開發(fā)者更輕松地評估現(xiàn)有在線網(wǎng)站，當(dāng)然，您也可以選擇下載一個用于本地的 modern.IE 程序，用來簡化您的開發(fā)測試工作。試試身手吧！