基于HTML5技術的網頁廣告動態交互系統設計

摘? 要： 針對目前網頁廣告交互性的問題，提出基于HTML5技術的網頁廣告動態交互系統設計。首先，對HTML技術的特點進行分析，并且分析網頁廣告動態系統的設計原則。將其作為基礎設計網頁廣告動態交互系統，分析系統設計的流程，充分考慮用戶的感受設計典型頁面，創建元服務中心模型，給出元服務中心模型數據庫的創建流程和關鍵代碼，從而創建數據庫的鏈接，定義記錄集，實現網頁廣告動態交互系統。通過該系統設計，網站能夠和訪問者進行交互，網站頁面也從靜態頁面轉變成為靜態和動態頁面結合的方式。

關鍵詞： 網頁廣告; 動態交互系統; HTML5技術; 系統設計; 網頁搜索; 數據庫鏈接

中圖分類號： TN02?34? ? ? ? ? ? ? ? ? ? ? ? ? 文獻標識碼： A? ? ? ? ? ? ? ? ? ? ? ? ? ?文章編號： 1004?373X（2020）21?0076?04

Design of Web advertising dynamic interaction system based on HTML5 technology

CHEN Ronghua

（The Tourism College of Changchun University， Changchun 130000， China）

Abstract： In view of the problem of interactivity of Web advertisement， the design of Web advertising dynamic interaction system based on HTML5 technology is proposed in this paper. The characteristics of HTML technology and design principles of the Web advertising dynamic system are analyzed in this paper. On the basis of the analysis results， the Web advertising dynamic interaction system is designed. The system design process is analyzed. In the design， the users′ feelings are fully considered to design a typical page， and create a service center model. The creation process and key code of meta?service center model database are given. A database link is created and the record set is defined for achievement of the Web advertising dynamic interaction system. With the system designed in this paper， the website can interact with visitors， and the website page has changed from static page to another mode of combining the static page with dynamic page.

Keywords： Web advertising; dynamic interactive system; HTML5 technology; system design; Web search; database link

0? 引? 言

HTML（超文本標記語言）是通過中文翻譯為超文本標記語言，HTML5為Web頁面優化技術，是目前移動科學技術發展中探究的技術，該技術的使用和媒體傳輸技術的整合，能夠保證技術傳輸的整合綜合性控制技術的使用，并且還能夠以媒體傳輸技術使用需求，及時調整技術應用方式與對策。本文通過研究基于HTML5技術的網頁廣告動態交互系統，根據現有技術應用的需求分析技術應用的方式[1]，與新媒體技術傳輸與發展相互結合，實現未來技術應用發展的展望，以此有效整合HTML5技術和移動端廣告設計工作。

1? HTML5技術的特點

HTML5技術為創建網頁方式，也是網頁接收端與開發端標記標題、圖片、正文、文本樣式等頁面內容的規范。數字5指的是HTML第5次重大技術修改，HTML5利用編碼技術進行使用，測試頁、游戲、廣告為主要表現方式。HTML5不僅是指此技術所實現的Web廣告，還包括CSS3，Java Script等將HTML5技術作為基礎的社交媒體互動廣告應用集合。HTML5標準改革和發展創新了PC互聯網端格局，對移動互聯網用戶體驗進行優化。將HTML5作為核心的Web頁面的輕便化優勢，能夠實現新內容的反應，開發時間短，并且此標準具有豐富交互、重內容、跨平臺與豐富體驗的要求，支持多媒體元素[2]。

2? 網頁廣告動態系統的設計原理

不同交互式動態網頁的內容各不相同，包括食物、衣服飾品、教育等，但是交互式動態網頁具有相同設計原理。交互式動態頁面為：

訪問者提交信息：此頁面能夠為訪問者提供幫助按鈕，在訪問者有相關需求時，利用輸入的查詢內容點擊提交按鈕，對網站內部傳遞信息，網站內部搜索原本信息庫尋找訪問者。

網站處理訪問者需求頁面：在網站內部尋找關于訪問者內容時，能夠為訪問者提供反饋頁面，向訪問者傳遞最終結果[3]。

一般交互式動態網站設計方式為：

