基于HTML5的電子報(bào)紙制作與展示系統(tǒng)研究*

劉忠杰，李春華

(常州信息職業(yè)技術(shù)學(xué)院 軟件學(xué)院，江蘇 常州 213164)

?

基于HTML5的電子報(bào)紙制作與展示系統(tǒng)研究*

劉忠杰，李春華

(常州信息職業(yè)技術(shù)學(xué)院 軟件學(xué)院，江蘇 常州 213164)

主要研究了基于HTML5的電子報(bào)紙制作與展示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，系統(tǒng)充分利用HTML5技術(shù)實(shí)現(xiàn)報(bào)紙雜志的在線閱讀，為移動(dòng)互聯(lián)網(wǎng)時(shí)代用戶閱讀提供良好的體驗(yàn)。首先，通過采集各種報(bào)紙雜志媒體網(wǎng)站上的PDF文件獲取原始數(shù)據(jù)；然后，將PDF文件轉(zhuǎn)換成體積小、與報(bào)紙?jiān)信虐嬉恢?、整體排版無錯(cuò)位、字體清晰、可放大不失真的HTML文件；最終展示給用戶的是具有多種炫酷幻燈片播放效果的HTML文檔。該HTML文檔支持多終端、多分辨率的完美顯示，也可由用戶自己檢索、分享、瀏覽各種報(bào)紙雜志信息，并在長(zhǎng)時(shí)間無人操作時(shí)自動(dòng)進(jìn)行版面更換，頁面更換時(shí)實(shí)現(xiàn)類似幻燈片的切換效果。

HTML5技術(shù)；PDF文件；幻燈片；電子報(bào)紙

0 引言

隨著我國(guó)互聯(lián)網(wǎng)的快速發(fā)展，PC互聯(lián)網(wǎng)已日趨飽和，移動(dòng)互聯(lián)網(wǎng)卻呈現(xiàn)井噴式發(fā)展。伴隨著“互聯(lián)網(wǎng)+”戰(zhàn)略的實(shí)施，如今新媒體的發(fā)展越發(fā)蓬勃，微信的高速發(fā)展已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)的前驅(qū)，而人們的閱讀方式也悄悄地發(fā)生了變化，尤其是手機(jī)閱讀越來越普遍。

移動(dòng)互聯(lián)時(shí)代，最古老的大眾傳播媒體——傳統(tǒng)報(bào)紙緊跟時(shí)代步伐，展開自我革新，積極迎接變革的挑戰(zhàn)。在眾多印刷媒體中，傳統(tǒng)報(bào)紙憑借其突出的前瞻性，最先預(yù)見了互聯(lián)網(wǎng)帶來的旺盛發(fā)展機(jī)遇，紛紛迅速地進(jìn)行“網(wǎng)絡(luò)融合”，爭(zhēng)先在互聯(lián)網(wǎng)的海洋中劃分領(lǐng)地。當(dāng)前，傳統(tǒng)報(bào)紙?jiān)诰W(wǎng)絡(luò)上的傳播形態(tài)可謂是各式各樣，但之中最能呈現(xiàn)其基本形態(tài)的非電子報(bào)紙莫屬[1]。所以，電子報(bào)紙的設(shè)計(jì)制作及展示也越發(fā)引人關(guān)注[2-3]。針對(duì)移動(dòng)互聯(lián)網(wǎng)時(shí)代人們通過手機(jī)、平板等移動(dòng)終端無法方便快捷地查看搜索各大報(bào)紙信息這一痛點(diǎn)，本文開發(fā)了一套基于HTML5的電子報(bào)紙制作與展示系統(tǒng)，使人們能夠非常方便地通過手機(jī)、平板、數(shù)字大屏等移動(dòng)終端設(shè)備隨時(shí)隨地、方便快捷地瀏覽查看報(bào)紙信息。

1 相關(guān)技術(shù)介紹

1.1 HTML5

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改的成果。HTML5的優(yōu)勢(shì)在于提高可用性和改進(jìn)用戶的友好體驗(yàn)；有幾個(gè)新的標(biāo)簽，這將有助開發(fā)人員定義重要的內(nèi)容；可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻)；可以很好地替代Flash和Silverlight；當(dāng)涉及到網(wǎng)站的抓取和索引時(shí)，對(duì)于SEO很友好；將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲[4-6]。

圖2 系統(tǒng)技術(shù)架構(gòu)圖

