System and method for automated conversion of interactive site and application to support mobile and other display environment

Abstract

To provide a converter that is implementable via a client / server system having at least one processor to process instructions defining such a converter.SOLUTION: An initial layout converter 200 that is implementable via a client / server system having at least one processor to process instructions defining such a converter includes: a page receiver to receive a website page from a website building system, the website page having a source layout for a source display area, and also having an object model representation of components; and a processor to determine an order and set of relations among the components, and to create a target layout of the website page for a target display area. The target layout is based on a semantic analysis and reconciliation of the determined order and set of relationships, and the source display area has different attributes to those of the target display area.SELECTED DRAWING: Figure 1

Description

Technical Field

[0001] The present invention relates to the conversion of interactive applications and, in particular, to mobile platforms.

Background Art

[0002] With the advent of the Internet, in recent years, users have increasingly accessed websites and interactive applications using smartphones, tablets, and other mobile devices. These devices are gradually replacing or complementing both full-featured desktop personal computers and older, less capable "feature phones." This applies not only to websites existing on the World Wide Web but also to other interactive applications available from many application stores provided by large companies such as Apple, Google, Microsoft, and Amazon today.

[0003] The display form factors and features of websites and interactive applications vary depending on where they are viewed (e.g., on a desktop PC, a small mobile device, and a medium-sized mobile tablet).

Prior Art Documents

Patent Documents

[0004]

Patent Document 1

Patent Document 2

Patent Document 3

Summary of the Invention

Problems to be Solved by the Invention

[0005] According to a preferred embodiment of the present invention, a converter executable via a client / server system having at least one processor for processing instructions defining the converter is provided. The converter has a receiving unit for receiving a website page from a website construction system, the page having a source layout for a source display area, the page having an object model representation of components. The converter also has a processor for determining an order and a set of relationships between the components and forming a target layout of the website page for a target display area, the target layout being based on semantic analysis and mediation of the determined order and set of relationships, the attributes of the source display area being different from the attributes of the target display area.

[0006] Furthermore, according to a preferred embodiment of the present invention, the converter has a re-conversion converter that combines modifications to the source layout and the target layout, taking into account modifications made independently to the target layout, to form an updated target layout configuration.

[0007] Furthermore, according to a preferred embodiment of the present invention, the processor has a pre-processor that analyzes object properties of the components and modifies the suitability of the presentation of the object properties on the target display area, a super-node forming unit that identifies positions of groups of the components that should remain together and forms a hierarchy of super-nodes based on the positions of the components and content relationships of the components. The processor also has an orderer that determines an order of elements within each of the super-nodes, a placer that positions the elements within the target layout based on the determined order and at least one of the groups, and a post-processor that adjusts the positioned elements before display.

[0008] Furthermore, according to a preferred embodiment of the present invention, the component is at least one of an atomic component, a single-page container component, and a multi-page container component.

[0009] Furthermore, according to a preferred embodiment of the present invention, the converter is executable on at least one of a client, a server, and a third-party server.

[0010] Furthermore, according to a preferred embodiment of the present invention, the preprocessor has at least one of a template operation unit that modifies an instance of the component in a template, a component filter unit that filters the component not suitable for the target layout, a component adaptation unit that adapts the component to the target layout, a component adjustment unit that adjusts the component according to the target layout, and a component analysis unit that analyzes the attribute of the component to determine the appropriateness of the usage of the component.

[0011] Furthermore, according to a preferred embodiment of the present invention, the super node forming unit includes a duplicate group position specifying unit that specifies the positions of groups of the components when the components largely overlap with each other, and replaces the groups with virtual elements according to a grouping criterion; and a predefined group position specifying unit that specifies the positions of groups of the components according to at least one hint of a template, an application, a page, or a component level, and replaces the groups with virtual elements according to a grouping criterion. The super node forming unit also includes a text over image group locator that specifies the positions of the components when the components are text components superimposed on a specific background image, and replaces the groups with virtual elements according to a grouping criterion; a scorer that determines a certainty score regarding the accuracy of the duplicate group position specifying unit, the predefined group position specifying unit, and the text over image group locator; and a node forming unit that forms a hierarchy of super nodes based on the components and the virtual elements.

[0012] Furthermore, according to a preferred embodiment of the present invention, the ordering unit includes a basic ordering unit that determines the order of the elements of the super node according to a pre-defined order criterion, a partial order set position identifying unit that analyzes at least one of the meaning, content, attributes, editing history, and geometric shape of the elements of the super node, a scorer that determines a certainty score regarding the accuracy of the basic ordering unit and the partial order set position identifying unit, and an order integration unit that integrates the order determined by the basic ordering unit with the detected partial order set whose position is identified by the partial order set position identifying unit to form a combined modified order. Furthermore, according to a preferred embodiment of the present invention, the post-processor includes an automatic addition component insertion unit that inserts at least one of an automatic addition component and a mobile-related component, and a dynamic layout adjustment unit that performs at least one of forming, modifying, and removing a dynamic layout anchor, wherein the dynamic layout anchor is adjusted according to the target layout. Furthermore, according to a preferred embodiment of the present invention, the basic ordering unit includes at least one of a primary direction ordering unit that arranges the elements of the super node in order according to at least one of rows and columns, a primary direction with split and merge orderer that arranges the elements of the super node in order according to at least one of rows and columns and tracks any row / column separation and combination, and a horizontal / vertical slicer that alternately slices the elements of the super node in the horizontal and vertical directions to form an internal tree of division sections and defines the order of display of the elements.

[0013] Furthermore, according to a preferred embodiment of the present invention, the positioning unit includes a hint interpretation unit that interprets hints attached to the elements of the super node, a line break formation unit that forms line breaks according to the hints formed by the node formation unit and the ordering unit, a size adjustment unit that applies adjustment of at least one of width and height to the elements of the super node, and a size change unit that changes the size of the decorative image.

[0014] Furthermore, according to a preferred embodiment of the present invention, the partial order set position specifying unit includes a cluster partial order set position specifying unit that detects a cluster partial order set when the elements of the super node are closer to each other than the normal interval between the elements in the super node, a semantic relationship partial order set position specifying unit that detects a semantic relationship partial order set when a specific combination of the elements of the super node of a predetermined type that are close to each other exists, a pattern partial order set position specifying unit that detects a partial order set when a set pattern exists between the elements of the super node, a predefined partial order set position specifying unit that detects a partial order set based on at least one of the definition of grouping related to existing editing, existing dynamic layout anchor information, and reuse of various component sets of a component template, and a partial order set position specifying unit based on edit session information that detects a partial order set of the elements of the super node based on information collected from a previous edit session.

[0015] Furthermore, according to a preferred embodiment of the present invention, at least one of the automatically added components and the mobile-related components includes at least one of widgets, navigation menus, advertisements, and sales promotion materials specific to the target device.

[0016] Furthermore, according to a preferred embodiment of the present invention, the converter has a pattern partial order set position identifier, and the horizontal / vertical slicer determines the slice direction of the elements of the supernode based on at least one of the number of dividers, the size of the gap found in a predetermined projection direction, the identified pattern partial order set, and the alignment quality to the axial projection in both the horizontal and vertical directions. The element divider. Furthermore, according to a preferred embodiment of the present invention, the component filter unit has a removal unit for removing components not suitable for display in the target layout and a hiding unit for hiding components not suitable for display in the target layout.

[0017] Furthermore, according to a preferred embodiment of the present invention, the component adaptation unit has a modification unit for modifying the size and width of the component, an integration unit for integrating menu components, a content update unit for updating content-related adaptations, a forming unit for forming a composite menu, and a character converter for converting character-based graphics.

[0018] Furthermore, according to a preferred embodiment of the present invention, the component adjustment unit has a mapping unit for forming a font size mapping between the source layout and the target layout.

[0019] Furthermore, according to a preferred embodiment of the present invention, when the component is an image component, the component analysis unit has an image stitcher for stitching the components into a single image and a decorative image operation unit for distinguishing decorative images.

[0020] Furthermore, according to a preferred embodiment of the present invention, the re-conversion converter includes a page deletion unit that deletes the page from the target layout when the page is deleted from the source layout, a page addition unit that adds the page to the target layout when the page is added to the source layout, a component deletion unit that deletes the component from the target layout when the component is deleted from the source layout, a component addition unit that adds the component to the target layout when the component is added to the source layout, a component modification unit that modifies the component in the target layout when the component is modified in the source layout, and a mobile operation unit that operates the modification to the target layout when the modification to the target layout is independent of the modification to the source layout.

[0021] Furthermore, according to a preferred embodiment of the present invention, the component addition unit includes a parent / ancestor search unit that searches for at least one of the closest ancestor component and the parent component closest to the component added to the source layout, and a mobile layout addition unit that inserts the added component into the target layout according to the positions of at least one of the closest ancestor component and the parent component.

[0022] According to a preferred embodiment of the present invention, it includes the steps of receiving a website page from a website construction system, wherein the website page has a source layout for a source display area and the website page has an object model representation of components, and determining the order and set of relationships between the components and forming a target layout for a target display area of the website page, wherein the target layout is based on semantic analysis and mediation of the determined order and set of relationships, and the attributes of the source display area are different from the attributes of the target display area.

[0023] Further, according to a preferred embodiment of the present invention, the method also includes combining the modifications to the source layout and the target layout, taking into account the modifications made independently to the target layout, to form an updated target layout configuration.

[0024] Further, according to a preferred embodiment of the present invention, the determining and forming steps include analyzing the object properties of the components and modifying the suitability of the presentation of the object properties on the target display area, identifying the positions of the groups of components that should remain together, and forming a hierarchy of supernodes based on the positions of the components and the content relationships of the components. The determining and forming steps also include determining the order of the elements within each of the supernodes, positioning the elements within the target layout based on the determined order and at least one of the groups, and adjusting the positioned elements before display.

[0025] Further, according to a preferred embodiment of the present invention, the component is at least one of an atomic component, a single-page container component, and a multi-page container component.

[0026] Further, according to a preferred embodiment of the present invention, the analyzing and modifying steps include at least one of modifying instances of the components in a template, filtering the components that are not suitable for the target layout, adapting the components to the target layout, adjusting the components to fit the target layout, and analyzing the attributes of the components to determine the suitability of the usage of the components.

[0027] Furthermore, according to a preferred embodiment of the present invention, the step of identifying and forming includes: identifying the positions of groups of the components when the components largely overlap with each other, and replacing the groups with virtual elements according to grouping criteria; identifying the positions of groups of the components according to at least one hint at the template, application, page, or component level, and replacing the groups with virtual elements according to grouping criteria; identifying the positions of the components when the components are text components superimposed on a specific background image, and replacing the groups with virtual elements according to grouping criteria; identifying the positions of the groups of the components when the components largely overlap with each other, identifying the positions of the groups of the components according to at least one hint at the template, application, page, or component level, and identifying the positions of the components when the components are text components superimposed on a specific background image, determining a certainty score regarding the accuracy of these steps; and forming a hierarchy of super nodes based on the components and the virtual elements.

[0028] Furthermore, according to a preferred embodiment of the present invention, the step of determining the order includes: determining the order of the elements of the super node according to a pre-defined order criterion; analyzing at least one of the meaning, content, attributes, editing history, and geometric shape of the elements of the super node; determining a certainty score for the accuracy of the step of determining the order of the elements of the super node according to the pre-defined order criterion, and the step of analyzing at least one of the meaning, content, attributes, editing history, and geometric shape of the elements of the super node; integrating the order determined by the step of determining the order of the elements of the super node according to the pre-defined order criterion, and the step of determining the certainty score for the accuracy of the step of analyzing at least one of the meaning, content, attributes, editing history, and geometric shape of the elements of the super node, and forming a combined modified order.

[0029] Furthermore, according to a preferred embodiment of the present invention, the step of adjusting includes: inserting an automatic addition component; and performing at least one of forming, modifying, and removing a dynamic layout anchor, wherein the dynamic layout anchor is adjusted according to the target layout.

[0030] Furthermore, according to a preferred embodiment of the present invention, the step of determining the order of the elements of the super node according to the pre-defined order criterion includes at least one of: arranging the elements of the super node in order according to at least one of rows and columns; arranging the elements of the super node in order according to at least one of rows and columns and tracking any row / column separation and combination; slicing the elements of the super node alternately in the horizontal and vertical directions to form an internal tree of the divided section and defining the display order of the elements.

[0031] Furthermore, according to a preferred embodiment of the present invention, the positioning step includes: interpreting hints attached to the elements of the super node; identifying the positions of groups of the components that should remain together; forming line breaks according to the hints formed by forming the hierarchy of the super node based on the positions of the components and the content relationships of the components; applying an adjustment to at least one of the width and height to the elements of the super node; and resizing the decorative image.

[0032] Furthermore, according to a preferred embodiment of the present invention, the step of determining the order of the elements of the super node according to a predefined order criterion includes: detecting a set of cluster partial orders in which the elements of the super node are closer to each other than the normal spacing between the elements of the super node; detecting a set of semantic partial orders when there is a specific combination of elements of the super node of a predetermined type that are close to each other; detecting a set of partial orders when there is a set pattern between the elements of the super node; detecting a set of partial orders based on at least one of a definition of grouping related to existing editing, existing dynamic layout anchor information, and reuse of various component sets of a component template; and detecting a set of partial orders of the elements of the super node based on information collected from a previous editing session.

[0033] Furthermore, according to a preferred embodiment of the present invention, at least one of the automatically added components and the mobile-related components includes at least one of widgets, navigation menus, advertisements, and sales promotion materials specific to the target device.

