System and method for converting web content into reusable templates and components

Abstract

The present disclosure relates to systems and methods for converting web content into reusable templates and components. As disclosed embodiments provide a what-you-see-is-what-you-get (WYSIWYG) editor for web content that enables previously produced web content to be converted into reusable templates or components. Among other advantages, embodiments thus enable users such as web content developers to easily change the purpose of or reuse previously developed pages or content by giving these users the ability to review and edit previously developed pages or content in the WYSIWYG editor.

Description

[0001] This application is a divisional application of the patent application filed on December 20, 2017, entitled "System and method for converting web content into reusable templates and components", with international application number PCT / US2017 / 067680 and national application number 201780085356.1.

[0002] Related applications

[0003] This application claims priority to U.S. Provisional Patent Application No. 62 / 437,155, filed December 21, 2016, entitled “SYSTEMS AND METHODS FOR CONVERSION OF WEB CONTENT INTO REUSABLE TEMPLATES AND COMPONENTS”, filed by inventors Khare et al., 35 U.S.SC §119, the entire contents of which are hereby incorporated herein by reference for all purposes. Technical Field

[0004] This disclosure generally relates to the management and development of web content. More specifically, this disclosure relates to embodiments of systems and methods for creating reusable templates and components for web content management and development. More specifically, this disclosure relates to embodiments of systems and methods for transforming existing web content into reusable templates and components. Background Technology

[0005] Since the advent of the internet, websites have steadily and gradually become more complex, containing an ever-expanding amount of increasingly sophisticated content. However, website developers expect a consistent look and feel across their entire sites. Therefore, a significant amount of time may be spent by web content developers ensuring that website pages or other content have a consistent look and feel (or design). In many cases, this work may be repetitive. The amount of code or time required to make a page or its content conform to a consistent look or feel may be similar to the amount of code or time required to make another page or its content conform to that look or feel.

[0006] Not only is there some duplication of work on multiple pages, but it also introduces variation in the look and feel of those pages simply because of the fact that multiple web content developers may be working on the site. Multiple web content developers introduce their own inconsistencies into the various pages and content they develop (e.g., in terms of look or feel or implementation relative to those developed by other web content developers).

[0007] In some cases, the added challenge is that these pages and content may have to be (re)developed across various platforms. Thus, for example, a web content developer might create a page or other content for a specific platform (e.g., a desktop browsing environment) with the desired look and feel. The web content developer (or another developer together) may then have to create a separate version of that page or content for another platform (e.g., a mobile browsing environment), or edit the page or content so that it can be displayed appropriately on the second platform (e.g., according to the desired look and feel).

[0008] Therefore, there is a desire for an improved way of developing web content. Summary of the Invention

[0009] In light of the foregoing, it is understood that a particular expectation is to allow web content developers to change the purpose of previously developed pages or content or to reuse previously developed pages or content, including reusing these pages or content to develop subsequent pages or content, in which case these pages or content can even be deployed across different platforms.

[0010] More specifically, the goal is to give users the ability to review and edit previously developed pages or content, to select or edit the components they wish to use in that previously developed content, as well as the layout and presentation of the content for reuse, so that the content of the previously developed content can be reused according to the user's desired look and feel. It is also expected that users will be able to perform this editing and review process in an easy and simple way, whereby users can easily see the content of previously developed pages, such as with a WYSIWYG editor.

[0011] Such a solution is technically difficult. As mentioned, it might be preferable to visually present the actual content within an editor, allowing users to edit or select the visually presented content for reuse. However, presenting content within an editor hinders the editor's (or other computer program or software's) ability to identify, select, parse, or otherwise process the actual content to be reused, at least because it may be difficult to identify or process the relevant code expected to be reused.

[0012] Furthermore, users of content editors must be given the ability to interact with the presented content (e.g., select the presented content) to select and edit such content for reuse. However, in many cases, users must be prevented from interacting with the underlying functionality of the presented content during the editing or selection process. For example, a user might want to select or edit presented content for reuse. If the content contains links, it might be desirable to disable or prevent users from selecting or activating those links during the editing or selection process.

[0013] To address the aforementioned problems, among other things, attention is now focused on embodiments of the systems and methods for web content development disclosed herein. Specifically, embodiments of the disclosed web content development platform can provide the ability to transform previously generated web content into templates or components that can subsequently be reused to generate web pages or other content for a website provider's site. In particular, embodiments can ingest Hypertext Markup Language (HTML) content and transform the HTML content into reusable components and templates.

[0014] It will be understood that, according to the embodiments described herein, content in other formats can be ingested and converted in the same way. For example, Photoshop document (e.g., PSD) content can be ingested and converted into reusable components and templates. In a particular embodiment, a preprocessor can be applied to certain types of content (such as PSD content) to convert such content into HTML. This resulting HTML can then be converted into reusable components and templates as discussed herein. Such preprocessing may be invisible to the user, such that any preprocessing of certain types of content (e.g., PSD content) is not visible to the user, and the user only perceives that the provided content (e.g., PSD content) has been converted into reusable components and templates.

[0015] In one particular embodiment, an HTML document can be converted into a template for use with OpenText's ExperienceStudio for TeamSite product. The HTML can be processed to identify elements within it, and these elements are saved as components defined by OpenText's LiveSite product. These components can be rendered and presented to the user along with an editor in a WYSIWYG interface. The user can use the WYSIWYG interface to select, modify, delete, or accept components. When the user is finished, the selected or accepted (used interchangeably below) components are saved to a template reflecting the accepted components and their layout. This template can then be used to create subsequent pages.

[0016] In one embodiment, a web content development platform may include a processor and data storage, and be coupled to one or more user devices via a network. The web content development platform may store an editor with an instruction set, which includes browser-executable instructions on the user device to implement the editor. The web content development platform may provide an editor to the user device, in which the editor can be executed by a browser. The editor, executed on the browser at the user device, can receive HTML from the user and render the HTML in the browser executing the editor to present the rendered HTML in the browser.

[0017] The editor can then identify HTML elements and evaluate these identified elements to determine their individual characteristics. Each identified element can be evaluated based on the tags associated with it to determine if it is an individual element. The editor can also create components for each of the identified individual elements by: identifying the component type of the individual element based on the HTML associated with it; creating a component of the identified component type; and populating the created component with data from the corresponding individual element's HTML. The created components can be identified in the rendered HTML presented in the browser, and it can be determined when the user has accepted the identified components. The editor can then create a template that includes the identified components at a web content development platform.

[0018] In some embodiments, rendering HTML is achieved by the editor injecting the received HTML into the editor's instructions so that the received HTML is rendered in the browser in association with the browser's execution of the editor.

