孟 燕 鄧良太 張 晶 傅 霖

摘要:本文提出了一個(gè)精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)方案,分析了系統(tǒng)的工作流程、功能和主要實(shí)現(xiàn)技術(shù)。利用本系統(tǒng)開發(fā)精品課程網(wǎng)站,能夠簡(jiǎn)化網(wǎng)站制作的流程,使教師在很短的時(shí)間內(nèi)建成符合評(píng)審指標(biāo)且具有個(gè)性化的精品課程網(wǎng)站,大大減輕了教師和教育技術(shù)人員的工作量。

關(guān)鍵詞:精品課程 動(dòng)態(tài)生成平臺(tái) 設(shè)計(jì)與實(shí)現(xiàn)

中圖分類號(hào):G250.72 文獻(xiàn)標(biāo)識(shí)碼:B 文章編號(hào):1673-8454(2009)21-0039-04

精品課程是具有引領(lǐng)、示范和輻射作用的課程,精品課程建設(shè)工程于2003年由教育部啟動(dòng),隨后在全國(guó)各省市、全國(guó)各高等院校鋪開建設(shè),截止到2008年已建成國(guó)家級(jí)精品課程2200多門。按照教育部的要求,精品課程的內(nèi)容要全部上網(wǎng),因此精品課程網(wǎng)站的建設(shè)成為了精品課程建設(shè)中一個(gè)不可或缺的環(huán)節(jié)。

精品課程網(wǎng)站的制作包括頁面布局的規(guī)劃和界面的設(shè)計(jì)、程序代碼的編寫、后臺(tái)數(shù)據(jù)庫的操作、信息內(nèi)容的整合、網(wǎng)站發(fā)布等環(huán)節(jié),是一項(xiàng)重復(fù)而繁瑣的工作,有一定的技術(shù)難度,需要掌握網(wǎng)站制作方面的知識(shí)和技術(shù)。學(xué)科教師教學(xué)科研工作量一般都比較繁重,如果要他們?cè)谳^短的時(shí)間內(nèi)制作一個(gè)專業(yè)化的網(wǎng)站,則勉為其難。正是基于這樣一種考慮,如果能開發(fā)設(shè)計(jì)一個(gè)用于創(chuàng)建精品課程網(wǎng)站的平臺(tái),讓教師只需要簡(jiǎn)單的操作就可以建立一個(gè)精品課程網(wǎng)站,無疑會(huì)受到教師的歡迎。

一、系統(tǒng)的開發(fā)目標(biāo)

1.遵循精品課程的評(píng)審要求和制作規(guī)范

本平臺(tái)的開發(fā)是按照教育部2008年國(guó)家精品課程評(píng)審指標(biāo)的各項(xiàng)要求制作的,使教師在制作網(wǎng)站的過程中有據(jù)可循,減少了教師的工作量并且使教師制作出來的網(wǎng)站符合評(píng)審指標(biāo)的要求。系統(tǒng)的開發(fā)技術(shù)符合W3C標(biāo)準(zhǔn)。

2.簡(jiǎn)單易用

考慮到精品課程網(wǎng)站是自動(dòng)生成并且為普通學(xué)科教師所用,因而其操作應(yīng)該越簡(jiǎn)單越好,要求只要使用瀏覽器就能在線建立所需要的網(wǎng)站,不需要掌握系統(tǒng)的網(wǎng)絡(luò)知識(shí),不需要學(xué)習(xí)專業(yè)開發(fā)軟件,做到?jīng)]有網(wǎng)頁制作經(jīng)驗(yàn)的教師也能快速上手。如圖1所示是利用精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)創(chuàng)建課程網(wǎng)站的工作流程。

3.功能完善

具體功能包括:

(1)banner和版權(quán)的管理,包括banner的上傳、修改和編輯,版權(quán)的修改等。

(2)目錄管理,包括網(wǎng)站一級(jí)、二級(jí)、三級(jí)目錄的建立、修改、刪除與順序調(diào)整。

(3)頁面模塊管理,包括頁面模塊的選中、刪除、添加、修改、刪除其內(nèi)容等。

(4)界面的管理,包括分辨率的設(shè)定、界面的修改、背景圖片的上傳、選擇,菜單欄方向的修改等。

(5)課程內(nèi)容的上載:具有文字、表格、圖形、圖像、聲音、視頻等多媒體添加功能。

