基于HTML5語言便攜式閱讀服務的設計與實現

劉偉強

摘要：該設計是一種利用層疊樣式表和JavaScript工具實現的基于HTML5語言的交互式“故事打印機”，通過本地存儲的方法解決無網絡時的問題，同時能夠適應各種版本或者分辨率不同的瀏覽器，擁有其較好的移植性。

中圖分類號：G4 文獻標識碼：A 文章編號：（2021）-5-318

1 引言

根據中國互聯網信息中心調查顯示，中國網民比例接近97%，移動互聯網用戶的規模逼近8億。隨著5G時代的來臨，各種移動終端會變得更加智能化、普遍化。因此，人們對手機的依賴性也越來越顯著，手機等電子產品的過度使用問題已經成為了一個研究焦點，如何有效的減少電子產品的非必要使用時間需要被社會所重視。

近年來，對于電子產品的過度使用的應對方案層出不窮，衍生了各類醫療電子產品，但執行效果并不顯著。為了解決過度使用智能電子產品問題，本文設計一款基于HTML5網頁設計觸摸電子屏，本設計注重良好的用戶體驗，在形成心理暗示的同時提供便攜式閱讀，擁有廣闊的市場前景。

HTML5開發平臺只是提供了產品開發的編程語言環境，產品的誕生是用戶需求所驅動的，了解用戶的需求是產品開發的關鍵，在注重功能實現的同時，更注重與用戶的友好交互。因此，本設計主要創新如下：

1）HTML5頁面開發在實現基礎功能的同時兼容各種瀏覽器版本，并且對于不同的系統界面有著自適應功能。

2）在用戶交互設計中注重用戶體驗與傳統的頁面設計相比，交互性更強，在實現隨機打印“故事”的同時，硬件方面也與用戶有著交互體驗。

2系統詳細設計與實現

利用分治思想，將項目拆封為各個組件，組件再次拆分為更簡單的模塊，逐層降低系統的復雜度，不僅可以使得系統擁有更好的拓展性和可維護性，同時提高模塊的復用度，極大的提高代碼的編寫速度，減少了不必要的重復性工作。如圖1所示，為系統設計框架示意圖。

導航欄（Header）設計：以Header作為主盒子，內嵌三個盒子分別為logo（導航欄標識），nav（導航欄選項），burger（折疊菜單），采用柵格布局左側占1/3，右側占2/3，個元素垂直居中。

輪播頁面（Glide）設計：以Glide作為輪播組件，在底部和左右兩側都設有切換按鈕方便用戶進行頁面的置換，使用Animejs動畫庫，對內部元素進行動畫設計，通過監聽事件，當發現界面切換時對每個子元素的出現順序時間，效果進行調控

打印界面（content-wrapper）設計：根據功能實現要求，將頁面劃分為四欄（choose-members），并為每一欄增加按鈕（choose-member），在index.js文件下通過事件監聽，在頁面的點擊bottom時，調用doPrint（）打印標記區域的內容，并設計隨機數，進而選擇內部存儲的不同內容。

底部信息界面（footer）設計：以footer作為主盒子，再細分四個小盒子，讓設計分為三欄，布局方式依然采用柵格布局，為方便用戶返回頂層添加了返回鏈接，1，2，3是包括了備案信息，聯系方式等信息。

自適應網頁設計：為了方便不同的硬件設施，在分辨率改變的情況下，響應式布局實現了對頁面元素的差異化控制，通過對Css樣式表的修改，在不同分辨率下客觀觀察布局實現對頁面元素的彈性變化，如圖2所示。

3系統測試

1.網頁之間的跳轉。通過監聽事件，當鼠標點擊功能按鍵，或者探索更多時，能夠流暢的跳轉到目標頁面。

2.打印功能。當用戶點擊功能頁面的相關按鈕時，通過調用窗口的doPrint（），實現隨機打印，并顯示在當前窗口，用戶可以提前預覽到相關內容。

3.通過瀏覽的的開發者選項，更改服務器的代理 ，可以觀察到在不同的瀏覽器下，網頁能夠完整的顯示，并且功能并沒有任何影響，在響應式布局的調控下，可以滿足大部分分辨率顯示效果。

表1所示為瀏覽器測試實例。

4 總結

本文利用基于HTML5與JavaScript網頁設計兼容大部分的操作性系統和瀏覽器，有效的節省了開發成本，同時可跨平臺，且版本的迭代容易。后期會根據用戶實時需求進行功能的修改與增添，同時借助云服務器進行后臺的搭建與維護。

參考文獻

[1]孫素華. Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通[M]. 中國青年電子出版社， 2011.

[2]黃濤， 王艷慧， 關鴻亮. 基于Android的"社交+自適應推薦"閱讀APP設計與實現[J]. 軟件導刊， 2020， v.19;No.209（03）：134-138.

[3]蘇新宇. 基于用戶體驗的移動閱讀應用設計研究[J]. 信息與電腦（理論版）， 2020， v.32;No.447（05）：172-174.

[4]張明勇. BOPPPS教學模型下基于超星學習通在線學習平臺的混合式教學實踐研究——以《HTML5 & CSS3》網頁設計課程為例[J]. 武漢船舶職業技術學院學報， 2019， 018（004）：67-73.

基金項目：2019年國家級大學生創新創業訓練計劃項目（大學生創新創業訓練計劃）（項目編號：201913617012）

安徽師范大學皖江學院 安徽 蕪湖