Device for a website construction system

Abstract

An apparatus for a website construction system is provided. The apparatus includes a third-party application receiver for receiving at least one template of the website building system from an external source, the third-party application being associated with the at least one template of the website building system, and an installer for installing the template into a website page when an instance of the at least one third-party application is created in the website page. The receiver maintains referential integrity between the third-party application and the website page and between the third-party application and the template, and performs interface resolution between the third-party application and the website page.

Description

Technical Field

[0001] The present invention relates to an online application and, in particular, to a method of use in combination with included third-party applications.

Background Art

[0002] Numerous website construction systems and other interactive application construction tools that can be used for the purpose of creating and editing websites and other online applications are commercially available. End users can access such websites using client software on a wide range of platforms such as ordinary personal computers, smartphones, tablets, and other desktop or mobile devices.

[0003] These website construction systems are provided in various forms, for example, a completely online website construction system hosted on one or more servers connected to the Internet and accessed using an Internet communication protocol such as HTTP (Hypertext Transfer Protocol). The creation, editing, and deployment of these website construction systems are all executed by direct online operation of the server.

[0004] The website construction system can be partially online or completely online. In the case of a partially online system, the editing of the website is executed locally on the user's machine and later uploaded and deployed to one or more central servers. Once the website is uploaded, these website construction systems function in the same way as a completely online website construction system.

[0005] The website construction system has an internal data architecture for the purpose of systematizing the data and elements within the system. This architecture may be different from the appearance of the target site as seen by the user, and furthermore, may also be different from the way in which a general HTML (HyperText Markup Language) page is sent to the browser. For example, the internal data architecture can include additional properties for each element on the page (such as author, creation date and time, access permission, link to template, etc.), and these additional properties are essential for editing and maintaining the site within the website construction system, but are not visible to external end users (and in some cases, some users who perform editing). The general architecture of a site based on the website construction system can be composed of pages that include components (such as shape components, photo components, text components, as well as single-page containers and multi-page containers including mini-pages).

[0006] Components can be contentless such as a star shape without internal content (but having color, size, position, and other attributes), or can have internal content such as a text paragraph component. The internal content of such a component includes, in addition to the text to be displayed, font, formatting, and layout information. Naturally, this content can vary for each text paragraph component.

[0007] Designers using such a website construction system can design a new site from scratch (starting from a blank screen), or can utilize pre-defined application templates created by the designer himself / herself, the system creator, or the designer's community. The website construction system can support templates that are just a collection of components, templates that are complete pages (or mini-pages) or a series of pages, and templates that are complete websites.

[0008] When an application template is provided, the designer can freely customize it, adding, deleting, or modifying all elements of the template to create the designer's own version of the template. Such customization can be carried out by creating a modified version of the template (a separate version different from the template). Alternatively, the website construction system can apply the customization through an inheritance-type mechanism, which maintains a link to the original template and thus reflects subsequent changes to the template.

[0009] Furthermore, the website construction system can be extended using third-party applications and components embedded therein. Such third-party applications may be included in the design environment of the website construction system or can be individually purchased (or otherwise obtained) through various distribution mechanisms, such as from an application store (AppStore) incorporated into the website construction system, or from a web-based or stand-alone application repository (or AppStore) operated by the vendor of the website construction system (WBS) or another organization. Additionally, the third-party application can be obtained directly from the vendor of the third-party application (either through the AppStore or not), in which case the vendor provides either the actual installation module or only the activation code or access code.

[0010] Third-party applications may include any combination of front-end (display) elements and back-office elements (which are not displayed on the website). A third-party application may be entirely back-office (i.e., without display elements), or entirely front-end (i.e., only activated when used on the website), or a combination of both.

[0011] The back-office elements of a third-party application may include functions such as database communication options and external update options. For example, a third-party application for a blog may include back-office elements that can receive updates from sources other than people (e.g., RSS news feeds from major news services), and from sources of people not related to the website (e.g., a stand-alone smartphone application that can post blog entries).

[0012] The process of integrating the visual elements of a third-party application into the website in which they are included can be done in various ways. Widget-type third-party applications can be embedded as components inside the pages of a website, while section-type third-party applications can be added to the website as one or more additional pages.

[0013] Furthermore, third-party applications (both widget-type and section-type) can be single-page third-party applications, or multi-page third-party applications (with internal mini-pages represented as an internal URL structure). The system can implement one or more, or all, of the four possible combinations (widget or section, single-page or multi-page).

[0014] Multi-page third-party applications typically provide a default "landing" mini-page, which can be an opening page, a specific internal mini-page (e.g., the latest blog entry in a third-party blog application), a mini-page selection screen, or other mini-pages.

[0015] The use of third-party applications in a website based on a website construction system is carried out through instances of the third-party applications. The website construction system can support multiple usage methods of third-party applications at multiple levels. For example, it can permit one instance of a third-party application throughout the website, permit the creation of multiple instances of third-party applications inside the website (but only one instance per third-party application), permit the creation of multiple instances of multiple third-party applications (but only one instance per page), etc. Furthermore, it can also permit multiple instances per page of component-type third-party applications (not section-type third-party applications), and can also permit the creation of multiple instances of multiple third-party applications without restrictions on the number, multiplicity, or location of the instances of the third-party applications.

[0016] Instances of third-party applications can have content specific to the instance. For example, a third-party application of an online shop (e-Shop) can have a product database associated with a specific instance, and this product database is different from the product database associated with another instance of the third-party application of the same online shop (within the same site or another site).

[0017] For the purpose of explanation, a third-party application and a web page (or mini-page) containing its mini-pages and elements (i.e., a "wrapper page") shall be referred to as the containing web page, and the entire website shall be known as the main site to the user. The integrated page shown to the user (including the main page and the embedded TPA mini-pages / components) shall be referred to as the composite page. In the case of a section-type third-party application, a "virtual page" containing the third-party application serves as the containing web page.

[0018] Third-party applications are typically deployed on the server of the website building system vendor, on the server of the third-party application vendor, on an external (third-party) server, or on any combination of these servers. Third-party applications can also include elements that are actually executed on the end-user's machine (e.g., statically installed browser extensions, JavaScript® components that are dynamically executed inside the client-side code of the website building system as shown in Figure 1). Reference will be made to Figure 1 below.

[0019] The server of the website building system vendor functions as a contact point for the end-user and responds to requests (in some cases connecting to the server of the third-party application vendor to receive the necessary information). The website building system can form a direct connection (if necessary) between the client's computer and the server of the third-party application vendor, for example, when video streaming is requested.

[0020] Instances of third-party applications contained therein can have their own internal content, just as normal components contain internal content. Referring to Figure 2, as shown in this figure, third-party applications can manage this content independently of the website construction system and the website generated using the website construction system. Multiple instances of one or more third-party applications can have shared content. For example, instances of two online shops on two separate website pages can refer to the same product database.

[0021] The output from the contained third-party applications can be incorporated into the containing web page in various ways, such as the following.

[0022] Server-side processing: (Refer to Figure 3 below.) In this method shown in Figure 3, a third-party application [a] (including design elements and display elements) and third-party application data [b] specific to the user are merged by the server code [c] of the third-party application running on the server [d] of the third-party application vendor. These are sent via a communication medium [e] to the server code [f] of the website construction system, and the server code [f] merges them with the information [g] of the containing web page and then sends them so that they can be displayed on the user's client station [h].

[0023] Client-side processing: (Refer to FIG. 4 below.) In this method shown in FIG. 4, a third-party application [a] (including design elements and display elements) and data [b] of the third-party application specific to the user are merged by server code [c] of the third-party application running on the server [d] of the third-party application vendor. These are sent to the client-side processing component [h] via a communication medium [e]. Server code [f] of the website construction system sends information [g] of the containing web page to this client-side processing component [h]. The client-side processing component [h] performs a merge of the two information sources and presents the integrated application to a browser (or other client agent) [i].

[0024] iFrame inclusion: (Refer to FIG. 5 below.) In the method shown in FIG. 5, a third-party application [a] (including design elements and display elements) and data [b] of the third-party application specific to the user are merged by server code [c] of the third-party application running on the server [d] of the third-party application vendor. These are sent via a communication medium [e] to a browser-based application [h] running inside a user agent (such as a web browser) [i]. Server code [f] of the website construction system sends information [g] of the containing web page to this browser-based application [h]. The containing web page is created as a web page including one or more iframe directives that include content from the server [d] of the third-party application. Additional methods and alternative methods are also applicable.

Prior Art Documents

Patent Documents

[0025]

Patent Document 1