(6)其他功能:論壇管理、人員管理、登錄日志、網(wǎng)站配置等管理功能,和在線統(tǒng)計(jì)分析、訪問次數(shù)統(tǒng)計(jì)、資料上傳、時(shí)間顯示等功能。

4.所見即所得

添加網(wǎng)站內(nèi)容,編輯各種多媒體要素,就像編輯Office文檔一樣方便簡(jiǎn)單。使用所見即所得的編輯器,不需要具有任何標(biāo)記語言或編程語言知識(shí),通過網(wǎng)絡(luò)瀏覽網(wǎng)頁的效果和編輯時(shí)顯示的效果一致,幫教師方便、快捷地對(duì)編輯的內(nèi)容進(jìn)行修改、排版。如果教師比較熟悉網(wǎng)站的制作,可以選擇使用代碼的方式編輯,更加靈活方便。

二、系統(tǒng)的設(shè)計(jì)

1.系統(tǒng)設(shè)計(jì)原則

實(shí)用性原則:系統(tǒng)的總體設(shè)計(jì)原則是從方便教師的角度出發(fā),采用教師比較熟悉的Web形式,要求界面簡(jiǎn)潔,操作簡(jiǎn)單,具有很好的通用性和實(shí)用性。

模塊化原則:模塊化能大大提高系統(tǒng)的可管理性和可維護(hù)性,使整個(gè)教學(xué)系統(tǒng)能成為一個(gè)真正清晰明了的有機(jī)系統(tǒng)。模塊化便于修改、擴(kuò)充。采用模塊化設(shè)計(jì)后,在維護(hù)時(shí)可以直接對(duì)某一需要改動(dòng)的模塊進(jìn)行修改,從而能夠有效降低網(wǎng)站不斷更新帶來的麻煩。[1]

交互性原則:建立交互式網(wǎng)站,使精品課程網(wǎng)站具備網(wǎng)絡(luò)教學(xué)的互動(dòng)功能。為了提高學(xué)習(xí)效率,促進(jìn)師生互動(dòng),精品課程建設(shè)應(yīng)該建立師生園地(BBS)等互動(dòng)交流空間,教師定期與學(xué)生在線交流,為學(xué)生答疑解惑。

2.B/S三層體系結(jié)構(gòu)

系統(tǒng)采用了B/S(Browser/Server)三層體系結(jié)構(gòu),即表示層、業(yè)務(wù)邏輯層和數(shù)據(jù)訪問層,其體系結(jié)構(gòu)如圖2所示。

表示層負(fù)責(zé)與用戶交互,接受用戶的輸入并將服務(wù)器端傳來的數(shù)據(jù)呈現(xiàn)給用戶。該層在應(yīng)用程序里體現(xiàn)為擴(kuò)展名是ASPX的頁面文件和頁面相關(guān)代碼。業(yè)務(wù)邏輯層是系統(tǒng)的核心部分,負(fù)責(zé)處理表示層的HTTP請(qǐng)求并將請(qǐng)求傳輸給數(shù)據(jù)層,同時(shí)將請(qǐng)求處理結(jié)果發(fā)給瀏覽器。數(shù)據(jù)層位于最底層,以ADO.NET為接口,對(duì)數(shù)據(jù)進(jìn)行操縱并為業(yè)務(wù)邏輯層提供數(shù)據(jù)服務(wù)。系統(tǒng)采用三層體系結(jié)構(gòu),可以分模塊組織代碼,增強(qiáng)代碼的可讀性,增加系統(tǒng)的安全性和健壯性,最重要的是便于修改、擴(kuò)充。

3.系統(tǒng)功能模塊的設(shè)計(jì)

如圖3所示。

(1)網(wǎng)站基本信息設(shè)定:包括網(wǎng)站名稱的設(shè)定、界面膚色的更換、界面模塊的選擇與刪除、網(wǎng)站分辨率設(shè)定、banner圖片的上傳和選定、版權(quán)信息的設(shè)定、菜單欄位置的設(shè)定等,主要是針對(duì)不同的課程給教師提供自由發(fā)揮的空間,以體現(xiàn)網(wǎng)站的個(gè)性化。網(wǎng)站基本信息設(shè)定界面如圖4所示。

(2)新聞管理:使用在線編輯器對(duì)主頁中的新聞模塊進(jìn)行添加、修改和刪除。

