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 operate 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 processor;
a non-transitory computer readable medium storing a set of computer instructions executable by the processor to:
determine an editing tool associated with a component of a web page based on a specification of an action or editing tool associated with the web page or the component;
generate page source associated with the web page, the page source including source associated with an overlay for the editing tool;
transmit the page source to a client device, the page source including the overlay for the editing tool and adapted to allow the client browser to render the page source to render the web page in association with a first mode or a second mode and to switch between the first mode and the second mode, wherein:
in the first mode, the browser activates the editing tool, and renders the overlay of the editing tool in association with the rendered web page to cause the display of the overlay of the editing tool in association with the component without distorting a size and placement of components of the rendered web page and the browser is adapted to receive an edit using the rendered overlay of the editing tool and refresh an edited component of the web page without refreshing the entire web page by re-requesting the web page; and
in the second mode, the browser disables the editing tool, and renders the web page but hides or does not render the overlay of the editing tool.
2. The system of claim 1 , wherein the editing tool includes a Javascript, CSS or HTML element.
3. The system of claim 1 , wherein the editing tool is associated with a first namespace and the component of the web page is associated with a second namespace.
4. The system of claim 1 , wherein the specification of the action or editing tool is included in a template associated with the web page.
5. The system of claim 1 , wherein the overlay comprises an icon associated with the editing tool.
6. The system of claim 5 , wherein the overlay is adapted such that an interaction with the icon causes the browser to display a tool palette associated with the editing tool.
7. The system of claim 6 , wherein the interaction is a click with an input device.
8. A method, comprising:
determining an editing tool associated with a component of a web page based on a specification of an action or editing tool associated with the web page or the component;
generating page source associated with the web page, the page source including source associated with an overlay for the editing tool;
transmitting the page source to a client device, the page source including the overlay for the editing tool and adapted to allow the client browser to render the page source to render the web page in association with a first mode or a second mode and to switch between the first mode and the second mode, wherein:
in the first mode, the browser activates the editing tool, and renders the overlay of the editing tool in association with the rendered web page to cause the display of the overlay of the editing tool in association with the component without distorting a size and placement of components of the rendered web page and the browser is adapted to receive an edit using the rendered overlay of the editing tool and refresh an edited component of the web page without refreshing the entire web page by re-requesting the web page; and
in the second mode, the browser disables the editing tool, and renders the web page but hides or does not render the overlay of the editing tool.
9. The method of claim 8 , wherein the editing tool includes a Javascript, CSS or HTML element.
10. The method of claim 8 , wherein the editing tool is associated with a first namespace and the component of the web page is associated with a second namespace.
11. The method of claim 8 , wherein the specification of the action or editing tool is included in a template associated with the web page.
12. The method of claim 8 , wherein the overlay comprises an icon associated with the editing tool.
13. The method of claim 12 , wherein the overlay is adapted such that an interaction with the icon causes the browser to display a tool palette associated with the editing tool.
14. The method of claim 13 , wherein the interaction is a click with an input device.
15. A non-transitory computer readable medium, comprising instructions to:
determine an editing tool associated with a component of a web page based on a specification of an action or editing tool associated with the web page or the component;
generate page source associated with the web page, the page source including source associated with an overlay for the editing tool;
transmit the page source to a client device, the page source including the overlay for the editing tool and adapted to allow the client browser to render the page source to render the web page in association with a first mode or a second mode and to switch between the first mode and the second mode, wherein:
in the first mode, the browser activates the editing tool, and renders the overlay of the editing tool in association with the rendered web page to cause the display of the overlay of the editing tool in association with the component without distorting a size and placement of components of the rendered web page and the browser is adapted to receive an edit using the rendered overlay of the editing tool and refresh an edited component of the web page without refreshing the entire web page by re-requesting the web page; and
in the second mode, the browser disables the editing tool, and renders the web page but hides or does not render the overlay of the editing tool.
16. The non-transitory computer readable medium of claim 15 , wherein the editing tool includes a Javascript, CSS or HTML element.
17. The non-transitory computer readable medium of claim 15 , wherein the editing tool is associated with a first namespace and the component of the web page is associated with a second namespace.
18. The non-transitory computer readable medium of claim 15 , wherein the specification of the action or editing tool is included in a template associated with the web page.
19. The non-transitory computer readable medium of claim 13 , wherein the overlay comprises an icon associated with the editing tool.
20. The non-transitory computer readable medium of claim 19 , wherein the overlay is adapted such that an interaction with the icon causes the browser to display a tool palette associated with the editing tool.
21. The non-transitory computer readable medium of claim 20 , wherein the interaction is a click with an input device.