本文幻燈片的展示效果主要在HTML5中的canvas畫布中完成，通過在canvas畫布中加載HTML文檔，再配合Jquery控制的動(dòng)畫效果就實(shí)現(xiàn)了各種幻燈片的切換效果。用戶在閱讀時(shí)，可以選擇的頁面切換效果有淡入、淡出、旋轉(zhuǎn)、擦除、劈裂、后退和前進(jìn)等30多種。

1.2 Bootstrap

Bootstrap來自Twitter ,基于HTML5和 CSS3開發(fā)，并在jquery的基礎(chǔ)上進(jìn)行完善，是目前最受歡迎的前端框架。本系統(tǒng)所有前臺(tái)界面都是使用Bootstrap進(jìn)行開發(fā)的，Bootstrap簡(jiǎn)潔靈活，使用簡(jiǎn)單，使Web項(xiàng)目開發(fā)快捷的同時(shí)還能擁有優(yōu)美的界面，最重要的是它使系統(tǒng)支持手機(jī)、平板、數(shù)字大屏等多種移動(dòng)終端設(shè)備的完美顯示，從而實(shí)現(xiàn)了系統(tǒng)的跨平臺(tái)性[7-10]。

1.3 DocPub

DocPub是由PDFTron公司開發(fā)的一個(gè)簡(jiǎn)單易用且支持多個(gè)平臺(tái)的命令行應(yīng)用程序。它提供了快速高效的方式來幫助用戶轉(zhuǎn)換多種格式的文檔，如PDF、XPS、XOD、HTML和EPUB格式文件，且適用于服務(wù)器的高吞吐量環(huán)境進(jìn)行工作。

2 總體設(shè)計(jì)

2.1 系統(tǒng)功能結(jié)構(gòu)圖

本系統(tǒng)是一個(gè)在線報(bào)紙閱讀軟件，提供自動(dòng)抓取、制作報(bào)紙，同時(shí)進(jìn)行展示的功能。每日定時(shí)通過網(wǎng)絡(luò)爬蟲在各大主流報(bào)紙網(wǎng)站上選擇所要抓取的報(bào)紙內(nèi)容，并檢索到相應(yīng)的PDF內(nèi)容的下載地址，再通過DocPub工具將該P(yáng)DF文件轉(zhuǎn)換成與原排版一致、字跡清晰、體積更小的HTML文件。全程自動(dòng)完成，無需人工操作，并支持響應(yīng)式布局，可在多種終端進(jìn)行完美展示。本系統(tǒng)功能結(jié)構(gòu)圖如圖1所示。其中，系統(tǒng)主要分為報(bào)紙制作、報(bào)紙陳列和篩選、報(bào)紙展示、權(quán)限控制以及后臺(tái)管理5個(gè)模塊。

圖1 系統(tǒng)功能結(jié)構(gòu)圖

2.2 系統(tǒng)技術(shù)架構(gòu)

本系統(tǒng)使用的架構(gòu)為SSH(Spring、Spring MVC、Hibernate)，該架構(gòu)實(shí)現(xiàn)了將展示層、邏輯層和數(shù)據(jù)庫訪問層相互分離，降低了代碼之間的耦合度。該技術(shù)的應(yīng)用使團(tuán)隊(duì)分工更加合理，極大地提高了團(tuán)隊(duì)開發(fā)效率。系統(tǒng)技術(shù)架構(gòu)圖如圖2所示。

2.3 系統(tǒng)拓?fù)浣Y(jié)構(gòu)圖

本系統(tǒng)支持平板、臺(tái)式電腦、筆記本、智能手機(jī)和大型終端等設(shè)備。服務(wù)器分為Web服務(wù)器和報(bào)紙下載服務(wù)器，其中Web服務(wù)器用來運(yùn)行系統(tǒng)，報(bào)紙下載與存儲(chǔ)使用單獨(dú)的服務(wù)器，這樣的分布可以提高報(bào)紙下載和轉(zhuǎn)換的速度[11-12]。兩服務(wù)器之間通過交換機(jī)通信。系統(tǒng)網(wǎng)絡(luò)拓?fù)鋱D如圖3所示。

圖3 系統(tǒng)網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖

2.4 PDF文件下載

PDF文件的下載采用的是網(wǎng)絡(luò)爬蟲技術(shù)來實(shí)現(xiàn)，首先，獲得報(bào)紙網(wǎng)址或是用戶輸入的包含PDF文檔的網(wǎng)址，然后通過使用正則表達(dá)式分析獲取網(wǎng)址中PDF文檔的下載字符串，最后把該字符串鏈接保存到數(shù)據(jù)庫中，并由下載功能讀取數(shù)據(jù)庫解析出來的PDF下載地址進(jìn)行下載，同時(shí)將文件的位置保存到本地?cái)?shù)據(jù)庫中。

