KR20190073835A - Method of measuring web style guide compliance rate in responsive web - Google Patents

Abstract

The present invention relates to a method for measuring a web style guide compliance rate in a responsive web and, more specifically, to a method for measuring a web style guide compliance rate in a responsive web, capable of digitizing and measuring whether a web page or design fits a web style guide, which is a standard of a web page design, is realized when a responsive web-based site changing a layout or a size in accordance with the size or the condition of a terminal is constructed in a web page generation project. According to the present invention, with respect to a web page by the responsive web changing a layout in accordance with a type of a display to display the web page, a coordinate value of data converted into an image is analyzed, thereby providing an effect of automatically calculating the degree of coincidence in color and layout. According to the present invention, the method comprises the following steps: collecting web page information, selecting a test area, determining the degree of coincidence, and generating a compliance rate.

Description

METHOD OF MEASURING WEB STYLE GUIDE COMPLIANCE RATE IN RESPONSIVE WEB

The present invention relates to a method for measuring compliance rate of a web style guide in a responsive web, and more particularly, to a method for measuring a web style guide compliance rate in a responsive web, The present invention relates to a method for measuring compliance rate of a web style guide in a responsive web, which enables numerical measurement of whether a web page or design conforming to a web style guide as a standard of web page design has been implemented.

Companies and organizations that provide various services through the Internet operate a web page that introduces products and services through their own homepages, and provides information and knowledge.

In the course of producing a web page, basic web page types, contents, types of information, and operating rules are determined. When basic web page planning is finished, a web style guide should be created before web page production. By creating a web style guide, you can set rules for the web style and ensure that the entire web page structure does not fall out of the frame. A web-style guide is an essential element in providing a unified visual identity by applying an integrated identity to the entire homepage of the operator or organization.

The universal web style guide is composed of four ranges such as basic environment introduction, font and basic rules, page layout regulations, and elements such as text and icons .

Among the various rules that make up the web style guide, the fonts, colors, layout rules, etc. are considered to be important elements in web page production because they enhance the uniformity of the whole web pages.

However, according to the spread of the mobile environment, in addition to accessing a web page in a general PC environment, a mobile terminal such as a smart phone is used to access the web page. Since the sizes and ratios of the display devices and display environments are different between the PC and the smart phone, it is often difficult to use the conventional web page standard as it is. Recently, we are producing web pages that can be used both in PC environment and mobile environment. This is called reactive web.

FIG. 1 is a conceptual diagram illustrating a structure of a conventional web page, and FIG. 2 is a conceptual diagram illustrating a state in which a web page is changed according to a terminal by a reactive web.

As shown in FIG. 1, in the case of a typical web page, the web page is displayed at the same size, ratio, and resolution regardless of the size of the displayed apparatus. The elements such as the position, size, font, and background color of the frames that make up the web page are important elements for defining the web style. In particular, since the layouts such as the position and the size of the frames are kept the same, It is easy to measure Web style guide compliance rate.

However, in the web page to which the reactive web as shown in FIG. 2 is applied, the size, position, and layout of the frame vary greatly depending on the displayed apparatus.

In FIG. 2, the first terminal 10 represents a conventional computer device such as a PC or a notebook, and the second terminal 20 represents a device used in a mobile environment such as a smart phone or a tablet PC.

The responsive web may display the basic first web page 11 displayed on the first terminal 10 by transforming the second web page 21 on the second terminal 20 having a different screen size or resolution. The second web page 21 may be the same as the first web page 11, but generally has a configuration in which the screen size, resolution, and layout are modified to fit a relatively small display screen. Therefore, the position, size, and the like may be different from the configuration of the first web page 11.

Also, compared to a conventional fixed web page, the reactive web has a small fixed area and a relatively large area depending on the device.

It is necessary to measure the web style guide compliance rate not only for the basic first web page 11 but also for the second web page 21 to which the responsive web is applied. Due to the characteristics of the responsive web described above, It is difficult to measure the temperature.

KR 10-1723646 B1 KR 10-2016-0066235 A KR 10-2002-0091374 A

According to an aspect of the present invention, there is provided a web-style guide for a web page created according to a reactive web standard, The present invention aims to provide a method for measuring compliance rate of a web style guide in a responsive web that can automatically compute a compliance rate in comparison with a standard of a web style guide.

In addition, we set a coordinate value for each image area, and match the web page to the reference area to determine the color compliance and the similarity of the layout by the image processing process. .

In order to solve the above-described problems, the present invention has been developed in order to quantify and measure how closely the standards of a web style guide, which is a standard of web page design, A method for measuring web-style guide compliance rate using a measurement system (100), the method comprising the steps of: a Web server (102) included in the measurement system (100) accessing a web site via the Internet and collecting web page information ; A second step of the inspection area setting module 106 included in the measurement system 100 selecting an area corresponding to an area set in the reference of the web style guide as an inspection area in the web page to be measured; A third step of scanning an inspection area of the web page as an image and calling an inspection area included in the standard of the web style guide to determine the identity; And a fourth step in which the compliance rate evaluation module 114 included in the measurement system 100 generates a compliance rate that quantifies the identity of the web page and the web style guide.

