基于bootstrap技術(shù)的新媒體公益平臺的建設(shè)與運營

胡玉賢 胡云溪 朱靜靜 汪明艷

摘要：本文主要展示了一個基于bootstrap技術(shù)的新媒體公益平臺的設(shè)計與實現(xiàn)過程。該設(shè)計方案包括以網(wǎng)站首頁、志愿組織、志愿社區(qū)等為主要模塊的網(wǎng)站前端界面設(shè)計，以及對用戶注冊、登錄，個人信息，組織信息，活動信息的發(fā)布等進行數(shù)據(jù)修改和管理的后端管理設(shè)計。主要使用HTML5、bootstrap、PHP和mysql等技術(shù)對網(wǎng)站進行開發(fā)。項目運行表明，平臺在不同的終端設(shè)備使用流暢，使用界面簡潔美觀，符合預(yù)期設(shè)計期望。

關(guān)鍵詞：Bootstrap;響應(yīng)式;公益網(wǎng)站

中圖分類號：TP311? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）16-0206-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1 引言

隨著大學(xué)生公益活動的興起，大學(xué)生志愿活動已逐漸成為社會公益活動的一項不可或缺的組成部分，本項目旨在為大學(xué)生提供優(yōu)質(zhì)的公益網(wǎng)站瀏覽服務(wù)，構(gòu)建上海市大學(xué)生專屬公益平臺。為了增強用戶的體驗，使用戶在不同的移動終端上瀏覽本網(wǎng)站時，網(wǎng)站界面的風(fēng)格保持一致且兼容性優(yōu)越。本系統(tǒng)利用了bootstrap技術(shù)對新媒體公益網(wǎng)站“上海公益在行動”進行開發(fā)。

系統(tǒng)的前端采用了bootstrap、HTML5等技術(shù)進行設(shè)計。Bootstrap框架幫助系統(tǒng)界面實現(xiàn)了響應(yīng)式布局，能自適應(yīng)不同屏幕大小和不同分辨率的移動終端;jQuery優(yōu)越的選擇器以及自配的函數(shù)在系統(tǒng)設(shè)計開發(fā)過程中也發(fā)揮著重要作用。PHP技術(shù)實現(xiàn)了網(wǎng)站前后端的連接，mysql實現(xiàn)網(wǎng)站數(shù)據(jù)庫的構(gòu)建。

2 系統(tǒng)功能設(shè)計

本平臺系統(tǒng)功能主要設(shè)計如下：

系統(tǒng)前端主要由網(wǎng)站首頁、個人中心、志愿組織、志愿活動、志愿社區(qū)、銷售專區(qū)這六大板塊組成。網(wǎng)站首頁主要進行近期公益資訊發(fā)布，公益活動照片展示，優(yōu)秀志愿者展示等。個人中心的主要功能有個人相冊、個人資料、個人收藏等。志愿組織涵蓋了個人組織、社區(qū)組織、高校組織等各個不同的組織類型。在志愿活動版塊中，所有用戶可以查看活動介紹并決定是否進行報名。志愿社區(qū)內(nèi)還可以對網(wǎng)站志愿活動發(fā)表看法并瀏覽回復(fù)。

系統(tǒng)后端則是組織管理、網(wǎng)站管理兩大板塊組成。組織管理員擁有組織管理權(quán)限，登錄后可以對其所在組織進行信息管理、成員管理、相冊管理等。而網(wǎng)站管理是對整個平臺的整體把控，包括個人管理、活動照片管理、志愿活動管理、組織管理等。

在開發(fā)設(shè)計的過程中還在平臺內(nèi)新增了銷售專區(qū)，希望可以在平臺內(nèi)進行二手產(chǎn)品和貧困地區(qū)農(nóng)特產(chǎn)品的銷售，充分利用本平臺為公益事業(yè)盡一分力。

3 界面設(shè)計

本網(wǎng)站的界面設(shè)計由開發(fā)人員自我設(shè)計，在網(wǎng)頁頭部放置了網(wǎng)站名稱、導(dǎo)航欄、搜索框、用戶注冊及登錄入口。而在網(wǎng)頁頁腳，則放置了網(wǎng)站簡介、網(wǎng)站相關(guān)鏈接以及聯(lián)系方式等內(nèi)容，簡約的風(fēng)格讓用戶使用起來一目了然。