[0026] According to a preferred embodiment of the present invention, an apparatus for a website construction system is provided. The apparatus includes a page composer for creating a page including an instance of a website of at least one third-party application, and a configurer for defining a bidirectional communication backchannel between the page and the at least one third-party application, or between the at least one third-party application and at least one other third-party application. Further, the apparatus includes a coordinator for adjusting communication according to the communication backchannel when the page is viewed or accessed.

[0027] Furthermore, according to a preferred embodiment of the present invention, the apparatus is installable on a client.

[0028] Furthermore, according to a preferred embodiment of the present invention, the apparatus is installable on a server.

[0029] Furthermore, according to a preferred embodiment of the present invention, the communication backchannel is at least one of PostMessage of HTML5 (HyperText Markup Language 5), a message URL fragment identifier, a dedicated communication web service, HTML5 local storage, an HTML5 local file system access API, and a dedicated browser plugin.

[0030] Furthermore, according to a preferred embodiment of the present invention, the coordinator is embedded in the page using an iframe.

[0031] Furthermore, according to a preferred embodiment of the present invention, the at least one third-party application is embedded in the page using an iframe.

[0032] Furthermore, according to a preferred embodiment of the present invention, at least one third - party application is at least one of a multi - part third - party application and a modular third - party application.

[0033] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a configuration manager for monitoring instances of at least one predefined third - party application.

[0034] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a smart identifier and addresser for identifying and converting the symbolic and absolute addresses of the source or destination of communication.

[0035] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a communication policy enforcer for applying the communication policy between the website construction system and at least one third - party application.

[0036] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a redirector for rerouting communication messages to and from at least one third - party application within the website construction system.

[0037] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes an originator verifier for verifying the reliability of input messages from at least one third - party application.

[0038] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a protocol converter for solving protocol compatibility problems between a website construction system and at least one third-party application, and between at least one third-party application and at least one other third-party application.

[0039] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes a dynamic layout updater for updating dynamic layout changes between at least one of a page and at least one third-party application, between at least one third-party application and a page, and between at least one third-party application and at least one other third-party application.

[0040] Furthermore, according to a preferred embodiment of the present invention, the coordinator includes an updater for updating at least one of global attributes of the website construction system, control permissions of at least one third-party application, layout, style, and content of page elements.

[0041] According to a preferred embodiment of the present invention, an apparatus for a website construction system is provided. The apparatus includes a receiver of a third-party application that receives at least one template of the website construction system from an external source, and the third-party application is associated with at least one template of the website construction system. Furthermore, the apparatus includes an installer for installing the template into the page when an instance of at least one third-party application is created within the website page.

[0042] Furthermore, according to a preferred embodiment of the present invention, the apparatus is installable on at least one of a server and a client.

[0043] Furthermore, according to a preferred embodiment of the present invention, the template is editable.

[0044] Furthermore, according to a preferred embodiment of the present invention, the template includes at least one of a component of a website construction system and a multipart third-party application.

[0045] Furthermore, according to a preferred embodiment of the present invention, the website page is at least one of an existing page, an existing mini-page, a newly created page, and a newly created mini-page.

[0046] Furthermore, according to a preferred embodiment of the present invention, the receiver maintains reference integrity and performs interface resolution between at least one third-party application and the page.

[0047] According to a preferred embodiment of the present invention, a method for a website construction system is provided. The method includes creating a page including an instance of a website of at least one third-party application, and defining a two-way communication backchannel between the page and at least one third-party application or between at least one third-party application and at least one other third-party application. Furthermore, the method includes adjusting communication according to the communication backchannel when the page is viewed or accessed.

[0048] Furthermore, according to a preferred embodiment of the present invention, the at least one third-party application is at least one of a multipart third-party application and a modular third-party application.

[0049] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of monitoring at least one instance of a predefined third-party application.

[0050] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of identifying and converting the symbolic address and the absolute address of the source or destination of communication.

[0051] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of applying a communication policy between the website construction system and at least one third-party application.

[0052] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of rerouting communication messages to and from at least one third-party application within the website construction system.

[0053] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of verifying the reliability of input messages from at least one third-party application.

[0054] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes the step of resolving protocol compatibility issues between the website construction system and at least one third-party application, and between the third-party application and at least one other third-party application.

[0055] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes updating a dynamic layout change between at least one of between a page and at least one third - party application, between at least one third - party application and a page, and between at least one third - party application and at least one other third - party application.

[0056] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes updating at least one of a global attribute of a website construction system, permission to control at least one third - party application, the layout, style, and content of elements of a page.

[0057] Furthermore, according to a preferred embodiment of the present invention, the updating step includes cascading a style sheet.

[0058] According to a preferred embodiment of the present invention, a method for a website construction system is provided. The method includes receiving at least one template of the website construction system from an external source, wherein a third - party application is associated with at least one template of the website construction system. Further, the method includes installing the template into a page when an instance of at least one third - party application is created within the website page.

[0059] Furthermore, according to a preferred embodiment of the present invention, the template is editable.

[0060] Furthermore, according to a preferred embodiment of the present invention, the template includes at least one of a component of the website construction system and a multi - part third - party application.

[0061] Furthermore, according to a preferred embodiment of the present invention, the website page is at least one of an existing page, an existing mini-page, a newly created page, and a newly created mini-page.

[0062] Furthermore, according to a preferred embodiment of the present invention, the receiving step maintains reference integrity and performs interface resolution between at least one third-party application and the page.

[0063] The subject matter regarded as the present invention is specifically pointed out and clearly described in the concluding part of this specification. However, by reading the following detailed description while referring to the accompanying drawings, the present invention can be deeply understood in terms of both its composition and operation method, as well as its objectives, features, and advantages.

Brief Description of the Drawings

[0064]

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Figure 7A

Figure 7B

Figure 8

Figure 9

Figure 10

Figure 11A

Figure 11B

Figure 11C

Figure 12

Figure 13

Figure 14

DETAILED DESCRIPTION OF THE INVENTION

[0065] It should be understood that, for the sake of brevity and clarity of the figures, the elements shown in the drawings are not necessarily drawn to the correct scale. For example, for clarity, the dimensions of some elements may be exaggerated compared to other elements. Further, when considered appropriate, corresponding or similar elements in multiple drawings are represented by the same reference numerals.

[0066] In the following detailed description, numerous specific details are set forth in order to provide a thorough understanding of the present invention. However, it will be understood by those skilled in the art that the present invention may be practiced without these specific details. Furthermore, well-known methods, procedures, and components have not been described in detail so as not to obscure the present invention.

[0067] The applicant has recognized that there are many limitations in the current ways in which third-party applications are generally integrated into website building systems and in the current ways in which integrated third-party applications and website building systems interact.

[0068] Such limitations include that the display of the third-party application is restricted to one rectangular area (which is included in an iframe) inside the containing web page. Further limitations include the ability of the third-party application to control the size and position of the window of the third-party application and visual elements outside the actual display window of the third-party application (for example, a dedicated display frame around the window of the third-party application).

[0069] A third-party application may have its own display style (such as color scheme, font, font size, etc.). These styles may be suitable for some containing web pages, but may be visually problematic or unharmonious on other containing web pages.

[0070] Another limitation is the lack of flexibility in the display of third - party applications from the perspective of the containing site. (For example, when the site has to be visually modified to be deployed on platforms with different screen sizes or due to dynamic layout events), the containing web page may be required to change the size of the window assigned to the third - party application. In such cases, the display of the third - party application is cut off mid - way and scrolling via a scroll bar is required to reach various sub - regions within the third - party application. Referring to Figure 6, this figure shows an example of a situation that can occur when the containing web page [a] is resized. The area assigned to the third - party application [b] of an online store decreases, and the "Purchase" button [c] cannot be displayed together with the contents of the shopping cart [d], so several scroll operations are required to complete the purchase, and the likelihood of actually completing the purchase is significantly reduced.

[0071] It should be understood that third - party applications cannot interact with other components within the containing web page, and such interaction may be necessary to achieve complex functions. In particular, third - party applications cannot perform different operations according to the type and content of the components within the containing web page. One example of this is a website that streams an online cooking class. A user may want to display a dedicated small screen area in another part of the screen to deliver the latest news and weather information (such as a live stream from CNN, etc.) in the background while watching the video. The user may also want to automatically pause the learning session when the weather forecast for their area starts.

[0072] Furthermore, especially when multiple third - party applications are provided by different vendors, there is no clear and standard way for these third - party applications to cooperate with each other. Therefore, designers have no clear way to combine multiple third - party applications from different vendors. One example of this is in the case of an e - commerce website that runs a module of a third - party order - placing system and different modules of a shipping system. It may be desirable to place an order for goods according to a shipping schedule, etc.

[0073] The applicant has recognized that this integration can be achieved by using structured bidirectional communication channels between a website construction system and third - party application instances contained therein, and between multiple different third - party application instances that can be implemented within the same containing page. These channels can also transfer information regarding layout, style, and additional information.

