KR102679271B1 - System for providing web site creating service using template editor for front-end development - Google Patents

Abstract

A web page production service provision system using a template editor for front-end development is provided, and a user terminal and front-end development that runs the template editor to build a web page and creates a web page through the unit, layout, and design stages. A construction section that separates the unit area, layout area, and design area within the template editor to build a template editor for the template editor. After running the template editor on the user terminal, when selecting a unit in the unit area and selecting a layout in the layout area, An execution unit that outputs the selected unit and layout to the design area, and an output unit that outputs the inserted result when the user terminal inserts at least one content of text, image, photo, and video into the unit and layout placed in the design area. It includes a server that provides production services.

Description

System for providing web page production services using a template editor for front-end development {SYSTEM FOR PROVIDING WEB SITE CREATING SERVICE USING TEMPLATE EDITOR FOR FRONT-END DEVELOPMENT}

The present invention relates to a system for providing a web page production service using a template editor for front-end development. When creating a web page, you can create, manage, and maintain a web page by selecting units and layouts using a template editor without programming. Provides a system that can be implemented.

Various programming languages can design software based on the HTTP protocol and client-server architecture. Server-side or back-end development is designed using the strengths of various programming languages such as PHP, C++, Python, JavaScript, and Go. Front-end development can be done in a variety of programming languages, including scripting languages, but mostly only JavaScript is used. JavaScript is convenient for controlling HTML and CSS, and supports asynchronous processing and dynamic processing. Representative technologies for implementing web services are HTML, CSS, and JavaScript. HTML is a document structure on the web, CSS is a document style, and JavaScript is a technology that implements document functions. Looking at Python as a representative example among other scripting languages, there are various libraries that manage HTML, control files such as JSON, and can fully develop with synchronous or asynchronous processing, but JavaScript has still been overwhelmingly the front-end for several decades. They have the upper hand on the side.

At this time, methods have been researched and developed to enable development by integrating the back-end and front-end, or to transmit content and templates based on object information from the back-end and then combine, render, and display them on the front-end. In this regard, the prior art, Korean Registered Patent No. 10-2022542 (announced on September 18, 2019) and Korean Patent Publication No. 2023-0014542 (published on January 30, 2023) provide program developers with an integrated development platform between clients and servers. After writing and distributing a development specification to which the common grammar of and a configuration for combining templates to render a GUI screen and then displaying it on a display device are disclosed.

However, in the former case, the code required to configure the front-end is not automatically generated based on a widget, and in the latter case, only the interaction between the back-end and the front-end is initiated, and the program code is used when creating a web page such as a homepage. It is not a configuration that allows you to create a web page without having to configure it. Non-experts not only cannot distinguish between front-end and back-end, but also do not know what code to use to build a front-end, so web page creation must be left to experts, and even if they do, updates, management, and maintenance are necessary. The inconvenience of having to refer to an expert again arises. Accordingly, there is a need for research and development of a system that can complete front-end development by simply selecting each template by providing a template editor in the order of unit, layout, and design based on widgets.

One embodiment of the present invention allows even non-experts to complete the front-end development of a web page by simply selecting and placing the desired template in the order of unit, layout, and design using a template editor, and the selection can be completed. By saving and transmitting the completed web page to the database, the web service of the web page is made possible. Even an ordinary person who has no knowledge of programming or coding can not only create the desired web page, but also update and maintain it, such as modification, without coding. We can provide a web page production service providing system using a template editor for front-end development that not only allows you to create various web pages with just drag and drop, but also allows you to easily create a responsive web. . However, the technical challenge that this embodiment aims to achieve is not limited to the technical challenges described above, and other technical challenges may exist.

As a technical means for achieving the above-described technical problem, an embodiment of the present invention includes a user terminal and a front end that execute a template editor for building a web page and generate a web page in the steps of unit, layout, and design. A construction section that separates the unit area, layout area, and design area within the template editor to build a template editor for development. After running the template editor on the user terminal, selecting a unit in the unit area and selecting a layout within the layout area. , an execution unit that outputs the selected unit and layout to the design area, an output that outputs the inserted result when the user terminal inserts at least one content of text, image, photo, and video into the unit and layout placed in the design area. It includes a production service providing server including a unit.

According to any one of the means for solving the problem of the present invention described above, even a non-expert can complete the front-end development of a web page by simply selecting and placing the desired template in the order of unit, layout, and design using a template editor. By saving and transmitting the selected web page to the database, the web service of the web page is possible. Even an ordinary person who has no knowledge of programming or coding can not only create the desired web page, but also provide updates and maintenance such as modification. is possible, and not only can you create various web pages with just drag and drop without coding, but you can also easily create a responsive web.

