基于HTML5的垃圾分類宣傳方式研究與實(shí)踐

徐卉

摘要：分析了目前垃圾分類宣傳方式存在的不足，提出使用HTML5技術(shù)來(lái)提高宣傳效果，并分析其可行性。設(shè)計(jì)基于HTML5的垃圾分類宣傳內(nèi)容框架，并結(jié)合實(shí)踐研究了關(guān)鍵技術(shù)的實(shí)現(xiàn)方法，以此為高效開(kāi)展垃圾分類宣傳工作提供參考。

關(guān)鍵詞：垃圾分類；宣傳方式；HTML5；Epub360

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）07-0180-03

Abstract：The paper analyzes the problems of current propaganda method of garbage classification， proposes that using HTML5 can improve the effect of propaganda， feasibilityof which are studied.Design thecontent of the propaganda of garbage classificationbased on HTML5，and discuss realization of the key technologies with practical experience.Works in this paper can provide referencefor propaganda of garbage classification.

Key words：Garbage Classification；Propaganda Method；HTML5；Epub360

生活垃圾分類一直是城市發(fā)展與建設(shè)過(guò)程中面臨的重要問(wèn)題，為了促進(jìn)垃圾分類工作深入開(kāi)展，增強(qiáng)居民的垃圾分類意識(shí)，需要加強(qiáng)垃圾分類宣傳力度，提高宣傳效果，以大眾喜聞樂(lè)見(jiàn)的形式來(lái)宣傳垃圾分類的相關(guān)知識(shí)和意義。目前社區(qū)生活垃圾分類的宣傳方式主要有媒體廣告宣傳、在社區(qū)張貼宣傳海報(bào)、管理人員組織宣傳等，這些宣傳方式存在的不足之處有：1）宣傳渠道單一，受眾面?。?）宣傳過(guò)程中居民是單向被動(dòng)的接收信息，缺乏信息互動(dòng)交流；3）形式不夠新穎，內(nèi)容不夠引起居民探索興趣。雖然現(xiàn)在也有管理部門(mén)利用微信公眾號(hào)推廣組織社區(qū)垃圾分類，但內(nèi)容以新聞稿和圖文音視頻的單一展示為主，不能有效的解決以上問(wèn)題。

相比傳統(tǒng)的信息傳播方式，移動(dòng)互聯(lián)網(wǎng)環(huán)境下的新媒體技術(shù)HTML5在垃圾分類宣傳中具有一定應(yīng)用價(jià)值。以下從可行性及實(shí)現(xiàn)方法等角度研究其在垃圾分類宣傳中的應(yīng)用。

1 可行性分析

作為一項(xiàng)新媒體技術(shù)，HTML5憑借其強(qiáng)交互、跨平臺(tái)、社交性等特點(diǎn)，在廣告、營(yíng)銷、公益、教育、游戲設(shè)計(jì)等多個(gè)領(lǐng)域得到了廣泛應(yīng)用，成為當(dāng)下普遍應(yīng)用的信息傳播模式。利用HTML5制作的頁(yè)面通過(guò)發(fā)送鏈接、微信朋友圈、二維碼分享等渠道，可以快速準(zhǔn)確的推廣到特定受眾群，且頁(yè)面內(nèi)容形式豐富，可通過(guò)觸摸、滑動(dòng)及重力感應(yīng)等多種操作方式，以圖文動(dòng)畫(huà)等媒體形式，實(shí)現(xiàn)強(qiáng)交互的內(nèi)容展示、游戲互動(dòng)、信息收集等功能。

在垃圾分類宣傳中可以使用HTML5技術(shù)的特點(diǎn)，通過(guò)交互頁(yè)面展示生活垃圾分類知識(shí)，以垃圾分類主題的互動(dòng)游戲及在線測(cè)試提高居民參與熱情，并以頁(yè)面表單的形式來(lái)收集調(diào)查問(wèn)卷及意見(jiàn)反饋等信息，從而使垃圾分類宣傳能夠適應(yīng)移動(dòng)互聯(lián)網(wǎng)時(shí)代的發(fā)展要求。

2 框架設(shè)計(jì)

2.1宣傳內(nèi)容

在社區(qū)中宣傳生活垃圾分類知識(shí)，目的是讓居民了解生活垃圾分類的意義價(jià)值，并學(xué)會(huì)垃圾分類收集及投放的方法，從而保證垃圾分類后續(xù)環(huán)節(jié)的實(shí)施。在基于HTML5技術(shù)的垃圾分類宣傳模式中，應(yīng)發(fā)揮HTML5在內(nèi)容展示過(guò)程中強(qiáng)互動(dòng)的優(yōu)勢(shì)，將宣傳內(nèi)容高效的傳播給社區(qū)居民，提高宣傳工作的效率。圖1為基于HTML5設(shè)計(jì)的社區(qū)垃圾分類宣傳專題頁(yè)內(nèi)容框架圖。

