面向不同设备的响应式网页设计—

引用本文

刘智惠, 薛晶晶, 卢倩芸. 面向不同设备的响应式网页设计——Web移动图书馆 . 现代图书情报技术, 30(11): 95-101
Liu Zhihui, Xue Jingjing, Lu Qianyun. Analysis on Responsive Web Design for Different Devices——The Web Mobile Library. New Technology of Library and Information Service, 30(11): 95-101 复制到剪切板

Permissions

《现代图书情报技术》编辑部

面向不同设备的响应式网页设计*——Web移动图书馆

刘智惠, 薛晶晶, 卢倩芸

上海工程技术大学图书馆上海 201620

通讯作者:刘智惠:E-mail:zhihui_liu1984@163.com

作者贡献声明：

刘智惠:提出研究思路, 设计研究方案, 进行程序设计;

刘智惠, 薛晶晶:采集、清洗和分析数据;

刘智惠, 薛晶晶, 卢倩芸:论文起草;

刘智惠:论文最终版本修订。

基金:*本文系上海高校青年教师培养资助计划“基于Android平台对图书馆资源整合软件开发” (项目编号:ZZGJD12103)和上海高校青年教师培养资助计划“国内外高校研究型图书馆知识服务模式与实践研究” (项目编号:ZZGJD12106)的研究成果之一。

摘要

【目的】让Web页面保留自身特点的同时, 自动适应移动阅读的特点和需求; 减少开发和维护成本。【应用背景】提升用户不同设备的访问体验, 适应移动阅读的市场需求。【方法】以HTML5和CSS3结合JavaScript语言为基础, 采用并改造Bootstrap架构。【结果】在PC端和移动设备端均能达到比较理想的显示效果。【结论】响应式网页设计是数字图书馆未来发展的一种方向, 利用该技术移动图书馆和网上图书馆服务将由互补变为融合。

关键词: 响应式网页; HTML5; Bootstrap; 移动图书馆

中图分类号:TP393

Analysis on Responsive Web Design for Different Devices——The Web Mobile Library

Liu Zhihui, Xue Jingjing, Lu Qianyun

Shanghai University of Engineering Science Library, Shanghai 201620, China

Abstract

[Objective] Automatically fit the features and requests of mobile reading and keep the features of Web page at the same time. Reduce the cost of development and maintains. [Context] Improve user experience in accessing on different devices and fit the requests of mobile reading market.[Methods] Based on HTML5 which combines with CSS5 and JavaScript, and refactor Bootstrap framework.[Results] Get expected display effect on both PC clients and mobile clients.[Conclusions] It should be a direction that virtual library develops with responsive Web design. With this technique, mobile library and Web library become from complementation to a new type of Web mobile library.

Keyword: Responsive Web design; HTML5; Bootstrap; Mobile library

Show Figures

随着移动智能终端(智能手机和平板电脑)的发展, 用户访问网络的途径也开始多样化, 已经不再局限在个人电脑对Web页面的浏览。移动终端上网的方式由早期的GPRS、WiFi、WiMAX(无线城域网)到现在备受关注的3G、4G移动宽带。手机屏幕的尺寸以及分辨率也日益提高, 同样平板电脑也逐渐走入广大用户的日常生活之中。多样化的屏幕尺寸以及网络访问方式也已形成。而原有Web页面已经无法适应现有发展, 为了适应这种趋势, WAP和APP(意为运行在智能的移动终端设备第三方应用程序)也随之诞生, 并广泛应用。

1 移动图书馆的发展现状以及面临的问题

1.1 移动图书馆的主要形态

移动图书馆是数字图书馆电子信息资源服务的延伸。依托移动通信技术、无线网络技术以及多媒体技术, 用户通过使用各种移动终端设备就可以方便地获取、利用图书馆的电子信息资源。目前移动图书馆主要以短信、WAP网站和APP三种方式为主。除了使用习惯之外, 读者用户选择何种方式访问, 还取决于用户体验。这需要在界面设计和硬件性能方面进行提升来改善。

