楊公義，何 山，王肖群，曾 騰

（北京大學(xué) 教師教學(xué)發(fā)展中心，北京 100871）

0 引言

視頻公開課是我國高等教育適應(yīng)世界高等教育發(fā)展的新趨勢。在《教育部關(guān)于國家精品開放課程建設(shè)的實(shí)施意見》（教高[2011]8號(hào)）的政策指引下，從2011年開始，教育部組織“985工程”高校先行啟動(dòng)了視頻公開課建設(shè)試點(diǎn)工作。2012年，教育部將“精品視頻公開課”建設(shè)學(xué)校范圍擴(kuò)大至“211工程”高校及少量具有鮮明學(xué)科特色優(yōu)勢的非“211工程”高校。我國高水平大學(xué)率先向社會(huì)推出“中國大學(xué)視頻公開課”[1]。北京大學(xué)2012年開始自主研發(fā)并上線“北京大學(xué)公開課信息系統(tǒng)”（網(wǎng)址為http://opencourse.pku.edu.cn以下簡稱“北大公開課”），以該系統(tǒng)為支撐平臺(tái)把北大優(yōu)質(zhì)教學(xué)資源向社會(huì)開放。

1 北大公開課的設(shè)計(jì)目標(biāo)

開發(fā)北大公開課的總體設(shè)計(jì)目標(biāo)是推動(dòng)高等教育開放，促進(jìn)優(yōu)質(zhì)資源普及和共享，實(shí)現(xiàn)北京大學(xué)服務(wù)社會(huì)和文化傳承創(chuàng)新的使命和社會(huì)責(zé)任，積極發(fā)揮文化育人作用、推動(dòng)學(xué)習(xí)型社會(huì)建設(shè)。面向廣大大學(xué)生和社會(huì)大眾免費(fèi)開放的公開課網(wǎng)站，向社會(huì)展示北大教育風(fēng)采[2]。開發(fā)北大公開課把北大近年內(nèi)開設(shè)的優(yōu)質(zhì)教學(xué)資源向社會(huì)開放。優(yōu)質(zhì)教學(xué)資源主要是指課程資源。課程資源主要是指全程課程錄像、課程介紹、教師介紹、教學(xué)大綱、指定教材、參考文獻(xiàn)等。

北大公開課的詳細(xì)設(shè)計(jì)目標(biāo)是集用戶管理、院系管理、課程管理、課程錄像管理、課程介紹管理、教師介紹管理、教學(xué)大綱管理、指定教材管理、參考文獻(xiàn)管理多功能于一體。能全方位地將北大優(yōu)質(zhì)教學(xué)資源向社會(huì)公開。

2 北大公開課的用例設(shè)計(jì)

2.1 北大公開課的用戶管理的用例設(shè)計(jì)

北大公開課的用戶管理用例如圖1所示。北大公開課的用戶有四類，超級(jí)管理員、建課管理員、課程內(nèi)容管理員、前臺(tái)訪客。這四類用戶的權(quán)限劃分如下：超級(jí)管理員管理建課管理員和課程內(nèi)容管理員，建課管理員管理課程，課程內(nèi)容管理員管理課程內(nèi)容，前臺(tái)訪客只能查看后臺(tái)發(fā)布的并審核通過的各種課程資源[3]。本文中管理功能包括：前后臺(tái)分頁瀏覽、前后臺(tái)查詢、后臺(tái)新增、后臺(tái)編輯、后臺(tái)刪除。

圖1 北大公開課的用戶管理用例Fig.1 User management use case of open course in peking university

2.2 北大公開課的信息管理的用例設(shè)計(jì)