1） 手工編碼：此方面指設計人員對HTML代碼編寫，從而設計交互式網頁，但是此種設計方法對設計人員的要求比較高，如果出現編碼錯誤就會使設計出現問題。通過此方式編碼效率比較大，而且后期制作調試復雜，此方法不建議使用。

2） 可視化工具設計：在信息技術不斷發展的過程中也研發了大量可視化網頁編輯工具，在可視化環境中通過此工具能夠制作網頁，和第一種方式對比更加的簡單方便，但是在復雜網頁設計過程中存在約束。

3） 可視化結合手工編碼：此設計方式較為理想，結合以上兩種方法的優勢，簡化交互式動態網頁設計的難度，對頁面內容進行豐富[4]。

3? 網頁廣告動態交互系統的設計

3.1? 系統設計流程

在網頁廣告動態交互系統設計的過程中要將用戶作為中心實現，此模式的主要思想就是將用戶作為設計過程中的核心，使用戶需求得到滿足，在產品后續設計與開發的過程中，要重視基于用戶的深度研究與理解。將用戶作為中心的設計不僅要在產品使用流程與信息架構方面下功夫，還要重視用戶的使用習慣、視覺感受。基于用戶的調研[4]，系統的前端創建流程如圖1所示。

3.2? 典型頁面的設計

充分考慮整體實際需求，此平臺主要頁面包括登錄/注冊頁、主頁、導航頁、搜索頁。各頁面元素構成完整UI時，要求各頁面邏輯清晰，避免和常規使用有過多出入，還能夠降低用戶操作錯誤，邏輯清楚。

在新用戶注冊時要提供用戶ID、電子信箱、用戶昵稱和密碼，用戶具有唯一的ID與昵稱，在輸入昵稱與ID以后能夠檢測是否可用。

用戶登錄頁面要求提供自動登錄和記住密碼供用戶選擇[5]。

主頁面信息中通過縮略圖展示個人信息，針對新推送的信息不能夠在客戶端中直接展示，會使用戶流量開銷增加，只需要推送通知，用戶在需要時往下劃動就能夠看到全新的信息，頁面的邏輯結構如圖2所示。

3.3? 元服務中心模型

元服務中心指的是廣義服務中心列表基本原子結構單元，集成部分服務資源與信息，能夠執行在能力屬性集范圍中的服務。支持動態交互可重構服務系統研究要能夠滿足客戶需求設計元服務中心模型MSC，在提供服務時有多種預先未知變化，元服務中心模型要使客戶多元化需求得到滿足。有兩種基本開發總體框架方法對不同服務進行處理，分別為基于概括與整合重組小模型。基于概括的方法為提供給支持廣泛發生抽象化的MSC結構模型，此模型能夠提供給有用功能場景專門化支持。除了概括功能與方法，一個MSC模型還要支持重構，比如多個單獨過程行為創建復雜MSC模型，也就是存儲相應可重用過程的行為組件模塊。重組與概括在解決問題的基礎上，能夠使客戶多元化需求得到滿足[6]。

所以，本節對以上服務需求和知識元服務中心模型進行設計，元服務中心包括目標本體論、領域本體論與過程行為組件問題，元服務中心模型如圖3所示。

操作步驟如下：

1） 創建數據庫源名。在系統控制面板中對ODBC圖標，選擇文件DSN屬性和添加，之后出現對話框對驅動程序選擇，之后輸入數據源文件名;

2） 數據庫鏈接的創建。通過Open函數實現數據庫鏈接，語法為：

SetConnect=ServeCreateObject（ADODB.Connection）

Connect.Open （DSN=dsnname;UID=user ID;PWD=password）

其中，數據源名為dsnname;用戶名為user ID;用戶口令為password。

3） 數據對象的創建。RecordSet為ADO中最復雜的對象，具有多種方法與屬性，但是如果能夠使用得當，具有良好的效果[6]，方法為：

Set RecordSet=connect.Execute（sqt Str）

4） 數據庫操作。利用Execute能夠便于實現數據插入、修改和刪除，比如：

sqlSr=InsertIntoblValues（1，2） Connect.Execute（sql Srt）

5） 數據對象與鏈接的關閉。