1 is a diagram illustrating a system for providing a web page production service using a template editor for front-end development according to an embodiment of the present invention.
FIG. 2 is a block diagram illustrating a production service providing server included in the system of FIG. 1.
Figures 3 and 4 are diagrams for explaining an embodiment of a web page production service using a template editor for front-end development according to an embodiment of the present invention.
Figure 5 is an operation flowchart illustrating a method of providing a web page production service using a template editor for front-end development according to an embodiment of the present invention.

Below, with reference to the attached drawings, embodiments of the present invention will be described in detail so that those skilled in the art can easily implement the present invention. However, the present invention may be implemented in many different forms and is not limited to the embodiments described herein. In order to clearly explain the present invention in the drawings, parts unrelated to the description are omitted, and similar parts are given similar reference numerals throughout the specification.

Throughout the specification, when a part is said to be "connected" to another part, this includes not only the case where it is "directly connected," but also the case where it is "electrically connected" with another element in between. . In addition, when a part is said to "include" a certain component, this means that it does not exclude other components, but may further include other components, unless specifically stated to the contrary, and one or more other features. It should be understood that it does not exclude in advance the presence or addition of numbers, steps, operations, components, parts, or combinations thereof.

The terms “about,” “substantially,” and the like used throughout the specification are used to mean at or close to that value when manufacturing and material tolerances inherent in the stated meaning are presented, and are used to enhance the understanding of the present invention. Precise or absolute figures are used to assist in preventing unscrupulous infringers from taking unfair advantage of stated disclosures. The term “step of” or “step of” as used throughout the specification of the present invention does not mean “step for.”

In this specification, 'part' includes a unit realized by hardware, a unit realized by software, and a unit realized using both. Additionally, one unit may be realized using two or more pieces of hardware, and two or more units may be realized using one piece of hardware. Meanwhile, '~ part' is not limited to software or hardware, and '~ part' may be configured to reside in an addressable storage medium or may be configured to reproduce one or more processors. Therefore, as an example, '~ part' refers to components such as software components, object-oriented software components, class components, and task components, processes, functions, properties, and procedures. , subroutines, segments of program code, drivers, firmware, microcode, circuits, data, databases, data structures, tables, arrays, and variables. The functions provided within the components and 'parts' may be combined into a smaller number of components and 'parts' or may be further separated into additional components and 'parts'. Additionally, components and 'parts' may be implemented to regenerate one or more CPUs within a device or a secure multimedia card.

In this specification, some of the operations or functions described as being performed by a terminal, apparatus, or device may instead be performed on a server connected to the terminal, apparatus, or device. Likewise, some of the operations or functions described as being performed by the server may also be performed in a terminal, apparatus, or device connected to the server.

In this specification, some of the operations or functions described as mapping or matching with the terminal mean mapping or matching the terminal's unique number or personal identification information, which is identifying data of the terminal. It can be interpreted as:

Hereinafter, the present invention will be described in detail with reference to the attached drawings.

1 is a diagram illustrating a system for providing a web page production service using a template editor for front-end development according to an embodiment of the present invention. Referring to FIG. 1, a web page production service providing system 1 using a template editor for front-end development includes at least one user terminal 100, a production service providing server 300, and at least one administrator terminal 400. ) may include. However, since the web page production service providing system 1 using a template editor for front-end development shown in FIG. 1 is only an embodiment of the present invention, the present invention is not limitedly interpreted through FIG. 1.

At this time, each component of FIG. 1 is generally connected through a network (Network, 200). For example, as shown in FIG. 1, at least one user terminal 100 may be connected to the production service providing server 300 through the network 200. In addition, the production service providing server 300 may be connected to at least one user terminal 100 and at least one administrator terminal 400 through the network 200. Additionally, at least one manager terminal 400 may be connected to the production service providing server 300 through the network 200.

