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

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

北京大學(xué)教學(xué)發(fā)展信息系統(tǒng)的開發(fā)

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

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

該研究設(shè)計和實現(xiàn)了北京大學(xué)教學(xué)發(fā)展信息系統(tǒng)。首先，論述了教學(xué)發(fā)展信息系統(tǒng)的系統(tǒng)設(shè)計,包括功能模塊、操作流程、系統(tǒng)總體用例。其次，論述了教學(xué)發(fā)展信息系統(tǒng)的前臺和后臺的界面與功能設(shè)計。最后，利用jQuery的CLNDR插件在首頁中根據(jù)后臺數(shù)據(jù)庫動態(tài)繪制活動日歷。

系統(tǒng)設(shè)計；系統(tǒng)開發(fā)；教學(xué)發(fā)展信息系統(tǒng)；活動日歷；jQuery的CLNDR插件

0 引言

教師教學(xué)能力提高和教育教學(xué)改革發(fā)展研究是北京大學(xué)促進教師教學(xué)發(fā)展的重要工作，為了更好地實施這些工作，北京大學(xué)教師教學(xué)發(fā)展中心在充分進行國際國內(nèi)調(diào)研的基礎(chǔ)上設(shè)計和開發(fā)了教學(xué)發(fā)展信息系統(tǒng)（獨立域名tal.pku.edu.cn或者在北大教發(fā)中心官網(wǎng)cetl.pku.edu.cn單擊“教學(xué)發(fā)展”）。

1 教學(xué)發(fā)展信息系統(tǒng)的系統(tǒng)設(shè)計

1.1 教學(xué)發(fā)展信息系統(tǒng)的功能模塊

教學(xué)發(fā)展信息系統(tǒng)的功能模塊如圖1所示。系統(tǒng)包括首頁模塊和一級導(dǎo)航模塊[1]。

首頁模塊包括方形首頁slideshow、新聞、重點項目和資源、活動日歷、最新活動、活動公告、版權(quán)所有和相關(guān)鏈接、教師感言。重點項目和資源包括8項：青年教師教學(xué)發(fā)展計劃、慕課相關(guān)教育技術(shù)培訓(xùn)、教學(xué)策略、教師教育技術(shù)一級培訓(xùn)、助教學(xué)校、教學(xué)案例、教學(xué)主題沙龍、推薦閱讀書目。版權(quán)所有和相關(guān)鏈接包括6項：北京大學(xué)、教務(wù)部、研究生院、人事部、教師教學(xué)發(fā)展中心、技術(shù)支持北京大學(xué)教師教學(xué)發(fā)展中心。

一級導(dǎo)航模塊包括6項：主頁、項目、報名、政策、資源、服務(wù)。項目有5個下拉項：青年教師教學(xué)發(fā)展計劃、慕課相關(guān)教育技術(shù)培訓(xùn)、教師教育技術(shù)一級培訓(xùn)、助教學(xué)校、教學(xué)主題沙龍。資源有4個下拉項:教學(xué)策略、教學(xué)案例、教學(xué)工具與軟件、推薦閱讀書目。

圖1 教學(xué)發(fā)展信息系統(tǒng)功能模塊Fig.1 Function module of information system for excellent teaching and learning

1.2 教學(xué)發(fā)展信息系統(tǒng)的操作流程

教學(xué)發(fā)展信息系統(tǒng)的操作流程如圖2所示?？剖壹壊僮鲉T登錄系統(tǒng)后，可以新增、編輯、修改、刪除欄目信息，這時信息只有登錄用戶才能查看?？剖壹墝徍藛T登錄系統(tǒng)后，對信息進行審核同時可以上下移動調(diào)整信息，對于審核通過的信息才能在教學(xué)發(fā)展信息系統(tǒng)的相應(yīng)欄目中顯示，但這里還不能在首頁模塊中顯示?？剖壹墝徍藛T可以推薦某條信息進入首頁某個模塊，中心主任級管理員登錄后批準某條被推薦的信息進入首頁某個模塊，對于審核通過的信息，會顯示在首頁的某個模塊中。

1.3 系統(tǒng)總體用例

