北京大学公开课信息系统的开发

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

（北京大学 教师教学发展中心，北京 100871）

0 引言

视频公开课是我国高等教育适应世界高等教育发展的新趋势。在《教育部关于国家精品开放课程建设的实施意见》（教高[2011]8号）的政策指引下，从2011年开始，教育部组织“985工程”高校先行启动了视频公开课建设试点工作。2012年，教育部将“精品视频公开课”建设学校范围扩大至“211工程”高校及少量具有鲜明学科特色优势的非“211工程”高校。我国高水平大学率先向社会推出“中国大学视频公开课”[1]。北京大学2012年开始自主研发并上线“北京大学公开课信息系统”（网址为http://opencourse.pku.edu.cn以下简称“北大公开课”），以该系统为支撑平台把北大优质教学资源向社会开放。

1 北大公开课的设计目标

开发北大公开课的总体设计目标是推动高等教育开放，促进优质资源普及和共享，实现北京大学服务社会和文化传承创新的使命和社会责任，积极发挥文化育人作用、推动学习型社会建设。面向广大大学生和社会大众免费开放的公开课网站，向社会展示北大教育风采[2]。开发北大公开课把北大近年内开设的优质教学资源向社会开放。优质教学资源主要是指课程资源。课程资源主要是指全程课程录像、课程介绍、教师介绍、教学大纲、指定教材、参考文献等。

北大公开课的详细设计目标是集用户管理、院系管理、课程管理、课程录像管理、课程介绍管理、教师介绍管理、教学大纲管理、指定教材管理、参考文献管理多功能于一体。能全方位地将北大优质教学资源向社会公开。

2 北大公开课的用例设计

2.1 北大公开课的用户管理的用例设计

北大公开课的用户管理用例如图1所示。北大公开课的用户有四类，超级管理员、建课管理员、课程内容管理员、前台访客。这四类用户的权限划分如下：超级管理员管理建课管理员和课程内容管理员，建课管理员管理课程，课程内容管理员管理课程内容，前台访客只能查看后台发布的并审核通过的各种课程资源[3]。本文中管理功能包括：前后台分页浏览、前后台查询、后台新增、后台编辑、后台删除。

图1 北大公开课的用户管理用例Fig.1 User management use case of open course in peking university

2.2 北大公开课的信息管理的用例设计

北大公开课的信息管理的用例设计如图 2所示，前台访客只能北大公开课中已经审核发布的信息。北大公开课的登录用户的三个共同用例为：登录、个人资料编辑、我的云盘管理。此外，超级管理员的两个用例为：批准某条信息进入首页某个栏目、首页与系统管理。建课管理员的一个用例为：课程管理。课程内容管理员的两个用例为：推荐某条信息进入首页某个栏目、课程内容管理。其中课程内容管理包括六个用例：课程录像管理、课程介绍管理、教师介绍管理、教学大纲管理、指定教材管理、参考文献管理。这些管理类用例都可以抽象为信息管理用例。信息管理用例管理包括五个用例：新增信息、编辑信息、删除信息、查询信息、分页浏览信息。

图2 北大公开课的信息管理用例Fig.2 Information management use case

3 北大公开课的功能模块和信息流程

3.1 北大公开课的功能模块

北大公开课的功能模块如图3左侧所示。北大公开课的功能模块包括：首页模块、关键词搜索、各级导航模块。首页模块包括下列 7个模块：logo和banner、长形首页slideshow、一级导航、最新课程、热门课程、新闻/公告、版权所有和访问统计。各级导航模块包括下面6个一级导航模块：首页、北大课程、视频公开课、资源共享课、英语品牌课、网站介绍。“北大课程”一级导航包括5个二级导航模块：理学部、信息与工程学部、人文学部、社会学部、继续教育部。每个二级导航模块又包含有若干个以院系名称为标题的三级导航模块。下面4个模块存在于所有的模块之中：logo和banner模块、版权所有和访问统计模块、关键词搜索模块、一级导航模块。

3.2 北大公开课的信息流程