Here, the network refers to a connection structure that allows information exchange between each node, such as a plurality of terminals and servers. Examples of such networks include a local area network (LAN) and a wide area network (WAN). Wide Area Network, Internet (WWW: World Wide Web), wired and wireless data communication network, telephone network, wired and wireless television communication network, etc. Examples of wireless data communication networks include 3G, 4G, 5G, 3rd Generation Partnership Project (3GPP), 5th Generation Partnership Project (5GPP), Long Term Evolution (LTE), World Interoperability for Microwave Access (WIMAX), and Wi-Fi. , Internet, LAN (Local Area Network), Wireless LAN (Wireless Local Area Network), WAN (Wide Area Network), PAN (Personal Area Network), RF (Radio Frequency), Bluetooth network, NFC ( It includes, but is not limited to, Near-Field Communication (Near-Field Communication) network, satellite broadcasting network, analog broadcasting network, and DMB (Digital Multimedia Broadcasting) network.

In the following, the term at least one is defined as a term including singular and plural, and even if the term at least one does not exist, each component may exist in singular or plural, and may mean singular or plural. This should be self-explanatory. In addition, whether each component is provided in singular or plural form may be changed depending on the embodiment.

At least one user terminal 100 may be a terminal of a user who wants to create a web page using a web page, app page, program, or application related to a web page production service using a template editor for front-end development. The user terminal 100 selects a unit, determines the layout, checks the design of the web page created by the combination of the unit and layout in the design area, and automatically outputs the generated web page when the template is saved and transmitted to the database. It may be a terminal that does.

Here, at least one user terminal 100 may be implemented as a computer capable of accessing a remote server or terminal through a network. Here, the computer may include, for example, a laptop equipped with a navigation system and a web browser, a desktop, a laptop, etc. At this time, at least one user terminal 100 may be implemented as a terminal capable of accessing a remote server or terminal through a network. At least one user terminal 100 is, for example, a wireless communication device that guarantees portability and mobility, and includes navigation, personal communication system (PCS), global system for mobile communications (GSM), personal digital cellular (PDC), PHS (Personal Handyphone System), PDA (Personal Digital Assistant), IMT (International Mobile Telecommunication)-2000, CDMA (Code Division Multiple Access)-2000, W-CDMA (W-Code Division Multiple Access), Wibro (Wireless Broadband Internet) ) It may include all types of handheld-based wireless communication devices such as terminals, smartphones, smartpads, and tablet PCs.

The production service providing server 300 may be a server that provides a web page production service web page, app page, program, or application using a template editor for front-end development. In addition, when building the template editor, the production service providing server 300 selects each unit by dividing the unit area, layout area, and design area, and selects the layout of the unit, the selected unit is displayed on the web with the layout applied. The form shown on the site can be viewed in the design area, and the unit area, layout area, and design area are placed on one page. When moving between each area and modifying or changing the position or shape of the unit, drag and drop is possible. It may be a server that sets up a user interface to do so. In addition, the production service providing server 300 may be a server that reflects when the template editor, such as adding or modifying the type of unit and layout, is modified or updated at the administrator terminal 400, and is sent from the user terminal 100. When a query is input, it may be a server that transmits it to the administrator terminal 400 to process a response to the query.

Here, the production service providing server 300 may be implemented as a computer that can connect to a remote server or terminal through a network. Here, the computer may include, for example, a laptop equipped with a navigation system and a web browser, a desktop, a laptop, etc.

At least one administrator terminal 400 manages the template editor of the present invention using a web page, app page, program, or application related to a web page production service using a template editor for front-end development, and the user terminal 100 It ensures that the web page created by is web hosting, and can be the administrator's terminal to resolve any errors that occur on the web page. Of course, the role of the manager is not limited to those described above.

Here, at least one manager terminal 400 may be implemented as a computer capable of accessing a remote server or terminal through a network. Here, the computer may include, for example, a laptop equipped with a navigation system and a web browser, a desktop, a laptop, etc. At this time, at least one manager terminal 400 may be implemented as a terminal capable of accessing a remote server or terminal through a network. At least one manager terminal 400 is, for example, a wireless communication device that guarantees portability and mobility, and includes navigation, personal communication system (PCS), global system for mobile communications (GSM), personal digital cellular (PDC), PHS (Personal Handyphone System), PDA (Personal Digital Assistant), IMT (International Mobile Telecommunication)-2000, CDMA (Code Division Multiple Access)-2000, W-CDMA (W-Code Division Multiple Access), Wibro (Wireless Broadband Internet) ) It may include all types of handheld-based wireless communication devices such as terminals, smartphones, smartpads, and tablet PCs.

Figure 2 is a block diagram for explaining the production service providing server included in the system of Figure 1, and Figures 3 and 4 are a web page production service using a template editor for front-end development according to an embodiment of the present invention. This is a drawing to explain an implemented embodiment.

Referring to FIG. 2, the production service providing server 300 includes a construction unit 310, an execution unit 320, an output unit 330, a web service initiation unit 340, an archive unit 350, and a code provision unit. It may include (360), a preview unit (370), and an intuitive UI unit (380).

