开发者案例:HIT FM如何借助打造全新HTML5服务

标签: APP与开发者 Windows 专题 业界生态 HTML 5 | 发表时间:2013-06-21 03:00 | 作者:绍森
出处:http://www.wpdang.com

作为用于取代1999年所制定的 HTML4.01的下一代HTML标准版本,当前的HTML5标准正处于一个高速发展阶段。HTML5浪潮有两个最大特点:强化 Web 网页的表现性能,并追加本地数据库等Web应用下的功能特性,旨在通过减少浏览器对于需要插件(如Adobe Flash、Microsoft Silverlight等)的网络服务需求,提供更多能有效增强Web应用的标准集。

HIT FM劲曲调频,作为IE 10浏览器的深度合作伙伴之一,继2003年4月开始在北京试播后,于随后的十年内陆续落地广州、上海、重庆、南京、天津等城市,作为国内唯一一家全天候播出的国际流行音乐频率,已经成为都市时尚人群生活中不可或缺的音乐伴侣。 现在,伴随着采用新一代HTML5网页标准打造的全新官网( www.hitfm.cn)正式上线,实现了包括Live Streaming实时收听、折页Parallax视觉效果,以及为触控而生的沉浸式界面等在内的一系列炫酷特性。

对此,HIT FM频率总监赵健谈到:“在当下这个音乐早已被人们视为同空气、饮水一样重要的时代,我们急切地需要一个合适的平台,让HIT FM官网能够发挥出自身的特色与优势,将其从简单的功能和千篇一律的设计中解放出来,给600万听众眼前一亮的感觉,以进一步完善网络浏览器下的电台收听体验。”

挑战:

• 早先的HIT FM官网设计单调,功能性较为单一,响应效率较低,已经无法同HIT FM一直以来动感、时尚、与国际接轨的品牌形象定位相匹配。
• 面对几乎成为标配的多点触控屏幕和随之而来的触控体验需求,全新的HIT FM官网需要从设计上就充分考虑到针对用户触控操作的优化。
• 在如今设备分辨率异常混乱的大环境下,除传统的台式电脑外,越来越多的用户开始使用智能手机、平板电脑等移动设备来浏览网页,传统固定样式的页面已经不能应付此类需求。

解决方案:

• 借力于全新的IE 10浏览器中对HTML5标准和硬件加速功能的全面支持,改版后的官网只需要128Kbps的极小带宽就可以进行在线收听,且相关软件工程师们通过将MMS流媒体经过转换成为HTML5支持的音频流媒体格式,并使用HTML5支持的<Audio>标签实现无插件播放功能,使得听众在不需要任何浏览器插件的条件下即可在IE 10、Safari、Chrome、Firefox等主流桌面或移动平台浏览器上收听,解决了以在线收听广播电台必须使用WMP插件的问题。

• 针对触控操作的优化不仅表现在整个页面上多采用高清大图和大尺寸图标,还在一些滑动操作和特效的展现上都进行充分地考量,并针对来自不同设备(智能手机、平板电脑、超极本)的访问逐一优化,以保证不同用户的统一化完美触控体验。同时,IE 10在上一代浏览器的基础上进一步缩减自身界面所占用的屏幕区域,将窗口及控件所占用的像素面积缩减到0,通过完全没有边框、没有按钮、没有输入栏的设计,整个浏览器窗口完全用于展示网页内容。正是凭借上述的诸多创新设计,全新HIT FM官网在IE 10中的运行效果仿佛本地应用程序一样流畅,并且沉浸式的界面也使得用户更加投入于音乐内容本身。

• 在实现流畅触控操作的同时也在视觉效果上加以提高:例如通过What’s Hot页面中的折页和News & Events中的视差效果,在拖动的过程中就给用户带来3D般的立体视觉感受,大大增强了交互体验。在以往的开发过程中,对于类似特效的实现较为困难,经常需要复杂的代码和效率较低的Flash插件来完成。得益于IE 10所拥有的硬件加速能力以及对于全新HTML5和CSS3标准的全面支持,网页工程师采用了CSS3中Transform和Transition变形处理来实现网站的过渡效果,给用户炫酷视觉体验的同时也拥有流畅和快速的加载性能。

