快訊

微軟IE 10與HIT FM 打造全新HTML5官網(wǎng)

2013-06-26 17:10  出處:pconline 原創(chuàng)  作者:佚名   責(zé)任編輯:wuweilong 

  作為用于取代1999年所制定的 HTML4.01的下一代HTML標(biāo)準(zhǔn)版本,當(dāng)前的HTML5標(biāo)準(zhǔn)正處于一個(gè)高速發(fā)展階段。HTML5浪潮有兩個(gè)最大特點(diǎn):強(qiáng)化 Web 網(wǎng)頁(yè)的表現(xiàn)性能,并追加本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用下的功能特性,旨在通過(guò)減少瀏覽器對(duì)于需要插件(如Adobe Flash、Microsoft Silverlight等)的網(wǎng)絡(luò)服務(wù)需求,提供更多能有效增強(qiáng)Web應(yīng)用的標(biāo)準(zhǔn)集。

IE10
圖1

  HIT FM勁曲調(diào)頻,作為IE 10瀏覽器的深度合作伙伴之一,繼2003年4月開始在北京試播后,于隨后的十年內(nèi)陸續(xù)落地廣州、上海、重慶、南京、天津等城市,作為國(guó)內(nèi)唯一一家全天候播出的國(guó)際流行音樂(lè)頻率,已經(jīng)成為都市時(shí)尚人群生活中不可或缺的音樂(lè)伴侶。 現(xiàn)在,伴隨著采用新一代HTML5網(wǎng)頁(yè)標(biāo)準(zhǔn)打造的全新官網(wǎng)正式上線,實(shí)現(xiàn)了包括Live Streaming實(shí)時(shí)收聽(tīng)、折頁(yè)P(yáng)arallax視覺(jué)效果,以及為觸控而生的沉浸式界面等在內(nèi)的一系列炫酷特性。

  對(duì)此,HIT FM頻率總監(jiān)趙健談到:“在當(dāng)下這個(gè)音樂(lè)早已被人們視為同空氣、飲水一樣重要的時(shí)代,我們急切地需要一個(gè)合適的平臺(tái),讓HIT FM官網(wǎng)能夠發(fā)揮出自身的特色與優(yōu)勢(shì),將其從簡(jiǎn)單的功能和千篇一律的設(shè)計(jì)中解放出來(lái),給600萬(wàn)聽(tīng)眾眼前一亮的感覺(jué),以進(jìn)一步完善網(wǎng)絡(luò)瀏覽器下的電臺(tái)收聽(tīng)體驗(yàn)。”

  挑戰(zhàn):

  早先的HIT FM官網(wǎng)設(shè)計(jì)單調(diào),功能性較為單一,響應(yīng)效率較低,已經(jīng)無(wú)法同HIT FM一直以來(lái)動(dòng)感、時(shí)尚、與國(guó)際接軌的品牌形象定位相匹配。

  面對(duì)幾乎成為標(biāo)配的多點(diǎn)觸控屏幕和隨之而來(lái)的觸控體驗(yàn)需求,全新的HIT FM官網(wǎng)需要從設(shè)計(jì)上就充分考慮到針對(duì)用戶觸控操作的優(yōu)化。

  在如今設(shè)備分辨率異常混亂的大環(huán)境下,除傳統(tǒng)的臺(tái)式電腦外,越來(lái)越多的用戶開始使用智能手機(jī)、平板電腦等移動(dòng)設(shè)備來(lái)瀏覽網(wǎng)頁(yè),傳統(tǒng)固定樣式的頁(yè)面已經(jīng)不能應(yīng)付此類需求。

  解決方案:

IE10
圖2

  借力于全新的IE 10瀏覽器中對(duì)HTML5標(biāo)準(zhǔn)和硬件加速功能的全面支持,改版后的官網(wǎng)只需要128Kbps的極小帶寬就可以進(jìn)行在線收聽(tīng),且相關(guān)軟件工程師們通過(guò)將MMS流媒體經(jīng)過(guò)轉(zhuǎn)換成為HTML5支持的音頻流媒體格式,并使用HTML5支持的<Audio>標(biāo)簽實(shí)現(xiàn)無(wú)插件播放功能,使得聽(tīng)眾在不需要任何瀏覽器插件的條件下即可在IE 10、Safari、Chrome、Firefox等主流桌面或移動(dòng)平臺(tái)瀏覽器上收聽(tīng),解決了以在線收聽(tīng)廣播電臺(tái)必須使用WMP插件的問(wèn)題。

IE10
圖3

  針對(duì)觸控操作的優(yōu)化不僅表現(xiàn)在整個(gè)頁(yè)面上多采用高清大圖和大尺寸圖標(biāo),還在一些滑動(dòng)操作和特效的展現(xiàn)上都進(jìn)行充分地考量,并針對(duì)來(lái)自不同設(shè)備(智能手機(jī)、平板電腦、超極本)的訪問(wèn)逐一優(yōu)化,以保證不同用戶的統(tǒng)一化完美觸控體驗(yàn)。同時(shí),IE 10在上一代瀏覽器的基礎(chǔ)上進(jìn)一步縮減自身界面所占用的屏幕區(qū)域,將窗口及控件所占用的像素面積縮減到0,通過(guò)完全沒(méi)有邊框、沒(méi)有按鈕、沒(méi)有輸入欄的設(shè)計(jì),整個(gè)瀏覽器窗口完全用于展示網(wǎng)頁(yè)內(nèi)容。正是憑借上述的諸多創(chuàng)新設(shè)計(jì),全新HIT FM官網(wǎng)在IE 10中的運(yùn)行效果仿佛本地應(yīng)用程序一樣流暢,并且沉浸式的界面也使得用戶更加投入于音樂(lè)內(nèi)容本身。