[0034] Furthermore, according to a preferred embodiment of the present invention, when a set pattern exists between the elements of the supernode, detecting a partially ordered set, slicing the elements of the supernode alternately in the horizontal and vertical directions, forming an internal tree of the divided section, and defining the display order of the elements includes determining the slicing direction of the elements of the supernode based on at least one of the number of partitions and the size of the gap found in a predetermined projection direction, the step of detecting a partially ordered set when a set pattern exists between the elements of the supernode, and the alignment quality to the axial projection in both the horizontal / vertical directions.

[0035] Furthermore, according to a preferred embodiment of the present invention, the filtering step includes removing components that are not suitable for display in the target layout and hiding components that are not suitable for display in the target layout.

[0036] Furthermore, according to a preferred embodiment of the present invention, the adapting step includes modifying the size and width of the component, integrating menu components, updating content-related adaptations, forming a composite menu, and converting character-based graphics.

[0037] Furthermore, according to a preferred embodiment of the present invention, the adjusting step includes font size mapping between the source layout and the target layout.

[0038] Furthermore, according to a preferred embodiment of the present invention, the analyzing step includes joining the component into a single image when the component is an image component and distinguishing decorative images.

[0039] Furthermore, according to a preferred embodiment of the present invention, the re-converting step includes: when a page is deleted from the source layout, deleting the page from the target layout; when a page is added to the source layout, adding the page to the target layout; when a component is deleted from the source layout, deleting the component from the target layout; when a component is added to the source layout, inserting the component into the target layout; when a component is modified in the source layout, modifying the component in the target layout; and when the modification to the target layout is independent of the modification to the source layout, operating the modification to the target layout.

[0040] Furthermore, according to a preferred embodiment of the present invention, the step of adding the component includes: searching for at least one of the nearest ancestor component and the parent component closest to the component added to the source layout; and inserting the added component into the target layout according to the positions of at least one of the nearest ancestor component and the parent component.

[0041] The subject matter regarded as the invention is specifically set forth and distinctly claimed in the concluding portion of this specification. However, the invention, both as to its organization and method of operation, together with objects, features, and advantages thereof, may best be understood by reference to the following detailed description when read in conjunction with the accompanying drawings.

Brief Description of the Drawings

[0042]

Figure 1

Figure 2

Figure 3

Figure 4

Figure 5

Figure 6

Figure 7

Figure 8A

Figure 8B

Figure 8C

Figure 9

Figure 10

Figure 11

Figure 12

Figure 13

Figure 14A

Figure 14B

Figure 14C

Figure 15A

Figure 15B

Figure 15C

Figure 16A

Figure 16B

Figure 16C

Figure 16D

Figure 16E

Figure 16F

Figure 16G

Figure 16H

Figure 17

Figure 18

Figure 19

Figure 20

Figure 21

Figure 22

Figure 23

Figure 24

Figure 25

Figure 26

Figure 27

Figure 28A

Figure 28B

Figure 28C

Figure 28D

Figure 28E

Figure 28F

Figure 28G

Figure 29

Figure 30

DETAILED DESCRIPTION OF THE INVENTION

[0043] For the sake of simplicity and clarity of illustration, it should be understood that the elements in the figures are not necessarily to scale. For example, for clarity, the dimensions of some elements may be exaggerated compared to other elements. Further, where appropriate, reference numerals may be repeated between the figures to indicate corresponding or similar elements.

[0044] For a complete understanding of the present invention, many specific details are set forth in the following detailed description. However, it will be apparent to one of ordinary skill in the art that the present invention may be practiced without these specific details. In other instances, well-known methods, procedures, and components have not been described in detail so as not to obscure the present invention.

[0045] Applicants have noticed that existing sites and applications are typically designed for desktop PCs with very common high-resolution large displays. When accessing such sites and applications using a smaller display, many problems become apparent. For example, excessive scrolling (especially horizontal scrolling) is required, the navigation is unclear, the font size is not adapted for mobile use, and the design and display components are not adapted to the touch screen of mobile devices, etc.

[0046] Since these sites can be viewed on different-sized platforms such as tablets and mobile phones, developers may be required to create multiple versions of the site or application to support these multiple usage scenarios and maintain the look and feel of the original site. The multiple versions may differ in multiple aspects including visual layout, display components (widgets) during use, the orientation of the touch screen, etc.

[0047] Applicants have also noticed that existing systems for converting a website view to fit the associated browsing platform have generally been designed to solve the above problems for converting websites designed using markup languages such as HTML (HyperText Markup Language) and XML (Extensible Markup Language). These websites can be sites directly designed in a given markup language or sites created using a code generator that forms a markup language file for later hosting.

[0048] Existing systems have also focused on analyzing the original website, extracting content information from the original website, and creating a modified mobile site. The beginnings of such technologies are generally optical character recognition (OCR) and page analysis systems, which are aimed at extracting content rather than content and design adaptation. Therefore, existing systems generally extract content and operate to make the content readable on small devices, while destroying much of the design, appearance, and atmosphere of the original site.

[0049] It will be understood that the analysis of existing websites can be complex. In particular, some parts of the site can be generated dynamically, and the relationships between the elements of the site can also be implemented procedurally. Therefore, it is difficult to accurately understand the site unless a conversion (e.g., via a headless browser operating on a conversion server) is performed during the operation of the site. However, such a latter method has a significant load, especially since it may be required to adapt a given page to a mobile-friendly size each time the page is pulled up by each user, rather than reusing the conversion results once converted for all users.

[0050] Another problem with existing systems is the support for changes and edits to the original website during conversion. It will be understood that several systems have been developed that attempt to compare the current version of a page with a previous version of the same page and identify the differences. This comparison is made using comparison rules based on text similarity, position within the source file, font usage, etc. This often requires designers to manually form the binding between the elements of the mobile version and the original desktop version.

[0051] However, since page editing is done separately from the conversion process, the site can change abruptly between two versions. For example, a new developer (a developer with a completely different style) may have started developing the site. Or, new technologies or libraries may have been incorporated into the site. The two versions of the site can be compared by existing systems, but those two versions can be very different from each other internally, even if they look the same. The comparison of two versions of the same website can be done heuristically, but it will not be able to match significantly modified site elements.

[0052] The applicant has noticed that the above limitations can be overcome by using an object-oriented visual design system. Such a system can be used to create interactive applications and websites, and can also be used to maintain and form corresponding layout definitions between various display platforms for a given application. The visual design system can also provide the exact specified attributes of all the site's objects to an internal, consistent object data model of the site. Thus, the visual design system can provide multiple visual layouts for a single site or application with a single set of components.

[0053] The applicant has also noticed that using such a visual design system may include historical information of collected editing sessions that can be used to detect component changes and component relationships. Thus, for example, if a designer repeatedly duplicates a pair of objects (e.g., a photo and a caption), it can be inferred that such a pair is associated and that the members of the pair should remain close when converted for mobile use. Thus, for example, container objects can be transformed while maintaining their original object hierarchy and object relationships. Other information may include objects that were edited or moved together, objects that were grouped in the past, objects or object sets formed by duplicating existing objects or object sets, and the timing of object editing (i.e., whether there were specific changes applied in sequence to a given subset of objects).

[0054] A visual design system may typically have a unique identifier (ID) for each object. Such an ID can be used to match versions of different sites and maintain site changes consistently. Further, a visual design system may utilize a dynamic layout that includes anchors between the displayed components, and those anchors control layout changes applied to the above-displayed components. Such anchors can be used to obtain additional grouping and layout information and can also be used to fine-tune the layout to various mobile-oriented display sizes. In fact, the conversion subsystem may automatically generate additional dynamic layout anchors for later use during display.

[0055] Furthermore, due to the rapid increase in smartphones, full-scale advanced HTML browsing (the same browsing available on the desktop) is becoming common in the mobile environment. Therefore, in order to utilize advanced browsers available on all platforms (desktop, tablet, and mobile), a system that can use similar operations for all platforms is required.

[0056] Visual applications may be stand-alone systems such as the PowerPoint presentation program commercially available from Microsoft, or may be incorporated within a larger editing system such as the Microsoft Word AutoShape editor commercially available from Microsoft. Such applications typically consist of multiple pages and components, which can be further arranged within a hierarchy of containers (single-page and multi-page) within a page containing atomic components. Multi-page containers may also display multiple mini-pages.

[0057] The page may also include a list application (such as the one discussed in Patent Document 1 titled "WEBSITE BUILDING SYSTEM INTEGRATING DATA LISTS WITH DYNAMIC CUSTOMIZATION AND ADAPTATION", assigned to the same assignee as the assignee of the present invention, filed on March 13, 2014) and third-party applications. The page may also use templates such as general page templates or component templates. In certain cases, an application master page is used that includes components replicated within all other normal pages. The arrangement of components within one page or a set of pages is known as a layout. It should be understood that the following description describes a layout consisting of rectangular, axis-parallel components and containers. Other layouts may particularly include non-rectangular components and containers, such as rotated or distorted objects, and objects of object classes consisting of multiple regions, such as video playback components that may have a video display area and a video control area. Such regions may be combined, non-intersecting, or intersecting. Other layouts may also include objects consisting of any geometric shape.

[0058] It will be understood that such non-rectangular multi-region objects can be manipulated by using an enclosing rectangle around each of the non-rectangular objects or by fitting geometric primitives for manipulating the extended non-rectangular objects. Such fitting may include projection onto an axis, distance between shapes; minimum / maximum directional distance between shapes (i.e., vertical or horizontal distance), detection of shape intersections; detection of shape / line intersections; calculation of intersection regions and calculation of shape areas.