Objectrecords=new Object[row+ 2][line]：

rs.before First（）

for（int i=0：

records[0][i]=rm.get Column Name（i+1）

records[0][row+1]=rm.get Column Tpe（i+1）;}

int i = 1：

while （rs.next（））

for （int j =0：j

if （rs.get String（j+1）== null）

records[i][j]：null：

else

records[i][j]=rs.get String（j+1）.trim0;

}

i++：

return records：

返回二維數組，通過字符串方式存儲JDBC查詢結果，在后續處理過程中，不管是輸出或者其他方式處理，都能夠直接操作網頁[7]。

3.4? 動態交互結構

動態交互結構的核心為服務中心，服務中心是系統執行指定任務代理機構，重要性表現為系統利用服務中心對關鍵時刻服務活動進行控制，如果在資源稀缺的時候就要停止執行任務，此為自適應的重點[8]。動態交互服務中心基本模型如圖4所示。

服務中心的運行目標就是追求成功關鍵因素（CSFs），此是作為標準對象所創建。CSFs定義服務的服務水平，比如90%服務要使性能的非功能性需求得到滿足。服務中心篩選程序對任務篩選，決定是否能夠在層級中實現信息傳遞，創建服務任務能夠達到最新關鍵成功因素[9]。篩選程序對自適應機制支持，比如系統無法提供高性能非功能性要求服務，分塊訪問服務能夠保證可用資源。利用封裝中心使短時間與長時間記憶進行存儲，并且存儲現有歷史事件，此事件表示服務中心完成任務失敗、成功的經歷，為系統自適應提供基礎[10]。

另外，還要創建系統層次。層次指的是自適應動態分布式結構基礎概念，原則為分離智能化層次，實現系統數據分類。自適應動態分布式結構能夠以VSM理論創建五級模型，ADDA層級與VSM子系統的關聯如圖5所示。

運行層：此層能夠對滿足系統操作功能的簡單線性數據進行處理，操作數據庫不連接不同區域數據庫。

監控控制層：此層對多維度數據進行處理，能夠實現行為走勢的分析。在此層中，利用外部趨勢對業務操作進行監控，對各集合層次歷史數據進行分析實現相應的請求，比如時間、類型和位置數據等[11]。

監控操作層：此層數據存在集成與維護，比如根據組別與時間組織數據。此層對操作情況進行監控，服務中心利用過濾請求快速反應失敗操作。

命令層：此層為最高層級，還能夠對低級層次無法處理的變化進行處理，以此表示能夠對新機會、威脅進行識別。

控制層：此層針對簡單應急行為與趨勢能夠實現學習記憶，并且自動運行、預測與仿真。雖然監控控制層能夠對趨勢預測，但還要利用控制層進行模擬[12]。

3.5? 網頁的搜索和匹配

搜索功能是將給定的基本搜索條件作為基礎，使用戶能夠快速且方便地查找搜索事件，并且為用戶以打分的方式推薦內容，此功能能夠在緊急情況下解決交互問題，使用戶的需求得到滿足[13]，搜索與匹配功能的流程如圖6所示。

搜索和匹配功能中的信息利用用戶自己對系統表單中的選項選擇，地理位置部分使用gelolcation API得到設備經緯度坐標，之后調用百度地圖地理位置反編碼的方法，使經緯度坐標朝著實際信息轉變，之后在頁面中展現。

3.6? 創建數據庫鏈接

數據庫鏈接指的是設置數據庫參數，否則，Web應用程序無法知道數據庫如何連接數據庫。在用戶利用瀏覽器對服務器發送請求時，以數據庫鏈接，交互式動態網頁指示應用程序服務器，將數據庫中數據進行提取，在網頁HTML中插入。鏈接的創建方法為：

1） 通過Dreamweaver MX 2004應用程序面板，單擊數據庫標簽，通過所彈出的鏈接方式菜單對數據源名稱進行選擇;

2） 將鏈接名稱輸入到“鏈接名稱”文本框中，比如pthcxconnect，利用數據源名稱下拉列表框對事先設置的數據源進行選擇;

3） 單擊測試按鈕，實現是否和數據庫創建鏈接進行檢查[14]。

