KR20230080060A - Web page building system and method providing fake rendering - Google Patents

Abstract

A computing device comprises memory where a program for editing a website containing multiple web pages is stored and at least one processor that executes instructions of the program loaded in the memory. The processor creates an additional layer on a block to perform fake rendering through a fake rendering frame, sets a border on the block, and grants a class for applying separate CSS when a block of the web page is selected according to the execution of the program, and applies the block border and block editing information to the block and provides a block editing process in real time in a web page format. According to one embodiment of the present invention, in the process of editing one or more web pages, it is possible to check in real time the web page, wherein the web page, which is being edited, is optimized for the resolution to be implemented.

Description

Web page building system and method providing fake rendering {WEB PAGE BUILDING SYSTEM AND METHOD PROVIDING FAKE RENDERING}

The present invention relates to a web page building system and method for providing fake rendering.

Recently, as the use of terminals having various screen sizes such as smart phones, tablet PCs, and smart TVs increases, the need for websites optimized for various screen resolutions has emerged.

Accordingly, a web builder service capable of producing a web page without complicated program coding is being developed in order to improve the accessibility of producing a web page optimized for each terminal type (or standard).

Since this web builder service is a so-called design view editing form in which editing is done while looking at the design rather than coding, when fine positioning or responsive optimization pages are produced, editing is performed while checking changes.

However, the editing screen of the web builder service is not exactly the same as the actual completed website, and it is applied to the actual website during editing, such as repeated saving and refreshing or server loading delays due to resolution variations. There are limits to checking the situation.

Therefore, there is a need for a technology capable of checking the modified web page in real time without server loading delay or cumbersome repetitive work during web page editing.

As a related prior art, Korean Patent Registration No. 1760777 discloses "a responsive website builder system and its method".

One embodiment of the present invention is to provide a web page building system and method for providing a preview on a web page screen through fake rendering.

In addition to the above tasks, embodiments according to the present invention may be used to achieve other tasks not specifically mentioned.

A computing device according to one embodiment of the present invention, including a memory in which a program for editing a web site including a plurality of web pages is stored, and at least one processor executing instructions of the program loaded into the memory. And, when a block of the web page is selected according to program execution, the processor creates an additional layer in the block for performing fake rendering through the fake rendering frame, sets a border to the block, and applies a separate CSS. A class is assigned, and the editing process of a block is provided in the form of a web page in real time by applying the block border and block editing information to the block.

The fake rendering frame includes a first layer as a web screen, a second layer representing a unit block rendering area, and a third layer representing an editing selection area, and when a block is selected from a user terminal, the second layer and the third layer for the block When a layer is activated (on) and a block is unselected, the second layer and the third layer may be deactivated (off).

When a block is selected, the processor pauses if there is JavaScript attached to the block, re-executes the stopped JavaScript when the block is unselected, and generates an event notification for re-execution.

The processor may provide a web page screen identical to the environment on the web site by limiting the display of the margins and borders given to the third layer.

When switching to a different resolution, the processor may automatically apply a CSS responsive class loaded at a previous point in time according to the resolution to be switched using a fake rendering frame.

A method of operating a computing device operated by at least one processor according to an embodiment of the present invention, comprising receiving a fake rendering frame together with a web page editing tool, and when a block of a web page to be edited is selected, fake rendering. Setting a border to the selected block by creating one or more additional layers to perform fake rendering through the frame, assigning a class to apply separate CSS to the block, and block border and block editing information is applied to the block to provide the editing process of the block in real time in the form of a web page.

The fake rendering frame includes a first layer as a web screen, a second layer representing a unit block rendering area, and a third layer representing an editing selection area, and when a block is selected, the second layer and the third layer for the block are activated. (on), and when the selection of the block is released, the second layer and the third layer may be deactivated (off).

The step of setting a border to the selected block includes inserting a second layer under the selected block, replacing child nodes of the block with child nodes of the second layer, and stretching up, down, left, and right with sibling nodes of the second layer. A step of creating a third layer and setting a border at the edge may be included.

In the step of providing in real time, when switching to a different resolution, a CSS responsive class loaded at a previous point in time using a fake rendering frame can be automatically applied according to the resolution to be switched.

According to one embodiment of the present invention, in a process of editing one or more web pages, a web page being edited optimized for a resolution to be implemented can be checked in real time.

In addition, according to one embodiment of the present invention, delicate editing such as fine position adjustment is easy by providing the same status as editing on a website.

1 is a configuration diagram of a web page building system according to an embodiment.
2 is a block diagram illustrating a configuration of a computing device according to an exemplary embodiment.
3 is a flowchart illustrating a method of providing fake rendering of a computing device according to an embodiment.
4 is an exemplary diagram illustrating a fake rendering model according to an embodiment.
5A and 5B are exemplary views illustrating an editing screen and a preview screen for each resolution according to an exemplary embodiment.

