劉忠杰，李春華

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

?

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

劉忠杰，李春華

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

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

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

0 引言

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

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

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

1.1 HTML5

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

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

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

1.2 Bootstrap

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

1.3 DocPub

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

2 總體設(shè)計

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

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

圖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)隊分工更加合理，極大地提高了團(tuán)隊開發(fā)效率。系統(tǒng)技術(shù)架構(gòu)圖如圖2所示。

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

本系統(tǒng)支持平板、臺式電腦、筆記本、智能手機(jī)和大型終端等設(shè)備。服務(wù)器分為Web服務(wù)器和報紙下載服務(wù)器，其中Web服務(wù)器用來運(yùn)行系統(tǒng)，報紙下載與存儲使用單獨(dú)的服務(wù)器，這樣的分布可以提高報紙下載和轉(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)，首先，獲得報紙網(wǎng)址或是用戶輸入的包含PDF文檔的網(wǎng)址，然后通過使用正則表達(dá)式分析獲取網(wǎng)址中PDF文檔的下載字符串，最后把該字符串鏈接保存到數(shù)據(jù)庫中，并由下載功能讀取數(shù)據(jù)庫解析出來的PDF下載地址進(jìn)行下載，同時將文件的位置保存到本地數(shù)據(jù)庫中。

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

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

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

for (Element element : elements ){

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

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

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

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

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

hrefs.add(paperPath+href);

}else{

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

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();

}

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

圖6 報紙版面信息保存路徑圖

2.7 熱門推薦展示

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

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

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

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

2.8 報刊架的展示

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

圖9 報刊架界面展示圖

2.9 幻燈片的效果展示

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

圖10 幻燈片展示界面

3 結(jié)束語

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

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

(2) PDF轉(zhuǎn)換為HTML文檔能力強(qiáng)，速度快，出錯率??；

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

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

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

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

[1] 李炤楠. 電子報紙與傳統(tǒng)報紙版式設(shè)計比較研究[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新特性在移動平臺中的應(yīng)用研究[J]. 數(shù)字技術(shù)與應(yīng)用, 2015(9):101-102.

[5] 張玉晴，黃瑾娉．基于HTML5 的跨平臺移動應(yīng)用關(guān)鍵技術(shù)的研究與實(shí)現(xiàn)[J].工業(yè)控制計算機(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的移動學(xué)習(xí)平臺Web App研究與實(shí)現(xiàn)[J]. 信息通信, 2014(5): 84-85.

[8] 郭玉江.基于HTML5的跨平臺移動內(nèi)容管理系統(tǒng)的設(shè)計與實(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è)計與實(shí)現(xiàn)[D].廣州：中山大學(xué), 2013.

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

[13] 蔣凌燕,查英華.基于HTML5的響應(yīng)式Web頁面重組適配技術(shù)研究[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); 常州市科技支撐計劃項(xiàng)目(CE20165004)

TP311.52

A

10.19358/j.issn.1674- 7720.2017.13.030

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

2017-02-06)

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