• 利用HTML5标准及CSS3中的Media Query属性将页面实现响应式设计,从此整个版面可为屏幕和分辨率进行适配,向不同用户提供同样友好的Web界面,在降低开发成本的同时使得页面更具“弹性”,在页面布局不被破坏的前提下保证不同分辨率的用户都能得到最佳的浏览体验。

•为了进一步保证听众的收听持续性,相关工程师采用了HTML5网页标准中全新加入的History API特性,实现了全站AJAX,当用户在点击内容时,页面只会加载需要更新的内容而不会加载外层不变的框架,同时标题栏、地址栏以及前进后退等按钮也会发生相应变化,和整页刷新几无二致,这大大降低了移动数据网络下的用户流量消耗。整个过程都不会影响到后台Live Streaming的实时播放,有效提升听众的局部刷新体验。

优势:

正如微软IE部门企业副总裁迪恩·哈查莫维奇在MIX 11大会开场演讲时所说:“本地化的体验才是最好的体验。在Windows平台上通过IE 10的HTML5标准和硬件加速功能,使得浏览网页如同打开本地应用程序一样流畅。”作为HTML5网页标准的参与构建者之一,微软在全新的IE 10浏览器在全新HTML5网页标准下的运算处理能力,特别是当用户在进行高保真音频在线播放和网页游戏时,IE 10浏览器具备的强大渲染性能和处理速度前所未有地提升了用户体验。

作为微软Windows生态下的新一代浏览器,IE 10为诸如HIT FM一样的新生代Web应用提供了绝佳的展示平台,能够让Web App抛开其传统概念中表现力不足的短板,发挥统一化、跨平台的优势,与近年来持续火爆的本地移动应用程序一争高下。而随着互联网产品移动化的趋势越发明显,Web浏览器作为终端上重要的一环对移动产品有着重要的作用,配合新一代HTML5标准的普及,IE 10正凭借不断进化的技术追求,成为微软移动服务的重要支点。

相关 [开发 hit fm] 推荐:

开发者案例:HIT FM如何借助打造全新HTML5服务

- - WPDang
作为用于取代1999年所制定的 HTML4.01的下一代HTML标准版本,当前的HTML5标准正处于一个高速发展阶段. HTML5浪潮有两个最大特点:强化 Web 网页的表现性能,并追加本地数据库等Web应用下的功能特性,旨在通过减少浏览器对于需要插件(如Adobe Flash、Microsoft Silverlight等)的网络服务需求,提供更多能有效增强Web应用的标准集.

推荐应用:考拉FM

- - 牛B博客 niub.us
最初发现这款应用是在  不得姐的秘密  上的广告,一个为广大屌丝、腐女深夜解忧的app,我X,立即下载. 使用后我发现这是一款可以替代网易新闻客户端的应用,比如在每天早上起床,我都会打开考拉FM,播放头条快讯,了解当天的新闻热点. 晚上睡觉的时候就收听 考拉FM 的脱口秀节目,我比较喜欢大波脱口秀和 王钢蛋的二货一箩筐.

邀请你体验——新版豆瓣FM

- interjc - 豆瓣blog
两周前,新版豆瓣FM在部分用户中进行了小规模测试. 今天,我们正式开放新版的测试,邀请大家来体验. 新版豆瓣FM采用与原来完全不同的设计:. 我们期待新的设计能带给你全新的使用体验,更便捷的操作方式. 首先,新版豆瓣FM提供了全新的选择兆赫的方式. 它让私人兆赫和公共兆赫的入口直接暴露在页面上. 在新版豆瓣FM上,只需一次点击,你就能完成公共兆赫与私人兆赫之间切换;在公共兆赫下,只需要滚动鼠标,你就能遍历所有的公共兆赫.

