HTML5微书作为微阅读媒体的设计

陈诗琴，李文江

（重庆文理学院a．图书馆，b．机电工程学院）

HTML5微书作为微阅读媒体的设计

陈诗琴a，李文江b

（重庆文理学院a．图书馆，b．机电工程学院）

基于HTML5微场景，从设计框架、内容结构和页面布局三方面对HTML5微书进行整体构建。选择jQuery Mobile开源框架，从HTML5微书的HTML文档组织、响应式布局、翻页控制和配音控制等方面进行具体设计并实现。HTML5微书的实现有利于图书馆移动阅读在社交平台宣传和推广。

HTML5；微书；微阅读；Hbuilder IDE；jQuery Mobile

1 微书简介

微书是指一种电子书（或电子杂志），虽非传统书法或根雕艺术，但同样着眼于“微”字。宁波大学刘柏嵩馆长将微书定义为：“微书是手机上的HTML5电子书，以语音叙述串接文本、图片和视频，成为可看、可听的融合阅读媒体。”微书的形式是网页，内容在云端，这有利于将其地址分享到微信、QQ和微博等社交平台。与其他格式电子书相比，微书不需要专用阅读器和阅读器软件，同时能自动响应不同终端，并实现跨媒体出版。

从内容上看，微书类似于“Mook”，即杂志书，由Magazine和Book组合而成。Mook是一种新文化商品，在国外已成为一个完整的产业链。Mook图片多、文字少，兼具杂志和图书的特点，在内容上有图书的系统性和厚重感，在形式上有杂志的快捷和灵活性。微书并不是纸本图书的电子化，而是再创作。微书挑选纸本图书周边和正文部分内容进行浓缩，配上图片、音效和视频，达到对图书的介绍和宣传的效果。

从微书制作技术而言，需借助专业软件。完美支持微信的微书是微场景的典型应用。微场景（又名场景应用）是通过HTML5技术制作的适合微信浏览的交互页面。

2 微书的具体设计

2.1 构建技术的选择

微书的构建其实质为HTML5微场景构建，目前微场景的构建方式较多，从构建工具看主要有两种。

（1）专门设计平台。微场景开发初衷是为了微信移动营销，方便企业展示形象、推广产品。这些微场景页面精致、场景炫酷。如有图网微信场景设计、Htm l5轻应用设计、微客场景、Epub360微场景设计平台和云来场景应用等。完整使用微场景功能需付费，且微场景设计服务对象是企业，并不适合图书馆制作微书。

真正针对微书制作的微场景，目前只有宁波愉阅网络科技有限公司推出的融合数字媒体微书2.0平台。该平台可在线设计，提供书籍目录式的设计向导。对于个体注册用户设计微书是免费且无功能限制；但对于单位或集体注册，建立多本微书，并形成微书架，需要支付费用。

（2）专业开发工具。利用专业开发工具设计微书，需编写代码，实现难度较高。选择支持HTML5开发的IDE代码编辑工具（如Aptana Studio、HBuilder、WebStorm）和开源JavaScript前端开发框架（如jQuery Mobile、Schena Touch），手写HTML5、CSS3和JavaScript代码去构建微书内容。还可选择可视化的HTML5设计工具（如Maqetta、WeX5），利用组件拖拽、属性设置的方式进行微书构建。

在微场景的两种构建方式中，应用专业设计平台构建微书的难度低，但功能受限，设计的微书缺乏个性（提供的设计模板有限）。选用专业开发工具开发微书则相反，开发难度增加，但微书功能增强、设计更自由。在微书开发过程中，如果选择具有代码提示功能的IDE，则可大大降低写代码难度。经过对多个IDE使用比较，本研究选择Hbuilder IDE为开发工具。因为它通过完整的语法提示和代码输入法、代码块及相关配套，能够大幅提升HTML、JavaScript、CSS3的开发效率。

另外，为了微书更好地支持多平台运行，选择一款较优秀的JavaScript框架也是必要的。优秀的JavaScript框架可以解决运行环境的兼容性问题。jQuery Mobile框架正是符合需求的平台。jQuery Mobile是jQuery在手机和平板设备上的版本，具有简单、灵活、易于使用和支持跨平台运行的优点。HTML文档开发主要使用该框架的特定标记和少量的JavaScript代码。

2.2 微书框架设计

分析专门设计平台，结合其微场景框架，微书框架如图所示。首先设置微书向QQ空间或微信朋友圈等社交平台分享标题与描述，然后是微书页面内容的设计，最后是实现微书的社交平台分享或二维码发布。

其中微书内容页根据内容安排，添加文本、图片、按钮和音视频等素材，并设置相应动态效果、微书页面背景和页面间的过渡切换方式等。