1.2 国内外移动图书馆的发展现状

在2013年发表的对2012年国外移动图书馆调查统计的相关文献, 无论是对USNnes-QS2011世界大学排名前30位的高校图书馆^[1]还是对国外移动图书馆的最佳实践网站M-Libraries中100多个移动图书馆逐一进行访问和调查^[2]结果来看, WAP网站服务是最为广泛使用的服务方式(在高校调查^[1]中达到了84%), 同时短信和APP的普及率也非常高。相较于国外, 经过龙泉等^[3]和魏群义等^[4]的调查和分析, 我国移动图书馆WAP网站服务的普及率最高, 短信服务次之, 而APP的普及率尚不及欧美主要国家。相关服务也主要由北京书生、超星公司和江苏汇文等几家公司提供, 自建WAP网站较少^[4]。

1.3 移动图书馆面临的问题

(1) 手机操作系统封闭性强, 开发难度大耗时长

自从iOS和Android这两个手机操作系统的发布, 就诞生了一个新名词:APP。但是APP的非通用性, 开发的专业性, 移植的复杂性, 维护升级的繁琐, 种种问题都随之而来。

仅仅从现在市场环境来看, 根据艾媒咨询(iiMedia Research)中国智能手机市场季度监测报告中数据显示^[5], 2013年第一季度中国智能手机市场操作系统分布状况方面, Android、iOS、Symbian、Windows Phone占比分别为71%、12.9%、10.2%、3.6%。还有2.3%为其他智能手机操作系统。由此可见, 为了最大限度扩展用户群, 满足不同用户需求, 势必要对三种以上平台进行移植开发工作。同时Android操作系统碎片化问题是最严重的, 为了适应不同操作系统版本、不同屏幕分辨率和尺寸, 必须做大量的调试和测试工作, 这将大大加大工作量, 延缓开发进度。而后期升级维护和功能提升的工作量也会成倍增加。作为一个需要长期演进和更新的项目, 对团队的专业技术和人力需求的成本, 并非一般图书馆所能够负担。

(2) 以第三方提供的移动图书馆平台为主, 同质化严重

正因为开发困难, 很多高校图书馆采用由第三方提供的移动图书馆(Web网站和 APP)。在调研的20个“ 985” 高校和7个省级公共图书馆中, 仅有4个图书馆是独立开发或者参与开发的^[4]。第三方也集中在几家技术实力比较强的公司。这也使得各图书馆的移动图书馆服务同质化严重, 界面相同, 功能类似, 定制化个性内容稀缺等问题突出。

(3) 推广方式简单、单一

上述图书馆对于移动图书馆的推广方式还局限于主页链接、图书馆通知或新闻报道和研究论文、专题报道的方式。并且通常只使用其中一种或者两种方式^[4]。读者往往无法在第一时间得知该项服务的最新资讯和更新情况, 推广进展缓慢。

(4) WAP网络服务技术上有局限性

从技术上来说, 作为目前广泛使用的WAP网络服务其局限性越来越突出。众所周知WAP网站具有易于开发, 适用于手机浏览的优点, 不过由于其使用WML语言, 即使到2.0版改为采用XHTML也明显落后于现在移动应用的需求。在视频、特效以及功能上的不足, 使得应用体验更好的APP不断取代WAP网络服务在移动市场的位置。

2 响应式网页设计

面对以上几个问题, 移动图书馆的建设需要一种通用的、低成本、易于开发和推广的技术来实施。作为生产工具, 目前为止PC的地位暂时无法被其他设备取代, 从而Web浏览还是用户的主要访问方式。同时HTML5和CSS3标准的逐渐成长和完善, Web页面的特效和功能也日益强大。一种新的想法开始出现, 可以利用新技术让Web页面突破20世纪形成的固定排版样式的传统, 使其自动适应不同设备的浏览特点和操作需求。

2.1 响应式网页设计的定义

