北京大学教学发展信息系统的开发

杨公义，何 山，王肖群，曾 腾

（北京大学 教师教学发展中心，北京 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应用系统自主开发；何山，北京大学教师教学发展中心副主任；王肖群，高级工程师，研究方向：教育理论与教育管理，计算机软件及计算机应用，互联网技术；曾腾，工程师，研究方向：媒体制作艺术和教育品牌传播。