With reference to the accompanying drawings, embodiments of the present invention will be described in detail so that those skilled in the art can easily carry out the present invention. This invention may be embodied in many different forms and is not limited to the embodiments set forth herein. In order to clearly describe the present invention in the drawings, parts irrelevant to the description are omitted, and the same reference numerals are used for the same or similar components throughout the specification. In addition, in the case of widely known known technologies, detailed descriptions thereof will be omitted.

Throughout the specification, when a certain component is said to "include", it means that it may further include other components without excluding other components unless otherwise stated.

An application is software stored on a computer readable storage medium, and includes instructions and data for executing the operation of the present invention. The application is installed on a computer device, runs on the computer device, and communicates with a designated server through a communication network.

In this specification, “transmission or provision” may include direct transmission or provision as well as indirect transmission or provision through another device or by using a detour path.

Expressions written in the singular in this specification may be interpreted in the singular or plural unless an explicit expression such as “one” or “single” is used.

In this specification, like reference numerals refer to like elements, regardless of drawing, and "and/or" includes each and every combination of one or more of the recited elements.

In this specification, terms including ordinal numbers such as first and second may be used to describe various components, but the components are not limited by the terms. These terms are only used for the purpose of distinguishing one component from another. For example, a first element may be termed a second element, and similarly, a second element may be termed a first element, without departing from the scope of the present disclosure.

In the embodiments described in this specification with reference to the drawings, any embodiment may be implemented alone, several embodiments may be merged or divided, and a specific operation may not be performed in each embodiment.

Now, a web page building system that provides fake rendering according to an embodiment of the present invention will be described with reference to the drawings.

In this specification, a block is used as a unit constituting text, image, symbol, table, figure, video, url, content, etc. that can be posted on a web page.

The web page construction method according to the present invention can be performed by any computing device including at least one processor, such as a computing device of a user terminal and a computing device of a server, and the concept of the present invention is a structure of a processor that performs the method or construed as limiting by location.

1 is a configuration diagram of a web page building system according to an embodiment.

At this time, the configuration of the web page building system shows a schematic configuration necessary for explanation according to the embodiment of the present invention, but is not limited to this configuration.

Referring to FIG. 1, the web page production system includes a user terminal 100 and a server device 200, and these components 100 and 200 are connected through a network to transmit and receive data.

Here, the network includes not only wired telephone networks and wired Internet networks such as PSTN (Public Switched Telephone Network), but also mobile communication networks such as Code Division Multiple Access (CDMA) and Wideband CDMA (WCDMA), and Wi-Fi and Wibro ), and LTE (Long Term Evolution).

The user terminal 100 includes various wired or wireless communication terminals such as a computer (PC), a laptop computer, a personal digital assistant (PDA), a tablet PC, and a smart phone.

The user terminal 100 may create and edit web pages using various templates or user interfaces provided by the server device 200 .

In other words, the server device 200 provides the user terminal 100 with an interface for editing a web page configured in block units for each block, and the user terminal 100 edits the web page through the interface without a separate coding operation. can be built

At this time, in providing the interface to the user terminal 100, the server device 200 also provides source codes capable of performing fake rendering to perform the process of editing the web page in the user terminal 100 as a server. A web page screen may be provided according to the set resolution without being stored in the device 200 .

In general, even if the user terminal 100 does not receive the edited webpage from the server device 200, a preview of the edited webpage in the user terminal 100 is displayed on the actual webpage screen using a fake rendering frame. can provide

In detail, when a block to be edited is selected, the user terminal 100 additionally inserts a layer for the block to set a border and applies a separate CSS (cascading style sheet) to display the block. give a class In addition, when the selection of the block is released, the assigned class is removed, some data is transferred to the block according to a preset rule, and some data is deleted, thereby providing a web page in a state of editing in real time more quickly.

Through this, the user terminal 100 can check the website being edited in real time without the process of storing web page editing information from the server device 200, analyzing the editing information, and applying it to the web page.

In addition, even when the screen resolution is switched (PC to mobile, mobile to PC, etc.), the preloaded CSS responsive class can be automatically applied according to the screen resolution in the same way.

Meanwhile, the user terminal 100 performs editing using an editing tool provided by the server device 200, and editing information is synchronized between the user terminal 100 and the server device 200 in real time.

The user terminal 100 may be implemented as a computing device, for example, a computer readable medium.

2 is a block diagram showing the configuration of a computing device according to an embodiment of the present invention.

Referring to FIG. 2 , a computing device 300 may include at least one of a processor 1303 , a memory 305 , a storage 307 , and a communication device 309 communicating through a bus 301 .

