移动互联网时代高校资源库建设思路及实践*

陈锐浩

（深圳职业技术学院 教育技术与信息中心，广东深圳518055）

移动互联网时代高校资源库建设思路及实践*

陈锐浩

（深圳职业技术学院 教育技术与信息中心，广东深圳518055）

随着移动互联网的普及，高校原来建设的各种资源库系统由于缺乏对移动设备的支持，面临淘汰．本文分析了现有资源库系统存在的问题，提出采用Html5技术开发跨终端WebApp的3种方法，包括多套模板方式、多版本跳转方式、响应式布局方式．结合笔者开发的微课程平台，重点介绍了响应式布局原理及相关关键技术，以及如何利用viewport和Bootstrap框架进行WebApp开发，为高校资源库平台的升级和建设提供参考．

移动互联网；资源库；响应式布局；实践

1 问题分析

高校资源库的建设经历了几个阶段，在精品课程建设时代，很多高校就开始了资源库的建设，这些资源库依托于具体的课程建设，申报精品课程的时候作为成果之一．2010年，教育部启动职业教育专业教学资源库建设项目，作为国家示范高职院校建设计划的一部分．2011年，教育部又启动了精品资源共享课的建设工作，共享课以原国家精品课程为基础，优化结构、转型升级[1]．为了申报精品资源共享课和专业资源库项目，很多高校加大了资源建设放方面的投入，但是这些投入大量人力和物力建设的资源，利用率并不高，特别是早期建设的精品课程的相关资源．根据《高校精品课程应用调查及其对精品资源共享课建设的启示》[2]一文的调查，精品课程的使用频率不高，每天使用多次的学生仅占1.7%，每天使用1次的占4.1%，每周使用1次的占16.9%．我们建设的各种类型资源库也存在系列问题，如资源库应用推广实效性不强，资源利用率低；资源库平台的运行、服务与维护滞后、部分资源更新跟不上新的技术发展等[2-4]．

随着移动互联网时代的全面来临，早期建设的资源平台和数字资源由于采用的标准和技术都落后了，无法适应移动互联网的需求．在移动互联网时代，传统资源平台遇到的最大的问题是平台兼容性问题，主要表现在下面几方面：

1）系统支持不好．传统的资源平台系统都是面向桌面的，分辨率至少为1024*768，而移动终端的分辨率达不到这个水平，像iphone6 plus，属于宽屏手机，其显示的真实尺寸也只有414*736，使用手机来访问传统的资源平台，无法在屏幕的宽度之内显示完整界面，用户体验非常差．而且，一些界面上的事件行为，在手机上也无法支持，导致功能无法实现．

2）资源无法支持移动设备．随着信息技术的发展，各种资源也一直在进化．如视频资源，在使用PC时代，先是采用rm格式的视频，后来又采用flv，wmv等格式．但是到了移动互联网时代，这些格式都无法支持手机播放，最后都统一成mp4格式．如flash资源，作为资源库的主要特色资源之一，在移动互联网时代，由于IOS系统不支持，面临淘汰．

3）用户体验不适合．在以PC为终端的互联网时代，我们在界面上追求内容的丰富，但是在移动设备为终端的移动互联网时代，界面需要简约，资源需要进行微型化设计[5]，才能实现随时随地，满足学习者碎片式的学习需求．

因此在移动互联网时代，为了使我们的资源平台及数字资源兼容移动设备，适合移动互联网的需求，需要对现有的资源平台进行优化和改进．

2 解决思路

让传统的资源平台支持移动设备，适应移动互联网的需求是需要解决的主要问题．目前主流的实现方案有2种：

方案一，采用Web+App的模式，像运行精品资源共享课的爱课程网就是典型的例子．该平台除了传统的Web系统，还开发了面向安卓和苹果两大系统的App，这种方式在功能需求方面能够最大程度满足用户的需求，但是平台开发工作量比较大．除了开发传统的Web系统，还要开发2个版本的App，而且系统一更新，终端就需要重新安装．这种方式对开发者要求比较高，一般需要专业公司才能胜任，而且开发费用比较高，不适合一般高校的自建资源库使用，目前主要在国家层面的教育服务平台建设方面使用．

方案二，采用Html5技术开发跨终端WebApp，这种方案对开发者要求低，而且完成一次开发，即可多平台使用．Html5不仅可以调用GPS、陀螺仪等硬件，还支持WebGL、WebVR等技术．跨终端WebApp解决方案，前端采用的技术主要是Html5+CSS3，JavaScript为主要开发语言，后端可以采用任何一种后台语言．具体的实现方式又包括以下3种：

1）一套系统，多套模板方式：如baidu，我们访问相同的域名，但是在不同终端，显示效果完全不一样．这种方案，需要开发多套页面模板程序，用户访问的时候，系统判断用户的终端情况，调用不同的页面模板．

2）多版本，跳转形式：如天猫、淘宝、京东，这些系统，内容信息量大，充分考虑到用户的使用习惯，都针对移动端专门开发Html5网站，多版本并存．当用户在手机上访问www.jd.com时会自动跳转到Html5版本，地址为：m.jd.com．这种方式，需要开发多个版本，工作量大，但是适合功能复杂的系统．

