淺談HTML5技術(shù)與新媒體應(yīng)用

文｜鄭紅

在發(fā)展速度日新月異的移動(dòng)端，HTML5更被認(rèn)為是移動(dòng)互聯(lián)網(wǎng)行業(yè)的未來(lái)希望之所在，它仿佛天生為移動(dòng)應(yīng)用而生，可以提供大部分現(xiàn)有需要插件和擴(kuò)展才能完成的功能，并且還具備Web數(shù)據(jù)存儲(chǔ)、離線數(shù)據(jù)存儲(chǔ)、圖像增強(qiáng)等新功能，這使完整支持HTML5的瀏覽器具有了更強(qiáng)的本地?cái)?shù)據(jù)處理能力，用戶可以不受各種系統(tǒng)平臺(tái)和軟件插件的限制，只需通過(guò)瀏覽器就可以運(yùn)行這些應(yīng)用，在講究更新、更快、更輕巧的無(wú)線新媒體領(lǐng)域，HTML5技術(shù)可謂風(fēng)光無(wú)二，今天我們就來(lái)聊聊它和新媒體應(yīng)用的那些事兒。

HTML5技術(shù)的移動(dòng)開發(fā)特性

在聯(lián)系到新媒體應(yīng)用之前，首先我們需要了解HTML5技術(shù)究竟先進(jìn)在哪里，相對(duì)傳統(tǒng)技術(shù)而言，它與新媒體平臺(tái)相結(jié)合的優(yōu)越性又體現(xiàn)在什么地方。簡(jiǎn)單來(lái)說(shuō)，我們可以從開發(fā)者的視角出發(fā)，將其特性歸納如下：

1、離線緩存可提供基礎(chǔ)保障

HTML5 Web Storage API可以看做是加強(qiáng)版的cookie，不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)，可以將數(shù)據(jù)寫入到本機(jī)的ROM中，還可以在關(guān)閉瀏覽器后再次打開時(shí)恢復(fù)數(shù)據(jù)，以減少網(wǎng)絡(luò)流量。同時(shí)不占用任何后臺(tái)資源，減輕設(shè)備硬件壓力，增加運(yùn)行流暢性。

2、音頻視頻可滿足自由嵌入

原生開發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩，需要拆分開文字、圖片、音頻、視頻，解析對(duì)應(yīng)的URL并分別用不同的方式處理。HTML5在這個(gè)方面完全不受限制，可以完全放在一起進(jìn)行處理，多媒體形式更加豐富靈活；

3、地理定位可實(shí)現(xiàn)優(yōu)勢(shì)放大

讓定位和導(dǎo)航不再專屬導(dǎo)航軟件，地圖也不用下載非常大的地圖包，可以通過(guò)緩存來(lái)解決，到哪兒下哪兒，更靈活?，F(xiàn)在嵌入LBS功能的應(yīng)用越來(lái)越多，這也是移動(dòng)設(shè)備與臺(tái)式PC相比最大的優(yōu)勢(shì)之一，HTML5能把這個(gè)優(yōu)勢(shì)再度擴(kuò)大化；

4、交互方式可獲得豐富支持

HTML5提供的交互方式是非常豐富的，如提升互動(dòng)能力：拖拽、撤銷歷史操作、文本選擇等：Transition組件的移動(dòng)效果、Transform組件的變形效果、Animation將移動(dòng)和變形加入動(dòng)畫支持…數(shù)不勝數(shù)；

5、視覺(jué)設(shè)計(jì)必備的輔助利器

CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動(dòng)畫功能，用它來(lái)完成部分視覺(jué)工作，載入速度快，節(jié)省代碼及圖片，也為用戶節(jié)約了帶寬。

6、開發(fā)維護(hù)可享受方便低耗

HTML5技術(shù)可以給你更低的開發(fā)及維護(hù)成本，它使頁(yè)面變得更小，減少了用戶不必要的支出；而且性能更好使，耗電量更低；對(duì)于用戶來(lái)說(shuō)更是方便升級(jí)，打開即可使用最新版本，免去重新下載升級(jí)包的麻煩，使用過(guò)程中就直接更新了離線緩存。

7、App開發(fā)實(shí)現(xiàn)雙平臺(tái)融合

依照目前IOS和Android系統(tǒng)市占率的情況來(lái)看，未來(lái)如果想要在應(yīng)用開發(fā)上有所建樹，要么選擇使用Objective-C+CocoaTouch Framework撰寫iPhone/iPad應(yīng)用程式，要么就是選擇Java+Android Framework 撰寫Android 應(yīng)用程式，如果想要同時(shí)滿足兩種平臺(tái)，勢(shì)必需要付出很大的運(yùn)維成本。而使用HTML5, CSS3 來(lái)撰寫Web-based的應(yīng)用程序，若要同時(shí)支撐IOS和Android系統(tǒng)只需維護(hù)一份程式碼，靈活性更強(qiáng)。