北大公開課的信息管理的用例設(shè)計(jì)如圖 2所示，前臺(tái)訪客只能北大公開課中已經(jīng)審核發(fā)布的信息。北大公開課的登錄用戶的三個(gè)共同用例為：登錄、個(gè)人資料編輯、我的云盤管理。此外，超級(jí)管理員的兩個(gè)用例為：批準(zhǔn)某條信息進(jìn)入首頁某個(gè)欄目、首頁與系統(tǒng)管理。建課管理員的一個(gè)用例為：課程管理。課程內(nèi)容管理員的兩個(gè)用例為：推薦某條信息進(jìn)入首頁某個(gè)欄目、課程內(nèi)容管理。其中課程內(nèi)容管理包括六個(gè)用例：課程錄像管理、課程介紹管理、教師介紹管理、教學(xué)大綱管理、指定教材管理、參考文獻(xiàn)管理。這些管理類用例都可以抽象為信息管理用例。信息管理用例管理包括五個(gè)用例：新增信息、編輯信息、刪除信息、查詢信息、分頁瀏覽信息。

圖2 北大公開課的信息管理用例Fig.2 Information management use case

3 北大公開課的功能模塊和信息流程

3.1 北大公開課的功能模塊

北大公開課的功能模塊如圖3左側(cè)所示。北大公開課的功能模塊包括：首頁模塊、關(guān)鍵詞搜索、各級(jí)導(dǎo)航模塊。首頁模塊包括下列 7個(gè)模塊：logo和banner、長形首頁slideshow、一級(jí)導(dǎo)航、最新課程、熱門課程、新聞/公告、版權(quán)所有和訪問統(tǒng)計(jì)。各級(jí)導(dǎo)航模塊包括下面6個(gè)一級(jí)導(dǎo)航模塊：首頁、北大課程、視頻公開課、資源共享課、英語品牌課、網(wǎng)站介紹。“北大課程”一級(jí)導(dǎo)航包括5個(gè)二級(jí)導(dǎo)航模塊：理學(xué)部、信息與工程學(xué)部、人文學(xué)部、社會(huì)學(xué)部、繼續(xù)教育部。每個(gè)二級(jí)導(dǎo)航模塊又包含有若干個(gè)以院系名稱為標(biāo)題的三級(jí)導(dǎo)航模塊。下面4個(gè)模塊存在于所有的模塊之中：logo和banner模塊、版權(quán)所有和訪問統(tǒng)計(jì)模塊、關(guān)鍵詞搜索模塊、一級(jí)導(dǎo)航模塊。

3.2 北大公開課的信息流程

北大公開課的信息流程如圖3右側(cè)所示。超級(jí)管理員登錄系統(tǒng)進(jìn)行院系管理等系統(tǒng)配置，可創(chuàng)建下列用戶：建課管理員、課程內(nèi)容管理員。建課管理員登錄系統(tǒng)為院系創(chuàng)建課程，并為課程指定課程內(nèi)容管理員。課程內(nèi)容管理員登錄系統(tǒng)管理自己有權(quán)管理的6類課程內(nèi)容：課程錄像、課程介紹、教師介紹、教學(xué)大綱、指定教材、參考文獻(xiàn)。這時(shí)的課程資源只有登錄用戶才能查看。建課管理員登錄系統(tǒng)審核信息、上下移動(dòng)調(diào)整信息，審核通過的信息在網(wǎng)站相應(yīng)欄目(非首頁模塊)中顯示，建課管理員可以推薦某條信息進(jìn)入首頁某個(gè)欄目，超級(jí)管理員登錄后批準(zhǔn)某條被推薦的信息進(jìn)入首頁某個(gè)欄目，經(jīng)過超級(jí)管理員審核的信息顯示在首頁的某個(gè)模塊中。

圖3 北大公開課的功能模塊和信息流程圖Fig.3 Functional modules and information flow charts

4 北大公開課的實(shí)體-關(guān)系設(shè)計(jì)

北大公開課的E-R圖如圖4所示。用戶管理的E-R圖如圖4左側(cè)所示。超級(jí)管理員管理建課管理員和課程內(nèi)容管理員。這三類管理員共用一個(gè)用戶實(shí)體，區(qū)別在于角色屬性的值不同。用戶表的屬性包括：用戶ID、用戶名、密碼、真實(shí)姓名、創(chuàng)建時(shí)間、創(chuàng)建者用戶編號(hào)、創(chuàng)建者院系編號(hào)、創(chuàng)建者院系名稱、角色、學(xué)期、院系編號(hào)、密碼遺失提示問題、提示問題答案、聯(lián)系電話、電子郵箱、二級(jí)院系編號(hào)、二級(jí)院系名稱、審核狀態(tài)（待審核、審核通過、審核未過）。