响应式网页设计(Responsive Web Design, RWD)这个术语, 由伊桑· 马科特(Ethan Marcotte)提出^[6]。将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来, 并命名为响应式网页设计。该设计是将网页内容在不同设备上进行完美布局的一种显示机制, 在人力和物力有限的情况下在大屏幕设备和小屏幕设备间达成一种兼容的统一解决方案。避免了多个不同类型网站的重复更新维护, 以及更新APP的烦恼。更无需另行推广, 实现一站式直达并且无缝的用户体验。

2.2 源于Twitter的Bootstrap^[7]

Bootstrap是来自Twitter设计师Mark Otto和Jacob Thornton在2011年发布的新型开源网站架构。初衷是为了解决Twitter网站前端开发中使用的库过于繁杂导致维护和升级困难, 不仅在Twitter.com中广泛使用, 并且公开发布后得到广泛的支持和应用^[8]。Bootstrap的核心是基于LESS框架^[9]构建的CSS。该架构具有12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件, 还有基于Web的定制工具等特色^[7]。但是由于Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现, 在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同。Bootstrap官方支持的浏览器如表1所示:

表1 Bootstrap官方支持的浏览器^[7]

2.3 响应式网页设计实施

传统页面布局主要由页眉(导航条)、页脚、主内容、左边栏和右边栏构成, 如图1所示:

	Figure Option View Download New Window
	图1 上海工程技术大学图书馆主页

以上海工程技术大学图书馆主页为例, 充分利用版面, 信息量大, 减少多页切换, 很多传统Web页面都使用类似经典设计。但在现代移动浏览量剧增的情况下, 页面拥挤, 结构封闭, 操作不便等问题就突显出来。特别是触屏操作情况下用户使用感受很糟糕。

响应式网页常用的流式设计的核心思想是以百分比来设定元素的宽度^[10]。所以常见的响应式设计如同瀑布一样, 在小屏幕显示的情况下, 各元素垂直排列和分布。相对于上述设计, 笔者保留该网页的主要内容和三列式设计的特点, 同时在小屏幕下模拟多页形式形成左、中、右三部分分别显示。期望能在不简化内容的情况下完成响应式设计。

(1) 响应式页面布局结构设计和改良

作为响应式页面, 首要是适应不同尺寸和类型的屏幕, 以达到最佳的显示效果。笔者结合传统Web页面布局的特点以及手机浏览的需求, 在保留原有内容的同时利用Bootstrap架构对新页面结构进行调整, 如图2所示:

	Figure Option View Download New Window
	图2 响应式页面结构示意图

本案例和张树明^[11]提出的“ 三列, 标题和脚注” 页面布局结构很相似。原方案的优点是能很好地继承原有页面的结构和内容。但缺点也很明显, 就是三列结构在320× 480分辨率下显得过于拥挤, 导航条凌乱, 严重影响浏览体验。正因为如此, 利用Bootstrap框架的自身优点, 导航条将移到页面最顶端。而页头将嵌入到左右边栏和内容区之中, 用来呈现网站的LOGO、简介和快捷检索。这样设计可充分利用框架优点, 在需要时自动将导航条缩进为菜单栏模式。而最重要的内容区的三列布局的变化, 也将作为本案例中对原架构改进的独特设计将重点详细解说。

基于Web标准以及Bootstrap框架, 响应式页面布局结构HTML5代码如下:

(2) 针对三列内容的左右边栏的改良设计

如果为了在小屏幕上得到最好的显示效果, 最好是将三列内容拆分为左、中、右三个屏幕的内容显示。这样在竖屏情况下既可避免固定页面的变形和拥挤, 影响感官; 也可以避免内容流式分布情况下页面过长, 不便于用户操作。在很多手机应用中, 一般有数个不同界面彼此切换, 但作为响应式页面, 需要运用JavaScript和CSS3的混合编码实现。

本案例是以Bootstrap V3.1.0标准框架进行编写, 同时参考offcanvas案例^[12]并做了些改进, 增加了一个.row-offcanvas-middle, 用以实现页面左右缩进。同时定义左右active被各自激活后, 页面需要做的变化。

2.4 演示效果

在1440× 900分辨率下显示效果, 如图3所示:

	Figure Option View Download New Window
	图3 1440× 900分辨率下显示