The computing device 300 may be loaded with various software including an operating system capable of driving programs or applications. In particular, the computing device 300 is used to create and edit a website using a web page editing program or application according to an embodiment of the present invention.

The web page editing program or application is executed in the mobile terminal 100 under the control of the processor 303 and is composed of instructions for creating and editing a web page for a user (eg, a person in charge or an administrator).

A web page editing program or application includes commands that operate based on a graphical user interface (GUI). That is, the web page editing program or application displays text, images, symbols, videos, etc. on the graphic screen as contents to be displayed on the web page, and includes commands such as input, move, add, and delete according to user input signals. .

The processor 303 may be implemented as a central processing unit (CPU) or other chipset or microprocessor. Also, the processor 303 may be a semiconductor device that executes commands stored in the memory 305 or the storage 307 .

The processor 303 may edit the web page based on the input signal and output the screen of the web page being edited as a preview through a fake rendering frame.

Memory 305 and storage 307 may include various forms of volatile or non-volatile storage media.

The memory 305 can load a web page editing program or application so that the instructions described to carry out the operations of the present invention are processed by the processor 303 . For example, memory may include read only memory (ROM) and random access memory (RAM). In one embodiment of the present description, the memory 305 may be located inside or outside the processor 303, and the memory 305 may be connected to the processor 303 through various known means. The memory 305 is a volatile or non-volatile storage medium in various forms, and may include, for example, read-only memory (ROM) or random access memory (RAM).

The storage 307 may store various data, programs, and the like required to execute the operation of the present invention.

The communication device 309 may transmit or receive wired or wireless signals.

Hereinafter, a configuration for providing a real-time editing web page through fake rendering according to an embodiment of the present invention will be described in detail using FIGS. 3 to 5 .

3 is a flowchart illustrating a method of providing fake rendering of a computing device according to an embodiment.

As shown in FIG. 3, when a block for editing is selected, the computing device 300 inserts a layer immediately below the block at the source code level, and replaces a child node of the block with a child node of the inserted layer (S110). ).

The computing device 300 may insert a div layer called block_inner immediately below the block and perform logic of replacing children of the block with children of block_inner.

Then, the computing device 300 forms a border corresponding to the edge of the editing screen by creating a layer that is vertically and horizontally stretched with sibling nodes of the inserted layer (S120).

The computing device 300 may set a border around the edge of the corresponding block_selection when creating a layer that stretches up, down, left, and right by placing block_selection as a sibling node of block_inner. Here, block_selection does not interfere with the positioning of other elements.

Next, the computing device 300 assigns a class to apply a separate CSS to the block in which the border is set (S130).

The computing device 300 applies separate CSS to each block, and when there is JavaScript assigned to a corresponding block, it may execute initial settings such as pause.

For convenience of explanation, steps S110 to S130 have been separately described, but the corresponding steps may be executed at the same time as a block is selected.

The computing device 300 performs editing on the selected block (S140).

Next, when the block is deselected, the computing device 300 transfers some data to the block, deletes the assigned class, and generates an event notification for restarting the stopped JavaScript (S150).

When the selected block is deselected, the computing device 300 transfers some data to the block and automatically deletes some data according to a preset rule.

Here, the preset rule can be easily set and changed by an administrator.

And if there is stopped JavaScript, it restarts, and creates a restart event notification considering the impact on the entire logic.

The computing device 300 displays the actual web page in a screen format according to the set screen resolution (S160).

The computing device 300 may apply block_inner and block_selection to an existing block based on input editing signals to provide a preview of the screen of the web page being edited in real time.

At this time, the computing device 300 may designate that the blank space and border assigned to block_selection are not visible, and by providing an editing function in the corresponding state, the same effect as editing on an actual website can be displayed.

If there is no edit bar at the top after exiting the edit mode (OFF), a screen matching the actual website may be provided.

4 is an exemplary diagram illustrating a fake rendering model according to an embodiment.

As shown in FIG. 4, a generally provided web screen is provided by combining HTML and CSS as contents of the first layer (Layer 1.). Editing tools of the existing web builder service can save the contents of Frame 1 and check only the area of Layer 1 by accessing the UI to be provided to the user.

On the other hand, in the fake rendering model, the fake rendering frame (Frame 1) manages to control or delete the on/off of the second layer (Layer 2) and the third layer (Layer 3) added according to the embodiment of the present invention. And, by separately managing the CSS, it is possible to accurately display the website screen more quickly without receiving the edited website screen by separately storing it in the server device 200.

In other words, when a block displayed on the first layer is selected, a layer (block_inner, layer 2) representing the unit block rendering area and a layer (block_selection, layer 3) representing the editing selection area are created under the block, or Enable (on) and, when editing is completed, block editing is performed by inactivating (off) or deleting the corresponding 2nd and 3rd layers, so that the contents are stored on the server for application to the editing screen. Since the transfer to the device 200, storage, and reloading are not performed, a delay occurring when the edit screen is applied can be minimized.

