2016年會成為HTML5的中國年嗎?

近日,H5研究院發(fā)布《2015年中國HTML5行業(yè)發(fā)展報告》。本文截取報告主要內(nèi)容,解答三個問題:為什么是HTML5?不同HTML5平臺的本質(zhì)區(qū)別是什么?今年HTML5行業(yè)有哪四大發(fā)展趨勢?

一、引言

2014年下半年,微信幫助捧火了HTML5小游戲,自此國內(nèi)各行各業(yè)開始對HTML5保持持續(xù)高漲的關(guān)注。接著的2015年是國內(nèi)HTML5行業(yè)迅速發(fā)展的一年,在媒體大肆渲染“互聯(lián)網(wǎng)寒冬”之際,HTML5作品的生產(chǎn)數(shù)量和傳播廣度卻居高不下,為寒冬增添一把柴火。

根據(jù)百度指數(shù)對關(guān)鍵詞“HTML5”搜索趨勢結(jié)果,2015年“HTML5”的指數(shù)約是2014年的1.5倍;而HTML5的簡單說法“H5”在2015年的檢索量是前一年的2倍多,直逼“HTML5”。

百度指數(shù)2014-2015年“HTML5”搜索趨勢

2015年,國內(nèi)HTML5的傳播仍以移動端為主,但簡單的翻頁這種低層次的設(shè)計已經(jīng)不再適應(yīng)大部分受眾的需求,HTML5平臺也開始由簡單的工具應(yīng)用逐步轉(zhuǎn)型。其中,發(fā)展得比較快的是面向商企用戶的iH5,自主研發(fā)引擎,并于2015年年底添加即時通訊功能和線上交易機制。

為什么是HTML5?

二、Web應(yīng)用開發(fā)新標準

HTML5,第五版超文本標記語言,于2014年10月由萬維網(wǎng)聯(lián)盟(W3C)發(fā)布為正式推薦標準。它是HTML自1991年問世以來,最具變革價值的技術(shù)規(guī)范,歷經(jīng)多年修訂與完善才制定完成。

過去,Web開發(fā)面臨兩種困境:

(1)不少人質(zhì)疑Flash的安全性等問題,卻找不到替代它的合適插件;

(2)工程師們抱怨PC端和移動端應(yīng)用的多次開發(fā),仍舊得為微軟、蘋果、安卓等系統(tǒng)設(shè)計不同方案。

而HTML5提供了良好的解決方案。與JavaScript、CSS等緊密結(jié)合后,HTML5能使瀏覽器不需要類似Flash的插件也能實現(xiàn)桌面應(yīng)用的交互效果,它的跨平臺可用性更令應(yīng)用的一次開發(fā)成為可能。

Youtube在網(wǎng)頁中使用HTML5技術(shù)實現(xiàn)視頻播放

如上圖,Youtube使用HTML5的video元素進行標記后,網(wǎng)頁不需要第三方插件就能播放音視頻等。HTML5的興起具有非常深遠的意義,它已經(jīng)從簡單的標記語言化身為Web應(yīng)用開發(fā)的先驅(qū)。

三、HTML5應(yīng)用現(xiàn)狀

從硬件角度來看,國內(nèi)手機和平板兩種移動設(shè)備應(yīng)用最廣,PC端次之,緊接著是電視和游戲設(shè)備。

從軟件角度來看,桌面瀏覽器對HTML5的支持高于移動瀏覽器,最高可達95%;而從整體上而言,移動瀏覽器對HTML5的支持卻優(yōu)于桌面瀏覽器。

HTML5具有較好的瀏覽器向后兼容性,開發(fā)者能對瀏覽器不支持的情形設(shè)計各種各樣的回退方案。因此,HTML5頁面的實際顯示性能與開發(fā)者、制作平臺密切相關(guān)。

2015年,越來越多公司在HTML5品牌推廣上進行布局。6至7月份起,雞湯、自媒體等個人作品呈下降趨勢,商企用戶作品則保持高速增長。在商業(yè)需求的驅(qū)動下,HTML5頁面設(shè)計的目的性更強,獲得最好傳播效果的基本是經(jīng)過一定時間策劃,在團隊操作下有針對性地進行投放的企業(yè)案例。

