CN116009859A - 一种保证网站系统样式统一的方法与工具 - Google Patents

一种保证网站系统样式统一的方法与工具 Download PDF

Info

Publication number
CN116009859A
CN116009859A CN202211649625.1A CN202211649625A CN116009859A CN 116009859 A CN116009859 A CN 116009859A CN 202211649625 A CN202211649625 A CN 202211649625A CN 116009859 A CN116009859 A CN 116009859A
Authority
CN
China
Prior art keywords
layout
component
style
page
label
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.)
Pending
Application number
CN202211649625.1A
Other languages
English (en)
Inventor
张佳佳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Telecom Digital Intelligence Technology Co Ltd
Original Assignee
China Telecom Digital Intelligence Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Telecom Digital Intelligence Technology Co Ltd filed Critical China Telecom Digital Intelligence Technology Co Ltd
Priority to CN202211649625.1A priority Critical patent/CN116009859A/zh
Publication of CN116009859A publication Critical patent/CN116009859A/zh
Priority to PCT/CN2023/134292 priority patent/WO2024131444A1/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明公开了一种保证网站系统样式统一的方法与工具，方法包括获取待检查页面的源数据；对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；当检查出布局不一致时，产生布局标签提示信息；检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式，并作出映射对比；当检查出组件样式不一致时，产生组件标签提示信息并执行下一步骤；生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；根据唯一编码标识生成规范样式及代码用以参考对页面进行实际调整。可以达到统一页面风格样式，从而改善用户体验提供了条件，减少了页面后期的维护成本，解决网站开发完成后样式不统一的问题。

Description

