目前,国内移动图书馆平台的开发模式大部分是通过与第三方的合作, 将图书馆已有的系统功能延伸到移动网络平台上^{[ 3]}。在这种开发模式下,主要是移动运营商以及担任移动图书馆系统设计的信息技术公司在推动移动图书馆服务。例如,始于2008年7月的四川移动手机图书馆项目,它是由图书馆提供全馆的信息资料,由中国移动在图书馆内部部署移动代理服务器(Mobile Agent Server,MAS),由重庆亚德科技提供技术解决方案的三方共建移动图书馆平台^{[ 4]}。该平台采用了基于MVC模式的J2EE体系结构,可为手机图书馆用户提供图书检索、预约、续借等WAP服务以及借书到期和预约图书到馆的短信提醒服务。目前该项目已在四川省图书馆、成都理工大学图书馆以及四川大学图书馆等40余所高校或地方图书馆进行了实施,有力地促进了我国西部地区移动图书馆的建设。

由于第三方机构的经济利益驱动,往往在系统的开发过程中注重能够给自身带来直接经济效益的模块开发(如短信服务模块等),而忽略了整个平台在用户体验方面的研究。从四川移动手机图书馆项目的运行情况来看,主要存在对移动设备兼容性差、功能单一以及缺乏后续维护等一系列问题,以至于造成移动图书馆平台利用率较低,甚至部分移动图书馆网站还出现无法访问的情况^{[ 3]},难以实现良好的用户体验。因此,为了使用户更好地利用移动图书馆这一信息服务平台,有必要对该平台进行优化,以提升用户体验。

移动环境的高度分散性(大量具有不同功能、规格的移动设备),使得难以在各种移动设备上实现相同的最佳用户体验。因此,本文采用了一种渐进增强(Progressive Enhancement)用户体验的策略^{[ 5]},针对不同性能的移动设备分层次地实现最佳用户体验,其系统原理如图1所示:

图1

	Figure Option ViewDownloadNew Window
	图1 系统原理图—渐进增强用户体验

当用户通过移动终端访问移动图书馆时,内容适配服务器将自动识别移动终端的类型,并加载相应版本的移动图书馆网站:

(1)普通版移动图书馆网站主要针对非智能移动终端进行优化。由于非智能终端在性能与规格上的局限性,因此在这一层面主要考虑移动图书馆平台的兼容性与可用性,为用户提供基本公共用户体验。其优化策略为在保留原有移动图书馆平台业务逻辑功能的基础上,通过利用W3C的mobileOK Checker工具分析原有移动图书馆平台在基本用户体验方面存在的主要问题,并实施相应的优化。

(2)智能版移动图书馆网站的服务对象为智能移动终端用户。由于智能终端设备在屏幕尺寸、浏览器功能以及运算性能上的提升,因此在构建面向智能终端设备的移动图书馆应用时,应充分利用智能终端设备的性能优势来实现最佳的用户体验。其优化策略为利用移动版JavaScript框架jQuery Mobile,对普通版移动图书馆网站进行二次优化,为多种智能终端设备提供跨平台的统一用户界面(UI)系统以及丰富的交互体验。

内容适配(Content Adaptation)是一种根据显示设备性能、网络能力以及用户喜好等因素,对用户请求的内容进行调整的过程,它旨在为用户提供一种优化的用户体验^{[ 6]}。常用的内容适配技术主要有三种^{[ 7]}:

(1)通过媒体类型(Media Type)和媒体查询 (Media Query)对不同的设备指定特定的样式表(CSS)。

Media Type与Media Query分别是CSS 2.0和CSS 3.0中的重要内容,利用它们可以很容易地为低端和高端的移动设备指定不同的样式表文件,从而实现不同的最佳用户体验。

(2)利用商业或开源工具自动根据同一页面生成各种移动设备专用的网页。

有些商业或开源工具能实现将桌面版网页快速转化为各种移动设备专用的移动版网页。例如,dotMobi公司的goMobi^{[ 8]}以及开源工具MyMobileWeb^{[ 9]}等。

(3)利用检测算法判断终端类型并将用户重定向到特定的网页。

