基于media queries的精品课程网站重构研究

《基于media queries的精品课程网站重构研究》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于MediaQueries的精品课程网站重构研究　　摘要：精品课程是网络教学资源的重要组成部分，而构建适合于智能移动客户端访问的精品课程资源不仅是对现有精品课程的提升与扩展，同时也是MLearning的理念之体现。针对现有精品课程网站是重新建设还是进行重构这个问题，提出了一个重构原则。并对重构原理及技术实现进行了详细分析，提出采用MediaQueries来实现。　　关键词：移动Web；自适应网页设计；HTML5；精品课程　　中图分类号：TP393文献标识码：A文章编号：16727800（2013）002011

2、104　　0引言　　2003年，教育部正式启动了“高等学校教学质量与教学改革工程精品课程建设项目”。据教育部相关文件介绍，国家精品课程是具有一流教师队伍、一流教学内容、一流教学方法、一流教材、一流教学管理等特点的示范性课程。精品课程的特点是先进性、互动性、整体性、开放性和示范性。在此背景下，目前已形成国家级精品课程，省、市级精品课程和校级精品课程这样的三级精品课程体系。随着智能移动客户端的普及，使用者也越来越多，移动版的精品课程网站随之也越来越重要。并且移动设备在尺寸及屏幕分辨率上存在差异，不可能专门为iPho

3、ne/iPad、Adnriod、BlackBerry单独开发页面。精品课程网站要能适应多种设备的访问要求并且兼容所有的屏幕分辨率。8　　1重构的必要性　　1.1精品课程内容类型　　根据“教育部关于国家精品开放课程建设的实施意见”要求，可将精品课程分为：精品视频公开课与精品资源共享课。精品视频公开课主要包括以声音和画面为主的视听媒介；精品资源共享课主要包括全程教学录像、演示文稿、试题库、素材库等课程资源的网络共享。要想这些资源在不同设备上得到支持，需要对不同智能客户端的OS版本进行详细比较与分析。表1中列举了不同

4、OS浏览器对HTML5中多媒体的支持情况。　　1.2移动Web与桌面Web　　从根本上说，只存在一种Web。早期以及现有绝大多数精品课程网站都是通过各种Web浏览器（IE、Firefox、Chrome等）向服务器发出请求，服务器接受并响应这些请求，我们将这种方式称为桌面Web。移动Web在桌面Web的基础上添加了新的MIME类型、标记、文档格式，专门用于解决移动设备上的资源限制、浏览器差异等问题。尤其是跨平台的HTML5应用将对移动互联网的发展起到巨大的推动作用。移动Web与桌面Web之间的差异如表2所示。　　

5、Chrome等）向服务器发出请求，服务器接受并响应这些请求，我们将这种方式称为桌面Web。移动Web在桌面Web的基础上添加了新的MIME类型、标记、文档格式，专门用于解决移动设备上的资源限制、浏览器差异等问题。尤其是跨平台的HTML5应用将对移动互联网的发展起到巨大的推动作用。移动Web与桌面Web之间的差异如表2所示。　　“device.css”这个样式文件中定义了media类型的样式，代码如下：8　　@mediascreenand（maxwidth：480px）{　　.demotag{　　……　　}　　}

6、　　当前移动设备旋转后，处于纵向（portrait）模式和横向（landscape）模式状态下的代码如下：　　2.3设备识别　　在对精品课程网站进行内容自适应设计后，最后一步就是对访问的客户端设备进行识别。设备识别可以通过检测UserAgent和HTTP请求，以识别来自移动设备的Web流量，并提供相关设备的特征信息。开发人员可以使用设备数据库和随附的API来识别发出Web请求的设备。一旦识别出相应的设备，设备数据库即会提供有关移动设备及其浏览器的详细属性。　　例如，iPhone手机的请求，通过后续的UserAg

7、ent请求报头值传递到设备数据库API：　　Mozilla/5.0（iPhone；U；CPUiPhoneOS4_3_2likeMacOSX；zh-cn）　　AppleWebKit/533.17.9（KHTML，likeGecko）Version/5.0.2Mobile/8H7Safari/6533.18.5　　设备数据库会将上述Web客户端识别为运行4.3.2版本操作系统并使用SafariWeb浏览器的AppleiPhone。识别出设备后，便可以使用API了解更多设备信息。8　　Adriod手机的UserAge

8、nt请求报头如下：　　Mozilla/5.0（Linux；U；Android2.3.3；zh-cn；HTC_DesireS_S510eBuild/GRI40）　　AppleWebKit/533.1（KHTML，likeGecko）Version/4.0MobileSafari/533.1　　Nokia手机的UserAgent请求报头如下：　　Mozilla/5.0（SymbianOS/