HTML5微書作為微閱讀媒體的設(shè)計(jì)

陳詩琴，李文江

（重慶文理學(xué)院a．圖書館，b．機(jī)電工程學(xué)院）

HTML5微書作為微閱讀媒體的設(shè)計(jì)

陳詩琴a，李文江b

（重慶文理學(xué)院a．圖書館，b．機(jī)電工程學(xué)院）

基于HTML5微場景，從設(shè)計(jì)框架、內(nèi)容結(jié)構(gòu)和頁面布局三方面對HTML5微書進(jìn)行整體構(gòu)建。選擇jQuery Mobile開源框架，從HTML5微書的HTML文檔組織、響應(yīng)式布局、翻頁控制和配音控制等方面進(jìn)行具體設(shè)計(jì)并實(shí)現(xiàn)。HTML5微書的實(shí)現(xiàn)有利于圖書館移動閱讀在社交平臺宣傳和推廣。

HTML5；微書；微閱讀；Hbuilder IDE；jQuery Mobile

1 微書簡介

微書是指一種電子書（或電子雜志），雖非傳統(tǒng)書法或根雕藝術(shù)，但同樣著眼于“微”字。寧波大學(xué)劉柏嵩館長將微書定義為：“微書是手機(jī)上的HTML5電子書，以語音敘述串接文本、圖片和視頻，成為可看、可聽的融合閱讀媒體?！蔽男问绞蔷W(wǎng)頁，內(nèi)容在云端，這有利于將其地址分享到微信、QQ和微博等社交平臺。與其他格式電子書相比，微書不需要專用閱讀器和閱讀器軟件，同時能自動響應(yīng)不同終端，并實(shí)現(xiàn)跨媒體出版。

從內(nèi)容上看，微書類似于“Mook”，即雜志書，由Magazine和Book組合而成。Mook是一種新文化商品，在國外已成為一個完整的產(chǎn)業(yè)鏈。Mook圖片多、文字少，兼具雜志和圖書的特點(diǎn)，在內(nèi)容上有圖書的系統(tǒng)性和厚重感，在形式上有雜志的快捷和靈活性。微書并不是紙本圖書的電子化，而是再創(chuàng)作。微書挑選紙本圖書周邊和正文部分內(nèi)容進(jìn)行濃縮，配上圖片、音效和視頻，達(dá)到對圖書的介紹和宣傳的效果。

從微書制作技術(shù)而言，需借助專業(yè)軟件。完美支持微信的微書是微場景的典型應(yīng)用。微場景（又名場景應(yīng)用）是通過HTML5技術(shù)制作的適合微信瀏覽的交互頁面。

2 微書的具體設(shè)計(jì)

2.1 構(gòu)建技術(shù)的選擇

微書的構(gòu)建其實(shí)質(zhì)為HTML5微場景構(gòu)建，目前微場景的構(gòu)建方式較多，從構(gòu)建工具看主要有兩種。

（1）專門設(shè)計(jì)平臺。微場景開發(fā)初衷是為了微信移動營銷，方便企業(yè)展示形象、推廣產(chǎn)品。這些微場景頁面精致、場景炫酷。如有圖網(wǎng)微信場景設(shè)計(jì)、Htm l5輕應(yīng)用設(shè)計(jì)、微客場景、Epub360微場景設(shè)計(jì)平臺和云來場景應(yīng)用等。完整使用微場景功能需付費(fèi)，且微場景設(shè)計(jì)服務(wù)對象是企業(yè)，并不適合圖書館制作微書。

真正針對微書制作的微場景，目前只有寧波愉閱網(wǎng)絡(luò)科技有限公司推出的融合數(shù)字媒體微書2.0平臺。該平臺可在線設(shè)計(jì)，提供書籍目錄式的設(shè)計(jì)向?qū)?。對于個體注冊用戶設(shè)計(jì)微書是免費(fèi)且無功能限制；但對于單位或集體注冊，建立多本微書，并形成微書架，需要支付費(fèi)用。

（2）專業(yè)開發(fā)工具。利用專業(yè)開發(fā)工具設(shè)計(jì)微書，需編寫代碼，實(shí)現(xiàn)難度較高。選擇支持HTML5開發(fā)的IDE代碼編輯工具（如Aptana Studio、HBuilder、WebStorm）和開源JavaScript前端開發(fā)框架（如jQuery Mobile、Schena Touch），手寫HTML5、CSS3和JavaScript代碼去構(gòu)建微書內(nèi)容。還可選擇可視化的HTML5設(shè)計(jì)工具（如Maqetta、WeX5），利用組件拖拽、屬性設(shè)置的方式進(jìn)行微書構(gòu)建。

