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

□劉子揚(yáng)

?

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

□劉子揚(yáng)

摘要：互聯(lián)網(wǎng)的進(jìn)一步發(fā)展，將新聞傳播從以前單純的平面文字圖片傳播，轉(zhuǎn)變?yōu)槲淖旨岸喾N媒體形式共同傳播，新聞傳播的形式更為多樣，用戶的互動(dòng)積極性更高，傳播速度也更快。隨著移動(dòng)互聯(lián)網(wǎng)的到來，一種新的技術(shù)標(biāo)準(zhǔn)——HTML5出現(xiàn)了。新技術(shù)的出現(xiàn)，將給網(wǎng)民帶來更為豐富的互聯(lián)網(wǎng)體驗(yàn)，主要體現(xiàn)在：新媒體的終端便攜性，表現(xiàn)的形式更為豐富，用戶在移動(dòng)數(shù)據(jù)流量下也能快速打開。

關(guān)鍵詞：新聞傳播；HTML5；互聯(lián)網(wǎng)體驗(yàn)

一、什么是HTML5

HTML也叫超文本標(biāo)記語(yǔ)言，它的出現(xiàn)是為“網(wǎng)頁(yè)創(chuàng)建和其它可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語(yǔ)言。2012年12月17日，HTML5正式發(fā)布，以往的落后的技術(shù)無(wú)法滿足我們的需求，隨著HTML5的出現(xiàn)，頁(yè)面可直接播放多媒體元素，無(wú)須第三方的插件支持，Web屬性帶來的跨平臺(tái)能力，可以一次開發(fā)，各系統(tǒng)各終端普遍適用，滿足跨平臺(tái)的需求。

二、HTML5的優(yōu)勢(shì)

（一）響應(yīng)式設(shè)計(jì)，可實(shí)時(shí)修改

傳統(tǒng)網(wǎng)站，企業(yè)中的個(gè)人是沒法用公司的網(wǎng)站的，因?yàn)樗墓芾碚呤蔷W(wǎng)管；App的開發(fā)周期長(zhǎng)、成本高，升級(jí)更新工作量大；傳統(tǒng)視頻TVC有制作周期長(zhǎng)，不方便修改，不能互動(dòng)的缺點(diǎn)；而更前沿的交互式視頻，虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)VR/AR技術(shù)，由于尚未普及、成本高、制作周期長(zhǎng)，即使是樣板實(shí)踐，也鮮有成果。而較之于上述內(nèi)容載體形式，一個(gè)HTML5，平均3-5天就能完成，更為輕便，即便需要定制，一般1-2周左右就能搞定，還能實(shí)時(shí)修改。

（二）跨操作系統(tǒng)，不受操作系統(tǒng)和瀏覽器限制

PC瀏覽網(wǎng)絡(luò)信息依靠瀏覽器，所以我們有超級(jí)入口百度、Google。當(dāng)我們?cè)谝苿?dòng)設(shè)備瀏覽網(wǎng)絡(luò)信息時(shí)，各種場(chǎng)景下使用的App都可以是HTML5的介質(zhì)。用HTML5制作內(nèi)容，除了目前主流瀏覽器都支持的大好環(huán)境之外，也可以不用瀏覽器去瀏覽，突破瀏覽器的限制。

微信、微博、天貓、京東、新聞客戶端，所有支持Web view的App都可以很完美地使用HTML5技術(shù)。尤其是微信給了HTML5最好的支撐，H5成了最佳的移動(dòng)端創(chuàng)意內(nèi)容承載形式。

（三）跨平臺(tái)特性

大家經(jīng)常在微信里看到像幻燈片一樣的很炫酷的邀請(qǐng)函、宣傳冊(cè)等，就是用HTML5做的。建站、產(chǎn)品介紹、招聘、邀請(qǐng)函、活動(dòng)報(bào)名……可以說，H5涵蓋了所有基于移動(dòng)社交商務(wù)場(chǎng)景中的內(nèi)容載體形式。PC時(shí)代的網(wǎng)頁(yè)能做什么，HTML5在移動(dòng)端就能做什么。

三、HTML5的技術(shù)特點(diǎn)

HTML5的優(yōu)勢(shì)目前主要體現(xiàn)在終端上，它具有以下技術(shù)特點(diǎn)。