圖4 北大公開課的E-R圖Fig.4 E-R diagram

信息管理的E-R圖如圖4右側(cè)所示。超級(jí)管理員管理院系實(shí)體，院系實(shí)體的屬性包括：院系ID，院系編號(hào)，院系名稱，課程數(shù)量。超級(jí)管理員批準(zhǔn)和管理要放到首頁的信息實(shí)體，首頁的信息實(shí)體的屬性包括：標(biāo)題、時(shí)間、內(nèi)容、創(chuàng)建者用戶編號(hào)、摘要、關(guān)鍵詞1、關(guān)鍵詞2、審核、審核意見建議、首頁模塊、點(diǎn)標(biāo)題開什么、批準(zhǔn)上主頁、附圖。

建課管理員推薦要放到首頁的信息給超級(jí)管理員，實(shí)現(xiàn)機(jī)制為把上面信息實(shí)體的“批準(zhǔn)上主頁”屬性的值置為 1。建課管理員管理課程實(shí)體，課程實(shí)體的屬性為：課程 ID（主鍵），課程名稱，教師姓名，教師 ID，院系 ID(外鍵關(guān)聯(lián)院系實(shí)體，課程實(shí)體與院系實(shí)體是多對(duì)一的關(guān)系），院系名稱，北大教學(xué)網(wǎng)對(duì)應(yīng)ID，管理員帳號(hào)，是否是公開課，一級(jí)學(xué)科名稱，課程縮略圖地址，本碩標(biāo)志位，視頻數(shù)量，課程訪問量。

課程內(nèi)容管理員管理六類課程資源實(shí)體。這六類課程資源實(shí)體是：課程錄像實(shí)體、課程介紹實(shí)體、教師介紹實(shí)體、教學(xué)大綱實(shí)體、指定教材實(shí)體、參考文獻(xiàn)實(shí)體。課程錄像實(shí)體的屬性包括：視頻ID，課程編號(hào)(外鍵關(guān)聯(lián)課程實(shí)體，課程實(shí)體與課程錄像實(shí)體是一對(duì)多的關(guān)系)，視頻標(biāo)題，第幾次課，第幾段，顯示用的標(biāo)題(課程名稱-第幾講:視頻標(biāo)題)，視頻地址，視頻縮略圖，是否刪除，是否顯示，是否是申報(bào)視頻，視頻訪問量，錄制日期。其他五類實(shí)體的屬性相同：內(nèi)容（富文本編輯器），課程編號(hào)(外鍵關(guān)聯(lián)課程實(shí)體，課程實(shí)體與本實(shí)體是一對(duì)多的關(guān)系)，資源類別標(biāo)識(shí)(2-課程介紹，3-教師介紹，4-教學(xué)大綱，5-指定教材，6-參考文獻(xiàn))。

5 北大公開課的UI設(shè)計(jì)與系統(tǒng)后臺(tái)實(shí)現(xiàn)機(jī)制

北大公開課首頁如圖5所示。首頁從上到下的模塊依次是logo和banner、關(guān)鍵詞搜索、一級(jí)導(dǎo)航、長形首頁slideshow、最新課程、新聞/公告、熱門課程、版權(quán)所有和訪問統(tǒng)計(jì)。為了提高網(wǎng)絡(luò)傳輸速度，并體現(xiàn)首頁模塊化設(shè)計(jì)分而治之的思想，index.html中嵌入了三個(gè)動(dòng)態(tài)程序的 iframe：“長形首頁 slideshow”的iframe的src為slide_pre.jsp，“新聞/公告”的iframe的src為NAN_pre.jsp，“熱門課程”的iframe的src為hot_form.jsp。在這3個(gè)jsp文件中分別組裝一套hql查詢語句，通過request.setAttribute暫時(shí)存儲(chǔ)，再通過jsp:forward跳轉(zhuǎn)到后臺(tái)，在后臺(tái)查詢數(shù)據(jù)庫，將得到結(jié)果通過request.setAttribute暫時(shí)存儲(chǔ)，再通過return new ActionForward返回到前臺(tái)顯示頁面。

圖5 北大公開課首頁Fig.5 Home page

其中“長形首頁slideshow”和“最新課程”模塊中的大圖片以一定的時(shí)間間隔輪流播放，鼠標(biāo)單擊某個(gè)大圖對(duì)應(yīng)的縮略圖時(shí)，則切換到該大圖；對(duì)于“長形首頁slideshow”在當(dāng)前顯示的大圖左右分別有圖標(biāo)“<”和“>”，單擊“<”或“>”圖標(biāo)顯示“上一張”或“下一張”大圖；每張大圖的右下角有“點(diǎn)擊播放”的按鈕，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)有圖片下沉的效果，本文的圖片切換動(dòng)畫、“<”“>”疊加圖標(biāo)、按鈕動(dòng)畫等都是采用css+jquery實(shí)現(xiàn)的，jquery動(dòng)畫的小巧靈活更適合在網(wǎng)上傳輸。單擊“最新課程”的某個(gè)類別（例如：理學(xué)）時(shí)，會(huì)顯示該類別中的若干個(gè)最新課程，該類別的動(dòng)態(tài)內(nèi)容是通過一個(gè)iframe從后臺(tái)調(diào)入的。熱門課程模塊在首頁顯示點(diǎn)擊量最多的六門課程，熱門課程中的內(nèi)容隨著點(diǎn)擊量的變化動(dòng)態(tài)更新。

