KR20230080034A - Computing appartus and method for editing web page in movile environmet - Google Patents

Abstract

The present invention relates to a computing device, comprising: a memory storing a program for editing a website comprising a plurality of web pages; and at least one processor executing instructions of the program loaded into the memory. When an editing area is selected on the web page as the program is executed, the processor automatically displays one or more editing tools linked to the editing area on a screen of a connected mobile terminal, modifies the content on the web page using an editing tool based on an editing signal input from the mobile terminal, and reflects the web page on which the modified content on the website. Among editing tools, an image editing tool simultaneously adjusts the size of an image and cuts out only a part of the image through an image adjustment bar displayed on the screen of the mobile terminal based on an input image ratio. The present invention provides a computing device and method for creating and editing web pages using an intuitive editing tool optimized for a mobile environment.

Description

Computing device and method for editing a web page in a mobile environment {COMPUTING APPARTUS AND METHOD FOR EDITING WEB PAGE IN MOVILE ENVIRONMET}

The present invention relates to a computing device and a device for editing a web page in a mobile environment.

Recently, terminals with various screen sizes, such as smart phones, tablet PCs, and smart TVs, are rapidly increasing, and the frequency of traffic generation through the actual Internet is higher in mobile terminals than in general desktop (PC).

As the use of various terminals increases, companies need to develop web pages optimized for each terminal type (or standard) when creating web pages for web services. However, since expertise in production is required to produce, edit, and operate web pages, it takes a lot of time and money by requesting a company specializing in production or requiring a separate professional manpower.

Accordingly, a web builder service is being developed that allows users who do not have expertise in web page production to create web pages without program coding.

However, editing tools such as the web editor in the web builder service are mainly provided on computers (PCs) with sufficient resolution, and are implemented on terminals in a mobile environment due to the diversity and complexity of editing tools and differences in resolution of terminals used for editing. There are practical limitations to doing this.

Therefore, a web page production and editing technology optimized for a terminal in a mobile environment is required.

As related prior literature, Korean Patent Publication No. 10-2012-0132233 discloses "a web homepage and mobile homepage linked production simplification system".

One embodiment of the present invention is to provide a computing device and method for creating and editing a web page through an intuitive editing tool optimized for a mobile environment.

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. When an editing area is selected on the web page according to program execution, the processor automatically displays one or more editing tools linked to the editing area on the screen of the connected mobile terminal, and responds to an editing signal input from the mobile terminal. Based on the editing tool, the content on the web page is modified, the web page on which the modified content is aired is reflected on the website, and among the editing tools, the image editing tool is on the screen of the mobile terminal based on the input image ratio. The function of adjusting the size of an image and cutting out only a part of the image is simultaneously performed through the image adjustment bar displayed on the image.

The processor displays on the screen of the mobile terminal only the editing tools linked to each editing area in the web page, and when the editing of the editing area is completed, the displayed editing tool can be removed from the screen of the mobile terminal.

When one ratio value is selected as the ratio of an image in an image editing tool, the processor displays an image converted to the ratio value in the edited image display area to which the selected ratio value is applied, and displays the image converted to the ratio value on the screen of the mobile terminal other than the edited image display area. Areas can be shaded.

The processor displays a linear image control bar on one end of the screen of the mobile terminal, divides one area of the image control bar into a first area and the other area into a second area, and divides the first area into a second area based on the image control bar. When a subsequent signal is received, the image is enlarged up, down, left, and right at a preset ratio, and only an area corresponding to the edited image display area among the enlarged images may be displayed.

The processor may process so that modified matters during the editing process of the web page are displayed in a state reflected on the website in real time.