The layout checking module 108 included in the measurement system 100 compares the layout of a frame included in the web page set as the inspection area with the layout of a frame set as a reference of the web style guide, The color checking module 110 included in the measuring system 100 compares the color used in the web page set as the inspection area with the color set as the reference of the web style guide to quantify the identity.

The inspection area setting module 106 scans a size of a screen of a device having different sizes and ratios and sets a coordinate value of the scanned full screen size on the basis of a horizontal pixel or a vertical pixel to set an inspection area .

According to the present invention, it is possible to automatically calculate the coincidence degree of color or layout by analyzing coordinate values of data converted into an image even for a web page by a reactive web whose layout is changed according to the type of device to be displayed.

1 is a conceptual diagram showing a structure of a typical web page;
2 is a conceptual diagram illustrating a state in which a web page is changed according to a terminal by a reactive web;
3 is a block diagram showing the configuration of a measurement system for executing the measurement method of the present invention.
4 is a conceptual diagram showing a state in which a comparison object is set for each region in a reactive web;

Hereinafter, a "method for measuring the compliance rate of the web style guide in the reactive web" (hereinafter referred to as a "measurement method") according to the embodiment of the present invention will be described with reference to the drawings.

FIG. 3 is a block diagram showing the configuration of a measurement system for carrying out the measurement method of the present invention, and FIG. 4 is a conceptual diagram showing a state in which a comparison object is set for each region in a reactive web.

As described above, the four elements constituting the web style guide include basic environment rules, font and color rules, page layout rules, and elements such as text and icons. to be.

The basic environmental specifications include capacity specifications and browser specifications.

The capacity specification defines the total capacity of the main screen and the sub screen, and defines the size of the data of the web page screen (for example, within 500kb) or the size of the icon image commonly used for the main screen and the sub screen.

The browser specification is a specification for a device-specific browser such as a PC, a mobile, a tablet, and the like, and specifies a browser version, a resolution, a screen alignment, and the like.

The font and color specifications specify criteria such as default font (system) and image font, font size and spacing, and width. For color, specify the casting color and point color.

The page layout rules define not only the PC but also the layout shown on web pages such as mobile terminals and tablet PCs. The layout can be largely divided into a fixed area and a variable area. A variable area having a size or a divided boundary can be scanned into an image to determine the identity.

Regulations such as text and icons define a user guide for the typeface and color used in the text. The text displayed on the web page is in a state of size and other effects, which are recorded in this regulation.

It also specifies the usage rules for icons for each page category, the color and behavior of navigation, buttons and blits, tooltips, and input forms.

Constituting a web page Web documents  Each time a morphological feature Hard to fix  Therefore, it is necessary to collect the same data. In this case, CSS (Cascading Style Ssheets )to be.

CSS Web documents  It is a style sheet that stores the overall style in advance. The existing HTML has many restrictions on designing and changing the web document in various ways. The style sheet is created to compensate the change. Since the standard style sheet is CSS, it is also referred to as a style sheet.

By using CSS Web document  The overall consistency can be maintained and the need for detailed styling is reduced . Also,  When you create a web page by using the detailed frame in the detailed font One by one  However, if you save the style of the web page in advance, you can change the entire contents of the page even if you change only one element of the web page, so you can maintain the consistency of the whole document and shorten the working time. It is effective.

Therefore, Developers are more  You can design your web by design, Line spacing , Background color, arrangement position, etc. can be freely selected or changed, and maintenance and repair can be done easily.

The measurement system 100 used in the present invention includes means for acquiring data by accessing a web page, means for setting a web page region to be inspected, and means for analyzing the web page for each element, This is done by means of quantifying the compliance rate.