在圖5首頁中單擊“熱門課程”右側(cè)的“更多>>”進(jìn)入如圖6所示的熱門課程瀏覽頁。熱門課程瀏覽頁把所有的課程按點(diǎn)擊量進(jìn)行排序，并分頁顯示。圖6熱門課程瀏覽頁中顯示了課程實(shí)體的三個(gè)屬性：課程縮略圖、課程名稱、課程訪問量。筆者開發(fā)的所有系統(tǒng)的瀏覽頁中均有如下分頁功能：首頁、上一頁、下一頁、末頁、設(shè)置頁面大小和跳轉(zhuǎn)到某頁的輸入框。

圖6 北大公開課的熱門課程瀏覽頁Fig.6 Hot course page

在圖6熱門課程瀏覽頁中單擊某個(gè)課程的圖片進(jìn)入圖7所示的“課程首頁”。首次進(jìn)入圖7課程首頁時(shí)默認(rèn)顯示的是“課程錄像”模塊，并自動(dòng)播放課程錄像。在圖7課程首頁顯示了“課程”實(shí)體和“課程錄像”實(shí)體的若干屬性。從上到下依次顯示了：“課程”實(shí)體的課程名稱、課程訪問量；課程錄像實(shí)體的“視頻訪問量”；程序加載“課程錄像”實(shí)體的視頻地址并在播放器中播放；在“申報(bào)視頻”那一行顯示了本課程的幾位申報(bào)教師的姓名，單擊教師姓名，會(huì)播放該教師的教學(xué)錄像。在“全程視頻”那個(gè) div中分行地顯示了本課程的全程視頻的標(biāo)題，單擊某一講的標(biāo)題就播放該講的視頻。圖 7的前臺(tái)顯示頁面為/opencourse2/course.jsp。系統(tǒng)在進(jìn)入該顯示頁面之前，后臺(tái)處理程序?yàn)?Course-Action的toIndex方法，通過多個(gè)不同的hql語句從后臺(tái)查詢出所系統(tǒng)需要的數(shù)據(jù)封裝成多個(gè)不同的vo對(duì)象或vo集合對(duì)象，并通過request.setAttribute暫時(shí)存儲(chǔ)，在圖 7的前臺(tái)顯示頁面中，通過從request.getAttribute取出之前存儲(chǔ)的對(duì)象或?qū)ο蠹希詧D7的版式顯示出來。

圖7 北大公開課課程首頁Fig.7 Course home