A method of operating a computing device operated by at least one processor according to an embodiment of the present invention, when an editing area of a web page is selected from a connected mobile terminal, one or more editing tools linked to the editing area are automatically selected. Displaying on the screen of the mobile terminal, modifying the content on the editing area through an editing tool based on the input editing signal, and removing the editing tool from the screen of the mobile terminal when the editing of the content on the editing area is completed. and reflecting the webpage to which the modified content is applied on the website. Among the editing tools, the image editing tool is an image through an image adjustment bar displayed on the screen of the mobile terminal based on the input image ratio. You can simultaneously perform the function of resizing and cropping only a part of the image.

In the step of modifying the content on the editing area, if the editing area is in the form of an image, one ratio value is selected as the ratio of the image from the image editing tool, and the image converted to the ratio value is applied to the edited image display area to which the selected ratio value is applied. may be displayed, and an area other than the edited image display area on the screen of the mobile terminal may be shaded.

In the step of modifying the content on the editing area, a linear image control bar is displayed on one end of the screen of the mobile terminal, and one area of the image control bar is divided into a first area and the other area is divided into a second area based on the image control bar. When a signal extending from area 1 to area 2 is received, the image is enlarged up, down, left and right at a preset ratio, and only the area corresponding to the edited image display area among the enlarged images can be displayed.

In the step of modifying the content in the editing area, the modified items during the editing process of the web page may be displayed in a state that is reflected on the website in real time.

The content to be displayed in the layout of the web page is sequentially listed as thumbnails of a certain size and displayed on the screen, and the content to be applied to the web page is adjusted by adding or deleting the thumbnail list, and one thumbnail is listed as a thumbnail list. When moving to another point in the list, the order of contents to be displayed in the layout of the web page may be changed according to the changed thumbnail list.

According to an embodiment of the present invention, web site management efficiency can be improved by increasing accessibility and convenience of creating and editing web pages through an editing tool optimized for a computing device in a mobile environment.

In addition, according to one embodiment of the present invention, it is possible to directly modify images or contents of a mobile homepage or web page in real time without requesting a professional company, thereby providing an effect that does not require time and additional cost for modification. do.

1 is a configuration diagram of a web page production system according to an embodiment.
2 is a block diagram illustrating a configuration of a computing device according to an exemplary embodiment.
3 is an exemplary diagram illustrating a content editing screen in a web page according to an exemplary embodiment.
4 is an exemplary diagram illustrating an image editing screen in a web page according to an exemplary embodiment.
5 is an exemplary diagram illustrating a function of adjusting the size of an image of a web page 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 computing device for editing a web page in a mobile environment according to an embodiment of the present invention will be described with reference to the drawings.

In this specification, content includes text, images, symbols, tables, figures, videos, urls, etc. that can be posted on a web page, and is not limited to a specific format.

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

At this time, the configuration of the web page production system is not limited to the schematic configuration required for description according to the embodiment of the present invention.

Referring to FIG. 1, the web page production system includes a server device 100 and a mobile terminal 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 server device 100 implements a responsive web builder service and edits a web page through a mobile terminal 200 connected to the server device 100 .

The mobile terminal 200 includes various wireless communication terminals such as a Personal Digital Assistant (PDA), a tablet PC, and a smart phone used in a mobile environment.

The mobile terminal 200 may create and edit a web page through an editing tool optimized for the mobile terminal 200 using various templates or user interfaces provided by the server device 100 .

Here, the editing tool optimized for the mobile terminal 200 is set to perform essential editing functions of a web page even on a relatively small screen by improving the complexity of an editing tool used in an existing computer.

In detail, based on the characteristics of the mobile terminal 200 that mainly utilizes buttons, touches, panels, touch screens, touch pads, etc. as input methods, the server device 100 provides a simplified web page editing tool and editing method. provides

Accordingly, when a separate page is browsed for web page editing or an editable area shown on the mobile terminal 200 is selected even though the editing tools are not all listed on the screen, the editing tools applicable to the editable area are exposed. Editing is possible without switching to a page for separate editing.