2.3 微书内容结构设计

本文的微书内容结构包括：封面、目录、作者介绍、导读、正文、后语和发布。

（1）导读。内容可以是书中序言、自序、语录或警句，也可是专家的书评、推荐，或者微书制作者的“编者按”。导读的形式可以是文字、图片或视频。

（2）正文。正文的内容可以是图书整个体系或脉络的梳理、介绍，也可以是精华片段的采撷。正文文字配有朗读，可听可看。正文页面切换有两种方式，一种是配音朗读完后，自动跳转到下一页；另一种是手动滑动换页。

（3）后语。对正文内容补充和说明，以及制作单位寄语或者微书制作的花絮。

（4）发布。放置微书发布地址二维码和向社交平台分享提示。

2.4 微书页面总体布局

微书正文部分每个页面布局大小自适应移动智能手机、平板电脑或桌面系统的屏幕大小，因此页面内容安排要适度，严禁屏幕上出现滚动条。其中页面页眉放置当前标题和朗读声音暂停控制按钮，页脚放置页面链接，中间是微书正文内容呈现和页面切换区。每一页按智能手机刷屏习惯靠手指的滑动切换页面。

图微书框架设计

3 微书实现的关键技术

3.1 微书HTML文档组织

把微书所有内容页面都放在一个HTML静态文档中，每个页面都通过data-role=“page”进行创建与逻辑分开，每个页面添加一个唯一的页面page_id，页面之间使用＜a href=”#page_id”＞标签实现切换。每次打开微书HTML文档时，默认显示第一个页面。其微书HTML文档结构代码如下所示。

＜!DOCTYPE html＞

＜htm l lang="en"manifest="notes.manifest"＞//引用缓存配置文件

＜head＞

……//HTML自适应屏幕大小设置、jQuery Mobile和微书翻页、阅读配音控制的JavaScript程序引用

＜/head＞

＜body＞

＜div data-role="page"id="page1"data-theme="a"＞//文档中page1页面结构

＜div data-role="header"data-position="fixed"＞

……//页眉内容标题

＜/div＞

＜div data-role="main"class="ui-content"＞

……//页面正文内容

＜/div＞

＜div data-role="footer"data-position="fixed"＞

……//页脚链接导航

＜/div＞

＜/div＞

……//文档中余下页面结构

＜/body＞

＜/htm l＞

多个页面集中在一个HTML文档，其优点在于只需加载一次，免去页面切换时重复向服务器发送请求，使得切换流畅；缺点是第一次加载时间长、代码长，不利于维护。［1］为了克服加载时间长的缺点，启用HTML 5的Cache Manifest缓存机制，读者再次阅读访问时，直接从缓存中读取数据，加快了加载速度且节约数据流量。［2］

3.2 微书响应式布局

为保持微书总体布局不变，适应不同终端的不同屏幕和分辨率，在页面正文中添加文本、图片、按钮和音视频时，继承jQuery Mobile默认样式，并加入CSS3媒体查询方法，实现响应式布局。［3］

（1）屏幕大小响应。微书使用的优先设备是移动智能手机，在CSS样式设计时，不需要使用任何布局的媒体查询方法；平板电脑比大部分小屏幕移动手机具有更高分辨率，若采用手机同样的布局，一些元素可能被拉伸或超出位置。因此，需在原CSS基础上，增加“@media all and（min-width:800px）{正文页面平板布局样式}”，其中新的样式实质是对之前移动智能手机样式的覆盖或重置。同理在适应桌面浏览器浏览时，新增加“@media all and（min-width:1024px）{正文页桌面浏览器布局样式}”。

（2）屏幕旋转响应。为了使微书跟随设备屏幕的旋转，必须引入orientation媒体查询来改变网站布局样式。当设备处于竖屏模式时，启用@media all and（orientation:portrait）{竖屏浏览器布局样式}媒体查询中包含的布局样式。处于横屏模式时，启用@media all and（orientation:landscape）{横屏浏览器布局样式}媒体查询中包含的布局样式。

3.3 微书翻页控制

微书提供三种翻页控制方式。通过配音朗读结束进行自动翻页；手动翻页便于快速浏览文字信息；链接导航是通过点击页脚链接进行翻页，弥补个别浏览器对HTML5兼容不好的缺点。

其中自动翻页和手动翻页，主要是调用changePage事件进行翻页控制。

（1）自动翻页。利用页面配音播放audio控件的addEventListener事件监听播放状态，当状态为“ended”时，触发页面的changePage事件。以page1页面audio1播放配音结束为例，主要实现代码如下。

$（function（）{audio1.addEventListener（'ended', function（）{$.mobile.changePage（'#page2',{transition: "slide"}）,false}）;}）