（一）圖片內(nèi)容盡量使用PNG的網(wǎng)絡(luò)圖片格式，可以保證圖片的質(zhì)量，同時(shí)又使得圖片的大小控制在一定范圍以內(nèi)，適合網(wǎng)絡(luò)傳播。

（二）頁(yè)面加載的時(shí)候，通過預(yù)加載技術(shù)，同時(shí)判斷用戶手機(jī)屏幕尺寸，獲取屏幕尺寸大小后，再自動(dòng)進(jìn)行拉伸，從而保證了用戶的屏幕打開時(shí)，頁(yè)面的內(nèi)容是全屏顯示，從而使得整個(gè)頁(yè)面滿屏展示，在不同的手機(jī)端展示效果一致。

（三）在以往的動(dòng)畫實(shí)現(xiàn)過程中，我們都需要加裝一個(gè)叫FLASH的插件，但是HTML5技術(shù)提供了良好的交互接口，通過判斷用戶行為，實(shí)現(xiàn)了頁(yè)面的翻動(dòng)。由于考慮到用戶的閱讀速度和理解內(nèi)容的時(shí)間都各有差異，雖然使用了預(yù)加載圖片等技術(shù)，但在用戶打開頁(yè)面時(shí)，HTML5仍然將頁(yè)面的翻動(dòng)時(shí)間決定權(quán)留給客戶，如同翻動(dòng)紙質(zhì)媒體一樣，營(yíng)造良好的互動(dòng)翻書效果。

四、HTML5的新媒體基因

由社會(huì)科學(xué)文獻(xiàn)出版社出版的《中國(guó)新媒體發(fā)展報(bào)告（2015）》的發(fā)布，標(biāo)志著新媒體發(fā)展成為國(guó)家戰(zhàn)略、媒體發(fā)展進(jìn)入新階段。在這一戰(zhàn)略布局下，中國(guó)成為移動(dòng)互聯(lián)網(wǎng)大國(guó)，微傳播正成為一種主流傳播方式，各種自媒體發(fā)展迅速，媒體融合轉(zhuǎn)型加快。

隨著互聯(lián)網(wǎng)的發(fā)展，新媒體日漸成為人們獲取信息和新聞消息的主要來源之一。微軟首席執(zhí)行官史蒂夫·鮑爾默預(yù)測(cè)：“今后10年內(nèi)，所有媒體消費(fèi)都將通過互聯(lián)網(wǎng)渠道進(jìn)行。屆時(shí)，傳統(tǒng)意義上的印刷版報(bào)紙、雜志將不復(fù)存在，所有東西都將以電子版的形式發(fā)行?！?/p>

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

統(tǒng)一、易于試錯(cuò)和改善、可擴(kuò)展性強(qiáng)——HTML5的這些技術(shù)特點(diǎn)無(wú)疑非常適合媒體等內(nèi)容服務(wù)商，尤其是傳統(tǒng)媒體移動(dòng)化。

HTML5可以為不同用戶在不同場(chǎng)景下提供無(wú)縫對(duì)接的內(nèi)容服務(wù)。在不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)情況下，還可以將數(shù)據(jù)寫入到本機(jī)的ROM中，也可以在關(guān)閉瀏覽器后再次打開時(shí)恢復(fù)數(shù)據(jù)，減少網(wǎng)絡(luò)流量。同時(shí)不占用任何后臺(tái)資源，減輕設(shè)備硬件壓力，增加運(yùn)行流暢性。原生開發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩，需要拆分開文字、圖片、音頻、視頻，解析對(duì)應(yīng)的URL并分別用不同的方式處理。HTML5在這個(gè)方面完全不受限制，音頻視頻可滿足自由嵌入，可以完全放在一起進(jìn)行處理，多媒體形式更加豐富靈活。HTML5技術(shù)的開發(fā)及維護(hù)成本很低，它使頁(yè)面變得很小，減少了用戶不必要的支出；而且性能好使，耗電量低；對(duì)于用戶來說，可以免去下載升級(jí)的麻煩，打開即可使用最新版本，使用過程中就直接更新了離線緩存。

其實(shí)HTML5的優(yōu)勢(shì)可以用兩句話概括：一是跨平臺(tái)，二是開發(fā)簡(jiǎn)單，憑這兩個(gè)優(yōu)勢(shì)，HTML5有能力成為新媒體的傳播利器。