系統(tǒng)總體用例如圖 3所示[2]，前臺訪客只能訪問教學(xué)發(fā)展信息系統(tǒng)中已經(jīng)審核發(fā)布的信息。對于在教學(xué)發(fā)展信息系統(tǒng)中未經(jīng)審核的信息，只能被登錄用戶訪問。教學(xué)發(fā)展信息系統(tǒng)的登錄用戶可以進行的共同操作包括登錄、個人資料編輯、我的云盤。登錄用例需要輸入用戶名、密碼、驗證碼。個人資料編輯用例需要輸入的元數(shù)據(jù)為：用戶名、真實姓名、密碼、再次輸入密碼、聯(lián)系電話、電子郵箱。我的云盤為用戶提供了一個存放資源的網(wǎng)上空間，元數(shù)據(jù)包括：標(biāo)題、時間、內(nèi)容、視頻地址、標(biāo)題URL、點標(biāo)題開什么（下拉項為：內(nèi)容、附件、標(biāo)題URL、視頻下載、視頻播放）、附件。

圖2 教學(xué)發(fā)展信息系統(tǒng)信息流程圖Fig.2 Information flowchart of information system for excellent teaching and learning

中心主任級管理員、科室級審核員、科室級操作員所能進行的共同用例為信息管理，他們所能管理的模塊數(shù)量不同，他們操作不同模塊時有權(quán)編輯的屬性列不同。信息管理用例的全部的操作包括：新增、編輯、刪除、查詢、分頁瀏覽、發(fā)布審核、推薦某條信息進入首頁某個模塊、批準某條信息進入首頁模塊?？剖壹墝徍藛T比科室級操作員增加的權(quán)限為：發(fā)布審核、推薦某條信息進入首頁某個模塊。中心主任級管理員比科室級審核員增加的權(quán)限為：管理科室級審核員和科室級操作員兩類下級賬戶，批準某條信息進入首頁模塊、首頁的系統(tǒng)配置。

2 教學(xué)發(fā)展信息系統(tǒng)的前臺界面與功能設(shè)計

2.1 教學(xué)發(fā)展信息系統(tǒng)首頁的界面與功能設(shè)計

教學(xué)發(fā)展信息系統(tǒng)的前臺首頁如圖4所示，首頁中顯示了每個模塊的前若干條信息。頂部是網(wǎng)站banner和一級導(dǎo)航欄[3]。一級導(dǎo)航下面是方形首頁slideshow，這個模塊的信息是來自新聞、活動公告等其他模塊，在其他模塊中由科室操作員上傳的信息，經(jīng)過科室審核員的推薦，再經(jīng)過主任級管理員的批準才能顯示到這里，每條信息的附件圖片在這里以slideshow的形式展示，鼠標(biāo)懸停在圖片上時，圖片的左右會出現(xiàn)向左和向右的箭頭，單擊箭頭可以切換到上一張和下一張 slideshow，單擊任一張slideshow會進入如圖9所示的三級內(nèi)容頁。

方形首頁slideshow的左下方是新聞模塊，這里顯示前4條信息，每條信息顯示了標(biāo)題、日期，如果標(biāo)題字數(shù)過多，程序會自動截取并后綴“…”。新聞模塊的右側(cè)是活動公告模塊，與新聞模塊的區(qū)別在于不顯示日期，但在標(biāo)題的開頭以方括號括起來顯示活動公告的類別。

活動公告模塊的右側(cè)是活動日歷模塊，這是一個活動的萬年歷，萬年歷默認切換到當(dāng)前月，并把當(dāng)前日期以背景色突出顯示，用戶可以單擊頂部的向左或向右箭頭切換年月，程序根據(jù)數(shù)據(jù)庫讓萬年歷把當(dāng)前月中有活動的日期以紅色顯示，程序自動為這個紅色的日期增加了超鏈接，單擊紅色的有活動的日期，會進入如圖9所示的三級內(nèi)容頁。程序根據(jù)后臺數(shù)據(jù)庫判斷，對于沒有活動安排的日期，則不以紅色顯示，并且沒有超鏈接。單擊活動日歷右側(cè)的“更多”會進入圖6所示的活動日歷二級瀏覽頁。