使用手机, 在480× 800分辨率下显示效果, 如图4(a)所示。在点击“ 数据库” 或者“ 登录我的图书馆” 后将分别显示左右边栏, 如图4(b)所示, 点击右上角图标后显示被隐藏的导航条。

	Figure Option View Download New Window
	图4 480× 800分辨率下显示

可见在预想使用环境下, 各项元素显示合理, “ 三列” 内容布局达成设计目标。

3 兼容性测试

响应式设计是一种网页自动适应不同的浏览环境自动改变布局和显示内容的设计方式。为了检测是否达到这一设计目标, 笔者分别在PC和移动端进行测试。

3.1 PC桌面测试

市场上虽然有多种多样的浏览器, 但是网页显示和排版效果与该浏览器使用的内核息息相关。笔者选择Trident、Gecko、Blink以及WebKit这4种目前最具代表性的内核及其浏览器在Windows 7系统上进行测试。由于微软公司对于IE浏览器升级更新会依据系统给予限制, 所以增加了XP系统下IE8的浏览测试。测试结果如表2所示:

表2 在PC上测试结果

由表2的测试结果可知, 在IE8浏览时, 无法正确显示所设计的样式。正如Bootstrap官网所描述^[13], 这是由于IE8不支持CSS3和HTML5元素。而在新的IE10以及其他各类浏览器都能很好地完成对页面代码的解析和显示。在1/2窗口下, 页头内图像缩放没有做到同步, 所以会产生排版混乱的问题, 如图5(a)所示。这需要近一步的优化代码和提升设计来解决。但是在表1中并不被官方支持的Windows版Safari浏览器的实际测试效果表现良好。可见浏览器在不断提升对CSS3和HTML5的支持度。

	Figure Option View Download New Window
	图5 页头混乱和偏移现象

3.2 移动终端测试

在移动端, 显示设备更具多样性, 为了更好地调试和优化网页, 需要用尽可能多的不同设备进行测试。为此, 笔者使用ScreenQueri^[14]模拟移动设备进行测试, 并用实体设备进行补充测试。

ScreenQueri是一个免费的基于Web的响应式设计测试工具。相较于其他类似工具, 不仅能模拟各种移动设备的运行环境, 支持HTTP载入网页; 而且能够在本地localhost载入网页, 从而在正式发布上线前, 就能在局域网内进行调试和测试。ScreenQueri 部分测试结果如表3所示:

表3 ScreenQueri部分测试结果

由测试结果来看, 虽然在手机端竖屏情况下基本达到预想的显示效果和设计目标, 并且响应式设计除了iPad和Surface RT之外都得到支持。但是随着屏幕的增大以及横屏情况下, 在PC端出现的页头混乱现象再次出现。

鉴于在模拟测试中效果并不理想。笔者用不同类型的移动设备在局域网内访问测试, 模拟真实情况下利用系统自带的浏览器的浏览体验效果, 并且安装使用UC浏览器作为兼容性测试, 如表4所示。可知, 在测试中竖屏显示的情况下, 虽然分辨率在不断提升, 但并未出现页头混乱的情况。不过从1280× 720像素开始在初次载入的时候, 发生视窗偏移的情况, 如图5(b)所示, 但样式和功能正常。经过测试所有设计效果和功能都能正常显示和应用。

表4 手持设备上测试结果

4 结语

根据不同平台测试结果分析可知, 由于笔者只设计了大屏和手机竖屏显示两种情况, 并且在页头部分使用的元素相对较多, 使得在一些预想之外的显示情况下, 页面自适应过程中, 出现比较严重的布局混乱情况。需要依据Bootstrap的媒体查询定义进一步细化对不同屏幕的样式设计来解决这个问题。另一方面, 随着浏览器的不断改进, 这方面的问题也在逐渐解决。如Nexus7由于实体设备已经升级到最新系统, 自带浏览器也随之升级到最新版, 所以在表3和表4中出现不同的结果。总体来看, 虽然还有些问题需要解决, 但是传统网页的三列式设计在响应式网页中再次实现并应用这一预想已经达成。

