System, method and computer program product for editing web pages in-context of a production view
Systems and methods for in-context editing of web pages in which the production format of a web page is visible while the web page is being edited, and the editable image is not distorted by the editing tools. In one embodiment, a system includes a server computer, a client computer and a transmission channel coupled between them. The server computer receives a request for a web page from the client computer and responsively transmits a web page containing in-context editing tools to the client computer. The client computer operates alternately in a first mode in which the in-context editing tools are superimposed on a web page image, or a second mode in which the web page image is displayed, but the in-context editing tools are hidden. The tools overlay in the first mode does not alter the production format of the web page image as displayed in the second mode.
1. A system for editing web pages comprising:
a memory; and
a processor, operatively coupled to the memory, to:
receive a production view of a web page and an overlay for a set of in-context editing tools based on the set of in-context editing tools being associated with a component of the web page;
cause a web page to be rendered in a first mode where the set of in-context editing tools are disabled and the production view of the web page is rendered and an overlay of in-context editing tools is hidden;
determine a user interaction associated with editing the web page;
based on the user interaction, cause the web page to be rendered in a second mode where the set of in-context editing tools are enabled and displaying the overlay of the set of in-context editing tools on the production view in association with the first component without distorting a size and placement of components of the production view;
receive an edit to the first component using an in-context editing tool of the set of in-context editing tools; and
refresh the first component without requesting the web page.
2. The system of claim 1 , wherein the user interaction is associated with the component.
3. The system of claim 2 , wherein the processor is further to visually demarcate the component in the second mode.
4. The system of claim 1 , wherein the webpage is to be rendered in the first mode using a browser.
5. The system of claim 4 , wherein the webpage is to be rendered in the second mode using the browser.
6. The system of claim 5 , wherein the component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the browser switches between the first mode and the second mode based on the first namespace or a second namespace.
7. The system of claim 1 , wherein the component is the entire web page.
8. A method, comprising:
receiving a production view of a web page and an overlay for a set of in-context editing tools based on the set of in-context editing tools being associated with a component of the web page;
causing a web page to be rendered in a first mode where the set of in-context editing tools are disabled and the production view of the web page is rendered and an overlay of in-context editing tools is hidden;
determining a user interaction associated with editing the web page;
based on the user interaction, causing the web page to be rendered in a second mode where the set of in-context editing tools are enabled and displaying the overlay of the set of in-context editing tools on the production view in association with the first component without distorting a size and placement of components of the production view;
receiving an edit to the first component using an in-context editing tool of the set of in-context editing tools; and
refreshing the first component without requesting the web page.
9. The method of claim 8 , wherein the user interaction is associated with the component.
10. The method of claim 9 , further comprising:
visually demarcating the component in the second mode.
11. The method of claim 8 , wherein the rendering in the first mode is done by a browser.
12. The method of claim 11 , wherein the the rending in the second mode is done by the browser.
13. The method of claim 12 , wherein the component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the browser switches between the first mode and the second mode based on the first namespace or a second namespace.
14. The method of claim 8 , wherein the component is the entire web page.
15. A non-transitory computer readable medium, comprising storing instructions that, when executed by a processor, cause the processor to:
receive a production view of a web page and an overlay for a set of in-context editing tools based on the set of in-context editing tools being associated with a component of the web page;
cause a web page to be rendered in a first mode where the set of in-context editing tools are disabled and the production view of the web page is rendered and an overlay of in-context editing tools is hidden;
determine a user interaction associated with editing the web page;
based on the user interaction, cause the web page to be rendered in a second mode where the set of in-context editing tools are enabled and displaying the overlay of the set of in-context editing tools on the production view in association with the first component without distorting a size and placement of components of the production view;
receive an edit to the first component using an in-context editing tool of the set of in-context editing tools; and
refresh the first component without requesting the web page.
16. The non-transitory computer readable medium of claim 15 , wherein the user interaction is associated with the component.
17. The non-transitory computer readable medium of claim 16 , wherein the processor is further to:
visually demarcate the component in the second mode.
18. The non-transitory computer readable medium of claim 15 , wherein the webpage is to be rendered in the first mode using a browser.
19. The non-transitory computer readable medium of claim 18 , wherein the webpage is to be rendered in the second mode using the browser.
20. The non-transitory computer readable medium of claim 19 , wherein the component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the browser switches between the first mode and the second mode based on the first namespace or a second namespace.
21. The non-transitory computer readable medium of claim 15 , wherein the component is the entire web page.