五、HTML5在新媒體上的運(yùn)用實(shí)例

在這里，筆者以2015年端午節(jié)前夕玉林日?qǐng)?bào)社基于HTML5技術(shù)，以玉林美食文化為背景，制作的一個(gè)場(chǎng)景式的小畫報(bào)為例，使用數(shù)據(jù)來說明HTML5在新型網(wǎng)絡(luò)下的傳播優(yōu)勢(shì)。

背景主題：玉林飲食文化

表現(xiàn)形式：手機(jī)端場(chǎng)景式

風(fēng)格：中國(guó)風(fēng)

標(biāo)題：這才是老玉林的味道

制作思路：通過充滿中國(guó)風(fēng)的毛筆字，書寫一首童謠，引出內(nèi)容，每隔一秒輸出下一行，待全部的內(nèi)容顯示完成后，停留三秒鐘，主題“這才是老玉林的味道”緩緩顯示，配合背景音樂，整個(gè)動(dòng)畫感瞬間展示出來。當(dāng)首個(gè)場(chǎng)景加載完畢后，用戶需要通過手指進(jìn)行屏幕滑動(dòng)，展示出下一個(gè)頁(yè)面內(nèi)容，提高了參與度和積極性。在內(nèi)容編排方面，也盡量在一個(gè)頁(yè)面內(nèi)將一個(gè)小章節(jié)的內(nèi)容展現(xiàn)出來。同時(shí)，在制作過程中，一方面要考慮用戶的打開速度問題，另一方面又要考慮用戶手機(jī)屏幕尺寸不同的問題。為此，主要做了以下的優(yōu)化：

（一）圖片內(nèi)容盡量使用PNG的網(wǎng)絡(luò)圖片格式，從而保證的圖片的質(zhì)量，同時(shí)又使得圖片的大小控制在一定范圍以內(nèi)，適合網(wǎng)絡(luò)傳播。

（二）頁(yè)面加載的時(shí)候，通過預(yù)加載技術(shù)，同時(shí)判斷用戶手機(jī)屏幕尺寸，獲取屏幕尺寸大小后，再自動(dòng)進(jìn)行拉伸，從而保證了用戶的屏幕打開時(shí)，頁(yè)面的內(nèi)容是全屏顯示，從而使得整個(gè)頁(yè)面滿屏展示，在不同的手機(jī)端展示出的效果實(shí)現(xiàn)一致。

（三）在以往的動(dòng)畫實(shí)現(xiàn)過程中，我們都需要加裝一個(gè)叫FLASH的插件來實(shí)現(xiàn)，但是在HTML5的技術(shù)下提供了良好的交互接口，通過判斷用戶行為，實(shí)現(xiàn)了頁(yè)面的翻動(dòng)。一方面由于網(wǎng)絡(luò)的因素，雖然使用了預(yù)加載圖片等技術(shù)，但是由于用戶的閱讀速度和理解內(nèi)容的時(shí)間都各有差異，因此，用戶在打開頁(yè)面時(shí)，將頁(yè)面的翻動(dòng)時(shí)間決定權(quán)留給客戶，如同翻動(dòng)紙質(zhì)媒體一樣，得到了良好的互動(dòng)翻書效果。

六、效果反饋

經(jīng)過多個(gè)手機(jī)客戶端和不同的網(wǎng)絡(luò)環(huán)境測(cè)試，作品均達(dá)到了預(yù)期的效果。該畫刊發(fā)布在玉林日?qǐng)?bào)的微信公眾平臺(tái)，18時(shí)發(fā)布后，截至當(dāng)晚22時(shí)，瀏覽人數(shù)就接近16000人，1000多人進(jìn)行了分享，達(dá)到了令人滿意的效果。在微信公眾號(hào)的后臺(tái)中，我們看到了很多訪問者對(duì)該畫刊的好評(píng)。

本次做的畫刊，僅僅是一個(gè)小小的嘗試，但是經(jīng)過數(shù)據(jù)比對(duì)可以發(fā)現(xiàn)，現(xiàn)在的讀者對(duì)于HTML5的傳播模式更為接受，只要覺得具有分享傳播價(jià)值的資訊，讀者會(huì)在自己的群體中進(jìn)行分享。

（作者單位：玉林日?qǐng)?bào)社）