The production service providing server 300 according to an embodiment of the present invention or another server (not shown) operating in conjunction with at least one user terminal 100 and at least one administrator terminal 400 for front-end development. When transmitting a web page production service application, program, app page, web page, etc. using a template editor, at least one user terminal 100 and at least one administrator terminal 400 use a template editor for front-end development. You can install or open web page creation service applications, programs, app pages, web pages, etc. Additionally, a service program may be run on at least one user terminal 100 and at least one administrator terminal 400 using a script executed in a web browser. Here, a web browser is a program that allows the use of web (WWW: World Wide Web) services and refers to a program that receives and displays hypertext written in HTML (Hyper Text Mark-up Language), for example, Netscape. , Explorer, Chrome, etc. Additionally, an application refers to an application on a terminal and includes, for example, an app running on a mobile terminal (smartphone).

Referring to FIG. 2, the construction unit 310 may distinguish a unit area, a layout area, and a design area within the template editor to build a template editor for front-end development. Referring to FIG. 3A, the template editor selects a unit in the left area (Step-1: Units) in the first step, and selects a unit in the center area (Step-2: Layout) in the second step. Select a layout in the area, and in the third step, edit content by inserting content, such as moving content such as photos, videos, and GIFs, text, and images, into the unit or layout in the design area on the right (Step-3: Design). It is configured to be able to do this. The user selects a unit such as an image, text, spacing, slider, fader, etc. in the unit area of the first stage, and in the layout area of the second stage, the layout in which the unit will be included, as shown in FIG. 3e, for example, packaging of goods. It is set to select the same layout, and the results of the units and layout set in the first and second steps are displayed in the design area of the third step. What is displayed in the design area gives the same effect as stacking Lego blocks, for example, showing what each unit and layout will look like on the web page when placed. Once the template editor has been built and set up, the user can now log in and run the template editor to create a web page.

After executing the template editor on the user terminal 100, when a unit is selected in the unit area and a layout in the layout area is selected, the execution unit 320 may output the selected unit and layout to the design area. The user terminal 100 can run a template editor for building a web page and create a web page in the unit, layout, and design stages. At this time, the template editor according to an embodiment of the present invention is a WYSIWYG (What You See Is What You Get) web development tool, is implemented as a web standard, supports all frameworks, and various plug-ins that rely on existing JQuery. may include. At this time, WYSIWYG refers to a method in which words or sentences formatted on the screen appear the same as the output during the editing process, and is distinguished from a method of changing the font or sentence form by entering an editing command. Currently, most word processors use the WYSIWYG method, but HTML and TeX stick to the method of editing using editing commands. This is due to the compatibility and versatility of the document.

In addition, with the template editor of the present invention, various web pages can be created using drag and drop without coding, and events to be executed in the web page results can be simply input, making it possible to create dynamic web pages. In addition, repeatedly used layouts can be registered in the archive, showing the best work efficiency in a template coding environment. At this time, a framework is a tool that helps complete web development quickly. There are two frameworks, front-end and back-end. Front-end frameworks include Bootstrap, Foundation, and Semantic UI, back-end frameworks include Symfony and Ruby on Rails, and languages used include Java, PHP, and Python. . The front-end framework is responsible for the user interface visible to users, and the back-end framework is responsible for the logic and operation of the web.

When the user terminal 100 inserts at least one content of text, image, photo, or video into a unit or layout arranged in the design area, the output unit 330 may output the inserted result. At this time, the inserted result is displayed in the design area as shown in Figure 3d.

The web service initiator 340 may initiate a web service for a web page when the user terminal 100 stores and transmits a web page to a previously established database. When selecting the [Remote Mosa] menu in Figure 3t, the template can be transmitted and stored in the system. At this time, Mosa is the tentative name of the platform of the present invention. A web page may be a page displayed according to the size of the screen based on the Responsive Web. At this time, a responsive web is literally a website that reacts to the screens of various terminals such as desktop, TV, navigation, and mobile terminals. Rather than creating a separate website for each terminal, a single HTML (HyperText Markup Language) source code is used. This refers to a technology that creates a website and displays an optimized layout by automatically responding to the size of the various terminal screens that users access and adjusting the layout of the website.

<Responsive web>