这种方式通过特定的检测算法来判断移动终端的类型,并将使用不同移动终端的用户重定向到特定的网页。

第一种方式的缺点在于并不是所有的移动浏览器都支持媒体类型和媒体查询,因此在兼容性方面存在一定的问题。而第二种方式则在对移动网站实现灵活控制以及添加个性化功能等方面存在一定的局限性。因此,笔者采用了第三种方式进行内容适配,该方式的优点在于可实现对移动终端的类型快速判别,同时将使用不同移动终端的用户重定向到相对独立且不同版本的移动图书馆网站,有利于针对不同的服务对象进行更加细致灵活的优化。检测算法流程如图2所示:

图2

	Figure Option ViewDownloadNew Window
	图2 检测算法流程图

检测算法首先利用一种服务器端脚本语言(如PHP、ASP等)读取浏览器的UserAgent字符串,然后将UserAgent与正则表达式对象RegExp中的移动平台列表进行正则匹配。如果不能匹配,判断用户使用的是桌面平台,此时跳出检测程序,并为用户加载图书馆桌面网站;如果匹配成功,判断用户使用的是移动终端,此时还需要进行二次匹配,以确定移动终端是否属于高端移动设备。如果二次匹配成功,则将用户重定向到智能版移动图书馆网站,而匹配不成功的用户将重定向到普通版移动图书馆网站。检测算法的主要代码如下:

dim regex,agent

set regex = new regexp '建立正则表达式

regex.pattern = "ipod|iphone|android|symbian|smartphone|mobile|windows ce|opera mobi|opera mini|blackberry|palm os..." '对正则匹配模板赋值,建立移动平台列表

agent = LCase(request.ServerVariables("HTTP_USER_AGENT") & "") '读取浏览器的UserAgent字符串

if agent <> "" then

if regex.test(agent) then '一次匹配

if (Instr(agent, "iphone")>0 or Instr(agent, "ipod")>0 or Instr(agent, "android")>0 or Instr(agent, "blackberry")>0 or Instr(agent, "palm")>0) then '二次匹配

response.redirect("http://222.197.136.16/3G/") '定向到智能版移动图书馆网站

else

response.redirect("http://222.197.136.16") '定向到普通版移动图书馆网站

end if

end if

end if

检测算法中采用了detectmobilebrowsers.com上提供的移动平台列表^{[ 10]},虽然该列表包含了大多数常用的移动平台,但是却不能保证检测算法能100%识别所有移动终端。而一旦造成用户的错误重定向,将会大大地降低用户体验度。因此在整个平台的运行过程中,需要对移动平台列表进行定期更新,不断地加入那些未能被正确识别的移动平台。

普通版移动图书馆网站的服务对象为使用低端移动设备的用户,由于低端移动设备具有浏览器种类多、用户数量大以及硬件性能较低的特点,因此优化的重点为提高原有移动图书馆平台的兼容性,以最大限度地减少设备和软件对用户体验的影响。而代码验证(Validating)可以有效地提高移动网站兼容性,它能确保一个移动网站遵循公认的HTML标准,并兼容大多数的移动浏览器^{[ 11]},因此笔者采用了W3C的mobileOK Checker工具对原有移动图书馆平台的代码进行验证。

(1)W3C mobileOK Checker的产生与基本功能

为了确保在尽可能多的移动设备上实现良好的用户体验,W3C的移动Web最佳实践工作组于2008年7月推出了一套包括60条推荐指南在内的移动Web最佳实践1.0规范(Mobile Web Best Practices 1.0)^{[ 12]}。W3C mobileOK Checker是一个用于自动检测Web文档是否符合移动Web最佳实践1.0规范的在线工具^{[ 13]},目前其最新版本为2010年9月推出的1.4.2版,增加了对HTML5文档的支持。mobileOK Checker提供了输入网址、上传网页文件或直接提交网页源码三种方式对用户的网页进行检测,其检测范围覆盖了能够影响网页内容移动友好性的8个领域,包括标记验证、页面结构、CSS样式表、图像的尺寸与格式、用户输入、HTTP层、字符编码与链接。

(2)代码验证