2.2傳播渠道

HTML5頁(yè)面的傳播具有跨平臺(tái)和社交性強(qiáng)的特點(diǎn)，因此基于HTML5技術(shù)的垃圾分類宣傳頁(yè)可以采用多種渠道推廣傳播，傳播渠道包括微信平臺(tái)（公眾號(hào)推送、朋友圈分享），網(wǎng)址鏈接（二維碼、社區(qū)APP鏈接），用戶可以通過(guò)多種設(shè)備訪問(wèn)HTML5專題頁(yè)面。

3關(guān)鍵技術(shù)實(shí)現(xiàn)

目前有多種HTML5頁(yè)面制作工具，這些工具各具特點(diǎn)，在實(shí)際使用過(guò)程中可以根據(jù)不同需求選用不同的工具。以下選用Epub360工具來(lái)介紹垃圾分類宣傳中HTML5頁(yè)面的制作實(shí)現(xiàn)。Epub360是一款在線HTML5交互設(shè)計(jì)軟件，可視化操作，無(wú)需編程就可以實(shí)現(xiàn)專業(yè)級(jí)別的交互動(dòng)畫(huà)控制、社交應(yīng)用及數(shù)據(jù)應(yīng)用等功能。

3.1互動(dòng)宣傳頁(yè)設(shè)計(jì)

在介紹生活垃圾分類知識(shí)的過(guò)程中，可以利用HTML5頁(yè)面具有交互性的特點(diǎn)，讓瀏覽者通過(guò)手指觸碰的方式自由選擇需要了解的內(nèi)容，并在展示過(guò)程中適當(dāng)添加動(dòng)態(tài)效果，使圖文信息更具吸引力。

Epub360提供了交互組件幻燈設(shè)計(jì)功能，并通過(guò)觸發(fā)器設(shè)計(jì)指定幻燈切換到指定幀。在圖2所示的頁(yè)面中，觸碰不同顏色的垃圾桶會(huì)彈出相應(yīng)的圖文信息，也可以通過(guò)左右滑動(dòng)文字區(qū)域查看不同類別垃圾的介紹。

3.2互動(dòng)游戲設(shè)計(jì)

在專題頁(yè)面中加入H5社交輕游戲環(huán)節(jié)，可以提高用戶參與度，寓教于樂(lè)，讓用戶在游戲的過(guò)程中較好地掌握生活垃圾的分類知識(shí)。

Epub360提供了游戲設(shè)計(jì)中較常用到的功能，如碰撞檢測(cè)、拖放目標(biāo)、計(jì)時(shí)器等。在圖3所示的圾分類游戲中，將十個(gè)不同類型的垃圾分別拖放至正確的垃圾桶即可結(jié)束游戲，如拖放錯(cuò)誤，垃圾會(huì)自動(dòng)回到原位。在設(shè)計(jì)過(guò)程中通過(guò)添加十個(gè)碰撞檢測(cè)組件，將每個(gè)垃圾和對(duì)應(yīng)的垃圾桶作為該碰撞檢測(cè)組件的元素與目標(biāo)元素，并為該組件設(shè)計(jì)觸發(fā)器，指定正確元素發(fā)生碰撞時(shí)播放動(dòng)畫(huà)（垃圾消失）、設(shè)置參數(shù)值（已正確分類的個(gè)數(shù)增加1）并執(zhí)行邏輯判斷（如已分類的個(gè)數(shù)大于等于10則游戲結(jié)束）。

3.3測(cè)試題設(shè)計(jì)

利用H5頁(yè)面設(shè)計(jì)在線測(cè)試題，可以滿足用戶對(duì)知識(shí)的探索欲，鼓勵(lì)用戶挑戰(zhàn)自我，從而讓用戶鞏固新知識(shí)。

Epub360提供了參數(shù)變量組件，可以設(shè)置為本頁(yè)參數(shù)及MasterPage參數(shù)等多種類型，實(shí)現(xiàn)不同類型參數(shù)的分別計(jì)數(shù)，同時(shí)可以給參數(shù)添加觸發(fā)條件，設(shè)置參數(shù)值不同取值范圍下執(zhí)行不同的操作。在圖4所示的測(cè)試題環(huán)節(jié)，根據(jù)不同題目選擇不同的選項(xiàng)，點(diǎn)擊下一題進(jìn)入下一頁(yè)測(cè)試，做完全部測(cè)試題后反饋測(cè)試成績(jī)，并提供重來(lái)與分享至微信朋友圈的功能。在設(shè)計(jì)過(guò)程中在每一頁(yè)添加本地參數(shù)變量用于記錄本題的得分，在masterPage中設(shè)置參數(shù)變量用于記錄最終得分，在每頁(yè)點(diǎn)擊不同的選項(xiàng)則設(shè)置本地參數(shù)變量不同的值，點(diǎn)擊“下一題”時(shí)設(shè)置masterPage中的參數(shù)變量為現(xiàn)有值加上本頁(yè)參數(shù)變量值，最后一道測(cè)試題做完后點(diǎn)擊“查看結(jié)果”按鈕時(shí)，執(zhí)行masterPage頁(yè)面參數(shù)判斷，不同的得分跳轉(zhuǎn)至相應(yīng)的頁(yè)面。

