基于HTML5技術(shù)的蜀水文化教育傳播平臺(tái)的建設(shè)研究

羅敏 羅亞東 劉明錦

摘 ?要：網(wǎng)絡(luò)、手機(jī)APP等新媒體技術(shù)對(duì)于促進(jìn)蜀水文化知識(shí)在全社會(huì)的普及具有不可替代的作用。文章提出基于HTML5的蜀水文化數(shù)字平臺(tái)的設(shè)計(jì)方案，前期進(jìn)行UI設(shè)計(jì)，通過HTML5+CSS3實(shí)現(xiàn)前端頁面，利用JSP+SQL進(jìn)行后臺(tái)開發(fā)。旨在借力網(wǎng)絡(luò)新媒體技術(shù)更好地開展蜀水文化傳播，建立開放、合作、創(chuàng)新、共享、可持續(xù)發(fā)展的立體式蜀水文化教育傳播平臺(tái)，以促進(jìn)蜀水文化的傳承、推廣、利用。

關(guān)鍵詞：蜀水文化;HTML5;數(shù)字平臺(tái);建設(shè)研究

中圖分類號(hào)：TP311 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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 ?引 ?言

水文化重在建設(shè)，成在傳播，利用網(wǎng)絡(luò)新媒體技術(shù)搭建水文化傳播平臺(tái)是當(dāng)前熱點(diǎn)所在。水利部部長(zhǎng)陳雷在2009年首屆中國(guó)水文化論壇上，就明確提出：要努力使互聯(lián)網(wǎng)等新媒體成為傳播水文化的主力軍，為水文化的弘揚(yáng)與傳承提供強(qiáng)有力的文化支撐和保障。水利部新聞宣傳中心陳夢(mèng)暉副主任也提出要充分發(fā)揮新媒體技術(shù)的作用，創(chuàng)新水文化傳播。作為服務(wù)于水利改革和發(fā)展，為水利改革和發(fā)展提供智力支持、技術(shù)支撐和后備力量的四川水利職業(yè)技術(shù)學(xué)院，依托學(xué)院深厚的學(xué)術(shù)文化氛圍，建立開放、合作、創(chuàng)新、共享、可持續(xù)發(fā)展的數(shù)字化蜀水文化教育傳播網(wǎng)絡(luò)平臺(tái)，利用各類網(wǎng)絡(luò)信息技術(shù)、平臺(tái)，轉(zhuǎn)化水文化資源，并通過網(wǎng)絡(luò)傳播教育方式實(shí)現(xiàn)水文化的共享與傳播，面向在校學(xué)生及水利職工、社會(huì)大眾開展水利科技、水歷史、水資源、節(jié)水知識(shí)等在內(nèi)的水文化教育活動(dòng)。以促進(jìn)水文化的傳承、推廣、利用。平臺(tái)建設(shè)具有較強(qiáng)的實(shí)用價(jià)值[1]。

1 ?水文化教育傳播數(shù)字化平臺(tái)建設(shè)研究現(xiàn)狀

近年來，水文化傳播平臺(tái)建設(shè)研究在國(guó)內(nèi)外引起了廣泛關(guān)注。2004年，聯(lián)合國(guó)教科文組織國(guó)際水教育學(xué)院建立水足跡專題網(wǎng)站（http：//www.waterfootprint.org），2008年開始運(yùn)作，目前該網(wǎng)絡(luò)由荷蘭特文大學(xué)進(jìn)行日常維護(hù)[2]。由于我國(guó)的水文化是近些年才興起的一個(gè)研究主題，水文化教育的發(fā)展也還處于起步階段，相關(guān)水利部門、水利院校的水文化傳播教育平臺(tái)也是近些年才相繼建設(shè)并投入使用的。目前水文化教育傳播數(shù)字化平臺(tái)建設(shè)主要有四種形式，即專題網(wǎng)站、微信公眾號(hào)、微博、水文化APP。