（2）手动翻页。根据翻书和单手刷屏习惯，在屏幕上左右滑动翻页，向左滑动实现向后翻，向右滑动实现向前翻。实现方法是在当前页面上调用bind方法，监听swipeleft向左划动或swiperight向右划动事件，若有左右划动，则触发页面的changePage事件。以page2页面上左右划动为例，主要实现代码如下。

$（function（）{

$（'#page2'）.bind（"swiperight",function（）{$. mobile.changePage（'#page1',{transition:"slide"}）;}）;

$（'#page2'）.bind（"swipeleft",function（）{$. mobile.changePage（'#page3',{transition:"slide"}）;}）;

}）

3.4 微书配音制作与控制

为了减少视觉疲劳，给微书内容提供配音，将配音作为页面的背景音乐。需实现配音播放与暂停控制，翻页配音自动切换控制。

（1）配音制作。配音可以人工录制或选择软件制作。工具软件推荐使用“方正畅听”，它采用科大讯飞国际领先语音合成ViviVoice技术，实现将文字转换为声音进行朗读的播放软件，其声音可与真人媲美。将每页正文内容文本，使用该软件转录为一个mp3文件。若文件大小超过1M，选择WinMP3Shrink软件进行压缩处理，可加快阅读时的加载速度。

（2）配音播放控制。在阅读页面文字时，可通过点击页面喇叭按钮，实现配音暂停和继续播放的切换，主要实现方法代码如下。

function playOrPaused（audio_id）{

var audioEle=$（"#"+audio_id）［0］;

if（audioEle.paused）{

audioEle.play（）;

return;

}

audioEle.pause（）;

}

在进行页面切换（包括手动、自动或链接导航）时，调用bind方法，监听到在当前页面隐藏之前的pagebeforehide事件后，执行配音播放暂停，并将播放进度归零；监听到在新页面显示完成的pageshow事件后，执行新页配音播放。

4 微书的实现效果

在微书HTML文档主体内容设计完成后，就可部署在WEB服务器上，得到微书网址。利用网址制作网址二维码和设计分享程序，并在微书发布页面上添加二维码图片和微书分享按钮，微书就可以分享传播了。

如《幸福了吗》，按照微书内容结构、响应布局和微书翻页切换方式构建微书。微书的目录分类明确、实现目录和正文内容的链接；微书在移动设备上字体显示清晰、支持图文混合、能自适应屏幕大小、排版精致。

5 结语

随着微信息环境的逐步形成，图书馆服务模式也随之改变。微信息环境意味着信息传播媒介、信息内容的微型化，也意味着信息活动的微型化。［1］对图书馆而言，意味着提供信息内容载体和服务的微型化。微书作为一种新颖的电子书，将纸本图书中数量庞大和结构层次严谨的信息进行分解和数字化的转换，让读书变成移动终端上开放、简单的活动。微书的“微”一方面体现在内容上的短小精悍，将图书中有意思的内容节选放大，顺应读者微阅读时代碎片化的阅读习惯；另一方面，体现在传播方式上，能贴近读者日常使用的微信等社交平台。

微书的制作是对图书的再创作，不涉及版权问题。在未来，随着图书馆制作微书的增多，可以把微书集合成微书架，使得管理和使用更为方便。另外，每本微书可以加上书评、点赞，并与图书馆书目数据建立连接，提供预约、借阅功能，从而达到微书对馆藏图书的推广效果。

［1］（阿根廷）Maximiliano Firtman．jQuery Mobile即学即用［M］．吴英杰,吴敏琦译．北京：人民邮电出版社，2013：30－32.

［2］陶国荣．jQuery Mobile权威指南［M］.北京：机械工业出版社,2012：15－22.

［3］达特森，钟迅科．JQuery Mobile入门经典［M］.北京：人民邮电出版社，2014：212－222.

TheDesign ofHTML5Micro-book asaMicro-readingMedia

Chen Shi-qin，LiWen-jiang

Based on HTML5-micro-scenes,thisarticle constructsHTML5micro-book from design framework,structureand contentof the page layout.Micro-book is specifically designed and embodied by selecting open source jQuery Mobile as framework from theHTML documentorganization,responsive layout,flip controland voice control,etc.The realization ofmicro-book isbeneficial to thepublicityand promotion of librarymobile reading in socialplatform.

HTML5;Micro-book;Micro-reading;Hbuilder IDE;QueryMobile

TP391.1

B

1005－8214（2016）11－0087－04

陈诗琴（1981－），女，重庆文理学院图书馆馆员，研究方向：信息管理与信息技术应用；李文江（1976－），男，重庆文理学院机电工程学院高级实验师，研究方向：计算机应用技术（数据处理方向）。

2016－03－08［责任编辑］徐娜