CN107643911A - 基于html5的界面交互及展示系统、方法 - Google Patents
基于html5的界面交互及展示系统、方法 Download PDFInfo
- Publication number
- CN107643911A CN107643911A CN201710719256.1A CN201710719256A CN107643911A CN 107643911 A CN107643911 A CN 107643911A CN 201710719256 A CN201710719256 A CN 201710719256A CN 107643911 A CN107643911 A CN 107643911A
- Authority
- CN
- China
- Prior art keywords
- module
- page
- user
- data processing
- html5
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 14
- 238000012545 processing Methods 0.000 claims abstract description 38
- 230000002452 interceptive effect Effects 0.000 claims abstract description 11
- 238000004321 preservation Methods 0.000 claims abstract description 4
- 230000003993 interaction Effects 0.000 claims description 15
- 238000009877 rendering Methods 0.000 claims description 11
- 230000001747 exhibiting effect Effects 0.000 claims description 8
- 238000000605 extraction Methods 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 6
- 239000000284 extract Substances 0.000 claims description 5
- 230000000007 visual effect Effects 0.000 claims description 3
- 230000001427 coherent effect Effects 0.000 claims description 2
- 230000009471 action Effects 0.000 abstract description 6
- 238000005516 engineering process Methods 0.000 description 6
- 238000011161 development Methods 0.000 description 2
- 235000007926 Craterellus fallax Nutrition 0.000 description 1
- 240000007175 Datura inoxia Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000003032 molecular docking Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明提供了一种基于HTML5的界面交互及展示系统、方法，该系统包括控件初始化模块等，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端。本发明摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。
Description
技术领域
本发明涉及一种界面交互及展示系统、方法，具体地，涉及一种基于HTML5的界面交互及展示系统、方法。
背景技术
随着互联网的飞速发展，浏览器不再仅仅用来表示Web内容，随着HTML5的技术问世，Web进入了一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及交互都被标准化。HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，HTML5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。对于用户来说，提高了用户体验，加强了视觉感受，HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。如今已进入后Web2.0时代，人机交互已经成为常态，不能满足于网页上简单的图片和文字展示，用户更希望能有更加丰富的界面交互方式。因此，为了迎合互联网技术的发展，本发明研发一种基于HTML5的界面交互技术及展示方法，由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。
发明内容
针对现有技术中的缺陷，本发明的目的是提供一种基于HTML5的界面交互及展示系统、方法，其由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。
根据本发明的一个方面，提供一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。
优选地，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。
优选地，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。
优选地，所述数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中。
本发明还提供一种基于HTML5的界面交互及展示方法，其特征在于，包括以下步骤：
步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；
步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；
步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；
步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；
步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。
优选地，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。
与现有技术相比，本发明具有如下的有益效果：由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
图1为本发明基于HTML5的界面交互及展示系统的原理框图。
具体实施方式
下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进。这些都属于本发明的保护范围。
如图1所示，本发明基于HTML5的界面交互及展示系统包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API(Application Programming Interface，应用程序编程接口)接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式(例如：左右或者上下，翻页或者渐隐)，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件(Event)，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。
二维页面可以在一个HTML5内容中做到上下与左右滑动自由切换，用户可以随意的定义交互方式，摆脱单一的模式，这样使用方便。
所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为(左右或者上下滑动)，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块，这样及时反馈。
所述数据处理模块接收到交互事件相关信息之后，会判断交互事件的方向，分为四种情况：
一，如果交互是向上滑动(即浏览下面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在左下角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作。
二，如果交互是向下滑动(即浏览上面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左下角div中，并且将展示页面的下一页元素填充在左上角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作。
三，如果交互是向左滑动(即浏览右面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在右上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作。
四，如果交互是向右滑动(即浏览左面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的右上角div中，并且将展示页面的下一页元素填充在左上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作。
数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中，避免重复读取数据库造成资源浪费。
所述渲染模块会根据定义将重新填充元素的div进行渲染，满足用户的需求，并且通过展示模块将用户需要的页面呈现出来。
本发明基于HTML5的界面交互及展示方法包括以下步骤：
步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；
步骤二：事件接收模块一直在监听用户行为，当用户通过设备(电脑或者移动终端)进行操作，事件接收模块接收用户操作事件(上下或者左右滑动)传递给数据处理模块；
步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；具体来说，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据；
步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；
步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。
本发明可为日益丰富的HTML5内容提供丰富的、互动性强的界面交互及展示，使得HTML5内容的视觉呈现更为丰富和精美，增强HTML5内容的表现能力，从而增强其用户粘性。
以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变形或修改，这并不影响本发明的实质内容。
Claims (6)
1.一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。
2.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。
3.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。
4.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中。
5.一种基于HTML5的界面交互及展示方法，其特征在于，包括以下步骤：
步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；
步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；
步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；
步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；
步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。
6.根据权利要求5所述的基于HTML5的界面交互及展示方法，其特征在于，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710719256.1A CN107643911B (zh) | 2017-08-21 | 2017-08-21 | 基于html5的界面交互及展示系统、方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710719256.1A CN107643911B (zh) | 2017-08-21 | 2017-08-21 | 基于html5的界面交互及展示系统、方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107643911A true CN107643911A (zh) | 2018-01-30 |
| CN107643911B CN107643911B (zh) | 2021-02-02 |
Family
ID=61110394
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710719256.1A Expired - Fee Related CN107643911B (zh) | 2017-08-21 | 2017-08-21 | 基于html5的界面交互及展示系统、方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107643911B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112100555A (zh) * | 2020-08-18 | 2020-12-18 | 北京思特奇信息技术股份有限公司 | 一种在原生html5页面中实现单页应用的方法及系统 |
| CN112269517A (zh) * | 2020-11-16 | 2021-01-26 | 北京百度网讯科技有限公司 | 交互界面的生成方法和装置 |
| CN113625909A (zh) * | 2021-07-30 | 2021-11-09 | 北京达佳互联信息技术有限公司 | 应用程序页面展示方法、装置、电子设备及存储介质 |
| CN114936069A (zh) * | 2022-05-30 | 2022-08-23 | 易协云(杭州)科技有限公司 | 一种利用脑图进行项目展示的方法及系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216699A (zh) * | 2013-08-07 | 2014-12-17 | 侯金涛 | 一种基于html5的图标结构、展示方法及系统 |
| CN104268739A (zh) * | 2014-08-29 | 2015-01-07 | 蓝信工场（北京）科技有限公司 | 一种将企业信息系统快速转化为移动应用的方法和系统 |
| CN105468377A (zh) * | 2015-12-10 | 2016-04-06 | 北京中科汇联科技股份有限公司 | 一种移动端页面生成方法及系统 |
| CN106484394A (zh) * | 2016-09-13 | 2017-03-08 | 厦门兆慧网络科技有限公司 | 一种双引擎快速软件开发系统 |
-
2017
- 2017-08-21 CN CN201710719256.1A patent/CN107643911B/zh not_active Expired - Fee Related
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216699A (zh) * | 2013-08-07 | 2014-12-17 | 侯金涛 | 一种基于html5的图标结构、展示方法及系统 |
| CN104268739A (zh) * | 2014-08-29 | 2015-01-07 | 蓝信工场（北京）科技有限公司 | 一种将企业信息系统快速转化为移动应用的方法和系统 |
| CN105468377A (zh) * | 2015-12-10 | 2016-04-06 | 北京中科汇联科技股份有限公司 | 一种移动端页面生成方法及系统 |
| CN106484394A (zh) * | 2016-09-13 | 2017-03-08 | 厦门兆慧网络科技有限公司 | 一种双引擎快速软件开发系统 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112100555A (zh) * | 2020-08-18 | 2020-12-18 | 北京思特奇信息技术股份有限公司 | 一种在原生html5页面中实现单页应用的方法及系统 |
| CN112269517A (zh) * | 2020-11-16 | 2021-01-26 | 北京百度网讯科技有限公司 | 交互界面的生成方法和装置 |
| CN113625909A (zh) * | 2021-07-30 | 2021-11-09 | 北京达佳互联信息技术有限公司 | 应用程序页面展示方法、装置、电子设备及存储介质 |
| CN114936069A (zh) * | 2022-05-30 | 2022-08-23 | 易协云(杭州)科技有限公司 | 一种利用脑图进行项目展示的方法及系统 |
| CN114936069B (zh) * | 2022-05-30 | 2024-03-22 | 易协云(杭州)科技有限公司 | 一种利用脑图进行项目展示的方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107643911B (zh) | 2021-02-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10007933B2 (en) | Systems and methods for integrating dynamic content into electronic media | |
| CN107643911A (zh) | 基于html5的界面交互及展示系统、方法 | |
| CN104035753A (zh) | 一种双WebView展示定制页面的方法及系统 | |
| US10296562B2 (en) | Dynamic generation of mobile web experience | |
| CN104133884B (zh) | 显示网页的方法及装置 | |
| CN104820668B (zh) | 对数据进行压缩序列化以从客户端应用进行传输 | |
| KR20140012664A (ko) | 웹페이지 재배치 방법 | |
| US9830304B1 (en) | Systems and methods for integrating dynamic content into electronic media | |
| CN110309451A (zh) | 一种web预加载页面的生成方法及装置 | |
| US20140149847A1 (en) | Method and apparatus for processing fixed layout files | |
| CN104765746B (zh) | 用于移动通讯终端浏览器的数据处理方法和装置 | |
| CN102662666B (zh) | 一种界面菜单的创建方法及装置 | |
| CN105955714A (zh) | 混合开发前端mvc框架实现方法和系统 | |
| CN105573694B (zh) | 数字内容的多个显示渲染 | |
| CN101477564B (zh) | 一种在窄屏幕设备上显示宽网页的智能布局方法 | |
| CN107479873A (zh) | 一种app页面模块化开发方法、电子设备及存储介质 | |
| CN106326403A (zh) | 网页生成方法及装置 | |
| CN107864384A (zh) | 重定向云桌面上互联网视频播放的方法及装置 | |
| CN117093386B (zh) | 页面截图方法、装置、计算机设备和存储介质 | |
| CN107958076A (zh) | 一种加载内嵌网页的方法、装置、存储介质及电子设备 | |
| CN106951429B (zh) | 增强网页评论显示的方法、浏览器及设备 | |
| CN106021279B (zh) | 信息显示方法和装置 | |
| Cecco | Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More | |
| US11023089B2 (en) | View port resolution independent network pages | |
| CN108647066B (zh) | 在浏览器中弹出html页面遮盖citymaker三维引擎的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20210202 |