基于HTML5/.NET的新型高校圖書館數字資源系統設計與實現

龍德應+唐嫦燕

摘要：HTML5提供了Web應用信息描述和數據交互的新模式，解決了之前Web應用中的Web交互，即時更新、多設備跨平臺和自適應等方面的問題。該文通過新型高校圖書館數字資源系統的設計與實現，探討了在系統中應用HTML5、CSS3、Bootstrap和.NET技術的若干要點和思路?；贖TML5和.NET的新型圖書館資源系統能自動響應手機、平板和桌面計算機等各種設備，提供不同操作系統和瀏覽器中的一致性的良好體驗。

關鍵詞：HTML5；CSS3；.Bootstrap；.NET；響應式Web設計

中圖分類號：G250.7 文獻標識碼：A 文章編號：1009-3044（2017）28-0003-02

Abstract： HTML5 provides a new model of web application information description and data exchange， and solves the problems of web interaction， real-time updating， multi-device， cross-platform and self adaptation in web application. In this paper， through the design and implementation of a new type of university library digital resources system， the paper discusses the application of HTML5， CSS3， Bootstrap and.NET technology of some key points and ideas. The new library resources system Based on HTML5 and.NET can automatically respond to various devices such as mobile phone， tablet and desktop computer， and provide a good experience of consistency between different operating systems and browsers.

Key words： HTML5； CSS3； Bootstrap； .NET； Responsive web design

1 概述

HTML5是新一代的HTML，用于取代HTML4.01；經過歷時8年的精心研究和討論，2014年10月，W3C（World Wide Web Consortium）最終正式推出了HTML5標準規范。

HTML5的推出，使Web網站的開發、瀏覽體驗進入了嶄新的時代，除了展示基礎文字和圖片，不需安裝其他插件，HTML5原生的支持以前難以實現的動畫、視頻等多媒體的展示與交互，使Web網站成為了一個極大的內容豐富的平臺；HTML5是夢想中的“開放Web平臺”的基石，如能最終實現，可進一步推動更深層次的跨平臺Web應用。W3C會員如Apple、Google、Microsoft以及中國移動和華為等眾多知名公司的積極參與，對HTML5的推出發揮了重要作用，隨著整個產業的共識，HTML5標準得到了Firefox、Chrome和Edge等眾多瀏覽器和平臺的支持和實現。

HTML5的主要優點在于，該技術可以實現多設備以及跨平臺的使用，比如你開發了一款新的HTML5系統，你可以在Unix、Linux和Windows等不同操作系統發布，也可以方便地在Facebook、Apple、Google和微信等的應用平臺上封裝部署，HTML5的跨平臺性十分強大，這也是業界廠商和用戶對HTML5很有興趣的重要原因。HTML5還擁有即時更新功能，更新HTML5系統就好像更新頁面一樣，是馬上的、即時的更新。HTML5適應移動互聯應用“富內容、富交互、富體驗、跨平臺”的要求，支持離線訪問、支持全媒體內容展示、支持交互式的 2D/3D 圖像渲染、提供了一套機制允許 Web 頁面根據一些設備特性（包括屏幕分辨率）適配布局和行為 [1] 。HTML5還有一些其他新特性，如：video和audio元素用于音視頻媒介的回放，canvas元素用于容器繪畫，對離線應用和本地存儲數據提供了更好的支持，還有nav、article、header等新的特殊內容標簽，以及search、date、calendar等新的表單和控件。

本文以HTML5技術標準為基礎，對圖書館數字資源系統進行設計與研究。通過HTML5、CSS3、JavaScript和Bootstrap等技術相結合，設計跨平臺響應式的網站系統。同時采用.NET技術進行后臺應用邏輯開發，以SQL Server為后端數據庫。運用HTML5的新標簽和CSS3的各種新屬性，以及JavaScript的各種腳本特效，結合Bootstrap進行響應式開發，這是一種全新的設計理念，據此設計出適應手機、平板和計算機等不同訪問設備的網站，增強我校師生對圖書館數字資源的訪問體驗。

2 系統的設計與實現

2.1 開發工具的選擇

鑒于.NET框架的技術優勢，本資源系統基于Windows Server平臺構建，采用C#作為應用層開發語言，基于.NET Framework 4.5運行時，選取SQL Server 2008 R2作為后端數據庫平臺，XML或JSON作為客戶端和服務器間的信息交換語言，同時作為數據資源的表示格式，HTTP作為傳輸協議，同時前端UI基于HTML5和Bootstrap，構建基于.NET和HTML5的新型圖書館數字資源系統。所構建系統能更好地滿足圖書館數字資源系統的應用需求，具有自動響應手機、平板和計算機等不同屏幕尺寸設備，系統性能響應速度快，良好的信息交換及擴展性等優點，并且可以跨平臺訪問。一次開發在不同操作系統上就可以擁有統一的用戶交互體驗，節約了開發和維護成本 [2，4] 。endprint