(3)導(dǎo)航管理:對(duì)一級(jí)、二級(jí)、三級(jí)菜單的添加、修改、刪除和調(diào)整順序,一級(jí)菜單項(xiàng)主要包括:教學(xué)隊(duì)伍、教學(xué)內(nèi)容、教學(xué)條件、教學(xué)方法、教學(xué)效果、特色政策、申報(bào)表格和課程論壇等評(píng)審指標(biāo)中要求的項(xiàng)目,當(dāng)然也可以根據(jù)教師的要求修改或添加。每個(gè)一級(jí)菜單下可以設(shè)置多個(gè)二級(jí)菜單,每個(gè)二級(jí)菜單下也可以設(shè)置多個(gè)三級(jí)菜單。

(4)友情鏈接管理:友情鏈接是一個(gè)可選模塊,教師可以根據(jù)自己的需要決定是否選用,包括對(duì)友情鏈接的添加、修改和刪除。

(5)課程信息設(shè)定:這也是一個(gè)可選模塊,是對(duì)課程的簡(jiǎn)介,可以是文字,也可以插入圖片、視頻等。

(6)用戶管理:包括添加、刪除用戶,修改密碼,查看在線用戶等功能。

(7)搜索功能:可以進(jìn)行站內(nèi)搜索,方便用戶檢索相關(guān)內(nèi)容。

(8)留言管理:主要實(shí)現(xiàn)對(duì)留言的添加和刪除,留言板提供一個(gè)師生交流的平臺(tái),學(xué)生可以反饋意見,提出課程建議,增加了系統(tǒng)的互動(dòng)性。

(9)內(nèi)容管理:對(duì)網(wǎng)站中所有的文章進(jìn)行修改、增加和刪除操作。系統(tǒng)提供了一個(gè)基于網(wǎng)頁的所見即所得的在線編輯器。通過編輯器編輯的文字、圖片等HTML標(biāo)記輸出到頁面的效果和編輯時(shí)顯示的效果一致,讓使用者方便地對(duì)編輯的內(nèi)容進(jìn)行修改、排版。內(nèi)容管理界面如圖5所示。

三、系統(tǒng)實(shí)現(xiàn)的主要技術(shù)

本系統(tǒng)采用微軟.NET框架作為開發(fā)平臺(tái),開發(fā)環(huán)境為Visual Studio2008,數(shù)據(jù)庫采用SQL Sever 2005。系統(tǒng)的實(shí)現(xiàn)應(yīng)用了ADO.NET、DIV+CSS、自動(dòng)生成數(shù)據(jù)庫訪問類、在線編輯、Sliverlight和Ajax、流媒體等多種技術(shù),其中自動(dòng)生成數(shù)據(jù)庫訪問類、Sliverlight和Ajax技術(shù)的應(yīng)用是本系統(tǒng)實(shí)現(xiàn)的兩大特色。

1.ADO.NET

ADO.NET是在.NET編程環(huán)境中優(yōu)先使用的數(shù)據(jù)訪問接口,是一組用于和數(shù)據(jù)源進(jìn)行交互的面向?qū)ο箢悗?。ADO.NET允許和不同類型的數(shù)據(jù)源以及數(shù)據(jù)庫進(jìn)行交互。本平臺(tái)對(duì)數(shù)據(jù)庫的訪問就是通過ADO.NET實(shí)現(xiàn)的。

ADO.NET的兩大核心組件是數(shù)據(jù)提供程序(Data-Provider)和數(shù)據(jù)集(Dataset)。DataProvider是一組包括Connection、Command、DataReader和DataAdapter對(duì)象在內(nèi)的組件,其目的是為了實(shí)現(xiàn)數(shù)據(jù)操作和對(duì)數(shù)據(jù)的快速訪問。.NET 框架包含兩種數(shù)據(jù)提供程序:一種是SQL Server數(shù)據(jù)提供程序;另一種為一般的數(shù)據(jù)提供程序,它可以與任何一個(gè)OLEDB數(shù)據(jù)源通信。DataSet是非連接模式的核心,設(shè)計(jì)Dataset的目的是為了實(shí)現(xiàn)獨(dú)立于任何數(shù)據(jù)源的數(shù)據(jù)訪問。因此,它的數(shù)據(jù)源并不僅僅局限于數(shù)據(jù)庫,也可以從XML文件或自定義的本地?cái)?shù)據(jù)文件中獲得數(shù)據(jù)。DataSet由一個(gè)或多個(gè)DataTable對(duì)象組合而成,而每個(gè)DataTable對(duì)象由多個(gè)數(shù)據(jù)的行與列、主鍵、外鍵、約束及存放于DataTable對(duì)象中的數(shù)據(jù)關(guān)系信息組成,DataSet與現(xiàn)有數(shù)據(jù)源的交互是通過DataAdapter來控制的。[2]