Creating a responsive website requires several common technical elements. ① The first is the Media Query of CSS (Cascading Style Sheets)3, which changes the layout of the styles to be applied to suit the resolution of the terminal. ② The second is the Fluid Grid, and ③ the third technology element is the Fluid Image. Media query, the first technical element of the responsive web, is one of the modules of CSS3 and is a technology that specifies a different CSS file to be applied for each terminal accessing the site. Media queries, unlike other responsive web technologies, have the advantage of being able to be used in multiple browsers, including Internet Explorer 8 and lower, by adding a JavaScript library. The properties of media queries consist of several items such as the type of terminal, horizontal resolution of the web browser, grid and bitmap settings, etc. In the case of media queries, a web page is provided by checking the user terminal status using various properties. However, as the number of values that can determine media query properties such as mobile terminal type and resolution increases, the exact breakpoint (Break point) corresponding to each property has increased. Point) is not displayed.

A breakpoint is a branch point at which different CSS will be applied depending on the screen size when writing a media query. Depending on how you specify this breakpoint, the CSS and screen layout change, but in most cases, it is based on the screen size of the terminal. However, since it cannot reflect all terminals on the market, it is only divided into mobile terminals, tablets, and desktops. Additionally, since mobile terminals have more constraints than other terminals in terms of processing speed and screen size, CSS is created based on the layout of the mobile terminal. Then, more features and styles are added to suit tablets and desktops with better specs and larger screens. Even as many mobile terminals continue to be released, if the standards for properties that use various values are clearly established, the usability of responsive web using media queries can increase in many contents, including spatial information.

The second technical element of the responsive web is the Fluid Grid System. The grid of the fluid grid system can be said to be a grid or a checkerboard. The screen is divided into several basic elements like a checkerboard and then put together to place content, which is called a grid system. At this time, the basic element that divides the screen is called a column. When designing a website, using a grid system allows you to arrange the screens regularly, thus keeping the layout consistent. Therefore, it is easy to create a website and can provide a sense of stability to the viewer. In the Fixed Grid system, the screen is divided depending on how many pixels (PX) the screen width is, and it is also divided depending on how many columns the screen is divided into. This is a method of fixing the width of the screen and arranging elements by dividing columns within that width. If you fix the screen width to a specific value, you can specify the width values of the elements to be displayed within it, and since the width is always displayed consistently, it is easy to create the layout you want.

However, when accessing using various types of terminals, some parts of the website are hidden when accessing from a terminal with a small browser window, so you have to use the scroll bar to move the screen to view it. The floating grid is what solves the limitations of the fixed grid with a fixed width value. This is a method that allows the content width to vary depending on the width of the browser window rather than fixing the screen width to a specific value. This fluid grid is one of the important elements of a responsive web. Liquid grid is a method of calculating the width of each element based on the width of the element surrounding all web content. For example, if the element that surrounds the entire content is called #container, divide the width of each element within #container by the width value of #container and multiply by 100. If the number of digits after the decimal point becomes long, it is better to display only up to five decimal places. After obtaining the width value by calculating the width in the fluid grid, page components such as header, navigation, main content, and sub-content are used in units such as %, which is a relative ratio, rather than fixed pixels (Pixel, PX). . This fluid grid enables variable optimal layout expression depending on the terminal through combination with media queries.

Responsive layout can be divided into five patterns. Mostly Fluid layout is the most widely used, maintaining the layout of the site on most screens except mobile screens, while scaling the content according to the width of the browser window. Just adjust it. On very large screens, blank spaces are left on the left and right to keep the width of the content area constant, and on mobile screens, the content is stacked vertically. The Column Drop pattern is a pattern commonly used in layouts consisting of multiple columns, and is configured so that the columns drop (drop) when the screen width narrows. This pattern also places all columns vertically one by one when the mobile device screen size is adjusted. Where a column falls can be determined based on the screen width or content flow. The Layout Shifter pattern, similar to the column drop pattern, is a form of rearranging the layout by dropping columns according to the screen size. If the column drop pattern is to drop a column down while maintaining the original order, the layout movement pattern is to drop the column without being greatly affected by the order of the columns. Because changing the layout a lot requires more production effort, it is less frequently used than the column drop pattern, but it can give visitors a unique experience because it shows a different appearance depending on the connected device.

The Tiny Tweaks pattern is a method of providing content through slight image modification for each screen device by providing fine modifications to the layout or design to fit the screen by size. Lastly, the Off Canvas pattern refers to a responsive web implementation method that allows only a portion of the content columns by size on the screen to be viewed, allowing users to view the desired portion of content by sliding it. When applying responsive web design to mobile screens, content columns are stacked vertically one by one. Therefore, if there is a lot of content, it may be difficult to fit it all on a small mobile screen. In this case, it is a pattern that hides some content off the screen and makes it appear on the screen only when the user needs it. When creating a responsive website using this layout, you can use a mixture of two or three layouts as needed rather than just using one layout.

