HTML5如何使网站“时尚前沿化”
(2013-07-08 12:06:49)
标签:
it |
当前,HTML5标准正处于一个高速发展阶段。无论是在Web网页表现性能上,还是在网页应用的加载速度上,都远远优秀于之前的HTML
4.01和XHTML
1.0标准。正因为如此,已经有越来越多的开发者开始基于HTML5创作出了一大批优秀的站点,并且取得了业内的一致好评。
今天,就和大家分享一个优秀的案例——全新的Hit
FM音乐广播官网。为了尽可能发挥出HTML5的优点。因为网站是由微软IE团队为hitfm量身打造,建议大家选用IE10进行浏览。网站本身突出了IE10对多点触控的良好支持,并通过硬件加速提升页面大图的加载速度。
本文主要站在用户体验的角度,从四个方面介绍通过当下最热的HTML5技术,打造的Hit FM官网(www . hitfm .
cn)的全新体验,以供大家思考学习。
一、界面风格
Hit
FM,作为国内唯一一家全天候播出的国际流行音乐电台,节目以欧美流行音乐为主,深受高端时尚白领用户喜爱。全新的官网首页以红黑为主色调,采用高清大图和大尺寸图标,符合其动感、时尚、与国际接轨的形象风格,左侧的折页效果在IE10和Chrome等主流浏览器下体验流畅,带给用户平滑而现代的感受。
二、加载速度
借力于IE10对HTML5标准和硬件加速功能的全面支持(在线收听和硬件加速有关系吗?),该网站只需要128Kbps的极小带宽就可以进行在线收听,且相关软件工程师们通过将MMS流媒体经过转换成为HTML5支持的音频流媒体格式,并使用HTML5支持的标签实现无插件播放功能,使得听众在不需要任何浏览器插件的条件下即可在在线收听广播电台。
三、触控支持
除了支持常规的鼠标键盘操作,在支持触控的设备上,用户可以获得更优质的体验。。开发者在一些滑动操作和特效的展现上都进行充分地考虑,从而迎合用户在触控操作过程中的需求。同时,由于IE10在上一代浏览器的基础上进一步缩减自身界面所占用的屏幕区域,将窗口及控件所占用的像素面积缩减到最低。整个屏幕完全用于展示网页内容,不被任何其他元素打扰,这为网站本身提供了最佳的展示环境。
四、页面性能
在实现流畅触控操作的同时也在视觉效果上加以提高。在以往的开发过程中,对于特效的实现较为困难,经常需要复杂的代码和效率较低的Flash插件来完成。得益于IE10所拥有的硬件加速能力以及对于全新HTML5和CSS3标准的全面支持,网页工程师采用了CSS3中Transform和Transition变形处理来实现网站的过渡效果,给用户炫酷视觉体验的同时也拥有流畅和快速的加载性能。
除了上述特点外,在本网站(www . hitfm .
cn)中,利用HTML5网页标准中全新加入的History
API特性,实现了全站AJAX。当用户在点击内容时,页面只会加载需要更新的内容而不会加载外层不变的框架,同时标题栏、地址栏以及前进后退等按钮也会发生相应变化,和整页刷新几无二致,这大大降低了移动数据网络下的用户流量消耗。整个过程都不会影响到后台Live
Streaming的实时播放,有效提升听众的局部刷新体验。
HTML5的表现已经得到了越来越多开发者的认可,作为HTML5网页标准的参与构建者之一,微软在HTML5网页标准下的运算处理能力非常强大,特别是当用户在进行高保真音频在线播放和网页游戏时,具备强大渲染性能和处理速度。相信随着国内厂商的努力,以及网站越来越多的尝试,HTML5必然将迎来属于它的春天!
PS:HTML5的优点:
1、提高可用性和改进用户的友好体验;
2、有几个新的标签,这将有助于开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6、将被大量应用于移动应用程序和游戏。