如中國(guó)水文化網(wǎng)開辟了水文化專欄，內(nèi)容包括：水文化資訊、水文化研究、水文化博覽、風(fēng)景與旅游、水故事、水知識(shí)。浙江省建設(shè)了浙江水文化專題網(wǎng)主要包括水文化教育、水文化研究、古代水文化、水利工程、水詩韻、水景觀等欄目，并創(chuàng)建了浙江省水文化微信公眾號(hào)，平臺(tái)采取圖文并茂的方式，定時(shí)向大眾推送水文化研究的相關(guān)咨詢。華北水利水電大學(xué)建設(shè)了“水研網(wǎng)”專題網(wǎng)站，收集整理了全國(guó)關(guān)于水文化經(jīng)典論文百余篇。河海大學(xué)成立了水文化研究所，制作了5集網(wǎng)易公開課《中華水文化》。南昌工程學(xué)院“水文化研究中心”，建設(shè)了“水文化”專題網(wǎng)站[3]。浙江水利水電專科學(xué)校建設(shè)了《特色水教育》資源庫專題網(wǎng)站，該資源庫內(nèi)容豐富，形式多樣，包括精心制作的PPT課件、授課錄像、題庫、水利科技視頻[4]。由四川省水利廳建設(shè)的四川水利網(wǎng)開辟了蜀水文化專欄，但專欄內(nèi)容只涉及與水文化相關(guān)的散文、詩詞等[1]。值得一提的是由四川水利廳建設(shè)的微信公眾號(hào)“四川水利”以“水美四川”為核心，發(fā)布水利資訊，普及水情知識(shí)，講好水利故事，傳播水利聲音，近年來推出了越來越多蜀水文化活動(dòng)，蜀水文化圖文、視頻等資源。

綜上可知，四川水文化研究尚缺乏基于大數(shù)據(jù)和新媒體技術(shù)的，以地方特色為基礎(chǔ)、傳承水文化為主線的集水文化咨詢、水利博覽、數(shù)字水利、水文化教育、學(xué)術(shù)建設(shè)、文化交流功能于一體的水文化數(shù)字化教育傳播平臺(tái)建設(shè)案例。因此，本研究在國(guó)內(nèi)外已有的研究基礎(chǔ)上，采用基于HTML5和數(shù)據(jù)庫軟件的B/S分層設(shè)計(jì)方式，構(gòu)建積水文化資訊、水利博覽、數(shù)字水利、社會(huì)教育、學(xué)術(shù)建設(shè)、文化交流功能于一體的網(wǎng)絡(luò)平臺(tái)，建立開放、合作、創(chuàng)新、共享、可持續(xù)發(fā)展的數(shù)字蜀水文化教育傳播網(wǎng)絡(luò)平臺(tái)，以促進(jìn)蜀水文化的傳承、推廣、利用[5]。

2 ?HTML5技術(shù)在水文化數(shù)字平臺(tái)建設(shè)中的優(yōu)勢(shì)

HTML5技術(shù)是為了適應(yīng)日新月異的Web技術(shù)和更復(fù)雜多樣的應(yīng)用需求。HTML5技術(shù)相比之前的HTML技術(shù)新增了很多元素和屬性、提供了更多的API接口、多媒體、智能表單、離線存儲(chǔ)等技術(shù)支持等，讓網(wǎng)頁開發(fā)和使用更加迅速便捷，還降低了瀏覽器對(duì)計(jì)算機(jī)資源的占有率以及對(duì)相關(guān)插件的依賴。HIML5技術(shù)支持在網(wǎng)頁頁面直接顯示動(dòng)畫、圖片、視頻、音頻等多媒體元素，并滿足多種媒體的跨平臺(tái)需求[4]。HTML5技術(shù)在水文化數(shù)字平臺(tái)建設(shè)中的優(yōu)勢(shì)主要有以下幾個(gè)方面。

2.1 ?美化頁面設(shè)計(jì)

頁面設(shè)計(jì)在蜀水文化數(shù)字傳播平臺(tái)中具有重要作用。以往的頁面排版是將圖片作為背景設(shè)計(jì)出符合需求的版式，但這樣的操作比較復(fù)雜煩瑣，如果需要對(duì)頁面版型進(jìn)行修改、顏色填充，則要加載安裝Flash或Silverlight插件。應(yīng)用HTML5技術(shù)設(shè)計(jì)頁面，可以用HBuilder創(chuàng)建頁面，并可以利用相關(guān)標(biāo)簽屬性自動(dòng)生成網(wǎng)頁骨架，還可以在網(wǎng)頁中繪制和處理圖形，畫出矩形、弧線等，還能通過JavaScript控制圖像的像素，讓多媒體網(wǎng)頁設(shè)計(jì)更加便捷，以此提升頁面視覺沖擊，增加平臺(tái)訪問率[5]。