3.4問(wèn)卷調(diào)查設(shè)計(jì)

傳統(tǒng)的紙質(zhì)問(wèn)卷調(diào)查效率低，數(shù)據(jù)的收集及分析耗時(shí)耗力，采用網(wǎng)絡(luò)問(wèn)卷則有效地?cái)U(kuò)大了調(diào)查范圍，提高了數(shù)據(jù)收集分析效率。

Epub360提供了表單創(chuàng)建與管理功能，可以方便地在表單中添加各種元素，并對(duì)用戶提交的表單進(jìn)行后臺(tái)數(shù)據(jù)查看、下載、分析。圖5中的表單選項(xiàng)使用了單選框元素，點(diǎn)擊提交后顯示反饋?lái)?yè)面，同時(shí)管理者可以在后臺(tái)進(jìn)行數(shù)據(jù)管理。設(shè)計(jì)過(guò)程中主要使用了交互組件中的基礎(chǔ)表單來(lái)導(dǎo)入事先設(shè)計(jì)好的表單。

4 結(jié)束語(yǔ)

垃圾分類宣傳是垃圾分類工作的重要環(huán)節(jié)之一，在移動(dòng)互聯(lián)網(wǎng)時(shí)代，垃圾分類的宣傳形式、內(nèi)容及渠道等方面應(yīng)積極利用新媒體技術(shù)。利用HTML5制作工具可以快速地建立HTML5互動(dòng)頁(yè)面，完成交互頁(yè)面、輕游戲、在線測(cè)試、調(diào)查問(wèn)卷等形式的頁(yè)面設(shè)計(jì)，并可以實(shí)現(xiàn)微信朋友圈分享、后臺(tái)數(shù)據(jù)收集分析等功能，實(shí)現(xiàn)具有互動(dòng)性、趣味性、社交性特點(diǎn)的宣傳體系，滿足垃圾分類高效推廣的需求。通過(guò)本文所做工作，可以為垃圾分類宣傳的高效開(kāi)展提供參考。

參考文獻(xiàn)：

[1] 黃悅深. 基于HTML5的移動(dòng)Web App開(kāi)發(fā)[J]. 圖書(shū)館雜志，2014，33（7）：72-77.

[2] 黃永慧，陳程凱.HTML5在移動(dòng)應(yīng)用開(kāi)發(fā)上的應(yīng)用前景[J].計(jì)算機(jī)技術(shù)與發(fā)展，2013， 23（7）：207-210.

[3] 楊臻崢，鄭曉南. 利用HTML5頁(yè)面制作工具打造科技期刊編輯全新工作方式——以《藥學(xué)進(jìn)展》編輯部的辦刊實(shí)踐為例[J]. 科技與出版，2015（11）：78-81.

[4] 譚敏敏. 基于HTML5在線編輯平臺(tái)的移動(dòng)學(xué)習(xí)資源構(gòu)建與應(yīng)用研究[J]. 中國(guó)教育信息化，2016（19）：40-43.

[5] 陳婧嫻，吳祐昕. 基于HTML5的廣告設(shè)計(jì)研究[J]. 設(shè)計(jì)，2017（15）：134-135.

[6] 汪濤，杜蔚苗. 移動(dòng)終端HTML5頁(yè)面互動(dòng)版式設(shè)計(jì)研究[J]. 包裝工程，2017，38（6）：203-208.

[7] 趙榮鑫. 基于HTML5技術(shù)的品牌營(yíng)銷頁(yè)面的交互設(shè)計(jì)研究[D].北京交通大學(xué)，2016.

[8] 彭?xiàng)? Html5可視化設(shè)計(jì)工具的易用性研究[D].中國(guó)礦業(yè)大學(xué)，2016.

[9] W3School.HTML5 教程[EB/OL].[2016-8-10].http：//www.w3school.com.cn/html5/.

[10] Hickson I. HTML5 標(biāo)準(zhǔn)文檔[EB/OL].http：//www.w3.org/TR/html5/ .[2014-10-28].