進(jìn)入圖7課程首頁時(shí)默認(rèn)播放本課程第01講的課程錄像，在圖7“課程首頁”中每播放一講視頻，更新“課程錄像”實(shí)體的視頻訪問量，同時(shí)原子性地級(jí)聯(lián)更新“課程”實(shí)體的課程訪問量。在圖7課程首頁中把視頻播放器窗口做成了一個(gè) iframe，把“本課程訪問量:**** 本講視頻訪問量:****”做成另一個(gè)iframe。當(dāng)用戶單擊某個(gè)“申報(bào)視頻”或“全程視頻”的標(biāo)題時(shí)同時(shí)更新這兩個(gè)iframe中的內(nèi)容。即播放器中的視頻內(nèi)容和播放器左上角的標(biāo)題“課程名稱-第**講”會(huì)級(jí)聯(lián)同步更新。圖7的播放器的功能包括：播放/暫停、拖動(dòng)播放控制條、音量調(diào)整、全屏播放視頻，視頻全屏播放的效果如圖9所示。有關(guān)“視頻播放器”技術(shù)請(qǐng)參見筆者另一篇文章《基于Red5的網(wǎng)絡(luò)教育電視臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)》[4]。

當(dāng)客戶端用戶的電腦中沒安裝flashplayer播放器時(shí)播放器窗口中會(huì)顯示 flashplayer播放器的下載鏈接，如圖8所示。進(jìn)入圖7課程首頁的方法還有：從圖5系統(tǒng)首頁中的“長形首頁slideshow”、“最新課程”、“熱門課程”中單擊任一課程的縮略圖。

圖8 當(dāng)客戶端沒安裝flashplayer時(shí)的提示下載頁Fig.8 The prompt download page appears,when the client does not install flashplayer

圖9 北大公開課課程錄像全屏播放頁Fig.9 Full screen course video playback page

在一級(jí)導(dǎo)航中單擊“北大課程”進(jìn)入圖10所示的北大課程列表頁。這里對(duì)系統(tǒng)中所有的北大課程以院系和學(xué)部進(jìn)行了分類匯總。顯示了“課程實(shí)體”的“課程名稱”、“主講人”，顯示了“課程錄像實(shí)體”的“錄制日期”。

圖10 北大課程頁Fig.10 Course page

如圖11所示，在“關(guān)鍵詞搜索”模塊中可以根據(jù)課程名稱或教師姓名進(jìn)行模糊搜索。這個(gè)form提交到后臺(tái) CourseAction的 findPageResultByKeywords方法進(jìn)行處理。在這個(gè)方法中組裝hql語句，從課程實(shí)體和院系實(shí)體中組合查詢出所需要的屬性并封裝成 vo，返回到前臺(tái)的/opencourse2/findPage-ResultByKeywordsOk.jsp進(jìn)行顯示。

圖11 課程搜索頁Fig. 11 Course search page

在圖7中的二級(jí)導(dǎo)航除的“課程錄像”模塊之外，還包括五個(gè)模塊：課程介紹、教師介紹、教學(xué)大綱、指定教材、參考文獻(xiàn)，這五個(gè)模塊大同小異，例如單擊“教師介紹”進(jìn)入圖12所示。處理邏輯如下，在圖12的后臺(tái)處理程序CourseAction的toIndex方法中把這五個(gè)模塊前臺(tái)需要顯示的信息封裝成五個(gè)vo：editorVO2-editorVO6。查詢這五個(gè)vo的方法是：根據(jù)課程id(course_id)到Editor實(shí)體中查詢，同時(shí)根據(jù) longc的值進(jìn)一步區(qū)別是五個(gè)模塊中的哪一個(gè)，這里longc的值為2-6分別表示課程介紹、教師介紹、教學(xué)大綱、指定教材、參考文獻(xiàn)。先組裝相應(yīng)的hql，再通過editorService.findVOByHql(hql)查詢得到vo，再將vo存入session即session. setAttribute("editor-VO3", editorVO3)。在圖 12的前臺(tái)顯示頁面/opencourse2/course.jsp中根據(jù)用戶單擊五個(gè)模塊之一的某個(gè)模塊，顯示相應(yīng)vo的stringb屬性，這個(gè)屬性是html富文本編輯器。