The third technical element of responsive web is fluid image. The basic layout of a responsive website is that the width of screen elements increases or decreases depending on the width of the browser window. Then, problems arise when using multimedia elements such as images or videos that have a fixed size in the first place. A floating image is an image whose width and height change depending on the screen width. When inserting multimedia elements such as images into a web document, you must specify width and height values. If no values are specified, they are inserted in their original size. At this time, in order to adjust the width of the image according to the screen width value, CSS is used to specify the image width value as a relative ratio (%), but if it is increased beyond the original size, the image quality will be lost. Therefore, the most basic way to specify a fluid image is to use the Max-Width property to prevent it from expanding beyond the maximum width value. Several problems that may arise when processing fluid images were discovered, the biggest problem being the processing of high-resolution images such as Retina images. There is no major problem with images such as website logos or small icons, but if you reduce the size of a retina-level image and display it on a mobile device, it takes quite a long time to download the image file, even though it appears small on the screen. Even if you use a media query to display large images on desktops and small images on mobile devices, the web browser loads all images included in the website and then hides some images and displays others depending on the device. use. Therefore, from the mobile terminal's perspective, unnecessary Retina image files are loaded.

The advantage of responsive web is that it is not limited by the screen size or resolution of the first terminal. Using responsive web technology, the most appropriate layout is displayed regardless of screen size and resolution on any terminal with a web browser, such as a smart TV or game console, as well as a desktop or smartphone. It responds immediately to changes on the second screen. Even if you rotate the screen orientation horizontally or vertically on a mobile screen, site content is immediately arranged according to that orientation. Even on desktops, if you change the web browser screen size, the website layout changes to match the new screen size. Third, the site address is the same on any device. Responsive websites use a single site address. There is no need to create a separate mobile site address. From a user's perspective, they can synchronize their desktop favorites and use them on multiple devices, and from a developer's perspective, website addresses can be unified and optimized for search engines. Since there is no need to create a separate page for each fourth terminal, there is only one code to manage, making code and content maintenance simple and convenient. In particular, the codes used in responsive web are not complicated as there is no server-side code and only consists of HTML and CSS. Follows the fifth latest web standard. The technologies used in the responsive web consist of HTML and CSS, which have been designated as web standards by W3C, an international web standardization organization, and are supported by major modern browsers.

<Adaptive Web>

If you want to recognize the connected terminal and configure the UI accordingly in more detail, you can use the Adaptive Web proposed by Gustafson rather than the Responsive Web. The adaptive web prepares web page components in a certain state in advance to respond to various environments such as desktops, smartphones, and tablet devices, and provides the corresponding web page when a web service is requested. In other words, while a responsive web is one in which all elements and grids affect each other and change organically depending on device resolution and user preference, an adaptive web expresses various layouts and designs depending on user preference, including resolution. At this time, an embodiment of the present invention can be set as an adaptive web as well as a responsive web.

<Web hosting>

In order to access a web page created in this way, web hosting is required. Hosting refers to data storage space for operating a website and configuring a network infrastructure to provide web services based on that data. Hosting Service is an IDC (Internet Data Center) optimized for customers who have difficulty in establishing and operating their own IT infrastructure due to technical difficulties, cost investment, and the burden of recruiting IT personnel. We rent network and server equipment in a space and, using the support of professional technical personnel, provide basic IT resources so that customers can smoothly use services that suit their needs, such as website operation, corporate business email use, and file server operation. It says service. Once web hosting is completed, the creation of a web page that general customers can access is completed.

When storing a template corresponding to a unit or layout frequently used in the user terminal 100, the archive unit 350 may store the template in the archive. When saving frequently used templates in the archive, users can immediately select and use the unit or layout saved in the archive, or the result of a combination of the two. If you have a frequently used format or unit, you can load it right away without having to combine or place it, making it useful for creating, maintaining, and managing web pages. At this time, when the menu called Archive is selected in Figure 3s, the template completed by the user is saved in the user's archive.

The code provider 360 provides the source code corresponding to the template when viewing or copying the code for a template selected from the unit area and layout area in the user terminal 100 and output to the design area. ) can be printed or copied. As shown in Figure 3k, programming code for the results of the user's selection, arrangement, and insertion of content can be shown, and it can be copied and pasted or saved.