相對應(yīng)地,原有HTML5平臺也進行了大面積升級。從平臺性質(zhì)而言,HTML5平臺可分為輕營銷模板類、功能引擎類和基礎(chǔ)工具類三種,分別以易企秀、白鷺引擎和iH5為代表。

2015年傳播度較廣的三個HTML5作品,分別是杜蕾斯展館、吳亦凡入伍和網(wǎng)易娛樂頭條

三類HTML5平臺的特點如下——

(1)輕營銷模板類:提供類似PPT頁面切換的HTML5制作工具,通常面向C端(個人)用戶,部分為B端(企業(yè))用戶。該類平臺的數(shù)量較大,只適用于輕度營銷,所能提供的頁面動態(tài)效果局限于翻頁。

(2)功能引擎類:提供HTML5網(wǎng)頁的開發(fā)引擎,通常面向B端用戶。該類平臺主要提供基于Canvas(畫布)的游戲引擎,適用于輕游戲的開發(fā),依賴于開發(fā)者。

(3)基礎(chǔ)工具類:提供用于頁面交互的HTML5可視化編輯工具,主要面向B端用戶,部分為C端用戶。該類平臺只有iH5,采用自主研發(fā)的閉源引擎,應(yīng)用領(lǐng)域廣泛,涵蓋輕度營銷、重度營銷、媒體電商內(nèi)容應(yīng)用、視頻、動畫、游戲等方面。

與瀏覽器多采用谷歌開源引擎的狀況相近,國內(nèi)HTML5平臺基本使用國內(nèi)外開源框架或引擎。但和瀏覽器面向網(wǎng)頁內(nèi)容顯示,只需提供高性能的技術(shù)支持不同,HTML5平臺面向的是HTML5制作或開發(fā),需要對網(wǎng)頁質(zhì)量負責(zé)。因此,使用開源框架或引擎意味著這些HTML5平臺進一步拓展業(yè)務(wù)會比較被動,容易面臨同質(zhì)化的困境。

四、三類HTML5平臺的對比

因為整體上移動端瀏覽器對HTML5的支持優(yōu)于PC端,2015年HTML5平臺主要面向移動端網(wǎng)頁的制作和開發(fā)。

HTML5平臺定位與工具特征對比

如上表,三種HTML5平臺以PC網(wǎng)站、APP和軟件三種形式提供制作或開發(fā)工具,成品為網(wǎng)頁或HTML5源碼。由表可見:

(1)輕營銷模板類HTML5平臺只能做輕度營銷,能實現(xiàn)翻頁等簡單動效,分為場景展示、電子出版和動畫制作三種。如下圖為易企秀桌面編輯界面,該類平臺最大的共同點在于工具結(jié)構(gòu)以頁面為基礎(chǔ),與軟件PowerPoint架構(gòu)相近,能通過增減頁面、使用功能組件和點擊快捷菜單來調(diào)整內(nèi)容。

易企秀的桌面編輯工具界面

(2)功能引擎類HTML5平臺的用戶專指性很強,主要是有開發(fā)經(jīng)驗的技術(shù)人員。下圖為Egret Wing軟件設(shè)計師視圖下的基本架構(gòu),使用HTML5引擎把基礎(chǔ)代碼流程化,再借助第三方集成開發(fā)環(huán)境Adobe Air構(gòu)建可視化工具,就能通過讓用戶使用軟件組件來簡化開發(fā)過程。

Egret Wing的桌面編輯工具界面

(3)基礎(chǔ)工具類HTML5平臺提供底層交互型產(chǎn)品,開發(fā)目的、設(shè)計原理和實現(xiàn)思路都以交互為基礎(chǔ),國內(nèi)只有iH5。iH5于2015年9月上線,提供HTML5制作工具、工具培訓(xùn)和作品交易等服務(wù)。它本質(zhì)上封裝了DOM(文檔對象模型)引擎的一個集成開發(fā)環(huán)境,使用者以設(shè)計師為主,適合廣告公司、大型媒體公司和公司市場部等使用。

iH5的桌面編輯工具界面

如上圖,iH5提供的是舞臺、屏幕、頁面、多媒體素材、事件、數(shù)據(jù)庫等對象組件,而不是構(gòu)建好的模塊組件。在提供可視化編輯的前提上,它最大程度還原了HTML5頁面的開發(fā)過程,具有較高的拓展性。由于提供底層交互功能,它的應(yīng)用領(lǐng)域較廣泛,能用于微信推廣、網(wǎng)站建設(shè)、輕游戲設(shè)計、輕APP開發(fā)和視頻交互等多個方面。