3）响应式布局方案：这种方案，只要开发一个版本，由于采用响应式布局技术，相同的内容，在不同终端显示效果不同．响应式布局这个概念是为解决移动互联网浏览而诞生的，是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本[6,7]．这种方案，适应于页面结构不复杂，以资源显示为主的资源库平台，缺陷是由于一个版本就兼容各种终端，对开发者的要求比较高，而且移动端请求的数据量相对大一些．

响应式布局的基本原则如下：

1）弹性网格和布局，采用以比例为基准的网格和布局．

2）弹性图片及文字，图片的最大宽度不能超出屏幕的宽度，对于不复杂的图片，采用矢量图，如使用SVG或图标字体．

3）移动设备优先处理，设计的时候，优先考虑移动设备的兼容性．

采用Html5技术开发的跨终端WebApp，可以直接通过手机端浏览器直接访问，也可以封装一个外壳，像传统的App开发一样，需要在手机上安装应用．近两年，随着微信的流行，很多WebApp利用微信公众号作为应用入口，所有功能都可以从微信进入．

笔者认为在移动互联网时代，高校资源系统的开发适合采用跨终端WebApp解决方案，具体的实现方法适合采用响应式布局技术．这种方案，能够满足以资源显示为主的资源库平台的需求，而且一次开发，多平台使用．对于原有的资源系统，只要进行前端重构，管理部分基本可以沿用原有系统，以最小的投入就可以让原有的资源系统重新焕发生命力．

3 实践研究

3.1 viewport简介

移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域，即浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可以比浏览器的可视区域大，也可以比浏览器的可视区域小．在默认情况下，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px．但是由于移动设备的尺寸达不到980px，所以我们如果用手机直接打开面向PC的资源系统的页面，浏览器就必须横向滚动才能把内容显示完整．

为了让页面适合手机浏览，需要设置viewport的宽度等于设备的宽度，同时不允许用户手动缩放．viewport的使用必须借助于meta标签，在meta标签里面进行定义和赋值，meta标签在网页的head里面进行定义，具体语法如下：

上面语句把移动页面的宽度设置为像设备一样的宽度，设置默认的缩放比为1.0，并且禁止用户缩放．meta viewport标签首先是由苹果公司在其safari浏览器中引入的，有6个属性，见表1，这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开．通过viewport的设置，可以保证页面显示内容不超出屏幕的宽度，但是，传统面向PC的界面在手机屏幕上显示会显得非常小，用户体验非常差，这个时候就需要采用响应式布局技术，让不同终端根据不同的情况，自适应显示．

3.2 响应式布局的原理及实现

其原理是通过CSS3中Media Query（媒介查询）功能，来判断我们的终端设备宽度在多少像素内，然后执行与之对应的CSS样式．不同终端执行的是同一页面，但是由于执行了不同的样式，所以呈现出不同效果．以笔者开发的微课程系统的首页为例，该系统的首页的布局图如图1所示．左边为PC显示效果，上面为页头，摆放Logo和登录功能，Logo下面为菜单，菜单下面为翻滚大图，大图下面为具体的资源模块；右边为手机显示效果，在实际应用中，由于手机屏幕的限制，一般都会把菜单放在右上角，默认情况下隐藏起来，点击才会展开，这种模式适合用户操作习惯，常见的应用都是采用这种方式．由于手机屏幕比较小，页面的内容向下自动延伸．借助于响应式技术，只要制作一个版本，2个CSS文件，就可以实现该效果．

表1 viewport属性

图1 布局效果图

开发的时候，一般会针对手机、平板和桌面设计3个样式，有时候为了减少工作量，也可以省去平板样式．系统在执行的时候，用Media Query来监测浏览器的尺寸变化，页面的结构元素根据Media Query预设的CSS来进行相对应的调整．Media Query通过CSS中的@media进行规则制定，@media有2种使用方法：

1）在link中使用，media前省去@，写在网页的head里面，实例如下：

only screen表示限定于显示器，条件max-width是指渲染界面最大宽度，上面代码中只要宽度不超出480，则调用mobile.css样式，介于481到768中间，则调用tablet.css，大于768的则调用desktop.css．这种方法把各种样式分开存储，结构比较清晰，但是会增加页面http的请求次数，增加页面负担，所以在CSS3中一般采用内嵌的方式，把几种样式写在一个文件中．

