HTML5引领网页开发新概念

　随着HTML5网站开发的流行，开发者们可以尽情的将视频、图像、音乐添加到网站上。而此前微软IE团队为亚洲动物保护基金精心打造的月熊志网站，就是一个运用HTML5开发的好例子。月熊志利用HTML5标准开发而成，引入了全新的触控交互体验，让用户在浏览整个网站的体验过程中，就像翻阅一本杂志一样轻松。

这就是HTML5技术为网站开发带来的变化，让开发者能够完全不必要担心自己的设计思路能否实现。而对于HTML5网站开发来说，想要让网站拥有更好的显示效果，除了技术革新，浏览器对于HTML5的支持也至关重要。

IE11的HTML5新变革

IE11全面支持HTML5开发标准，同时在硬件加速方面也有着非常出色的性能。此外，IE11支持全套HTML5网页开发API，并且IE11还将对HTML5视频等媒体资源的支持提高到了一个新的水平，在现行标准下开发者能够实现比预期更加优秀的效果。同时，开发者们能够使用自IE10开始引入的Pointer API实现对触控的支持。Pointer API封装了来自触摸、笔、的输入，所有这些形式的输入操作都被抽象成为统一的Pointers接口，这一API的添加让开发者可以更方便地开发Web页面，而这个功能也被W3C列为HTML 5的候选标准。正因为IE11对HTML5标准的良好支持，用户可以在“月熊志”这种运用了大量3D、媒体元素的网页体验完美逼真的3D月熊动画，实现快速流畅的网页浏览。

可跨平台流媒体服务如何实现？

Hit FM在线电台由微软IE团队与Hit FM国际流行音乐广播共同开发，利用了HTML5对于在线流媒体的良好支持，实现了可跨平台无插件实时收听广播的流媒体体验，同时3D折页效果的网页也令用户啧啧称奇，为用户带来了时下最新鲜的网页浏览体验。

在开发的过程中，开发团队首先需要满足的就是用户的跨平台实时广播体验，而这也一直是过去网络电台的瓶颈所在。以往在线收听广播都需要安装插件或者使用软件进行收听，这无疑给用户跨平台的体验造成了阻碍，毕竟在PC之外其他平台无法提供良好的支持。HTML5的出现成功将这样的局面打破。开发团队通过将MMS流媒体转换成HTML5支持的音频流媒体格式，使用HTML5支持的<audio&gt; 标签实现无插件播放功能，用户可以无需安装任何插件即可在Windows、MAC平台以及iOS、Android和WP等移动平台进行收听。代码示例：

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();

});

在以往的开发中，特效的实现让很多开发者为之苦恼，因为经常需要复杂的代码和Flash工具才能实现。但在Hit FM在线电台的开发过程中，得益于IE10对HTML5和CSS3的全面支持，开发者们可以通过CSS3中Transform和Transition来实现网站的变形和过渡效果，给用户带来炫酷的视觉感受，并且在加载上也能非常流畅，轻松实现了Flash都望尘莫及的动画效果，同时在整个体验中没有用到任何插件，保证了出色的用户体验。

代码示例：

bar.hammer().on("touch", function () {

// 记录拖拽开始时的折页总宽度

hot.data("oldWidth", hot.width());

}).on("drag", function (evt) {

// 根据鼠标移动距离获得折页在当前状态的正确宽度

var newWidth = hot.data("oldWidth") + evt.gesture.deltaX;

hot.css(newWidth);

// 计算角度：90 * (1 - 当前宽度 / 完整宽度

var deg = 90 * (1 - newWidth / hotFullWidth);

// 单数项和双数项以相反的角度旋转从而得到折页效果

hotOddItems.css("transform", "rotateY(" + -deg + "deg)");

hotEvenItems.css("transform", "rotateY(" + deg + "deg)");

});

此外，在Hit FM在线电台的开发过程中，开发团队充分利用到了HTML5上的全新API，保证用户的流畅体验和收听的持续性。借由HTML5中全新加入的History API特性，实现了全站AJAX（用于提升用户访问体验的技术）。当用户在点击内容时，只会加载需要更新的内容而不会加载外层不变的框架，同时标题栏、地址栏以及前进后退等按钮也会发生变化，和全部刷新打开一样，并且整个过程不会影响Live Streaming的播放，大幅提升用户体验。

代码示例：

var app = $.sammy("#wrapper", function () {

// 当页面 hash 改为 #hits/ 时，加载 hits/ 页面到 #wrapper 中

this.get("#hits/", function () {

this.partial('hits/').then(function () {

// 页面载入后

});

});

});

app.run();

随着网民对交互型体验需求的增加以及触控设备的增多，HTML5网站必将是大势所趋的网站形式。而移动端的兴起也让开发者们开始考虑如何让用户在通过移动端进行网页浏览时保证多屏体验合一。IE11提供了对目前最新网络标准HTML5的支持以及快速的性能，这将让开发者能够随心所欲地向网站中加入各种效果，把整个页面变活，帮助你的网站展现出更好的效果。开始动手让你的网站变得更酷吧！