Bootstrap提供了網(wǎng)站界面設(shè)計的框架，通過模板+動態(tài)內(nèi)容的方式，使得開發(fā)人員可以快速生成網(wǎng)站界面。在開發(fā)過程中，我們根據(jù)需要設(shè)計了網(wǎng)站界面模板，利用PHP代碼載入內(nèi)容數(shù)據(jù)，生成統(tǒng)一的網(wǎng)站界面。根據(jù)所需動態(tài)內(nèi)容，我們再利用css3即層疊樣式表，對頁面的背景、邊框、字體等進行進一步的美化。

4 網(wǎng)站模塊設(shè)計

4.1網(wǎng)頁內(nèi)容模塊

本網(wǎng)站的內(nèi)容模塊主要是對公益活動內(nèi)容進行展示。普通圖文類頁面，主要包括上海公益資訊、公益活動信息、活動報名、活動照片展示等內(nèi)容頁面。這類內(nèi)容界面主要是水平或垂直排列，給人以美觀、簡約之感。而用戶點贊、收藏、報名活動等頁面功能與內(nèi)容顯示模塊緊密聯(lián)系，通過按鈕控件加以實現(xiàn)。

4.2 用戶管理模塊

本平臺用戶主要分為三類，個人志愿者、組織管理員及網(wǎng)站管理員，對這三類授以不同權(quán)限。用戶主要通過手機號進行注冊，輸入信息后，前端將數(shù)據(jù)發(fā)送到后臺數(shù)據(jù)庫進行存儲?！坝脩糇浴奔啊靶薷拿艽a”等功能都需要進行用戶驗證，故在平臺設(shè)計時，加入了以手機驗證碼為維度的用戶驗證。

登錄功能支持手機/用戶名/電子郵箱方式登陸，用戶輸入用戶名和密碼后，選擇用戶類型進行登陸，系統(tǒng)后端進行權(quán)限驗證。若是本平臺用戶則跳轉(zhuǎn)至網(wǎng)站首頁，否則提示用戶信息錯誤。本平臺也設(shè)置了游客用戶，此類用戶只能瀏覽網(wǎng)站頁面的活動照片、志愿資訊等。注冊成為平臺用戶后才可以發(fā)布個人照片，報名活動，在論壇上參與討論，購買扶貧產(chǎn)品等用戶。用戶登錄后可以在個人中心添加個人信息，后端數(shù)據(jù)庫會根據(jù)傳送的表單完成相應(yīng)數(shù)據(jù)的修改。

4.3 活動管理模塊

本網(wǎng)站對于組織用戶和網(wǎng)站管理員，登錄后可以在系統(tǒng)中查看組織的用戶名錄、活動照片名錄，發(fā)布公益資訊、志愿者招募等活動信息，對組織信息進行編輯。本模塊主要包括了三個功能，志愿活動的發(fā)布、活動信息修改和活動報名。組織管理員登錄后，系統(tǒng)會根據(jù)user ID判斷用戶權(quán)限。組織管理員可以發(fā)布志愿活動資訊。在發(fā)布活動資訊時，組織管理員需要輸入一些活動基本信息，比如，活動名、活動日、活動類別、活動地點等，活動詳細信息通過Markdown語法進行填寫，支持部分html語法。

5 響應(yīng)式布局分析

本公益平臺最大的特點就在于bootstrap的響應(yīng)式布局框架，這也是整個平臺界面構(gòu)建的基礎(chǔ)。bootstrap的響應(yīng)式布局，可以更改頁面的內(nèi)容樣式表以達到不同的網(wǎng)頁效果。瀏覽器會獲取不同移動設(shè)備的分辨率信息以調(diào)整界面樣式。而bootstrap自帶的柵格系統(tǒng)可以隨著設(shè)備屏幕尺寸的改變，自動重組行與列來構(gòu)建全新的界面布局，同時頁面內(nèi)容也會自動調(diào)整并放入新的布局中，以此達到快速實現(xiàn)響應(yīng)式布局的目的。