在微場景的兩種構(gòu)建方式中，應(yīng)用專業(yè)設(shè)計(jì)平臺構(gòu)建微書的難度低，但功能受限，設(shè)計(jì)的微書缺乏個性（提供的設(shè)計(jì)模板有限）。選用專業(yè)開發(fā)工具開發(fā)微書則相反，開發(fā)難度增加，但微書功能增強(qiáng)、設(shè)計(jì)更自由。在微書開發(fā)過程中，如果選擇具有代碼提示功能的IDE，則可大大降低寫代碼難度。經(jīng)過對多個IDE使用比較，本研究選擇Hbuilder IDE為開發(fā)工具。因?yàn)樗ㄟ^完整的語法提示和代碼輸入法、代碼塊及相關(guān)配套，能夠大幅提升HTML、JavaScript、CSS3的開發(fā)效率。

另外，為了微書更好地支持多平臺運(yùn)行，選擇一款較優(yōu)秀的JavaScript框架也是必要的。優(yōu)秀的JavaScript框架可以解決運(yùn)行環(huán)境的兼容性問題。jQuery Mobile框架正是符合需求的平臺。jQuery Mobile是jQuery在手機(jī)和平板設(shè)備上的版本，具有簡單、靈活、易于使用和支持跨平臺運(yùn)行的優(yōu)點(diǎn)。HTML文檔開發(fā)主要使用該框架的特定標(biāo)記和少量的JavaScript代碼。

2.2 微書框架設(shè)計(jì)

分析專門設(shè)計(jì)平臺，結(jié)合其微場景框架，微書框架如圖所示。首先設(shè)置微書向QQ空間或微信朋友圈等社交平臺分享標(biāo)題與描述，然后是微書頁面內(nèi)容的設(shè)計(jì)，最后是實(shí)現(xiàn)微書的社交平臺分享或二維碼發(fā)布。

其中微書內(nèi)容頁根據(jù)內(nèi)容安排，添加文本、圖片、按鈕和音視頻等素材，并設(shè)置相應(yīng)動態(tài)效果、微書頁面背景和頁面間的過渡切換方式等。

2.3 微書內(nèi)容結(jié)構(gòu)設(shè)計(jì)

本文的微書內(nèi)容結(jié)構(gòu)包括：封面、目錄、作者介紹、導(dǎo)讀、正文、后語和發(fā)布。

（1）導(dǎo)讀。內(nèi)容可以是書中序言、自序、語錄或警句，也可是專家的書評、推薦，或者微書制作者的“編者按”。導(dǎo)讀的形式可以是文字、圖片或視頻。

（2）正文。正文的內(nèi)容可以是圖書整個體系或脈絡(luò)的梳理、介紹，也可以是精華片段的采擷。正文文字配有朗讀，可聽可看。正文頁面切換有兩種方式，一種是配音朗讀完后，自動跳轉(zhuǎn)到下一頁；另一種是手動滑動換頁。

（3）后語。對正文內(nèi)容補(bǔ)充和說明，以及制作單位寄語或者微書制作的花絮。

（4）發(fā)布。放置微書發(fā)布地址二維碼和向社交平臺分享提示。

2.4 微書頁面總體布局

微書正文部分每個頁面布局大小自適應(yīng)移動智能手機(jī)、平板電腦或桌面系統(tǒng)的屏幕大小，因此頁面內(nèi)容安排要適度，嚴(yán)禁屏幕上出現(xiàn)滾動條。其中頁面頁眉放置當(dāng)前標(biāo)題和朗讀聲音暫?？刂瓢粹o，頁腳放置頁面鏈接，中間是微書正文內(nèi)容呈現(xiàn)和頁面切換區(qū)。每一頁按智能手機(jī)刷屏習(xí)慣靠手指的滑動切換頁面。

圖微書框架設(shè)計(jì)

3 微書實(shí)現(xiàn)的關(guān)鍵技術(shù)

3.1 微書HTML文檔組織

把微書所有內(nèi)容頁面都放在一個HTML靜態(tài)文檔中，每個頁面都通過data-role=“page”進(jìn)行創(chuàng)建與邏輯分開，每個頁面添加一個唯一的頁面page_id，頁面之間使用＜a href=”#page_id”＞標(biāo)簽實(shí)現(xiàn)切換。每次打開微書HTML文檔時，默認(rèn)顯示第一個頁面。其微書HTML文檔結(jié)構(gòu)代碼如下所示。

