淺談HTML5技術在新媒體上的應用

□劉子揚

?

淺談HTML5技術在新媒體上的應用

□劉子揚

摘要：互聯網的進一步發展，將新聞傳播從以前單純的平面文字圖片傳播，轉變為文字及多種媒體形式共同傳播，新聞傳播的形式更為多樣，用戶的互動積極性更高，傳播速度也更快。隨著移動互聯網的到來，一種新的技術標準——HTML5出現了。新技術的出現，將給網民帶來更為豐富的互聯網體驗，主要體現在：新媒體的終端便攜性，表現的形式更為豐富，用戶在移動數據流量下也能快速打開。

關鍵詞：新聞傳播；HTML5；互聯網體驗

一、什么是HTML5

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

二、HTML5的優勢

（一）響應式設計，可實時修改

傳統網站，企業中的個人是沒法用公司的網站的，因為它的管理者是網管；App的開發周期長、成本高，升級更新工作量大；傳統視頻TVC有制作周期長，不方便修改，不能互動的缺點；而更前沿的交互式視頻，虛擬現實和增強現實VR/AR技術，由于尚未普及、成本高、制作周期長，即使是樣板實踐，也鮮有成果。而較之于上述內容載體形式，一個HTML5，平均3-5天就能完成，更為輕便，即便需要定制，一般1-2周左右就能搞定，還能實時修改。

（二）跨操作系統，不受操作系統和瀏覽器限制

PC瀏覽網絡信息依靠瀏覽器，所以我們有超級入口百度、Google。當我們在移動設備瀏覽網絡信息時，各種場景下使用的App都可以是HTML5的介質。用HTML5制作內容，除了目前主流瀏覽器都支持的大好環境之外，也可以不用瀏覽器去瀏覽，突破瀏覽器的限制。

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

（三）跨平臺特性

大家經常在微信里看到像幻燈片一樣的很炫酷的邀請函、宣傳冊等，就是用HTML5做的。建站、產品介紹、招聘、邀請函、活動報名……可以說，H5涵蓋了所有基于移動社交商務場景中的內容載體形式。PC時代的網頁能做什么，HTML5在移動端就能做什么。

三、HTML5的技術特點

HTML5的優勢目前主要體現在終端上，它具有以下技術特點。

（一）圖片內容盡量使用PNG的網絡圖片格式，可以保證圖片的質量，同時又使得圖片的大小控制在一定范圍以內，適合網絡傳播。

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

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

四、HTML5的新媒體基因

由社會科學文獻出版社出版的《中國新媒體發展報告（2015）》的發布，標志著新媒體發展成為國家戰略、媒體發展進入新階段。在這一戰略布局下，中國成為移動互聯網大國，微傳播正成為一種主流傳播方式，各種自媒體發展迅速，媒體融合轉型加快。

隨著互聯網的發展，新媒體日漸成為人們獲取信息和新聞消息的主要來源之一。微軟首席執行官史蒂夫·鮑爾默預測：“今后10年內，所有媒體消費都將通過互聯網渠道進行。屆時，傳統意義上的印刷版報紙、雜志將不復存在，所有東西都將以電子版的形式發行。”

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

統一、易于試錯和改善、可擴展性強——HTML5的這些技術特點無疑非常適合媒體等內容服務商，尤其是傳統媒體移動化。

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

其實HTML5的優勢可以用兩句話概括：一是跨平臺，二是開發簡單，憑這兩個優勢，HTML5有能力成為新媒體的傳播利器。

五、HTML5在新媒體上的運用實例

在這里，筆者以2015年端午節前夕玉林日報社基于HTML5技術，以玉林美食文化為背景，制作的一個場景式的小畫報為例，使用數據來說明HTML5在新型網絡下的傳播優勢。

背景主題：玉林飲食文化

表現形式：手機端場景式

風格：中國風

標題：這才是老玉林的味道

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

（一）圖片內容盡量使用PNG的網絡圖片格式，從而保證的圖片的質量，同時又使得圖片的大小控制在一定范圍以內，適合網絡傳播。

（二）頁面加載的時候，通過預加載技術，同時判斷用戶手機屏幕尺寸，獲取屏幕尺寸大小后，再自動進行拉伸，從而保證了用戶的屏幕打開時，頁面的內容是全屏顯示，從而使得整個頁面滿屏展示，在不同的手機端展示出的效果實現一致。

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

六、效果反饋

經過多個手機客戶端和不同的網絡環境測試，作品均達到了預期的效果。該畫刊發布在玉林日報的微信公眾平臺，18時發布后，截至當晚22時，瀏覽人數就接近16000人，1000多人進行了分享，達到了令人滿意的效果。在微信公眾號的后臺中，我們看到了很多訪問者對該畫刊的好評。

本次做的畫刊，僅僅是一個小小的嘗試，但是經過數據比對可以發現，現在的讀者對于HTML5的傳播模式更為接受，只要覺得具有分享傳播價值的資訊，讀者會在自己的群體中進行分享。

（作者單位：玉林日報社）