北大公开课的信息流程如图3右侧所示。超级管理员登录系统进行院系管理等系统配置，可创建下列用户：建课管理员、课程内容管理员。建课管理员登录系统为院系创建课程，并为课程指定课程内容管理员。课程内容管理员登录系统管理自己有权管理的6类课程内容：课程录像、课程介绍、教师介绍、教学大纲、指定教材、参考文献。这时的课程资源只有登录用户才能查看。建课管理员登录系统审核信息、上下移动调整信息，审核通过的信息在网站相应栏目(非首页模块)中显示，建课管理员可以推荐某条信息进入首页某个栏目，超级管理员登录后批准某条被推荐的信息进入首页某个栏目，经过超级管理员审核的信息显示在首页的某个模块中。

图3 北大公开课的功能模块和信息流程图Fig.3 Functional modules and information flow charts

4 北大公开课的实体-关系设计

北大公开课的E-R图如图4所示。用户管理的E-R图如图4左侧所示。超级管理员管理建课管理员和课程内容管理员。这三类管理员共用一个用户实体，区别在于角色属性的值不同。用户表的属性包括：用户ID、用户名、密码、真实姓名、创建时间、创建者用户编号、创建者院系编号、创建者院系名称、角色、学期、院系编号、密码遗失提示问题、提示问题答案、联系电话、电子邮箱、二级院系编号、二级院系名称、审核状态（待审核、审核通过、审核未过）。

图4 北大公开课的E-R图Fig.4 E-R diagram

信息管理的E-R图如图4右侧所示。超级管理员管理院系实体，院系实体的属性包括：院系ID，院系编号，院系名称，课程数量。超级管理员批准和管理要放到首页的信息实体，首页的信息实体的属性包括：标题、时间、内容、创建者用户编号、摘要、关键词1、关键词2、审核、审核意见建议、首页模块、点标题开什么、批准上主页、附图。