本系統(tǒng)使用的是web magic，這個(gè)網(wǎng)絡(luò)爬蟲是一個(gè)免費(fèi)開源的資源，并且很容易對(duì)網(wǎng)絡(luò)爬蟲進(jìn)行二次開發(fā)。同時(shí)web magic提供了所有Java開發(fā)所需要的jar包。網(wǎng)絡(luò)爬蟲所需開發(fā)包如圖4所示。

圖4 網(wǎng)絡(luò)爬蟲所需開發(fā)包

網(wǎng)絡(luò)爬蟲正則表達(dá)式的編寫有所不同，由于每份報(bào)紙的下載地址不同，并且每份報(bào)紙的PDF版本的命名格式也是不同的，因此需要對(duì)每份報(bào)紙?jiān)O(shè)計(jì)不同的正則表達(dá)式，其核心代碼如下：

for (Element element : elements ){

String href=element.attr("href");

if (href!=null&&href.endsWith(".pdf")){

LOG.debug("報(bào)紙鏈接："+href);

href=href.Replace("../../../","");

LOG.debug("報(bào)紙鏈接："+href);

hrefs.add(paperPath+href);

}else{

LOG.debug("不是報(bào)紙鏈接："+href);

}

}

2.5 PDF文件轉(zhuǎn)換HTML5文件的制作

PDF文件轉(zhuǎn)換HTML5文件的制作是由DocPub來實(shí)現(xiàn)的。DocPub是在DOS命令下運(yùn)行的，由Java代碼運(yùn)行command命令來執(zhí)行DocPub的程序命令，其中DocPub的運(yùn)行命令如圖5所示。

圖5 DocPub的運(yùn)行命令圖

在此系統(tǒng)的調(diào)用過程中，充分利用DocPub實(shí)現(xiàn)對(duì)PDF文件的轉(zhuǎn)換，具體Java調(diào)用DocPub的部分代碼如下：

public String Convert(){

//取出已下載的PDF路徑

PDFConvertDAO pdfdao=new PDFConvertDAO();

List list=ipdfconertservice.pdfInfor();

ActionContext ctx=ActionContext.getContext();

String exeUrl="D:/docpub/docpub64.exe";

for (int i=0;i

String pdfUrl=list.get(i).toString();

String htmlUrl="D;/temp";

pdfdao.docpub(exeUrl,pdfUrl,htmlUrl);

}

System.out.printIn("完成");

return null;

}

2.6 數(shù)據(jù)處理

數(shù)據(jù)處理主要是對(duì)獲取到的PDF文件的轉(zhuǎn)換以及對(duì)數(shù)據(jù)后期的相關(guān)處理過程。所有處理信息都會(huì)保存到數(shù)據(jù)庫中。本系統(tǒng)能夠?qū)DF的下載地址解析出來然后將其保存到數(shù)據(jù)庫中。本系統(tǒng)支持反屏蔽，能夠在一定時(shí)間間隔后再次進(jìn)行下載。考慮到系統(tǒng)在某些特定的情況下會(huì)產(chǎn)生錯(cuò)誤流，因此本系統(tǒng)支持對(duì)錯(cuò)誤流的解決辦法，對(duì)報(bào)紙進(jìn)行矯正。防止錯(cuò)誤流的核心代碼如下：