2.2 系統的設計實現

數據庫的設計是本資源系統中最基礎的部分，通過運用ORM （對象角色建模）方法設計數據庫，同時創建實體關系圖，具體可以使用Visio工具來實現，通過該方法建立數據庫，容易創建或修改業務規則，并且可以輕松對數據庫進行反向工程。

數據庫系統由管理員表manager、newsManager，內容表news，圖像表image和鏈接表link等組成。其中news表包含數據資源系統的主要內容數據，字段設計如圖1所示：

資源系統的核心部分是系統業務層設計，通過剝離表示層與業務層，實現了系統的擴展性和靈活性，設計離線、分布式和靈活的基于XML和JSON的數據體系結構，基于.NET實現了業務層的操作功能調用。

系統表示層的設計基于HTML5、CSS3、Javascript和Bootstrap技術，Bootstrap框架整合有一套基礎CSS插件、基于jQuery的Javascript插件集、靈活的響應式柵格系統，崇尚移動優先的思想[3]，構建響應式圖書館數字資源系統，只需一次的設計開發，系統就能自動適應手機、平板和桌面計算機等不同設備的正常訪問，在Firefox、Chrome、Safari和Edge中具有良好的顯示，更好地滿足新環境下圖書館數字資源隨時隨地跨平臺多設備的訪問需求。得益于這些技術的綜合應用，不但提高了系統設計的效率，也提高了資源系統的運行效率，同時降低了后期系統的維護難度。

系統表示層HTML的主要結構代碼如下所示。

其中<！DOCTYPE html>聲明HTML5文檔類型，viewport設置可視窗口隨不同屏幕尺寸的設備自動響應式顯示。bootstrap.min.css導入Bootstrap的樣式表定義，bootstrap.min.js導入Bootstrap的支持腳本，jquery.min.js導入JQuery框架支持。

2.3 系統的部署運行

系統部署在Windows Server 2008 R2的IIS服務的發布目錄下，基于.NET Framework 4.5，jQuey3.1.1，Bootstrap3.3.7，以及SQL Server 2008 R2。

本文構建的高校圖書館數字資源系統（可拓學專題數據庫），實現了跨平臺，多設備，響應性，更好地滿足用戶的訪問體驗，同時適應手機、平板和計算機等不同尺寸屏幕設備的友好訪問。

系統部署運行后計算機和平板訪問界面如圖2所示：

系統部署運行后手機訪問界面如圖3所示（其中右圖為點擊菜單響應）：

3 結論

HTML5是新一代的互聯網平臺，擁有跨平臺，多設備，自適應網頁設計，即時更新等優點，結合最新.NET的互聯網軟件和服務戰略，囊括了一整套新的工具與技術，HTML5改變了應用程序設計和部署的模式，引入了新的屬性標簽和新的功能，改變用戶與文檔的交互方式，支持離線編輯，支持網頁端的Audio、Video等多媒體功能。

HTML5擁有廣泛的適用性，如發布網絡圖像、動畫視頻、表單控件以及其他網格排版等數字內容，所發布應用程序具有優越的跨平臺性，HTML5既是一個完整的Web開發環境，又是一個Web開放標準不斷蓬勃發展的基石。本文基于.NET、HTML5和Bootstrap等技術，研究構建了一個新型圖書館數字資源系統平臺，并且基于該平臺實現了可拓學專題數據庫的建設。通過數字資源系統的構建過程，對適應手機、平板和桌面計算機等不同訪問設備的系統開發技術進行了一定的探討。事實證明，HTML5和.NET技術給新一代的動態響應式系統開發提供了嶄新的解決方案。

參考文獻：

[1] 黃悅深. 基于HTML5的移動Web App開發[J]. 圖書館雜志，2014（7）：72-77.

[2] 舒遠仲，黃文強，梅夢喆. 基于HTML5跨平臺高校就業信息服務系統的設計與實現[J]. 計算機時代，2016 （3）：93-96.

[3] 舒后，熊一帆，葛雪嬌. 基于Bootstrap框架的響應式網頁設計與實現[J]. 北京印刷學院學報，2016 （2）：47-52

[4] 李華.ASP.NET （C#） 程序設計[M].北京：清華大學出版社，2014.endprint