3.7? 定義記錄集

動態網站利用數據庫臨時讀取數據，因此就要創建對檢索數據進行存儲的記錄集。記錄集通過數據庫查詢數據的構成，在應用程序服務器內存中臨時存儲，方便對數據快速檢索。在服務器不記錄時，就會出現丟失的情況。

Dreamweaver MX 2004中的全部定義記錄集都能夠在“服務器行為”“綁定”面板列表中添加，利用此面板將動態內容添加到靜態頁面中。本文使用Dreamweaver MX 2004中的SQL創建器對記錄集定義方法進行討論。利用SQL創建器實現復雜SQL查詢的創建，SQL為結構化查詢語言，能夠在數據庫中實現數據的添加、檢索與刪除。

1） 在Dreamweaver MX 2004應用程序面板中單擊綁定、記錄集選項，并且彈出記錄集對話框，點擊高級按鈕。

2） 將需要創建的記錄集名稱輸入到名稱文本框中，在選擇下拉列表中對已經創建的SQL文本域進行選擇，并且輸入SELECT語句。SELECT語句能夠將信息結果顯示頁面中的字段列表展現出來;FROM語句后面所列出的需要查詢數據庫列表也能夠展現。

3） 在變量窗口名稱標簽中將SQL查詢條件參數名輸入[15]。網頁注冊的運行流程如圖7所示。

4? 結? 語

本文提出了基于HTML5技術的網頁廣告動態交互系統，使用戶能夠根據自身的實際情況推薦廣告。在用戶數量達到一定規模時，會有大量資料進行匹配，并且還能夠實現在多終端、多系統中運行平臺的目的。

參考文獻

[1] 劉丹，王羽徵，畢海，等.一種智能化人體健康信息監測與交互系統設計[J].信息技術與網絡安全，2019，38（11）：18?22.

[2] 喬照陽.基于網頁交互的廣播電視監播單位信息管理系統設計[J].廣播與電視技術，2019，46（7）：120?123.

[3] 郜東瑞，汪潤桂，應少飛，等.基于眼動信號的便攜式無線智能交互系統設計[J].中國生物醫學工程學報，2019，38（5）：573?580.

[4] 徐媛，崔學鵬.基于VR技術的網絡綜合布線虛擬實訓平臺的設計研究[J].電腦知識與技術，2019，15（18）：75?76.

[5] 李時穎.Web前端設計案例—歡迎頁面的實現過程與方法探討[J].電腦編程技巧與維護，2019（10）：17?20.

[6] 程茂上，項前，余玉風，等.基于微服務的電子標簽揀選系統設計與實現[J].制造業自動化，2019，41（12）：90?94.

[7] 趙建敏，李琦，陳波.物聯網綜合實驗系統設計[J].實驗室研究與探索，2018，37（12）：147?150.

[8] 錢鑫博.基于HTML5的交互Web3D的實現[J].計算機與網絡，2020，46（1）：60?63.

[9] 王開宇，張晶，巢明，等.基于HTML5的物聯網實驗室動畫網頁設計[J].實驗室科學，2019，22（2）：56?59.

[10] 張靜，徐亮，劉理想，等.基于分布式事件觸發的交互系統研究[J].測控技術，2019，38（7）：29?32.

[11] 于燁，劉國洋，劉思堯.基于虛擬磁盤技術的海量數據專用存儲系統設計[J].自動化技術與應用，2019，38（3）：55?60.

[12] 魯志芳.基于Hadoop技術的大數據分析應用系統的研究與設計[J].電子設計工程，2019，27（16）：11?14.

[13] 陳博，葛偉青，姜濤.基于FPGA和ARM架構的嵌入式DTS系統設計方案[J].國外電子測量技術，2018，37（7）：94?97.

[14] 高靜.基于有線無線互聯技術的數字化校園建設系統設計[J].現代電子技術，2019，42（17）：80?83.

[15] 袁小軍，張李超，張楠.基于FPGA的以太網激光振鏡控制器設計與實現[J].現代電子技術，2019，42（16）：159?163.

作者簡介：陳榮華（1982—），女，吉林長春人，碩士，講師，主要研究方向為藝術設計。