基于HTML5的垃圾分类宣传方式研究与实践

徐卉

摘要：分析了目前垃圾分类宣传方式存在的不足，提出使用HTML5技术来提高宣传效果，并分析其可行性。设计基于HTML5的垃圾分类宣传内容框架，并结合实践研究了关键技术的实现方法，以此为高效开展垃圾分类宣传工作提供参考。

关键词：垃圾分类；宣传方式；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

生活垃圾分類一直是城市发展与建设过程中面临的重要问题，为了促进垃圾分类工作深入开展，增强居民的垃圾分类意识，需要加强垃圾分类宣传力度，提高宣传效果，以大众喜闻乐见的形式来宣传垃圾分类的相关知识和意义。目前社区生活垃圾分类的宣传方式主要有媒体广告宣传、在社区张贴宣传海报、管理人员组织宣传等，这些宣传方式存在的不足之处有：1）宣传渠道单一，受众面小；2）宣传过程中居民是单向被动的接收信息，缺乏信息互动交流；3）形式不够新颖，内容不够引起居民探索兴趣。虽然现在也有管理部门利用微信公众号推广组织社区垃圾分类，但内容以新闻稿和图文音视频的单一展示为主，不能有效的解决以上问题。

相比传统的信息传播方式，移动互联网环境下的新媒体技术HTML5在垃圾分类宣传中具有一定应用价值。以下从可行性及实现方法等角度研究其在垃圾分类宣传中的应用。

1 可行性分析

作为一项新媒体技术，HTML5凭借其强交互、跨平台、社交性等特点，在广告、营销、公益、教育、游戏设计等多个领域得到了广泛应用，成为当下普遍应用的信息传播模式。利用HTML5制作的页面通过发送链接、微信朋友圈、二维码分享等渠道，可以快速准确的推广到特定受众群，且页面内容形式丰富，可通过触摸、滑动及重力感应等多种操作方式，以图文动画等媒体形式，实现强交互的内容展示、游戏互动、信息收集等功能。

在垃圾分类宣传中可以使用HTML5技术的特点，通过交互页面展示生活垃圾分类知识，以垃圾分类主题的互动游戏及在线测试提高居民参与热情，并以页面表单的形式来收集调查问卷及意见反馈等信息，从而使垃圾分类宣传能够适应移动互联网时代的发展要求。

2 框架设计

2.1宣传内容

在社区中宣传生活垃圾分类知识，目的是让居民了解生活垃圾分类的意义价值，并学会垃圾分类收集及投放的方法，从而保证垃圾分类后续环节的实施。在基于HTML5技术的垃圾分类宣传模式中，应发挥HTML5在内容展示过程中强互动的优势，将宣传内容高效的传播给社区居民，提高宣传工作的效率。图1为基于HTML5设计的社区垃圾分类宣传专题页内容框架图。

2.2传播渠道

HTML5页面的传播具有跨平台和社交性强的特点，因此基于HTML5技术的垃圾分类宣传页可以采用多种渠道推广传播，传播渠道包括微信平台（公众号推送、朋友圈分享），网址链接（二维码、社区APP链接），用户可以通过多种设备访问HTML5专题页面。

3关键技术实现

目前有多种HTML5页面制作工具，这些工具各具特点，在实际使用过程中可以根据不同需求选用不同的工具。以下选用Epub360工具来介绍垃圾分类宣传中HTML5页面的制作实现。Epub360是一款在线HTML5交互设计软件，可视化操作，无需编程就可以实现专业级别的交互动画控制、社交应用及数据应用等功能。

3.1互动宣传页设计

在介绍生活垃圾分类知识的过程中，可以利用HTML5页面具有交互性的特点，让浏览者通过手指触碰的方式自由选择需要了解的内容，并在展示过程中适当添加动态效果，使图文信息更具吸引力。

Epub360提供了交互组件幻灯设计功能，并通过触发器设计指定幻灯切换到指定帧。在图2所示的页面中，触碰不同颜色的垃圾桶会弹出相应的图文信息，也可以通过左右滑动文字区域查看不同类别垃圾的介绍。