[0074] The following explanation focuses on the iframe inclusion method, which is understood to be a preferred method because it is built - in or integrated into recent browsers and does not require the creation of dedicated integration code. Furthermore, the iframe inclusion method provides encapsulation and sandboxing functions supported by the browser, as well as essential protection against hacking techniques such as cross - site scripting attacks that can be employed by malicious third - party applications.

[0075] Next, referring to FIGS. 7A and 7B, these figures show a system 100 for integrating a website construction system and one or more third - party applications according to an embodiment of the present invention. FIG. 7A shows the system 100 in the design stage, and FIG. 7B shows the system 100 at runtime. As can be understood from FIG. 7A, the system 100 includes a client 10, a website construction system (WBS) 30 installed on a website construction system (WBS) server 20, and one or more third - party applications 40 installed on one or more third - party application servers 50. The website construction system 30 includes a WBS coordinator 21, an application repository 22, a WBS - side TPA property sheet 23, a third - party application (TPA) coordinator 24, and an AppStore 25 (which can include a searcher 26). The client 10 includes a page composer 12 and a client - side display of the TPA property sheet 23. In some embodiments, the client 10 can further include a client - side display of the AppStore 25. The page composer 12 includes a linker 13, which will be described in more detail later. The third - party server 50 includes a third - party application 40, an external TPA coordinator 51, and a TPA database 52, and the TPA database 52 stores components, templates, etc. of the third - party application 40 for use. Note that the system 100 can include a plurality of third - party servers 50 belonging to a plurality of vendors of the third - party application 40.

[0076] It should be understood that the TPA property sheet 23 can be called when the attributes of an instance of the third-party application 40 are specified. Further, when called, the TPA property sheet 23 should be understood to be displayed as the client-side display of the TPA property sheet 23 in the client 10. Further, it should be understood that the offline embodiment can have its own property sheet as part of the installed client software, and thus there is no application TPA property sheet 23 or repository.

[0077] It should be understood that the designer or end - user 5 sitting in front of the client 10 can create their own website (or other online application) by using the page composer 12 to create website pages and interactions (inter - page interactions and intra - page interactions). The designer 5 can select components, templates, etc., which are part of the website construction system 30 stored in the application repository 22, via the WBS coordinator 21. Further, the designer 5 can create a containing web page 203 that embeds an instance of the third - party application 40 from the third - party application 40. The third - party application 40 can be purchased in advance, and its templates, components, etc. can be stored in the application repository 22. In an alternative embodiment, the purchased templates, components, etc. are stored in the TPA database 52 and can be accessed via the external TPA coordinator 51. In yet another embodiment, templates, components, etc. of the third - party application 40 can be purchased via the AppStore 25 as needed. The property sheet 23 can be specified by the designer 5 and can hold information (such as permissions, installation guides, payments, etc.) regarding the purchased instances of the third - party application 40, as will be described in more detail later. Further, the designer 5 can manually specify the communication channels (if necessary) between the multiple third - party applications 40 included, using the linker 23. Further, it should be understood that by using the linker 23, the designer 5 can specify the unique communication connections and rules between the constructed containing web page and the instances of the third - party application 40 included therein (such as videos and CNN news reports being displayed simultaneously as described above). It should be understood that the links created by the linker 23 can be modified as long as the website exists.

[0078] It should be understood that the designer 5 can obtain the third-party application 40 through an external channel of the App Store 25, such as an external App Store operated by the vendor or external contractor of the third-party application 40. In such a case, when the web site construction system 30 first installs the third-party application 40 on the web site created by the designer 5 through the web site construction system 30, the third-party application 40 and its configuration data can be registered.

[0079] To enable the linker 23 to establish a communication channel if necessary, it should be understood that the third-party application 40 needs to be able to correctly recognize and identify the components (including instances of other third-party applications 40) within the containing web page 203 (to which it attempts to communicate). In the case of components based on an associated template (to be described in more detail later), this identification is performed in advance by the vendor of the third-party application 40. Components within the associated template can be given unique reference IDs, and the third-party application 40 can use these IDs when communicating with these components.

[0080] Furthermore, in the case of a multi-part third-party application 40 (i.e., one third-party application 40 distributed across multiple iframes, to be described in more detail later), it should be understood that the multiple parts can automatically recognize a way to communicate with each other.

[0081] For components of the containing web page that are not included in the associated template (to be described in more detail later), the third-party application 40 can include a list of components of the required (mandatory or optional) containing web page 203 that should be present for it to function. This list can be stored in the property sheet 23 and can include a unique ID, a description, and details of the component (e.g., it must be a text component, used as a blog talkback label). This list can be enumerated in the entry of the third-party application 40 in the AppStore 25, and the designer 5 can specify the components (fields) in the containing web page 203 that meet the requirements of the third-party application 40 using the linker 23. The website construction system 30 can dynamically create the missing components of the containing web page 203 when an instance of the third-party application 40 is created, and it should be understood that the designer 5 can later move, resize, and fully specify these components.

[0082] Alternatively, the website construction system 30 can expose the entire or part of the component model of the containing web page 203 to the third-party application 40 included in the containing web page 203. It should be understood that the component model in this case is the component model of the containing web page 203 and not the Document Object Model (DOM). The Document Object Model (DOM) of the containing web page 203 can be a much more complex and detailed model than the component model because the actual containing web page 203 can include a vast number of HTML elements (both non-visible and visible elements) that are part of the infrastructure of the website construction system 30 or support the components of the containing web page 203. Therefore, the component model is much simpler.

[0083] Next, referring to FIG. 8, FIG. 8 shows a method of implementing a text component [a] using a plurality of HTML constructs (such as a div tag [b] enclosing a part, an internal div tag [c], and frames “mini widgets” [d1]..[d5]). The DOM model [e] of the containing web page 203 can include individual DOM tree nodes for each of these sub-elements. The component model [f] can be made much simpler and includes only one component node [g].

[0084] System 100 can also support the selective disclosure of components, and designer 5 can specify via linker 23 which components should be disclosed to third-party application 40. It should be understood that only these components (optionally including the “containment path” leading to these components) can be included in the simplified component model visible from third-party application 40. This specification can be implemented by explicitly marking the included components according to their types and other attributes of web site construction system 30. Thereby, third-party application 40 can traverse the component model of the containing web page 203 to identify the required components.

[0085] Furthermore, a link (e.g., a broadcast link) can be automatically created between the content-containing web page 203 and an instance of the third-party application 40. In a broadcast link, it should be understood that the third-party application 40 can send a communication at runtime to record a specific event. This communication can be optional or mandatory (i.e., the third-party application 40 does not function or is not installed unless there is a corresponding third-party application 40 linked to receive such a message). For example, the third-party application 40 can broadcast an information packet regarding the operations / functions it performs, and an installed third-party logging application 40 can receive these information packets.

[0086] The newly created page thus configured can be stored in the application repository 22 (via the WBS coordinator 21) so that it can be called at runtime, as will be explained in more detail later.

[0087] Next, refer to FIG. 7B. In this embodiment, the elements are the same as those in FIG. 7A, except for the elements of the client 10. At runtime, the client 10 includes a viewer 201 for displaying the containing web page 203. It should be understood that the viewer 201 can include a plurality of viewports 202 for displaying different instances of the third-party application 40 (instances derived from one or more third-party applications 40). Further, the client 10 includes a communication hub 205, which facilitates communication and provides a back channel between the containing web page 203 and the third-party application 40 hosted by the containing web page 203, and the required communication between the plurality of hosted third-party applications 40, without connecting to the associated containing web page 203. The function of the hub 205 will be described in more detail later.

[0088] The hub 205 can be implemented in the client 10 because both the inclusion of the containing web page 203 and the third-party application 40 are part of the interactive portion of the visible website, and these communications should not be delayed by the round-trip between the client and the server. In an alternative embodiment, if the third-party application server 50 needs to exchange a large amount of data and it is preferred not to route this data through the client 10, the hub 205 can be implemented in the server 20 of the website construction system.

[0089] It should be understood that communication hub 205 can support various combinations of communication between website building system 30 and one or more third - party applications 40, and communication between multiple third - party applications 40. For example, hub 205 enables a third - party application 40 to request website building system 30 to switch to another page within the main site. Further, hub 205 enables a third - party application 40 to request to resize its window (which may affect the layout of the containing page). This resizing can be done through dynamic layout processing, which will be described in more detail later. Alternatively, if a third - party application 40 is required to switch to another version, for example, to accommodate a change in display, the containing web page 203 can request this switch. This two - way communication can also be established between components of third - party application 40 and components of website building system 30 (which display additional information) related to third - party application 40, and between elements of multipart third - party application 40 and modular third - party applications as described above.

