基于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：<line：i++）{
　　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<line;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—），女，吉林长春人，硕士，讲师，主要研究方向为艺术设计。
转载注明来源:https://www.xzbu.com/8/view-15363908.htm