使用Bootstrap框架可以充分利用现有网络资源, 缩短开发周期以及降低维护成本, 适应移动浏览的需求。相比移动端开发, 是一个投入小、见效快的方式; 相比以前的WAP网络服务, 更有发展潜力, 表现形式更丰富, 是下一代自建移动图书馆的理想平台, 在维护和成本控制上有极大的优势。一方面手持设备屏幕的发展迅速, 前端开发人员需要改变设计习惯以及更多新的技巧来定义不同的样式。另一方面老旧浏览器对HTML5和CSS3的不兼容限制了运用的推广。不过作为开源框架, 具有代码公开可修改的优势, 如果能进一步对其代码优化和修改, 再删除不需要的代码, 可以改善网站速度和兼容性问题。

从市场环境来看, HTML5标准还在不断完善和优化中, W3C在2012年12月宣布HTML5开发结束。计划在2014年发布完整的HTML5标准, 并在积极进行HTML5.1的开发^[15]。与此同时, 微软宣布在2013年4月8日停止对Windows XP系统的支持和更新, IE8以下的浏览器也将逐步被淘汰。而开源的响应式网页框架层出不穷, 如Bootstrap、Topcoat、GroundworkCSS等。各种新的相关想法在不断涌现, 创意的火花在不断碰撞。对于网站建设者来说, 网站设计和功能日益符合设计需求; 对于最终用户来说, 易用性也在不断加强。目前, 复旦大学^[16]、华东师范大学^[17]等高校主页已经采用响应式设计。在日益普及的无线上网服务和移动4G网络的大趋势助力下, Web网页和WAP网页双网融合的时代已经为期不远。

参考文献

View Option

[1]	龙泉, 谢春枝, 申艳. 国外高校移动图书馆应用现状调查及启示[J]. 图书馆论坛, 2013, 33(3): 60-64, 24. Long Quan, Xie Chunzhi, Shen Yan. The Survey and Enlightenment of Mobile Service in Foreign Universities[J]. Library Tribune, 2013, 33(3): 60-64, 24. [本文引用:2] [CJCR: 2.213]
[2]	叶莎莎, 杜杏叶. 国内外移动图书馆的应用发展综述[J]. 图书情报工作, 2013, 57(6): 141-147. Ye Shasha, Du Xingye. Review on Application Development Status of Mobile Library at Home and Abroad[J]. Library and Information Service, 2013, 57(6): 141-147. [本文引用:1] [CJCR: 1.193]
[3]	龙泉, 谢春枝, 申艳, 等. 国内外高校图书馆移动服务现状及比较分析[J]. 情报杂志, 2013, 32(2): 173-176. Long Quan, Xie Chunzhi, Shen Yan, et al. The State of the Art and Comparative Analysis of Mobile Services in Domestic and International University Libraries[J]. Journal of Intelligence, 2013, 32(2): 173-176. [本文引用:1]
[4]	魏群义, 侯桂楠, 霍然, 等. 国内移动图书馆应用与发展现状研究——以“985”高校和省级公共图书馆为调研对象[J]. 图书馆, 2013(1): 114-117. Wei Qunyi, Hou Guinan, Huo Ran, et al. A Study on Practical and Developing Status of Chinese Mobile Libraries: Based on the Investigation of 985 Academics and Provincial Public Libraries[J]. Library, 2013(1): 114-117. [本文引用:4]
[5]	艾媒咨询. 2013Q1中国智能手机市场季度报告[EB/OL]. [2013-05-06]. http: //www. iimedia. cn/36650. html. iiMedia Research. Market Quarterly Report of Smartphone in China (2013 First Quarter) [EB/OL]. [2013-05-06]. http://www.iimedia.cn/36650.html. [本文引用:1]
[6]	Responsive Web Design[EB/OL]. [2014-06-06]. http://alistapart.com/article/responsive-web-design. [本文引用:1]
[7]	Bootstrap[EB/OL]. [2013-08-15]. http://www.bootcss.com/. [本文引用:2]
[8]	Bootstrap Expo[EB/OL]. [2014-06-06]. http://expo.getbootstrap.com/. [本文引用:1]
[9]	LESS CSS [EB/OL]. [2014-06-06]. http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/. [本文引用:1]
[10]	Frain B. 响应式Web设计HTML5和CSS3实战[M]. 王永强译. 北京: 人民邮电出版社, 2013. Frain B. Responsive Web Design with HTML5 and CSS3[M]. Translated by Wang Yongqiang. Beijing: Post & Telecom Press, 2013. [本文引用:1]
[11]	张树明. 基于响应式Web设计的网页模板的设计与实现[J]. 计算机与现代化, 2013(6): 125-127. Zhang Shuming. Design and Implementation of Webpage Template Based on Responsive Web Design[J]. Computer and Modernization, 2013(6): 125-127. [本文引用:1] [CJCR: 0.3579]
[12]	Offcanvas[EB/OL]. [2013-08-15]. http://v3.bootcss.com/examples/offcanvas/. [本文引用:1]
[13]	BootstrapV3. 2. 0[EB/OL]. [2014-06-06]. http://getbootstrap.com/getting-started/. [本文引用:1]
[14]	ScreenQueri[EB/OL]. [2014-06-06]. http://beta.screenqueri.es/. [本文引用:1]
[15]	W3C中国[EB/OL]. [2014-04-10]. http: //www. chinaw3c. org/. W3C China [EB/OL]. [2014-04-10]. http://www.chinaw3c.org/. [本文引用:1]
[16]	复旦大学[EB/OL]. [2014-04-16]. http: //www. fudan. edu. cn/. Fudan University [EB/OL]. [2014-04-16]. http://www.fudan.edu.cn/. [本文引用:1]
[17]	华东师范大学[EB/OL]. [2014-04-16]. http: //www. ecnu. edu. cn/. East China Normal University [EB/OL]. [2014-04-16]. http://www.ecnu.edu.cn/. [本文引用:1]