[0090] Furthermore, it should be understood that system 100 can also be implemented using both online and offline website building systems 30, and system 100 can use any combination of hosting methods (such as client - side elements, servers of vendors of website building system 30, servers of vendors of third - party applications 40, servers of other third - parties, etc.). It should be understood that even in the case of the offline embodiments described above, a server may be required to implement system 100.

[0091] Furthermore, system 100 can also be hosted on another set of servers (not operated by a vendor of a website construction system), such as a private site hosting system in a large organization.

[0092] Furthermore, system 100 can support all of the inclusion options for instances from the third - party application 40 described above. However, system 100 can also support only a subset of these options, or can impose restrictions on the inclusion options for instances of the third - party application 40.

[0093] Furthermore, system 100 can implement a multi - part third - party application 40. The multi - part third - party application 40 can include multiple display areas, each of which is processed using a separate iframe. These areas can also cooperate (as needed) through the communication hub 205, as will be described in more detail later.

[0094] Next, referring to FIG. 9, this figure shows an example of a multi-part third-party application 40. As shown, a third-party application [a] of a blog obtained from the AppStore [b] is placed in the containing web page 203 [c]. The third-party application [a] of the blog includes three regions, namely, a blog entry region [d], a tag cloud region [e], and a news update region [f]. It should be understood that a multi-part third-party application can use its multiple regions in various ways, for example, as multiple parts existing simultaneously of one application (as in the example of the blog above), or as multiple parts existing as options of one application (including multiple regions that are always displayed and multiple optional regions that are only displayed when requested). The display of the optional regions can be controlled by the third-party application 40 or by the designer 5 (who determines how to configure it when including the third-party application). Further, the display can also be controlled as a support function region such as a configuration region or an additional dialog region. Alternatively, the same applies to the display of a multi-version third-party application (for example, having a small version and a large version of the third-party application, or having a portrait version and a landscape version of the third-party application).

[0095] It should be understood that the functions described above can be implemented using iframes for the display of the elements of the third-party application 40, thus obtaining the encapsulation and security advantages of an iframe-based architecture.

[0096] Furthermore, to implement the multi-part third-party application 40, it is required that the third-party application 40 (inside each iframe) be able to control the display of the various iframes (e.g., the visibility, size, and position of the iframes). Furthermore, as will be explained in more detail later, it should be understood that the communication hub 205 can enable this display.

[0097] Furthermore, even when the multi-part third-party application 40 consists of a plurality of elements and regions (visually), in terms of purchase, installation, settings, etc. (e.g., in the App Store 25), it should be understood that this application 40 is still regarded as one third-party application 40.

[0098] In existing systems, each third-party application 40 is regarded as an individual entity, and the cooperation relationship between two third-party applications 40 (from the same vendor or collaborating vendors) has to be developed on a case-by-case basis for each system. It should be understood that the system 100 can also support a modular third-party application 40 consisting of multiple cooperating sub-modules that can be purchased and installed individually.

[0099] Next, referring to FIG. 10, this figure shows how a modular third-party application [a] for sales management can include, as sub-modules, a customer relationship management (CRM) module [b], a lead management module [c], and an e-commerce module [d]. The vendor of this one third-party application can provide all the necessary third-party application modules. Instead, the vendor of the third-party application can provide a subset of the modules (and functions) of the third-party application 40, and the designer can purchase and install complementary third-party application modules from the same or a different third-party application vendor. It should be understood that while a multi-part third-party application is obtained and installed as one third-party application from one vendor (a multi-part third-party application only occupies multiple screen areas), a modular third-party application includes multiple modules that can be obtained and installed individually, and in some cases, includes modules from multiple third-party application vendors. In order to enable the integration of multiple third-party application modules from multiple vendors, each third-party application module must provide a list of the interfaces / functions it requires and the interfaces / functions it provides. The list can be provided, for example, by using a list of interface names (e.g., My_CRM_TPA.NewClient.GetInfo) based on a dot-separated hierarchical naming notation and specifying the interface parameters.

[0100] The modules of the third - party application 40 can specify interfaces that are required as essential (i.e., interfaces without which the module does not function) or interfaces that are required as optional (i.e., interfaces without which the module functions but with limited or varying functionality provided). Thus, the parameters provided for each interface are a unique interface name, an explanation of the interface (shown to designer 5 so that designer 5 can recognize the functions handled by the missing interface (for example)), an essential / optional status, a list and type of interface parameters. It should be understood that each third - party application module still belongs to an individual iframe (or a set of iframes). The operation of the interface is based on a communication channel that will be explained in more detail later.

[0101] It should be understood that the modules of the third - party application 40 can be assembled during the design phase of the website. The website construction system 30 can resolve interface references for the addition of additional modules of the third - party application 40. In this case, the new module of the third - party application 40 resolves existing required interfaces, but in some cases, it adds new (unresolved) required interfaces.

[0102] Furthermore, it should be understood that designer 5 can edit and run the completed website while essential (and optional) interfaces are still unresolved. However, designer 5 cannot publish the created website until all essential interfaces are resolved. If an attempt is made to activate a function that requires hub 205 to start a third - party application module that still has unresolved essential interfaces, a message will be displayed.

[0103] Furthermore, it should be understood that the App Store 25 can include a searcher 26 that attempts to identify third - party application modules that resolve the interfaces of the required third - party application modules. The searcher 26 can search for a particular third - party application module or all third - party application modules based on the unresolved interfaces. Further, the searcher 26 can search based on interfaces that are not currently resolved or interfaces that have already been resolved, and furthermore, can search based on required interfaces, optional interfaces, or both types of interfaces. Further, it should be understood that the searcher 26 can be limited to resolving the unresolved interfaces of a particular third - party application and searching for a particular third - party application vendor. The searcher 26 can perform either a first - level search (i.e., a module that satisfies the interfaces that are not currently resolved) or a multi - level search (i.e., perform an iterative search and also look for modules that satisfy the unresolved interfaces that are added when considering the third - party application modules found by the previous search).

[0104] The system 100 can use the interface descriptions to provide the designer 5 with information regarding the importance of providing some of the missing interfaces. The hub 205 can provide interface conversion between non - compatible third - party applications that still need to communicate. This conversion can be done by an adapter module added by the provider of the web - site construction system 30 or an external vendor, and the adapter module adapts the required specified interfaces to another format.

[0105] Furthermore, the system 100 can be applied to an online application editing system, which uses the Internet (or any other network connection) and client-side software other than a browser to display the created online application. In such a system, it is not necessary to use specific technologies (e.g., IP communication, HTTP, HTML, etc.) used by a normal web infrastructure.

[0106] It should be understood that cross-domain communication can be facilitated using standard cross-domain communication methods known in this technical field. The following are examples of cross-domain communication methods.

[0107] HTML5 PostMessage: A standard feature of HTML5, using this feature can provide secure cross-domain messaging. When using HTML5 Windows.Postmessage, messages can be sent securely between windows, iframes, and the main HTML document even if they belong to different domains. PostMessage provides tools for the sending-side iframe to specify the domain of the message recipient and for the receiving-side iframe to verify the domain of the message sender.

[0108] Message URL fragment identifier: In this method, the URL fragment identifier is used to send message data from one endpoint to another. The data is encoded in plain text and added (as a fragment identifier) to the URL used to call a service at the target endpoint domain or an invisible iframe inside the target endpoint iframe. The fragment identifier is decoded by the code in the target service or iframe.

[0109] Dedicated communication web service: The website construction system 30 provides a dedicated web hosted on the server 20 of the website construction system. Various communication endpoints connect to this server to send messages or check if there are any waiting messages. This can be done by methods known in this technical field, such as the pre-HTML5 Comet set of technologies, HTML5-based WebSocket, or any other queuing, polling, server push, or similar techniques.

[0110] HTML5 local storage: In HTML5, a structured local storage function is provided, and by using this function, messages in the queue can be stored. However, only web content belonging to the same domain as the storing iframe can access the local storage. Solutions developed in this technical field include the underlying technology used by the Meebo XAuth product (now owned by Google), where a small server provides support for creating the required intermediate iframe, thereby enabling access to domain-specific local storage from iframes belonging to external domains.

[0111] HTML5 Local File Access API (Application Programming Interface): Similar to the method of using the local storage described above, a cross-iframe communication channel can be constructed using local files on the local storage of the user agent accessed through the HTML5 file access APIs (File API, FileWriter API, FileReader API). However, the sandboxed local file system created by the HTML5 file system access API is still only accessible from within the origin (origin-private), and thus an intermediate iframe / server component is required to overcome the same-origin restriction.

[0112] Dedicated browser plugin: A dedicated browser (or other user agent) plugin can be created to manage the cross-iframe message queue. Such a plugin must be installed by users of the website construction system 30 (at all levels), but provides the necessary services to all iframes and the main page of the website construction system 30.

