System, method and computer program product for editing web pages in-context of a production view

Abstract

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.

What is claimed is: 
     
       1. A server for facilitating in-context editing of web pages, the server comprising:
 a network interface to connect to a network coupled between the server and a client device; 
 a processor; 
 a non-transitory computer readable medium storing a set of computer instructions executable by the processor to perform a method comprising:
 receiving a request for a web page from a client browser; 
 determining a first set of in-context editing tools associated with a first component of the web page; 
 generating page source for the web page that allows the client browser to render the web page in a first mode of operation and a second mode of operation, wherein:
 in the first mode of operation the client browser renders a production view of the web page and an overlay of in-context editing tools, the overlay of in-context editing tools superimposed on the production view of the web page with the first set of in-context editing tools displayed with the first component without distorting a size and placement of components of the production view of the rendered web page; and 
 in the second mode of operation, the first set of in-context editing tools are disabled and the client browser renders the production view of the web page but hides the overlay of in-context editing tools; 
 
 transmitting the page source to the client browser; and 
 receiving an edit to the first component in the production view using a first in-context editing tool and refresh the first component without refreshing the entire web page. 
 
 
     
     
       2. The server of  claim 1 , wherein the method further comprises determining a second set of in-context editing tools associated with a second component of the web page and wherein:
 the second set of in-context editing tools comprise a different editing tool than the first set of in-context editing tools; and 
 in the first mode of operation, the client browser displays the overlay of in-context editing tools superimposed on the production view of the web page with the second set of in-context editing tools displayed with the second component. 
 
     
     
       3. The server of  claim 2 , wherein first component comprises a text component and the second component comprises a navigation component, a content list, an image or a smart list. 
     
     
       4. The server of  claim 2 , wherein the method further comprises determining the first set of in-context editing tools and the second set of in-context editing tools based on a template associated with the web page. 
     
     
       5. The server of  claim 1 , wherein the method further comprises processing a template associated with the web page, the template specifying portions of the web page that comprise components. 
     
     
       6. The server of  claim 5 , wherein the method further comprises determining the first set of in-context editing tools based on the template. 
     
     
       7. The server of  claim 6 , wherein the method further comprises generating the page source based on the template to cause the client browser to render a visual demarcation of the portion of the web page containing the first component. 
     
     
       8. The server of  claim 7 , wherein the page source is configured to cause the client browser to display icons for the first set of in-context editing tools in the visual demarcation of the first component. 
     
     
       9. The server of  claim 8 , wherein the template specifies actions associated with the first component. 
     
     
       10. The server of  claim 1 , wherein the first component is in a first namespace and the first set of in-context editing tools comprise elements in a second namespace such that the client browser switches between the first mode of operation and the second mode of operation by disabling the second namespace. 
     
     
       11. The server of  claim 1 , wherein the method comprises:
 maintaining an edited first component in a preview environment namespace until an occurrence of an event; and 
 at the occurrence of the event, transferring the edited first component to a production environment namespace. 
 
     
     
       12. A method comprising:
 receiving a request for a web page from a client browser; 
 determining a first set of in-context editing tools associated with a first component of the web page; 
 generating page source for the web page that allows the client browser to render the web page in a first mode of operation and a second mode of operation, wherein:
 in the first mode of operation the client browser renders a production view of the web page and an overlay of in-context editing tools the overlay of in-context editing tools superimposed on the production view of the web page with the first set of in-context editing tools displayed with the first component without distorting a size and placement of components of the production view of the rendered web page; and 
 in the second mode of operation, the first set of in-context editing tools are disabled and the client browser renders the production view of the web page but hides the overlay of in-context editing tools; 
 transmitting the page source to the client browser; and 
 receiving an edit to the first component in the production view using a first in-context editing tool and refresh the first component without refreshing the entire web page. 
 
 
     
     
       13. The method of  claim 12 , further comprising determining a second set of in-context editing tools associated with a second component of the web page, wherein:
 the second set of in-context editing tools comprise a different editing tool than the first set of in-context editing tools; and 
 in the first mode of operation, the client browser displays the overlay of in-context editing tools superimposed on the production view of the web page with the second set of in-context editing tools displayed with the second component. 
 
     
     
       14. The method of  claim 13 , wherein the first component comprises a text component and the second component comprises a navigation component, a content list, an image or a smart list. 
     
     
       15. The method of  claim 13 , further comprising determining the first set of in-context editing tools and the second set of in-context editing tools based on a template associated with the web page. 
     
     
       16. The method of  claim 12 , further comprising processing a template associated with the web page, the template specifying portions of the web page that comprise components. 
     
     
       17. The method of  claim 16 , further comprising determining the first set of in-context editing tools based on the template. 
     
     
       18. The method of  claim 17 , further comprising generating the page source based on the template to cause the client browser to render a visual demarcation of the portion of the web page containing the first component. 
     
     
       19. The method of  claim 18 , wherein the page source is configured to cause the client browser to display icons for the first set of in-context editing tools in the visual demarcation. 
     
     
       20. The method of  claim 17 , wherein the template specifies actions associated with the first component. 
     
     
       21. The method of  claim 12 , wherein the first component is in a first namespace and the first set of in-context editing tools comprise elements in a second namespace such that the client browser switches from the first mode of operation and the second mode of operation by disabling the second namespace. 
     
     
       22. The method of  claim 12 , further comprising:
 maintaining an edited first component in a preview environment namespace until an occurrence of an event; and 
 at the occurrence of the event, transferring the edited first component to a production environment namespace.