2013

0.0

2.213

... 2 国内外移动图书馆的发展现状在2013年发表的对2012年国外移动图书馆调查统计的相关文献, 无论是对USNnes-QS2011世界大学排名前30位的高校图书馆^[1]还是对国外移动图书馆的最佳实践网站M-Libraries中100多个移动图书馆逐一进行访问和调查^[2]结果来看, WAP网站服务是最为广泛使用的服务方式(在高校调查^[1]中达到了84%), 同时短信和APP的普及率也非常高 ...

2013

0.0

1.193

. 2013, 57(6):141-147 DOI:10.7536/j.issn.0252-3116.2013.06.024

Review on Application Development Status of Mobile Library at Home and Abroad

1. School of Information Resource Management, Renmin University of China, Beijing 100872 2. Documentation and Information Centre of the Chinese Academy of Sciences, Beijing 100190

With the literature research and network research method, this paper investigates the services of one hundred and twenty-seven mobile libraries from fifteen countries such as United States, Canada, Britain and Holland, and the development situation of one hundred and fifty-one mobile libraries in China including Hong Kong, Macao and Taiwan. Then it makes a statistical analysis and comparative study on the mobile library from the perspectives of opening time, range of popularization, service modes and service contents. At last, it summarizes the development status of mobile libraries at home and abroad.

主要通过文献调研和网络调研的方法,对美国、加拿大、英国和荷兰等15个国家的127个移动图书馆服务情况进行调查;其次,对我国(包括港澳台地区)151个移动图书馆的发展情况进行了具体调研,并从移动图书馆服务的开通时间、普及范围、服务方式和服务内容等方面进行统计分析和对比研究,最后对国内外移动图书馆的发展现状进行总结。

2013

0.0

... 相较于国外, 经过龙泉等^[3]和魏群义等^[4]的调查和分析, 我国移动图书馆WAP网站服务的普及率最高, 短信服务次之, 而APP的普及率尚不及欧美主要国家 ...

0.0