NOKIA诺基亚1010手机(GSM双卡双待,MP3,FM),239元

- Paladin - 什么值得买
诺基亚的1系列一直都是诚意之作,最近上市的1010继续将这个传统发扬光大. GSM网络双卡双待,1.8英寸彩色大屏幕(大是相对的),支持TF扩展,支持MP3播放,支持FM收音,3.5mm耳机插孔,内置LED电筒,媲美山寨机的音量,BL-5C电池(1020mah)待机高达32天,红色/黑色双色可选,按键手感也非常不错.

豆瓣FM(离线播放):旅途听音乐必备的Android软件

- Carl.King - 够趣堂
如今手机在线听音乐已经不稀奇,相关软件层出不穷,不过谁又能不Care流量计费. 之前手机装载了豆瓣FM软件,每次都会找着WIFI才会听歌曲,很是纠结. 不过最近豆瓣FM(Android)推出了红心兆赫,通过该频道可以收听收藏的红心歌曲,在同步完成后,离线也能收听了. 这个是多么令人兴奋的消息,旅途中不必再纠结流量问题,直接打开豆瓣FM红心兆赫离线收听自己喜欢的歌曲,还不赶快更新的豆瓣FM到最新的版本.

ラジオ第1・第2・NHK FMを聴ける公式iPhoneアプリ『NHKネットラジオ らじるらじる』

- @aka - Touch Lab - タッチ ラボ
NHKが、ラジオ放送をインターネット経由で聴くことができる無料のアプリ『NHKネットラジオ らじるらじる 』をApp Storeで公開しています. NHK第1・第2およびFM放送の3局の内容を、ほぼリアルタイムで配信し、いつでもどこでも楽しむことができます. NHKラジオのサイマル放送は、山間部や建物の多い場所などの難聴取地域での受信状況改善を目的とし、2011年9月からMac/PCのブラウザ向けにサービスを開始.

Android开发Tips

- - CSDN博客推荐文章
欢迎Follow我的 GitHub, 关注我的 CSDN.. 介绍一些, 在Android开发中, 会经常使用的小知识点.. submodule与git可以保持实时同步. 导入, 路径多于一个, 前面不添加冒号(:).. 使用PackageManager.. // 检查App是否安装 private boolean appInstalledOrNot(String uri) {.

WPS for Linux 开发中

- Quantum - Wow! Ubuntu
据消息称,WPS for Linux 办公套件目前正在开发中,如图:. # 本文采用CC协议进行授权,转载本文请注明本文链接. - Twitter / 微博 / 问答 / 投稿 / 加入我们 wow0slx6bcs721xo1udcc. - 高性价比 Ubuntu VPS / 本站架设于 PhotonVPS / 定制 Ubuntu T-Shirt.

开发笔记(1)

- liuce.cn - 云风的 BLOG
折腾了好久,终于可以开始正式项目开发了. 之前的这段日子,我们陷落在公司的股权分配问题中,纠结于到底需要几个人到位才启动;更是反复讨论,到底应该做个怎样的游戏. 林林总总,终于,在已经到位的几位同学的摩拳擦掌中,叮当决定自己挂帅开始干了. 就这么不到十个人,空旷的办公室,跟我们起先想像的情况不太一样.

iOS开发资源

- - Starming星光社最新更新
iOS App UI 欣赏、分享精美的App界面设计. iOS代码实例搜索、iOS特效示例、iOS代码例子下载. 以web的形式提供iOS UI设计的素材,你可以在web上拖动一些控件做出简单的ios 应用效果,并且生成一个URL,能分享给其他人. 一款 Photoshop 插件,由 UI Parade 推出的一款针对iOS UI 的设计工具,设计师动动鼠标即可制作精美的 iOS 应用原型.