[0019] In a particular embodiment, the editor’s instructions include instructions associated with a recognition pattern, and recognizing HTML elements includes: obtaining a document object model (DOM) associated with the rendered HTML from the browser executing the editor, and recognizing all elements in the DOM that are not scripts, links, or style tags and do not have a recognition pattern associated with the editor’s instructions.

[0020] In other embodiments, creating a template includes inserting the identified components into the template according to the grid layout by assigning each of the identified components to a segment of the grid layout based on the position of the identified components in the layout rendered in the browser.

[0021] In one embodiment, components created for individual elements are maintained by an editor in the browser on the user's device.

[0022] In a particular embodiment, the component type is a basic image component type, a basic content component type, or a basic embedded HTML component type.

[0023] In some embodiments, a corresponding mask is created for each created component, and the created component is identified by the editor rendering the corresponding mask in the browser executing the editor.

[0024] The embodiments can therefore have the technical advantage of enabling WYSIWYG rendering of content in an editor (e.g., a browser-based editor) and allowing content to be selected or edited for reuse through template creation. This technical advantage is at least partly achieved through the editor's ability to distinguish between editor instructions and user-provided HTML content, even when the editor is rendering content in the exact same browser. Moreover, this advantage is possible through the use of components maintained by the editor on the user's device while these components are being rendered and edited or selected by the user. These components can then be stored at a web content development platform or used to create templates at the web content development platform. Additionally, this advantage can be achieved through rules or conditions used to evaluate HTML elements or tags to determine individual elements, component types, or other specific criteria.

[0025] These and other aspects of this disclosure will be better appreciated and understood when considered in conjunction with the following description and accompanying drawings. However, it should be understood that while the following description indicates various embodiments of the disclosure and many specific details thereof, it is given by way of illustration and not by way of limitation. Many substitutions, modifications, additions and / or rearrangements can be made within the scope of this disclosure without departing from its spirit, and this disclosure includes all such substitutions, modifications, additions and / or rearrangements. Attached Figure Description

[0026] The accompanying drawings, which accompany and form a part of this specification, are included to illustrate certain aspects of the invention. A clearer impression of the invention, and the components and operation of the systems provided by the invention, will become more readily apparent by referring to the exemplary and therefore non-limiting embodiments illustrated in the drawings, wherein like reference numerals designate like components. Note that the features illustrated in the drawings are not necessarily drawn to scale.

[0027] Figure 1 It is a diagrammatic representation of the architecture used for web content development.

[0028] Figure 2 This is a flowchart of an embodiment of a method for creating reusable templates from HTML.

[0029] Figure 3 This is a flowchart of an embodiment of a method for identifying and creating components.

[0030] Figure 4 This is a flowchart of an embodiment of a method for presenting components and creating templates in an editor interface.

[0031] Figure 5 This is a flowchart of an embodiment of a method for inserting components into a template according to a layout.

[0032] Figure 6 This is an example of a screen capture used to render a sample HTML file.

[0033] Figure 7 This is an example of a screenshot of the editor interface used with the sample HTML file.

[0034] Figure 8-10 This is an example of a screenshot of the editor interface used with the sample HTML file.

[0035] Figure 11 This is an example of a screenshot of a template preview. Detailed Implementation

[0036] The invention and its various features and advantageous details are explained more fully with reference to the non-limiting embodiments illustrated in the accompanying drawings and detailed in the following description. Descriptions of well-known original materials, processing techniques, components, and apparatus are omitted so as not to unnecessarily obscure the details of the invention. However, it should be understood that the detailed description and specific examples, while indicating some embodiments of the invention, are given merely as illustrative purposes and not as limitations. Various substitutions, modifications, additions, and / or rearrangements of the spirit and / or scope of the basic inventive concept will become clear to those skilled in the art from this disclosure.

[0037] Before exploring further details regarding the specific embodiments disclosed herein, some brief background may be helpful. As discussed above, it is desirable to allow web content developers to change the purpose of previously developed pages or content or to reuse previously developed pages or content, including reusing these pages or content to develop subsequent pages or content, in which case these pages or content can even be deployed across different platforms. It is also desirable to give these web content developers the ability to easily and simply review and edit previously developed pages or content, to select or edit the components of the previously developed content that they wish to use, thereby allowing users to easily view the content of previously developed pages, such as the WISYWIG editor.

[0038] For these purposes, among other things, attention is now focused on embodiments of the systems and methods for web content development disclosed herein. Specifically, the disclosed embodiments can transform previously generated web content into templates or components that can subsequently be reused to generate web pages or other content for a website provider's site. Specifically, the embodiments can ingest one or more Hypertext Markup Language (HTML) contents and transform the HTML content into reusable components and templates.

[0039] In one particular embodiment, an HTML document can be converted into a template for use with OpenText's ExperienceStudio for TeamSite product. The HTML can be processed to identify elements, and these elements are saved as components defined by OpenText's LiveSite product. These components can be rendered and presented to the user along with an editor in a WYSIWYG interface. The user can use the WYSIWYG interface to modify, delete, or accept components. When the user is finished, the accepted components are saved to a template reflecting the accepted components and their layout. This template can then be used to create subsequent pages.