public byte[] readInputStream(InputStream inputStream) throws IOException{

byte[] buffer =new byte[1024];

int len=0;

ByteArrayOutputSteam bos=new ByteArrayOutputSteam();

while ((len=inputStream.read(buffer)!=-1){

bos.write(buffer,0,len);

}

bos.close();

return bos.toByteArray();

}

報(bào)紙有版面和相關(guān)類別，在下載的過程中，系統(tǒng)能夠分出報(bào)紙版面及所屬類別，并保存到數(shù)據(jù)庫中，以方便用戶查詢和搜索，報(bào)紙版面信息保存路徑如圖6所示。

圖6 報(bào)紙版面信息保存路徑圖

2.7 熱門推薦展示

熱門推薦功能的實(shí)現(xiàn)主要利用了JQuery+HTML5的技術(shù)。通過后臺(tái)對(duì)用戶瀏覽次數(shù)和閱讀習(xí)慣的統(tǒng)計(jì)分析，設(shè)計(jì)了熱門推薦，這樣既方便了用戶選擇常看報(bào)紙，又能夠根據(jù)用戶的閱讀習(xí)慣推薦用戶喜歡的同類報(bào)紙。圖7是系統(tǒng)熱門推薦的展示圖。

圖7 系統(tǒng)熱門推薦展示圖

在用戶閱讀報(bào)紙時(shí)，后臺(tái)報(bào)紙推薦分析模塊會(huì)記錄下用戶閱讀該份報(bào)紙的時(shí)間、該報(bào)紙的所屬類別及報(bào)紙版面信息等，通過統(tǒng)計(jì)分析這些用戶個(gè)人閱讀信息，能夠更好地為用戶推薦喜歡的報(bào)紙，其中后臺(tái)數(shù)據(jù)統(tǒng)計(jì)分析圖如圖8。

圖8 用戶閱讀習(xí)慣統(tǒng)計(jì)分析雷達(dá)圖

2.8 報(bào)刊架的展示

報(bào)刊架模塊是用戶瀏覽電子報(bào)紙的重要展示平臺(tái)，界面設(shè)計(jì)的美觀性、交互的友好性、用戶的閱讀體驗(yàn)這些都是衡量系統(tǒng)的關(guān)鍵因素，直接關(guān)系到用戶對(duì)系統(tǒng)的滿意程度，所以把報(bào)刊架模塊作為系統(tǒng)的主界面展示給用戶。采用HTML5+CSS+Bootstrap來布局和設(shè)計(jì)整個(gè)報(bào)刊架界面，整體系統(tǒng)支持響應(yīng)式布局[10,13]，在不同的瀏覽器、手機(jī)、電腦、平板、數(shù)據(jù)終端大屏等多分辨率設(shè)備下，都可以實(shí)現(xiàn)很好的展示效果。根據(jù)各大報(bào)紙的相關(guān)屬性，將報(bào)紙分為9個(gè)類別：機(jī)關(guān)報(bào)、晨報(bào)、日?qǐng)?bào)、晚報(bào)、都市報(bào)、快報(bào)、財(cái)經(jīng)和體育報(bào)。當(dāng)點(diǎn)擊每一個(gè)系統(tǒng)類別標(biāo)簽時(shí)，就可以查看相關(guān)類別標(biāo)簽下的各個(gè)報(bào)刊，報(bào)刊架界面展示圖如圖9所示。

圖9 報(bào)刊架界面展示圖

2.9 幻燈片的效果展示

幻燈片的切換效果使用了HTML5+JQuery來實(shí)現(xiàn)，用戶根據(jù)自己的需求，可以選擇不同的幻燈片切換效果，來進(jìn)行報(bào)紙的閱讀，其中實(shí)現(xiàn)的幻燈片切換效果有淡入、淡出、旋轉(zhuǎn)、擦除、劈裂、立方體、翻頁、下陷等30多種。幻燈片切換模塊還支持鍵盤導(dǎo)航、多層次、嵌套式幻燈片、獨(dú)特的網(wǎng)址書簽和內(nèi)部鏈接、各種主題和觸屏設(shè)備播放等特效。幻燈片展示界面如圖10所示。

圖10 幻燈片展示界面

3 結(jié)束語

本系統(tǒng)充分利用HTML5技術(shù)實(shí)現(xiàn)了電子報(bào)紙的制作與展示，解決了用戶在移動(dòng)互聯(lián)時(shí)代通過手機(jī)、平板、終端大屏等設(shè)備閱讀報(bào)刊雜志的問題。系統(tǒng)架構(gòu)清晰，功能完善，具有很強(qiáng)的擴(kuò)展性和可移植性，具體概括為如下幾點(diǎn)：

(1) 界面友好，操作方便，每一模塊都具有鮮明的特色；

(2) PDF轉(zhuǎn)換為HTML文檔能力強(qiáng)，速度快，出錯(cuò)率?。?/p>

(3) 針對(duì)用戶閱讀習(xí)慣進(jìn)行統(tǒng)計(jì)分析，能夠有效地向用戶推薦用戶喜歡的報(bào)紙內(nèi)容；

(4) 報(bào)紙閱讀界面具有不同的主題和30多種幻燈片切換效果；

(5) 能夠自適應(yīng)手機(jī)、平板、終端大屏等不同的終端設(shè)備；