以上的特性僅是冰山一角，其實(shí)總結(jié)起來(lái)可以用兩句話概括：一是跨平臺(tái)，二是開發(fā)簡(jiǎn)單，憑這兩個(gè)殺手锏，就足以令時(shí)代傾心了，它讓HTML5技術(shù)成為了移動(dòng)互聯(lián)網(wǎng)時(shí)代寵兒，如果手機(jī)應(yīng)用開發(fā)者還在糾結(jié)于選擇Android還是蘋果IOS，而一個(gè)Web APP（HTLM5技術(shù)的典型代表產(chǎn)品）即可解決多款操作系統(tǒng)與瀏覽器，以及WAP與Web的兼容問(wèn)題，那么有何理由不選擇它呢？對(duì)于用戶來(lái)說(shuō)，無(wú)論看視頻還是玩游戲，都不再需要費(fèi)時(shí)費(fèi)力地用手機(jī)下載軟件，只需打開手機(jī)瀏覽器，就可以通過(guò)網(wǎng)頁(yè)得償所愿。

HTML5技術(shù)的新媒體基因

HTML5在移動(dòng)開發(fā)端的長(zhǎng)處誠(chéng)然霸氣十足，但僅是這樣還不夠，只有與目標(biāo)行業(yè)完美的融合，才能最大限度的發(fā)揮其特點(diǎn)，基于此，它與新媒體結(jié)合的契機(jī)又在哪里呢？

對(duì)于媒體本身而言，媒體服務(wù)并不具有排他性，通常情況下一家媒體所能提供的觀點(diǎn)、報(bào)道和服務(wù)內(nèi)容，其它一家媒體一般來(lái)說(shuō)也能做到。所以媒體服務(wù)的差異化在于媒體服務(wù)商的自我定位，各家媒體定位錯(cuò)開，有利于用戶將自己所需的內(nèi)容服務(wù)重新自由組合，這樣比試圖壟斷某個(gè)用戶群要靠譜得多。而這種趨勢(shì)從技術(shù)的角度出發(fā)，無(wú)疑是更靠近html5理念的。

html5由于適合跨平臺(tái)，可以為不同用戶在不同場(chǎng)景下提供無(wú)縫對(duì)接的內(nèi)容服務(wù)。在移動(dòng)互聯(lián)網(wǎng)上以瀏覽器為統(tǒng)一入口，利用html5將自身的內(nèi)容輸出能力轉(zhuǎn)化為流量變現(xiàn)能力和品牌影響力，要比傳統(tǒng)媒體自己的用戶互導(dǎo)以及隔離用戶群要靠譜得多，在這種傳統(tǒng)媒體移動(dòng)化的大時(shí)代背景下，鳳凰率先推出了全面html5化的移動(dòng)門戶首頁(yè)（3g.ifeng.com），并開發(fā)了多款基于HTML5技術(shù)的web app產(chǎn)品，這無(wú)疑是一種領(lǐng)先時(shí)代的嘗試，這種嘗試是新媒體下一步發(fā)展的杰出代表。

根據(jù)業(yè)界數(shù)據(jù)來(lái)看，在Html5技術(shù)的支撐下，目前各家新媒體來(lái)自移動(dòng)瀏覽器的流量均明顯呈上升趨勢(shì)，這證明了只要能夠滿足用戶需求，提升在移動(dòng)場(chǎng)景中的內(nèi)容使用體驗(yàn)，傳統(tǒng)門戶的市場(chǎng)依然不可小覷。這一事實(shí)對(duì)于傳統(tǒng)媒體人在新媒體市場(chǎng)注入了一劑強(qiáng)心針，其實(shí)，所謂的傳統(tǒng)媒體的“衰退”更像是一個(gè)偽命題，原因是傳統(tǒng)媒體并不太理解移動(dòng)互聯(lián)網(wǎng)時(shí)代的“用戶體驗(yàn)”，隨著HTML5技術(shù)與新媒體行業(yè)的融合，所有的內(nèi)容提供商都可以在移動(dòng)互聯(lián)網(wǎng)時(shí)代成為跨平臺(tái)的新媒體中心。這是html5技術(shù)投射到產(chǎn)業(yè)現(xiàn)狀中產(chǎn)生的最有意義的回饋，也是技術(shù)基因與媒體基因相融合的最完美體現(xiàn)。

HTML5技術(shù)的產(chǎn)品實(shí)例

介紹完HTML5技術(shù)的特點(diǎn)以及其與新媒體平臺(tái)的契合點(diǎn)之后，我們可以通過(guò)幾個(gè)實(shí)例來(lái)進(jìn)行更直觀的了解。

一般而言，我們?cè)趶V義的討論HTML5時(shí)，實(shí)際指的是Web App 相關(guān)技術(shù)的總稱，包括 HTML5、DOM API、CSS3、面向 Web App 的頁(yè)面設(shè)計(jì)模式等。所有這些工作大多都是圍繞著對(duì)瀏覽器的擴(kuò)展，希望能夠減少瀏覽器對(duì)于插件的依賴，提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。相對(duì)于其他應(yīng)用形態(tài)，Web App的核心優(yōu)勢(shì)有兩點(diǎn)：

