Method and system for section-based editing of a website page
A visual design system includes a dynamic layout editor, a page analyzer, a UI subsystem and a change executor. The dynamic layout editor edits content of a visual creation according to dynamic layout rules. The visual creation includes at least one page having at least two components, the dynamic layout rules are associated with anchors or constraints for positioning the components, and each component has geometrical properties. The page analyzer performs a geometrical analysis on the page in response to a change of components and divides the page into sections based on at least geometrical relationships between the geometrical properties. The UI subsystem generates and presents at least one section to a user for editing as a virtual container containing at least one of the two components. The change executor regenerates and displays the page with the section according to editing changes made during the editing session.
1 . A visual design system comprising:
a processor; at least one database storing websites built using said visual design system, said websites having pages with a plurality of components having geometrical properties and at least a geometrical relationship between at least two components of said plurality of components, said at least one database further storing editing history of edits to said plurality of components;
a page analyzer running on said processor to analyze for a page of said pages during an editing session of said page, both editing history and geometrical relationships in response to least one of: addition, removal, moving and modification of at least one component on said page during said editing session, to determine subsets of said plurality of components that should remain together in a section of said page according to said analysis and to divide said page into at least two sections accordingly;
wherein at least one section of said at least two sections contains at least one of said subsets; and
wherein said at least two sections are editable by a dynamic layout editor activated by the processor according to dynamic layout rules, as virtual containers to which said dynamic layout rules are applied.
2 . The system according to claim 1 , wherein said geometrical properties are at least one of: position on said page, height and width.
3 . The system according to claim 1 , wherein said page analyzer also performs analysis according to at least one: of semantic relationships between said at least two components and content and attributes of said at least two components.
4 . The system according to claim 3 , wherein said page analyzer comprises:
an element divider to divide said at least one component into subsets for the creation of a definition for said at least one section; and
a section definer to create said definition according to the output of said element divider.
5 . The system according to claim 1 , wherein said visual design system is at least one of: a website building system, a desk top application development environment, a mobile application development environment, a client server application development environment, a non-browser web application development environment, a plug-in development environment and a shop-builder.
6 . The system according to claim 1 , further comprising a user interface (UI) subsystem running on said processor to generate and present to a user of said visual design system, said at least one section and to enable said user to manipulate said at least one section using at least one handle during said editing session.
7 . The system according to claim 6 , wherein said UI subsystem comprises:
a UI runner to present said page with said at least one section to said user for editing;
a UI handle generator to add said at least one handle to said at least one section;
a manipulation window manager to perform zooming and zoom-related calculations to support dynamic zooming during editing of said at least one section; and
a change executor to execute changes made by said user to said at least one section.
8 . The visual design system according to claim 1 , wherein said dynamic layout rules being at least one of: between a section and at least one other section, between a section and at least one component of the page, and between at least two components of the page.
9 . A method for a visual design system, the method comprising:
storing in at least one database, websites built using said visual design system, said websites having pages with a plurality of components having geometrical properties and at least a geometrical relationship between at least two components of said plurality of components, further storing editing history of said websites;
analyzing for a page of said pages during an editing session of said page, editing history and geometrical relationships in response to at least one of addition, removal, moving and modification of at least one component on said page;
determining subsets of said plurality of components that should remain together in a section of said page according to said analysis;
dividing said page into at least two sections accordingly;
wherein at least one section of said at least two sections contains at least one of said subsets, and
wherein said sections are presented as virtual containers upon which said dynamic layout rules are applied.
10 . The method according to claim 9 , wherein said geometrical properties are at least one of: position on said page, height and width.
11 . The method according to claim 9 , wherein said analyzing analyzes according to at least one of: semantic relationships between said at least two components and content and attributes of said at least two components.
12 . The method according to claim 11 , wherein said performing at least geometrical analysis comprises:
dividing said at least one component into subsets for the creation of a definition for said at least one section; and
creating said definition according to the output of said dividing said at least one component.
13 . The method according to claim 9 , wherein said visual design system is at least one of: a website building system, a desk top application development environment, a mobile application development environment, a client server application development environment, a non-browser web application development environment, a plug-in development environment and a shop-builder.
14 . The method according to claim 9 , further comprising:
generating and presenting to a user of said visual design system, said at least one section; and
enabling said user to manipulate said at least one section using at least one handle during said editing session.
15 . The method according to claim 14 , wherein said generating and presenting comprises:
presenting said page with said at least one section to said user for editing;
adding said at least one handle to said at least one section;
performing zooming and zoom-related calculations to support dynamic zooming during editing of said at least one section; and
executing changes made by said user to said at least one section.
16 . The visual design method according to claim 9 , wherein said dynamic layout rules being at least one of: between a section and at least one other section, between a section and at least one component of the page, and between at least two components of the page.
17 . A visual design system comprising:
a processor;
at least one database storing websites built using said visual design system, said websites having pages with a plurality of components having geometrical properties and at least a geometrical relationship between at least two components said plurality of components, said at least one database further storing editing history of edits to said plurality of components;
a dynamic layout editor to enable a user to edit components of a page of said pages according to pre-defined dynamic layout rules;
a page analyzer running on said processor to analyze, in response to an action from said dynamic layout editor, both component editing history and component geometrical relationships of components on said page in response to an action by said dynamic layout editor, to determine subsets of said plurality of components that should remain together in a section of said page according to said analysis and to divide said page into at least two sections accordingly;
wherein at least one section of said at least two sections contains at least one of said subsets; and
wherein said sections are editable by said dynamic layout editor as virtual containers upon which said dynamic layout rules are applied.
18 . The visual design system according to claim 17 , wherein said dynamic layout rules being at least one of: between a section and at least one other section, between a section and at least one component of the page, and between at least two components of the page.