HTML5網(wǎng)站開發(fā)已逐漸開始流行和發(fā)展，開發(fā)者們無不例外的想體驗HTML5為我們帶來的便捷和驚嘆，想過有一天，瀏覽網(wǎng)站的感覺就想是在翻閱一本雜志一樣的輕松簡單，在這個計算機行業(yè)高速發(fā)展的時代，微軟IE團隊在此前就為亞洲動物保護(hù)基金精心打造的“月熊志”網(wǎng)站，使“像翻閱雜志一樣的閱讀網(wǎng)站”成為了現(xiàn)實，同時也為HTML5引領(lǐng)了網(wǎng)頁開發(fā)的新概念。

　　HTML5技術(shù)為網(wǎng)站開發(fā)帶來了日新月異的變化，使開發(fā)者們在自己的設(shè)計思路上得到了一個質(zhì)的飛越，許多新的設(shè)計理念都能夠得以實現(xiàn)。而對于HTML5網(wǎng)站開發(fā)來說，想要讓網(wǎng)站擁有更好的顯示效果，除了技術(shù)革新，瀏覽器對于HTML5的支持也至關(guān)重要。
　　IE11的HTML5新變革
　　IE11全面支持HTML5開發(fā)標(biāo)準(zhǔn)，同時在硬件加速方面也有著非常出色的性能。此外，IE11支持全套HTML5網(wǎng)頁開發(fā)API，并且IE11還將對HTML5視頻等媒體資源的支持提高到了一個新的水平，在現(xiàn)行標(biāo)準(zhǔn)下開發(fā)者能夠?qū)崿F(xiàn)比預(yù)期更加優(yōu)秀的效果。同時，開發(fā)者們能夠使用自IE10開始引入的Pointer API實現(xiàn)對觸控的支持。Pointer API封裝了來自觸摸、筆、鼠標(biāo)的輸入，所有這些形式的輸入操作都被抽象成為統(tǒng)一的Pointers接口，這一API的添加讓開發(fā)者可以更方便地開發(fā)Web頁面，而這個功能也被W3C列為HTML 5的候選標(biāo)準(zhǔn)。正因為IE11對HTML5標(biāo)準(zhǔn)的良好支持，用戶可以在“月熊志”這種運用了大量3D、媒體元素的網(wǎng)頁體驗完美逼真的3D月熊動畫，實現(xiàn)快速流暢的網(wǎng)頁瀏覽。

可跨平臺流媒體服務(wù)如何實現(xiàn)?
　　Hit FM在線電臺由微軟IE團隊與Hit FM國際流行音樂廣播共同開發(fā)，利用了HTML5對于在線流媒體的良好支持，實現(xiàn)了可跨平臺無插件實時收聽廣播的流媒體體驗，同時3D折頁效果的網(wǎng)頁也令用戶嘖嘖稱奇，為用戶帶來了時下最新鮮的網(wǎng)頁瀏覽體驗。

　　在開發(fā)的過程中，開發(fā)團隊首先需要滿足的就是用戶的跨平臺實時廣播體驗，而這也一直是過去網(wǎng)絡(luò)電臺的瓶頸所在。以往在線收聽廣播都需要安裝插件或者使用軟件進(jìn)行收聽，這無疑給用戶跨平臺的體驗造成了阻礙，畢竟在PC之外其他平臺無法提供良好的支持。HTML5的出現(xiàn)成功將這樣的局面打破。開發(fā)團隊通過將MMS流媒體轉(zhuǎn)換成HTML5支持的音頻流媒體格式，使用HTML5支持的 標(biāo)簽實現(xiàn)無插件播放功能，用戶可以無需安裝任何插件即可在Windows、MAC平臺以及iOS、Android和WP等移動平臺進(jìn)行收聽。代碼示例：
　　var audio = new Audio();
　　function play(src) {
　　audio.src = src;
　　audio.play();
　　};
　　function pause() {
　　audio.pause();
　　audio.src = "";
　　};
　　$("#radio-btn").on("click", function () {
　　audio.paused ? play("[音頻地址]") : pause();
　　});

　　在以往的開發(fā)中，特效的實現(xiàn)讓很多開發(fā)者為之苦惱，因為經(jīng)常需要復(fù)雜的代碼和Flash工具才能實現(xiàn)。但在Hit FM在線電臺的開發(fā)過程中，得益于IE10對HTML5和CSS3的全面支持，開發(fā)者們可以通過CSS3中Transform和Transition來實現(xiàn)網(wǎng)站的變形和過渡效果，給用戶帶來炫酷的視覺感受，并且在加載上也能非常流暢，輕松實現(xiàn)了Flash都望塵莫及的動畫效果，同時在整個體驗中沒有用到任何插件，保證了出色的用戶體驗。
　　代碼示例：
　　bar.hammer().on("touch", function () {
　　// 記錄拖拽開始時的折頁總寬度
　　hot.data("oldWidth", hot.width());
　　}).on("drag", function (evt) {
　　// 根據(jù)鼠標(biāo)移動距離獲得折頁在當(dāng)前狀態(tài)的正確寬度
　　var newWidth = hot.data("oldWidth") + evt.gesture.deltaX;
　　hot.css(newWidth);
　　// 計算角度：90 * (1 - 當(dāng)前寬度 / 完整寬度)
　　var deg = 90 * (1 - newWidth / hotFullWidth);
　　// 單數(shù)項和雙數(shù)項以相反的角度旋轉(zhuǎn)從而得到折頁效果
　　hotOddItems.css("transform", "rotateY(" + -deg + "deg)");
　　hotEvenItems.css("transform", "rotateY(" + deg + "deg)");
　　});

　  此外，在Hit FM在線電臺的開發(fā)過程中，開發(fā)團隊充分利用到了HTML5上的全新API，保證用戶的流暢體驗和收聽的持續(xù)性。借由HTML5中全新加入的History API特性，實現(xiàn)了全站AJAX(用于提升用戶訪問體驗的技術(shù))。當(dāng)用戶在點擊內(nèi)容時，只會加載需要更新的內(nèi)容而不會加載外層不變的框架，同時標(biāo)題欄、地址欄以及前進(jìn)后退等按鈕也會發(fā)生變化，和全部刷新打開一樣，并且整個過程不會影響Live Streaming的播放，大幅提升用戶體驗。
　　代碼示例：
　　var app = $.sammy("#wrapper", function () {
　　// 當(dāng)頁面 hash 改為 #hits/ 時，加載 hits/ 頁面到 #wrapper 中
　　this.get("#hits/", function () {
　　this.partial('hits/').then(function () {
　　// 頁面載入后
　　});
　　});
　　});
　　app.run();
      網(wǎng)站技術(shù)的升級日新月異，在HTML5大潮流的趨勢下，更多的開發(fā)者們開始思考如何才能讓用戶在通過移動端進(jìn)行網(wǎng)頁瀏覽時保證多屏體驗合二為一的感覺。IE11的興起和使用更為HTML5的發(fā)展添上了濃墨重彩的一筆，開發(fā)者可以魔術(shù)師一般的把網(wǎng)站活靈活現(xiàn)的展現(xiàn)在用戶面前，體驗新時代的技術(shù)為大家?guī)淼母淖儼桑?/p>