【摘 要】本文對(duì)某一化工類職業(yè)技術(shù)學(xué)院乒乓球俱樂部的信息化教學(xué)平臺(tái)進(jìn)行了具體的實(shí)現(xiàn)與實(shí)施。實(shí)現(xiàn)包括美工部分和代碼部分,實(shí)施則有測(cè)試和運(yùn)行兩過程。
【關(guān)鍵詞】乒乓球俱樂部;信息化;教學(xué)平臺(tái);實(shí)現(xiàn);實(shí)施
1.平臺(tái)的功能概述
乒乓球俱樂部信息化教學(xué)平臺(tái),本文簡(jiǎn)稱平臺(tái),是為了解決諸如會(huì)員信息統(tǒng)計(jì)、教學(xué)中不定期的測(cè)試與成績(jī)公布、會(huì)員課外活動(dòng)統(tǒng)計(jì)、期末論文的批量批閱、新聞公告的發(fā)布與訂閱等等需求而設(shè)計(jì)的,是為了滿足信息化時(shí)代乒乓球運(yùn)動(dòng)的教與學(xué)而開發(fā)的。[1]
整個(gè)平臺(tái)分為前臺(tái)瀏覽網(wǎng)頁(yè)與后臺(tái)管理系統(tǒng)兩部分——前臺(tái)以界面方式提供瀏覽功能,而后臺(tái)則以菜單方式提供具體操作。其中,前臺(tái)瀏覽網(wǎng)頁(yè)的部分具體項(xiàng)目如圖1,后臺(tái)管理系統(tǒng)的部分具體操作菜單見圖2。[2]
圖1 前臺(tái)瀏覽界面圖
圖2 后臺(tái)管理系統(tǒng)圖
從兩圖中可以看出,前臺(tái)主要是實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽功能,因而,對(duì)它的實(shí)現(xiàn)與實(shí)施較為簡(jiǎn)單,只需要靜態(tài)網(wǎng)頁(yè)就可以辦到,所要考慮的主要問題可能是它的頁(yè)面的美觀與否以及瀏覽時(shí)候的方便與否,也就是主要要考慮前臺(tái)瀏覽頁(yè)面的網(wǎng)頁(yè)設(shè)計(jì)問題。但即便如此,所瀏覽網(wǎng)頁(yè)的內(nèi)容,是需要從后臺(tái)中自動(dòng)產(chǎn)生的。因此,后臺(tái)的實(shí)現(xiàn)與實(shí)施至關(guān)重要,而且,不是簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)就可以辦到的。而通過分析,我們可以看到,后臺(tái)不管功能多少,主要用到的,還是數(shù)據(jù)的添加、刪除、修改與查詢這四大基本操作。比如,添加考試、錄入成績(jī)、添加留言等屬于數(shù)據(jù)的添加功能,修改信息、管理考試、管理成績(jī)、管理留言等則用到數(shù)據(jù)的修改功能,而查看分組則屬于數(shù)據(jù)的查詢功能,此外,管理考試、管理成績(jī)、管理留言等也必然包含數(shù)據(jù)的刪除功能。
2.平臺(tái)的實(shí)現(xiàn)
在整個(gè)平臺(tái)中,前臺(tái)網(wǎng)頁(yè)瀏覽部分幾乎完全不需要?jiǎng)討B(tài)功能,而只需要進(jìn)行美工設(shè)計(jì),而后臺(tái)管理系統(tǒng)則完全相反,只需要?jiǎng)討B(tài)功能的實(shí)現(xiàn),而幾乎不需要考慮美觀的需求。因此,我們將整個(gè)平臺(tái)的實(shí)現(xiàn),分為(前臺(tái)瀏覽網(wǎng)頁(yè)的)美工實(shí)現(xiàn)和(后臺(tái)管理系統(tǒng)的)代碼實(shí)現(xiàn)兩部分。
2.1 平臺(tái)的美工實(shí)現(xiàn)
在首頁(yè)的頁(yè)面設(shè)計(jì)上,我們以簡(jiǎn)潔為主,采用由上到下版面依次增加的三段式——上段為介紹區(qū),其中左半部分為內(nèi)部設(shè)計(jì)的俱樂部徽標(biāo)和自行書寫的俱樂部名字及網(wǎng)址,右半部分為功能區(qū),包括登錄功能、密碼恢復(fù)、設(shè)為首頁(yè)和加入收藏功能;整個(gè)上段顏色設(shè)為淡藍(lán),與徽標(biāo)的主題顏色一致,并且作為功能區(qū)的底色極為映襯,絲毫不影響功能區(qū)的文字識(shí)別。中段為頻道區(qū),較窄的上面部分為可鏈接的具體頻道,包括首頁(yè)、論壇、動(dòng)態(tài)、教學(xué)、比賽、事記、留言和管理共8個(gè)頻道,顏色設(shè)為深灰,以凸顯白色的頻道名文字;更寬的下半部分為圖片區(qū),也按圖片大小分為窄中寬三段,圖片不可鏈接。下段為通告區(qū)(其實(shí)就是動(dòng)態(tài)部分),包括左片的新聞中心、右片的友情鏈接和中片的教學(xué)公告——整個(gè)區(qū)域?yàn)樯钏{(lán)底色:新聞中心既提供新聞中心四字文字鏈接,也有圖片輪顯功能,還有新聞標(biāo)題鏈接,占了整個(gè)新聞區(qū)面積的3/5強(qiáng);教學(xué)公告則只提供標(biāo)題鏈接,而友情鏈接部分既有圖片鏈接,也有下拉菜單的選項(xiàng)鏈接。首頁(yè)的最下端按慣例為信息區(qū),包括版權(quán)與訪問量等具體信息。
至于具體的頻道頁(yè)面和新聞中心與教學(xué)公告兩個(gè)通告頁(yè)面的設(shè)計(jì),也以簡(jiǎn)潔為主,具體內(nèi)容一概以白色墊底,黑藍(lán)色文字對(duì)襯,最多加上淺藍(lán)底色的介紹欄等。[3]
而不管是首頁(yè),還是具體的頻道頁(yè)面,或者是兩個(gè)通告頁(yè)面以及子頻道頁(yè)面,都以CSS(層疊樣式表)的模式共享首頁(yè)中的介紹區(qū)和頻道區(qū)的頻道鏈接部分。這樣既簡(jiǎn)化了頁(yè)面的美工設(shè)計(jì),又達(dá)到頁(yè)面內(nèi)容、顏色、區(qū)劃的統(tǒng)一效果,形成了完整的視覺效果和統(tǒng)一的印象痕跡。
2.2 平臺(tái)的代碼實(shí)現(xiàn)
如前所述,整個(gè)平臺(tái)主要包括8個(gè)部分,即信息操作、考試操作、成績(jī)操作、留言操作、規(guī)則操作、新聞操作、論壇操作、系統(tǒng)操作8個(gè)組成。另外,對(duì)于管理員而言,還有隊(duì)員操作、學(xué)生操作、學(xué)生管理員操作、系統(tǒng)管理員操作、友情鏈接操作和我的課堂等操作部分。此外,比如首頁(yè)等部分的實(shí)現(xiàn),我們也采取了自己的特殊處理,下面擇重分述如下:
(1)首頁(yè)代碼
首頁(yè)代碼我們并不和整個(gè)網(wǎng)站的代碼放一塊,而是采用引用的方式鏈接到其他網(wǎng)站,這樣雖然首頁(yè)開始打開的速度慢些,但代碼異地也提高了網(wǎng)站的容災(zāi)能力同時(shí)加強(qiáng)了網(wǎng)站的安全系數(shù)。[4]
首頁(yè)本地主要代碼為:
首頁(yè)異地主要代碼為:
(2)各種操作的代碼
各種操作盡管名目不同,但實(shí)質(zhì)相同,都是數(shù)據(jù)的增刪改查4個(gè)操作。下面以信息操作的代碼為例,來說明各種操作的實(shí)現(xiàn)過程。而信息操作包括修改信息和查看分組兩部分,代碼[5]分別如下——
修改信息的主要代碼為:
查看分組的主要代碼為:
從上述代碼可以看出,我們的網(wǎng)站代碼都是通過對(duì)象引用的方式,使用現(xiàn)成代碼,并且全部用JavaScript來實(shí)現(xiàn),這和一般網(wǎng)站代碼完全不同。
3.平臺(tái)的實(shí)施
在整個(gè)平臺(tái)根據(jù)前期的規(guī)劃、分析和設(shè)計(jì)的結(jié)果,最終完成了代碼的編寫工作,接下來就是整個(gè)平臺(tái)的測(cè)試和運(yùn)行工作。
3.1 平臺(tái)的測(cè)試
盡管整個(gè)平臺(tái)規(guī)模相對(duì)不大,但是我們還是按照軟件工程的流程進(jìn)行了4項(xiàng)測(cè)試工作:在代碼編寫階段進(jìn)行單元測(cè)試,這是無法避免的;按照詳細(xì)設(shè)計(jì)書進(jìn)行了集成測(cè)試,按照概要設(shè)計(jì)書進(jìn)行了系統(tǒng)測(cè)試,按照需求分析說明書進(jìn)行驗(yàn)收測(cè)試,這是我們自己努力完成的。[6]
3.2 平臺(tái)的運(yùn)行
整個(gè)平臺(tái),從2009年6月運(yùn)行到現(xiàn)在,已整整5年有奇,網(wǎng)站總訪問量已經(jīng)達(dá)到7萬(wàn)余次,日均訪問量為40次,日均在線20人,且運(yùn)行平穩(wěn)。
4.總結(jié)
作為整個(gè)平臺(tái)的后期工作,平臺(tái)的實(shí)現(xiàn)和實(shí)施基本都是技術(shù)性流程,只要按照軟件工程的基本原理和程序語(yǔ)言的結(jié)構(gòu)化編寫要求,即使出現(xiàn)問題,也較容易解決。而我們的創(chuàng)新在于充分利用JavaScript的便利,實(shí)現(xiàn)了整個(gè)網(wǎng)站的快速反應(yīng)。
參考文獻(xiàn):
[1]畢飛.乒乓球俱樂部信息化教學(xué)平臺(tái)建設(shè)項(xiàng)目申請(qǐng)書,2012.
[2]劉亮,崔健華.乒乓球俱樂部信息化教學(xué)平臺(tái)的建設(shè)[J].南京化工職業(yè)技術(shù)學(xué)院學(xué)報(bào),2012,4:6-7.
[3]馬偉,華馳.動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作[M].北京:機(jī)械工業(yè)出版社,2010:16-18.
[4]南京化工職業(yè)技術(shù)學(xué)院乒乓球俱樂部.南京化工職業(yè)技術(shù)學(xué)院乒乓球俱樂部首頁(yè)[EB/OL].http://www.wushen.biz/projects/njccpp/index.jsp,2009-06-05/2013-07-23.
[5]南京化工職業(yè)技術(shù)學(xué)院乒乓球俱樂部.南京化工職業(yè)技術(shù)學(xué)院乒乓球俱樂部信息操作[EB/OL].http://www.wushen.bix/projects/njccpp/admin/management.jsp,2009-06-05/2013-07-23.
[6]鄭人杰等.軟件測(cè)試[M].北京:人民郵電出版社,2011:26-33.