... 相关服务也主要由北京书生、超星公司和江苏汇文等几家公司提供, 自建WAP网站较少^[4] ...

... 高校和7个省级公共图书馆中, 仅有4个图书馆是独立开发或者参与开发的^[4] ...

... 并且通常只使用其中一种或者两种方式^[4] ...

2013

0.0

... 仅仅从现在市场环境来看, 根据艾媒咨询(iiMedia Research)中国智能手机市场季度监测报告中数据显示^[5], 2013年第一季度中国智能手机市场操作系统分布状况方面, Android、iOS、Symbian、Windows Phone占比分别为71%、12 ...

2014

0.0

... 马科特(Ethan Marcotte)提出^[6] ...

2013

0.0

. 2013, :- DOI:10.3724/SP.J.1041.2013.00114

Bootstrap

( 1 Center for Studies of Psychological Application, South China Normal University, Guangzhou 510631, China) ( 2 Department of Psychology, School of Education, Guangzhou University, Guangzhou 510006, China)

Bootstrap is a returned re-sampling method used to estimate the variance component and their variability. Adjusted bootstrap method was used by Wiley in p×i design for normal data in 2001. However, Wiley did not compare the difference between adjusted method and unadjusted method when estimating the variability. To expand Wiley’s 2001 study, our study applied Monte Carlo method to simulate four distribution data. The aim of simulation is to explore the effects of four different estimation methods when estimating the variability of estimated variance components for generalizability theory. The four distribution data are normal distribution data, dichotomous distribution data, polytomous distribution data and skewed distribution data. It is common that researchers focus on normal distribution data and neglect non-normal distribution data, yet non-normal distribution data could always be seen in tests such as TOEFL and GRE. There are several methods to estimate the variability of variance components, including traditional, bootstrap, jackknife and Markov Chain Monte Carlo (MCMC). Former research by Li and Zhang (2009) shows that bootstrap method is significantly better than traditional, jackknife, and MCMC methods in estimating the variability for four distribution data. Bootstrap method has superior cross-distribution quality when estimating the variability of estimated variance components. Li and Zhang (2009) also suggest that bootstrap method should be adopted with a “divide-and-conquer” strategy to obtain good estimated standard error and estimated confidence interval and the criteria of such strategy should be set to: boot-p for person, boot-pi for item, and boot-i for person and item. However, it is unclear that which of the bootstrap methods (adjusted and unadjusted) is better for boot-p, boot-pi, and boot-i. Therefore, our study intends to probe into this comparison as well. This aim of the study is to explore whether adjusted bootstrap method is superior to unadjusted method in improving the estimation of variance components and their variability relative for generalizability theory. The simulation is implemented in R statistical programming environment. To simulate skewed data, HyperbolicDist package is used. Some criteria are set to compare the four methods. The bias is considered when variance components and their standard errors are estimated. The smaller the absolute bias is, the more reliable the result is. The criterion of confidence intervals is “80% interval coverage”. If the “80% interval coverage” is closer to 0.80, the confidence interval is more reliable. The results indicate that for four distribution data, adjusted bootstrap method is superior to unadjusted bootstrap method whether in point estimation of variance components or in variability estimation of variance components. For its improvement of the estimation of variance components and their variability for generalizability theory, adjusted bootstrap should be adopted as soon as possible.

Bootstrap方法是一种有放回的再抽样方法, 可用于概化理论的方差分量及其变异量估计。用Monte Carlo技术模拟四种分布数据, 分别是正态分布、二项分布、多项分布和偏态分布数据。基于p×i设计, 探讨校正的Bootstrap方法相对于未校正的Bootstrap方法, 是否改善了概化理论估计四种模拟分布数据的方差分量及其变异量。结果表明：跨越四种分布数据, 从整体到局部, 不论是“点估计”还是“变异量”估计, 校正的Bootstrap方法都要优于未校正的Bootstrap方法, 校正的Bootstrap方法改善了概化理论方差分量及其变异量估计。

... 2 源于Twitter的Bootstrap^[7]Bootstrap是来自Twitter设计师Mark Otto和Jacob Thornton在2011年发布的新型开源网站架构 ...