IE10
圖4

  在實(shí)現(xiàn)流暢觸控操作的同時(shí)也在視覺(jué)效果上加以提高:例如通過(guò)What’s Hot頁(yè)面中的折頁(yè)和News & Events中的視差效果,在拖動(dòng)的過(guò)程中就給用戶帶來(lái)3D般的立體視覺(jué)感受,大大增強(qiáng)了交互體驗(yàn)。在以往的開發(fā)過(guò)程中,對(duì)于類似特效的實(shí)現(xiàn)較為困難,經(jīng)常需要復(fù)雜的代碼和效率較低的Flash插件來(lái)完成。得益于IE 10所擁有的硬件加速能力以及對(duì)于全新HTML5和CSS3標(biāo)準(zhǔn)的全面支持,網(wǎng)頁(yè)工程師采用了CSS3中Transform和Transition變形處理來(lái)實(shí)現(xiàn)網(wǎng)站的過(guò)渡效果,給用戶炫酷視覺(jué)體驗(yàn)的同時(shí)也擁有流暢和快速的加載性能。

  利用HTML5標(biāo)準(zhǔn)及CSS3中的Media Query屬性將頁(yè)面實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),從此整個(gè)版面可為屏幕和分辨率進(jìn)行適配,向不同用戶提供同樣友好的Web界面,在降低開發(fā)成本的同時(shí)使得頁(yè)面更具“彈性”,在頁(yè)面布局不被破壞的前提下保證不同分辨率的用戶都能得到最佳的瀏覽體驗(yàn)。

IE10
圖5

  為了進(jìn)一步保證聽(tīng)眾的收聽(tīng)持續(xù)性,相關(guān)工程師采用了HTML5網(wǎng)頁(yè)標(biāo)準(zhǔn)中全新加入的History API特性,實(shí)現(xiàn)了全站AJAX,當(dāng)用戶在點(diǎn)擊內(nèi)容時(shí),頁(yè)面只會(huì)加載需要更新的內(nèi)容而不會(huì)加載外層不變的框架,同時(shí)標(biāo)題欄、地址欄以及前進(jìn)后退等按鈕也會(huì)發(fā)生相應(yīng)變化,和整頁(yè)刷新幾無(wú)二致,這大大降低了移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)下的用戶流量消耗。整個(gè)過(guò)程都不會(huì)影響到后臺(tái)Live Streaming的實(shí)時(shí)播放,有效提升聽(tīng)眾的局部刷新體驗(yàn)。

  優(yōu)勢(shì):

  正如微軟IE部門企業(yè)副總裁迪恩·哈查莫維奇在MIX 11大會(huì)開場(chǎng)演講時(shí)所說(shuō):“本地化的體驗(yàn)才是最好的體驗(yàn)。在Windows平臺(tái)上通過(guò)IE 10的HTML5標(biāo)準(zhǔn)和硬件加速功能,使得瀏覽網(wǎng)頁(yè)如同打開本地應(yīng)用程序一樣流暢。”作為HTML5網(wǎng)頁(yè)標(biāo)準(zhǔn)的參與構(gòu)建者之一,微軟在全新的IE 10瀏覽器在全新HTML5網(wǎng)頁(yè)標(biāo)準(zhǔn)下的運(yùn)算處理能力,特別是當(dāng)用戶在進(jìn)行高保真音頻在線播放和網(wǎng)頁(yè)游戲時(shí),IE 10瀏覽器具備的強(qiáng)大渲染性能和處理速度前所未有地提升了用戶體驗(yàn)。

  作為微軟Windows生態(tài)下的新一代瀏覽器,IE 10為諸如HIT FM一樣的新生代Web應(yīng)用提供了絕佳的展示平臺(tái),能夠讓W(xué)eb App拋開其傳統(tǒng)概念中表現(xiàn)力不足的短板,發(fā)揮統(tǒng)一化、跨平臺(tái)的優(yōu)勢(shì),與近年來(lái)持續(xù)火爆的本地移動(dòng)應(yīng)用程序一爭(zhēng)高下。而隨著互聯(lián)網(wǎng)產(chǎn)品移動(dòng)化的趨勢(shì)越發(fā)明顯,Web瀏覽器作為終端上重要的一環(huán)對(duì)移動(dòng)產(chǎn)品有著重要的作用,配合新一代HTML5標(biāo)準(zhǔn)的普及,IE 10正憑借不斷進(jìn)化的技術(shù)追求,成為微軟移動(dòng)服務(wù)的重要支點(diǎn)。

IT熱詞搜索 來(lái)源:360新聞
軟件論壇帖子排行