一、開發(fā)模式的再次進(jìn)化（對(duì)復(fù)雜性的封裝），現(xiàn)在很多開發(fā)者都感覺(jué)到，原來(lái)必須要用客戶端技術(shù)去做的效果或者功能現(xiàn)在基本都可以通過(guò)Web App的相關(guān)技術(shù)實(shí)現(xiàn)了，通過(guò)這些簡(jiǎn)單的語(yǔ)言和配合，就能做到很酷炫的效果。

二、具有卓越的互聯(lián)互通特性，只需要一個(gè)鏈接就可以到達(dá)產(chǎn)品，對(duì)產(chǎn)品的推廣和營(yíng)銷都有很大的幫助。（過(guò)去兩三年里PC上網(wǎng)頁(yè)游戲的快速成長(zhǎng)便得益于此）。

目前在中國(guó)，對(duì)于web app支持程度最好的瀏覽器非UC瀏覽器及騰訊QQ瀏覽器莫屬，在這兩家平臺(tái)上已經(jīng)云集了數(shù)百款高質(zhì)量的web app 產(chǎn)品，這其中便不乏鳳凰新媒體的移動(dòng)“集團(tuán)軍”。如圖1、2、3所示。

通過(guò)以上實(shí)例，我們可以看到，基于HTML5技術(shù)的有力支持，用戶可以通過(guò)瀏覽器實(shí)現(xiàn)流暢的節(jié)目欣賞體驗(yàn)，點(diǎn)擊任意節(jié)目，即可立即調(diào)用播放器實(shí)現(xiàn)當(dāng)前實(shí)時(shí)播放，省去了傳統(tǒng)WAP冗余的跳轉(zhuǎn)流程。與用戶下載安裝到本地的鳳凰視頻客戶端相比，它在界面設(shè)計(jì)和內(nèi)容展現(xiàn)上都采用了更適合手機(jī)瀏覽器觀看的UI設(shè)計(jì)，同時(shí)，還解決了系統(tǒng)瀏覽器的播放限制，用戶無(wú)需安裝Flash插件，點(diǎn)擊相應(yīng)內(nèi)容即可調(diào)起鳳凰無(wú)線視頻進(jìn)行播放。

對(duì)于移動(dòng)端的視頻服務(wù)來(lái)說(shuō)，基于HTML5的Web化視頻呈現(xiàn)形式，除了能幫助用戶體驗(yàn)到優(yōu)質(zhì)的界面設(shè)計(jì)及流暢的操作體驗(yàn)之外，還能實(shí)現(xiàn)自動(dòng)續(xù)播功能等云視頻功能，輕松、方便、快捷，充分滿足了用戶的碎片化時(shí)間需求。

HTML5技術(shù)與新媒體的未來(lái)

講述過(guò)HTML5技術(shù)的種種美好前景之后，我們也必須要意識(shí)到，目前它并非已經(jīng)達(dá)到盡善盡美的地步，輝煌的期待背后，還有很多瓶頸需要它去一一克服，比如HTML5技術(shù)標(biāo)準(zhǔn)尚待統(tǒng)一和完善、比如與本地應(yīng)用相比，現(xiàn)階段HTML5的應(yīng)用性能一般相對(duì)較差、比如目前大多的HTML5應(yīng)用都部署在服務(wù)器側(cè)，對(duì)于手機(jī)經(jīng)常出現(xiàn)網(wǎng)絡(luò)狀況不穩(wěn)定情況，影響應(yīng)用的完整性、穩(wěn)定性、可用性、比如目前專門針對(duì)HTML5應(yīng)用的設(shè)計(jì)開發(fā)工具還很少…林林總總，不一而足。

雖然現(xiàn)在的HTML5的確存在不少問(wèn)題，但它就好比一個(gè)初生的嬰兒，雖然他現(xiàn)在尚不可屹立，亦不能奔跑，但誰(shuí)又能據(jù)此推斷他以后不能成為一名飛人呢？縱觀當(dāng)今互聯(lián)網(wǎng)的發(fā)展歷史，有多少偉大傲人的技術(shù)革命不是在人們肯定與質(zhì)疑的較量聲中發(fā)展成熟，改變歷史的呢？事實(shí)上，越來(lái)越多的世界行業(yè)巨頭正不斷向HTML5靠攏，除了蘋果、微軟、黑莓之外，谷歌的Youtube已部分使用HTML5，Chrome瀏覽器也已宣布全面支持HTML5，眾所周知，F(xiàn)acebook更是傾其全力的以HTML5為陣地進(jìn)行著移動(dòng)端的革命。

我們有理由相信，在這場(chǎng)席卷全球的技術(shù)革命中，中國(guó)的行業(yè)先驅(qū)與新媒體巨頭們亦不會(huì)落后，移動(dòng)互聯(lián)網(wǎng)時(shí)代大幕下，盛筵已經(jīng)開始。

未來(lái)，為你而來(lái)！