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

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

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

　　在開發(fā)的過程中，開發(fā)團(tuán)隊(duì)首先需要滿足的就是用戶的跨平臺(tái)實(shí)時(shí)廣播體驗(yàn)，而這也一直是過去網(wǎng)絡(luò)電臺(tái)的瓶頸所在。以往在線收聽廣播都需要安裝插件或者使用軟件進(jìn)行收聽，這無疑給用戶跨平臺(tái)的體驗(yàn)造成了阻礙，畢竟在PC之外其他平臺(tái)無法提供良好的支持。HTML5的出現(xiàn)成功將這樣的局面打破。開發(fā)團(tuán)隊(duì)通過將MMS流媒體轉(zhuǎn)換成HTML5支持的音頻流媒體格式，使用HTML5支持的 標(biāo)簽實(shí)現(xiàn)無插件播放功能，用戶可以無需安裝任何插件即可在Windows、MAC平臺(tái)以及iOS、Android和WP等移動(dòng)平臺(tái)進(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ā)中，特效的實(shí)現(xiàn)讓很多開發(fā)者為之苦惱，因?yàn)榻?jīng)常需要復(fù)雜的代碼和Flash工具才能實(shí)現(xiàn)。但在Hit FM在線電臺(tái)的開發(fā)過程中，得益于IE10對(duì)HTML5和CSS3的全面支持，開發(fā)者們可以通過CSS3中Transform和Transition來實(shí)現(xiàn)網(wǎng)站的變形和過渡效果，給用戶帶來炫酷的視覺感受，并且在加載上也能非常流暢，輕松實(shí)現(xiàn)了Flash都望塵莫及的動(dòng)畫效果，同時(shí)在整個(gè)體驗(yàn)中沒有用到任何插件，保證了出色的用戶體驗(yàn)。
　　代碼示例：
　　bar.hammer().on("touch", function () {
　　// 記錄拖拽開始時(shí)的折頁(yè)總寬度
　　hot.data("oldWidth", hot.width());
　　}).on("drag", function (evt) {
　　// 根據(jù)鼠標(biāo)移動(dòng)距離獲得折頁(yè)在當(dāng)前狀態(tài)的正確寬度
　　var newWidth = hot.data("oldWidth") + evt.gesture.deltaX;
　　hot.css(newWidth);
　　// 計(jì)算角度：90 * (1 - 當(dāng)前寬度 / 完整寬度)
　　var deg = 90 * (1 - newWidth / hotFullWidth);
　　// 單數(shù)項(xiàng)和雙數(shù)項(xiàng)以相反的角度旋轉(zhuǎn)從而得到折頁(yè)效果
　　hotOddItems.css("transform", "rotateY(" + -deg + "deg)");
　　hotEvenItems.css("transform", "rotateY(" + deg + "deg)");
　　});

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