The preview unit 370 generates an event corresponding to the web page to be served when the preview menu is selected for a template selected from the unit area and layout area in the user terminal 100 and output to the design area. You can print the template. If you select the Preview menu as shown in Figure 3m, you can preview the form of the template that will be served on the actual website. Users can view this to determine whether the units, layout, and design they have selected are appropriate and can decide to modify, edit, or leave it as is. Also, when changing the device in the preview state, you can switch modes between the screen displayed on the PC and the screen displayed for mobile.

The intuitive UI unit 380 can be set to use a drag and drop user interface when changing the position or order in the unit area, layout area, and design area on the user terminal 100. When inputting an image as shown in Figure 3j, simply drag and drop it, and when changing the order of the layout as shown in Figure 3g, simply drag and drop the layout to the desired location. Of course, the type of UI is not limited to drag and drop, and it goes without saying that various gestures, motions, and UI can be applied.

Hereinafter, the operation process according to the configuration of the production service providing server of FIG. 2 described above will be described in detail using FIGS. 3 and 4 as an example. However, it will be apparent that the embodiment is only one of various embodiments of the present invention and is not limited thereto.

FIGS. 3A to 4G are diagrams illustrating a template editor according to an embodiment of the present invention, and FIGS. 4H to 4X are screen captures of a video actually demonstrating the template editor according to an embodiment of the present invention, captured at each starting point. , Figures 4y and 4z are photographs of an actual computer screen. When the template editor is executed on the user terminal 100 after logging in, a screen as shown in FIG. 3A is displayed, and a new project (creating a web page) can be started by entering a title, etc. as shown in FIG. 3B. In Figure 3c, units such as image, text, spacing, and slider are provided to add images or text. When an image unit is added as shown in Figure 3D, it is displayed as added in the layout and design area, the layout of the added unit can be determined as shown in Figures 3E and 3F, and the order of the units can be changed in the layout area as shown in Figure 3G. It can be changed, and the changes are reflected in the design area. As shown in Figure 3h, the design area is a preview area, which is a space where the template selected in the unit is shown, as shown in Figure 3i. It can be said to be an area that shows the results of the web page creation along with the process and structure. As shown in Figure 3j, images can be inserted by dragging and dropping, and when inserted, the inserted result is displayed in the design area and can be displayed as a thumbnail in the layout area, etc. You can also insert text, and select the font, size, and color of the text. As shown in Figure 3k, a menu is provided to print or copy the code of the generated web page on the screen, and as shown in Figure 3l, a screen according to PC mode or mobile mode can be output for a responsive web. When previewing as shown in Figure 3m, the results of the selected unit and layout can be output by scrolling down and scrolling up. Of course, if you change the device, it can also be displayed on a PC screen. As shown in Figure 3n, an option to select a category in which to store the template being worked on is provided to enable classification and storage, and when a template is selected as shown in Figure 3o, the selected template can be exposed. As shown in Figure 3p, the saved path, title, category, etc. can be output, and a search window can also be provided in cases where the structure (level, navigation path, depth) of the web page is complex or the number of pages is large. The template editor according to an embodiment of the present invention supports labeling by category as shown in Figure 3q. Each template can be distinguished like a tag, and a description can be input and output together as shown in Figure 3r. Referring to FIG. 3S, the template can be saved and transmitted to the database of the present invention to create a web page, and the generated template can be edited as shown in FIG. 3T. Frequently used templates can be stored as shown in Figure 3u, and a table of contents structured such as the navigation path, level, and depth of a web page can be provided as shown in Figure 3v. Labels are provided to distinguish each page or template as shown in Figures 3W to 4A, web pages can be distinguished by creating categories as shown in Figures 4B and 4C, and templates can be registered as shown in Figures 4D and 4E. It may be possible. As shown in Figure 4f, at the start, a solution (tentative name, Mosa) according to an embodiment of the present invention may be introduced, and may have the same rate plan as shown in Figure 4g, but this may vary depending on the embodiment, so it is not limited thereto. No. Figures 4h to 4x are examples demonstrating each of the above-described functions in order, so detailed descriptions are omitted.

What is not explained about the method of providing web page production services using a template editor for front-end development in FIGS. 2 to 4 is the method of providing web page production services using a template editor for front-end development through FIG. 1. Since it is the same as the content described or can be easily inferred from the content described, the description below will be omitted.

FIG. 5 is a diagram illustrating a process in which data is transmitted and received between components included in the web page production service providing system using the template editor for front-end development of FIG. 1 according to an embodiment of the present invention. Hereinafter, an example of the process of transmitting and receiving data between each component will be described with reference to FIG. 5, but the present application is not limited to this embodiment, and the process shown in FIG. 5 according to the various embodiments described above It is obvious to those skilled in the art that the process of transmitting and receiving data can be changed.

