html5网站开发已逐渐开始流行和发展,开发者们无不例外的想体验html5为我们带来的便捷和惊叹,想过有一天,浏览网站的感觉就想是在翻阅一本杂志一样的轻松简单,在这个计算机行业高速发展的时代,微软ie团队在此前就为亚洲动物保护基金精心打造的“月熊志”网站,使“像翻阅杂志一样的阅读网站”成为了现实,同时也为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支持的 标签实现无插件播放功能,用户可以无需安装任何插件即可在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的发展添上了浓墨重彩的一笔,开发者可以魔术师一般的把网站活灵活现的展现在用户面前,体验新时代的技术为大家带来的改变吧!