3.2互动游戏设计

在专题页面中加入H5社交轻游戏环节，可以提高用户参与度，寓教于乐，让用户在游戏的过程中较好地掌握生活垃圾的分类知识。

Epub360提供了游戏设计中较常用到的功能，如碰撞检测、拖放目标、计时器等。在图3所示的圾分类游戏中，将十个不同类型的垃圾分别拖放至正确的垃圾桶即可结束游戏，如拖放错误，垃圾会自动回到原位。在设计过程中通过添加十个碰撞检测组件，将每个垃圾和对应的垃圾桶作为该碰撞检测组件的元素与目标元素，并为该组件设计触发器，指定正确元素发生碰撞时播放动画（垃圾消失）、设置参数值（已正确分类的个数增加1）并执行逻辑判断（如已分类的个数大于等于10则游戏结束）。

3.3测试题设计

利用H5页面设计在线测试题，可以满足用户对知识的探索欲，鼓励用户挑战自我，从而让用户巩固新知识。

Epub360提供了参数变量组件，可以设置为本页参数及MasterPage参数等多种类型，实现不同类型参数的分别计数，同时可以给参数添加触发条件，设置参数值不同取值范围下执行不同的操作。在图4所示的测试题环节，根据不同题目选择不同的选项，点击下一题进入下一页测试，做完全部测试题后反馈测试成绩，并提供重来与分享至微信朋友圈的功能。在设计过程中在每一页添加本地参数变量用于记录本题的得分，在masterPage中设置参数变量用于记录最终得分，在每页点击不同的选项则设置本地参数变量不同的值，点击“下一题”时设置masterPage中的参数变量为现有值加上本页参数变量值，最后一道测试题做完后点击“查看结果”按钮时，执行masterPage页面参数判断，不同的得分跳转至相应的页面。

3.4问卷调查设计

传统的纸质问卷调查效率低，数据的收集及分析耗时耗力，采用网络问卷则有效地扩大了调查范围，提高了数据收集分析效率。

Epub360提供了表单创建与管理功能，可以方便地在表单中添加各种元素，并对用户提交的表单进行后台数据查看、下载、分析。图5中的表单选项使用了单选框元素，点击提交后显示反馈页面，同时管理者可以在后台进行数据管理。设计过程中主要使用了交互组件中的基础表单来导入事先设计好的表单。

4 结束语

垃圾分类宣传是垃圾分类工作的重要环节之一，在移动互联网时代，垃圾分类的宣传形式、内容及渠道等方面应积极利用新媒体技术。利用HTML5制作工具可以快速地建立HTML5互动页面，完成交互页面、轻游戏、在线测试、调查问卷等形式的页面设计，并可以实现微信朋友圈分享、后台数据收集分析等功能，实现具有互动性、趣味性、社交性特点的宣传体系，满足垃圾分类高效推广的需求。通过本文所做工作，可以为垃圾分类宣传的高效开展提供参考。

参考文献：

[1] 黄悦深. 基于HTML5的移动Web App开发[J]. 图书馆杂志，2014，33（7）：72-77.

[2] 黄永慧，陈程凯.HTML5在移动应用开发上的应用前景[J].计算机技术与发展，2013， 23（7）：207-210.

[3] 杨臻峥，郑晓南. 利用HTML5页面制作工具打造科技期刊编辑全新工作方式——以《药学进展》编辑部的办刊实践为例[J]. 科技与出版，2015（11）：78-81.

[4] 谭敏敏. 基于HTML5在线编辑平台的移动学习资源构建与应用研究[J]. 中国教育信息化，2016（19）：40-43.

[5] 陈婧娴，吴祐昕. 基于HTML5的广告设计研究[J]. 设计，2017（15）：134-135.

[6] 汪涛，杜蔚苗. 移动终端HTML5页面互动版式设计研究[J]. 包装工程，2017，38（6）：203-208.

[7] 赵荣鑫. 基于HTML5技术的品牌营销页面的交互设计研究[D].北京交通大学，2016.

[8] 彭杨. Html5可视化设计工具的易用性研究[D].中国矿业大学，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].