Accordingly, the mobile terminal 200 accesses the server device 100 to perform functions such as text change or image change position movement of the basic web page, as well as font, size, style, color change, alignment, and table editing. .

Meanwhile, while the mobile terminal 200 is editing the web page, the server device 100 may directly display the contents being edited on the website. For example, the mobile terminal 200 may set the editing process to be exposed on the website as it is without setting a separate preview through the server device 100 in real time.

The server device 100 provides an editing tool optimized for the mobile terminal to the mobile terminal 200 and can create a website corresponding to a screen resolution input from the mobile terminal 200 .

In this case, the server device 100 may generate a web page according to a resolution selected from among a plurality of resolutions through an appropriate basic cascading style sheet (CSS) setting value according to the screen resolution.

In detail, the server device 100 automatically changes (or reconstructs) the screen (or page) of the website to suit the resolution (or screen size) by assigning N classes based on its own N-grid. .

In addition, the server device 100 provides a layout for each theme or resolution applicable to the web page, and generates and provides a web page according to a plurality of layout setting values input from the mobile terminal 200 .

Meanwhile, the editing tool optimized for the mobile terminal 200 provided by the server device 100 is not limited to being applied to a computing device having a specific resolution, and may be used for existing computers, smart TVs, and the like.

The server device 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 300 according to an embodiment of the present invention. Here, the computing device 300 may correspond to the server device 100 described with reference to FIG. 1 .

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 computing device 300 or the mobile terminal 200 under the control of the processor 303 and includes instructions for creating and editing a web page for a user (eg, a person in charge or an administrator). Instructions).

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 signal transmitted from the connected mobile terminal 200 and output it to the mobile terminal 200 or post it on a website.

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

Memory 305 can load a webpage editing program or application so that the instructions described to carry out the operations of the present invention are processed by 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 web page editing function according to an embodiment of the present invention will be described in detail using FIGS. 3 to 6 .

Hereinafter, an editing function in a computing device will be described based on a produced webpage, but it is not necessarily limited to editing, and the same editing function can be applied to webpage production.

3 is an exemplary diagram illustrating a content editing screen in a web page according to an exemplary embodiment.

(a) of FIG. 3 shows a web page before editing, and (b) shows an editing screen for performing text editing.

Looking at the screen 10 of the mobile terminal 200 as shown in (a) of FIG. 3, the editing tool is not exposed and the web page before editing is displayed as it is.

At this time, if the text area A is clicked or touched, the text editing tool 11 is exposed on the screen 10 on the web page before editing, as shown in (b) of FIG. 3 .

If an editable area is selected through a click or touch without editing a web page through a separate editing screen in which editing tools are listed, applicable editing tools are automatically displayed in a certain area of the screen.

As shown in (b) of FIG. 3, the cursor is activated in the text area (A) and a text editing tool 12 for font, text size, style, color change, alignment, table editing, image or emoticon insertion, etc. is displayed at the top of the screen. Here, the position of the text editing tool 12 is not fixed, and the position can be changed by a user or administrator.

In addition, an editing tool 11 is displayed on one end of the screen to configure a list of thumbnails of a certain size and sequentially list the contents to be displayed in the layout, rather than configuring them as separate pages.

At this time, a + button is written on the last left side of the editing tool 11, providing a function of adding content by selecting the corresponding button, and selecting the X button exposed at the top right of each thumbnail can delete the selected content. In addition, when one content is selected from the thumbnail list, the content is moved to an area where the content is displayed, and editing tools capable of editing according to the type of the content are displayed on the screen. For example, as shown in (b) of FIG. 3 , when content of an image is selected, the image is moved to an area where the corresponding image is displayed, and an image editing tool corresponding thereto may be displayed on the screen.

The order of the list of contents displayed in this layout can be changed by selecting the corresponding contents and then dragging and dropping (Drag&Drop).

4 is an exemplary view showing an image editing screen on a web page according to an embodiment, and FIG. 5 is an example view showing a function of adjusting the position or size of an image of a web page according to an embodiment.