一种保证网站系统样式统一的方法与工具
技术领域
本发明属于计算机和互联网技术领域，具体涉及一种保证网站系统样式统一的方法与工具。
背景技术
近些年来，移动互联网和“互联网+”的实施，使互联网出现了爆炸性的发展，催生了大量的新生应用以及业务系统。
用户界面是系统和用户之间进行交互和信息交换的直接媒介，是重要的最直观的展现，实现企业、应用、系统、信息的内部形式与人类可以接受形式之间的转换。通常情况下需要团队开发，从设计人员到前端人员，由于系统建设速度过快及团队开发人员多沟通产生差异，会影响页面整体效果，导致了网站系统样式缺乏统一性，这样会直接影响到用户体验，甚至会导致软件开发过程的返工。
目前现有的技术多数只能片面解决组件规范问题，不能全局网站高度去调整风格样式的统一。
发明内容
本发明所要解决的技术问题是针对上述现有技术的不足，提供一种保证网站系统样式统一的方法与工具，可以达到统一页面风格样式，从而改善用户体验提供了条件，减少了页面后期的维护成本，解决网站开发完成后样式不统一的问题。
为实现上述技术目的，本发明采取的技术方案为：
一种保证网站系统样式统一的方法，包括：
S101，获取待检查页面的源数据，作为页面检查基础；
S102，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；
S103，当检查出布局不一致时，产生布局标签提示信息；
S104，检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式，并作出映射对比；
S105，当检查出组件样式不一致时，产生组件标签提示信息并执行下一步骤；
S106，生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；
S107，根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
为优化上述技术方案，采取的具体措施还包括：
上述的源数据包括页面布局，组件代码，文字层级和交互方式信息。
上述的布局规范为预先设置的页面栅格布局样式，包括通栏、1:1比例布局、1:1:1比例布局、1:1:1:1比例布局、1:2:1比例布局、1:3比例布局、1:2比例布局样式。
上述的布局标签采用绿色进行信息提示。
上述的组件标签采用蓝色进行信息提示。
上述的规范组件样式为预先设置的常用组件样式，包括按钮大小颜色、下拉框、选择框、输入框；
规范字体样式包括预先设置的文字标题类别、颜色、字体。
上述的标签包括编码形式的标签名和与该标签名相关联的标签属性，每个组件对应唯一编码作为标识。
实现上述的一种保证网站系统样式统一方法的工具，所述工具包括规范预设模块、数据获取、检测模块、标签生成模块；
其中，规范预设模块，预设布局规范、规范组件样式、规范字体样式；
数据获取，获取待检查页面的源数据，作为页面检查基础；
检测模块，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；当检查出布局不一致时，产生布局标签提示信息；检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式，并作出映射对比；当检查出组件样式不一致时，产生组件标签提示信息并进入标签生成模块；
标签生成模块，生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
本发明具有以下有益效果：
本发明通过页面布局，颜色矫正，样式对比，组件解析，对整个页面的样式检测并贴出标签提示，并进一步生成规范参考样式以达到整个网站页面语言及样式统一。
1.源代码样式解析方案：通过待检测页面源代码，解析出相关属性，包含：(布局属性、字体属性、各类型组件属性)用于之后和规范映射。
2.待检测页面与规范映射方案：通过上一步解析出的属性和规范提供的(同类属性)代码进行映射对比。
3.问题标签生成机制：通过映射对比，生成相关标签，标签附于相应组件上面浮窗中；所述标签所包含的信息包括标签名(唯一编码)和与该标签名相关联的标签属性及建议修改意见。
附图说明
图1为本发明提供的保证网站系统样式统一的方法流程图。
图2为预设的「布局规范」，根据「栅格布局原理」页面分成12份的示意图。
图3通过不同比例布局产生排列组合。
图4为本发明提供的实施例实际效果1展示。
图5为本发明提供的实施例实际效果2展示。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
本发明中的步骤虽然用标号进行了排列，但并不用于限定步骤的先后次序，除非明确说明了步骤的次序或者某步骤的执行需要其他步骤作为基础，否则步骤的相对次序是可以调整的。可以理解，本文中所使用的术语“和/或”涉及且涵盖相关联的所列项目中的一者或一者以上的任何和所有可能的组合。
实施例：
图1展示了根据本发明的实施例保证网站系统样式统一的方法实现流程图，该方法包括：
S101，获取待检查页面的源数据，作为页面检查基础；
包括页面布局，组件代码样式，文字层级，交互方式等样式信息；
S102，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；
通过待检测页面源代码，解析出相关属性，包含：(布局属性、字体属性、各类型组件属性)用于之后和规范映射。布局规范为预先设置页面栅格布局的样式，提前提供多种布局，如图2和3所示，如：通栏、1:1比例布局、1:1:1比例布局、1:1:1:1比例布局、1:2:1比例布局、1:3比例布局、1:2比例布局等。
S103，当检查出布局不一致时，产生绿色布局标签提示信息；
S104，继续检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式包括字体大小及颜色，并作出映射对比；
为了使页面风格统一，可以预先设置常用组件样式，如：按钮大小颜色、下拉框、选择框、输入框等组件大小颜色及状态。
同样预先设置文字标题类别、颜色、字体等。从而用实际页面根据规范页面进行映射对比问题。
需要说明的是同一种组件会在规范中提供多种组合样式和实际页面进行对照。
S105，当检查出组件样式不一致时，产生蓝色组件标签提示信息并执行下一步骤；
S106，生成包含组件唯一编码标识的标签，位置附于相应组件上面浮窗中；
所述标签所包含的信息包括标签名(编码)和与该标签名相关联的标签属性，每个组件对应唯一编码作为标识。
S107，于此同时还可以根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
用B端首页举例说明，如图4和5所示，假设待检查页面中含有各种级别文字及可视图表组件。
若通过代码对页面具体解析后，确定页面中含有3个一级标题“title 1”、6个二级标题“title 2”、4段正文“text”以及6个可视化图表。
其中一级标题样式为：22px、#17233D、加粗；二级标题样式为：18px、#17233D、加粗；正文样式为：14px、#515A6E、常规；可视化图表是一行四个布局，一行两个布局。
通过待检测页面信息和规范对比，一级标题样式和规范不符合；一行两个可视化模块布局和规范不符合。分别用蓝色、绿色标签标注出标签名(编码)和与该标签名相关联的标签属性。
实现所述的一种保证网站系统样式统一方法的工具，所述工具包括规范预设模块、数据获取、检测模块、标签生成模块；
其中，规范预设模块，预设布局规范、规范组件样式、规范字体样式；
数据获取，获取待检查页面的源数据，作为页面检查基础；
检测模块，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；当检查出布局不一致时，产生布局标签提示信息；检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式包括字体大小及颜色，并作出映射对比；当检查出组件样式不一致时，产生组件标签提示信息并进入标签生成模块；
标签生成模块，生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
工具使用步骤如下：
首先，预设一定规范，拿布局举例说明：根据「栅格布局原理」页面分成12份，通过不同比例布局产生排列组合。
其次，获取待检查页面的元数据，其中包括页面布局及组件样式信息；
对待检查页面的布局进行样式解析，并与布局规范进行对比映射检验判断是否一致；
当检查出不一致，产生布局标签提示信息；
之后继续检分析查代码组件样式与规范组件样式是否一致，并作出映射对比；
当检查出不一致，产生相应的组件标签提示信息；生成标签位置附于相应组件上面浮窗中；所述标签所包含的信息包括标签名和与该标签名相关联的标签属性。
于此同时还可以生成规范样式及代码用以参考。
综上所述通过以上步骤及方法可以达到统一页面风格样式，从而改善用户体验提供了条件，减少了页面后期的维护成本。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。