活動日歷的下方是最新活動模塊，這是程序根據(jù)活動日歷模塊中的內(nèi)容，把當(dāng)前日期之后最近的活動檢索出來。最新活動中有一個活的日歷小圖標(biāo)，顯示最新活動的月、日和星期，日歷小圖標(biāo)右側(cè)顯示最新活動的內(nèi)容摘要。

最新活動模塊的下面是重點項目和資源模塊，這里有8個項目，單擊任一項目的圖片進入相應(yīng)的模塊，比如單擊“慕課相關(guān)教育技術(shù)培訓(xùn)”進入圖11。

重點項目和資源模塊的下面是教師感言模塊，這里顯示了教師感言模塊中前面的3條信息。每條信息顯示了教師感言的摘要。單擊“查看更多感言”進入圖7所示的教師感言二級瀏覽頁。單擊“查看全文”進入圖9所示的三級內(nèi)容。

教師感言模塊的下面是版權(quán)所有和6個相關(guān)鏈接，單擊后進入相應(yīng)的官方網(wǎng)站。

2.2 教學(xué)發(fā)展信息系統(tǒng)二級瀏覽頁的界面與功能設(shè)計

圖3 教學(xué)發(fā)展信息系統(tǒng)系統(tǒng)總體用例Fig.3 System overall use case of information system for excellent teaching and learning

圖4 教學(xué)發(fā)展信息系統(tǒng)前臺首頁Fig.4 Home page of information system for excellent teaching and learning

圖5 教學(xué)發(fā)展信息系統(tǒng)新聞、活動公告二級瀏覽頁Fig.5 Second level browse page for news and events bulletin module of information system for excellent teaching and learning

圖6 教學(xué)發(fā)展信息系統(tǒng)活動日歷二級瀏覽頁Fig.6 Second level browse page for events calendar module of information system for excellent teaching and learning

圖7 教學(xué)發(fā)展信息系統(tǒng)教師感言二級瀏覽頁Fig.7 Second level browse page for teacher comments module of information system for excellent teaching and learning

圖5是新聞、活動公告兩個模塊的二級瀏覽頁，不同模塊的二級瀏覽頁的區(qū)別在于二級導(dǎo)航不同[4]。進入二級瀏覽頁的入口有3個：①可以圖4首頁中單擊新“新聞”右側(cè)的“更多”，②可以在圖4首頁中單擊“活動公告”右側(cè)的“更多”，③可以在圖9所示的三級內(nèi)容頁中單擊二級導(dǎo)航。在圖5的二級瀏覽頁中顯示了每條信息的日期和標(biāo)題。有功能完備的分頁功能，可以設(shè)置頁面大小，可以輸入要跳轉(zhuǎn)到頁數(shù)后單擊跳轉(zhuǎn)進入，可以單擊上一頁、下一頁、首頁、末頁進行跳轉(zhuǎn)。

圖 6是活動日歷模塊的二級瀏覽頁。進入圖6的方式有2種：①在圖4首頁中單擊活動日歷右側(cè)的“更多”，②在圖9所示的活動日歷模塊的三級內(nèi)容頁中單擊二級導(dǎo)航中的“活動日歷”?；顒尤諝v模塊的二級瀏覽頁圖6和圖5的區(qū)別在于，在圖6中每條信息的左側(cè)都顯示一個日歷圖標(biāo)，日歷圖標(biāo)中有月、日、星期，圖6顯示的元數(shù)據(jù)比圖5多了地點和內(nèi)容摘要。

圖7是教師感言的模塊的二級瀏覽頁。進入圖7的方式有2種：①在圖4首頁中教師感言模塊中單擊的“查看更多感言”，②在圖9所示教師感言模塊的三級內(nèi)容頁中單擊二級導(dǎo)航中的“教師感言”。教師感言的模塊的二級瀏覽頁圖7和圖5的區(qū)別在于，圖7比圖5少了日期元數(shù)據(jù)，多了附件圖片元數(shù)據(jù)，圖7中如果某條教師發(fā)的感言沒有上傳附件圖片，則顯示默認的圖片。