2.2 ?多媒體技術(shù)支持

HTML5添加了（圖形定義）、

2.3 ?離線緩存提升平臺(tái)運(yùn)行流暢度

蜀水文化教育傳播平臺(tái)多媒體資源內(nèi)容眾多，平臺(tái)運(yùn)行的流暢性需要更好的技術(shù)支持。而HTML5提供了LocalStorage和Application Cache兩大離線存儲(chǔ)技術(shù)。相對(duì)于傳統(tǒng)的離線存儲(chǔ)技術(shù) Cookie而言，能夠提升數(shù)據(jù)的交互操作能力及效率，其次LocalStorage能夠存儲(chǔ)大量數(shù)據(jù)，提高了數(shù)據(jù)的存儲(chǔ)能力，為硬件設(shè)備減輕了壓力，讓平臺(tái)運(yùn)行流暢性得到提升[7]。

2.4 ?平臺(tái)交互性強(qiáng)

蜀水文化教育傳播平臺(tái)的應(yīng)用決定了平臺(tái)需要具有良好的交互性。在蜀水文化春寶平臺(tái)開發(fā)設(shè)計(jì)中要充分考慮加入線上討論區(qū)、留言板，甚至專家交流系統(tǒng)，提供較好的在線咨詢服務(wù)，提升平臺(tái)的交互性。HTML5技術(shù)可以實(shí)現(xiàn)在與后端進(jìn)行數(shù)據(jù)交互過程中可以使用JavaScript、AJAX和JSON技術(shù)實(shí)現(xiàn)數(shù)據(jù)的快速交互，提升用戶使用體驗(yàn)[8]。

3 ?基于HTML5的蜀水文化平臺(tái)的設(shè)計(jì)開發(fā)

3.1 ?蜀水文化教育傳播平臺(tái)構(gòu)建思路

聚焦于數(shù)字水文化網(wǎng)絡(luò)平臺(tái)發(fā)展滯后的現(xiàn)實(shí)問題，借助現(xiàn)代信息技術(shù)、數(shù)字媒體技術(shù)、網(wǎng)絡(luò)等新媒體技術(shù)設(shè)計(jì)解決該問題的數(shù)字蜀水文化立體式教育傳播平臺(tái)，采用基于HTML5和數(shù)據(jù)庫軟件的B/S分層設(shè)計(jì)方式將水文化相關(guān)的文本、圖形圖像、視頻、動(dòng)畫整合起來構(gòu)建集水文化資訊、水利博覽、數(shù)字水利等于一體的蜀水文化專題門戶網(wǎng)站。通過“方案設(shè)計(jì)—平臺(tái)建設(shè)—分析研究—方案修改”的多次迭代式研究與實(shí)踐，達(dá)到促進(jìn)水文化保護(hù)、傳承、推廣、利用的目的，并形成一套有效的數(shù)字水文化網(wǎng)絡(luò)平臺(tái)建設(shè)方案。

3.2 ?蜀水文化教育傳播平臺(tái)框架設(shè)計(jì)

從內(nèi)容模塊上劃分，蜀水文化教育傳播平臺(tái)按照傳播需求分為如下模塊：網(wǎng)站首頁、新聞資訊、蜀水教育、蜀水研究、蜀水資源、基地建設(shè)等模塊。如圖1所示。

3.3 ?蜀水文化數(shù)字化平臺(tái)的實(shí)現(xiàn)

3.3.1 ?蜀水文化平臺(tái)架構(gòu)設(shè)計(jì)

蜀水文化教育傳播數(shù)字平臺(tái)的前端頁面設(shè)計(jì)采取分欄式的設(shè)計(jì)，在首頁上對(duì)各欄目都有概要式的展示，平臺(tái)的首頁架構(gòu)標(biāo)簽設(shè)計(jì)如圖2所示。

在平臺(tái)前端頁面設(shè)計(jì)是，使用結(jié)構(gòu)化的語義標(biāo)記可以讓整個(gè)網(wǎng)站的結(jié)構(gòu)清晰明了、易于修改，開發(fā)時(shí)引用到的標(biāo)簽主要有