Claims (8)

1.一种保证网站系统样式统一的方法，其特征在于，包括：
S101，获取待检查页面的源数据，作为页面检查基础；
S102，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；
S103，当检查出布局不一致时，产生布局标签提示信息；
S104，检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式，并作出映射对比；
S105，当检查出组件样式不一致时，产生组件标签提示信息并执行下一步骤；
S106，生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；
S107，根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
2.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述源数据包括页面布局，组件代码，文字层级和交互方式信息。
3.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述布局规范为预先设置的页面栅格布局样式，包括通栏、1:1比例布局、1:1:1比例布局、1:1:1:1比例布局、1:2:1比例布局、1:3比例布局、1:2比例布局样式。
4.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述布局标签采用绿色进行信息提示。
5.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述组件标签采用蓝色进行信息提示。
6.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述规范组件样式为预先设置的常用组件样式，包括按钮大小颜色、下拉框、选择框、输入框；
规范字体样式包括预先设置的文字标题类别、颜色、字体。
7.根据权利要求1所述的一种保证网站系统样式统一的方法，其特征在于，所述标签包括编码形式的标签名和与该标签名相关联的标签属性，每个组件对应唯一编码作为标识。
8.实现权利要求1-7任一所述的一种保证网站系统样式统一方法的工具，其特征在于，所述工具包括规范预设模块、数据获取、检测模块、标签生成模块；
其中，规范预设模块，预设布局规范、规范组件样式、规范字体样式；
数据获取，获取待检查页面的源数据，作为页面检查基础；
检测模块，对待检查页面的布局进行样式解析，并与布局规范进行对比映射，检查布局是否一致；当检查出布局不一致时，产生布局标签提示信息；检查组件代码与规范组件样式是否一致，以及文字层级是否正确是否采用对应的规范字体样式，并作出映射对比；当检查出组件样式不一致时，产生组件标签提示信息并进入标签生成模块；
标签生成模块，生成包含组件唯一编码标识的标签并附于相应组件上面浮窗中；根据唯一编码标识生成规范样式及代码用以参考，对页面进行实际调整。
CN202211649625.1A 2022-12-21 2022-12-21 一种保证网站系统样式统一的方法与工具 Pending CN116009859A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202211649625.1A CN116009859A (zh) 2022-12-21 2022-12-21 一种保证网站系统样式统一的方法与工具
PCT/CN2023/134292 WO2024131444A1 (zh) 2022-12-21 2023-11-27 一种保证网站系统样式统一的方法与工具

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211649625.1A CN116009859A (zh) 2022-12-21 2022-12-21 一种保证网站系统样式统一的方法与工具

Publications (1)

Publication Number Publication Date
CN116009859A true CN116009859A (zh) 2023-04-25

Family