[0059] It will be further understood that each application may have multiple layout configurations such as desktops (portrait and landscape) and mobile. Some properties of web site components may also have values for each layout configuration such as the inclusion relationship of the actual components (for example, a specific component may be included only in mobile or only in desktop / tablet). Such components may be container components, and all sibling components included therein are affected together. Other properties may include size (h, w), position (x, y), z-order information, style (font, size, color), color, (for example, a given gallery may use different gallery types for desktop list components and mobile list components) polymorphic component types, menu / gallery settings (for example, row / column grid gallery #), third-party application variants (third-party application variants for third-party applications having multiple variants of different display sizes), and association of list application views (for various list components corresponding to a given item type or item associated with the view, various views can be specified).

[0060] It will also be understood that each layout configuration may have a default screen size value (in pixels). The actual screen size is somewhat different, and such differences are manipulated by the support of the dynamic layout of the relevant visual design system. The desktop layout configuration may be the main layout configuration. This is because the desktop layout configuration has the largest screen width. Other layout configurations may be considered shadow layout configurations of the main layout configuration and may have a screen width and height different from that of the main layout configuration. In particular, the width of the shadow layout configuration may be smaller than the width of the main layout configuration (for example, display on a mobile phone), equal (for example, tablet), or larger (for example, a larger display screen).

[0061] Furthermore, when converting a page of an application or a page of a website from a desktop version to a mobile version, it will be understood that there are two conflicting objectives, namely, maintaining the readability of the content on the reduced page and maintaining the visual layout of the page. Most existing systems aim to extract content at the expense of design (see, for example, Patent Document 2 entitled "SMALL FORM FACTOR WEB BROWSING"). These systems are obtained from publicly available OCR / page analysis algorithms that extract text from the target area and do not attempt to maintain (or expend minimal effort to maintain) the existing visual website design.

[0062] Some algorithms attempt to maintain the design and / or layout to some extent by reducing the entire page or elements of the page. However, such reduction is very limited. This is especially because text content rapidly becomes unreadable as the font size is reduced.

[0063] Referring now to FIG. 1. FIG. 1 shows a visual application conversion system 100 between platforms according to an embodiment of the present invention.

[0064] System 100 may include an initial layout converter 200, a layout reconversion converter 300, and a database 50. The initial layout converter 200 may further include a page receiver 210 and a processor 220. The converter 200 may first convert the main layout configuration from a desktop to a mobile shadow layout configuration. The reconversion converter 300 may reconvert the layout configuration after editing the application of the main layout configuration. All applications and configurations may be stored on the database 50.

[0065] System 100 can be installed as part of a website construction system on server 150 that can communicate with various clients 5, such as desktop 5A, smartphone 5B, and interface (inter-program communication) 5C of a third-party system, etc., via an appropriate communication medium such as the Internet. Server 150 can store various layout configurations corresponding to each platform (including multiple layout configurations corresponding to a single platform). In an alternative embodiment, System 100 can also operate locally on the client or be adapted to provide services to other systems via an appropriate API (Application Programming Interface).

[0066] It will be understood that since initial layout converter 200 can convert each page within the application to a sufficiently narrow-width version, the page can be viewed by vertical scrolling and (if any) minimal horizontal scrolling on a narrow-width screen. It will be understood that if System 100 is properly integrated (e.g., operating on a relevant client of a website construction system), System 100 can perform the conversion in a responsive mode where a new layout is calculated each time the screen dimensions change.

[0067] Refer to FIG. 2 here. FIG. 2 shows the elements of the processor 220. The processor 220 includes a preprocessor 201, a supernode forming unit 230, an ordering unit 240, a positioning unit 270, and a postprocessor 202. The preprocessor 201 may include a template operation unit 206, a component filter unit 221, a component adaptation unit 225, a component adjustment unit 227, and a component analysis unit 229. The postprocessor 202 may include an automatic additional component insertion unit 281 and a dynamic layout adjustment unit 284. It will be understood that the target layout configuration to be formed can be displayed by the display unit 290 via the related website construction system. When the system 100 is fully integrated with the related website construction system and directly modifies the data structure of the website construction system, the postprocessor 202 can also perform a post-processing step of restoring the data structure, so as to adapt the modified website construction system data to be displayed by the display unit 290.

[0068] It will be understood that the initial layout converter 200 can operate on each page of an application or website individually. In the normal mode, the initial layout converter 200 can convert each page into a very narrow, usually elongated version, so that each page can be viewed by vertical scrolling and minimal horizontal scrolling on a narrower mobile screen. Furthermore, some target devices such as large tablets and outdoor display screens may have a wider screen than the original desktop screen, so narrowing the width may not be necessary. Instead, it may be necessary to adapt to a larger display width.

[0069] The initial layout converter 200 can process a set of three-dimensional (the x and y coordinates of the screen and the z order of the display) components and can convert the set of components into a mathematically ordered set. The generated total order can represent the order in which the information is read by the user on the relevant page. In this case, the initial layout converter 200 can display the ordered components in a narrow-width mobile-oriented display.

[0070] As will be described in detail below in this specification, the initial layout converter 200 can process the page to be converted and split the relevant page into supernodes based on the analysis of the components and the content relationships of those components.

[0071] The preprocessor 201 can analyze whether the components of the relevant page are appropriate for the layout of the target configuration and can modify the existing components if necessary. Although various combinations of layouts can be configured, in the following example, the conversion from a desktop layout configuration to a mobile layout configuration will be described. The template operation unit 206 can form a modified instance of an element if an instance of the element exists in the template. The component filter unit 221 can filter the components according to their suitability for the mobile layout configuration of the components, the component adaptation unit 225 can adapt the components to the mobile layout configuration in particular, the component adjustment unit 227 can adjust the components to fit the mobile layout configuration in particular, and the component analysis unit 229 can analyze the components (including the content, geometric shape, and other attributes of the components) so as to determine the actual usage of those components. For example, a photo component can be either a background image or a content image, which can affect the operation of the photo component by other parts of the system 100.

[0072] The super node forming unit 230 can identify the positions of groups of components (e.g., highly overlapping components) that should stay together. The super node forming unit 230 can further form the super node hierarchy based on the current page and the elements within the container hierarchy (and in some cases, modify the container hierarchy as further described below). The ordering unit 240 can determine the order of the elements of each super node. The positioning unit 270 can position the elements of the nodes based on the determined order within the mobile layout area, and the post-processor 202 can perform any final adjustments to the layout as needed. The automatic addition component insertion unit 281 can insert any automatic addition components (described in more detail below in this specification) and other mobile-related components (e.g., mobile-specific menus) inserted after ordering, and the dynamic layout adjustment unit 284 can modify any existing anchors as needed after positioning. The display unit 290 can display the new layout on the mobile platform and, in some cases, perform final adjustments tailored to a specific mobile platform further described below in this specification.

[0073] The page receiving unit 210 can receive a web page having a desktop layout configuration to be converted and can transmit the page to the page pre-processor 201.

[0074] As described above in this specification, there may exist a container hierarchy that can provide further information regarding the logical arrangement of pages. Such a hierarchy may include normal inclusion relationships, as well as parallel inclusion relationships such as a plurality of parallel mini-pages included within one multi-page container. The preprocessor 201 may analyze such a hierarchy and any specific container relationships to collect information that may be useful for the process at the start of the process. The preprocessor 201 may also determine the screen size of the target application, extract (site-global and page-specific) navigation menus, and combine those menus to form one or more integrated page menus such as top and bottom menus.

[0075] The associated visual design system may support templates that include multi-level and inheritance of multiple templates. Such templates may include single pages, multi-pages, or page elements. The template operation unit 206 may form a modified instance of the elements of the template, so the instance of the template may consist of template components to which local modifications are applied. Further, the template operation unit 206 may make specific modifications necessary to adapt the instance of the template to a mobile layout configuration. For example, if the inherited components are close enough to the top or bottom of the page, those components may be appropriately included within the page-specific header or footer. The inherited components may be logically replicated (with modifications) within each page that inherits those components.

[0076] The associated visual design system may hold a single copy of each inherited component, but may enable the page-by-page layout to be applied to copies of those components (because the adaptation to mobile may vary for each page). The template operation unit 206 may use information regarding the original template of a predetermined set of components and may form a component group based on the template, thus ensuring a better match to the original intention of the template. For each page of the associated website, individually, the preprocessor 201 may consider parameters such as the dimensions of the target screen and may review the elements. The component filter unit 221 may remove or hide components that are not suitable for mobile display. By way of example, such components may include vertical separator lines (rather than horizontal lines), Adobe Flash content (which cannot be played on some mobile systems), or decorative frames, etc. Components that are completely inappropriate for mobile display are removed prior to further processing. For components not recommended for mobile display, the component filter unit 221 may choose to hide them rather than completely remove them. In this case, as will be further detailed below in this specification, when those components can be visually recognized by the mobile modification display GUI and can be reinserted, the website designer can reinsert those components into the mobile layout configuration. Some components may be inappropriate or not recommended for the mobile platform, but may still provide substantial information to the initial layout converter 200.

[0077] Refer to FIG. 4 here. FIG. 4 illustrates a vertical line E between components on the desktop version. For example, the vertical line between components may be quite redundant in the mobile layout configuration as shown. This is because the line can usually be converted into a long (empty) interval between component sets. As shown, when components A, B, C, and D are rearranged and stacked vertically for a narrow mobile display, the vertical line E may waste display space, so the vertical line E should be removed. However, the vertical line is still very useful in indicating that the four components A, B, C, and D should be arranged as A + B and C + D rather than A + C and B + D. To obtain the benefits of such information, the component filter unit 221 may mark the vertical line with "completely remove" or "hide behind", but still add a non-visible-width line that provides the necessary allocation information to the initial layout converter 200.

[0078] The component adaptation unit 225 may utilize width reduction means similar to those utilized by the positioning unit 270, as detailed below in this specification (and can utilize such means whenever it can operate them at this preprocessing stage). For example, the component adaptation unit 225 may switch the component to a "lighter" mobile version. To give an example, there is a switch from a gallery that can display multiple mini-pages (e.g., multiple accordion-style mini-pages) to a gallery that displays one mini-page at a time. The component adaptation unit 225 may also provide a specific "lightweight" version of a given component for use in the mobile version of the produced application (via a different version or different view customized for mobile display).

[0079] The component adaptation unit 225 can also perform content-related adaptations such as the conversion from character-based graphics to vector-based scalable graphics. Designers may use text characters as decorations or delimiters such as " / / / / / / / / / / / ", "----------------", "-=-=-=-=-=-=". After being converted into similar vector-based shapes, those graphics can be accurately resized without the need for text operations.

[0080] In addition, the component adaptation unit 225 can integrate menu components into a unified mobile-friendly (small format) menu. Pages often include multiple navigation menus used for both inter-page and intra-page navigation. Furthermore, some pages can include multiple menus defined in various ways, such as a menu defined within the page itself, a menu formed from the page template used within the page (e.g., the menus included in the header and footer of the entire application), and a menu automatically defined based on the application structure (e.g., the navigation menu of the top-level page). The component adaptation unit 225 can further form a composite menu (one or more) and combine the menus into the composite menu according to criteria such as the proximity of the menus to be evaluated to a predetermined formed composite menu (e.g., integrating all menus 200 pixels from the top of the page into one top-level menu). The component adaptation unit 225 may directly insert one (unified and mobile-friendly) modified menu or multiple modified menus, or include them at a later stage after "posting" those menus (e.g., they may be included by the positioning unit 270 or the automatic additional component insertion unit 281). This is particularly relevant when one or more menus are added not as part of the layout of normal components but as a "floating", situationally activated layout, etc.

[0081] The component adjustment unit 227 can modify component parameters to reduce the width of the component. As an example of this, there is a modification to only one or two columns of the matrix gallery component. The component adjustment unit 227 can also modify a component defined by a large decorative frame into a simple, less decorative version of the same component.

[0082] The component adjustment unit 227 can change the size of the component to reflect the actual size used. For example, the component adjustment unit 227 can reduce a text component using a surrounding rectangle according to the actual text content.

[0083] The component adjustment unit 227 can also "dissolve" a container that tightly wraps an inner component. For example, when a container tightly wraps a sub-container that has no further components within a larger container, the component adjustment unit 227 can remove the inner container and combine the two containers into one. It will be understood that this saves levels of the hierarchy since the container is transparent to the processing.

[0084] A designer may add multiple parts of the same image that visually form a single image integrally. The component adjustment unit 227 can utilize "image stitching" and can detect whether the multiple such image components should be stitched together into a single image using the attributes and content of the multiple image components. The determination can be based on the edit history (i.e., the similarity of the dimensions of the edges of adjacent images, the length of the overlap of the edges of adjacent images compared to the separation between the images, or the use of similar colors / features (detected using an image content analyzer) on the boundaries as to whether an image was formed and / or modified).

[0085] The component adjustment unit 227 can utilize font size mapping. In the text of any application or page, many types of font sizes can be used. These sizes should be mapped to a predetermined (smaller) range for use on mobile devices while maintaining, if possible, the differences in font sizes. Some font sizes will be too small and some will be too large. The above mapping is not linear, i.e., not a multiplication by a fixed coefficient. However, the above mapping is a monotonic function of the font size. The component adjustment unit 227 can collect the range of font sizes used and map this range to the range of acceptable mobile font sizes. The component adjustment unit 227 can provide such a mapping for the entire system or specific to the user, application, page, or component level.

[0086] In the application / page specific font size mapping, the component adjustment unit 227 can measure the amount of text (characters) for each predetermined font size and then, by using the normal (Gaussian) cumulative distribution function, map the most common character size to the font size at the center of the range of acceptable mobile font sizes. It will be understood that such a font size can be further modified by readjustment through re-enlargement and re-reduction of the font size specific to the mobile layout configuration.

[0087] Furthermore, it will be appreciated that it is important to distinguish between a decorative image and a content image (which is part of the data specific to the actual page) when processing the component structure. Since the content of the decorative image is not critical for the actual use of the application, the decorative image can be scaled and cropped more freely. Furthermore, the content image should be analyzed in the same way as other components in the following analysis algorithm, while the decorative image should not be analyzed. The component analysis unit 229 can recognize the decorative image based on any of a specific "decorative image" component type, or a template, object, component type, or a specific hint at the designer level. The component analysis unit 229 can also recognize whether the image covers a certain area (e.g., whether the image covers the entire (or almost) container in which the image exists), whether the image serves as a background for multiple components, or whether the image is adapted to the display area of the component using an operator such as "repeating photos in a column" which indicates that the photo is used as a decoration. The decorative image is often not "tight" with respect to the components included in the decorative image by simply selecting a specific associated image.

[0088] As described above in this specification, after an element is modified, the super node forming unit 230 can identify the positions of groups of components that can largely overlap or otherwise be related and that should be operated together. The reason such identification of positions is necessary is, for example, that components that largely overlap can form a composition and, thus, those components must be arranged together in order to maintain the same internal ratio when the size is changed. After the positions of all groups are identified, since the super node forming unit 230 can convert the hierarchical organization in which components are formed into the hierarchical structure of super nodes based on the current page and / or the hierarchy of the container, it will be understood that there are a plurality of total orders at different structural levels. For each individual page or mini-page (a page or mini-page within a single-page or multi-page container), the super node is known as a page super node. Also, each super node can be considered as an individual entity, and it will be understood that after being defined, objects can be rearranged as will be described in more detail below in this specification.

[0089] Furthermore, it will be understood that some of the groups whose positions are identified can also be converted into virtual super nodes that can be operated as a single component in the same manner as the page super nodes described above in this specification (which will be described in more detail below in this specification). Each virtual super node type can have associated mobile adaptation methods defined at the time of super node formation, such as re-enlargement / re-shrinking by a specific method, limited size change, rearrangement, etc.

[0090] Now refer to FIG. 5. FIG. 5 shows the elements of the super node forming unit 230. The super node forming unit 230 can include an overlapping group position identifying unit 232, an on-image text group position identifying unit 234, a pre-defined group position identifying unit 236, a node forming unit 238, and a scorer 500 (the function of which will be described below in this specification in relation to FIG. 11).

[0091] The duplicate group location identifier 232 can determine a set of components that largely overlap. Such a set of components usually can form a specific design together, and the ratio between the group components should be kept the same when positioning this group within a new layout. For example, the image and text that form a logo should maintain the same ratio and relative position regardless of their sizes and positions within the new layout of the logo to maintain the structure of the logo.

[0092] The duplicate group location identifier 232 can loop through all possible pairs of components within the supernode. For each pair of intersecting components, the duplicate group location identifier 232 can calculate the relative overlap amount as the overlap amount compared to the smaller value of the two bounding rectangles of the two components. The above calculation may be based on the intersection area or may be obtained by a combination of relative intersections of each axis (for example, using the average). If such relative intersection exceeds a predetermined threshold, the duplicate group location identifier 232 considers that the pair of components overlaps. After the loop ends, the duplicate group location identifier 232 can combine the overlapping pairs according to the common members to form duplicate groups. For example, the pairs of components [a, b] and [b, c] can be combined into [a, b, c]. The area for each formed virtual component can be the area of the smallest bounding rectangle that encloses all the grouped components. Furthermore, since duplicate groups generally represent detailed design elements, only resizing should be done and they should not be rearranged. In particular, text components within such a group should match the original size instead of using the font size mapping described above in this specification and executed by the component adaptation unit 225. Therefore, the text should be enlarged or reduced so that the font size mapping is completely avoided or a scale factor that reverses the effect of the font size mapping is used.

[0093] Furthermore, it will be understood that some components may be excluded from the definition of the duplicate group. These components may include specific components such as horizontal lines, screen-width containers, and text sizes larger than a predetermined limit (e.g., 25 characters) that are interpreted as normal paragraphs rather than logo text. The above normal paragraphs should not be marked as duplicate groups, nor should they be resized as compositions.

[0094] The text group position identifier 234 on the image can group text components superimposed on a specific background image. The text group position identifier 234 on the image can detect a case where a text component is set on a background image and both the text component and the background image should be manipulated together. The text group position identifier 234 on the image can search for a pair of a text component and an image component in the current supernode where the text component is completely contained within the image component or the text component is sufficiently (up to a predetermined threshold) close to the surrounding image component at each of the four sides.

[0095] If the component is a logo rather than text on the image, the text group position identifier 234 on the image can instead instruct the duplicate group position identifier 232 to form a duplicate group rather than a text group on the image. This can be done based on scoring according to criteria such as the amount of text characters being less than a predetermined threshold, a decorative or very unique font being used, or the baseline of the text being other than a normal horizontal line (e.g., the text is drawn along a curve).

[0096] The predefined group locator 236 can group components according to hints at the template, application, page, or component level. Since this can often be regarded as a persistent version of the grouping performed using the GUI of a particular design system, multiple components can be operated on together.

[0097] After the positions of groups of duplicate elements are identified and grouped, the node formation unit 238 can combine those groups, convert them into virtual supernodes, and then form final supernodes (including virtual supernodes and page supernodes) as will be described in more detail below in this specification. Since the remaining elements can be considered to be separate, ordering can be facilitated as described below in this specification.

[0098] Now refer to FIGS. 8A - 8C. FIGS. 8A - 8C illustrate how the supernode formation unit 230 can form a hierarchy of supernodes. As described above in this specification, supernodes formed from pages and mini - pages can be considered page supernodes, and supernodes formed from detected groups can be considered virtual supernodes. Regarding page P1 in FIG. 8A, a page (mini - page) containing three text elements can be considered a page supernode (PSN1) having three elements. In FIG. 8B, page P2 can be considered a page supernode (PSN2) having a virtual supernode (VSN1) containing a text element and a drawing element. If pages P1 and P2 are mini - pages contained within page P3, the formed node structure can be a page supernode (PSN3) having two page supernodes (PSN1 and PSN2) each having the elements shown in FIG. 8C.

[0099] Furthermore, the node forming unit 238 may define a tightly wrapped container as container A existing inside container B. In this case, inside container B, the sizes of containers A and B are very similar (i.e., there is a slight margin on all sides between containers A and B, and container A is the only component inside container B). The node forming unit 238 may also rearrange the containers based on semantic analysis of the components within the plurality of containers. For example, as shown in FIG. 9 referred to herein, text components T1, T2, T3 are included in container C1, and photo components P1, P2, P3 are included in container C2. The node forming unit 238 may perform semantic analysis and recognize pairs of related text components and photo components based on the type, proximity, and relationship with other components, as further described below. Based on such semantic analysis, the node forming unit 238 may not only form a pair of T1 and P1 being related, but also recognize T2-P2 and T3-P3 pairs, and thus may remove these six components (T1, T2, T3, P1, P2, P3) from containers C1 and C2, and may position them within the container page while maintaining the information on the relationships among the above six components, as shown in FIG. 10 referred to herein.

[0100] Furthermore, the node forming unit 238 may classify components that substantially overlap (e.g., 75% area overlap) a given container as members of a specific container for super node generation so that the super node hierarchy better reflects the visual layout. This is related to a visual design system where components that are not logically included within a given container may still overlap the container.

[0101] After the supernode structure is defined, the ordering unit 240 can order the component set, the page supernodes contained within each (individual) supernode, and the virtual supernodes. Further, such a basic order can be further modified as a result of discoveries by a partial ordering unit described in more detail below in this specification. Referring now to FIG. 11. FIG. 11 shows the elements of the ordering unit 240. The ordering unit 240 may include a basic ordering unit 247, a partial order set (POS) localization unit 250, and an order integration unit 245. The basic ordering unit 247 may further include a primary direction ordering unit 241, a primary direction ordering unit 242 having separation and combination, and an H / V slicer 243. The H / V slicer 243 may further include an element splitting unit 244 described in more detail below in this specification.

[0102] The POS localization unit 250 may include a cluster POS localization unit 251, a semantic relationship POS localization unit 252, a pattern POS localization unit 253, a pre-defined POS localization unit 254, and an ESI (Editing Session Information)-based POS localization unit 255. It will be appreciated that the POS localization unit 250 can analyze the meaning, content, and geometric shape of the components.

[0103] It will be appreciated that the ordering unit 240 can mimic the order in which a human reader can view elements on a page (or the order within a particular supernode). Further, since the page is a two-dimensional entity (or three-dimensional including the z-order), it will be appreciated that such an order may not be fully defined for a human reader.

[0104] Refer to FIG. 12 here. FIG. 12 shows the arrangement of four text paragraphs arranged in a quadrilateral. Assuming that the paragraphs are in English (read from top to bottom and left to right), it is not clear whether the reading order should be A1, A2, B1, B2, or A1, B1, A2, B2. Both orders can be considered correct. Further, as shown in FIG. 13 referred to here, when the elements are text and photos, it is not clear which are the relevant text elements and photo elements.

[0105] The primary direction ordering unit 241 can pre-define the primary direction (i.e., sort the rows first or sort the columns first), then sort the components in the two-dimensional page based on the primary direction, and then sort based on the second direction. For example, the primary direction ordering unit 241 operating in the mode of sorting the rows first can sort the elements in the supernode so that element A precedes element B when the overlap Y of elements A and B is appropriate (e.g., at least 25% of the lower height of the two elements) and element A is on the left (i.e., the order within the row), or when the overlap Y of elements A and B is not sufficient and element A is at a higher position (i.e., the order between multiple rows).

[0106] Also, the primary direction ordering unit 242 having separation and combination (hereinafter, the PDSM ordering unit 242) can pre-define the primary direction and can track the separation and combination of rows / columns. This can be considered more general for columns than for rows. Refer to FIGS. 14A to 14C here. FIGS. 14A to 14C show the components (1 to 10) in the supernode. It will be understood that these components can be ordered according to the order in the generated column graph within the node. The PDSM ordering unit 242 can substantially convert a set of rectangles (as shown in FIG. 14A) into a column graph (which may be combined, separated, or continuous as shown in FIG. 14B), and this graph is then used for ordering the components (see FIG. 14C). The rectangles may optionally intersect.

[0107] Reference is now made to FIGS. 15A - 15C and FIGS. 16A - 16G. FIGS. 15A - 15C and FIGS. 16A - 16G show the steps performed by the PDSM ordering unit 242 to define the order in which column graphs are formed. FIG. 16A shows a set of elements C that require processing. The PDSM ordering unit 242 may define two - element relationships between elements within the set (step 400), and then may "sandwich" the elements to be ordered (set C) between a dummy header element A and a dummy footer element B as shown. Next, the PDSM ordering unit 242 may form two new sets, namely, the set X of columns (steps 420 and 430) generated (in the current state) and the elements of these columns, and the set Y of elements to be processed as columns (steps 440 and 450). Next, the PDSM ordering unit 242 may sort the set Y (step 460) and scan the elements of the set Y from top to bottom according to the y - order of the elements (step 470), and for each element Q of the set Y, may select a subset R of the elements that control element Q (within all columns of the set X). Then, the elements may be arranged according to the order in the graph (top - to - bottom and left - to - right), or in the case of an isolated column, according to the x - order (step 480). Reference is now made to FIG. 16B. FIG. 16B shows how all of the elements A, E, F control Q. Next, the PDSM ordering unit 242 may remove any duplicates from the set R. As can be seen in FIG. 16B, not only do all of A, E, F control Q, but A controls E and E controls F. In this example, the only connection necessary for the PDSM ordering unit 242 may be the connection between Q and F (the last - controlling element). If R is empty, this may be considered the start of an unconnected isolated column, and as shown in FIG. 16C referenced here, a new column is started within X by element Q. Further, if R has two or more elements, the PDSM ordering unit 242 may connect element Q to a column containing each element C1 - Cn, may form a continuation of the column (if connected at the end of the column), or may form a separation of each column (if connected in the middle of the column).When there are two or more such columns, the PDSM ordering unit 242 can combine the columns as shown in FIG. 16D, which is hereby incorporated by reference. As shown in FIG. 16D, the PDSM ordering unit 242 can combine columns G and H into one continuous column by element Q. Now refer to FIG. 16E. FIG. 16E shows column G that is continuous from an element that is not the last element within column G. In this example, element Q forms a separation within column G, forming two continuous columns of F and Q.

[0108] It will be appreciated that when the columns separate at a given location, the separated sets are ordered from left to right (i.e., the multiple columns that are continuous with the separated columns have an order defined for those multiple columns according to the x - coordinates of the left - most ends of those multiple columns). The same applies to the combination of columns. Also, it will be appreciated that the PDSM ordering unit 242 can have a situation that combines separation and combination as shown in FIG. 16F, which is hereby incorporated by reference. As shown, element Q forms a separation of two columns including elements G and H. The PDSM ordering unit 242 can immediately combine the above - mentioned separation into one continuous column by element Q.

[0109] Accordingly, the PDSM ordering unit 242 can move elements from Y to X and connect them (or in some cases form a new column) to one or more existing columns within X based on geometric criteria. It will be appreciated that such a scanning process can form a series of columns that can start, separate, combine, or terminate within X. This process ends when the dummy footer element B is reached. Then, the PDSM ordering unit 242 can scan the graph (defined according to the columns within set X) and calculate the resulting order. Then, as shown in FIG. 16G, which is hereby incorporated by reference, the PDSM ordering unit 242 can arrange the elements from top to bottom and from left to right according to the order within the graph.

[0110] Furthermore, in the case of an isolated column, as shown in FIG. 16H, to which reference is made herein, it will be understood that the PDSM ordering unit 242 may arrange the isolated column in numerical order (1-8). If the pairs of elements a-c and b-d are close enough to be connected, those pairs may form a complete column, and the order between those pairs may be a-c-b-d instead of a-b-c-d. Since the above pairs are not close enough, they are not connected, making elements c and d into isolated columns, and as described above herein, the order is corrected to the numerically ordered sequence specifically shown.

[0111] It will be understood that the function of the PDSM ordering unit 242 may be appropriately modified to suit a supernode having content arranged from right to left (instead of from left to right).

[0112] The H / V slicer 243 may define the display order between elements by slicing the elements within a supernode alternately in the horizontal and vertical directions to form an internal tree of the partitioned sections so divided. It will be understood that such an internal tree is specific to a given supernode and has no relation to the general supernode level tree. The H / V slicer 243 is optimally adapted to a "chocolate table" style site of a newspaper layout, classically constructed from horizontal and vertical sections, such as the exemplary page shown in FIG. 17, to which reference is made herein. The H / V slicer 243 may obtain a set of elements of one supernode and form an internal tree of the node (since each supernode may include such an individual internal tree, the node is different from a higher level supernode). The nodes may be of the following types.

[0113] V node (vertically arranged node) - a set of subnodes / elements arranged from top to bottom.

[0114] H node (horizontally arranged node) - a set of subnodes / elements arranged from left to right (the right-to-left arrangement will be described below herein).

[0115] Leaf node - The last element of the internal tree, i.e., a node representing a component or an encapsulated supernode. A leaf node may contain multiple components that still fit within the assigned width.

[0116] UR node (unsolved node) - A node that contains multiple elements that are still not placed. A UR node is the initial state of any node before it is converted into a V node / H node / leaf node.

[0117] Each node may include not only a reference to a set of elements, but also the coordinates and sizes of each underlying element, and the complete bounding rectangle for the elements of the node. The entire collection of nodes (of the above four types) within one supernode may be known as the internal tree. The H / V slicer 243 may adjust procedures for supernodes that are identified or detected as containing right-to-left (R2L) material or having an R2L layout.

[0118] The H / V slicer 243 may form an internal tree having one UR node at the initial call and may assign references within the internal tree to all elements within the supernode. The H / V slicer 243 may operate on the UR node by obtaining all elements within the node. If the bounding rectangle of the elements fits within the allowed width, the H / V slicer 243 may convert the node into a leaf node. The H / V slicer 243 may also require an element splitter 244 that may suggest a specific (horizontal or vertical) split into subgroups of elements of the UR node.

[0119] Next, the H / V slicer 243 can appropriately convert the UR node into an H node or a V node. For each subgroup returned by the element splitter 244, it will be understood that the H / V slicer 243 can calculate a bounding rectangle R for the elements within the subgroup. If the width of R conforms to the allowable width, the H / V slicer 243 can form leaf nodes that are descendants of node N from the subgroup. In other cases, if the subgroup has two or more components, the H / V slicer 243 can form a UR node that is a descendant of node N from the subgroup and can appropriately operate on this UR node as described above in this specification (i.e., by recursively applying the H / V slicer 243). If the width of R does not conform to the allowable width, the H / V slicer 243 can form a leaf node that is a descendant of node N from a subgroup containing one element. Next, the H / V slicer 243 can apply width reduction such as resizing and reflowing of text as described above in this specification.

[0120] Next, the H / V slicer 243 can recursively scan (using a depth-first traversal) the generated internal tree and emit components (such as leaf nodes) according to the scan order. The H / V slicer 243 can scan each of the H nodes / V nodes in a natural order (e.g., top to bottom in the case of V nodes). At this stage, it will be understood that since the basic order of the elements has been generated, such a formed internal tree of supernodes is no longer necessary.

[0121] As described above in this specification, the element splitter 244 can calculate the division sections for the division of groups of elements. The element splitter 244 can ignore the decorative frames and calculate the bounding rectangles for each element. Next, the element splitter 244 can project these rectangles onto both the X-axis and the Y-axis.

[0122] Next, the element division unit 244 can divide each set of projections onto the axis into segments onto which different numbers of components are projected. Segments in which no projected components exist represent gaps in a given projection direction. It will be appreciated that the element division unit 244 may provide certain (possibly non-displayable) separator line components to help determine the correct separation direction (e.g., for use as a hint to the designer within the process). Such components may also have an assigned "weight", so that such components have the value of one or more components (with respect to the calculation of the projected rectangle).

[0123] If gaps are found in both directions, the element division unit 244 can generate horizontal and vertical division sections of the element based on a partition orthogonal to the gap segment. For example, as shown in FIG. 18 referred to here, in the case of A, it is a horizontal division section (to the column) using one partition, and in the case of B, it is a vertical division section (to the row) using two partitions.

[0124] The element division unit 244 can calculate a division quality rating (DQR) for each of the two directions of the division section using a weighted average of the maximum number of partitions, the maximum value of the total size of the discovered gaps, and the minimum number when similar elements are divided by the division section into another subgroup. Such information may be available from the pattern POS localization unit 253 (described in more detail below herein) at the stage of forming the supernode that defines the similarity relationship between the supernodes of the descendants. As shown in FIG. 19 referred to here, a vertical division section (to the row) is preferred to keep the service / project / client boxes (A, B, C) together.

[0125] The element division unit 244 can also consider in which direction the components are better aligned. For example, as shown in FIG. 20 referred to herein, in Example A, even if there is a large gap when performing a horizontal division section (to a column), the division section should be in the vertical direction (that is, the components are arranged and aligned in rows). This can be more clearly observed when alignment lines are added in Example B.

[0126] The element division unit 244 can also add a certain preference factor to the horizontal division section (which reduces the width) with respect to the vertical division section (which does not reduce the width). In this case, the element division unit 244 can return a division section with a higher DQR.

[0127] If a gap is found in only one direction, the element division unit 244 can return a division section in such a direction. If no gap is found, there may be a case of an interlock element. In such a case, the element division unit 244 can form a partition that intersects one of the elements. For example, as shown in FIG. 21 referred to herein, the elements are divided using a vertical division line A that can intersect only element B. All elements marked with R can be associated with the right side of the division section (including element B), and element L can be associated with the left side of the division section.

[0128] In such an example, the element division unit 244 can find a projection segment having the minimum number of intersecting elements (from the projection segments on both the X-axis and Y-axis). If there is only one such segment, the element division unit 244 can define a division section based on the segment. If there are two or more such segments (in both directions) having the same minimum number of intersecting elements, the element division unit 244 can form a set of division sections by one partition based on one of the segments having the minimum number of intersecting elements.

[0129] For each of these partitions, the element partitioning unit 244 can then calculate the DQR based on a weighted average of the normal DQR calculation criteria (described above in this specification), the minimum area of the intersecting elements, and the confinement of the cut (i.e., the ratio of the area of the intersecting element is minimized on one side of the intersecting partition), so that the intersecting elements more clearly belong to one of the two sides of the partition. Alternatively, the element partitioning unit 244 can use the partition with the highest DQR.

[0130] In this case, the element partitioning unit 244 can return the selected partition in which each intersecting element belongs to the side of the partition that contains the larger area of the intersecting element.

[0131] In an alternative embodiment, the element partitioning unit 244 can form multiple partitions based on multiple projection segments having the same number of intersecting elements and can evaluate the partitions that contain such multiple intersecting elements.

[0132] It will be appreciated that the element partitioning unit 244 can recursively call alternative DQR calculations for each possible partition and can check the DQR values of the formed partitions after each potential partition has been tried. Further, this allows the element partitioning unit 244 to find the best single intersecting element, so that further partitions can be improved.

[0133] In parallel with the basic ordering unit 247, it will be appreciated that the POS positioning unit 250 can detect a plurality of sets of components that are related in some way and that should remain together if possible when the elements are reordered for display on a mobile device. For example, the components can be a text heading and the corresponding text paragraph.

[0134] The cluster POS location identifying unit 251 can detect a partially ordered set of clusters when components (of any type) are very close to each other compared to the normal spacing between components within a specific super node. The cluster POS location identifying unit 251 can calculate the average distance between components within the super node, and then execute a loop for all component pairs within the super node to search for component pairs whose distance is a predetermined ratio of the calculated average distance. Next, the cluster POS location identifying unit 251 can integrate these component pairs into a set and enforce a predetermined maximum distance (specified as a ratio of the average distance) between the two most distant components in each of the sets. The cluster POS location identifying unit 251 can also use the calculation of the median value, i.e., the median, instead of the average value calculation to account for a predetermined number of outliers that can distort the average distance value. In an alternative embodiment, the cluster POS location identifying unit 251 can use any clustering algorithm known to those skilled in the art. In this case, the POS location identifying unit 251 checks the extracted clusters and forms a partially ordered set of clusters when the density is sufficient (for example, when the maximum distance between cluster members is less than a predetermined threshold).

[0135] The semantic relationship POS location identifying unit 252 can detect a partially ordered set of semantic relationships when there are components of a predetermined type in a specific combination such as adjacent photos and captions. The semantic relationship POS location identifying unit 252 can scan all possible component pairs within the super node, and for each potential pair, check that each of the components has the correct type (for example, one is text and the other is a photo), that the components are close to each other (the distance is less than a predetermined threshold), and that there are no intervening components between them. The semantic relationship POS location identifying unit 252 can check, for the evaluated component pair [A, B], that there is no third component C that can be replaced with B, is of the appropriate type as B, and is closer to A than B. The same applies to the relationship between A and C.

[0136] As another combination of component pairs, there can be a partial order set of text and buttons. In such an example, the semantic relationship POS position specifying unit 252 can link a button depicting a text field to the actual text field. This relationship can be determined according to position only.

[0137] As another combination, there can be a partial order set of text concatenation. In this example, the semantic relationship POS position specifying unit 252 can combine a plurality of text elements that are consecutive to each other. It will be understood that the semantic relationship POS position specifying unit 252 can only recognize one text element over other text elements. Further, it will be understood that any number (not just two) of such elements can be present within a predetermined set and that all of them are linked.

[0138] The pattern POS position identifying unit 253 can detect a partial order set of patterns when a predetermined number of components of a repetitive pattern (e.g., a pair or a triple of components) having a specific type, property, and layout exist at a predetermined distance. The pattern POS position identifying unit 253 can also detect a partial order set of patterns in the case of a switching pattern as shown in FIG. 22 referred to herein. Component pairs A and C have text on the left side and a photo on the right side, and component pairs B and D have text on the right side and a photo on the left side. The pattern POS position identifying unit 253 can detect such a pattern based on component pairs having a specific type and property, but with the horizontal distance within each component pair being one of two options (the absolute value being the same negative or positive number). The pattern POS position identifying unit 253 (in the example of a pattern of two members that can be integrated later) can scan all components within a super node and, for each component, identify the positions of the nearest neighboring components on all four sides of the component. The pattern POS position identifying unit 253 can include neighboring components that overlap with the component up to a specific threshold limit. In this case, the pattern POS position identifying unit 253 can save a list of relationships between the component and the neighboring components, then scan the generated list of relationships and select relationship pairs that are similar according to attributes. Such attributes include that the components have the same type (e.g., the component [pic,txt] is similar to another component [pic,txt]), the components have the same direction (including the reverse direction when the switching pattern is supported), and have a similar distance (assuming a predetermined threshold of difference), etc.

[0139] The two components of the selected relationship should have different types, or else it will be understood that a set of four components of the same type arranged in a square shape can generate two opposing sets of similar relationship pairs. For example, as shown in FIG. 23, to which reference is made here, the four photo components can be divided into horizontal pairs (related pairs H1, H2) or vertical pairs (related pairs V1, V2).

[0140] The pattern POS position specifying unit 253 can scan the list of selected relationships and combine those selected relationships into sets (for example, when r1 = r2 and r2 = r3, a set [r1, r2, r3] can be generated). It will be understood that one set of patterns (for example, one set of multiple component sets [txt, txt, pic]) should be operated on together.

[0141] The predefined POS position identifying part 254 can detect a partial order set formed based on specific hints that can be provided by the application designer or exist within the original application template. Such hints can take many forms. Specific composite components, including predefined partial order system hints such as the "photo + text description" component, can include connecting these two components to generate a predefined partial order set. Other hints can be the explicitly specified associations of any component within the page, or the associations of mobile relationships derived from other forms of associations available within the visual design system (e.g., grouping for editing). Since many visual design systems can associate and group components, the components can be removed, resized, or modified together. As another association, there can be dynamic layout anchors. This is because the visual design system can support dynamic layout anchors (either explicitly specified from the definition of the layout or automatically formed). Such anchors can further be used to form a partial order set. As yet another association, there can be templates (i.e., a set of components formed from multiple instances of the same multi-component template).

[0142] It will be understood that the predefined POS position identifying part 254 can provide both predefined groups and predefined partial order sets. These predefined groups and predefined partial order sets are different elements of the system, and by the predefined POS position identifying part 254, the designer can identify the predefined group hints used to group components to form virtual supernodes, and the predefined partial order set / ordering hints used to guide the ordering process.

[0143] The ESI-based POS locator 255 may detect automatic formation of partially ordered sets based on ESI (if available). In particular, the ESI-based POS locator 255 may associate components (as one partially ordered set) based on information collected from previous editing sessions, such as component sets formed using duplication or copy-and-paste, component sets that were grouped and edited together (e.g., when the visual design system only supports ad-hoc groupings that are not saved in a database), and component sets that were edited sequentially.

[0144] After the ordering unit 240 has formed a basic order and the POS locator unit 250 has determined any partial order sets, the order integrator 245 may integrate the basic order and the detected partial order sets to form a combined revised order that is a total order of all relevant elements, thereby resolving conflicting partial order sets along the way.

[0145] It will be appreciated that some elements of the basic ordering unit 247 may not be intended to form a complete order between all components, but rather to split the page / supernode into page portions that fit the allowed width. This may be relevant when a basic structure needs to be maintained (e.g., when an application is translated to a device (e.g., tablet, large display) that is the same width as or larger than a desktop display). In this case, a minimal "slicing" may be visually superior, since breaking down into linearly arranged components would destroy the basic component arrangement. To this end, elements of the basic ordering unit 247 may be modified to operate on page portions (that still fit the available width) rather than on individual components.

[0146] In this case, the basic ordering unit 247 may use such information as a guideline so that page portions that are connected via substantial POS connections are not sliced.

[0147] It will be appreciated that the super node formation unit 230, the basic ordering unit 247, and the POS position specifying unit 250 may further form results that are in opposition to each other. For example, one of the sub-elements of the POS position specifying unit 250 may generate a definition of a specific partial order set for some elements, and the other elements may generate definitions of different opposing partial order sets. The order integration unit 245 may combine the results from various elements to form a single output and may resolve the opposition.

[0148] Furthermore, to resolve such opposition, the super node 230, the basic ordering unit 247, and the POS position specifying unit 250 may all use quality scores. For example, a design based on the designer's explicit requirements usually has the highest quality score. This is because it can be assumed that the designer fully understands the configuration of his own design. The super node 230, the basic ordering unit 247, and the POS position specifying unit 250 may all check their scores against the quality scores held by the scorer 500. This scorer 500 may provide a certainty score for each generated result as to how certain the elements are about the correctness of a specific result based on the analyzed parameters.

[0149] The order integration unit 245 may collect the results from the basic ordering unit 247 and the POS position specifying unit 250 and may integrate those results. It will be appreciated that results that are not in opposition to each other may be easily combined. Results that are in opposition to each other may request the order integration unit 245 to select which result to use. This selection may be made according to the calculated results of the combined quality scores and certainty scores of the specific results. If the results do not meet a predetermined (optional) certainty threshold, those results may be discarded.

[0150] The sequence integration unit 245 may also consider further information such as results defined for components that exist within a template that may have a higher certainty than a result that includes only components defined within the current page (for example, because the template is better designed than a normal page). Also, due to previous operations, the sequence integration unit 245 may consider results similar to those found within each previous page or supernode for which a higher certainty has been assigned.

[0151] The sequence integration unit 245 may be extended to learn the page structure formed by a given designer, if possible, using feedback from the designer who rates the results of the elements.

[0152] Specific elements may return a set of results that should or should not be implemented together. For example, the pattern POS location unit 253 may discover an iterative pattern of components. Such a pattern should or should not be used for all related components.

[0153] After the components are properly ordered, the positioning unit 270 can position the components and any automatically added components (described in more detail below in this specification) at their appropriate positions within the page. The positioning unit 270 can position the ordered elements on the component line as needed, adapting them to the available width according to the determined total order and the allowed space. It will be understood that the available width can be defined by the width of the page supernode minus other constraints such as pre-defined margins and reserved spaces. For example, if the main page width is 320 pixels, the left and right margins are each 10 pixels, and there are no reserved spaces, the available width of the main page supernode can be 320 - (2×10) = 300 pixels. The available width of a page supernode contained within the main page supernode and taking the maximum available width can be 300 - (2×10) = 280 pixels, etc.

[0154] The positioning unit 270 can apply layout hints that are part of the desktop layout configuration when the "held within mobile layout configuration" mark is set. Such components can function similarly to automatically added components in that they can cause the construction of the component line rather than being part of the container basic structure and part of the component line itself.

[0155] Next, the positioning unit 270 can form line breaks according to explicit hints (e.g., "Place this group / POS on the separator line") formed by the super node forming unit 230 and the ordering unit 240. When the additional components exceed the available width (considering the reserved space), the positioning unit 270 can keep the component groups together, that is, it can form a line break before the group if necessary, so that the whole group can be fitted on the same component line. The positioning unit 270 can avoid adding line breaks that break between components having a semantic relationship (detected at an early stage by the POS positioning unit 250, etc.).

[0156] The positioning unit 270 can also apply width reduction means to each element according to the element type. The width reduction means may include modifying components (e.g., text components) that can be adapted according to the component type. Such modifications include resizing, changing the font size, reflowing the text, etc. Also, for width reduction, an operation method for each virtual super node defined according to the type of each virtual super node can be used. These width reduction means may also include deformations similar to those performed by the component adjustment unit 227 (as a preprocess step). Such deformations can be performed here using additional information about the final position and size of the components in the mobile layout configuration. The positioning unit 270 can also increase the width, for example, to expand a component positioned in isolation within the component line.

[0157] The positioning unit 270 provides specific size-changing means for specific element types. For example, the positioning unit 270 can size-change a supernode representing a text group on an image (the position of which is specified by the text group position specifying unit 234 on the image) by using the background image as a virtual container. Then, the text is sized to the desired height and width. This sizing can include font size mapping and reflow of the text that can change the aspect ratio of the text component (such as forming a more elongated text component with larger characters on the inside), as shown in FIG. 6 referred to herein. As shown in FIG. 6, when moving from Example 1 to Example 2, while the font size is increased, the field width is reduced and reflow of the text is required. Also, the text group position specifying unit 234 on the image can size-change the group when the background image is sized to the next text size and usually when the aspect ratio is changed.

[0158] It will be understood that a "visual accident" can be caused when the photograph has actual content (such as a photograph of a person) that may not look good when the aspect ratio is changed, as shown in FIG. 7 referred to herein. The text group position specifying unit 234 on the image can resolve this problem by checking whether the image content contains detailed information or by preserving the internal aspect ratio of the image by zooming and cropping instead of sizing.

[0159] Some components have a degree of autonomy when sizing themselves. By way of example, there are third-party application components (which can support multiple deformation forms of various display sizes) and list applications (which can have multiple view associations). Such components size-change themselves based on the target size provided by the positioning unit 270.

[0160] The positioning unit 270 can also resize / repeat the decorative image as necessary and adapt it to the new page size. If the page exceeds the parameters of a given length, the positioning unit 270 can, in some cases, form an in-page navigation menu and appropriately add this menu as a separate menu to the page or an existing unified menu.

[0161] The positioning unit 270 can re-enlarge / re-shrink both the height and the width while maintaining the aspect ratio of the component. Some components can only maintain their height and change their width (for example, a gallery modified to use fewer columns). Components that must use a specific height when re-enlarging / re-shrinking (for example, a map component with an internal scroll, where the component must leave margins above and below for page scrolling rather than map scrolling due to the internal scroll) can be appropriately manipulated. It will be understood that width reduction can be similarly manipulated.

[0162] The positioning unit 270 can not only apply a width reduction / enlargement process to the component, but can also recursively apply the width reduction / enlargement process to the supernode and the descendants of the supernode. Such processes can include actual component size changes; font size mapping of text; text wrapping; text reduction by separating the visible part from an "expand" part such as "show more" (which is only displayed when requested). Other processes can include switching the component to a "lighter" mobile version and modifying the component parameters for changing the width. The process can also include changing the size of the component to reflect the size actually used.

[0163] After the positioning unit 270 positions the related components in their correct positions within the mobile layout configuration, the post-processor 202 can perform any final layout adjustments.

[0164] The automatic addition component insertion unit 281 can insert automatic addition components into a new mobile layout configuration such as a system menu or other mobile-related widgets that can be added to all or some of the applications to be converted (all or some of the pages). Such inserted automatic addition components may also include, for example, advertisements and / or other sales promotion materials. Such inserted automatic addition components can be either essential (i.e., always inserted) or optional. When inserted optionally, the automatic addition components can be conditionally inserted based on parameters or combinations of parameters such as the user's type or profile (e.g., a specific automatic addition component is inserted for all users within Europe), or the type or profile of each mobile device (e.g., a specific automatic addition component is inserted for all Android (registered trademark) users with a screen size of 480×320 or more). Also, the automatic addition components can be based on parameters or conditions of a specific page (e.g., a specific automatic addition component is inserted for a page that does not include a photo component with a size of 320×200 or more), user actions or application usage history, the availability of space for inserting the automatic addition components, parameters defined by any designer, and parameters defined by any website construction system.

[0165] It will be appreciated that the automatic addition component insertion unit 281 can position such automatic addition components in many ways. The automatic addition component insertion unit 281 can position the automatic addition component as an absolute position automatic addition component that is inserted at a predetermined position within the page or within a specific container (i.e., super node), usually using a reserved space described below in this specification. The automatic addition component insertion unit 281 can also insert the automatic addition component as a relative position automatic addition component that is inserted at a predetermined position relative to some page elements (e.g., pre-defined components, components whose positions are specified by a query, etc.). This is similar to the insertion at the mobile layout configuration level of components described in more detail below in this specification.

[0166] The automatic addition component insertion unit 281 can also add the automatic addition component as a remaining space automatic addition component that is inserted based on the availability of space within the layout. Since the component may sometimes be moved relative to the separation component line, in some cases, within the mobile layout configuration, there is additional empty space that can be used for such automatic addition components compared to the desktop layout configuration.

[0167] In the case of an absolute position automatic addition component, the automatic addition component insertion unit 281 may need to reserve a specific space for these elements on the mobile display area (reserving this area by carving out the area from the rectangular mobile display area assigned to the page / super container). Thus, the area used for the component line can be non-rectangular. Referring to FIG. 24 here. FIG. 24 shows that after carving out the areas reserved for the automatic addition components A and B, the remaining area within the main container C is non-rectangular.

[0168] The related visual design system may also support a dynamic layout that includes using not only explicit (designer-specified) anchors but also implicit (automatically formed) anchors as described in Patent Document 3 entitled "A SERVER BASED WEB SITE DESIGN SYSTEM INTEGRATING DYNAMIC LAYOUT AND DYNAMIC CONTENT", assigned to the same assignee as the assignee of the present invention and published on August 22, 2013. Thus, the visual design system may have anchors (explicit and implicit) that can be broken by the rearrangement process inherent in adapting to the width of a mobile device.

[0169] After the components are properly positioned, the dynamic layout operation unit 284 may modify any existing dynamic layout anchors according to the new layout. For example, the dynamic layout operation unit 284 may remove the anchor of a component that has been moved to make the anchor meaningless as shown in FIG. 3, which is hereby incorporated by reference. As shown in FIG. 3, in Example 1, the horizontal anchor existing between components A and B should be broken when component B is moved below A in Example 2.

[0170] The dynamic layout operation unit 284 can also hold anchors that can be held (such as a set of components that were not modified within a container that was not modified). The dynamic layout operation unit 284 can also modify anchors that can be held but may require modification of parameters (such as changing the length of an anchor for components that were moved closer together). The dynamic layout operation unit 284 can also form new dynamic layout anchors (including both component-component anchors and component-container anchors) between components positioned adjacent to each other. This can be based on automatically formed anchor criteria built into the system (for example, it can be based on the amount of overlap and distance between components).

[0171] It will be appreciated that the newly formed anchors are important because the mobile-adapted application can still be an absolute coordinate visual design application. Thus, an application adapted for mobile use will have to be dynamically modified by changes such as modifications to the content of components such as the amount of text included. These modifications can include changes derived from external sources (external data feeds, concurrent user activity, switching between data records within a list application, etc.). The dynamic layout operation unit 284 will have to perform modifications to further adapt in response to minor modifications within the screen size of the target mobile device. Thus, the dynamic layout operation unit 284 can modify the anchor structure and implement a new anchor structure for final adaptation.

[0172] It will be appreciated that alternative layouts (including grouping, POS, and ordering information) formed can be stored within the database 50 with the application, or separately from the application for further use, or as a basis for further modifications described below in this specification.

[0173] The display unit 290 can display the newly modified layout on the target platform.

[0174] As described above in this specification, the layout re-conversion converter 300 can combine the modifications made on a given desktop layout configuration and the modifications to the shadow mobile layout configuration corresponding to the desktop layout configuration, and can form an updated mobile layout configuration.

[0175] After the operation of the initial layout converter 200, there are two (or more) versions of the application (i.e., the desktop (main) layout configuration and one (or more) (shadow) mobile layout configurations). When referring to the mobile (or shadow) layout configuration, it refers to other additional configurations such as those related to tablet, wide-screen display, etc. In this case, the designer can apply the (individual) modifications to both the desktop layout configuration and the mobile layout configuration by the editing tools of the relevant visual design system, and can form modified versions of the respective configurations. The visual design system can provide a single editor for both versions (which may be restricted when editing the mobile layout), or individual desktop editors and mobile site editors.

[0176] Since the mobile layout configuration is obtained from the desktop layout configuration, the initial layout converter 200 can apply the modifications made to the desktop layout configuration (e.g., addition and deletion of pages and components, and change of component content) to the mobile layout configuration. The re-conversion converter 300 can combine any modification of the desktop layout configuration and any modification of the individual mobile layout configuration while well-adjusting the content of the mobile layout configuration to the desktop layout configuration to form the final mobile layout configuration to be displayed to the mobile user. This procedure will be understood to be complex. For example, when adding a component that should also be added to the modified mobile layout configuration to the desktop layout configuration (the components of the modified mobile layout configuration above may be moved (including moving from a container, into a container, or between containers), resized, or deleted), the re-conversion converter 300 has to determine not only the appropriate position for positioning the added component within the modified layout configuration but also the layout to be used for the added component itself.

[0177] In such an example, it will be understood that any modification to the mobile layout configuration is not incorporated within the desktop layout configuration. Editing the desktop site can change the mobile site, while editing the mobile site does not affect the desktop site. Pure layout changes (i.e., changes in position and size) made to either the desktop layout configuration or the mobile layout configuration will be understood to not affect the other layout configuration, unlike, for example, changes or deletions of component content (which, if made in the desktop layout configuration, affect the mobile layout configuration). Further, since system 100 may restrict mobile editing, components can be deleted (or hidden) from the mobile layout configuration but cannot be added, and the content of components cannot be edited (except for mobile - oriented components, which are described in more detail hereinbelow). Thus, for example, a component within the mobile layout configuration cannot be moved from one page to another by a mobile editor. Such a move would involve adding the component to a page.

[0178] Referring now to FIG. 25. FIG. 25 shows the elements of the re - conversion converter 300. The re - conversion converter 300 may include a page deletion section 310, a page addition section 320, a component deletion section 330, a component addition section 340, a component modification section 350, and a mobile operation section 360. The component addition section 340 may further include an added component identification section 342, a parent / ancestor search section 344, and a mobile layout addition section 346, as shown in FIG. 26, to which reference is made herein. The functions of these elements are described in more detail hereinbelow.

[0179] Refer to FIG. 27 here. FIG. 27 shows the functions of the re-conversion converter 300. The initial layout converter 200 can convert DP1 (Desktop Page 1), and as a result, can form a mobile layout configuration MP2. In this case, the designer can form MP2 by using the local mobile editor 560 to edit MP1. Then, the designer can form DP2 by using the local desktop editor 550 to edit DP1. Next, the re-conversion converter 300 can form an updated mobile layout configuration that integrates the changes made in DP2 and MP2.

[0180] It should be understood that such automatic integration may be relevant only when the desktop editing stage (DP1 ⇒ DP2) is performed after the mobile editing stage (MP1 ⇒ MP2) (see FIG. 26). In the reverse case (when desktop editing is performed first), the initial layout converter 200 can automatically re-convert the modified desktop layout configuration DP2 into the mobile layout configuration MP2 upon completion of the editing of DP2. Therefore, the designer can make changes to MP1 ⇒ MP2 on the already modified MP1, and it is necessary to manually integrate the changes during the (subsequent) mobile modification.

[0181] Furthermore, it should be understood that in order to operate the same site on multiple platforms, it is necessary to have as much of the same content as possible in both sites. However, as described above in this specification, not all desktop components are compatible with mobile, for example, by the use of dropdown menus and vertical lines.

[0182] Also, it will be understood that a major requirement for web-based interactive applications (e.g., websites) is search-engine compatibility. Thus, both the desktop layout configuration and the mobile layout configuration should present the same general page structure to the search engine, and the same page should be available within both layout configurations. Otherwise, the page may be indexed by a search-engine spider that reads the page in the desktop layout configuration, but when a user tries to reach the page directly via a search engine on a mobile device, the page may be unavailable (generating an "Unable to find web page" or similar error state). Conversely, a page that is available (indexed) in the mobile layout configuration but unavailable in the desktop layout configuration will not be discovered by the search engine. Some search engines may support various page structures corresponding to different versions of a site, but the use and availability of such options are internal properties of a particular search engine, and such options cannot be relied upon.

[0183] It will be understood that the appearance of the desktop site and the mobile site may differ, but these sites should share the same data whenever possible. Otherwise, a user may reach the mobile page, for example, by searching for a given text phrase that exists within the content of the desktop page, only to find that the mobile page is different and does not contain the searched-for phrase. In particular, the mobile page should not contain components that do not exist on the desktop page. Some exceptions may apply, such as adding a newly mobile-compatible menu and replacing an existing menu, or removing a text component only in the mobile layout configuration.

[0184] Also, it should be understood that designers may, in some cases, need to make specific modifications to the mobile layout configuration and may deliberately make the mobile layout configuration different from the desktop layout configuration against the search engine policy. For example, a system that displays a feed of summaries of new articles may display a longer summary in the desktop layout configuration and a shorter summary in the mobile layout configuration. It is certain that designers can modify the size, position, and ordering of components, and such changes generally should not affect the operation of the mobile site by the search engine.

[0185] To resolve or at least mitigate such conflicts, the re-conversion converter 300 may limit the scope of modifications that designers can make to the mobile layout configuration. For example, modifications by designers may be limited to those that only affect the mobile layout configuration but not the actual content. Such limitations may be enforced by the mobile editor 560 of the system before various modifications are manipulated by the re-conversion machine 300.

[0186] Modifications to the desktop layout may include adding pages, removing pages, adding components, removing components, changing the attributes of components, moving and resizing components, and changing the content of components (e.g., text within a text paragraph). As described above, pure layout changes (e.g., moving and resizing) do not affect the mobile layout configuration.

[0187] As described above in this specification, the visual design system may have an internal unique ID for each component that does not change when the component is modified or moved. The reconversion converter 300 may use these IDs and may track components modified from one version of a page to another. Since the reconversion converter 300 assumes that all modifications are made via the visual design system editor and are fully tracked, when evaluating a modified version, the reconversion converter 300 may have a detailed list of changes to the modified attributes and values (e.g., for component X, the style is changed from S1 to S2 and the width is changed from W1 to W2).

[0188] When removing an existing desktop page, the page deletion unit 310 may also remove the page from the mobile layout configuration. It should be understood that this means that the modifications made to the specific mobile layout configuration for that page are lost. The only way to restore those modifications is by means of an "undo" function (e.g., undoing at the session level during the current session or reverting the version at the database level).

[0189] When a new page is added to the desktop, the page addition unit 320 may, as described above in this specification, instruct the initial layout converter 200 to convert the entire page into a mobile layout configuration. It will be understood that the converted page may appear in the appropriate position in the mobile layout configuration. The page addition unit 320 may update any mobile navigation menu to include the newly inserted page.

[0190] When deleting a component from an existing desktop layout configuration, the component deletion unit 330 may delete the corresponding component from the corresponding mobile layout configuration. The component deletion unit 330 may also instruct the mobile operation unit 360 to update the mobile layout display and, as described in the following description of the mobile operation unit 360, may close the gap within a predetermined component line or delete the entire component line.

[0191] When adding one or more new components to the desktop page, it will be understood that the new components may form a new hierarchical component order corresponding to the modified desktop page including the newly added components. Regarding changes to the desktop layout configuration, since it is only necessary to combine the modifications of the desktop layout configuration and the mobile layout configuration when no changes are made to the mobile layout configuration, the reconversion converter 300 may instruct the initial layout converter 200 to reconvert the desktop page.

[0192] It will be understood that the component addition unit 320 must identify an appropriate position within the mobile layout configuration in order to add the added component to the layout configuration. This task can be particularly complex because the component may have been removed (including moving between containers), resized, repositioned, or removed within the mobile layout configuration. Additionally, components in the desktop layout configuration may have been moved or removed. Therefore, the component addition unit 320 must find an appropriate position for adding the component according to the preprocessor and / or the parent (one of these must exist).

[0193] Regarding each component X added to the mobile layout configuration, the additional component identification unit 342 can identify the additional component (e.g., by component ID comparison, edit session history, or access to the basic database). The component identification unit 342 can instruct the component filter unit 221 to perform component filtering to determine whether the component is suitable for mobile display (e.g., not an empty component, not a mobile-incompatible type, etc.).

[0194] Next, the parent / ancestor search unit 344 can perform a parent / ancestor search to identify the closest ancestor component PD(X) and / or parent component PT(X) that is closest to the added component X and also exists within the mobile layout configuration (i.e., these components are ancestor components PD(X) and / or parent components PT(X) that have not been explicitly removed from the mobile layout configuration or removed due to their type). The ancestor is determined according to the order specified by the ordering unit 240, i.e., the closest ancestor that appears within the mobile layout configuration is selected. The parent is determined according to the page container hierarchy, i.e., the closest level of parent container that appears within the mobile layout configuration is selected. It will be understood that some components can be manually removed (or hidden) in the mobile layout configuration and thereby excluded from the parent / ancestor search. Also, for example, (excluding components that are not visible within the mobile) if X is the first component within a page / container and has no ancestors, it will be understood that there is no closest ancestor component. Further, it will be understood that since the search will always reach the page used as the top-level container, there cannot be no parent component. After the parent / ancestor search unit 344 determines the ancestor and parent (if available), the mobile layout addition unit 346 can position the added component X after the closest ancestor component, in a position having the same relationship to the ancestor / parent component within the mobile layout configuration as the relationship that the added component X had to the ancestor / parent component within the desktop layout configuration, and can push down all components after the ancestor.

[0195] It will be understood that there are two main ways to perform the above procedure when operating on a plurality of added desktop layout configuration components (X[1], X[2],...), namely, the one-by-one method or the clustered method.

[0196] In the one-by-one method, the added desktop layout configuration components X[i] are operated according to the order of those components (defined, for example, by the ordering unit 240). For each component X[i], the parent / ancestor search unit 344 performs an ancestor / parent search considering the previous added components X[j] (1 ≤ j < i). In this way, each component X[i] is operated considering other added components.

[0197] In the clustering method, the parent / ancestor search unit 344 can perform a parent / ancestor search individually for each added desktop layout configuration component X[i], ignoring other added desktop layout configuration components X[j] (j ≠ i). Thus, the parent / ancestor search unit 344 performs a parent / ancestor search for each X[i] as if X[i] were the only component added to the desktop layout configuration. After such a search is completed, the component X[i] is clustered according to the common combination of the ancestor component PD(X[i]) and the parent component PT(X[i]). The components within each cluster can be grouped together as one virtual page (for example, a virtual supernode that may contain other supernodes inside). In this case, the component addition unit 340 can instruct the initial layout converter 200 to operate individually on each such virtual page and can recursively perform the complete conversion process (the process including the preprocess, analysis, anchor, etc. described above in this specification). By this process, each virtual page can be converted into a converted virtual page. This converted virtual page is then positioned as a unit within the mobile layout configuration by the mobile layout addition unit 346 based on the ancestors and parents common to the cluster.

[0198] Now refer to FIGS. 28A to 28G. FIGS. 28A to 28G show examples of addition and editing of various components and how those components are operated by the component addition unit 340.

[0199] Refer to FIG. 28A here. FIG. 28A shows a desktop page DP1 including two components A and B. The initial layout converter 200 can convert such a page into a mobile page MP1. When a new component X is added between A and B in DP1 to form a page DP2, the parent / ancestor search unit 344 performs a parent / ancestor search for X and discovers that X follows A within the page (desktop layout configuration) including X. Thus, the mobile layout addition unit inserts X after A within the page including X in MP1 to form MP2.

[0200] In another example, as shown in FIG. 28B referred to here, the mobile page MP1 is edited via the mobile editor 560, the vertical positions of A and B are swapped, and MP2 is formed. After such an edit, the designer then inserts a new component X between A and B in DP1 to form a page DP2. The component addition unit 340 can reconcile the changes made to DP2 and MP2. The parent / ancestor search unit 344 can perform a parent / ancestor search for the component X and discover that X follows A (the nearest ancestor) within the page (the nearest parent within the desktop layout configuration) including X. Thus, the mobile layout addition unit 346 can insert X following component A (here below B instead of above B) within the page including X in MP2 to form an updated mobile page MP3.

[0201] In yet another example, as shown in FIG. 28C, which is hereby incorporated by reference, the mobile page MP1 is edited via the mobile editor 560 to remove (hide) (form MP2) component B that is below component A and above component C. Then, DP1 is edited via the desktop editor 550 to insert component X after B and before C (form DP2). Then, the component addition unit 340 may reconcile the changes to DP2 and MP2. The parent / ancestor search unit 344 may perform a parent / ancestor search for the added component X and, since B is marked as "removed in mobile", may determine that the ancestor of X is A rather than B. Thereby, the mobile layout addition unit inserts X after A (and before C) in MP2 to form MP3.

[0202] In yet another example, as shown in FIG. 28D, which is hereby incorporated by reference, the page DP1 includes container A that includes internal container B and other component D, and all of them are converted to MP1. Then, the mobile page MP1 is edited via the mobile editor 560 to remove (hide) internal container B (form MP2). Then, DP1 is edited via the desktop to insert component C inside internal container B (form DP2). Then, the component addition unit 340 may reconcile the changes to DP2 and MP2. In such an example, when performing a parent / ancestor search for the added component C, the parent / ancestor search unit 344 may determine that the parent is A rather than B since B is marked as "removed in mobile". The parent / ancestor search unit 344 may further determine that C has no ancestor since C is the first component within A (not considering B). Thus, the mobile layout addition unit 346 may insert C within A (topmost and before D) in MP2 and form MP3.

[0203] In yet another example, as shown in FIG. 28E, which is hereby incorporated by reference, the mobile page MP1 is edited via the mobile editor 560 to swap the vertical positions of A and B to form MP2. The designer then inserts two new and largely overlapping components X1 and X2 between A and B in DP1 to form page DP2. The component adder 340 may reconcile the changes to DP2 and MP2 in one of two possible ways, producing MP3 (corresponding to the one-by-one approach) or MP4 (corresponding to the clustering approach).

[0204] It will be appreciated that if the one-by-one approach is used and X2 is geometrically "later" positioned than X1, the parent / ancestor finder 344 may first perform a parent / ancestor search for X1 and determine that A is an ancestor of X1. The parent / ancestor finder 344 may then perform a parent / ancestor search for X2 (taking X1 into account) and determine that X1 is an ancestor of X2. Thus, in this case, the mobile layout adder 346 may form MP3 by positioning component X1 after A and positioning component X2 after X1. In such a method, components X1 and X2 are analyzed and moved as individual entities, so their composition is separate.

[0205] When using the clustering method, the parent / ancestor search unit 344 can perform the parent / ancestor search for both X1 and X2 without prioritizing X1 or X2 (for the search), and can determine that both X1 and X2 have the same parent (main page) and the same ancestor (component A). Thereby, the component addition unit 340 can cluster X1 and X2 together, can form a virtual super node including X1 and X2, and can instruct the initial layout converter 200 to form a mobile ready version of the composition of X1 and X2. It will be understood that such a converted composition can be positioned under A and an MP4 is formed. Since X1 and X2 largely overlap, X1 and X2 may be resized to maintain their compositions (as described above).

[0206] In yet another example, as shown in FIG. 28F, which is hereby incorporated by reference, an original desktop page DP1 including two components (A and B) is edited via a desktop editor 550 by adding four new components (two pairs of semantically related text components and image components (T1 / I1 and T2 / I2)) to form a new page DP2. When converting DP2 to mobile using the one-by-one method (described above herein), the parent / ancestor search unit 344 may determine that T1 is an ancestor of T2. Thus, the order of the generated (vertical) components may be A-T1-T2-I1-I2-B (as shown in MP2), and the connection between the text description and the image may be broken. When converting DP2 to mobile using the clustering method (described above herein), the parent / ancestor search unit 344 may determine that T1 / T2 / I1 / I2 all have the same ancestor (A) and parent (main page). Thus, the mobile layout addition unit 346 may cluster these four components in a new virtual page and may operate the initial layout converter 200 on these four components. Since T1 is semantically related to I1 and T2 is semantically related to I2, these pairs may be maintained together. Thus, the formed (vertical) order may be A-T1-I1-T2-I-B (as within MP3), and semantic information may be maintained.

[0207] In yet another example, as shown in FIG. 28G, which is hereby incorporated by reference, the desktop page DP1 includes three components (A - C) and is converted to mobile. The resulting mobile page MP1 is edited via the mobile editor 560 to remove component C and swap the order of A and B to form MP2. Next, DP1 is edited via the desktop editor 550, two duplicate components X1 and X2 are added between B and C, and an additional component X3 below C is added to form DP2. Since the component addition section 340 is configured to use a clustering method, the three additional components (X1, X2, and X3) are clustered together. This is because the parent / ancestor search section 344 has determined that B is the ancestor of all three new components (since C has been removed in the mobile version). Thus, the mobile layout addition section 346 can position all three new components below B and above A while maintaining the composition of X1 and X2 (as shown in MP3).

[0208] It will be appreciated that positioning the additional components by the mobile layout addition section 346 can be performed in a limited version where the components are added to the desktop version or vertically added between two vertically separated components in the mobile version only.

[0209] In other embodiments, the component addition section 340 can add a "cluster" of multiple additional components anywhere inside a "line" of components that spreads within the mobile version such that the insertion of new components is not limited to being below a predetermined component within the mobile version.

[0210] In yet another embodiment, the component adder 340 can attach the additional component B to a container in the desktop layout configuration that includes the additional component B rather than having the additional component B as an ancestor. In such a form, the component B remains attached to the container C that includes the component B, and it is understood that within the container C, it exists within both the desktop layout configuration and the mobile layout configuration and is positioned after the last element preceding the component B. This approach can be used as long as the container C (and the corresponding super node) is not empty or is not hidden in the mobile layout configuration.

[0211] In yet another embodiment, the component adder 340 can add a component to the mobile layout configuration by horizontally segmenting the mobile layout configuration and adding the component or component cluster to be added after a segment that includes the ancestor rather than directly after the ancestor.

[0212] It will be appreciated that when there are changes to attributes such as the style, font, or text size of a desktop component, including changes to general properties such as changing the number of rows or columns within a gallery component, the component modifier 350 can modify the components within the mobile layout configuration. Since the mobile layout configuration defines a visual application assuming a dynamic layout, the mobile layout configuration can adapt such changes and appropriately readjust the component sizes and positions.

[0213] Also, while changes to the size and position of desktop components affect the desktop layout configuration, it should be understood that those changes do not affect the mobile layout configuration unless the mobile layout configuration is explicitly regenerated as described below in this specification. This is allowed because system 100 takes into account the visual (design) differences between multiple layout configurations as long as the content does not change.

[0214] When there are changes to the data / content of the desktop components, the component modification unit 350 may appropriately update the mobile layout configuration. Similar to the modification of attributes, such data changes may cause reformating of the components on the mobile layout configuration, which is operated using the dynamic layout.

[0215] It should be understood that any modification to the mobile layout configuration can be performed by the user, usually via a dedicated GUI display (mobile editor 560) or a mobile modification display having a mobile preview layout configuration. Such a mobile editor 560 may only be able to perform predetermined operations such as adding mobile-only components, removing components (hiding components), moving components, or only modifying components. Therefore, the mobile editor 560 may be associated with the mobile operation unit 360 that operates changes only on the mobile side.

[0216] The mobile operation unit 360 can use many ways to position (mobile-only) additional components. As shown in FIG. 29 referred to herein, the mobile operation unit 360 can enable the insertion of a new component only between two components on a component line or on a new component line following or preceding an existing component line. A new component X can be inserted between A and B, or a new component Y can be inserted below P and above A, B, and C. The mobile operation unit 360 can also insert a line break before / after the additional component.

[0217] In this case, the inserted component (X or Y) can be fixed to the preceding component (or container), and when the mobile layout configuration is regenerated and it is necessary to "maintain the added mobile component", it can be re-inserted at the above position. If an anchor cannot be used (for example, when the anchored-to component has been removed from the desktop layout configuration), the mobile operation unit 360 can also search for the nearest previous component or container as described above regarding the addition of components to the desktop layout configuration.

[0218] Also, the mobile operation unit 360 may be able to position a new component X (mobile-only) at any position within the page. In this case, the mobile operation unit 360 can search for an anchor component by searching for the component that most significantly intersects X. If such a component is not available, the mobile operation unit 360 can search for the nearest neighboring component (on all four sides) based on a weighted average of distance and overlap and by using thresholds for distance and overlap. If such a component is not found within the container containing X, the mobile operation unit 360 can use the start of the page, which can be defined as an anchor by the distance and offset from the nearest edge of the anchor, as an anchor.

[0219] To ensure compliance with search engine policies, the re-conversion converter 300 can completely avoid operations that do not comply with the search engine policies of the re-conversion converter 300. Alternatively, the re-conversion converter 300 may be limited to adding components that do not affect the search engine view of the page (e.g., decorative type components (e.g., lines, decorative shapes)), components without content (e.g., in-page navigation menus that do not add extra menu entry information), components with content not provided to the search engine (e.g., background images), and components related only to the mobile environment (e.g., functions to make calls, functions to send text / MMS messages, functions to navigate to a predetermined location, or buttons that provide a function to switch to the desktop site version).

[0220] Also, it will be understood that the mobile editor 560 may first position non-recommended mobile components within the "removal components" display and require a second step to actually incorporate those non-recommended mobile components into the mobile layout configuration.

[0221] Additional components may be listed within the mobile modification display as described below in this specification, facilitating the removal of components added only to specific mobiles.

[0222] The mobile operation unit 360 can also remove components from the mobile layout configuration (this removal can be performed by actually removing the components or simply by hiding them). When a component is removed from the mobile layout configuration, it will be understood that the mobile operation unit 360 will not rearrange the components in the same line. When the entire component line is removed, the mobile operation unit 360 can move the lower components up as close as possible, as shown in FIG. 30 referenced herein. If any one of components A, B, or C (but not all three) is removed, the remaining components (A, B, or C) in the line will not be affected or moved. If all three components (A, B, and C) are removed, component Q and the components following component Q will move up towards the adjacent component P. The removed components are listed in the mobile modification display as described below in this specification, facilitating the reinsertion of the hidden components into the application if needed at a later stage.

[0223] Also, it will be understood that components within the mobile layout configuration can be moved by the user via a visual data system GUI for normal editing. The mobile operation unit 360 can retain the modifications until the page is reformed and can list the modifications in the mobile modification display as described below in this specification, facilitating the reversal of specific changes.

[0224] The mobile editor 560 may also enable components to move "out" (right or left) from the narrow display strip of the mobile. In this example, the component may maintain a predetermined minimum horizontal overlap with the above-mentioned "strip" and may be clipped to the strip size for display. Otherwise, this option may be equivalent to the "hide component" option. This option may be used to show only a part of the component / container or to temporarily position the component aside and use it to reposition the component within the mobile configuration.

[0225] Also, the mobile editor may allow the user to selectively change the attributes, properties, and styles of components within the mobile layout configuration. The mobile editor may mark such changed attributes as "changes within the mobile" so that changes to specific attributes within the desktop layout configuration do not affect (and cannot override) changes to such attributes within the mobile layout configuration.

[0226] One specific change that may be desirable as a change specific to the mobile layout configuration is the font size. A change in the font size may be required when the component adjuster 227 generates a size different from the size that the designer may request. Thus, a specific font size change may be added to and applied to the display text for each field (as a factor applied in addition to the font size generated by the initial layout converter 200). The mobile editor 560 may change the font size using a local "scale factor" attribute and, for example, 5% font size increase / decrease buttons that may affect such an attribute. The mobile editor 560 may further limit the new font size to a predetermined range of font sizes suitable for the mobile. Any attribute modification (including font size changes) may be listed in the mobile modification display described below in this specification.

[0227] As described above in this specification, the re-conversion converter 300 may provide a separate GUI that displays a list of modifications specific to a given mobile layout configuration (e.g., addition of components, removal of components, and modification of components). Such a GUI may be useful for viewing modifications to a particular mobile layout configuration and for distinguishing those modifications from modifications to other layouts by the initial layout converter 200. Also, the GUI may be useful for viewing various changes to various mobile layout configurations and for reverting modifications to a particular mobile layout configuration (e.g., reinserting a particular "removed" component).

[0228] It will be appreciated that such displays may be split according to the page on which the modification was made (i.e., the current page, another page, any template, or master page), or according to the type of modification (i.e., insertion, removal, or modification of a component).

[0229] The above display may further be used to classify these modifications according to, for example, a timestamp, a position within the page, or the type of component affected. The mobile editor may support an operation to revert a selected set of modifications. In this case, the mobile operation unit 360 may revert any modification (e.g., reinsertion of a removed component is a modification of the opposite component position).

[0230] The re-conversion converter 300 may further support an option to regenerate the mobile layout configuration. When activated, the re-conversion converter 300 may be instructed to operate again on the desktop layout configuration that underlies the initial layout converter 200 (the desktop layout configuration may have been modified since the initial layout converter 200 last operated), and changes specific to the mobile layout configuration may in some cases be reapplied.

[0231] It should be understood that regeneration can be applied to the page to be regenerated (the current page, a specific page, the entire application), and the changes to the mobile layout configuration to be reapplied after regeneration of the mobile layout configuration. These changes to the mobile layout configuration can be selected by category (e.g., only hiding components) and can include specific selected modifications or all modifications. Also, it should be understood that if the regeneration operation is performed without reapplying the changes to the mobile layout configuration to a given page or pages, the associated changes to the mobile layout configuration are discarded.

[0232] As described above in this specification, the display unit 290 can display a new updated mobile layout configuration.

[0233] In the system as described above, the related website construction system can be integrated in many ways. For example, the system 100 can be fully incorporated on the client side, fully incorporated on the server side, or incorporated on both the client side and the server side within the actual website construction system code. The system 100 can also operate on the same server platform as the website construction system, or on a separate independent server or server set. The system 100 can operate online (at any time when viewing the website construction system), offline (to form a stored converted version of the website construction system), or in a combination thereof (operating offline at some stages and online at other stages). The system 100 can also operate directly on the data structure of the website construction system, or provide an interface (such as a web service) that is called by the website construction system to be independent of the content of the website construction system.

[0234] In various embodiments of the present invention, it will be understood that the various elements of system 100 can divide the functions of those elements in various ways and perform the above-described functions in an order different from the order described hereinabove. Further, it will be understood that system 100 can also be implemented partially using partial functions.

[0235] Accordingly, the desktop layout configuration of a specific application can be appropriately converted into a mobile layout configuration (or any other layout for various sizes of purposes) taking into account the relationships between components. Further, after the initial conversion, corrections can be made for the same page in both the desktop layout configuration and the mobile layout configuration and reflected in the newly generated mobile page.

[0236] Unless otherwise specifically stated, as is apparent from the above considerations, throughout this specification, discussions using terms such as "processing", "calculating", "computing", "determining", etc. refer to the operation and / or processing of a computer, a computing system, a client / server system, or a similar electronic computing device that operates on and / or transforms data represented as a physical quantity, such as an electronic quantity in a register and / or memory of the computing system, into other data similarly represented as a physical quantity in a memory, register, or other device that stores, transfers, or displays such information of the computing system.

[0237] Embodiments of the present invention may include an apparatus for performing the operations herein. The apparatus may be specially configured for a desired purpose, or may comprise a general-purpose computer selectively operated or reconfigured by a computer program stored in the computer. The configured apparatus may transform a general-purpose computer into the inventive elements described herein when instructed by software. The above instructions may define an inventive apparatus that operates with a desired computer platform for the inventive apparatus. Such a computer program may be stored in a computer-readable storage medium such as, but not limited to, a floppy disk, optical disk, magneto-optical disk, read-only memory (ROM), compact disk read-only memory (CD-ROM), random access memory (RAM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), magnetic or optical card, flash memory, disk-on-key, or any other type of disk such as any other type of medium suitable for storing electronic instructions and connectable to a computer system bus.

[0238] The processes and displays presented herein are not inherently related to any particular computer or other apparatus. Various general-purpose systems may be used with programs in accordance with the techniques herein, or it may prove convenient to construct more specialized apparatus to perform the desired method. The desired structure of various of these systems will become apparent from the following description. Further, embodiments of the present invention have not been described with reference to any particular programming language. It will be understood that a variety of programming languages may be used to implement the techniques of the invention as described herein.

[0239] Certain features of the invention have been illustrated and described herein. However, many modifications, substitutions, changes, and equivalents will occur to those skilled 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 invention.

[0240] Cross - reference to related applications This application claims priority to U.S. Provisional Application No. 61 / 876,795, filed on September 12, 2013, which is hereby incorporated by reference in its entirety.

Claims

1. 1. A system for adapting the layout of a website, comprising: A processor; a converter running on the processor to convert a source layout of a website page having components into a destination layout for a destination display area, the converter comprising: Analyzing existing anchors between components of the source layout; Removing meaningless anchors, Modifying the held anchor; and creating new anchors between adjacent components in the destination layout; a dynamic layout adjuster that applies the retained, modified, or new dynamic layout anchors to the destination layout; The dynamic layout adjuster enables the destination layout to adapt to changes in a destination device's screen size.

2. The system of claim 1 , wherein the converter further comprises a pre-processor that analyzes object properties of the component and modifies them for suitability for presentation on the destination display area.

3. The system of claim 1 , wherein the converter further comprises a supernode former that identifies locations of groups of components that should remain together on the destination layout and forms a hierarchy of supernodes based on the locations of the components and content relationships of the components.

4. The system of claim 3 , wherein the converter further comprises an ordering unit that determines an ordering of elements within each of the supernodes.

5. The system of claim 4 , wherein the converter further comprises a positioner that positions the elements in the destination layout based on at least one of the determined order and the group.

6. The system of claim 1 , further comprising a reconversion converter that combines modifications to the source layout and the destination layout to create an updated destination layout configuration.

7. 1. A method for adapting the layout of a website, comprising: Transforming a source layout of a website page having components into a destination layout for a destination display area, said transforming comprising: analyzing existing anchors between components of the source layout; Removing meaningless anchors, Modifying the held anchor; and creating new anchors between adjacent components in the destination layout; applying the retained, modified, or new dynamic layout anchors to the destination layout; Equipped with A method, wherein the analyzing and applying enable the target layout to adapt to changes in screen size of a target device.

8. The method of claim 7 , wherein the converting further comprises analyzing object properties of the components and modifying their suitability for presentation on the destination display area.

9. The transforming step includes identifying locations of groups of the components that should remain together on the destination layout, and forming a hierarchy of supernodes based on the locations of the components and content relationships of the components; The method of claim 7 further comprising:

10. The method of claim 9 , wherein the converting further comprises determining an order of elements within each of the supernodes.

11. The method of claim 10 , wherein the converting further comprises positioning the elements in the destination layout based on at least one of the determined order and the group.

12. The method of claim 7 , further comprising combining modifications to the source layout and the destination layout to create an updated destination layout configuration.

Images