[0113] It should be understood that the communication hub 205 can function as a broker in all iframe - to - iframe communications using any of the transfer methods described above. Further, it should be understood that the hub 205 can fully recognize the structure of the containing web page 203 and the detailed information of the third - party application 40 provided by the vendor of the third - party application 40 and stored in the property sheet 23. Further, the third - party application 40 can have different parameters when included in multiple different applications and in multiple different instances included within the same application (as described above). Such parameters include, for example, unique instance names that can be used for smart addressing (to be described in more detail later). Further, it should be understood that the hub 205 can also recognize additional detailed information of the third - party application 40 that is not stored in the property sheet 23.

[0114] Further, it should be understood that the hub 205 can facilitate smart addressing and smart identification, verify the communication source, apply communication policies, resolve non - compatibility issues of the third - party application 40, and even redirect from the third - party application 40 to components. Further, as will be described in more detail later, the hub 205 can enable dynamic updates of the layout in the third - party application 40 based on changes made to the containing web page 203.

[0115] Next, refer to FIGS. 11A, 11B, and 11C. FIGS. 11A and 11B show different embodiments of the hub 205, and FIG. 11C shows the functions of various elements of the hub 205.

[0116] The hub 205 can include a smart identifier / addresser 310, an originator verifier 320, a communication policy enforcer 330, a protocol converter 340, a redirector 350, a dynamic layout updater 360, a configuration manager 370, a general updater 380, and a wrapper 390 for the hosted API (Application Programming Interface). The functions of these elements will be described in detail later. It should be understood that all functions can be applied to all cross-domain communication channels (for example, the channel from the third-party application 40 to the website construction system 30, the channel from the third-party application 40 to another third-party application 40).

[0117] Next, referring to FIG. 11A, this figure shows a general embodiment of the hub 205 through an intermediate iframe [a], and the intermediate iframe communicates with the website construction system 30 using an internal communication API (Application Programming Interface). By doing so, a message [c] sent from, for example, a TPA (third-party application) [d] (using a communication API module [f]) to a TPA [e] (using a communication API module [g]) can be analyzed, verified, or modified in a way that applies application-specific information.

[0118] Next, referring to FIG. 11B, which shows an alternative embodiment where cross - domain communication is used in one or both of communication API module [a] (embedded in third - party application [c]) and communication API module [b] (embedded in third - party application [d]) without using an intermediate iframe. When handling communication message [f], modules [a] and [b] interact directly with website construction system 30 to receive and use application - specific information. As a drawback of this embodiment (when compared with the embodiment shown in FIG. 11A), a significant amount of information at the level of website construction system 30 may be processed inside the modules included in the third - party application and may be accessed (and possibly modified) by malicious third - party applications.

[0119] As described above, in all of the cross - communication methods described above, iframe addressing is based on the origin of the iframe (source domain, source protocol, source port, etc.), that is, when sending a message (to specify the receiving side) and when receiving a message (as the name of the sending side provided to the receiving side), the direct addressing of third - party application 40 is used. Further, to send a message, the sender is required to specify the target iframe window (using, for example, the JavaScript document.getElementById(“...”).contentWindow call or any other method). Thus, in existing systems, each third - party application 40 must include all the specific detailed information (including domain, protocol, port, iframe ID) of another third - party application 40 with which it communicates.

