基于响应式Web设计教务系统移动平台研究与建设.docVIP

基于响应式Web设计教务系统移动平台研究与建设 　　摘 要：随着移动互联网的高速发展，iphone、Android、ipad等智能移动设备迅速普及大众生活，越来越多的人习惯使用移动设备访问各类网站，进行工作和休闲娱乐活动。学校的教务系统由于在设计之初未将移动设备考虑在内，因此当多数师生开始通过移动设备访问教务系统时，一些诸如兼容性和可访问性问题逐渐显现出来。为此，文章提出基于响应式web设计的教务系统移动平台建设，旨在为移动设备访问教务系统提供解决方案。 　　关键字：计算机应用、移动设备、响应式web设计、跨平台 　　中图分类号：TP393.092 文献标识码：A DOI：10.3969/j.issn.1003-6970.2013.06.002 　　0 引言 　　根据Net Applications监控的数据显示，2013年2月，桌面浏览器在所有浏览器使用量的占比平均为86.2%，低于去年同期的92.5%。2009年9月份，桌面浏览器的份额一度高达98.9%，那时苹果还未推出iPad。根据2013年6月19日EnfoDesk易观智库产业数据库最新发布的《2013年第1季度中国第三方手机浏览器市场监测报告》数据显示，截止2013年1季度末，中国第三方手机浏览器市场活跃用户规模达到3.3亿户，环比增长率达到10.8%。大量数据调查表明，移动互联网行业时代已经到来，越来越多的人开始习惯用移动设备代替笔记本和台式机完成日常工作和生活需要。面对日益普遍、多样化的移动设备，如果要在所有设备上达到相同的体验效果，对于前端开发是一种严峻的考验。 　　前端开发者习惯于强调自身的控制权，而忽略了Web的灵活性。有人提出为特定种类的设备开发独立站点的方法。虽然这能使站点从内容到行为都更容易为提高使用体验而进行有效的裁剪，但这种方法无法很好地进行扩展，并且消耗人力、精力和时间。 　　如果优先考虑根据视口大小为用户提供与之匹配的视觉效果的要求，那么选择采用响应式站点解决此问题就非常合适。响应式网页设计（RWD，Responsive Web Design）由伊桑-马科特（Ethan Marcotte）提出。他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计[1]。概括来讲，就是针对任意设备???网页内容进行完美布局的一种显示机制。 　　本文即是以教务系统在移动平台上的应用为背景，结合响应式web设计实现教务系统在移动平台上完善自适应运行的效果，为广大师生通过移动设备访问教务系统提供解决方案。项目“教务信息移动平台的研究与建设”也申请通过华北电力大学2012年第二批大学生创新创业训练项目，项目编本文已经通过项目指导教师李忻老师审核。 　　1 前期分析 　　响应式布局开发步骤不同于常用的瀑布模型开发流程---从系统需求分析开始，然后着手设计，接着开始前、后台开发，最后进行评估并且实施。瀑布模式只按照标准的桌面浏览器进行设计，除此之外，几乎没有考虑任何其它的设计开发环境。而敏捷的响应式设计从一开始就考虑到这些跨平台问题，从而进行更详细的前期框架构图，设计和测试，而这些工作恰恰在瀑布模式中被省略了。基于响应式设计的网站一旦完成实施，将正确的呈现在PC、移动设备和平板电脑[2]。 　　项目开发前期，为了构建详细的开发框架，首先需要进行全面而彻底的整体需求分析。系统主要用户群是在校师生，为此针对特定用户群采用调查问卷方式进行用户需求分析和调研。一方面确定目前学生通过移动设备访问教务系统时存在的问题和他们最关心的功能需求以及系统所需功能。另一方面，了解在校师生所使用的设备类型分布情况，并预估出几种典型的响应规格，用来规划不同的呈现方式。 　　经过统计分析问卷调查结果，初步确定移动平台上教务系统主要的需求功能是教务通知、考试查询、教室查询、成绩查询。此外，用户持有类型主流大致分为iphone(4.0英寸)、ipad（9.7英寸）、Android（3.5--4.5英寸）三种类型，据此确定主流浏览器视口大小。 　　2 结合响应式设计解决存在的具体问题 　　采用响应式设计需要为不同的视图设计不同的部件，并且不能将一个页面当成一整“页”。页面不是最小的组成单元——而是滚动条，文字内容，表单和其他成份是组成整个页面的最小元素。框架图必须考虑不同的屏幕尺寸，因此布局尺寸也是不固定的。布局可以从三列变至两列，在最小的显示设备上(移动智能手机)，甚至可将其调整为单列显示[3]。 　　同时，应该考虑到特定的用户体验。在类似移动设备的小尺寸屏幕上，用户体验更多的是触屏操作替代鼠标操作。这样要求框架图是一个原型设计工具，而不再是模板，并且需要通过