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

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

0 引言

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

1 北大公開課的設(shè)計目標

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

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

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

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

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

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

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

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

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

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

3.1 北大公開課的功能模塊

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

3.2 北大公開課的信息流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在一級導(dǎo)航單擊“視頻公開課”或“資源共享課”進入圖13所示的頁面。這兩個模塊只有內(nèi)容和類別不同，顯示的效果完全一樣。這兩個模塊均是顯示了課程實體的下列屬性：縮略圖、摘要、瀏覽次數(shù)。單擊每一個課程的“進入課程”會跳轉(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 進行權(quán)限控制之后，跳轉(zhuǎn)到 EditorAction.viewObject()方法進行訪問量統(tǒng)計，然后跳轉(zhuǎn)到/opencourse/view3/viewObjectOk.jsp進行顯示。在viewObjectOk.jsp中通過">跳轉(zhuǎn)到愛課程www.icourses.cn的某個頁面。

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

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

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

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

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

6 結(jié)語

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

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

圖15 教師介紹管理后臺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è)計與實現(xiàn)[J].現(xiàn)代教育技術(shù), 2015, (4): 115-120.

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

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

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