2.DIV+CSS實(shí)施頁面布局

界面是本平臺(tái)很重要的設(shè)計(jì)要素,平臺(tái)采用DIV+CSS實(shí)現(xiàn)頁面布局和各種定位。CSS是英語Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現(xiàn)HTML 或XML等文件式樣的計(jì)算機(jī)語言。DIV元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的,其中所包含元素的特性由DIV標(biāo)簽的屬性來控制,或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。[3]

使用DIV+CSS的優(yōu)勢(shì)主要表現(xiàn)在表現(xiàn)和內(nèi)容相對(duì)分離,結(jié)構(gòu)清晰,縮減了頁面代碼,能靈活地控制頁面的布局,提高了系統(tǒng)的擴(kuò)展性、易用性,還使得網(wǎng)站改版相對(duì)簡(jiǎn)單,從而降低了網(wǎng)站改版的成本。

3.自動(dòng)生成數(shù)據(jù)庫訪問類

在通常的系統(tǒng)開發(fā)中,每一個(gè)數(shù)據(jù)表都對(duì)應(yīng)一個(gè)專門的數(shù)據(jù)庫訪問類,包括插入、更新等,而類的編寫很繁瑣且容易出錯(cuò)。在本系統(tǒng)的開發(fā)中,開發(fā)人員針對(duì)這個(gè)問題專門編寫了一個(gè)可以自動(dòng)生成數(shù)據(jù)庫訪問類的小控件。如圖6所示,只要將一個(gè)表的CREATE代碼拷入上圖的本文框中,點(diǎn)擊“生成類代碼”按鈕,就可以在下面的文本框中生成此表所對(duì)應(yīng)的類代碼,將代碼拷入此表所對(duì)應(yīng)的.CS文件中即可?！吧蒊nsert腳本”和“生成Update腳本”兩個(gè)按鈕是生成表所對(duì)應(yīng)的插入和更新的存儲(chǔ)過程代碼。此控件的使用可以大大減少編程人員的工作量,提高代碼編寫的質(zhì)量和速度。

4.在線編輯

申報(bào)精品課程的教師多數(shù)都沒有網(wǎng)站制作的經(jīng)驗(yàn),所以為了便于在網(wǎng)站建設(shè)中上傳內(nèi)容,在網(wǎng)站制作后期維護(hù)、更新,系統(tǒng)采用在線編輯技術(shù),能夠在網(wǎng)頁上實(shí)現(xiàn)許多桌面編輯軟件所具有的可視編輯功能,可以快速填充內(nèi)容,提高開發(fā)效率,也便于教師使用,如圖7所示。

在線編輯器不僅支持文本的修改,格式的調(diào)整,還可以插入表格、圖片、動(dòng)畫、視頻、超鏈接等,使教師能夠在可視化的界面上方便快速地上傳、修改或刪除課程內(nèi)容,提高課程建設(shè)的速度和質(zhì)量。

5.Sliverlight和Ajax技術(shù)

Silverlight2.0是微軟于2008年6月發(fā)布的一個(gè)跨瀏覽器、跨客戶平臺(tái)的技術(shù),能夠設(shè)計(jì)、開發(fā)和發(fā)布有多媒體體驗(yàn)與富交互(RIA,Rich Interface Application)的網(wǎng)絡(luò)交互程序。Silverlight提供了一個(gè)強(qiáng)大的平臺(tái),能夠開發(fā)出具有專業(yè)圖形、音頻和視頻的Web應(yīng)用程序,增強(qiáng)了用戶體驗(yàn),同時(shí),它還提供了強(qiáng)大的工具來提高開發(fā)人員的工作效率。Silverlight支持C#、JavaScript、Visual Basic等動(dòng)態(tài)和靜態(tài)語言,支持互聯(lián)網(wǎng)上最流行的音頻和視頻格式,使創(chuàng)建輸入表格,加載數(shù)據(jù),上傳二進(jìn)制或文本信息都變得更加便捷。