(6) 用戶可以自己搜索查詢各種報(bào)紙新聞信息，并發(fā)表評(píng)論和批注，方便用戶日后查看使用。

[1] 李炤楠. 電子報(bào)紙與傳統(tǒng)報(bào)紙版式設(shè)計(jì)比較研究[D]. 北京：北京建筑大學(xué)，2014.

[2] Zhang Nana, Gu Wei, Xu Fangqin， et al. Electronic paper display technology and its application development[C].Progress in Applied Sciences, Engineering and Technology, Part 3: Selected, peer reviewed papers from the 2014 International Conference on Materials Science and Computational Engineering(ICMSCE 2014), Qingdao, China, 2014:2333-2336.

[3] JOHANNESSEN M R. A frame analysis of opinion articles in online news[C]. Electronic Participation: 7th IFIP 8.5 International Conference, ePart 2015, Thessaloniki, Greece, 2015:15-26.

[4] 黃磊,張媛. HTML5新特性在移動(dòng)平臺(tái)中的應(yīng)用研究[J]. 數(shù)字技術(shù)與應(yīng)用, 2015(9):101-102.

[5] 張玉晴，黃瑾娉．基于HTML5 的跨平臺(tái)移動(dòng)應(yīng)用關(guān)鍵技術(shù)的研究與實(shí)現(xiàn)[J].工業(yè)控制計(jì)算機(jī)，2013,26(3)：56-58.

[6] CARLSON N. Experiencing standardized media fragment annotations within HTML5[J]. Computing Reviews,2015,56(6):371-371.

[7] 李海峰.基于HTML5+jQuery Mobile的移動(dòng)學(xué)習(xí)平臺(tái)Web App研究與實(shí)現(xiàn)[J]. 信息通信, 2014(5): 84-85.

[8] 郭玉江.基于HTML5的跨平臺(tái)移動(dòng)內(nèi)容管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 杭州: 杭州電子科技大學(xué), 2015.

[9] SCHROCK A R. HTML5 and openness in mobile platforms[J]. Journal of Media & Cultural Studies, 2014, 28(6): 820-834.

[10] CINAL H, TASKAN S, BAYBAS F, et al. Dynamic disaster coordination system with Web based Html5 API[J].International Journal of 3-D Information Modeling, 2015,4(2):1-15.

[11] 梁仲智.基于HTML5的跨終端Web生成系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].廣州：中山大學(xué), 2013.

[12] 黃永慧, 陳程凱. HTML5在移動(dòng)應(yīng)用開發(fā)上的應(yīng)用前景[J]. 計(jì)算機(jī)技術(shù)與發(fā)展, 2013, 23(7): 207-209.

[13] 蔣凌燕,查英華.基于HTML5的響應(yīng)式Web頁面重組適配技術(shù)研究[J]. 計(jì)算機(jī)與現(xiàn)代化, 2015(2):7-10.

Research on electronic newspaper making and display system based on HTML5

Liu Zhongjie, Li Chunhua

(School of Software, Changzhou College of Information Technology, Changzhou 213164, China)

The design and display of electronic newspaper which is based on HTML5 is discussed in this thesis. By full use of HTML5 technology, online reading of newspaper is realized, and the internet users can get better reading experience. Firstly, the initial data is acquired by collecting PDF files of all the newspaper and media websites. Then a small HTML5 file is transferred from initial data, which is same in typesetting, clear in font, without dislocation in layout, and can be enlarged without distortions. Finally, this HTML5 is displayed to users with cool multi-slide show effect. It can also be perfectly displayed in multi terminals, with multi-resolution. The users can also search, share and bourse any information from all kinds of newspaper. The pages can automatically alternate in a long time no operation, and similar slide-switch-effect appears in pages alternating.

HTML5 technology; PDF file; slide; electronic newspaper

江蘇高校品牌專業(yè)工程資助項(xiàng)目(PPZY2015A090); 常州市科技支撐計(jì)劃項(xiàng)目(CE20165004)

TP311.52

A

10.19358/j.issn.1674- 7720.2017.13.030

劉忠杰，李春華.基于HTML5的電子報(bào)紙制作與展示系統(tǒng)研究[J].微型機(jī)與應(yīng)用，2017,36(13)：97-101.

2017-02-06)

劉忠杰(1983-)，男，碩士，工程師，CCF會(huì)員，主要研究方向：軟件框架設(shè)計(jì)、圖像識(shí)別、數(shù)據(jù)庫設(shè)計(jì)。