罗敏 罗亚东 刘明锦
摘 要：网络、手机APP等新媒体技术对于促进蜀水文化知识在全社会的普及具有不可替代的作用。文章提出基于HTML5的蜀水文化数字平台的设计方案，前期进行UI设计，通过HTML5+CSS3实现前端页面，利用JSP+SQL进行后台开发。旨在借力网络新媒体技术更好地开展蜀水文化传播，建立开放、合作、创新、共享、可持续发展的立体式蜀水文化教育传播平台，以促进蜀水文化的传承、推广、利用。
关键词：蜀水文化;HTML5;数字平台;建设研究
中图分类号：TP311 文献标识码：A 文章编号：2096-4706（2021）06-0018-05
The Construction Research on Shushui Cultural Education and
Communication Platform Based on HTML5 Technology
LUO Min，LUO Yadong，LIU Mingjin
（Sichuan Water Conservancy College，Chengdu 611231，China）
Abstract：Network，mobile APP and other new media technologies play an irreplaceable role in promoting the popularization of Shushui culture knowledge in the whole society. This paper proposes the design scheme of Shushui culture digital platform based on HTML5. The UI design is carried out in the early stage，the front end page is realized by HTML5+CSS3，and the background development is carried out by JSP+SQL. The purpose of it is to make use of the network new media technology to better carry out the communication of Shushui culture，and to establish a three-dimensional Shushui cultural education and communication platform with open，cooperative，innovative，shared and sustainable development，so as to promote the inheritance，promotion and utilization of Shushui culture.
Keywords：Shushui culture;HTML5;digital platform;construction research
0 引 言
水文化重在建设，成在传播，利用网络新媒体技术搭建水文化传播平台是当前热点所在。水利部部长陈雷在2009年首届中国水文化论坛上，就明确提出：要努力使互联网等新媒体成为传播水文化的主力军，为水文化的弘扬与传承提供强有力的文化支撑和保障。水利部新闻宣传中心陈梦晖副主任也提出要充分发挥新媒体技术的作用，创新水文化传播。作为服务于水利改革和发展，为水利改革和发展提供智力支持、技术支撑和后备力量的四川水利职业技术学院，依托学院深厚的学术文化氛围，建立开放、合作、创新、共享、可持续发展的数字化蜀水文化教育传播网络平台，利用各类网络信息技术、平台，转化水文化资源，并通过网络传播教育方式实现水文化的共享与传播，面向在校学生及水利职工、社会大众开展水利科技、水历史、水资源、节水知识等在内的水文化教育活动。以促进水文化的传承、推广、利用。平台建设具有较强的实用价值[1]。
1 水文化教育传播数字化平台建设研究现状
近年来，水文化传播平台建设研究在国内外引起了广泛关注。2004年，联合国教科文组织国际水教育学院建立水足迹专题网站（http：//www.waterfootprint.org），2008年开始运作，目前该网络由荷兰特文大学进行日常维护[2]。由于我国的水文化是近些年才兴起的一个研究主题，水文化教育的发展也还处于起步阶段，相关水利部门、水利院校的水文化传播教育平台也是近些年才相继建设并投入使用的。目前水文化教育传播数字化平台建设主要有四种形式，即专题网站、微信公众号、微博、水文化APP。
如中国水文化网开辟了水文化专栏，内容包括：水文化资讯、水文化研究、水文化博览、风景与旅游、水故事、水知识。浙江省建设了浙江水文化专题网主要包括水文化教育、水文化研究、古代水文化、水利工程、水诗韵、水景观等栏目，并创建了浙江省水文化微信公众号，平台采取图文并茂的方式，定时向大众推送水文化研究的相关咨询。华北水利水电大学建设了“水研网”专题网站，收集整理了全国关于水文化经典论文百余篇。河海大学成立了水文化研究所，制作了5集网易公开课《中华水文化》。南昌工程学院“水文化研究中心”，建设了“水文化”专题网站[3]。浙江水利水电专科学校建设了《特色水教育》资源库专题网站，该资源库内容丰富，形式多样，包括精心制作的PPT课件、授课录像、题库、水利科技视频[4]。由四川省水利厅建设的四川水利网开辟了蜀水文化专栏，但专栏内容只涉及与水文化相关的散文、诗词等[1]。值得一提的是由四川水利厅建设的微信公众号“四川水利”以“水美四川”为核心，发布水利资讯，普及水情知识，讲好水利故事，传播水利声音，近年来推出了越来越多蜀水文化活动，蜀水文化图文、视频等资源。
综上可知，四川水文化研究尚缺乏基于大数据和新媒体技术的，以地方特色为基础、传承水文化为主线的集水文化咨询、水利博览、数字水利、水文化教育、学术建设、文化交流功能于一体的水文化数字化教育传播平台建设案例。因此，本研究在国内外已有的研究基础上，采用基于HTML5和数据库软件的B/S分层设计方式，构建积水文化资讯、水利博览、数字水利、社会教育、学术建设、文化交流功能于一体的网络平台，建立开放、合作、创新、共享、可持续发展的数字蜀水文化教育传播网络平台，以促进蜀水文化的传承、推广、利用[5]。
2 HTML5技术在水文化数字平台建设中的优势
HTML5技术是为了适应日新月异的Web技术和更复杂多样的应用需求。HTML5技术相比之前的HTML技术新增了很多元素和属性、提供了更多的API接口、多媒体、智能表单、离线存储等技术支持等，让网页开发和使用更加迅速便捷，还降低了浏览器对计算机资源的占有率以及对相关插件的依赖。HIML5技术支持在网页页面直接显示动画、图片、视频、音频等多媒体元素，并满足多种媒体的跨平台需求[4]。HTML5技术在水文化数字平台建设中的优势主要有以下几个方面。
2.1 美化页面设计
页面设计在蜀水文化数字传播平台中具有重要作用。以往的页面排版是将图片作为背景设计出符合需求的版式，但这样的操作比较复杂烦琐，如果需要对页面版型进行修改、颜色填充，则要加载安装Flash或Silverlight插件。应用HTML5技术设计页面，可以用HBuilder创建页面，并可以利用相关标签属性自动生成网页骨架，还可以在网页中绘制和处理图形，画出矩形、弧线等，还能通过JavaScript控制图像的像素，让多媒体网页设计更加便捷，以此提升页面视觉冲击，增加平台访问率[5]。
2.2 多媒体技术支持
HTML5添加了（图形定义）、（视频定义）、（音频定义）等新元素，能实现在平台网页中处理并添加多种媒体内容。此外，使用HTML5的音频、视频技术能够实现音频、动画、视频等媒体资源的播放和暂停。蜀水文化教育传播平台中会上传、发布大量的水文化资源，以将声音、图片、动画等多媒体信息展现给用户，极大地拓展了访问者的想象空间，更容易形成访问者对水文化的沉浸感和构思，使访问者有更多身临其境的感觉，而HTML5对多媒体的支持可以使蜀水文化教育传播平台资源多样化[6]。
2.3 离线缓存提升平台运行流畅度
蜀水文化教育传播平台多媒体资源内容众多，平台运行的流畅性需要更好的技术支持。而HTML5提供了LocalStorage和Application Cache两大离线存储技术。相对于传统的离线存储技术 Cookie而言，能够提升数据的交互操作能力及效率，其次LocalStorage能够存储大量数据，提高了数据的存储能力，为硬件设备减轻了压力，让平台运行流畅性得到提升[7]。
2.4 平台交互性强
蜀水文化教育传播平台的应用决定了平台需要具有良好的交互性。在蜀水文化春宝平台开发设计中要充分考虑加入线上讨论区、留言板，甚至专家交流系统，提供较好的在线咨询服务，提升平台的交互性。HTML5技术可以实现在与后端进行数据交互过程中可以使用JavaScript、AJAX和JSON技术实现数据的快速交互，提升用户使用体验[8]。
3 基于HTML5的蜀水文化平台的设计开发
3.1 蜀水文化教育传播平台构建思路
聚焦于数字水文化网络平台发展滞后的现实问题，借助现代信息技术、数字媒体技术、网络等新媒体技术设计解决该问题的数字蜀水文化立体式教育传播平台，采用基于HTML5和数据库软件的B/S分层设计方式将水文化相关的文本、图形图像、视频、动画整合起来构建集水文化资讯、水利博览、数字水利等于一体的蜀水文化专题门户网站。通过“方案设计—平台建设—分析研究—方案修改”的多次迭代式研究与实践，达到促进水文化保护、传承、推广、利用的目的，并形成一套有效的数字水文化网络平台建设方案。
3.2 蜀水文化教育传播平台框架设计
从内容模块上划分，蜀水文化教育传播平台按照传播需求分为如下模块：网站首页、新闻资讯、蜀水教育、蜀水研究、蜀水资源、基地建设等模块。如图1所示。
3.3 蜀水文化数字化平台的实现
3.3.1 蜀水文化平台架构设计
蜀水文化教育传播数字平台的前端页面设计采取分栏式的设计，在首页上对各栏目都有概要式的展示，平台的首页架构标签设计如图2所示。
在平台前端页面设计是，使用结构化的语义标记可以让整个网站的结构清晰明了、易于修改，开发时引用到的标签主要有标记、标记、标记、标记和标记。标记含义如表1所示。
3.3.2 蜀水文化平台前端页面效果的实现
完成了首页的编写后，我们能够看到首页的效果如图3所示，部分代码为：
网站首页
新闻资讯
蜀水教育
蜀水讲坛
师资团队
水情教育
校园文化
……
关于我们
3.3.3 蜀水文化平台管理系统设计开发
蜀水文化教育传播平台的后台系统管理主要包括：登录管理、栏目管理、图文、视频、动画等多媒体上传、发布、播放等功能模块，管理系统界面如图4所示。
管理系统相关模块的功能主要采用ASP（Active Server Pages脚本语言）+SQL（Structured Query Language）结构化查询语言来实现，功能模块代码展示为：
（1）管理登录功能模块部分代码：
Public Sub webadmin（）
On Error Resume Next
Dim CanNext
CanNext=true
Dim UserName，Password，nz
UserName=wasp.StrChk（wasp.Post（"Admin：s"），"8"，"用户名不能够为空"，"提交参数必须是英文、数字、下划线！"）
Password=wasp.StrChk（wasp.Post（"PassWord：s"），"8"，"密码不能够为空"，"提交参数必须是英文、数字、下划线！"）
nz=wasp.StrChk（wasp.Post（"uid"），"9"，"验证码不能够为空"，"验证必须是数字！"）
if nz246 then
wasp.TkMsg "验证码输不正确"，""
end if
……
Response.Redirect "index.asp"
end if
End Sub
（2）栏目管理功能模块部分代码为：
Public Sub WebSendSort（）
On Error Resume Next
Dim CanNext
CanNext=true
Dim title，Content，com，Ntime
Sname=wasp.TAChk（wasp.Post（"Sname：s"），"分类名称不能够为空"）
PtID=wasp.fnIsnumeric（wasp.Post（"PtID：n"），0）
SType=wasp.fnIsnumeric（wasp.Post（"SType： n"），1）
Surl=wasp.TChk（wasp.Post（"Surl：s"））
SOrder=wasp.fnIsnumeric（wasp.Post （"SOrder：n"），1）
……
If result0 Then
wasp.TkMsg "栏目信息添加成功！！"， "Web_Sort.asp"
End If
End Sub
（3）视频加载功能代码：
4 结 论
随着数字化信息的不断发展，数字化特色文化传播平台逐渐成为现代化文化传播的发展趋势。基于HTML5技术构建的蜀水文化数字教育传播平台已经基本上可以使用，主要功能已通过功能性测试并且运行稳定，为用户提供了一个较好的水文化传播的平台。但是系统已然存在着一些不足，仍需要进一步的完善和改进，为进一步建立全面、系统、渐进的立体式的“蜀水文化”浸润式新媒体教育传播平台体系奠定基础。
参考文献：
[1] 罗敏，李春城.新媒体环境下水利院校水文化教育传播的现状研究 [J].华北水利水电大学学报（社会科学版），2016，32（3）：37-40.
[2] 楚行军.新媒体在水文化教育大众化发展中的应用——以“水足迹”的传播为例 [J].文化学刊，2014（5）：119-122.
[3] 程宇昌.现状与趋势：近年来国内水文化研究述评 [J].南昌工程学院学报，2014，33（5）：14-18.
[4] 袁莎，唐杰，顾晓韬.开放互联网中的学者画像技术综述 [J].计算机研究与发展，2018，55（9）：1903-1919.
[5] 罗敏，李春成，谢祥林.基于新媒体技术的蜀水文化教育传播平台建设研究 [J].四川水利，2019，40（1）：111-114.
[6] 罗湘萍，王伟英.水文化传播教育新媒体平台的构建 [J].浙江水利水电学院学报，2014，26（4）：9-12.
[7] 刘晓知.论HTML5对新媒体的推动作用 [J].现代盐化工，2019，46（6）：70-71.
[8] 袁劲松.一种基于HTML5高职课程资源库系统的设计与实现 [J].软件，2020，41（4）：82-87.
作者简介：罗敏（1981—），女，汉族，四川宜宾人，副教授，硕士研究生，研究方向：水文化教育传播;罗亚东（1969—），男，汉族，四川彭州人，教授，硕士，研究方向：软件开发;刘明锦（1981—），男，汉族，四川雅安人，高级工程师，硕士，研究方向：网络平台建设。