Ajax是Asynchronous JavaScript+XML的簡(jiǎn)寫,該技術(shù)可以為用戶提供更為自然的瀏覽體驗(yàn)。Ajax提供與服務(wù)器異步通信的能力,從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax,可以在用戶單擊按鈕時(shí),使用JavaScript和DHTML立即更新UI,并向服務(wù)器發(fā)出異步請(qǐng)求,以執(zhí)行更新或查詢數(shù)據(jù)庫。當(dāng)請(qǐng)求返回時(shí),就可以使用JavaScript和CSS來相應(yīng)地更新UI,而不是刷新整個(gè)頁面,用戶甚至不知道瀏覽器正在與服務(wù)器通信:Web站點(diǎn)看起來是即時(shí)響應(yīng)的。

6.流媒體技術(shù)

國(guó)家精品課程“需在網(wǎng)上提供不少于45分鐘的現(xiàn)場(chǎng)教學(xué)錄像”,這就要求網(wǎng)站能提供流媒體播放功能。流媒體是指采用流式傳輸?shù)姆绞皆贗nternet播放的媒體格式,如音頻、視頻、flash等多媒體文件。與傳統(tǒng)的播放方式不同,流媒體在播放前并不下載整個(gè)文件,而是將部分內(nèi)容緩存,使流媒體數(shù)據(jù)流邊傳送邊播放,這樣就節(jié)省了下載等待時(shí)間和存儲(chǔ)空間。要?jiǎng)討B(tài)實(shí)現(xiàn)在線點(diǎn)播,客戶端必須能夠支持Windows Media Player或者 RealPlayer等常見媒體播放器,用戶可交互地選擇播放音視頻課件,并可對(duì)音視頻課件實(shí)現(xiàn)播放、暫停、停止、跳躍等功能。

四、結(jié)束語

在精品課程建設(shè)過程中,精品課程網(wǎng)站的建設(shè)是一個(gè)必不可少的環(huán)節(jié)。本文提出了一個(gè)精品課程網(wǎng)站動(dòng)態(tài)生成平臺(tái)的設(shè)計(jì)方案,并在ASP.NET平臺(tái)上開發(fā)出了相應(yīng)的系統(tǒng)。本系統(tǒng)簡(jiǎn)單實(shí)用,簡(jiǎn)化了精品課程網(wǎng)站制作的流程,可以使教師在很短的時(shí)間內(nèi)建成符合評(píng)審指標(biāo)并具有一定個(gè)性化的精品課程網(wǎng)站,大大減輕了教師和教育技術(shù)人員的工作量。本平臺(tái)在后續(xù)的研發(fā)中功能還將不斷完善,應(yīng)用的范圍也可以從精品課程網(wǎng)站擴(kuò)大到一般的課程網(wǎng)站,力爭(zhēng)做成一個(gè)比較通用的網(wǎng)站自動(dòng)生成平臺(tái),在教學(xué)中發(fā)揮更大的效益。

參考文獻(xiàn):

[1]柳強(qiáng),胡雪飛.高級(jí)英語精品課程網(wǎng)站設(shè)計(jì)和建設(shè)[J].中國(guó)教育信息化,2008(3):67.

[2]Kouresh Ardestani.高效掌握ADO.NET——C#編程篇[M].北京:清華大學(xué)出版社,2003.

[3]http://baike.baidu.com/view/942429.htm.

[4]馬偉鋒,雷運(yùn)發(fā).基于MSHTML的精品課程網(wǎng)站自動(dòng)生成系統(tǒng)的實(shí)現(xiàn)[J].浙江科技學(xué)院學(xué)報(bào),2006(6):121-123.

[5]http://www.it.com.cn/f/edu/077/12/445198.htm.

[6]陳以海.高校精品課程網(wǎng)站建設(shè)探索[J].中國(guó)教育信息化,2008(1):52-54.

[7]龔志武.高校精品課程建設(shè)的研究與實(shí)踐[J].現(xiàn)代遠(yuǎn)程教育研究,2008(1).

[8]郝剛.ASP.NET 2.0 開發(fā)指南[M].北京:人民郵電出版社,2006.

[9]鄭常青.Web標(biāo)準(zhǔn)化設(shè)計(jì)——精品課程網(wǎng)站建設(shè)幾點(diǎn)心得[J].中國(guó)科教創(chuàng)新導(dǎo)刊,2007.

[10]http://hi.baidu.com/qihongchao1983/blog/item/6a8ffbcad358c517be09e60a.html.

(編輯:楊馥紅)