Referring to FIG. 5, the production service providing server divides the unit area, layout area, and design area within the template editor to build a template editor for front-end development (S5100).

Then, the production service providing server executes the template editor on the user terminal, and when a unit is selected in the unit area and a layout in the layout area is selected, the production service providing server outputs the selected unit and layout to the design area (S5200), and the user terminal When at least one content of text, image, photo, and video is inserted into the unit and layout placed in the design area, the inserted result is output (S5300).

The sequence between the above-described steps (S5100 to S5300) is only an example and is not limited thereto. That is, the order between the above-described steps (S5100 to S5300) may change, and some of the steps may be executed simultaneously or deleted.

What is not explained about the method of providing a web page production service using a template editor for front-end development in Figure 5 is the method of providing a web page production service using a template editor for front-end development through Figures 1 to 4. Since it is the same as the content described or can be easily inferred from the content described, the description below will be omitted.

The method of providing a web page production service using a template editor for front-end development according to an embodiment described in FIG. 5 includes a recording medium containing instructions executable by a computer, such as an application or program module executed by a computer. It can also be implemented in the form of . Computer-readable media can be any available media that can be accessed by a computer and includes both volatile and non-volatile media, removable and non-removable media. Additionally, computer-readable media may include all computer storage media. Computer storage media includes both volatile and non-volatile, removable and non-removable media implemented in any method or technology for storage of information such as computer-readable instructions, data structures, program modules or other data.

The method of providing a web page production service using a template editor for front-end development according to an embodiment of the present invention described above includes applications installed by default on a terminal (this includes programs included in the platform or operating system, etc., installed by default on the terminal). may be executed), and may be executed by an application (i.e., program) installed directly on the master terminal by the user through an application providing server such as an application store server, an application, or a web server related to the service. In this sense, the method of providing a web page production service using a template editor for front-end development according to an embodiment of the present invention described above is implemented as an application (i.e., program) installed by default on the terminal or directly installed by the user. It may be recorded on a computer-readable recording medium such as a terminal.

The description of the present invention described above is for illustrative purposes, and those skilled in the art will understand that the present invention can be easily modified into other specific forms without changing the technical idea or essential features of the present invention. will be. Therefore, the embodiments described above should be understood in all respects as illustrative and not restrictive. For example, each component described as single may be implemented in a distributed manner, and similarly, components described as distributed may also be implemented in a combined form.

The scope of the present invention is indicated by the claims described below rather than the detailed description above, and all changes or modified forms derived from the meaning and scope of the claims and their equivalent concepts should be construed as being included in the scope of the present invention. do.

Claims (7)

A user terminal that runs a template editor to build a web page and creates a web page through unit, layout, and design steps; and
A construction unit that divides the unit area, layout area, and design area within the template editor to build a template editor for front-end development; after executing the template editor on the user terminal, a unit is selected from the unit area and the layout When selecting a layout within an area, an execution unit that outputs the selected unit and layout to the design area, and inserts at least one content of text, image, photo, and video into the unit and layout placed in the design area from the user terminal. In this case, an output unit that outputs the inserted result, a web service initiator that initiates a web service for the web page when the user terminal stores and transmits the web page to a pre-established database, and the unit in the user terminal. A production service that includes a code provider that outputs or copies the source code corresponding to the template from the user terminal when viewing or copying the code for the template selected from the area and layout area and output to the design area. Including the provision server,
When the user selects and sets image, text, spacing, slider, and fader units in the unit area in the executed template editor, and selects and sets a layout to be included in the unit area in the layout area, The set result is displayed in the design area, and the web page is displayed according to the size of the screen based on a responsive web or an adaptive web created by drag and drop, and the responsive web uses media queries, fluid grids, etc. , and floating images, and the applicable web uses a template editor for front-end development, characterized in that web page components are prepared in advance in a certain state and the corresponding web page is provided when a web service is requested. A web page production service provision system.
delete delete delete delete According to claim 1,
The production service providing server is,
a preview unit that outputs an event template corresponding to a web page to be served when a preview menu is selected for a template selected from the unit area and the layout area and output to the design area in the user terminal;
A web page production service providing system using a template editor for front-end development, further comprising:
According to claim 1,
The production service providing server is,
An intuitive UI unit that sets the user terminal to use a drag and drop user interface when changing the position or order of the unit area, layout area, and design area;
A web page production service providing system using a template editor for front-end development, further comprising:

Images