建课管理员推荐要放到首页的信息给超级管理员，实现机制为把上面信息实体的“批准上主页”属性的值置为 1。建课管理员管理课程实体，课程实体的属性为：课程 ID（主键），课程名称，教师姓名，教师 ID，院系 ID(外键关联院系实体，课程实体与院系实体是多对一的关系），院系名称，北大教学网对应ID，管理员帐号，是否是公开课，一级学科名称，课程缩略图地址，本硕标志位，视频数量，课程访问量。

课程内容管理员管理六类课程资源实体。这六类课程资源实体是：课程录像实体、课程介绍实体、教师介绍实体、教学大纲实体、指定教材实体、参考文献实体。课程录像实体的属性包括：视频ID，课程编号(外键关联课程实体，课程实体与课程录像实体是一对多的关系)，视频标题，第几次课，第几段，显示用的标题(课程名称-第几讲:视频标题)，视频地址，视频缩略图，是否删除，是否显示，是否是申报视频，视频访问量，录制日期。其他五类实体的属性相同：内容（富文本编辑器），课程编号(外键关联课程实体，课程实体与本实体是一对多的关系)，资源类别标识(2-课程介绍，3-教师介绍，4-教学大纲，5-指定教材，6-参考文献)。

5 北大公开课的UI设计与系统后台实现机制

北大公开课首页如图5所示。首页从上到下的模块依次是logo和banner、关键词搜索、一级导航、长形首页slideshow、最新课程、新闻/公告、热门课程、版权所有和访问统计。为了提高网络传输速度，并体现首页模块化设计分而治之的思想，index.html中嵌入了三个动态程序的 iframe：“长形首页 slideshow”的iframe的src为slide_pre.jsp，“新闻/公告”的iframe的src为NAN_pre.jsp，“热门课程”的iframe的src为hot_form.jsp。在这3个jsp文件中分别组装一套hql查询语句，通过request.setAttribute暂时存储，再通过jsp:forward跳转到后台，在后台查询数据库，将得到结果通过request.setAttribute暂时存储，再通过return new ActionForward返回到前台显示页面。

图5 北大公开课首页Fig.5 Home page

其中“长形首页slideshow”和“最新课程”模块中的大图片以一定的时间间隔轮流播放，鼠标单击某个大图对应的缩略图时，则切换到该大图；对于“长形首页slideshow”在当前显示的大图左右分别有图标“<”和“>”，单击“<”或“>”图标显示“上一张”或“下一张”大图；每张大图的右下角有“点击播放”的按钮，当鼠标悬停在按钮上时有图片下沉的效果，本文的图片切换动画、“<”“>”叠加图标、按钮动画等都是采用css+jquery实现的，jquery动画的小巧灵活更适合在网上传输。单击“最新课程”的某个类别（例如：理学）时，会显示该类别中的若干个最新课程，该类别的动态内容是通过一个iframe从后台调入的。热门课程模块在首页显示点击量最多的六门课程，热门课程中的内容随着点击量的变化动态更新。

在图5首页中单击“热门课程”右侧的“更多>>”进入如图6所示的热门课程浏览页。热门课程浏览页把所有的课程按点击量进行排序，并分页显示。图6热门课程浏览页中显示了课程实体的三个属性：课程缩略图、课程名称、课程访问量。笔者开发的所有系统的浏览页中均有如下分页功能：首页、上一页、下一页、末页、设置页面大小和跳转到某页的输入框。

图6 北大公开课的热门课程浏览页Fig.6 Hot course page

在图6热门课程浏览页中单击某个课程的图片进入图7所示的“课程首页”。首次进入图7课程首页时默认显示的是“课程录像”模块，并自动播放课程录像。在图7课程首页显示了“课程”实体和“课程录像”实体的若干属性。从上到下依次显示了：“课程”实体的课程名称、课程访问量；课程录像实体的“视频访问量”；程序加载“课程录像”实体的视频地址并在播放器中播放；在“申报视频”那一行显示了本课程的几位申报教师的姓名，单击教师姓名，会播放该教师的教学录像。在“全程视频”那个 div中分行地显示了本课程的全程视频的标题，单击某一讲的标题就播放该讲的视频。图 7的前台显示页面为/opencourse2/course.jsp。系统在进入该显示页面之前，后台处理程序为 Course-Action的toIndex方法，通过多个不同的hql语句从后台查询出所系统需要的数据封装成多个不同的vo对象或vo集合对象，并通过request.setAttribute暂时存储，在图 7的前台显示页面中，通过从request.getAttribute取出之前存储的对象或对象集合，以图7的版式显示出来。

图7 北大公开课课程首页Fig.7 Course home

进入图7课程首页时默认播放本课程第01讲的课程录像，在图7“课程首页”中每播放一讲视频，更新“课程录像”实体的视频访问量，同时原子性地级联更新“课程”实体的课程访问量。在图7课程首页中把视频播放器窗口做成了一个 iframe，把“本课程访问量:**** 本讲视频访问量:****”做成另一个iframe。当用户单击某个“申报视频”或“全程视频”的标题时同时更新这两个iframe中的内容。即播放器中的视频内容和播放器左上角的标题“课程名称-第**讲”会级联同步更新。图7的播放器的功能包括：播放/暂停、拖动播放控制条、音量调整、全屏播放视频，视频全屏播放的效果如图9所示。有关“视频播放器”技术请参见笔者另一篇文章《基于Red5的网络教育电视台的设计与实现》[4]。

当客户端用户的电脑中没安装flashplayer播放器时播放器窗口中会显示 flashplayer播放器的下载链接，如图8所示。进入图7课程首页的方法还有：从图5系统首页中的“长形首页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

在一级导航中单击“北大课程”进入图10所示的北大课程列表页。这里对系统中所有的北大课程以院系和学部进行了分类汇总。显示了“课程实体”的“课程名称”、“主讲人”，显示了“课程录像实体”的“录制日期”。

图10 北大课程页Fig.10 Course page

如图11所示，在“关键词搜索”模块中可以根据课程名称或教师姓名进行模糊搜索。这个form提交到后台 CourseAction的 findPageResultByKeywords方法进行处理。在这个方法中组装hql语句，从课程实体和院系实体中组合查询出所需要的属性并封装成 vo，返回到前台的/opencourse2/findPage-ResultByKeywordsOk.jsp进行显示。

图11 课程搜索页Fig. 11 Course search page

在图7中的二级导航除的“课程录像”模块之外，还包括五个模块：课程介绍、教师介绍、教学大纲、指定教材、参考文献，这五个模块大同小异，例如单击“教师介绍”进入图12所示。处理逻辑如下，在图12的后台处理程序CourseAction的toIndex方法中把这五个模块前台需要显示的信息封装成五个vo：editorVO2-editorVO6。查询这五个vo的方法是：根据课程id(course_id)到Editor实体中查询，同时根据 longc的值进一步区别是五个模块中的哪一个，这里longc的值为2-6分别表示课程介绍、教师介绍、教学大纲、指定教材、参考文献。先组装相应的hql，再通过editorService.findVOByHql(hql)查询得到vo，再将vo存入session即session. setAttribute("editor-VO3", editorVO3)。在图 12的前台显示页面/opencourse2/course.jsp中根据用户单击五个模块之一的某个模块，显示相应vo的stringb属性，这个属性是html富文本编辑器。

在一级导航单击“视频公开课”或“资源共享课”进入图13所示的页面。这两个模块只有内容和类别不同，显示的效果完全一样。这两个模块均是显示了课程实体的下列属性：缩略图、摘要、浏览次数。单击每一个课程的“进入课程”会跳转到地址类似为：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。经过 facade.jsp 进行权限控制之后，跳转到 EditorAction.viewObject()方法进行访问量统计，然后跳转到/opencourse/view3/viewObjectOk.jsp进行显示。在viewObjectOk.jsp中通过">跳转到爱课程www.icourses.cn的某个页面。

图12 教师介绍页Fig. 12 Teacher's introduction page

图13 视频公开课页Fig.13 Video open course page

在一级导航中单击“英语品牌课”进入图14所示的页面。图14英语品牌课和图10北大课程只是显示的效果不同，后台的实现机制是一样的。图14显示了课程实体的下列属性：课程名称、负责人/主讲人、学院。图14中单击某一个课程名称进入图7所示的课程首页。

图 15是课程内容管理员登录后台之后进行教师介绍管理的页面。课程介绍管理、教学大纲管理、指定教材管理、参考文献管理的效果与图15类似。图15中栏目内容的编辑采用了基于fckeditor的html在线编辑器。

超级管理员登录系统可以进行用户管理、院系管理。建课管理员登录之后可以进行课程管理，课程内容管理员在图15中进行“教学录像管理”，包括大文件上传，这些功能模块的设计与实现详见本文的的姊妹篇《基于 Flash流媒体服务器的北大视频资源库的设计与实现》[5]。

6 结语

北大公开课自2012年上线以来，目前有视频课程114门，教学视频3364讲，131651学时的课程视频学习、浏览1276338次数，独立访客425063个，独立IP 430474个，五年的稳定运行与多次改版满足了北大教师和管理者发布教学资源的需要，满足了社会上各类人群对北大公开课资源的检索与学习的需求。

图14 英语品牌课Fig.14 English brand course

图15 教师介绍管理后台Fig.15 Teacher's introduce management backstage

[1] 北京大学教师教学发展中心官方网站[EB/OL]. http://cetl.pku.edu.cn/peking/cetl/view1/jiaoxuezhicheng/02-3.html.

[2] 杨公义, 张亦工. 北京大学教室管理系统的设计与实现[J].现代教育技术, 2015, (4): 115-120.

[3] 杨公义. 北大本科教学审核评估支撑系统的设计与实现[J]中国教育信息化, 2017(17): 82-86.

[4] 杨公义, 张亦工. 基于Red5的网络教育电视台的设计与实现[J]. 现代教育技术, 2012, (8): 109-112.

[5] 杨公义. 基于Flash流媒体服务器的北大视频资源库的设计与实现[J]. 软件, 2016, 37(8): 5-10.