[0120] It should be understood that this type of direct addressing can be difficult to handle in the environment of system 100. Even if designer 5 integrates multiple third - party applications 40 from multiple third - party application 40 vendors who are not in partnership, the third - party applications 40 supplied by the third - party application 40 vendors may initially be hosted in a specific domain but may later move to another domain or sub - domain. The third - party application 40 vendors may change the protocol or port used to communicate with a specific third - party application. Designer 5 may be required to modify the design of the containing web page 203 that includes the third - party application 40. All of these can occur in third - party applications 40 used in a website that is in operation and accessed by a large number of users. Furthermore, one containing web page 203 may include multiple instances of one third - party application 40 that can perform different functions. For example, one page within a product support website may include two instances of a third - party application 40 for chat (one instance for user - to - user chat and forum, and the other instance used to consult a vendor's support staff when available).

[0121] It should be understood that the addresser / identifier 310 can fully recognize the structure of the containing web page 203 and the details of the third-party application 40 (provided to the website construction system 30 by the vendor of the third-party application 40). The addresser / identifier 310 addresses the source third-party application 40 or the destination third-party application 40 with the unique name of the third-party application 40 (registered in the AppStore 25), the descriptive ID of the instance of the third-party application 40 added to each instance of the third-party application 40 in the containing web page 203, thus enabling the addressing of multiple instances of the same third-party application 40, and the generic identifier of the type / class of the required third-party application (e.g., "message to the instance of the third-party application 40 for event logging in the containing web page 203") <x>Any of them can be used to provide to each other (e.g., "want to send"). Such an identifier can also describe a specific service to be supported by the third - party application 40. Further, the addresser / identifier 310 can use version indication information (e.g., "accounting package <y>is version <z>only when it is, accounting package <y>transaction to an instance <x>to be sent")

[0122] At runtime, the third - party application 40 only communicates with the hub 205. Therefore, it should be understood that the third - party application 40 only needs to recognize the direct address of the hub 205 and does not need to recognize the addresses of other third - party applications 40. This one direct address can be encapsulated by a communication API wrapper provided by the website construction system 30 to the provider of the third - party application 40 (such as communication modules f and g shown in FIG. 11A, and communication modules a and b shown in FIG. 11B). The calling third - party application 40 can provide its own (described above) descriptive address recognized by the application, and the addresser / identifier 310 can convert these addresses into the direct address of the third - party application 40 to perform routing. By doing so, the third - party application 40 does not need to maintain a table of the absolute addresses of all third - party applications 40 with which it can communicate.

[0123] Verification of the message sender is important. Without verification, it should be understood that the receiving third - party application 40 may receive messages from hostile third - party applications 40. Since all communications are performed via the hub 205, the sender verifier 320 can check the reliability of all input messages from third - party applications. Furthermore, the sender verifier 320 can provide additional information that can be added to the message and use this additional information to perform additional verification. Since each of all third - party applications 40 included in the AppStore 25 and used by the system 100 is registered with the website construction system 30, it should be understood that the hub 205 can check with the website construction system 30 whether the unique ID of the sender included in the message matches the sender (domain, port, etc.) of the message.

[0124] The third-party application 40 can define a general communication policy that may depend on external information or information in the included web page 203. The communication policy enforcer 330 can ensure that the corresponding communication policy is applied so that it is not necessary to handle communications that do not conform to the specification. For example, in a website that handles confidential information, a third-party application can be given a confidential level field in their profiles. A third-party application 40 that provides a back-end event logging database permitted to handle a confidential level X can define a policy of not accepting and logging events with a confidential level higher than X. In such a situation, the communication policy enforcer 330 can perform the necessary pre-filtering to prevent even messages with a high confidential level from reaching an application that can only handle a low confidential level.

[0125] Furthermore, it should be understood that designer 5 may wish to include two (or more) third - party applications on the same website created that can cooperate but do not actually cooperate due to protocol compatibility issues. Referring to FIG. 12, for example, as shown in this figure, a third - party application [a] of an online store may have a function of sending a purchase order message to a third - party application for procurement and shipping, such as third - party application [b] (provided by different vendors). However, the information provided by third - party application [a] may not include some fields that are not required in third - party application [b]. Such a situation should generally be resolved by the vendors of the third - party applications involved, but in some cases, such a resolution may not be possible (for example, one of the two third - party applications has not been updated at present for some reason). Protocol converter 340 can convert related messages from [a] to [b] (for example, by providing necessary additional fields). Such conversion can be performed by protocol converter 340 or may involve interaction with the website and the containing web page 203 in which the application is embedded (for example, when additional information is required).

[0126] Furthermore, it should be understood that third - party application 40 may have a function that requires it to send a message to another third - party application 40 or receive a message from such a third - party application 40 (for example, a pair of third - party applications 40 for the online store / purchasing described above). However, in some cases, part of the solution may not exist. In the above example, there may be no corresponding or appropriate third - party purchasing application 40. In such cases, by using the redirector 350, the designer 5 can specify to route a particular message to a component of the containing web page 203 or route a particular message from a component of the containing web page 203, and resolve the equivalent function by the components of the containing web page 203 and the functions that the components can provide. Thereby, a complete website can be constructed without the need to build a dedicated third - party application 40. Thus, a transaction can be sent to a component of the website construction system 30 that can log the transaction in a database, and this database can be used later (by another program) to perform offline purchasing and shipping.

[0127] The third - party application 40 can provide multiple configurations with different capabilities that use the same codebase but have different functions enabled. For example, the third - party application 40 can provide basic functions through a free version and additional functions through a purchased premium version, multiple paid versions, or purchased additional features of the third - party application 40.

[0128] It should be understood that the system 100 can include functions based on the website construction system 30 that manage the purchase status of third - party applications 40 for each user (actually for each designer). Further, all designers can be made registered users of the website construction system 30, and thus it should be understood that the website construction system 30 can manage a database of the purchase status of third - party applications 40 for each designer 5. This information can be stored in the property sheet 23 by the TPA coordinator 24 in the design stage and by the configuration manager 370 at runtime. For example, the third - party application 40 can send a version query message to the client - side element of the website construction system 30. The client - side element of the website construction system 30 queries the repository 22 or a copy of the repository cached locally and returns a response message containing information about the capabilities that the third - party application 40 should provide to the third - party application 40.

[0129] In an alternative implementation, the website construction system 30 can provide the necessary configuration information (such as encrypted iframe parameters) of the third - party application 40 to the third - party application 40 via an alternative channel without requiring a prior query message.

[0130] As described above, the third-party application 40 can communicate directly with specific components of the contained web page 203. The third-party application 40 can identify the destination component in various ways, that is, directly identify the component based on the associated template (as will be described in more detail later), or identify it through an access ID explicitly specified for a specific component of the contained web page 203 by the designer 5, or identify it by following the (optionally provided) component model provided to the third-party application 40 by the contained web page 203.

[0131] It should be understood that at runtime, the updater 380 can implement messages and responses between the components of the contained web page 203 and the third-party application 40. For example, the third-party application 40 can change or modify (query) the visual / display attributes (such as the position, size, color, transparency, etc. of the component) of the components of the contained web page 203. Further, the updater 380 enables the third-party application 40 to read or write the content of the components of the contained web page 203, and furthermore, enables the third-party application 40 to instruct components that execute media functions (for example, pass a specified audio segment or video segment to a media player component, or request the media player component to pause playback for a specified period).

[0132] Furthermore, the updater 380 makes it easier for the components of the website construction system 30 to specify the types of access permitted to third - party applications 40, in a manner similar to how access permission bits and access control lists (ACLs) function to protect files in recent operating systems. Such permissions can be defined for each component so as to apply to all third - party applications 40, third - party applications 40 from a particular vendor, or a particular third - party application 40. For example, a third - party application 40 can be allowed to access text fields outside of the third - party application 40 within the contained web page 203. In the case of a blog's third - party application 40, this text field can be used to edit blog entries, and a screen area larger than the screen area that can be provided inside the area of the blog's third - party application 40 itself is provided. In the case of a third - party application 40 embedded in a particular mini - page inside a multi - page container, it should be understood that the website construction system 30 can restrict access from the third - party application 40 to only the components within that particular mini - page.

[0133] Furthermore, it should be understood that the updater 380 enables third - party applications 40 to affect elements across the site. For example, this includes processes of obtaining and setting attributes such as the current page within the site, the current mini - page within a container containing the third - party application 40, and the page history. Furthermore, the updater 380 can filter or restrict such requests.

[0134] Furthermore, the updater 380 enables the website construction system 30 to change and modify the style and display of third - party applications 40. The updater 380 can perform calls used when the website construction system 30 provides formatting and style guidelines to the third - party application 40. The guidelines can include properties such as color and color schemes, fonts, font sizes, transparency, animations, and special effects (e.g., blurring). Color schemes can include, in particular, general color schemes (e.g., using the following x colors) and high - level color schemes (e.g., using color x for text and color y for frames).

[0135] One preferred way to represent complex style information is to use Cascading Style Sheets (CSS), and it should be understood that Cascading Style Sheets can represent combinations of multiple style directives such as fonts, sizes, and colors. The updater 380 can send such CSS - based messages to the third - party application 40. The style sheet can be essentially general - purpose or can include specific style names defined by the third - party application 40, and thus the website construction system 30 can provide more appropriate guidelines to the third - party application 40 (e.g., the style sheet can provide these guidelines with reference to elements of a specific third - party application 40).

[0136] As a result, the third-party application 40 can use these guidelines to create its own look and feel that fits well with the containing web page 203. This is particularly important for third-party applications 40 that are included in multiple containing web pages 203 within the same site or are visible from multiple containing web pages 203 (multi-port inclusion as described above). Multiple containing web pages can adopt different color schemes and basic designs. The third-party application 40 can use the information provided through these style messages to adapt its display colors and styles to fit well with each containing page, avoiding the display of color schemes that do not harmonize with the containing web page or the occurrence of a non-harmonious look and feel compared to the containing web page.

[0137] It should be understood that the dynamic layout updater 360 enables cooperation between the website construction system 30 and third - party applications 40, or between third - party applications 40 and auxiliary third - party applications when processing display changes as a result of dynamic layout events. The website construction system 30 can change the size and position of components within a page for the purpose of maintaining the page design when an event occurs that changes some of the components within the page. These dynamic layout events include, for example, viewing a website on a screen with a different size, rotating a display device between portrait and landscape modes, changing the size or position of some components, changing the content of a specific component (which results in a required size change of the component). Further, dynamic layout events include updates of server - based content (e.g., in a component that displays information from a data feed), or component updates due to changes in content by another concurrent user of the same website. Additionally, it should be understood that dynamic layout events can occur not only in the design environment but also in the runtime environment. In particular, depending on the components and third - party applications 40, the content, size / position of the components can be changed not only by the designer but also at runtime (i.e., by the end - user).

[0138] Furthermore, it should be understood that dynamic layout events can also be generated by third - party applications 40. For example, in a third - party application 40 of an online shop, when a user moves from the display of a product catalog to the display of a shopping cart (having different sizes), a size change may be required. As another example, a third - party application 40 of a product catalog may include an option for highlighting a product, and due to this option, the third - party application 40 may display a larger catalog page containing more content. As a further example, there is a multi - area third - party application 40 that can start or stop the display of additional areas.

[0139] Refer now to FIG. 6 above. In an existing system, such a situation, if handled at all, is generally processed by truncating the display of a third-party application in mid-stream, adding a scroll bar to the display, or simply resizing the display as a pop-up window that hides other components of the page as shown in FIG. 6. The dynamic layout updater 360 can implement a collaborative dynamic layout, in which case the website construction system 30 and the third-party application 40 cooperate to perform the dynamic layout while maintaining the basic design of the containing web page 203. The functionality of the dynamic layout is further described in Patent Document 1 (filing date: February 20, 2013, assigned to the common assignee of the present invention). However, even in a system that supports a collaborative dynamic layout, the dynamic layout mechanism in the containing web page 203 does not fully control the internal layout of the third-party application 40. Furthermore, widgets of the website construction system 30 may be designed to be resizable (within a certain range), but the third-party application 40 may not support arbitrary resizing. The third-party application 40 may provide any combination of, for example, multiple display settings having different sizes (e.g., displaying more or less detailed information), a function to resize some of the internal elements of the third-party application 40, and a function to display some of the text elements of the third-party application 40 using multiple font sizes.

[0140] Furthermore, third-party application 40 may have a limited number of possible display sizes available and may have a range of possible sizes. Thus, a resize request from the containing web page 203 to the third-party application 40 can be resolved by having the third-party application 40 switch to the nearest possible size or by having the third-party application 40 provide a list of possible sizes (whereby the website construction system 30 can select the appropriate size to use).

[0141] The dynamic layout updater 360 can implement a collaborative dynamic layout from [the containing web page 203 to the third-party application 40] using the following sequence.

[0142] For example, it may be necessary to resize a third-party application 40 embedded in the containing web page 203 to a specific desired size (e.g., X1*Y1 pixels). The dynamic layout updater 360 can send a message to the third-party application 40 requesting that the third-party application 40 resize its content to the specific desired size (e.g., X1*Y1 pixels). The third-party application 40 can be adjusted to the specified size by using alternative display settings, internal resizing processes, internal dynamic layout processes, or any other means. Further, it should be understood that the containing web page 203 can resize the external iframe window containing the third-party application 40 to a new size (X1*Y1).

[0143] Furthermore, it should be understood that the third-party application 40 may only be able to resize to a limited set of possible sizes (e.g., a specific user interface configuration). Thus, the dynamic layout updater 360 can use the following alternative algorithm where the third-party application 40 can provide a set of possible sizes.

[0144] The containing web page 203 is resized, and the dynamic layout updater 360 sends a message to the third-party application 40 requesting that the third-party application 40 resize its content to a specific desired size (X1*Y1). The third-party application 40 determines the closest possible size (e.g., X2*Y2 pixels) and resizes to that size by using alternative display settings, internal resizing processing, internal dynamic layout processing, or any other means. The updater 380 then sends a response message containing the confirmation of the resizing process to the containing web page 203 and can provide the actual new size (X2*Y2). The containing web page 203 can resize the external iframe window containing the third-party application 40 to the actual new size (X2*Y2). The containing web page 203 can continue the dynamic layout processing based on the actual new size (X2*Y2).

[0145] In particular, it should be understood that another embodiment is applicable when there are multiple third-party applications 40 (or multi-region third-party applications 40) within the containing web page 203. In this embodiment, the containing web page 203 can query the embedded third-party application 40 to obtain a list of display sizes so that the embedded third-party application 40 can attempt to optimize the appearance / feel considering multiple options of the multiple third-party applications 40. This embodiment is also relevant when the third-party application 40 is displayed across multiple regions.

[0146] The containing web page 203 performs dynamic layout processing and recognizes that one or more third-party applications 40 (TPA[1] to TPA[n]) are embedded in the containing web page 203 and should be resized using the following algorithm.

[0147] Loop from 1 to n for i.

[0148] For each TPA[i], determine the following.

[0149] Minimum size Xmin[i] * Ymin[i], Maximum size Xmax[i] * Ymax[i], Optimal size Xopt[i] * Yopt[i], The dynamic layout updater 360 can send a message listing the above minimum / maximum / optimal sizes to TPA[i] and request information about the possible sizes of the third-party application 40.

[0150] The third-party application 40 can provide the dynamic updater 360 with a set of possible size options (Xposs[i][j] * Yposs[i][j]) that it can adopt.

[0151] The containing web page 203 can calculate the solution of the dynamic layout calculation by using, for example, a complete evaluation of all possible combinations of the sizes of the third-party application, linear programming, or any other method used by a dynamic layout algorithm based on the Xposs[][] / Yposs[][] information collected as described above.

[0152] Store the results for all TPA in Xfinal[i] / Yfinal[i].

[0153] Loop from 1 to n for i.

[0154] The containing web page 203 sends a resize message containing Xfinal[i] / Yfinal[i] to TPA[i].

[0155] The containing web page 203 resizes the external iframe window containing TPA[i] to Xfinal[i] / Yfinal[i].

[0156] The containing web page 203 continues dynamic layout processing based on the actual new size.

[0157] It should be understood that in dynamic layout processing, generally, not only is the third-party application 40 simply resized, but the third-party application 40 may be required to be moved. However, the third-party application 40 should remain invariant with respect to the exact position of its frame inside the containing web page 203.

[0158] As described above, the third-party application 40 may need to change the size of its display window from time to time. Since the size of the window that displays the iframe is managed by the hosting page (i.e., the containing web page 203), the change in the window size of the third-party application 40 must be executed by the containing web page 203. In this case, the third-party application 40 requests the containing web page 203 (via the dynamic layout updater 360) to change the window size.

[0159] Furthermore, it should be understood that the third-party application 40 can also request (via the dynamic layout updater 360) to change its position inside the containing web page 203. In this case, the third-party application 40 is not internally affected (as in the case of size change), but a change in the display inside the containing web page 203 is requested. The dynamic layout updater 360 can integrate this request with the dynamic layout. The containing web page 203 can activate the dynamic layout updater 360 to change the window size (and possibly the position of the window) of the third-party application 40 and send confirmation of the size and position change to the third-party application 40.

[0160] It should be understood that the hub 205 can also implement additional messages specific to the class of the third - party application 40, or additional messages specific to the third - party application 40, as the web - site construction system 30 itself, or a specific containing web page 203, or additional messages that an auxiliary third - party application 40 can affect the third - party application 40. For example, a third - party application 40 for a blog may define an input message that can post a new blog entry or a new response to a current blog entry. Such a message can be used by the containing web page 203 (e.g., as a way to post a blog entry from a large editing field outside the area of the third - party application). Further, such a message can also be used for links between higher - level applications, whereby, for example, a support third - party application can post a blog entry to the blog third - party application.

[0161] It should be understood that in the third - party application 40, designers who use the third - party application 40 within their own sites often require a wide range of complex services for use within or downstream of the third - party application 40. Such services include user management and billing and shipping management. The vendor of the web - site construction system 30 may not be able to provide such services as part of the web - site construction system (e.g., due to technical problems or business reasons). Further, these services may not be suitable for being "packaged" as a third - party application 40 alone. Additionally, the vendor of the third - party application 40 may need to provide designers who use the third - party application 40 with options to offer multiple such services (e.g., multiple third - party billing APIs) so that the designer 5 can select and use the appropriate services.

[0162] For example, in the website building system 30, an API hosted by Paypal TM can be provided, and this API can be directly used by the third-party application 40, or can be provided to the designer 5 who uses this API by the third-party application 40. Further, the third-party application 40 can provide its own set of options (i.e., use specific billing types such as per-unit billing, automatic renewal billing, revenue sharing), and can also implement these options by calling the hosted Paypal API.

[0163] Therefore, the designer 5 using the website building system 30 can develop a specific service that uses advanced billing (such as an online store that sells music). The designer 5 can avoid the need to negotiate a specific settlement agreement or merchant agreement with the provider of the billing API by directly using the hosted billing API or through a third-party application 40 that provides an additional level of abstraction (or abstraction layer). In this sense, the website building system 30 can act as an agent for the vendor of the hosted API.

[0164] The wrapper 390 of the hosted API can facilitate this communication between multiple different parts of the system (e.g., the website building system 30, the hosted API code, the included third - party applications 40). It should be understood that the API wrapper layer and the actual API implementation can belong to either the website building system 30 itself or another third - party application 40. The vendor (or designer 5) of the third - party application 40 can use the hosted API through the wrapper 390 of the hosted API without recognizing how the actual underlying API is implemented.

[0165] In a supplementary alternative embodiment of the present invention, the applicant further recognizes that a smart integration between the website building system 30 and one or more third - party applications 40 can be achieved by using an integration model in which additional templates and components of the website building system are associated with third - party applications at the level of the AppStore 25 and with instances of the associated third - party applications. The third - party applications 40 can also communicate with these components (and non - associated components) to exchange data and control messages. As described above, the third - party application area 40 within the containing web page 203 is an individual iframe in which the content is hosted in a separate domain (the domain of the vendor of the third - party application or otherwise) different from the domain on which the main site is hosted. Therefore, the browser's "same - origin policy" applies to communication between multiple different iframes, and the methods described above are required to be used.

[0166] In an existing system, the third-party application 40 is implemented as an integral and inflexible object that is included in the containing web page 203 but otherwise does not affect the appearance / feel of the containing web page 203 itself. Instances of the third-party application 40 are placed within a (generally rectangular) area and perform all of their operations / functions within this area.

[0167] Furthermore, the applicant has recognized that this concept can be extended by having (optional) additional templates (referred to as associated templates according to embodiments of the present invention) of the website construction system 30 associated with the third-party application 40. This association can be performed at the time of development or publication of the third-party application 40 and presented to the designer 5 as part of the selection / purchase process of the third-party application 40 (from the App Store 25) and the creation of an instance of the third-party application 40. The third-party application (TPA) coordinator 24 can obtain the template associated with the third-party application 40 (as part of an application repository managed by the App Store 25 or provided by the vendor of the third-party application 40) and store the template in the repository 22 so that it can be used later as described above.

[0168] It should be understood that the system 100 can support the publication of third-party applications 40 having a plurality of associated templates, whereby the designer 5 can select the optimal template as needed.

[0169] When creating an instance of the third-party application 40 within the containing web page 203, it should be understood that the components within the associated template can be merged with the containing web page 203 and displayed together with other components within the containing web page 203.

[0170] Next, referring to FIG. 13, this figure shows an example of the use of an associated template according to an embodiment of the present invention. As shown, the third-party application [a] is located within the AppStore [b] together with the associated template [c] that includes the components [d] and [e]. When the third-party application [a] is included in the containing web page 203 [f], it should be understood that the third-party application [a] can be displayed in the designated area [g] inside the page [f], and the instances [d'] and [e'] of the components [d] and [e] can be displayed on the page [f] together with the pre-existing components [h] and [i].

[0171] It should be understood that system 100 can support multiple ways of placing instances of associated template components (e.g., [d’] and [e’] above) within containing web page 203[f]. The placement methods include absolute placement (i.e., using the sizes and positions of the original components [d] and [e] specified in the associated template [c]), target-based placement (i.e., adjusting the sizes and positions of the new instances [d’] and [e’] according to containing web page 203[f]), and third-party application 40-based placement (i.e., adjusting the sizes and positions of the new instances [d’] and [e’] based on the sizes and positions specified for the instance [g] of the third-party application inside containing web page 203[f]). The placement method to be adopted can be determined based on the settings included with the associated template [c], and designer 5 can use another placement method if necessary.

[0172] Furthermore, it should be understood that designer 5 can modify the instances of components [d] and [e] in [f] that are inherited from template [c]. The changes apply only to the use of [d] and [e] in [f] (and, in some cases, the pages inherited from within website construction system 30 that supports inter-page inheritance), and do not affect the "original" template [c] associated with third-party application [a] within AppStore [b].

[0173] As changes to the instances of [d] and [e] above, it should be understood that, in particular, it may involve assigning specific content (such as text, images, etc.) to the instance of the field or changing normal attributes. Further, referring to FIG. 14, when the third-party application 40 is included inside the mini-page, as shown in FIG. 14, it should be understood that the associated template is applied to the specific mini-page in which the third-party application 40 is included. As shown in the figure, the third-party application 40 is included in the mini-page [x], and thus the components [d] and [e] are added to [x], but not to the further mini-pages [y] and [z] of the same multi-page container [g].

[0174] Furthermore, in the case of a section-type mini-page, it should be understood that the associated template (if any) is applied to the virtual (and empty) containing web page 203 created to include the third-party application 40.

[0175] In an alternative embodiment, the associated template created in advance can be applied to a newly created page or mini-page that is "parallel" to the containing web page 203. This newly created page or mini-page can be initialized by the template and modified as needed.

[0176] Furthermore, in the website construction system 30, multi-port inclusion is also possible. In this case, the same instance of the third-party application 40 is visible from multiple pages of the main site and "belongs" to these pages. Multi-port inclusion is different from multiple inclusions of a specific third-party application 40 within the main site (creating multiple instances of the third-party application 40). Therefore, the content of the third-party application 40 (which is specific to the instance) is shared among multiple displays of the same multi-port third-party application 40.

[0177] In such multi-port inclusion, the associated templates can be individually applied to each of the pages and mini-pages where instances of the third-party application 40 are added.

[0178] As described above, the system 100 can provide a two-way communication link between the third-party application 40 and components within the containing web page 203. It should be understood that such components include components of the containing web page 203 as a result of merging associated templates from the third-party application, and components not related to such associated templates.

[0179] Therefore, it should be understood that the vendor of the third-party application 40 can generally create a plurality of templates associated with the third-party application 40 provided by the vendor. These templates include test templates, development templates, and other templates in addition to the actually distributed templates (i.e., those associated with the third-party application version being distributed at that time).

[0180] As described above, the third-party application 40 can be distributed through the App Store 25 and can also be distributed through alternative channels that are not related to or managed by the vendor of the website construction system 30. However, the associated templates distributed with the third-party application 40 may be strongly associated and coupled to the application repository 22 because the associated templates are constructed using components, base templates, and other elements managed by the website construction system 30.

[0181] Furthermore, elements of the website building system 30 that form the basis of such individually distributed associated templates may have to be modified or deleted (which may cause the associated templates to "break" in some cases). To solve this problem, the system 100 can implement these associated templates in individual areas inside the application repository 22 (optionally, for each vendor of the third-party application 40). The website building system 30 can manage these templates in the same way as other templates of the website building system 30.

[0182] Furthermore, the vendor of the third-party application 40 can be provided with a unique ID (development ID) for each template created, and it should be understood that the vendor of the third-party application 40 can use this ID during the development and test processes of the third-party application 40. When the third-party application 40 is published / distributed, the vendor of the third-party application 40 may be required to apply for and receive a substitute unique ID (publication ID), and the vendor can reference that ID in the published third-party application 40. When the publication ID is provided, an individual locked copy of the template is created. This copy is the one referenced by the third-party application 40 and used when creating an instance of the third-party application 40. By doing so, the vendor of the third-party application 40 is prevented from accidentally modifying the template associated with the "raw" third-party application 40 (as included by the designer), and referential integrity is maintained. Additionally, the system 100 can cross-reference the relationship between such a locked template and the underlying components and base templates. By using this cross-reference, for example, if a component or base template of the website construction system 30 included in such a locked template is about to be modified (and such a modification could potentially break the template or the third-party application 40 in some way), the staff of the website construction system 30 can be warned.

[0183] Accordingly, system 100 can provide a two-way communication channel between third-party application 40, components within contained web page 203, and website construction system 30. The components of contained web page 203 can be based on one or more templates associated with the third-party application, or based on another template of website construction system 30, or can be template-independent.

[0184] The processes and displays described herein are not inherently related to any particular computer or other apparatus. Various general-purpose systems can be used in combination with programs based on the teachings herein, or it may be convenient to construct a dedicated apparatus for performing the desired method. The desired structure of various of these systems will be apparent from the above description. Further, embodiments of the invention have not been described in connection with any particular programming language. It will be understood that various programming languages can be used for the purpose of implementing the teachings of the invention described herein.

[0185] Unless otherwise specified, as will be apparent from the foregoing description, throughout this specification, description using terms such as "processing," "computing," "determining," etc. refers to the actions and processes of a computer, computing system, or similar electronic computing device (an apparatus that manipulates or transforms data represented as physical quantities, such as electronic quantities within the registers and memories of a computing system, into other data similarly represented as physical quantities within the memories, registers, or other such information storage devices, transmission devices, display devices of the computing system).

[0186] Embodiments of the present invention can include an apparatus that performs the operations and actions described herein. This apparatus can be specifically constructed for a desired purpose, or the apparatus can comprise a general-purpose computer selectively activated or reconfigured by a computer program stored in a computer. Such a computer program can be stored in a computer-readable storage medium, such as, but not limited to, any type of disk (e.g., floppy (registered trademark) disk, optical disk, magneto-optical disk, etc.), read-only memory (ROM), compact disk read-only memory (CD-ROM), random access memory (RAM), electrically programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), magnetic or optical card, flash memory, or any other type of medium suitable for storing electronic instructions and capable of being coupled to a computer system bus.