5A and 5B are exemplary views illustrating an editing screen and a preview screen for each resolution according to an exemplary embodiment.

Figure 5a is a web page editing screen, (a) of Figure b is a preview screen displayed in the screen size of a computer by performing fake rendering, and (b) is a preview screen displayed in the screen size of a mobile terminal by performing fake rendering Displays the preview screen.

As shown in FIG. 5A, the web page editing screen has many dotted lines and blank spaces to show the layout at a glance, and is implemented somewhat more complicated than a web page posted on an actual website.

Accordingly, in (a) of FIG. 5B , it can be seen that, except for the bar at the top, the result is the same as that of the web page to be posted on the website. In addition, as shown in (b) of FIG. 5B, a case where the view is converted to the screen size of the mobile terminal through view conversion can also be implemented as a result optimized for the mobile terminal.

Therefore, in the process of editing the web page, the editing block is repeatedly transmitted to the server device 200, and the server device 200 analyzes the editing block and separates each selected block without applying the analyzed editing contents to the web page. You can check the web page being edited in real time by using the CSS of and checking the unit block rendering area and editing selection area and applying it to the block. For example, in the case of selecting the rightmost desktop monitor or the leftmost mobile device in the selection block 500 from which a subject of preview can be selected on the editing screen of FIG. 5A, the screen being edited is selected. The content corresponding to can be directly applied and checked in the user terminal 100 as shown in (a) or (b) of FIG. 5B without being transmitted to the server device 200.

In addition, by providing the same status as editing on a website, delicate editing such as fine position adjustment is easy.

Meanwhile, the embodiments of the present invention are not implemented only through the devices and/or methods described so far, and may be implemented through a program that realizes functions corresponding to the configuration of the embodiments of the present invention or a recording medium in which the program is recorded. And, such implementation can be easily implemented by those skilled in the art from the description of the above-described embodiment.

Although the preferred embodiments of the present invention have been described in detail above, the scope of the present invention is not limited thereto, and various modifications and improvements of those skilled in the art using the basic concept of the present invention defined in the following claims are also made according to the present invention. falls within the scope of the rights of

Claims (9)

As a computing device,
A memory in which a program for editing a website including a plurality of web pages is stored; and
at least one processor to execute instructions of a program loaded into the memory;
the processor,
When a block of the web page being edited is selected according to the execution of the program, an additional layer is created on the block for performing fake rendering through a fake rendering frame to set a border to the block and to apply a separate CSS. give a class,
Applying the border of the block and the editing information of the block to the block to provide the editing process of the block in real time in the form of a web page,
computing device. In paragraph 1,
The fake rendering frame,
The web screen includes a first layer, a second layer representing a unit block rendering area, and a third layer representing an editing selection area,
Turning on the second layer and the third layer for the block when a block is selected from the user terminal, and turning off the second layer and the third layer when the selection of the block is released,
computing device. In paragraph 2,
the processor,
When the block is selected, if there is JavaScript assigned to the selected block, pause, and when the block is deselected, the stopped JavaScript is re-executed and an event notification for re-execution is generated,
computing device. In paragraph 3,
the processor,
Providing a web page screen identical to the environment on the website by limiting the display of the margins and borders given to the third layer,
computing device In paragraph 4,
the processor,
When switching to a different resolution, the CSS responsive class loaded at the previous point using the fake rendering frame is automatically applied according to the resolution to be switched,
computing device. A method of operating a computing device operated by at least one processor,
Receiving a fake rendering frame with a web page editing tool;
When a block of a web page to be edited is selected, creating one or more additional layers for performing the fake rendering through the fake rendering frame and setting a border to the selected block;
assigning a class for applying a separate CSS to the block; and
Providing the editing process of the block in real time in the form of a web page by applying the border of the block and the editing information of the block to the block,
how it works. In paragraph 6,
The fake rendering frame,
The web screen includes a first layer, a second layer representing a unit block rendering area, and a third layer representing an editing selection area,
When a block is selected, the second layer and the third layer for the selected block are activated (on), and when the block is unselected, the second layer and the third layer are deactivated (off),
how it works. In paragraph 7,
In the step of setting a border to the selected block,
inserting a second layer under the selected block and replacing child nodes of the block with child nodes of the second layer; and
Creating a third layer stretched up, down, left, and right with sibling nodes of the second layer and setting a border at the edge,
how it works. In paragraph 8,
The step of providing in real time,
When switching to a different resolution, the CSS responsive class loaded at the previous point using the fake rendering frame is automatically applied according to the resolution to be switched,
how it works.

Images