同樣是HTML5規(guī)范,對HTML5技術(shù)與性能的取舍成為國內(nèi)HTML5平臺工具定位和提供服務(wù)的差別所在。

五、HTML5行業(yè)發(fā)展的趨勢

伴隨著HTML5興起的是Flash的沒落,HTML5能打敗在多媒體領(lǐng)域稱霸多年的Flash,除了移動設(shè)備的跨平臺性和較好的多媒體支持外,它的應(yīng)用范圍也廣于Flash。比如,F(xiàn)lash動畫作品的復(fù)用性極低,基本沒有模板市場,而HTML5卻能作為基礎(chǔ)填充材料,用來制作報紙圖文等模板。

參考Flash發(fā)展的演化路徑并結(jié)合HTML5的新特性,HTML5近幾年會在重度內(nèi)容、網(wǎng)頁游戲、垂直領(lǐng)域解決方案和內(nèi)容直接填充四個方面有所突破。

(1)內(nèi)容往重度化方向發(fā)展。

重度營銷并不完全意味著大項目、高預(yù)算、長周期、大團隊,而是相對輕度營銷以用戶生產(chǎn)內(nèi)容為主,它更注重專業(yè)內(nèi)容的生產(chǎn)。在用戶對頁面交互能力和HTML5拓展功能的要求提高之際,輕度營銷的市場份額會逐漸降低,往重度營銷內(nèi)容轉(zhuǎn)化。

(2)網(wǎng)頁游戲往交互游戲方向發(fā)展。

盡管HTML5游戲具備無需下載、包含社交屬性、開發(fā)成本低等優(yōu)勢,但如果沒有充分利用HTML5的新特性,加強移動游戲的交互能力,它很難在游戲市場中異軍突起。由此,網(wǎng)頁游戲未來更有可能結(jié)合HTML5優(yōu)良的通信功能,往跨屏互動等交互特征更明顯的形式發(fā)展。

(3)垂直領(lǐng)域解決方案往在線應(yīng)用方向發(fā)展。

與HTML5行業(yè)密切相關(guān)的垂直行業(yè)主要包括在線教育、電商和流媒體三種類型。

以世界最大的在線課程平臺Coursera為例,授課視頻即使用HTML5實現(xiàn)“課間小測”。如下圖,在Coursera網(wǎng)站上,當視頻播放到特定節(jié)點時會出現(xiàn)與課程相關(guān)的問題,提供用戶選擇答案,記錄答題情況并反饋答題結(jié)果。

Coursera教學(xué)視頻播放部分的課間測試

(4)傳媒業(yè)往內(nèi)容直接填充方向發(fā)展。

國內(nèi)HTML5制作工具基本都提供模板服務(wù),這與HTML5網(wǎng)頁較強的復(fù)用性有關(guān)。網(wǎng)頁基礎(chǔ)架構(gòu)設(shè)計完成后,修改源碼中各元素的參數(shù)便能替換素材、改變對象屬性,因此HTML5網(wǎng)頁能用于制作基礎(chǔ)填充材料。在HTML5模板的幫助下,新媒體內(nèi)容能通過應(yīng)用母版進行編輯,用戶只需后期進行圖文內(nèi)容的替換,因此很有可能成為傳媒業(yè)轉(zhuǎn)型的契機。

反觀國內(nèi)不同類型的HTML5平臺,只有以HTML5提供的新特性為根本,著眼于底層交互才可能適應(yīng)各行各業(yè)對網(wǎng)頁開發(fā)的需求。因此,基于HTML5元素和屬性進行設(shè)計的基礎(chǔ)工具,未來更有機會占領(lǐng)盡可能多的市場份額。

+++完整報告對以上截取內(nèi)容做了更完善的說明,免費獲取完整報告,請點擊本鏈接+++

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,702評論 6 534
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,615評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,606評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,044評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,826評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,227評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,307評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,447評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,992評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,807評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,001評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,550評論 5 361
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,243評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,667評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,930評論 1 287
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,709評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,996評論 2 374

推薦閱讀更多精彩內(nèi)容