... 该架构具有12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件, 还有基于Web的定制工具等特色^[7] ...

2014

0.0

... com中广泛使用, 并且公开发布后得到广泛的支持和应用^[8] ...

2014

0.0

... Bootstrap的核心是基于LESS框架^[9]构建的CSS ...

2013

0.0

... 响应式网页常用的流式设计的核心思想是以百分比来设定元素的宽度^[10] ...

0.0

0.3579

... 本案例和张树明^[11]提出的#cod#x0201c ...

2013

0.0

... 0标准框架进行编写, 同时参考offcanvas案例^[12]并做了些改进, 增加了一个 ...

2014

0.0

... 正如Bootstrap官网所描述^[13], 这是由于IE8不支持CSS3和HTML5元素 ...

2014

0.0

... 为此, 笔者使用ScreenQueri^[14]模拟移动设备进行测试, 并用实体设备进行补充测试 ...

2014

0.0

... 1的开发^[15] ...

2014

0.0

. 2014, :- DOI:10.3969/j.issn.1000-3428.2014.02.069

复旦大学

(School of Information Science and Engineering, Fudan University, Shanghai 200433, China)

In practice of High Frequency(HF) Radio Frequency Identification(RFID) implementation, it is very hard to read multiple tags which are closely stacked because of insufficient energy scavenging caused by resonance frequency shifting. In order to solve this stacked tags problem, theoretical analysis of the stacked-multi-tags model is conducted and a novel variable frequency carrier method is proposed to match the shifted stacked tags’ resonance frequency. Experimental results show significant performance improvement compared with standard HF RFID reader in the condition of same radio frequency power and reading distance.

在高频射频识别技术的实际应用中，当多张标签紧密重叠在一起时，重叠标签的谐振频率会产生偏移，造成标签无法获取足够能量，导致标签无法读写。针对该问题，从理论角度建立并分析重叠标签的电磁场耦合模型，从本质上分析无法读写的原因，提出一种新的读写器设计方案，采用载波变频的方式匹配重叠标签偏移的谐振频率，并通过实验验证其可行性。实验结果表明，在相同功率及读写距离的情况下，与标准读写器相比，该设计方案能明显提高重叠标签的读写成功率。

... 目前, 复旦大学^[16]、华东师范大学^[17]等高校主页已经采用响应式设计 ...

2014

0.0

. 2014, :- DOI:10.3969/j.issn.1000-3428.2014.05.042

East China Normal University

(School of Information Science Technology, East China Normal University, Shanghai 200241, China)

Aiming to the problem of multi-objective Differential Evolution(DE) algorithms which have the characteristics of prematurity and slow convergence speed under high-dimensional situation, this paper proposes an improved multi-objective DE algorithms based on multi-mutation samples. Through using method of introducing multi-mutation individuals into the mutation operator and crossover operator of multi-objective DE algorithm, multi-objective DE algorithm populations can keep diversity, reduce the possibility of falling into local optimal solution, it has guick speed for optimal solution, and the improves the ability finding optimal solution using shorter iteration steps than standard multi-objective differential evolution algorithm. Experimental results show that compared with standarded multi-objective DE algorithms, the improved algorithm can find optimal value effectively in high-dimensional multi-objective environment.

针对多目标差分进化算法在高维函数下收敛速度慢和易早熟的问题，提出一种基于多变异个体的多目标差分进化改进算法。通过在多目标差分进化算法的个体变异及交叉操作中，引入多个变异个体，使得在高维多目标函数情况下，多目标差分进化算法种群可以更好地保持多样性，减少种群陷入局部最优解的可能性，从而提高该算法在高维多目标优化问题环境下，最优值解的搜索速度及全局最优值解的查找能力。实验结果表明，在高维多目标环境下，与标准多目标差分进化算法相比，该算法可以更快速地找到多个目标函数组的非劣最优值解集。

... 目前, 复旦大学^[16]、华东师范大学^[17]等高校主页已经采用响应式设计 ...