圖 8是教學(xué)案例模塊的二級瀏覽頁。進入圖8的方式有2種：①在圖4首頁的一級導(dǎo)航欄目中單擊“資源”的下拉菜單中的“教學(xué)案例”，②在圖10所示教學(xué)案例模塊的三級內(nèi)容頁中單擊二級導(dǎo)航中的“教學(xué)案例”。教學(xué)案例模塊的二級瀏覽頁圖8與圖5的區(qū)別在于，圖8比圖5多了左側(cè)二級樹形菜單導(dǎo)航，圖8中顯示的元數(shù)據(jù)比圖5少了日期，多了姓名和學(xué)院。

2.3 教學(xué)發(fā)展信息系統(tǒng)三級內(nèi)容頁的界面與功能設(shè)計

圖8 教學(xué)發(fā)展信息系統(tǒng)-資源-教學(xué)案例二級瀏覽頁Fig.8 Second level browse page for resource's teaching case module of information system for excellent teaching and learning

圖9是教學(xué)發(fā)展信息系統(tǒng)多個模塊的三級內(nèi)容頁。進入圖9的方式有13種：①在圖4首頁中，單擊的方形首頁slideshow模塊單擊任一張圖片，②在圖 4首頁中單擊新聞模塊的任一條新聞，③在圖 4首頁中單擊活動公告模塊的任一條活動公告，④在圖4首頁中單擊活動日歷中的紅色顯示的日期，⑤在圖4首頁中單擊最新活動中的標(biāo)題，⑥在圖4首頁中單擊教師感言模塊的每條感言，⑦在圖5所示的新聞模塊的二級瀏覽頁中單擊任一條新聞，⑧在圖5所示的活動公告模塊的二級瀏覽頁中單擊任一條活動公告，⑨在圖6所示的活動日歷二級瀏覽頁中單擊任一條活動日歷的標(biāo)題，⑩在圖7所示的教師感言二級瀏覽頁中單擊任一條教師 感 言的標(biāo)題，在一級導(dǎo)航欄中單擊政策，在一級導(dǎo)航欄中單擊服務(wù)，在一級導(dǎo)航欄中單擊報名。

圖9 教學(xué)發(fā)展信息系統(tǒng)三級內(nèi)容頁Fig.9 Third level content page of information system for excellent teaching and learning

圖9中教學(xué)發(fā)展信息系統(tǒng)多個模塊的三級內(nèi)容頁中顯示的元數(shù)據(jù)包括：標(biāo)題、日期、瀏覽次數(shù)、內(nèi)容、上一篇的標(biāo)題及超鏈接、下一篇的標(biāo)題及超鏈接。

圖10是在教學(xué)發(fā)展信息系統(tǒng)中單擊“資源”一級導(dǎo)航欄下面的“教學(xué)案例”二級導(dǎo)航欄的后進入的三級內(nèi)容頁。圖10和圖9的區(qū)別在于導(dǎo)航欄不同。圖9的導(dǎo)航欄為“首頁/模塊名稱”，圖10的導(dǎo)航欄為“首頁/一級導(dǎo)航欄名稱/模塊名稱”。進入圖 10的方式為在圖 8“教學(xué)案例”二級瀏覽頁中單擊某一個教學(xué)案例的標(biāo)題。

圖11是教學(xué)發(fā)展信息系統(tǒng)“項目”一級導(dǎo)航欄的三級內(nèi)容頁。進入圖11的方式是，在一級導(dǎo)航欄中單擊“項目”的某一個下拉二級導(dǎo)航菜單項。

3 教學(xué)發(fā)展信息系統(tǒng)的后臺界面與功能設(shè)計

教學(xué)發(fā)展信息系統(tǒng)信息管理的后臺信息瀏覽頁如圖12所示[5]，圖12是在左側(cè)單擊某個欄目如“新聞公告->新聞”后的效果，在瀏覽頁中可以新增、編輯、刪除、審核、預(yù)覽、上移下移、分頁瀏覽信息，分頁功能包括設(shè)置頁面大小、跳轉(zhuǎn)到某頁、第一頁、下頁、上頁、末頁。在圖12中單擊某條信息右側(cè)的“編輯”按鈕進入信息編輯頁如圖13所示。圖13以縱向視圖編輯各個字段。圖12是簡要顯示幾個最常用的元數(shù)據(jù)，圖13中顯示該模塊的全部元數(shù)據(jù)。模塊之間的元數(shù)據(jù)大同小異，比如“通知公告”包括的元數(shù)據(jù)為：標(biāo)題、時間、內(nèi)容、創(chuàng)建者用戶編號、摘要、關(guān)鍵詞1、關(guān)鍵詞2、審核、審核意見建議、置頂?shù)取⑹醉撃K、點標(biāo)題開什么、批準上主頁、附圖。