(a) of FIG. 4 shows a web page before editing, and (b) shows an editing screen for performing image editing.

Looking at the screen 10 of the mobile terminal 200 as shown in (a) of FIG. 4, the editing tool is not exposed and the web page before editing is displayed as it is.

At this time, if the image area B is clicked or touched, the image editing area and tools 13, 14, 15, and 16 are exposed on the screen 10 of the web page before editing, as shown in FIG. 4(b). do. The positions of the image editing areas and tools 13, 14, 15, and 16 are not necessarily fixed as shown in FIG. there is.

First, the horizontal and vertical ratio of the corresponding image is set through the image editing tool 14 .

In detail, Full indicates the ratio of the original image, and ratios of 16:9, 3:2, 4:3, 1:1, 3:4, 2:3, and 9:16 have emoticons representing the size of the ratio. displayed together. If any one ratio value is selected from these image ratios, the area where the size of the ratio is written is shaded, and the image is displayed in the edited image display area 13 at the corresponding ratio.

At this time, since the area other than the edited image display area 13 is displayed as a shaded area according to the applied ratio value, it is possible to check how the corresponding image is displayed on the screen 10 of the mobile terminal 200 .

The edited image display area 13 is fixed according to the selected ratio value, and when a user touches within the edited image display area 13 and drags it into the shaded area, the position of the edited image display area 13 moves in the corresponding dragging direction. do.

In this way, with respect to the image on the displayed web page, the ratio of the image on the displayed web page can be freely edited within the set range.

In general, the edited image display area 13 is placed in the center of the screen 10 based on the selected ratio value, but if you want to change the location on the screen 10, the first edit image display area 13 within the edited image display area 13 When dragging from a point to a second point in the shaded area, the edited image display area 13 may move according to a direction of a virtual line connecting the first point to the second point. Here, the first point and the second point represent arbitrary points.

In addition, when a point is selected within the edited image display area 13 and dragged in one direction, the image itself within the edited image display area 13 may move in the dragged direction.

In addition, the image control bar 16 set at one end of the screen 10 is a line for dividing the edited image display area 13 and the image control area (not shown). And, the image adjustment area (not shown) shows the lower area of the image adjustment bar 16 in FIG. 4(b).

In other words, the screen 10 is divided into an edited image display area 13, a first area that is a shadow area, and a second area that is an image control area based on the image control bar 16.

Accordingly, if a touch signal is dragged to a point in the image adjustment area through the image control bar 16 by selecting an arbitrary point within the edited image display area 13 and the shaded area, the image within the edited image display area 13 expands in the up, down, left, and right directions according to the maintenance ratio.

Here, the fixed ratio is an example and can be easily changed and set later by an administrator.

As shown in FIG. 5 , the image may be enlarged or reduced at a constant rate according to the direction in which the signal is dragged to another area through the image control bar 16 .

For example, if a touch signal is dragged to a point in the edited image display area 13 and the shaded area through the image control bar 16 by selecting a point in the image control area, the edited image display area 13 My image is reduced in the up, down, left, and right directions according to the maintenance ratio. Referring back to FIG. 4 , a description of the image may be written through the image editing tool 15 . The image editing tool 15 can write letters, numbers, symbols, etc., and can limit the maximum number of writeable characters.

An image description written through the image editing tool 15 may be written below the image or displayed in a preset area.

Apply displayed on the image editing tool 15 sets the size of the image of the edited image display area 13 at the time when applying is selected by cutting it out from the original image.

Also, the save button at the top of the screen 10 of the mobile terminal 200 means saving the entire editing itself, and applying displayed on the image editing tool 15 means applying only to image editing.

Meanwhile, although FIG. 4 shows that an image to be posted or posted on the homepage screen is edited, when the content of the thumbnail in FIG. 3 is an image, an editing tool as shown in FIG. 4 can be used to edit the content.