2）直接在样式表中内嵌@media，上例中3种设备的样式可以定义在一起，语法如下：@media (max-width：480px){

//定义样式内容省略}

@media (min-width：481px) and (max-width：768px){

//定义样式内容省略

}

@media (max-width：769px){

//定义样式内容省略}

通过Media Query的应用，实现了响应式布局，一个资源库系统开发一个版本，只要针对每种终端设计样式，就可以适合各种终端，但是这种方式开发者需要有比较丰富的CSS开发经验．随着响应式技术的流行，出现了很多面向移动开发的开源的成熟框架，如jQueryMobile，BootStrap等，这些框架封装了大部分功能，降低了开发难度和工作量．

3.3 开发实践

根据响应式原理，一些公司封装了基于响应式技术的开源框架，利用这些框架，做移动应用的时候，不需要再去重复开发面向各种终端的CSS文件，只需要引用这些框架，在页面上设置参数就可以实现响应式效果．Bootstrap是在这些响应式框架中比较优秀的一个，它来自Twitter，基于Html5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件[8]，目前最新版本为4.0．

面向移动互联网的资源平台，界面相对简单，除了首页内容相对丰富，栏目页、内容都是比较简约，侧重于资源的呈现，需要解决图片、文档、动画和视频等资源的兼容问题．利用响应式技术，我们除了可以把系统做成兼容多终端，还可以把资源做成响应式资源，让资源在不同终端中合理呈现．笔者在开发微课程网的时候，前端采用Bootstrap框架，利用响应式技术实现多终端的支持，具体方法为在网页的head标签里面引入如下内容：

页面内容采用Bootstrap的网格系统进行布局，Bootstrap 包含了一个响应式的、不固定的网格系统，可以随着设备或viewport大小的增加而适当地扩展到 12 列．以微课程网首页的资源块为例，其html代码如下：

上面代码中，container，row，col-xs-12，col-sm-6，col-md-4，col-lg-3都是bootstrap.min.css中的预定义类，container为宽度，row代表行，行包含列，如果行内列大于12，则超出部分作为整体另起一行．col-xs-12、col-sm-6、col-md-4、col-lg-3这几个类最后的数字代表列数，类前缀col-xs-，col-sm-，col-md-，col-lg-分别针对不同分辨率，根据终端的分辨率自动决定哪个起作用，实现具体的响应式布局效果，如在手机上，类col-xs-12被调用，则一行只有1列，在分辨率大于1200px的桌面上，col-lg-3被调用，则一行有4列．

页面上需要从数据库获取的数据采用异步请求方式获取，通过javascript生成页面内容，采用这种方式，可以实现前端开发与后端开发分离，后端只要根据前端的需求提交各种数据，以文本或JSON格式返回就可以．以右上交的用户登录功能为例，其内容由下面的javascript语句实现：

jQuery.get('ajax/login.ashx?action=righttopmenu' ,function(data){

$("#righttop").html(data);

});

上面语句通过jQuery.get()方法向ajax/login.ashx?action=righttopmenu这个地址发送ajax请求，利用回调函数把请求返回的内容data填充到ID为righttop的页面对象上．

开发的微课程网的界面如图2所示，左边为PC打开的界面，右边为手机上访问的界面，同一个界面，自适应不同终端．实践证明，对于功能不复杂，以内容呈现为主的资源库系统，采用响应式技术开发WebApp是一种可行的选择．

图2 微课程界面

参考文献：

[1] 童卫军，姜涛．高等职业教育专业教学资源库平台建设研究[J]．中国高教研究，2016（1）：107-110．[2] 黎良田，王明友．高职教学资源库应用现状与建设改进策略研究[J]．深圳职业技术学院学报，2016（3）：38-43．

[3] 王娟，刘名卓，祝智庭．高校精品课程应用调查及其对精品资源共享课建设的启示[J]．中国电化教育，2013，12：40-46．

[4] 徐明，陶秋荣．网络环境下高校数字资源库建设与应用现状调研分析[J]．中国电化教育，2012（5）：83-88．

[5] 李文莉，陈锐浩．移动学习资源的微型化设计与开发实践研究[J]．深圳职业技术学院学报，2016（3）：30-33．

[6] 刘清堂，胡舰，翟利利，等．跨平台的多终端设备网页自适应布局研究及应用[J]．现代教育技术，2016（3）：107-113．

[7] Marcotte E.Responsive web design[M]．France：Editions Eyrolles，2011．

[8] 曹芳．将Bootstrap技术应用于CMS建站中[J]．信息技术与信息化，2016（1）：78-81．

Constructive Thinking and Practice of the University Resources System in a Mobile Internet Era

CHEN Ruihao

（Educational Technology and Information Center, Shenzhen Polytechnic, Shenzhen, Guangdong 518055, China）

With an increasing popularity of mobile internet, the original construction of a variety of resources system due to the lack of support for mobile devices, is about to be eliminated. Based on the analysis of the existing problems in the resources system, this paper offers three methods of using Html5 technology to develop Webapp terminals, including multiple sets of templates, multiple versions of jump mode, response type layout. With the micro course platform developed by the author, the responsive layout principle and related key technologies are introduced as how to use viewport and Bootstrap framework for the development of Webapp. Reference for the upgrading and construction of resource platform in colleges and universities is also provided.

mobile internet; resource base; response layout; practice

TP311

：A

：1672-0318（2017）01-0039-06

10.13899/j.cnki.szptxb.2017.01.009

2016-09-05

*项目来源：本文系中央电教馆全国教育信息技术研究“十二五”规划重点课题“手机移动学习资源的微型化设计与开发实践研究”（编号：136220985）的阶段性成果；校级项目“资源共享课平台建设与应用研究”（编号：22J370609991）的阶段性成果

陈锐浩（1977-），男，广东潮州人，高级实验师，硕士，研究方向：教育技术应用、虚拟仿真、软件开发．