所有模塊的顯示風(fēng)格和操作模式是相同的，只是每個模塊的字段不同，字段的不同可能是因為模塊的不同，也可能是登錄用戶的權(quán)限不同。模塊之間的元數(shù)據(jù)大同小異，大部分模塊包括的元數(shù)據(jù)為：標(biāo)題、時間、內(nèi)容、創(chuàng)建者用戶編號、摘要、關(guān)鍵詞1、關(guān)鍵詞2、審核、審核意見建議、首頁模塊、點標(biāo)題開什么、批準上主頁、附圖。這些元數(shù)據(jù)中有幾個需要說明如下，審核下拉選項為：待審核、審核通過、審核未過。當(dāng)下拉框中選擇審核未過時，需要在審核意見建議元數(shù)據(jù)中輸入理由。首頁模塊下拉框用于推薦本條信息到首頁的某個模塊中。批準上主頁下拉框中，可以允許所推薦的信息在首頁的某個模塊中顯示。點標(biāo)題開什么下拉框的內(nèi)容為：內(nèi)容、附件、標(biāo)題 URL；各下拉項的含義為：“內(nèi)容”表示點擊標(biāo)題時顯示的網(wǎng)頁中的內(nèi)容來自上述內(nèi)容元數(shù)據(jù)，“附件”表示點擊標(biāo)題時超級鏈接到所上傳的附件，“標(biāo)題 URL”表示點擊標(biāo)題時超級鏈接到一個用戶輸入的URL。

圖10 教學(xué)發(fā)展信息系統(tǒng)-資源-教學(xué)案例三級內(nèi)容頁Fig.10 Third level content page for resource's teaching case module of information system for excellent teaching and learning

圖11 教學(xué)發(fā)展信息系統(tǒng)-項目-三級內(nèi)容頁Fig.11 Third level content page for project module of information system for excellent teaching and learning

圖12 教學(xué)發(fā)展信息系統(tǒng)后臺信息瀏覽頁Fig.12 Backstage information browsing page of information system for excellent teaching and learning

圖13 教學(xué)發(fā)展信息系統(tǒng)后臺信息編輯頁Fig.13 Backstage information edit page of information system for excellent teaching and learning

4 利用jQuery的CLNDR插件在首頁中根據(jù)后臺數(shù)據(jù)庫動態(tài)繪制活動日歷

圖4前臺首頁中的活動日歷的詳細功能已經(jīng)在前文（三、1.）中說明，活動日歷的特色是在前臺首頁的html中直接繪制出日歷供用戶選擇，而不是使用datepicker之類的表單插件讓用戶點擊input后彈出datepicker讓用戶選擇[6]?；顒尤諝v的開發(fā)采用CLNDR這個jQuery插件。項目地址:http://kylestetz.github.io/CLNDR/下載地址:https://github.com/ kylestetz/CLNDR。用法如下：首先準備兩個為CLNDR服務(wù)的 js文件，分別是JavaScript日期處理類庫 moment-with-locales.min.js（地址 http://momentjs.cn/）和提供了一整套函數(shù)式編程JavaScript實用庫underscore.js(地址為:http://www.css88.com/doc/underscore/)，當(dāng)然jQuery是必須要有的。

在首頁的 jsp文件的 body的最后面引入下面JavaScript代碼：

上述代碼的整體思想為從數(shù)據(jù)庫中查詢“活動日歷”模塊得到本月所有的活動，將每個活動的日期存入jsp變量date中，將每個活動的標(biāo)題存入jsp變量title中，將查看每個活動詳情的超鏈接存入jsp變量url中。再將data、title、url以一定的格式存到JavaScript變量eventArray中。eventArray變量的格式為：

