北京大學教學發展信息系統的開發

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

（北京大學 教師教學發展中心，北京 100871）

北京大學教學發展信息系統的開發

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

（北京大學 教師教學發展中心，北京 100871）

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

系統設計；系統開發；教學發展信息系統；活動日歷；jQuery的CLNDR插件

0 引言

教師教學能力提高和教育教學改革發展研究是北京大學促進教師教學發展的重要工作，為了更好地實施這些工作，北京大學教師教學發展中心在充分進行國際國內調研的基礎上設計和開發了教學發展信息系統（獨立域名tal.pku.edu.cn或者在北大教發中心官網cetl.pku.edu.cn單擊“教學發展”）。

1 教學發展信息系統的系統設計

1.1 教學發展信息系統的功能模塊

教學發展信息系統的功能模塊如圖1所示。系統包括首頁模塊和一級導航模塊[1]。

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

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

圖1 教學發展信息系統功能模塊Fig.1 Function module of information system for excellent teaching and learning

1.2 教學發展信息系統的操作流程

教學發展信息系統的操作流程如圖2所示。科室級操作員登錄系統后，可以新增、編輯、修改、刪除欄目信息，這時信息只有登錄用戶才能查看。科室級審核員登錄系統后，對信息進行審核同時可以上下移動調整信息，對于審核通過的信息才能在教學發展信息系統的相應欄目中顯示，但這里還不能在首頁模塊中顯示。科室級審核員可以推薦某條信息進入首頁某個模塊，中心主任級管理員登錄后批準某條被推薦的信息進入首頁某個模塊，對于審核通過的信息，會顯示在首頁的某個模塊中。

1.3 系統總體用例

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

圖2 教學發展信息系統信息流程圖Fig.2 Information flowchart of information system for excellent teaching and learning

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

2 教學發展信息系統的前臺界面與功能設計

2.1 教學發展信息系統首頁的界面與功能設計

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

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

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

活動日歷的下方是最新活動模塊，這是程序根據活動日歷模塊中的內容，把當前日期之后最近的活動檢索出來。最新活動中有一個活的日歷小圖標，顯示最新活動的月、日和星期，日歷小圖標右側顯示最新活動的內容摘要。

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

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

教師感言模塊的下面是版權所有和6個相關鏈接，單擊后進入相應的官方網站。

2.2 教學發展信息系統二級瀏覽頁的界面與功能設計

圖3 教學發展信息系統系統總體用例Fig.3 System overall use case of information system for excellent teaching and learning

圖4 教學發展信息系統前臺首頁Fig.4 Home page of information system for excellent teaching and learning

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

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

圖7 教學發展信息系統教師感言二級瀏覽頁Fig.7 Second level browse page for teacher comments module of information system for excellent teaching and learning

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

圖 6是活動日歷模塊的二級瀏覽頁。進入圖6的方式有2種：①在圖4首頁中單擊活動日歷右側的“更多”，②在圖9所示的活動日歷模塊的三級內容頁中單擊二級導航中的“活動日歷”。活動日歷模塊的二級瀏覽頁圖6和圖5的區別在于，在圖6中每條信息的左側都顯示一個日歷圖標，日歷圖標中有月、日、星期，圖6顯示的元數據比圖5多了地點和內容摘要。

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

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

2.3 教學發展信息系統三級內容頁的界面與功能設計

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

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

圖9 教學發展信息系統三級內容頁Fig.9 Third level content page of information system for excellent teaching and learning

圖9中教學發展信息系統多個模塊的三級內容頁中顯示的元數據包括：標題、日期、瀏覽次數、內容、上一篇的標題及超鏈接、下一篇的標題及超鏈接。

圖10是在教學發展信息系統中單擊“資源”一級導航欄下面的“教學案例”二級導航欄的后進入的三級內容頁。圖10和圖9的區別在于導航欄不同。圖9的導航欄為“首頁/模塊名稱”，圖10的導航欄為“首頁/一級導航欄名稱/模塊名稱”。進入圖 10的方式為在圖 8“教學案例”二級瀏覽頁中單擊某一個教學案例的標題。

圖11是教學發展信息系統“項目”一級導航欄的三級內容頁。進入圖11的方式是，在一級導航欄中單擊“項目”的某一個下拉二級導航菜單項。

3 教學發展信息系統的后臺界面與功能設計

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

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

圖10 教學發展信息系統-資源-教學案例三級內容頁Fig.10 Third level content page for resource's teaching case module of information system for excellent teaching and learning

圖11 教學發展信息系統-項目-三級內容頁Fig.11 Third level content page for project module of information system for excellent teaching and learning

圖12 教學發展信息系統后臺信息瀏覽頁Fig.12 Backstage information browsing page of information system for excellent teaching and learning

圖13 教學發展信息系統后臺信息編輯頁Fig.13 Backstage information edit page of information system for excellent teaching and learning

4 利用jQuery的CLNDR插件在首頁中根據后臺數據庫動態繪制活動日歷

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

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

上述代碼的整體思想為從數據庫中查詢“活動日歷”模塊得到本月所有的活動，將每個活動的日期存入jsp變量date中，將每個活動的標題存入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 結語

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

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

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

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

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

[5] 林菡, 陳書林, 翁玲敏, 等. 學生會管理系統的設計與實現[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

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

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

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