[0187] Although specific features of the present invention have been illustrated and described thus far, many modifications, substitutions, changes, and equivalents will be apparent to those of ordinary skill in the art. Accordingly, it is to be understood that the appended claims are intended to cover all such modifications and changes as fall within the true spirit of the present invention.< / x> < / y> < / z> < / y> < / x>

Claims

1. An apparatus for a website construction system (WBS), wherein the apparatus is a page composer that enables a designer of the WBS to create pages of a website, the pages having at least two third-party applications embedded therein as instances, a page composer; a property sheet that stores at least configuration, formatting, and style guidelines regarding implementation and display of components for instances of the at least two third-party applications, the property sheet including at least configuration data, options, and a list of mandatory components and interface specifications for communication between the at least two third-party applications, a property sheet; including the page composer includes a linker that specifies communication channels and display rules between components of the page and at least one of the at least two third-party applications, and between a first third-party application and a second third-party application, an apparatus.

2. The apparatus according to claim 1, which is installable on at least one of a client and a server.

3. The apparatus according to claim 1, wherein the configuration data is at least one of display properties, access permissions, payment details, and installation procedures of the at least two third-party applications.

4. Instructions for mandatory display and optional display include at least one of a component identifier and a description of the component, the apparatus according to claim 1.

5. The apparatus according to claim 1, wherein the communication channel is a broadcast link.