The web server 102 accesses a web site to be measured through the Internet and collects web page information about the main screen or the sub screen. Information about the collected web page information or the measured compliance rate is stored in the web page DB 104. [ To this end, the web server 102 is provided with a browser and a network protocol in a conventional sense.

The inspection area setting module 106 sets an area for inspecting a layout, a color, a font, and the like in a web page to be subjected to the compliance ratio measurement. The inspection area is formed by associating a specific area of a web page set as a reference of the web style guide and a specific area of a web page to be inspected with each other. An area in which the same content is recorded in the entire area of the web page is corresponded to the inspection object.

In order to create a uniform web page, the web style guide sets criteria for the layout, size and ratio of the frame, the color of the background or frame, the size of the character and the font. Regarding the layout, size, and the like of the frame, it is preferable to configure the similar size in a similar area. In the measurement system 100, the layout and color of the corresponding area are compared to check whether the web page is configured according to the standard of the web style guide.

To this end, the inspection area setting module 106 divides the area of the web page according to the criteria described in the web style guide. It is preferable that the inspection target is set to the same area as the position where the important frame is disposed in the division of the web page area.

As shown in FIG. 4, a corresponding region is set as an inspection target according to a web style guide standard of a web page composed of several frames. In the present invention, since the inspection is performed on a web page to which a responsive web having a different structure according to the environment of the device is applied, there may be a difference from the content of the web style guide as a reference. In the case of a reactive web, the relative size and coordinate values of the area to be inspected are analyzed in the entire screen, and a region to which a relative change value is applied in the web page changed according to the device is set as the inspection target area.

In the case of a reactive web, the size and structure of the web page may vary depending on the screen size or the ratio of the device. Displays of various PCs and smart phones have various screen sizes and resolutions. It is a principle that the responsive web has setting information to be adapted to all sizes and resolutions so that it can be applied to a variable screen size and resolution. However, since this is practically difficult or uneconomical to implement, the specifications used in actual devices are designated with several representative sizes and resolutions. The reactive web used in the present invention is set to change a web page on the basis of a typical screen size and resolution used in a typical device.

In the present invention, first, the sizes of screens of devices having different sizes and ratios are scanned first. Then, the entire screen size is set based on the horizontal pixel or the vertical pixel. It is possible to increase the reliability of the determination of the identity by comparing the image areas of the screen included in the web page after setting the web pages of different screen sizes to coordinate values of the same reference.

The layout checking module 108 quantifies whether the layout of the frames included in the web page conforms to the criteria of the web style guide.

In the case of the layout of the web page, the layout structure of the web page can be analyzed by analyzing the layout structure of the table area ending in the table start tag to the table end tag in the source code constituting the web site. However, in order to analyze the layout of a web page in such a manner, source code must be collected from a web site. In the present invention, a method of analyzing the size, position, boundary, and layout structure of a frame through comparison of images without analyzing the source code use.

The layout checking module 108 converts each area classified by the inspection area setting module 106 into image data and compares the same with the layout of the standard web page recorded in the web style guide. The layout of a standard web page can also be converted to image data in the same way to compare frame boundaries or relative locations.

Even in the case of a reactive web, it is possible to determine the identity by comparing the portions in which the same contents are written by setting the areas to be compared with each other.

The layout checking module 108 can calculate the compliance rate by weighting the portion representing the characteristics of the entire web page among the entire regions to be compared. In other words, the middle part of the web page displays the main contents of the web site, or a representative image is often placed. For these parts, the weight is added to the other areas to quantify them, so that more points are distributed compared to the less important parts.

The color checking module 110 checks whether the same color is used for the set area by scanning the image. In the case of color, it is also possible to compare whether the same or similar color is used based on the color chart.

In the case of color, weights can be given to characteristic colors used throughout the website to see if a uniform web page has been created. As in the layout, you can see the unity of the most important parts by comparing the color of the top half of the web page.

The type checking module 112 checks whether the fonts used in the two contrasted web pages are the same. However, in the case of the font, the source code of the website is analyzed and compared Accuracy can be increased.

The compliance rate assessment module 114 ultimately assesses how well a particular web page complies with the standards of the web-style guide by summing the values analyzed and quantified by each inspection module. In the case of the compliance rate, it is possible to display the percentage difference of each contrast factor, and to separately display the total compliance ratio of the entire web page. In some cases, it is also possible to divide the compliance rate represented by the numerical value into a certain section, and to express it in a grade of "A, B, C, D, E" or the like. It is also possible to set a clear boundary value for the adequacy of the compliance rate to decide whether or not to pass.

The capacity of individual web pages, browser settings and device settings can also be examined and added to the compliance rate measurement.

While the present invention has been described with reference to exemplary embodiments, it is to be understood that the invention is not limited to the disclosed embodiments, but, on the contrary, As will be understood by those skilled in the art. Therefore, it should be understood that the above-described embodiments are to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than the foregoing description, It is intended that all changes and modifications derived from the equivalent concept be included within the scope of the present invention.

10: first terminal 11: first web page
20: second terminal 21: second web page
100: Measurement system 102: Web server
104: Web page DB 106: Inspection area setting module
108: layout check module 110: color check module
112: Type checking module 114: Compliance rating module

Claims (3)

Measuring compliance rate of web style guide using measurement system (100) which quantifies and measures how closely the standards of web style guide that is the basis of web page design when constructing responsive web based site As a method,
A first step of the web server 102 included in the measurement system 100 accessing a web site through the Internet and collecting web page information to be measured;
A second step of the inspection area setting module 106 included in the measurement system 100 selecting an area corresponding to an area set in the reference of the web style guide as an inspection area in the web page to be measured;
A third step of scanning an inspection area of the web page as an image and calling an inspection area included in the standard of the web style guide to determine the identity;
And a fourth step in which a compliance rate evaluation module (114) included in the measurement system (100) generates a compliance ratio that quantifies the identity of the web page and the web style guide. Way. The method according to claim 1,
The layout checking module 108 included in the measurement system 100 compares the layout of the frames included in the web page set as the inspection area with the layout of the frame set as a reference of the web style guide,
Wherein the color checking module 110 included in the measurement system 100 compares the color used in the web page set as the inspection area with the color set as the reference of the web style guide, How to Measure Web - Style Guideline Compliance in a Web - based Web. The method according to claim 1,
The inspection area setting module 106 scans a size of a screen of a device having different sizes and ratios and sets a coordinate value of the scanned full screen size on the basis of a horizontal pixel or a vertical pixel to set an inspection area Wherein the web-style guideline compliance ratio is measured in a responsive web.

Images