[0040] Figure 1 This describes an embodiment of the architecture of a web content development platform 100 coupled to one or more user devices 122 via a network 130. The web content development platform 100 may be part of, or include, a web content management system (such as, for example, OpenText's Experience Studio for TeamSite product). The network 130 may be the Internet, an intranet, a wireless or wired network, a LAN, a WAN, or some combination of these types of networks. Such a web content platform 100 may be deployed on an enterprise's internal server computer (sometimes referred to as "hosted on-premises"), hosted externally, hosted on one or more virtual servers, or hosted or deployed on a cloud-based computing platform (such as Amazon Elastic Compute Cloud, Google Cloud Platform, Microsoft Azure, etc.).

[0041] Web content development platform 100 allows web content developers at device 122 to build, edit, review, publish, or perform other tasks associated with the management, creation, editing, publishing, or deployment of web content. Specifically, according to some embodiments, web content development platform 100 may allow these web content developers to define components 168 and templates 172 that can be used to implement a website or define content for a website. As an example, component 168 may be a component defined by Open Text's LiveSite product.

[0042] These components 168 and templates 172 can be XML files or portions thereof, as well as associated metadata defining the content and appearance of at least a portion of a website. Components 168 can be discrete, multiple functionalities used in a website or webpage, such as navigation menus, areas of dynamic or static content, web applications, etc. They are building blocks from which pages (or templates) are created.

[0043] Specifically, in one embodiment, each component 168 is associated with content and appearance. Component 168 may be an XML document or section (e.g., a fragment or part of an XML document) having sections or tags that define the content (e.g., the actual content the component will render) and appearance of the component 168, or references to one or more external sources or locations (outside of component 168) where the content or appearance definition may be placed.

[0044] The segments section of component 168 can have appearance configurations, and the data section below the segment section of the component XML stores the actual data to be rendered. Specifically, data or "data" fields or tags within component 168 can contain the content to be rendered. The appearance of component 168 can be controlled using Extensible Stylesheet Language (XSL) or tokenized HTML, along with Cascading Style Sheets (CSS). Therefore, in some embodiments, component 168 can have two rendering modes / skins—either a default HTML or XSL rendering mode.

[0045] The stylesheet section in a component's XML provides information about how the component will be rendered. The default stylesheet section within a component (e.g., if no other stylesheet exists or is referenced) can be used to render the component as HTML.

[0046] Template 172 can be an XML document, which can be defined as a predefined page or page fragment including one or more components 168. Template 172 can, for example, embed the included components 168 into a grid layout (such as a grid layout defined by a bootstrap grid system or a base grid system) or associate the included components 168 with a grid layout. These templates 172 can be used to apply a common set of components (such as navigation C-frames) across many pages. For example, multiple web pages can be created from template 172 that already includes a set of desired components 168 (e.g., header, footer, navigation components). For each of these multiple pages, the web developer may only need to add appropriate additional content for that specific page.

[0047] Pages created using web content development platform 100 can be deployed to a live website using a runtime engine or a suitable web server. Pages generated from template 172 can be rendered dynamically, for example, by a runtime engine. If the website or parts thereof are static, web pages (e.g., HTML, etc.) can be generated from the page or template 172, and these generated web pages are deployed to the website's runtime environment.

[0048] The web content development platform 100 can therefore provide web content developers with various interfaces or means through which they can generate components 168 or templates 172. As discussed above, it may be particularly desirable to allow web content developers to modify the use of previously generated web pages or sets of web pages and associated content, style definitions, etc. Thus, in the context of the web content development platform 100, it would be desirable to enable such existing web pages to be converted into components 168 and templates 172 for use with the web content development platform 100.

[0049] Therefore, among other things, the web content development platform 100 includes an HTML to template editor (or just an editor) 102 and a corresponding HTML to template interface (or just an interface) 104.

[0050] The operation of the embodiments of editor 102 and interface 104 can also be referred to Figure 2To better illustrate, the HTML-to-template editor 102 may be a browser-based editor capable of rendering and manipulating within a browser 124 (such as those known in the art, including, for example, Internet Explorer, Chrome, Firefox, Safari, Opera, etc.). In one embodiment, editor 102 may be written in HTML and JavaScript (e.g., jQuery) such that it can be rendered by browser 124 and utilize JavaScript (e.g., jQuery) to query the Document Object Model (DOM) associated with the content rendered by browser 124 at device 122. Other implementations of editor 102 are possible and are fully contemplated herein. For example, while jQuery is a well-known cross-platform JavaScript library and can therefore be conveniently utilized in some embodiments, other embodiments may utilize other types of libraries or code (whether JavaScript or otherwise) to produce the same functionality.

[0051] To distinguish between elements in the HTML template editor 102 and elements in the DOM that are rendered content unrelated to the editor 102, the elements, CSS classes, or element identifiers of the editor 102 can be given special modes (also known as identification modes). For example, they can be tagged or otherwise given special modes including "html-as-template" (such as "identifier-import-html-as-template") (e.g., CSS modes).

[0052] The HTML to template editor 102 can be downloaded by a user at device 122 and executed or rendered in browser 124. For example, a user can access web content development platform 100 through his browser 124 (e.g., at a specific URL). When a user is presented with an interface by web content development platform 100, the user may be presented with the opportunity to select HTML to template editor 102, at which point editor 102 is sent to the user's browser 124, where it is rendered or executed (in this context, "browser" is used interchangeably).

[0053] When editor 102 is executed in browser 124, it can provide an interface within browser 124 through which a user can submit one or more HTML documents that will be converted into templates or components. In some embodiments, the user can provide the location of one or more HTML files and their associated dependencies (e.g., image source files, style sheets, etc.) through the HTML-to-template editor 102 interface. In one embodiment, editor 102 can provide a drag-and-drop interface through which the user can drag and drop these HTML files into the interface. For example, the HTML files and their associated dependencies can be packaged in a .zip file, which is dragged and dropped into the interface of editor 102.

[0054] HTML files can be uploaded to the web content development platform 100 by editor 102 through one or more calls to interface 104 provided by the web content development platform 100. When the HTML file is received at the web content development platform 100 via the HTML-to-template interface 104, the HTML file can then be stored in the data storage 160 of the development platform 100. Additionally, editor 102 at browser 124 can also access user-specified files when a user instructs that such an HTML file should be converted into a template. In one embodiment, editor 102 can obtain an HTML file (or a portion thereof) by calling interface 104 of the web content development platform 100 for obtaining HTML files (e.g., files, initially uploaded .zip files, etc.). In another embodiment, editor 102 can retain copies of user-provided HTML (or other) files when they are uploaded to the web content development platform 100.

[0055] To illustrate an example that might be useful in this article, users can drag a file called "simple.zip" into the interface provided by editor 102. This file contains a document titled "simple.html" with the following HTML:

[0056]

[0057] Therefore, the simple.html file contains three items: a div with the text "This should be identified as basic content"; a div with an img tag; and a footer with a div containing the text "This is the footer@Copyright my company". smple.zip may also contain a folder called "simple_dependencies", which contains an image file called "Desert.jpg". Figure 6 The text describes a rendering view of the contents of such a simple.zip file (e.g., rendered by a browser 124) (e.g., the rendering of the "simple.html" file and "Desert.jpg").

[0058] Editor 102 can therefore obtain the HTML and dependencies from the provided file (step 210), for example, by unzipping the provided .zip file. The HTML can then be rendered by editor 102 at browser 124 using the dependencies (e.g., provided in the .zip file) (step 220). Because editor 102 is itself an HTML-based editor, editor 102 can use JavaScript (such as jQuery) to inject the obtained HTML into browser 124 to render the HTML content associated with editor 102.

[0059] Elements in the rendered HTML can then be identified by editor 102 (step 230). Specifically, in one embodiment, editor 102 can access the DOM (e.g., using jQuery, etc.) and identify elements in the rendered HTML based on the tags of the elements (e.g., those elements with tags that do not have a special identifier or CSS pattern associated with editor 102). The identified elements can then be used to create components (step 240). These components can be created by evaluating the identified elements to determine which elements should be independent elements. Once independent elements are identified, editor 102 can create components 169 for these elements. These components 169 can be simple JavaScript objects maintained by editor 102 on user device 122 at this time.

[0060] Alternatively, in one embodiment, editor 102 can create a component for an independent element by identifying the element as a specific component type and requesting the creation of a component of that type via interface 104 of web content development platform 100. This request may include data required by the component (e.g., HTML data, stylesheet data, etc.). Web content development platform 100 can obtain a component definition 164 for the component type and use the appropriate component definition 164 as the basis for creating the component by saving a copy of component definition 164 as a component and populating the XML of the created component.

[0061] Component definition 164 may include definitions for one or more types of components. These component types may be basic image component types, basic content component types, and basic embedded HTML component types. For a type, component definition 164 may include XML for each component of that type that will be included or otherwise defined.

[0062] Therefore, in order to create component 168, component definition 164 can be saved as component 168 and populated with data associated with the corresponding element in the ingested HTML (e.g., user-provided HTML associated with the identified element). Each of component types 164 can have a data field (or tag) that can be populated in the associated component of that type based on the corresponding (e.g., identified) element being used to create the component.

[0063] Specifically, in one embodiment, component 168 may have two rendering modes / skins as discussed, with either a default HTML or XSL rendering. The "Stylesheet" section in the component XML provides information about how component 168 will be rendered. The stylesheet marked as the default in component 168 is used to render the component as HTML. The "Segments" section in the component XML has appearance configurations, and the "Data" section below the "Segments" section stores the actual data to be rendered. For example, a basic image component type may be given data called IMGSRC, where image tags including the path to the image for the component and a description may be included; a basic content type component may include data named CONTENT, where text for the component may be included; and a basic embedded HTML component type may include data called HTML, where text for the component (such as HTML) may be included. Examples of XML for these components are given in Appendix A.

[0064] Once components (e.g., components 169 or 168) have been created for the identified individual elements (step 240), editor 102 can render (or identify) these components in the interface provided by editor 102 through browser 124 by rendering or recognizing the data or information of the created components (step 250). These components can be rendered, for example, by intercepting events associated with the display of browser 124 and providing them to editor 102 in conjunction with an overlay that prevents the user from interacting with the underlying content of the rendered components (e.g., clicking links, etc.).

[0065] Users are thus given the ability to accept, delete, or edit presented components through the interface of editor 102 displayed in browser 124. If a user edits a presented component, the data or information of the edited component (e.g., component 169) changes accordingly, and component 169 is displayed back through the interface of editor 102 so that the current state of component 169 is reflected in the interface of editor 102.

[0066] Alternatively, in one embodiment, editor 102 can edit component 168 by requesting it to be edited via interface 104 of web content development platform 100. This request may include data required to edit the component (e.g., HTML data, stylesheet data, etc.) (e.g., instructions to be executed). Web content development platform 100 can then obtain the appropriate component 168 and edit it accordingly.

[0067] Once the user has accepted all the components currently presented in the interface of editor 102, a template 172 containing these components 168 can be created (step 260). In particular, the presented components can be stored in template 172, where they are organized according to the grid layout of template 172 (e.g., bootstrap grid layout or base grid layout) (step 270).

[0068] In one embodiment, editor 102 can create template 172 through one or more requests to interface 104 of web content development platform 100. The request may include data (e.g., HTML data, stylesheet data, component identifiers, etc.) required to create template 172 and its associated components 168. Web content development platform 100 can obtain template definition 162 for the template and use it as the basis for creating template 172 by saving a copy of template definition 162 as template 172. The XML of the created template 172 can then be populated with data associated with the identified components 168 (e.g., HTML, CSS, etc.). Then, as discussed above, for each accepted component (e.g., a component accepted by the user in the interface of editor 102), the corresponding component 168 can be created in template 172 by determining the corresponding component definition 164 and populating template 172 with the XML of component definition 164. This XML included in template 172 can then be populated with data associated with the corresponding component (e.g., component information can be populated, etc.) to create component 168.

[0069] The operation of the embodiment of HTML to template editor 102 can be referred to Figure 3 and Figure 4 To explain better. First, let's look at... Figure 3 The diagram depicts a flowchart of one embodiment of a method for identifying components based on HTML rendered by an editor application. As discussed above, when a user (e.g., in a .zip file as discussed above) provides HTML (and dependencies), the provided HTML can then be rendered by the editor. Because the editor itself is an HTML-based editor, the editor can use jQuery, etc., to inject the received HTML into the browser to render the HTML content associated with the editor. For example, in one embodiment, the editor can write the received HTML into the editor's HTML so that the browser renders both the editor and the received HTML (e.g., renders the received HTML in the context of the editor).

[0070] Specifically, in one embodiment, once the HTML is injected into the browser, the editor can obtain the DOM (e.g., from the browser in which it is executing using jQuery, etc.) (step 310) and process the DOM to identify elements based on the tags of the elements in the rendered HTML (step 320). Specifically, the HTML can be inspected by traversing the entire DOM and identifying all visible elements that are not scripts, links, or style tags, and that do not have CSS classes or identifiers (e.g., "identifier-import-html-as-template") with a special pattern associated with the editor. In this way, elements in the DOM from the HTML (e.g., provided by the user) and elements from the editor itself can be distinguished.

[0071] For example, the following HTML snippet shows an example overlay div that the editor can create for recognized components. These masks can be used, for example, as transparent overlays to prevent the user from interacting with the rendered components. Therefore, although these can be created at a later time (e.g., later than the initial element recognition from the DOM), these types of page elements (e.g., those with "class="identifier-import-html-as-template") will not be recognized as part of the provided and rendered HTML.

[0072] <div data-identifier-view＝"mask”data-identifier-role＝"mask-insert-after”class＝"identifier-import-html-as-template”style＝"position：fixed；top：0；left：0；width：100％；height：100％；background：transparent；z-index：1999999999；”>

[0073] The identified elements (e.g., identified from the DOM) can then be processed to identify which elements (e.g., which fragments of HTML) are considered components (step 330). For example, the identified elements can be evaluated according to one or more rules to determine which fragments of HTML can be considered components. These rules can include, for example, preset conditions that the editor looks for to determine which fragments of HTML can be considered components. These can include minimum or maximum width or height, or maximum number of children. Other rules or conditions are also possible. The values ​​of these conditions can be defined by the user or administrator of editor 102.

[0074] For example, in one embodiment, these rules or conditions are set to the following values:

[0075] minimum width - 40px

[0076] Maximum width -999999, / / Defaults to "unbounded"

[0077] minimum height -20px

[0078] οMaximum height - 600px

[0079] οMaximum offspring - 7

[0080] Therefore, for each page element identified from DOM processing (step 320), editor 102 uses outerWidth, outerHeight, and sub-calls of jQuery to calculate the width, height, and number of children. The list of page elements can then be evaluated. For each page element in the list, it can be determined whether the height is greater than the maximum configured height, or the width is greater than the maximum configured width, or the number of children is greater than the maximum configured number of children (step 332). If none of these conditions are met, then if the number of children is zero or the element is an image, the element is identified as a component (e.g., a standalone component) (step 334). Whether an element is an image can be verified as such by returning a drawing of the image data of a given jQuery element if it is an image or has a background image of at least 10×10 pixels.

[0081] However, if an element is not a child of the image being identified (step 334), then the element is larger than the configured maximum value and should be further decomposed. The elements of the identified element (e.g., child elements) are identified, and these elements are added to the element list for evaluation (step 360). In one embodiment, the same method can be recursively called using page elements identified from that element.

[0082] If the element's size is less than or equal to the configured maximum size, and the number of its children is less than or equal to the maximum number of children (step 332), then it can be determined whether the size is greater than or equal to the minimum size (step 340). If so, the element is identified as a component (e.g., a standalone component) (step 350). In one embodiment, for example, if the element's width is greater than or equal to the configured minimum width, and the element's height is greater than the configured minimum height, it means that the current element is within the configured minimum and maximum width and height, and is marked as a component. For example, in simple html, this page element is identified as a component.

[0083]

[0084] This should be identified as basic content

[0085]

[0086] Once a component is identified, it is then created using the HTML element. For example, component information (e.g., HTML or stylesheet data for the component) is stored locally in a JavaScript array. The component type can then be identified (step 380). In one embodiment, component category information is collected; if it is an image element, the component is identified by the editor as a basic image component type. If the element is simply plain text, rather than one of an enumeration of common HTML elements (such as div, table, header, footer, or other configurable HTML element identifiers or elements), the component is categorized by the editor as a basic content component type. Otherwise, the element is categorized by the editor as a basic embedded HTML component type.

[0087] Once the component type of the identified element is determined, a component for that element can be created (step 390). Specifically, in one embodiment, the JavaScript component can be created and maintained at the editor 102 on the user device. Specifically, the JavaScript component can be stored locally by the editor 102 in a JavaScript array.

[0088] Alternatively or additionally, components can be created at the web content development platform via one or more requests from editor 102. Component creation can therefore involve obtaining a component template for that component type and saving it as a component. The component's fields can be populated with HTML, text, image sources, stylesheet information, or other data from elements.

[0089] Regarding simple.html, if the example is processed according to an embodiment of the method described, the three components will be identified as follows and stored along with the information.

[0090] Components: 0

[0091] Component type:

[0092] HTML:

[0093] This should be identified as basic content

[0094]

[0095] Information: This should be identified as basic content.

[0096] Component: 1

[0097] HTML:

[0098] <img src＝"simple_dependencies Desert.jpg”style＝"visibility:visible；width:250px”>

[0099]

[0100] Data: Image path:

[0101] "http: / / 16.103.1.155 / iw / cci / meta / no-injection / iw-mount / default / main / sampada / WORKAREA / default / importHTML / site1 / simple_dependencies / Desert.jpg"

[0102] Components: 2

[0103]

[0104] Once the ingested HTML components have been identified and created by editor 102, editor 102 can present the identified components to the user in the editor's interface for editing or inclusion in a template. Specifically, in one embodiment, editor 102 can create a corresponding mask for each of the created components, where the mask is intended to overlay the corresponding component in the editor's rendered interface. The mask is associated with editor 102 and is transparent, allowing the user to see the underlying HTML components but preventing the user from interacting with the corresponding component's HTML.

[0105] Furthermore, the mask can identify components (e.g., by tracing the outline of the identified components) and includes a menu associated with the corresponding component and editor 102, allowing the user to accept, delete, or edit the underlying component. If the user edits the underlying component, the corresponding component's data can be changed by editor 102, and the component is re-rendered in the interface so that the user can see their edits substantially in real time in a WYSIWYG manner.

[0106] Figure 4 A flowchart depicts one embodiment of a method for creating an editing interface that includes components and corresponding masks. For each component (loop 410), a mask HTML is created such that the original component HTML is obscured by borders and menus (step 420). The mask is positioned on the corresponding component (e.g., assumed to be the same or slightly larger size and in the same or similar position on the page). In this way, the user cannot interact with the underlying HTML (e.g., the HTML of the rendered component) but must interact with the mask. An example of a mask div has been described above. In one embodiment, a menu on each component mask allows the user to modify the component HTML, delete the component, or accept the component.

[0107] Therefore, components and masks can be rendered in the editor (steps 430, 440). Figure 7This describes one embodiment of the editor's interface for the example simple.html presented in this article, which includes three components defined for simple.html and corresponding masks for these components.

[0108] The interaction with the mask used for each component can then be determined (step 450). If the interaction is a deletion action (step 460), the component (e.g., the corresponding component 169 or 168) can be deleted by editor 102. The page can then be re-rendered so that the component that was just deleted is no longer presented to the user in the interface (step 480). If the user edits (e.g., modifies) the underlying component (step 470), the data of the corresponding component (e.g., component 169 or 168) can be modified accordingly by editor 102 (step 482), and the component is re-rendered in the interface (step 484). In this way, editor 102 can allow the user to view and edit the components used for the template in real time, in a WYSIWYG manner. Such real-time editing and viewing can be facilitated, for example, by editing and re-rendering component 169 maintained by editor 102.

[0109] Figure 8-10 This describes the interaction between the user and editor and various components presented through the interface used in simple.html, which illustrates the properties of these components. For example, in Figure 8 In the present context, the user has selected a basic content component 810 with the information "This should be identified as basic content". When the user selects a menu item associated with this component (e.g., "Edit" or "View"), an editing interface 812 can pop up. Through interface 812, the user can be given the ability to edit the information presented in the component.

[0110] exist Figure 9 In the image, the user has already selected a basic image component 910 containing image source material. When the user selects a menu item associated with component 910 (e.g., "Edit" or "View"), an editing interface 912 can pop up. Through interface 912, the user can be given the ability to edit the material presented in component 910. Similarly, in Figure 10In the example, the user has selected a basic embedded HTML component 1010 containing a div tag with the text "This is the footer@Copyright my company". When the user selects a menu item associated with component 1010 (e.g., "Edit" or "View"), an editing interface 1012 can pop up. Through interface 1012, the user can be given the ability to edit the information presented in component 1010.

[0111] Then at some point, the user will use the editor's interface to finish editing or select components included in the template, and will accept all components currently presented on the editor 102's interface (step 486) (e.g., by tapping...). Figure 10 (See the "Accept All" button 1014 shown). Editor 102 can then allow the user to save the rendered components as a template (step 488). For example, in one embodiment, once the user accepts all components using the menu on each individual component or the "Accept All" button 1014 in the editor's main toolbar, the "Save Template" button 1016 in the editor's main toolbar is enabled. When the user now clicks the Save Template button 1016, the identified components can be placed in the template within the grid layout. The grid layout can initially be selected as a base-based grid or a bootstrap grid when creating the template from HTML, or it can be selected at a later point, such as when the user chooses to save the components as a template.

[0112] Figure 5 An embodiment of a method for creating a template (including placing components in the template according to a grid layout) is described. Initially, template 172 may be created or obtained (e.g., if previously created) (step 510). The creation of template 172 may require obtaining template definition 162 for an appropriate type of template (e.g., a base-based or bootstrap-based template) and saving a copy of that definition as template 172.

[0113] In one embodiment, the PageType section of the template stores layout information. The layout is either a base grid or a bootstrap grid. The EmbeddedLayout section of the template contains details of template 172. In the following example, the template's components are stacked in a column within the same section, and the rows stretch across the entire width of the template.

[0114]

[0115] Template 172 is now ready to be populated with data for component 168, which will be part of template 172. These components 168 may, for example, correspond to components 169 maintained by editor 102 and accepted by the user using editor 102. Components that will form part of the template can then be obtained when the user accepts all components currently presented in the editor interface (step 520). These components may be maintained by editor 102 during the editing process (e.g., locally on the user device, or at a web content development platform, or both locally on the user device and at a web content development platform), or they may be identified. In one embodiment, these components can be obtained using the DOM used for rendering the interface, as the components are being rendered in the interface by editor 102. In particular, components (or their desired properties) can be obtained by manipulating the DOM, similar to component identification as described above. The rendered position and style of these components can then be used to determine which segment and column of the template's grid layout to place the component in.

[0116] Specifically, based on the rendering position, all components currently presented in the interface can be sorted according to their HTML top (step 530). Components with the same top can be assigned to the same section. For example, regarding the three example components associated with the example simple.html discussed earlier in this document, after this step is completed, these three components will be assigned the following values:

[0117] Components: 0, Segments: 0, Columns: 0, Indexes in Columns: 0, Stretch: False

[0118] Component: 1, Segment: 1, Column: 0, Index in column: 0, Stretch: False

[0119] Components: 2, Segments: 2, Columns: 0, Indexes in Columns: 0, Stretch: False

[0120] For each of the components, it can then be determined whether any of the components occupies the width of the window (step 550). If a component occupies the width of the window, it is added as a stretched segment to the grid layout of template 172. For the example simple.html, the output of this step is as follows.

[0121] Components: 0, Segments: 0, Columns: 0, Indexes in Columns: 0, Stretch: True

[0122] Component: 1, Segment: 1, Column: 0, Index in column: 0, Stretch: True

[0123] Components: 2, Sections: 2, Columns: 0, Indexes in Columns: 0, Stretch: True

[0124] Columns are then assigned to each component (step 560). Components assigned to the same segment can be assigned columns based on the component's HTML left value. As an example, if a component exists in the segment to the right of the first component, these components are assigned to the same segment, but with column numbers incremented. For the simple.html example, there is no such component.

[0125] Components can also be stacked in columns and identified based on all previous peers (step 570). For simple.html, the output of this step is as follows.

[0126] Components: 0, Segments: 0, Columns: 0, Indexes in Columns: 0, Stretch: False

[0127] Component: 1, Segment: 0, Column: 0, Index in column: 1, Stretch: False

[0128] Components: 2, Segments: 0, Columns: 0, Indexes in Columns: 2, Stretch: False

[0129] If necessary, the identified component HTML is corrected (step 580). For example, these corrections may be needed if a certain CSS cannot be found in the identified component HTML. In this case, the parent hierarchy may also be included in the component HTML of component 168, or in the component if it is included in template 172.

[0130] Components can then be inserted into template 172 according to their defined positions in the grid layout of template 172 (step 582). Specifically, editor 102 at browser 124 sends data corresponding to the components (e.g., component 169 maintained by editor 102) to web content development platform 100. Based on this data, corresponding component definitions 164 can be selected, whose XML is included in template 172 at defined positions, and whose XML is populated with data associated with HTML or other data for the component.

[0131] Along with the components, all CSS links on the HTML page (e.g., the HTML page currently being rendered in the rendering page by editor 102) are added as resources to the template 172 being created, and all script tags with the src attribute are added as JavaScript to template 172 (step 590). These additions are likely desired so that the required CSS styles and(one or more) JavaScript(s) are available for rendering when template 172 is previewed or edited. Examples of component instances included in the template used for example simple.html are included in Appendix B.

[0132] The saved template 172 can then be previewed by editor 102. Figure 11 This is an example depicting a preview of a saved template created by a user based on the simple.html example used in this article.

[0133] Those skilled in the art will recognize that embodiments can be implemented or carried out using other computer system configurations (including, but not limited to, multiprocessor systems, network devices, microcomputers, mainframes, data processors, etc.). The invention can be implemented in a dedicated computer or data processor specifically programmed, configured, or constructed to perform the functions described in detail herein. The invention can also be used in distributed computing environments where tasks or modules are executed by remote processing devices linked via communication networks (such as LANs, WANs, and / or the Internet). In a distributed computing environment, program modules or subroutines can be housed in both local and remote memory storage devices. These program modules or subroutines can be, for example, stored or distributed on computer-readable media (including magnetically and optically readable and removable computer disks), stored as firmware on a chip, and electronically distributed on the Internet or other networks (including wireless networks). Example chips may include electrically erasable programmable read-only memory (EEPROM) chips. The embodiments discussed herein can be implemented with suitable instructions that can reside on non-transitory computer-readable media, hardware circuitry, etc., or any combination thereof, and can be translated by one or more server machines. Examples of non-transitory computer-readable media are provided below in this disclosure.

[0134] Although the invention has been described with reference to specific embodiments thereof, these embodiments are merely illustrative and not limiting. Rather, this description is intended to describe illustrative embodiments, features, and functions in sequence to provide those skilled in the art with a background for understanding the invention without limiting it to any of the specific embodiments, features, or functions described (including any such embodiments or functions described). While specific embodiments and examples of the invention have been described herein for illustrative purposes only, various equivalent modifications are possible within the spirit and scope of the invention, as will be recognized and appreciated by those skilled in the art. As indicated, these modifications can be made to the invention in accordance with the foregoing description of the illustrative embodiments, and these modifications will be included within the spirit and scope of the invention. Therefore, although the invention has been described herein with reference to specific embodiments thereof, variations, changes, and substitutions are contemplated in the foregoing disclosure, and it will be appreciated that in some cases, certain features of embodiments of the invention will be utilized without a corresponding use of other features, without departing from the scope and spirit of the invention as set forth. Thus, many modifications can be made to adapt particular situations or materials to the basic scope and spirit of the invention. For example, it will be understood that while the embodiments discussed herein are presented in the context of a browser-based application, other embodiments can be applied with the same effectiveness to other types of components on a computing device (e.g., other navigation components, etc.).

[0135] Throughout this specification, the terms "an embodiment," "embodiment," or "specific embodiment," or similar terms, mean that a particular feature, structure, or characteristic described in connection with an embodiment is included in at least one embodiment and may not necessarily be present in all embodiments. Therefore, the respective appearances of the terms "in one embodiment," "in an embodiment," or "in a specific embodiment," or similar terms throughout this specification do not necessarily refer to the same embodiment. Furthermore, a particular feature, structure, or characteristic of any particular embodiment may be combined in any suitable manner in one or more other embodiments. It is to be understood that other variations and modifications of the embodiments described and illustrated herein are possible in accordance with the teachings herein and should be considered part of the spirit and scope of the invention.

[0136] Throughout this description, numerous specific details (such as examples of components and / or methods) are provided to provide a thorough understanding of embodiments of the invention. However, those skilled in the art will recognize that embodiments may be practiced without one or more of the specific details described, or with other devices, systems, assemblies, methods, components, materials, parts, etc. In other instances, well-known structures, components, systems, materials, or operations have not been shown or described in particular detail to avoid obscuring aspects of embodiments of the invention. While the invention may be illustrated by means of specific embodiments, this does not limit the invention to any particular embodiment, and those skilled in the art will recognize that other embodiments are readily understood and are part of the invention.

[0137] The embodiments discussed herein can be implemented in a computer communicatively coupled to a network (e.g., the Internet), another computer, or in a standalone computer. As known to those skilled in the art, a suitable computer may include a central processing unit (“CPU”), at least one read-only memory (“ROM”), at least one random access memory (“RAM”), at least one hard disk drive (“HD”), and one or more input / output (“I / O”) devices. I / O devices may include a keyboard, a monitor, a printer, an electronic pointing device (e.g., a mouse, trackball, stylus, touchpad, etc.).

[0138] ROM, RAM, and HD are computer memories used to store computer-executable instructions that are executable by the CPU or can be compiled or interpreted to make the CPU executable. Suitable computer-executable instructions may reside on computer-readable media (e.g., ROM, RAM, and / or HD), hardware circuitry, or any combination thereof. Within this disclosure, the term "computer-readable media" is not limited to ROM, RAM, and HD, and may include any type of data storage medium that can be read by a processor. For example, a computer-readable medium may refer to a data box, data backup tape, floppy disk, flash drive, optical data storage drive, CD-ROM, ROM, RAM, HD, etc. The processes described herein can be implemented using suitable computer-executable instructions that may reside on a computer-readable medium (e.g., disk, CD-ROM, memory, etc.). Alternatively, computer-executable instructions may be stored as software code components on a direct access memory array, magnetic tape, floppy disk, optical storage device, or other suitable computer-readable medium or storage device.

[0139] Any suitable programming language can be used to implement the routines, methods, or programs of the embodiments of the invention described herein, including C, C++, Java, JavaScript, HTML, or any other programming or scripting code. Other software / hardware / network architectures can be used. For example, the functionality of the disclosed embodiments can be implemented on a single computer, or shared / distributed among two or more computers on or across a network. Communication between computers implementing the embodiments can be achieved using electronic signals, optical signals, radio frequency signals, or other suitable communication methods and tools conforming to known network protocols.

[0140] Different programming techniques can be employed, such as procedural or object-oriented. Any particular routine can be executed on a single computer processing device or multiple computer processing devices, a single computer processor or multiple computer processors. Data can be stored in a single storage medium or distributed across multiple storage media, and can reside in a single database or multiple databases (or other data storage technologies). Although steps, operations, or calculations may be presented in a particular order, this order can be changed in different embodiments. In some embodiments, while multiple steps are shown as sequential in this specification, a combination of such steps in alternative embodiments may be executed simultaneously. The sequence of operations described herein can be interrupted, suspended, or otherwise controlled by another process (such as an operating system, kernel, etc.). Routines can operate within an operating system environment or as stand-alone routines. The functions, routines, methods, steps, and operations described herein can be executed in hardware, software, firmware, or any combination thereof.

[0141] The embodiments described herein can be implemented in software, hardware, or a combination of software and hardware as control logic. This control logic can be stored in an information storage medium (such as a computer-readable medium) and stored as a plurality of instructions suitable for directing an information processing device to perform the set of steps disclosed in the various embodiments. Based on the disclosure and teachings provided herein, those skilled in the art will recognize other ways and / or methods for implementing the invention.

[0142] Implementing the steps, operations, methods, routines, or portions thereof described herein using software programming or code is also within the spirit and scope of this invention. Such software programming or code can be stored in a computer-readable medium and operated by a processor to enable a computer to perform any of the steps, operations, methods, routines, or portions thereof described herein. Generally, the functionality of this invention can be implemented by any means known in the art. For example, distributed or networked systems, components, and circuits can be used. In another example, communication or transmission of data (or otherwise moving it from one place to another) can be wired, wireless, or by any other means.

[0143] "Computer-readable medium" can be any medium that can contain, store, transmit, propagate, or deliver a program for use by or in connection with an instruction execution system, apparatus, system, or device. The computer-readable medium can be, by way of example only and not limitation, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, system, device, propagation medium, or computer memory. Such a computer-readable medium is generally intended to be machine-readable and includes software programming or code that can be human-readable (e.g., source code) or machine-readable software programming or code (e.g., object code). Examples of non-transitory computer-readable media can include random access memory, read-only memory, hard disk drives, data boxes, magnetic tape, floppy disks, flash drives, optical data storage devices, compact disk read-only memory, and other suitable computer memories and data storage devices. In illustrative embodiments, some or all of the software components may reside on a single server computer or any combination of single server computers. As those skilled in the art will appreciate, a computer program product implementing the embodiments disclosed herein may include one or more non-transitory computer-readable media storing one or more processor-translatable computer instructions in a computing environment.

[0144] It will also be recognized that, depending on the specific application, one or more of the elements depicted in the figures / graphs may be implemented in a more separate or more integrated manner, or even removed or rendered as they may be inoperable in certain cases. Furthermore, any signal arrows in the figures / graphs should be considered illustrative only and not limiting, unless otherwise specifically noted.

[0145] As used herein, the terms “comprising,” “including,” “having,” or any other variations thereof are intended to cover non-exclusive inclusion. For example, a process, product, article, or device that includes a list of elements is not necessarily limited to those elements, but may include other elements not expressly listed or inherent to such a process, product, article, or device.

[0146] Furthermore, as used herein, the term “or” is generally intended to mean “and / or” unless otherwise indicated. For example, condition A or B is satisfied by any of the following: A is true (or exists) and B is false (or does not exist); A is false (or does not exist) and B is true (or exists); and both A and B are true (or exist). As used herein, terms preceded by “an” or “a kind” (and “described” when the preceding basis is “an” or “a kind”) include both singular and plural terms (i.e., the statement “an” or “a kind” explicitly indicates only the singular or only the plural). Furthermore, as used consistently in the description herein, “in…” means both “in…” and “on…” unless the context explicitly indicates otherwise.

[0147] Appendix A

[0148] Basic content components:

[0149]

[0150]

[0151] Basic Image Components

[0152]

[0153] Basic embedded HTML components

[0154]

[0155] Appendix B

[0156] The component fragments included in the template file. Note that information is emphasized using italics. For simplicity, the component's text / HTML skin is not included in the described fragments.

[0157] Instances of basic content components

[0158]

[0159] Instances of basic image components

[0160]

[0161] Examples of basic embedded HTML components

[0162]

Claims

1. A system for web content development, comprising: processor; Non-transitory computer-readable media, including instructions for operations such as: Receive web pages in the editor executed on the browser; Rendering a webpage in a browser to present the rendered webpage in an editor, wherein rendering the webpage includes: inserting the webpage into the editor's code to render the received webpage in the browser in association with the editor and the browser, and inserting the received webpage into the editor's code. Identifying sections of a webpage, wherein identifying sections of a webpage includes: processing the editor's code to identify sections of the webpage within the editor's code by evaluating the sections of the webpage based on identifiers associated with the editor and one or more tags of the sections; Generating a component for each identified section, wherein generating a component for each identified section includes: populating the generated component with data based on the content of the associated section of the webpage; and The browser renders components for each identified section in association with the rendered webpage presented by the editor, allowing users to accept the rendered components for template generation, edit the rendered components, or delete the rendered components.

2. The system according to claim 1, wherein, The instruction is further used for: Receive user-accepted instructions for the identified components; and Initiate the generation of a template that includes the accepted, recognized components.

3. The system according to claim 1, wherein, The instruction is further used for: Receive user edits of the identified components; and The data of the identified components can be edited based on user editing.

4. The system according to claim 3, wherein, The instruction is further used for: The browser then displays components associated with the rendered webpage, which contain editable information.

5. The system according to claim 4, wherein, The instruction is further used for: Receive user-accepted instructions for the identified components; and The template is generated, which includes accepted identification components, wherein the accepted identification components include data edited based on user editing.

6. The system according to claim 1, wherein, The components for each identified section are generated in the editor.

7. The system according to claim 1, wherein, Each identified section is an independent element.

8. A method for web content development, comprising: Receive web pages in the editor executed on the browser; Rendering a webpage in a browser to present the rendered webpage in an editor, wherein rendering the webpage includes: inserting the webpage into the editor's code to render the received webpage in the browser in association with the editor and the browser, and inserting the received webpage into the editor's code. Identifying sections of a webpage, wherein identifying sections of a webpage includes: processing the editor's code to identify sections of the webpage within the editor's code by evaluating the sections of the webpage based on identifiers associated with the editor and one or more tags of the sections; Generating a component for each identified section, wherein generating a component for each identified section includes: populating the generated component with data based on the content of the associated section of the webpage; and The browser renders components for each identified section in association with the rendered webpage presented by the editor, allowing users to accept the rendered components for template generation, edit the rendered components, or delete the rendered components.

9. The method of claim 8, further comprising: Receive user-accepted instructions for the identified components; as well as Initiate the generation of a template that includes the accepted, recognized components.

10. The method of claim 8, further comprising: Receive user edits of the identified components; as well as The data of the identified components can be edited based on user editing.

11. The method of claim 10, further comprising: The browser then displays components associated with the rendered webpage, which contain editable information.

12. The method of claim 11, further comprising: Receive user-accepted instructions for the identified components; as well as The template is generated, which includes accepted identification components, wherein the accepted identification components include data edited based on user editing.

13. The method according to claim 8, wherein, The components for each identified section are generated in the editor.

14. The method according to claim 8, wherein, Each identified section is an independent element.

15. A non-transitory computer-readable medium comprising instructions for operating as follows: Receive web pages in the editor executed on the browser; Rendering a webpage in a browser to present the rendered webpage in an editor, where... Rendering a webpage includes: inserting the webpage into the editor's code to render the received webpage in the browser in association with the editor and the browser, and inserting the received webpage into the editor's code; Identifying sections of a webpage, wherein identifying sections of a webpage includes: processing the editor's code to identify sections of the webpage within the editor's code by evaluating the sections of the webpage based on identifiers associated with the editor and one or more tags of the sections; Generating a component for each identified section, wherein generating a component for each identified section includes: populating the generated component with data based on the content of the associated section of the webpage; and The browser renders components for each identified section in association with the rendered webpage presented by the editor, allowing users to accept the rendered components for template generation, edit the rendered components, or delete the rendered components.

16. The non-transitory computer-readable medium according to claim 15, wherein, The instruction is further used for: Receive user-accepted instructions for the identified components; and Initiate the generation of a template that includes the accepted, recognized components.

17. The non-transitory computer-readable medium according to claim 15, wherein, The instruction is further used for: Receive user edits of the identified components; and The data of the identified components can be edited based on user editing.

18. The non-transitory computer-readable medium according to claim 17, wherein, The instruction is further used for: The browser then displays components associated with the rendered webpage, which contain editable information.

19. The non-transitory computer-readable medium according to claim 18, wherein, The instruction is further used for: Receive user-accepted instructions for the identified components; and The template is generated, which includes accepted identification components, wherein the accepted identification components include data edited based on user editing.

20. The non-transitory computer-readable medium according to claim 15, wherein, The components for each identified section are generated in the editor.

21. The non-transitory computer-readable medium according to claim 15, wherein, Each identified section is an independent element.

Images