媒介查詢是響應(yīng)式布局的關(guān)鍵，可以使得網(wǎng)站頁面在不同設(shè)備的瀏覽器中呈現(xiàn)出與之適配的樣式，通過一些條件詢問語句聲明和樣式的定義，使瀏覽器能夠應(yīng)用與當(dāng)前設(shè)備匹配的樣式。Bootstrap中提供了許多媒介查詢樣式表供開發(fā)人員使用，在本次系統(tǒng)開發(fā)中，我們也根據(jù)實際需要進行了其他樣式表的編寫。

6 網(wǎng)站推廣營銷策略

本網(wǎng)站的推廣營銷策略就是最大限度整合校內(nèi)資源，以較少的投入獲取更多的社會價值。最終目標(biāo)是創(chuàng)立屬于上海大學(xué)生的志愿者平臺，在上海各大高校及學(xué)生群體中形成一定的影響力，讓上海的大學(xué)生志愿組織能夠得到更多的宣傳推廣，吸引更多的社會公益資源。在未來，網(wǎng)站將結(jié)合自身特點與最終目標(biāo)，順應(yīng)“互聯(lián)網(wǎng)+”和新媒體的發(fā)展潮流，在網(wǎng)站推廣和營銷模式上進行創(chuàng)新。在網(wǎng)站的推廣營銷策略上，我們將對平臺進行線上和線下營銷。其中，線上營銷主要有志愿活動推廣、志愿者招聘推廣、網(wǎng)站愛心產(chǎn)品銷售、微信公眾號推廣等。線下營銷包括：與校志愿者部進行合作、進行校內(nèi)志愿者宣傳、建立公益社團等。

7 結(jié)論

此項目是基于bootstrap技術(shù)的新媒體公益平臺“上海公益在行動”的設(shè)計與實現(xiàn)。通過響應(yīng)式布局設(shè)計，使得網(wǎng)站使用快捷便利，瀏覽體驗良好，為志愿者提供了優(yōu)質(zhì)的公益平臺。項目以“上海大學(xué)生公益”為宣傳核心，希望提升大學(xué)生參與志愿活動的宣傳力度，意在解決大學(xué)生參與志愿活動興趣度普遍較低，公益活動發(fā)布平臺少，推廣難、宣傳少、參加人數(shù)少等問題，并對貧困地區(qū)進行農(nóng)特產(chǎn)品營銷和文化宣傳，獲取更多的社會價值。目前網(wǎng)站已有一百多位學(xué)生進行關(guān)注使用，今后還將繼續(xù)進行推廣完善，吸引更多大學(xué)生、高校入駐使用，推動大學(xué)生公益活動的進一步發(fā)展。

參考文獻：

[1] 陳榮華.基于HTML5技術(shù)的網(wǎng)頁廣告動態(tài)交互系統(tǒng)設(shè)計[J].現(xiàn)代電子技術(shù)，2020，43（21）：76-79，84.

[2] 范高智.基于Web技術(shù)的旅游智慧管理平臺構(gòu)建[J].現(xiàn)代電子技術(shù)，2018，41（11）：69-72.

[3] 顧俊.基于互聯(lián)網(wǎng)+時代對PHP動態(tài)網(wǎng)站開發(fā)技術(shù)的研究[J].信息通信，2020，33（7）：85-87.

[4] 蔣睿.MySQL數(shù)據(jù)庫安全研究[J].電腦知識與技術(shù)，2020，16（9）：3-4，21.

[5] 司勇，陳曦，任澤中.大學(xué)生公益創(chuàng)業(yè)孵化網(wǎng)絡(luò)建設(shè)[J].中國高校科技，2019（12）：90-92.

[6]王成，李少元，鄭黎曉，等.Web前端性能優(yōu)化方案與實踐[J].計算機應(yīng)用與軟件，2014，31（12）：89-95，147.

[7] 曲夢梅.新傳播環(huán)境下互聯(lián)網(wǎng)企業(yè)公益營銷的實踐與創(chuàng)新[D].上海：上海外國語大學(xué)，2019.

[8] 王一斐.互聯(lián)網(wǎng)時代個性化公益項目的動員機制研究——以“一校一夢想”為例[D].沈陽：遼寧大學(xué)，2019.

[9] 張迦.基于HTML5的響應(yīng)式新聞門戶網(wǎng)站設(shè)計與實現(xiàn)[D].長沙：湖南大學(xué)，2018.

【通聯(lián)編輯：光文玲】