var eventArray = [

{date: '2017-04-10'

, title: '活動1'

, url: 'http://www.pku.edu.cn/'

}, {

date: '2017-04-20'

, title: '活動2'

, url: 'http://www.pku.edu.cn/'

}, {

date: '2017-04-21'

, title: '活動3'

, url: 'http://www.pku.edu.cn/'

,];

5 結(jié)語

北京大學(xué)教發(fā)中心的各級用戶通過教學(xué)發(fā)展信息系統(tǒng)以一定的流程發(fā)布和審核信息，根據(jù)信息被審核的不同級別，有的信息只能供教學(xué)發(fā)展登錄用戶訪問，有的信息面向社會公開。有的信息可在教學(xué)發(fā)展信息系統(tǒng)的首頁某個模塊中展示，有的信息可在教學(xué)發(fā)展信息系統(tǒng)的非首頁模塊中展示。有的信息可以被置頂，有的信息可以顯示為最新。教師們把網(wǎng)站當(dāng)成教學(xué)發(fā)展、交流溝通的平臺，利用新聞和公告模塊了解最新的動態(tài)，利用活動日歷和最新活動一目了然地了解教發(fā)中心的活動安排，利用教師感言模塊相互交流和溝通，利用項目模塊參與教發(fā)中心的各類項目，利用資源模塊下載和學(xué)習(xí)教發(fā)中心提供的各類資源，利用政策模塊了解教學(xué)發(fā)展最新的政策，利用服務(wù)模塊向中心申請各種服務(wù)，利用報名模塊進行各類活動的報名。

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

[2] 楊公義. 基于BigBlueButton為Blackboard增加交互式語音視頻虛擬課堂[J]. 軟件, 2016, 37(9): 01-06.

[3] 張宇翔. 面向質(zhì)量評估的高校教學(xué)數(shù)據(jù)中心數(shù)據(jù)模塊的設(shè)計與實踐[J]. 軟件, 2016, 37(4): 51-53.

[4] 沈亮. 基于手機APPGISOLAP 的移動運營商網(wǎng)格集中管理中心系統(tǒng)的設(shè)計與實現(xiàn)[J]. 軟件, 2016, 37(4): 74-83.

[5] 林菡, 陳書林, 翁玲敏, 等. 學(xué)生會管理系統(tǒng)的設(shè)計與實現(xiàn)[J]. 軟件, 2016, 37(4): 107-110.

[6] 日期選擇插件clndr的使用[EB/OL]. [2017-06-29]. http://www.cnblogs.com/newflydd/p/5424256.html.

Development of Information System for Excellent Teaching and Learning of Peking University

YANG Gong-yi, HE Shan, WANG Xiao-qun, ZENG Teng
(Center for Excellent Teaching and Learning, Peking University, Beijing 100871, China)

The study developed the information system for excellent teaching and learning of Peking University.First of all, the system design of the information system is discussed, including function module, operation flow and system overall use case. Secondly, it discusses the interface and function design of the onstage and backstage of the information system. Finally, using jQuery′s CLNDR plug-in, the active calendar is drawn according to the background database in the home page.

System design; System development; Teaching development information system; CLNDR plugin for jQuery

TP311

A

10.3969/j.issn.1003-6970.2017.11.001

本文著錄格式：楊公義，何山，王肖群，等. 北京大學(xué)教學(xué)發(fā)展信息系統(tǒng)的開發(fā)[J]. 軟件，2017，38（11）：01-11

本文系中國下一代互聯(lián)網(wǎng)示范工程CNGI項目的子項目“建設(shè)網(wǎng)絡(luò)高清視頻直播教室示范點”(CNGI2008-129-116)的研究成果

楊公義(1978-)，男，工程師，主要研究方向：流媒體服務(wù)器的二次開發(fā)、Blackboard教學(xué)系統(tǒng)的二次開發(fā)、基于SSH的J2EE應(yīng)用系統(tǒng)自主開發(fā)；何山，北京大學(xué)教師教學(xué)發(fā)展中心副主任；王肖群，高級工程師，研究方向：教育理論與教育管理，計算機軟件及計算機應(yīng)用，互聯(lián)網(wǎng)技術(shù)；曾騰，工程師，研究方向：媒體制作藝術(shù)和教育品牌傳播。