According to the present invention, web site management efficiency can be improved by increasing the accessibility and convenience of creating and editing web pages through an editing tool optimized for a computing device in a mobile environment.

In addition, according to one embodiment of the present invention, it is possible to directly modify images or contents of a mobile homepage or web page in real time without requesting a professional company, thereby providing an effect that does not require time and additional cost for modification. do

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 (10)

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,
According to the execution of the program, when an editing area is selected from a web page displayed on a mobile device connected to the computing device, one or more editing tools linked to the editing area are displayed on the displayed web page,
Based on the editing signal input from the mobile terminal, content on the web page is modified through the editing tool, and the web page on which the modified content is broadcast is reflected on the website;
Among the editing tools, the image editing tool,
Simultaneously performing functions of adjusting the size of an image and cropping only a part of the image through an image adjustment bar displayed on the screen of the mobile terminal based on the input image ratio,
computing device. In paragraph 1,
The processor
Only editing tools linked to each editing area in the web page are displayed on the screen of the mobile terminal, and when editing of the editing area is completed, the displayed editing tools are removed from the screen of the mobile terminal.
computing device. In paragraph 2,
the processor,
When one ratio value is selected as the ratio of the image in the image editing tool, the image converted to the ratio value is displayed in the edited image display area to which the selected ratio value is applied,
Shading an area other than the edited image display area on the screen of the mobile terminal,
computing device. In paragraph 3,
the processor,
A linear image control bar is displayed on one end of the screen of the mobile terminal,
Based on the image control bar, one area of the image control bar is divided into a first area and the other area is divided into a second area
When a signal extending from the first area to the second area is received, the image is enlarged up, down, left and right at a preset constant ratio, and displays only an area corresponding to the edited image display area among the enlarged images.
computing device. In paragraph 4,
the processor,
Processing so that the modified matters during the editing process of the web page are displayed in a state reflected on the website in real time,
computing device. A method of operating a computing device operated by at least one processor,
When an edit area of the web page displayed on the mobile terminal is selected from the accessed mobile terminal, displaying one or more editing tools linked to the edit area on the web page;
Modifying the content on the editing area through the editing tool based on the editing signal received from the mobile terminal;
When content modification on the editing area is completed, removing the editing tool from the screen of the mobile terminal; and
Including the step of reflecting the web page to which the modified content is applied to the website,
Among the editing tools, the image editing tool,
Simultaneously performing functions of adjusting the size of an image and cropping only a part of the image through an image adjustment bar displayed on the screen of the mobile terminal based on the input image ratio,
how it works. In paragraph 6,
In the step of modifying the content on the editing area,
When the editing area is in the form of an image, a ratio value is selected as a ratio of the image from the image editing tool, and the image converted to the ratio value is displayed in an edited image display area to which the selected ratio value is applied.
Shading an area other than the edited image display area on the screen of the mobile terminal,
how it works. In paragraph 7,
In the step of modifying the content on the editing area,
A linear image control bar is displayed on one end of the screen of the mobile terminal, and one area of the image control bar is divided into a first area and the other area is divided into a second area based on the image control bar, and the first area is divided into the second area. When a signal leading to the area is received, the image is enlarged up, down, left and right at a preset ratio, and only the area corresponding to the edited image display area is displayed among the enlarged images.
how it works. In paragraph 8,
In the step of modifying the content on the editing area,
Processing so that the modified matters during the editing process of the web page are displayed in a state reflected on the website in real time,
how it works. In paragraph 9,
The content to be displayed in the layout of the web page
It is sequentially listed as thumbnails of a certain size and displayed on the screen,
Adjust the content to be applied to the webpage by adding or deleting the thumbnail list, and when one thumbnail is moved to another point in the thumbnail list, the order of the contents to be displayed in the layout of the webpage is changed according to the changed thumbnail list ,
how it works.

Images