＜!DOCTYPE html＞

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

＜head＞

……//HTML自適應(yīng)屏幕大小設(shè)置、jQuery Mobile和微書翻頁、閱讀配音控制的JavaScript程序引用

＜/head＞

＜body＞

＜div data-role="page"id="page1"data-theme="a"＞//文檔中page1頁面結(jié)構(gòu)

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

……//頁眉內(nèi)容標(biāo)題

＜/div＞

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

……//頁面正文內(nèi)容

＜/div＞

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

……//頁腳鏈接導(dǎo)航

＜/div＞

＜/div＞

……//文檔中余下頁面結(jié)構(gòu)

＜/body＞

＜/htm l＞

多個頁面集中在一個HTML文檔，其優(yōu)點(diǎn)在于只需加載一次，免去頁面切換時重復(fù)向服務(wù)器發(fā)送請求，使得切換流暢；缺點(diǎn)是第一次加載時間長、代碼長，不利于維護(hù)。［1］為了克服加載時間長的缺點(diǎn)，啟用HTML 5的Cache Manifest緩存機(jī)制，讀者再次閱讀訪問時，直接從緩存中讀取數(shù)據(jù)，加快了加載速度且節(jié)約數(shù)據(jù)流量。［2］

3.2 微書響應(yīng)式布局

為保持微書總體布局不變，適應(yīng)不同終端的不同屏幕和分辨率，在頁面正文中添加文本、圖片、按鈕和音視頻時，繼承jQuery Mobile默認(rèn)樣式，并加入CSS3媒體查詢方法，實(shí)現(xiàn)響應(yīng)式布局。［3］

（1）屏幕大小響應(yīng)。微書使用的優(yōu)先設(shè)備是移動智能手機(jī)，在CSS樣式設(shè)計(jì)時，不需要使用任何布局的媒體查詢方法；平板電腦比大部分小屏幕移動手機(jī)具有更高分辨率，若采用手機(jī)同樣的布局，一些元素可能被拉伸或超出位置。因此，需在原CSS基礎(chǔ)上，增加“@media all and（min-width:800px）{正文頁面平板布局樣式}”，其中新的樣式實(shí)質(zhì)是對之前移動智能手機(jī)樣式的覆蓋或重置。同理在適應(yīng)桌面瀏覽器瀏覽時，新增加“@media all and（min-width:1024px）{正文頁桌面瀏覽器布局樣式}”。

（2）屏幕旋轉(zhuǎn)響應(yīng)。為了使微書跟隨設(shè)備屏幕的旋轉(zhuǎn)，必須引入orientation媒體查詢來改變網(wǎng)站布局樣式。當(dāng)設(shè)備處于豎屏模式時，啟用@media all and（orientation:portrait）{豎屏瀏覽器布局樣式}媒體查詢中包含的布局樣式。處于橫屏模式時，啟用@media all and（orientation:landscape）{橫屏瀏覽器布局樣式}媒體查詢中包含的布局樣式。

3.3 微書翻頁控制

微書提供三種翻頁控制方式。通過配音朗讀結(jié)束進(jìn)行自動翻頁；手動翻頁便于快速瀏覽文字信息；鏈接導(dǎo)航是通過點(diǎn)擊頁腳鏈接進(jìn)行翻頁，彌補(bǔ)個別瀏覽器對HTML5兼容不好的缺點(diǎn)。

其中自動翻頁和手動翻頁，主要是調(diào)用changePage事件進(jìn)行翻頁控制。

（1）自動翻頁。利用頁面配音播放audio控件的addEventListener事件監(jiān)聽播放狀態(tài)，當(dāng)狀態(tài)為“ended”時，觸發(fā)頁面的changePage事件。以page1頁面audio1播放配音結(jié)束為例，主要實(shí)現(xiàn)代碼如下。

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

（2）手動翻頁。根據(jù)翻書和單手刷屏習(xí)慣，在屏幕上左右滑動翻頁，向左滑動實(shí)現(xiàn)向后翻，向右滑動實(shí)現(xiàn)向前翻。實(shí)現(xiàn)方法是在當(dāng)前頁面上調(diào)用bind方法，監(jiān)聽swipeleft向左劃動或swiperight向右劃動事件，若有左右劃動，則觸發(fā)頁面的changePage事件。以page2頁面上左右劃動為例，主要實(shí)現(xiàn)代碼如下。

$（function（）{

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

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

}）

3.4 微書配音制作與控制

為了減少視覺疲勞，給微書內(nèi)容提供配音，將配音作為頁面的背景音樂。需實(shí)現(xiàn)配音播放與暫停控制，翻頁配音自動切換控制。