在一級(jí)導(dǎo)航單擊“視頻公開課”或“資源共享課”進(jìn)入圖13所示的頁面。這兩個(gè)模塊只有內(nèi)容和類別不同，顯示的效果完全一樣。這兩個(gè)模塊均是顯示了課程實(shí)體的下列屬性：縮略圖、摘要、瀏覽次數(shù)。單擊每一個(gè)課程的“進(jìn)入課程”會(huì)跳轉(zhuǎn)到地址類似為：http://cetl.pku.edu.cn/peking/jsp/jspeditor9/to/facade.jsp?dispatch=viewObject&id=21&af=/o pencourse/view3/viewObjectOk.jsp&editor_banner_lo ngb=null&editor_longb=801&longa=9&FATHER_LO NGB=800。經(jīng)過 facade.jsp 進(jìn)行權(quán)限控制之后，跳轉(zhuǎn)到 EditorAction.viewObject()方法進(jìn)行訪問量統(tǒng)計(jì)，然后跳轉(zhuǎn)到/opencourse/view3/viewObjectOk.jsp進(jìn)行顯示。在viewObjectOk.jsp中通過">跳轉(zhuǎn)到愛課程www.icourses.cn的某個(gè)頁面。

圖12 教師介紹頁Fig. 12 Teacher's introduction page

圖13 視頻公開課頁Fig.13 Video open course page

在一級(jí)導(dǎo)航中單擊“英語品牌課”進(jìn)入圖14所示的頁面。圖14英語品牌課和圖10北大課程只是顯示的效果不同，后臺(tái)的實(shí)現(xiàn)機(jī)制是一樣的。圖14顯示了課程實(shí)體的下列屬性：課程名稱、負(fù)責(zé)人/主講人、學(xué)院。圖14中單擊某一個(gè)課程名稱進(jìn)入圖7所示的課程首頁。

圖 15是課程內(nèi)容管理員登錄后臺(tái)之后進(jìn)行教師介紹管理的頁面。課程介紹管理、教學(xué)大綱管理、指定教材管理、參考文獻(xiàn)管理的效果與圖15類似。圖15中欄目內(nèi)容的編輯采用了基于fckeditor的html在線編輯器。

超級(jí)管理員登錄系統(tǒng)可以進(jìn)行用戶管理、院系管理。建課管理員登錄之后可以進(jìn)行課程管理，課程內(nèi)容管理員在圖15中進(jìn)行“教學(xué)錄像管理”，包括大文件上傳，這些功能模塊的設(shè)計(jì)與實(shí)現(xiàn)詳見本文的的姊妹篇《基于 Flash流媒體服務(wù)器的北大視頻資源庫的設(shè)計(jì)與實(shí)現(xiàn)》[5]。

6 結(jié)語

北大公開課自2012年上線以來，目前有視頻課程114門，教學(xué)視頻3364講，131651學(xué)時(shí)的課程視頻學(xué)習(xí)、瀏覽1276338次數(shù)，獨(dú)立訪客425063個(gè)，獨(dú)立IP 430474個(gè)，五年的穩(wěn)定運(yùn)行與多次改版滿足了北大教師和管理者發(fā)布教學(xué)資源的需要，滿足了社會(huì)上各類人群對(duì)北大公開課資源的檢索與學(xué)習(xí)的需求。

圖14 英語品牌課Fig.14 English brand course

圖15 教師介紹管理后臺(tái)Fig.15 Teacher's introduce management backstage

[1] 北京大學(xué)教師教學(xué)發(fā)展中心官方網(wǎng)站[EB/OL]. http://cetl.pku.edu.cn/peking/cetl/view1/jiaoxuezhicheng/02-3.html.

[2] 楊公義, 張亦工. 北京大學(xué)教室管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù), 2015, (4): 115-120.

[3] 楊公義. 北大本科教學(xué)審核評(píng)估支撐系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]中國教育信息化, 2017(17): 82-86.

[4] 楊公義, 張亦工. 基于Red5的網(wǎng)絡(luò)教育電視臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 現(xiàn)代教育技術(shù), 2012, (8): 109-112.

[5] 楊公義. 基于Flash流媒體服務(wù)器的北大視頻資源庫的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件, 2016, 37(8): 5-10.