基于HTML5技術的蜀水文化教育傳播平臺的建設研究

羅敏 羅亞東 劉明錦

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

關鍵詞：蜀水文化;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年首屆中國水文化論壇上，就明確提出：要努力使互聯網等新媒體成為傳播水文化的主力軍，為水文化的弘揚與傳承提供強有力的文化支撐和保障。水利部新聞宣傳中心陳夢暉副主任也提出要充分發(fā)揮新媒體技術的作用，創(chuàng)新水文化傳播。作為服務于水利改革和發(fā)展，為水利改革和發(fā)展提供智力支持、技術支撐和后備力量的四川水利職業(yè)技術學院，依托學院深厚的學術文化氛圍，建立開放、合作、創(chuàng)新、共享、可持續(xù)發(fā)展的數字化蜀水文化教育傳播網絡平臺，利用各類網絡信息技術、平臺，轉化水文化資源，并通過網絡傳播教育方式實現水文化的共享與傳播，面向在校學生及水利職工、社會大眾開展水利科技、水歷史、水資源、節(jié)水知識等在內的水文化教育活動。以促進水文化的傳承、推廣、利用。平臺建設具有較強的實用價值[1]。

1 ?水文化教育傳播數字化平臺建設研究現狀

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

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

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

2 ?HTML5技術在水文化數字平臺建設中的優(yōu)勢

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

2.1 ?美化頁面設計

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

2.2 ?多媒體技術支持

HTML5添加了（圖形定義）、

2.3 ?離線緩存提升平臺運行流暢度

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

2.4 ?平臺交互性強

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

3 ?基于HTML5的蜀水文化平臺的設計開發(fā)

3.1 ?蜀水文化教育傳播平臺構建思路

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

3.2 ?蜀水文化教育傳播平臺框架設計

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

3.3 ?蜀水文化數字化平臺的實現

3.3.1 ?蜀水文化平臺架構設計

蜀水文化教育傳播數字平臺的前端頁面設計采取分欄式的設計，在首頁上對各欄目都有概要式的展示，平臺的首頁架構標簽設計如圖2所示。

在平臺前端頁面設計是，使用結構化的語義標記可以讓整個網站的結構清晰明了、易于修改，開發(fā)時引用到的標簽主要有