龍德應(yīng)+唐嫦燕

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

關(guān)鍵詞：HTML5；CSS3；.Bootstrap；.NET；響應(yīng)式Web設(shè)計(jì)

中圖分類號：G250.7 文獻(xiàn)標(biāo)識碼：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；經(jīng)過歷時(shí)8年的精心研究和討論，2014年10月，W3C（World Wide Web Consortium）最終正式推出了HTML5標(biāo)準(zhǔn)規(guī)范。

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

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

本文以HTML5技術(shù)標(biāo)準(zhǔn)為基礎(chǔ)，對圖書館數(shù)字資源系統(tǒng)進(jìn)行設(shè)計(jì)與研究。通過HTML5、CSS3、JavaScript和Bootstrap等技術(shù)相結(jié)合，設(shè)計(jì)跨平臺響應(yīng)式的網(wǎng)站系統(tǒng)。同時(shí)采用.NET技術(shù)進(jìn)行后臺應(yīng)用邏輯開發(fā)，以SQL Server為后端數(shù)據(jù)庫。運(yùn)用HTML5的新標(biāo)簽和CSS3的各種新屬性，以及JavaScript的各種腳本特效，結(jié)合Bootstrap進(jìn)行響應(yīng)式開發(fā)，這是一種全新的設(shè)計(jì)理念，據(jù)此設(shè)計(jì)出適應(yīng)手機(jī)、平板和計(jì)算機(jī)等不同訪問設(shè)備的網(wǎng)站，增強(qiáng)我校師生對圖書館數(shù)字資源的訪問體驗(yàn)。

2 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1 開發(fā)工具的選擇

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

2.2 系統(tǒng)的設(shè)計(jì)實(shí)現(xiàn)

數(shù)據(jù)庫的設(shè)計(jì)是本資源系統(tǒng)中最基礎(chǔ)的部分，通過運(yùn)用ORM （對象角色建模）方法設(shè)計(jì)數(shù)據(jù)庫，同時(shí)創(chuàng)建實(shí)體關(guān)系圖，具體可以使用Visio工具來實(shí)現(xiàn)，通過該方法建立數(shù)據(jù)庫，容易創(chuàng)建或修改業(yè)務(wù)規(guī)則，并且可以輕松對數(shù)據(jù)庫進(jìn)行反向工程。

數(shù)據(jù)庫系統(tǒng)由管理員表manager、newsManager，內(nèi)容表news，圖像表image和鏈接表link等組成。其中news表包含數(shù)據(jù)資源系統(tǒng)的主要內(nèi)容數(shù)據(jù)，字段設(shè)計(jì)如圖1所示：

資源系統(tǒng)的核心部分是系統(tǒng)業(yè)務(wù)層設(shè)計(jì)，通過剝離表示層與業(yè)務(wù)層，實(shí)現(xiàn)了系統(tǒng)的擴(kuò)展性和靈活性，設(shè)計(jì)離線、分布式和靈活的基于XML和JSON的數(shù)據(jù)體系結(jié)構(gòu)，基于.NET實(shí)現(xiàn)了業(yè)務(wù)層的操作功能調(diào)用。

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

系統(tǒng)表示層HTML的主要結(jié)構(gòu)代碼如下所示。

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

2.3 系統(tǒng)的部署運(yùn)行

系統(tǒng)部署在Windows Server 2008 R2的IIS服務(wù)的發(fā)布目錄下，基于.NET Framework 4.5，jQuey3.1.1，Bootstrap3.3.7，以及SQL Server 2008 R2。

本文構(gòu)建的高校圖書館數(shù)字資源系統(tǒng)（可拓學(xué)專題數(shù)據(jù)庫），實(shí)現(xiàn)了跨平臺，多設(shè)備，響應(yīng)性，更好地滿足用戶的訪問體驗(yàn)，同時(shí)適應(yīng)手機(jī)、平板和計(jì)算機(jī)等不同尺寸屏幕設(shè)備的友好訪問。

系統(tǒng)部署運(yùn)行后計(jì)算機(jī)和平板訪問界面如圖2所示：

系統(tǒng)部署運(yùn)行后手機(jī)訪問界面如圖3所示（其中右圖為點(diǎn)擊菜單響應(yīng)）：

3 結(jié)論

HTML5是新一代的互聯(lián)網(wǎng)平臺，擁有跨平臺，多設(shè)備，自適應(yīng)網(wǎng)頁設(shè)計(jì)，即時(shí)更新等優(yōu)點(diǎn)，結(jié)合最新.NET的互聯(lián)網(wǎng)軟件和服務(wù)戰(zhàn)略，囊括了一整套新的工具與技術(shù)，HTML5改變了應(yīng)用程序設(shè)計(jì)和部署的模式，引入了新的屬性標(biāo)簽和新的功能，改變用戶與文檔的交互方式，支持離線編輯，支持網(wǎng)頁端的Audio、Video等多媒體功能。

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

參考文獻(xiàn)：

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

[2] 舒遠(yuǎn)仲，黃文強(qiáng)，梅夢喆. 基于HTML5跨平臺高校就業(yè)信息服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)時(shí)代，2016 （3）：93-96.

[3] 舒后，熊一帆，葛雪嬌. 基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)[J]. 北京印刷學(xué)院學(xué)報(bào)，2016 （2）：47-52

[4] 李華.ASP.NET （C#） 程序設(shè)計(jì)[M].北京：清華大學(xué)出版社，2014.endprint