（1）配音制作。配音可以人工錄制或選擇軟件制作。工具軟件推薦使用“方正暢聽”，它采用科大訊飛國際領(lǐng)先語音合成ViviVoice技術(shù)，實(shí)現(xiàn)將文字轉(zhuǎn)換為聲音進(jìn)行朗讀的播放軟件，其聲音可與真人媲美。將每頁正文內(nèi)容文本，使用該軟件轉(zhuǎn)錄為一個mp3文件。若文件大小超過1M，選擇WinMP3Shrink軟件進(jìn)行壓縮處理，可加快閱讀時的加載速度。

（2）配音播放控制。在閱讀頁面文字時，可通過點(diǎn)擊頁面喇叭按鈕，實(shí)現(xiàn)配音暫停和繼續(xù)播放的切換，主要實(shí)現(xiàn)方法代碼如下。

function playOrPaused（audio_id）{

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

if（audioEle.paused）{

audioEle.play（）;

return;

}

audioEle.pause（）;

}

在進(jìn)行頁面切換（包括手動、自動或鏈接導(dǎo)航）時，調(diào)用bind方法，監(jiān)聽到在當(dāng)前頁面隱藏之前的pagebeforehide事件后，執(zhí)行配音播放暫停，并將播放進(jìn)度歸零；監(jiān)聽到在新頁面顯示完成的pageshow事件后，執(zhí)行新頁配音播放。

4 微書的實(shí)現(xiàn)效果

在微書HTML文檔主體內(nèi)容設(shè)計(jì)完成后，就可部署在WEB服務(wù)器上，得到微書網(wǎng)址。利用網(wǎng)址制作網(wǎng)址二維碼和設(shè)計(jì)分享程序，并在微書發(fā)布頁面上添加二維碼圖片和微書分享按鈕，微書就可以分享傳播了。

如《幸福了嗎》，按照微書內(nèi)容結(jié)構(gòu)、響應(yīng)布局和微書翻頁切換方式構(gòu)建微書。微書的目錄分類明確、實(shí)現(xiàn)目錄和正文內(nèi)容的鏈接；微書在移動設(shè)備上字體顯示清晰、支持圖文混合、能自適應(yīng)屏幕大小、排版精致。

5 結(jié)語

隨著微信息環(huán)境的逐步形成，圖書館服務(wù)模式也隨之改變。微信息環(huán)境意味著信息傳播媒介、信息內(nèi)容的微型化，也意味著信息活動的微型化。［1］對圖書館而言，意味著提供信息內(nèi)容載體和服務(wù)的微型化。微書作為一種新穎的電子書，將紙本圖書中數(shù)量龐大和結(jié)構(gòu)層次嚴(yán)謹(jǐn)?shù)男畔⑦M(jìn)行分解和數(shù)字化的轉(zhuǎn)換，讓讀書變成移動終端上開放、簡單的活動。微書的“微”一方面體現(xiàn)在內(nèi)容上的短小精悍，將圖書中有意思的內(nèi)容節(jié)選放大，順應(yīng)讀者微閱讀時代碎片化的閱讀習(xí)慣；另一方面，體現(xiàn)在傳播方式上，能貼近讀者日常使用的微信等社交平臺。

微書的制作是對圖書的再創(chuàng)作，不涉及版權(quán)問題。在未來，隨著圖書館制作微書的增多，可以把微書集合成微書架，使得管理和使用更為方便。另外，每本微書可以加上書評、點(diǎn)贊，并與圖書館書目數(shù)據(jù)建立連接，提供預(yù)約、借閱功能，從而達(dá)到微書對館藏圖書的推廣效果。

［1］（阿根廷）Maximiliano Firtman．jQuery Mobile即學(xué)即用［M］．吳英杰,吳敏琦譯．北京：人民郵電出版社，2013：30－32.

［2］陶國榮．jQuery Mobile權(quán)威指南［M］.北京：機(jī)械工業(yè)出版社,2012：15－22.

［3］達(dá)特森，鐘迅科．JQuery Mobile入門經(jīng)典［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－），女，重慶文理學(xué)院圖書館館員，研究方向：信息管理與信息技術(shù)應(yīng)用；李文江（1976－），男，重慶文理學(xué)院機(jī)電工程學(xué)院高級實(shí)驗(yàn)師，研究方向：計(jì)算機(jī)應(yīng)用技術(shù)（數(shù)據(jù)處理方向）。

2016－03－08［責(zé)任編輯］徐娜