ID=86029196

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211649625.1A Pending CN116009859A (zh) 2022-12-21 2022-12-21 一种保证网站系统样式统一的方法与工具

Country Status (2)

Country Link
CN (1) CN116009859A (zh)
WO (1) WO2024131444A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2024131444A1 (zh) * 2022-12-21 2024-06-27 中电信数智科技有限公司 一种保证网站系统样式统一的方法与工具

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107544903A (zh) * 2017-08-04 2018-01-05 东软集团股份有限公司 页面规范检测方法、装置及计算机设备
CN109597615A (zh) * 2018-10-22 2019-04-09 中国平安人寿保险股份有限公司 第三方页面设计规范匹配方法、装置、介质和设备

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP3664475B2 (ja) * 2001-02-09 2005-06-29 インターナショナル・ビジネス・マシーンズ・コーポレーション 情報処理方法、情報処理システム、プログラムおよび記録媒体
WO2014147924A1 (ja) * 2013-03-19 2014-09-25 Ｎｅｃソリューションイノベータ株式会社 ユーザインタフェース一貫性チェック方法、装置およびプログラム
CN108829392B (zh) * 2018-05-21 2022-11-25 北京五八信息技术有限公司 一种减少过渡绘制的方法、装置、电子设备及存储介质
CN111475244A (zh) * 2020-04-07 2020-07-31 深圳前海微众银行股份有限公司 页面生成方法、装置、设备与计算机可读存储介质
CN116009859A (zh) * 2022-12-21 2023-04-25 中电信数智科技有限公司 一种保证网站系统样式统一的方法与工具

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107544903A (zh) * 2017-08-04 2018-01-05 东软集团股份有限公司 页面规范检测方法、装置及计算机设备
CN109597615A (zh) * 2018-10-22 2019-04-09 中国平安人寿保险股份有限公司 第三方页面设计规范匹配方法、装置、介质和设备

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2024131444A1 (zh) * 2022-12-21 2024-06-27 中电信数智科技有限公司 一种保证网站系统样式统一的方法与工具

Also Published As

Publication number Publication date
WO2024131444A1 (zh) 2024-06-27

Similar Documents

Publication Publication Date Title
CN109948134B (zh) 一种报告自动生成方法、系统及电子设备和存储介质
CN101025738B (zh) 一种免模板动态网站生成方法
CN103106188B (zh) 数据模型的图形化分析系统和图形化分析方法
CN105868171B (zh) 一种Excel文件的校验方法及装置
US20070130512A1 (en) Systems and methods for report design and generation
CN108228180A (zh) 基于可视化界面设计的自动代码生成方法及系统
CN108694214A (zh) 数据报表的生成方法、生成装置、可读介质及电子设备
WO2009155144A2 (en) Hierarchically presenting tabular data
CN111126019B (zh) 基于模式定制的报表生成方法、装置和电子设备
CN106874163B (zh) 一种显示软件错误码信息的方法及系统
CN1831766A (zh) 用于管理计算机程序代码的开发对象的方法和系统
WO2024131444A1 (zh) 一种保证网站系统样式统一的方法与工具
CN101452441A (zh) 一种电子表格通用数据解析导入方法
CN104951508A (zh) 时间信息识别方法和装置
CN103853737A (zh) Html内容可视化编辑方法及系统
CN101859295B (zh) 具标记提示的简繁字词转换系统及其方法
US20100238195A1 (en) Systems and Methods for Reviewing Digital Pen Data
CN109299074A (zh) 一种基于模板化数据库视图的数据校验方法及系统
CN105260300A (zh) 基于会计准则通用分类标准应用平台的业务测试方法
CN113297831B (zh) 一种Excel生成可校验报表网页的方法和系统
CN114661286A (zh) 一种大屏可视化代码生成方法、系统及存储介质
CN114116938A (zh) 一种基于WebGIS的地图标绘方法及装置
CN111401023B (zh) 一种报表生成方法、装置、服务器及存储介质
CN108536660A (zh) 一种自定义报表的生成方法及终端
CN108228688B (zh) 一种基于xbrl的模板生成方法、系统及服务器

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