6. The apparatus according to claim 1, wherein the property sheet and the linker are manually updatable by the designer.

7. The apparatus according to claim 1, wherein the at least two third-party applications are embedded in the page using at least one of server-side processing, client-side processing, and iframes.

8. The apparatus according to claim 1, further including a hub embedded in the page to provide a two-way backchannel for the communication channel.

9. A method for a website construction system (WBS), wherein the method comprises: enabling a designer of the WBS to create a page of a website, the page having at least two third-party applications embedded therein as instances; storing in a property sheet at least configuration, formatting, and style guidelines regarding implementation and display of components for instances of the at least two third-party applications, the property sheet including at least configuration data, options, and a list of mandatory components and interface specifications for communication between the at least two third-party applications; wherein the enabling includes specifying communication channels and display rules between components of the page and at least one of the at least two third-party applications, and between a first third-party application and a second third-party application.

10. The method according to claim 9, wherein the configuration data is at least one of display properties, access permissions, payment details, and installation procedures of the at least two third-party applications.

11. The method according to claim 9, wherein the instructions for mandatory display and optional display include at least one of a component identifier and a component description.

12. The method according to claim 9, wherein the communication channel is a broadcast link.

13. The method according to claim 9, wherein the property sheet and the specifying are manually updatable by the designer.

14. The method according to claim 9, wherein the at least two third-party applications are embedded in the page using at least one of server-side processing, client-side processing, and iframes.

15. The method according to claim 9, further comprising providing a bidirectional back channel via a hub embedded in the page for the communication channel.

Images