徐卉

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

關鍵詞：垃圾分類；宣傳方式；HTML5；Epub360

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

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

1 可行性分析

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

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

2 框架設計

2.1宣傳內(nèi)容

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

2.2傳播渠道

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

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

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

3.1互動宣傳頁設計

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

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

3.2互動游戲設計

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

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

3.3測試題設計

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

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

3.4問卷調(diào)查設計

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

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

4 結(jié)束語

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

參考文獻：

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

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

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

[4] 譚敏敏. 基于HTML5在線編輯平臺的移動學習資源構(gòu)建與應用研究[J]. 中國教育信息化，2016（19）：40-43.

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

[6] 汪濤，杜蔚苗. 移動終端HTML5頁面互動版式設計研究[J]. 包裝工程，2017，38（6）：203-208.

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

[8] 彭楊. Html5可視化設計工具的易用性研究[D].中國礦業(yè)大學，2016.

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

[10] Hickson I. HTML5 標準文檔[EB/OL].http：//www.w3.org/TR/html5/ .[2014-10-28].