在mobileOK Checker主页中输入普通版移动图书馆网站网址(http://222.197.136.16/),mobileOK Checker将对该地址的网页进行检测并返回检测结果。检测结果将按照“错误的严重性”(Failures Per Severity)和“错误类别”(Failures Per Category)分组显示未通过代码验证的项目列表,其中“错误的严重性”分为关键、严重、中等、低等、警告以及提示6个级别,而“错误类别”则包括遵循 Web 标准、注意设备的局限性以及优化导航系统等10个类别。mobileOK Checker还会依据错误的多少和严重性对被检测网页给出一个0-100之间的评分,这种评分制度可以促使开发人员努力改进被检测网页以达到推荐指南的要求,并能优先改进那些严重影响用户体验的错误^{[ 7]}。通过mobileOK Checker的代码验证,四川移动手机图书馆平台主页的评分仅为30分,分别存在2个关键错误、2个中等错误和1个警告,如表1所示:

表1

表1

表1 代码验证结果 错误级别 错误类别 错误描述 关键 遵循Web 标准 与文档相关联的媒体类型不是"application/xhtml+xml","application/vnd.wap.xhtml+xml"或"text/html",不能被大部分的移动设备识别为网页 关键 遵循Web 标准 该文件是不是一个HTML文件(根元素是WML) 中等 节约网络资源 该文件没有提供缓存信息(HTTP消息头中没有指定"Expires" 或者 "Cache-Control") 中等 你的用户正在路上 该文件没有页面标题 警告 保持小巧精简 超过10%的页面字符是多余的(空格或注释)

表1 代码验证结果

(3)优化实施

针对代码验证中出现的错误,笔者主要从以下几个方面分别实施相应的优化:

①将标记语言从WML迁移到XHTML MP

通过对代码验证结果进行分析,笔者发现代码验证结果中的2个关键错误和1个中等错误都是由于四川移动手机图书馆采用了WML标记语言造成的,W3C也明确提出不建议采用WML标记语言来构建移动网站^{[ 14]}。与WML语言相比,XHTML MP语言是开放移动联盟(OMA)和W3C正式支持的标准,它将无线和有线互联网结合在一起,另外XHTML MP语言支持移动版本的样式表,能方便地将页面内容和显示分离。因此,将标记语言从WML迁移到XHTML MP对于提升移动图书馆网站的兼容性和用户体验有重要的作用。关于具体的迁移方法,可以参考文献[ 15]。

②善于利用缓存

无线移动网络的低带宽和高延迟极大地影响了移动网站的可用性,而采用缓存机制可以帮助移动浏览器有效减少HTTP请求次数和响应数据量,以达到更快的网页载入速度。而四川移动手机图书馆网站禁用了缓存机制,这是造成代码验证结果中出现另一个中等错误的主要原因,需要进一步优化改进。对于Web缓存的控制,主要通过设置HTTP头信息(HTTP Headers)中的Expires、Cache-Control和Last-Modified等属性来实现,具体实现方法可以参考文献[ 16]。

③精简代码

由于移动网络的局限性,网页中多余的空格和注释将会使加载速度变慢以及增加不必要的使用开销。而通过mobileOK Checker检测发现,四川移动手机图书馆网站上超过10%的页面字符是多余的(空格或注释),因此需要对页面代码进行精简,去除多余的和不必要的字符(注释、空格、换行、Tab缩进等),以减小文件的大小。笔者采用了目前使用较为广泛的HTML Tidy工具^{[ 17]}对网页代码进行批量精简和验证。

通过上述优化策略的实施,四川移动手机图书馆主页已经通过了mobileOK Checker的所有测试,如图3所示:

图3

	Figure Option ViewDownloadNew Window
	图3 优化后主页的代码验证结果

这表明该主页能兼容大多数的移动设备,并能为用户提供一种统一的基本用户体验。然而,正如W3C所指出的一样,随着移动终端设备在性能上的提升,通过mobileOK Checker测试的网站并不能保证在高端移动设备上能实现最佳用户体验^{[ 18]}。因此,为了充分利用高端移动设备的性能优势,有必要针对高端移动设备对移动图书馆网站进行二次优化。

智能版移动图书馆网站的服务对象为使用高端移动设备的用户。然而,面对众多具有不同硬件规格和操作系统的高端移动设备,智能版移动图书馆网站应当具备既能兼容所有主流的高端移动设备平台,又能在不同高端移动设备平台上分别实现最佳用户体验的能力。因此,笔者采用了支持渐进增强特性的jQuery Mobile框架来实现智能版移动图书馆网站的优化。

(1)jQuery Mobile框架介绍

jQuery Mobile旨在为用户提供一个触摸优化、统一用户界面并能无缝跨所有主流的移动平台运行的移动Web开发框架^{[ 19]}。jQuery Mobile框架最主要的特性为采用了渐进增强的策略,使网页的基本内容能够在所有的移动设备、平板电脑和桌面平台上正常显示,同时该框架还能在主流高端移动平台(如iOS, Android及Windows Phone 7等)上实现丰富的、类似于应用程序的用户体验。

(2)优化实施

智能版移动图书馆网站优化主要包括网站前端的优化和网站功能的拓展两方面:

①网站前端的优化

作为一种移动JavaScript框架,jQuery Mobile主要通过对前端性能的优化来提升移动网站的可用性^{[ 20]}。因此,在实施优化时只需对普通版移动图书馆网站的前端代码(表示层)进行修改,而保留其逻辑控制层和模型层。通过在每个页面的头部分别引用jQuery核心库文件jquery.js、jQuery Mobile库文件jquery.mobile.js以及样式表文件jquery.mobile.css即可将jQuery Mobile框架添加到移动网站中。jQuery Mobile框架大量地使用HTML 5规范中的自定义数据属性data-*^{[ 21]}来实现对网页元素的选取和控制。例如,jQuery Mobile要求每个网页的结构必须采用一种分层Div结构,每个页面都由一个data-role属性值为“page”的Div容器以及三个data-role属性值分别为“header”、“content”和“footer”的Div子容器构成。在实施优化时,普通版移动图书馆网站上每个页面的代码必须按照上述结构进行改写,并添加相应的内容到各个Div容器中。另外,jQuery Mobile还提供了一个包含5种预设色板(Swatches)的主题框架,每一种色板都包含了一套风格统一的色彩样式,通过设置data-theme属性可以灵活地为网页元素制定显示样式,这是确保移动网站能实现良好可用性的基础。

②网站功能的拓展

对智能版移动图书馆网站实施功能拓展的目的是充分利用高端移动设备的性能优势和新技术来更好地满足用户需求。由于采用jQuery Mobile框架,利用众多的jQuery插件可以方便地对移动网站的功能进行拓展。例如,笔者采用了Google Code上的jquery-ui-map插件^{[ 22]}来实现地图导航功能,可以为读者提供实时定位以及显示到馆的最近路线服务。

jquery-ui-map插件对Google Maps JavaScript API V3进行了封装,并提供了一系列简化的API来实现对Google Map API的控制。该插件创建地图应用的基本格式为('#map_square').gmap(),其中map_square是用于显示地图的DOM元素(一般为Div)的ID值,而封装函数.gmap()则包含了所有对API的引用。实现地图导航功能的基本思路为首先利用jquery-ui-map插件API中的getCurrentPosition方法获取读者的当前地理位置,再分别将当前地理位置和预设的图书馆地理位置传入displayDirections方法以计算两地之间路线,其关键实现代码如下:

﹩('#map_canvas_1').gmap('getCurrentPosition', function(position, status){

//调用getCurrentPosition API

if (status === 'OK') {

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

//获取用户当前地理位置

﹩('#map_canvas_1').gmap('get', 'map').panTo(latlng);

﹩('#map_canvas_1').gmap('search', { 'location': latlng }, function(results, status) {

//在地图上搜索用户位置

if (status === 'OK') {

﹩('#from').val(results[0].formatted_address);//返回用户当前地址

}});...

﹩('#map_canvas_1').gmap('displayDirections', { 'origin':﹩ ('#from').val(), 'destination': ﹩('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(success, response) {…};

//调用displayDirections API,计算两地之间路线

地图导航实现界面如图4所示:

图4

	Figure Option ViewDownloadNew Window
	图4 地图导航实现界面