System and method for creation of templates

Embodiments described herein allow for the creation of templates from existing web pages, making it possible to create pages. Embodiments can provide visual tools so that a user can convert an existing web site or web page into a template. The template may be made available to a web content management application for the creation of web pages. According to one embodiment, a template developer can visually identify selectable portions of the web page in a rendering of the web page; receive a first component selection of a first selected portion of the web page; and store template data comprising the first component selection. A template builder can create a template and components based on the template data in a format consumable by a web content management system.

TECHNICAL FIELD

This disclosure relates generally to web content management. More particularly, this disclosure relates to a system, method, and computer program product for rapid creation of templates.

BACKGROUND OF RELATED ART

Building a web site manageable by a web content management (WCM) application generally requires a deep understanding of the WCM tool and programming interfaces. Hence the ability to build a Web site using a WCM application may be available only to people with technical skills and extended training and experience with the tool.

More specifically, constructing a Web site so that it can be managed via a WCM application requires some HTML mock-ups or HTML pages to be “decomposed” into building blocks as required by the WCM application. This process usually requires many manual assembling steps. For example, each of the decomposed elements may be registered manually in the WCM application so that they can be used to manually build templates. Such a web site construction method can be time consuming depending on the complexity of the web site. Furthermore, only people with a deep knowledge of the WCM application can create templates.

SUMMARY

Embodiments described herein provide systems and methods that allow for building of templates from existing web pages. One embodiment of a template building system can comprise a template developer. The template developer can be configured to visually identify selectable portions of a web page in a rendering of the web page, receive a first component selection of a first selected portion of the web page and store template data comprising the first component selection, attributes or other information.

According to one embodiment, the template developer can parse the web page source code to identify elements of the web page source code and visually identify portions of the web page corresponding to the identified elements as the selectable portions of the web page. Elements include, but are not limited to, <div> elements and <table> elements.

The system may also comprise a template builder that is configured to receive the template data and generate a template and components. According to one embodiment, the template builder can generate a first component for the first component selection, the first component comprising a first portion of the web page source code that corresponds to the first selected portion of the web page. The template builder can further generate a template comprising a second portion of the web page source code.

The template developer may also receive a first region selection of a second selected portion of the web page where the second selected portion of the web page contains the first selected portion of the web page. The template developer can store the first region selection as part of the template data. The template builder can generate a first region comprising a third portion of the web page source code, the third portion of the web page source code corresponding to the second selected portion of the web page.

In some embodiments, a client computer may comprise the template developer and a web browser and a server computer coupled to the client computer over a network may comprise in the template builder. In another embodiment, the same computer may comprise the template developer and the template builder.

One embodiment of a method for creating templates can include the steps of parsing web page source code of a web page to identify elements of the page source code; visually indicating selectable portions of the web page in a rendering of the web page; receiving a first component selection of a first selected portion of the web page; storing template data comprising the first component selection and component attributes associated with the first component selection; and providing template data comprising the first component selection and component attributes associated with the first component selection to a template builder. The method may further include processing the template data to generate a first component comprising a first portion of the web page source code, the first portion of the web page source code corresponding to the first selected portion of the web page, and generate a template comprising a second portion of the web page source code.

The method may further include the steps of receiving, a first region selection of a second selected portion of the web page, the second selected portion of the web page containing the first selected portion of the web page; storing the first region selection as part of the template data; and processing the template data to generate a first region comprising a third portion of the web page source code, the third portion of the web page source code corresponding to the second selected portion of the web page.

Another embodiment can include a computer program product comprising a non-transitory computer readable medium storing a set of computer instructions. The computer instructions can comprise instructions executable to: parse web page source code of a web page to identify elements of the page source code; visually indicate selectable portions of the web page in a rendering of the web page; receive a first component selection of a first selected portion of the web page; store template data comprising the first component selection and component attributes associated with the first component selection; and provide the template data comprising the first component selection and component attributes associated with the first component selection to a template builder.

The computer instructions may further include instructions executable to generate a first component comprising a first portion of the web page source code, the first portion of the web page source code corresponding to the first selected portion of the web page and generate a template comprising a second portion of the web page source code.

The computer instructions may further include instructions executable to receive, a first region selection of a second selected portion of the web page, the second selected portion of the web page containing the first selected portion of the web page; store the first region selection as part of the template data; and process the template data to generate a first region comprising a third portion of the web page source code, the third portion of the web page source code corresponding to the second selected portion of the web page.

Embodiments described herein allow for the creation of templates from existing web pages. Embodiments provide an advantage by making the template creation process relatively easy, in some cases making it possible to create a web site in a few seconds or minutes, what could otherwise take days or weeks.

Embodiments also enable template creation by users who may not otherwise have the requisite technical knowledge to create templates. Some embodiments can provide visual “point and click” tools so that any user to convert an existing web site or web page into a template.

Embodiments can also provide an advantage by automatically registering the template and components with a web content management application for the creation of web pages.

DETAILED DESCRIPTION

Some embodiments may be implemented in a computer communicatively coupled to a network (for example, the Internet, an intranet, an internet, a WAN, a LAN, a SAN, etc.), another computer, or in a standalone computer. As is known to those skilled in the art, the computer can include a central processing unit (“CPU”) or processor, at least one read-only memory (“ROM”), at least one random access memory (“RAM”), at a mass storage device (e.g., a hard drive (“HD”)), and one or more input/output (“I/O”) device(s). The I/O devices can include a keyboard, monitor, printer, electronic pointing device (for example, mouse, trackball, stylus, etc.), or the like. In certain embodiments, the computer has access to at least one database locally or over the network.

Within this disclosure, the term “computer readable medium” is not limited to ROM, RAM, and HD and can include any type of non-transitory data storage medium that can be read by a processor. For example, a computer-readable medium may refer to a data cartridge, a data backup magnetic tape, a floppy diskette, a flash memory drive, an optical data storage drive, a CD-ROM, ROM, RAM, HD, or the like. The processes described herein may be implemented by programmed logic executing suitable computer-executable instructions that may reside on a computer readable medium (for example, a disk, CD-ROM, a memory, etc.). Computer-executable instructions may be stored as software code components on a DASD array, magnetic tape, floppy diskette, optical storage device, or other appropriate computer-readable medium or storage device.

In one exemplary embodiment of the invention, the computer-executable instructions may be lines of C++, Java, JavaScript, HTML, or any other programming or scripting code. Other software/hardware/network architectures may be used. For example, the functions of embodiments may be implemented on one computer or shared or distributed among two or more computers across a network. In one embodiment, the functions of embodiments may be distributed in the network. Communications between computers implementing embodiments of the invention can be accomplished using any electronic, optical, radio frequency signals, or other suitable methods and tools of communication in compliance with network protocols.

It will be understood for purposes of this disclosure that a service or module is one or more computer devices, configured (e.g., by a computer process or hardware) to perform one or more functions. A service may present one or more interfaces which can be utilized to access these functions. Such interfaces include APIs, interfaces presented for a web services, web pages, remote procedure calls, remote method invocation, etc.

Web site systems sometimes rely on web page templates to generate web pages. In general, a web page template system can include a number of templates that specify common structure, layout, style and other aspects of web pages generated from the template. Templates can be stored in a variety of formats including as JSP files, static files, ASP files and others. In some cases, a template may include variables, functions, references to sub-templates, content, external files and other features. In order to create specific web pages from a template, a page generator can process the template files to generate page source code (e.g., HTML, other page source). Depending on the variables, scripts, functions and other aspects of the template and the sub-templates or changes to the content items referenced by the template and the sub-templates, the web page source code generated from the template in response to different requests may be different. Thus, the same template can be used to generate multiple web pages.

The use of templates can allow specific content to be separated from common presentation and logic. Furthermore, the template may separate styles from content by referencing external resources (e.g., CSS style sheets and the like) that define the style of a web page.

Embodiments described herein allow for the creation of templates from existing web pages, making it possible to create a web site in a few seconds or minutes what could otherwise take days or weeks. Embodiments can provide visual “point and click” tools so that any user to convert an existing web site or web page into a template. The template may be made available to a web content management application for the creation of web pages.

FIG. 1Ais a diagrammatic representation of one embodiment of a template building architecture that comprises a template building system100that builds templates from web pages provided by web site servers130.

Template building system100may be bi-directionally coupled to web site servers130via network105(one or more WANs, LANS, the Internet, Intranets or other networks). Template building system100includes client computer102(on or more client computing devices) connected by a network105to server110(one or more server machines). In some cases, client computer102is connected to server110and web servers130via the same network and in other embodiments by different networks. Client computer102comprises a web browser104and a template developer106. Server110can provide a web content management system112, template builder114and page generator116.

In operation, web browser104may request a web page from one or more web site servers130. In response, a web site server130can return web page source code150(e.g., HTML or other source code). Source code150may reference external elements including styles152(e.g., CSS style sheets), scripts154and other resources156(images, media, etc.) that browser104may also fetch. Browser104can process source code150and external resources to create a document object158having nodes according to a Document Object Model (DOM) and render web page160in a display. Web page160is rendered by browser104according to the styles, content, layout and structure as defined by elements in or referenced by source code150.

A user may find it desirable to use web page160as a model for generating new web pages having similar characteristics. Such new web pages may, in turn, be used to create web content based in part on the format, style, layout and/or content of web page160. Accordingly, a user can initiate a template building process to build a template from web page160. In one embodiment, browser104may send a request to template builder114and template builder114may retrieve source code150. Template builder114can send a copy of source code150to browser104such that template developer106is processing a copy of source code150from server110during the template creation process. In other embodiments, browser104may use a copy of source code150received from the host web server130.

Template developer106can allow the user to determine which aspects of web page160should be included as part of a template (or sub-template) and which portions should be managed as separate elements referenced by the template (or sub-template). To this end, template developer106can parse source code150for elements of source code150and visually identify portions of rendered page160that correspond to the elements as selectable portions of the web page. Parsing source code150may comprise analyzing source code150directly, parsing the document object158or otherwise analyzing information to identify elements, resources or other aspects of the source code.

The user may select which elements are part of the template or sub-template and which elements are separate components (elements that are managed separately from the template or sub-template). According to one embodiment, elements not selected as a separate page component (or sub-template) can be incorporated in a template. Templates, components and other items may be stored according to a format for storing templates and components used by the web content management system112.

According to one embodiment, template developer106may parse source code150for elements (<div>, <table>, <iframe>, <span> or other elements) that correspond to logical portions of the web page and visually identify the portions in the rendered web page160. For example, template developer106can parse source code150for <div> elements and visually indicate the portions of web page160that correspond to the <div> elements as selectable portions. As an example, if portion162(containing graphic163) corresponds to <div> element164, template developer106may visually identify portion162as a selectable portion.

The user may interact with browser104to select identified portions of web page160(e.g., to select portion162or other portion) as a component. Template developer106can receive the component selection that indicates the selected portion of web page160(e.g., a component selection selecting portion162containing image163). The template developer106can store the selections by tagging page source code150, tagging document object158or otherwise storing an indication of which portions of web page160were selected as components or other items.

Template developer106can also parse source code150to identify styles152, scripts154and other resources156referenced in source code150. The user may be presented with options to import these resources for management by web content management system112. In some embodiments, template developer106may also identify internal script, style and other elements that can be separated from the template or components built from page160.

Based on user selections, template developer106can provide a set of data (referred to as template data161) to template builder114. A copy of source code150may also be sent to template builder114. Template builder114can retrieve the resources from their sources and store these items as managed items in data store120(e.g., as styles170, scripts172and resources174). In some cases, multiple styles may be grouped together as a “theme” so that the styles may be managed as a single object that can be applied to multiple templates.

Template builder114can process template data161to generate templates182and associated items in a form that is manageable by web content management system112and stored in memory accessible by server110(e.g., in data store120). Template builder114may also register the template182and related items with web content management system112.

Source code for different portions of the web page selected by the user may be incorporated into independently managed objects of content management system112with appropriate references inserted in the source code. Template builder114can create a template182that incorporates source code150of page160. For an element that was selected as a component, template builder114can create a component186that incorporates the source code150for that element. The source code incorporated in the template may be modified to reference the component rather than including the source code for the component. For nested elements selected by the user as separate objects, the source code for and outer component can include a reference to the inner component and so on (e.g., a component corresponding to an outer <div> element may include a reference to an object containing the inner HTML of the <div> element).

In some embodiments, source code may be changed by adding instructions, descriptors or other code inside the source code. If styles, scripts or other resources have been imported, links to the resources can be changed to ensure source code correctly points to resources in data store120and not to the original hosted site. For example, source code may be changed to reference styles170, scripts172and resources174rather than the source styles152, scripts154and resources156. Thus, if the file for image163is imported into data store120, links referencing the source of image163may be changed to reference the image file in data store120. In some cases, the reference may be to another object that further references the resources (e.g., a link to styles152may be changed to reference a theme object that further references styles170).

As discussed above, templates, components and other items may be stored according to a format utilized by web content management system112. In one embodiment, web content management system112may utilize a format in which a page is decomposed into a template182, components186and regions188. The template182can provide the overall structure for a web page, a region188can specify an area of the template that is suitable to receive content components and a component186defines which content to display.

Template182, regions188and components186can be managed as content objects. Each content object can have an arbitrary amount of metadata associated with it such as a name, unique id or other metadata. For purposes of website management, such metadata may also include whether the content object has been approved for publication, whether it was published, or any other information that is useful in classifying the content object for website management.

To identify a portion of web page160that may be selected as a region or component, template developer106can parse page source code150for structural elements. According to one embodiment, template developer106can parse source code150for <div> elements (or other elements such as <table>, <iFrame>, <span>, etc.) and highlight the corresponding portions in rendered web page160. In one embodiment, the nearest <div> element can be identified (it could be a nested <div> with more than one <div> or a single <div>) based on positioning of a cursor or pointer on page160and the portion of rendered web page160corresponding to that <div> element highlighted. The user can select the identified portion of the web page and specify whether the element should be classified as a region or component. This process may be repeated for any number of elements. In this manner, the user can select the <div> elements (or other elements) that are to be managed as components186or regions188.

In some cases, identifying and classifying elements may take into account rules applied by server computer110. For example, if a region can contain components but not regions, then a selected nested element may be automatically classified as a component. Similarly, if an element within a component is selected, that nested element can be automatically classified as a component and the outer element reclassified as a region. If the selections and classifications made by the user violate rules, template developer106may present a warning to the user or prevent the user from making specific selections/classifications.

When a portion of web page160is classified as a component or region, template developer106can associate the corresponding portion of source code150with the component or region. One or more attributes may be associated with the portion of source code150to describe the portion as a component or region. The attributes can define a name (e.g., “Component1”), a type of component (e.g., “text”, “image”), a unique ID, or other information. Thus, for example, if the user selects portion162as a component, template developer106may associate element164with a component name, component type and other attributes.

To associate portions of source code150with a template, component or regions, template developer106can tag source code150so that portions of source code150can be identified as a template, region or component. According to one embodiment, template developer106can tag nodes in document object158to track user selections, classifications of elements and attributes. For example, a node for element164in document object158may be tagged as a component and a component name and other attributes inserted. In another embodiment, template developer106can maintain a copy of source code150and modify the copy of source code150. Modification may include changing the source code, or may include adding or attaching language to the source code to tag portions of the source code.

Once the user has selected all the components and regions to be used in the template, the user can request creation of a template based on the selected component(s) or region(s). The modified source code for the page, the tagged document object or other information can be sent to server110as part of template data161. Additionally, the unmodified source code150may be sent in some embodiments. Data sent to server110may include the attributes or other information that enable server computer110to transform the HTML or other source code into a template with manageable components and regions. The data may identify areas as regions or components, or define portions or areas that are to be used for text, navigation, etc.

According to one embodiment, template builder114decomposes the source for each component, region, and template and creates a .jsp (executable JSP template file(s)) other file(s) or data structure(s) for each in data store120. The HTML (or other source code) of template182can be modified so that the <div> tags (or other tags) corresponding to regions and components are updated with metadata that references the region188or component186to insert. Similarly, the HTML (or other source code) of a region188is modified with metadata that references any components186to insert. The HTML (or other source code) of template182, regions188and components186can also be modified to change references to reference styles170, scripts172and resources174.

For example, if a <div> element is identified as “Region1”, the HTML between the <div> and </div> tag for the element can be replaced with a tag from a tag library, such as page:region name=“Region1”) to indicate that the area is a managed region. A JSP file associated with a Region1object can be created to contain the HTML from the element. Similarly, if a <div> element identified as a “Component1” (in a region or template), the HTML between the <div> and </div> tag can be replaced with a tag page:component name=“Component1” to indicate that the area is a managed component. A JSP file associated with the name “Component1” can be created to contain the HTML of the element. A similar process can be used if other elements are used to define regions and components.

In some cases, the format used by the web content management system112may require the creation of additional components or other items not specified by the user. For example, in one embodiment, the format may require that a component be part of a region. If the user does select any portion of web page160to be a region, template builder114can automatically create a region object and source code for a region to contain the component. The template source can be modified to refer to the region. For example, if the user identifies element164as Component1(e.g., with a page:region name=“Region1” tag), but does not define a region containing Component1, template builder114may create a Region1object with the source code tagged with page:component name=“Component1”. The template source code between the <div> tags corresponding to element164can be tagged with page:region name=“Region1” to indicate that the area is a managed region.

The .jsp files (or other data structures) may be saved in a folder for storing the template object and content objects. According to one embodiment, the folder may include objects for template182, regions188, components186and other content objects. The folder may further store a theme object including imported styles170or information about the theme of the web page, such that the look and feel of the web pages generated from the template can be modified as needed. The folder may further include scripts172or other resources. In other embodiments, the template and resource may be otherwise stored.

Template builder114can send a notification to the user when the template building process is complete. In one embodiment, the user can push a “view template” button and then be transferred to a content management environment provided by web content management system112in which the user can view the web page recreated from the templates. To create page source code from a template, page generator116can execute files of template182, regions188and components186to generate and assemble the page source code.

In some embodiments, the template may be used to quickly create web pages. As discussed above, the user may cause a web page to be generated from template182. The user may “save” the web page as a new web page. In this case, the appropriate .jsp files and other content objects can be stored in a location for the page in data store120. For example, a user may cause a page to be generated from template182and then store the page as “page1”. Web content management system112can store content objects in a location for “page1” (e.g., in a “page1” directory location or elsewhere) with relative references changed. According to one embodiment, a page object190can be stored referencing template182. Regions192and components194can also be stored for “page1”.

In some cases, the user can edit a region or component and store the edited version of the web page as a new web page. For example, a user can modify “Component1” of components186and store the page as “page2”. A page object196can be stored referencing template182. Regions197and modified components198can also be stored for “page2.” In this example, the Component1object in components194may be different than the Component1object in modified components198(e.g., the .jsp files or other data structures can be different).

For requests for page “page1”, page generator116can resolve the request to the content objects associated with “page1” whereas, for requests for page “page2”, page generator116can resolve the requests to the content objects associated with “page2”. The “page1” and “page2” pages rendered to the user would include different content (corresponding to the changes to Component1) without requiring modification of the template. However, because “page1” and “page2” are associated with template182, changes to template182can be automatically propagated to “page1” and “page2”.

According to one embodiment, page generator116can generate page source to include in-context editing tools to allow for editing of templates and the creation of new web pages. One embodiment of systems and methods for providing in-context editing is described in U.S. patent application Ser. No. 11/257,588, entitled “System, Method and Computer Program Product for Editing Web Pages In-Context of a Production View,” which is hereby fully incorporated by reference herein for all purposes.

A JavaScript library can be provided to parse the template and attach the corresponding editing tools to each component or region. The tools themselves can be rendered and positioned using World Wide Web Consortium (W3C) standards such as CSS and JavaScript. Because the tools are rendered in the browser environment, they can be easily enabled or disabled without needing a full page refresh.

According to one embodiment, editing tools can include a set of editing tools to allow editing of the overall page or template. Additionally, editing tools applicable to individual components can be displayed near the associated region or component. Editable components or regions can be demarcated. For example, editable regions can be outlined with a dashed line or other indicator. According to one embodiment, various editing tools are overlaid on the web page so that they do not distort a production view of the web page.

The architecture ofFIG. 1Ais provided by way of example and a template building system100can be implemented using a variety of architectures. Browser104may be implemented through execution of a web browser application and template developer through execution of a browser plug in, web extension, standalone application or execution of other instructions. Template builder114, web content management system112and page generator116are shown as separate modules, they may be implemented through execution of the same program, execution of separate programs or according to any suitable programming architecture. Template builder114, web content management system112and page generator116may be distributed.

As discussed above, in one embodiment, web content management system112may utilize a format in which a page is decomposed into a template182, components186and regions188. Template182, regions188and components186may be managed as a set of objects comprising files (or other data structure) and associated metadata used by the web content management system.FIG. 1Bis a diagrammatic representation of one embodiment of a set of objects for storing and managing templates, components and regions. Template182, according to one embodiment, may be managed as a template object183comprising a template file200and associated metadata201, a region188may be managed as a region object189having a region file202and associated metadata203and a component186may be managed as a component object187comprising a component file204and associated metadata205.

A template object183can reference region objects189or component objects187. According to one embodiment, for example, template file200may include a portion of the page source from a web page of interest (e.g., a portion of page source150ofFIG. 1A) modified to reference the region objects189for “Region1” and “Region2”. A region object189may reference component objects. For example, region file202for “Region1” may include a include a portion the page source from a web page of interest (e.g., a portion of page source150ofFIG. 1A) modified to reference the component objects187for “Component1” and “Component2” and region file202for “Region2” may include page source modified to reference component object187for “Component3”. A component file204may include the content that will be displayed in the portion of a web page corresponding to the component or may reference other objects. For example, the component file204for “Component1” may reference a content item object206containing the content item207(in this example, a chart) that is displayed in the portion of a page corresponding to “Component1”.

FIG. 2depicts a flow diagram of functionality associated with generating a template based on a web page. According to one embodiment, various steps may be carried out by the user, a client and a server.

Navigating the web (step212), initiating a plug-in (step213), selecting components/regions for a template (step214), requesting a template (step215), customizing a template (step216), and requesting to publish the web page (step217) illustrate steps that are performed by a user in one embodiment.

Receiving instructions to navigate the web and displaying web pages in a web browser (step221), receiving a request to initiate a plug-in and sending the request to a server (step222), receiving a copy of a web page from a server and displaying the web page copy (step223), saving components/regions selections by a user (step224), receiving a request to create a template and sending the request to a server along with components/regions selections (step225), receiving a template page from a server and displaying the template page for a user (step226), and sending a customized page to the server (step227) illustrate steps that may be performed by a client computer (e.g., executing a browser application) in one embodiment.

Receiving a request for a plug-in (step231), sending a copy of web page source and the plug-in to the user and creating a folder (step232), receiving a request to create a template along with components/regions selections by the user (step233), sending a template page to a client computer (step234) along with hosting the template, and receiving and saving a customized template page (step235) illustrate a set of steps that may be performed by a server computer in one embodiment.

A user can navigate a web site using a web browser (step212). The web browser can display requested web pages to the user (step221). When the user finds a page to use as a template, the user may initiate a plug-in (or other template developer instructions) (step213) in a web browser and the web browser may send a request a server (step222). The server may receive the request (step231) and send a copy of the web page source and the plug-in to the browser (step232) for display to and use by the user (step223). In other embodiments, the client computer may use web page source received from the web site source server and may already include the plug-in or other template developer.

The user can interact with a web browser to select portions of the web page as components or regions (step214). The web browser may receive the component and region selections and save the selections locally or otherwise (step224). According to one embodiment, the selections and related attributes identifying portions of the source code as components or regions are sent to the server (step225) when the user requests creation of a template (step215). The server can build the template (step233) using page source and the selections of the user. This can include creating templates, components and regions as discussed above.

The server can send page source generated from the template to the user (step234) and the web browser can display the template page (step226). Through interaction with the template page, the user can customize the template page and create new web pages from the template page or new templates (step216). The user may also request to save the updated template or web pages associated with the template (step217). The web browser can send the request to the server along with updates to the template or web page associated with the template (step227), which can be stored by the server (step235).

The steps ofFIG. 2may be repeated as needed or desired, additional steps added, steps omitted and steps performed in different orders. Furthermore, the steps may be otherwise distributed.

According to one embodiment, an end user can start the process of defining a template by navigating a browser to a web page of interest.FIG. 3Adepicts a web page of interest (web page300) displayed in a user interface provided by a user computer (e.g., client computing device102ofFIG. 1A). Web page300may include a header, footer, body, etc. Various portions of the web page such as navigation bar307, menus308or314c, text312a-312cor314b, images, videos, media314a, dynamic content items (e.g., third party ads that scroll or are otherwise dynamic or other dynamic content), links, jpegs, and the like may be contained in structural elements of the web page as defined by the web page source code (e.g., <div>, <table>, <iframe> and other elements).

The user may install or activate a plugin or browser extension which allows the user to identify and select elements of the web page for management by a web content management system. The plugin or browser extension may be executable to provide a template developer which in some embodiments may be the same or similar to template developer106as described inFIG. 1A, above.FIG. 3Bdepicts an embodiment of the user interface providing a drop down menu349in which the user can select a template developer plug-in as indicated by selection350(referred to as “OTWEM Developer”). When the plugin opens, a local copy of the HTML or other source code for the web page displayed may be stored locally. Also when the plugin starts, a temporary file may be created on the server (e.g., server110) to contain information used to build templates.

FIG. 4Adepicts a screen shot of a user interface displaying the web page400rendered from the copy of the source code. Thus, web page400can be essentially identical to web page300and may include a header, footer, body, etc., navigation bar407, menus408, text412a-412c, images, videos, media, dynamic content items (e.g., third party ads that scroll or are otherwise dynamic or other dynamic content), links, jpegs, and the like. The various portions of web page400may be contained in structural elements of the web page as defined by the web page source code (e.g., <div>, <table>, <iframe> and other elements).

InFIG. 4A, the user has selected the template editor tab422which enables selected functionality of the plugin. Under the template editor tab422, the user is able to enter a template name424and a project name426. In some embodiments, a default template name424or project name426may be provided by the plugin. The user is able to select options for creating the template. For example, the user may opt to import various external resources that will be referenced by the template including Cascading Style Sheets (“CSS”) by selecting option428, images by selecting option430, or scripts by selecting option432. The user may also be given the option of creating a theme by selecting option434to cause the server to create a theme object referencing the imported style sheets. Other options may be possible for importing CSS, images, scripts, or other elements associated with a web page.

To assist in developing a template, embodiments may provide features for organizing and displaying regions and components. The plugin may provide buttons440,442,446for allowing a user to select and control elements selected as regions and pane448to display a list of selected regions. The plugin may also provide buttons452,454and456for allowing a user to select and control elements selected as components and pane458to display a list of components. Selection and control of regions or components may be accomplished either individually or collectively.

When the plugin is installed and the user is working under template editor tab422, the user is able to choose “Select Components” button452. Select Components button452corresponds to instructions that allow the user to visually identify areas of the page that the user would like to include as a component and Select Regions button440can allow the user to visually identify areas of the page that the user would like to select as a region.

Determining which part of the source code corresponds to a component candidate or region candidate may be accomplished by finding one or more <div> tags that define a division or section in the source code. Embodiments may identify component or region candidates to a user based on the pointer position. The plugin may monitor the position of the cursor or other pointer in the web page and identify the portions of the web page corresponding to the nearest <div> tags as possible component or region candidates. There may be more than one <div> tag that can correspond to a pointer position. The user may move the pointer to indicate a component or region, and may move the cursor around to switch between <div> tags to allow a user to accurately select a portion of the page as a component or region. In other embodiments, <table> or other tags may be used for finding a division or section of the source code that corresponds to the pointer location.

Indicating a portion of the web page as component candidate or region candidate may involve highlighting the corresponding area in web page400, or may involve displaying half tones, shading, color changes, or any other visual that allows the user to visually confirm the portion of the web page is the desired region or component. The user may select a highlighted or otherwise indicated area by clicking on the area. The user may be given the option to specify attributes of the component or region. Once the user selects a portion of the web page to be a component or region, the component list in pane448or region pane458may be populated.

Clicking on Reload button442can cause the plug-in to refresh the portions of the web page corresponding to regions selected in pane448and clicking on Reload button454can cause the plug-in to reload the portions of the web page corresponding to components selected in pane458. Clicking reset button446can remove region definitions and clicking reset button456can remove component definitions.

FIG. 4Bdepicts a screen shot in which a cursor470is positioned over text412aof web page400. Portion412amay be contained in a <div> element. Consequently, if the user selects Select Component Button452and mouses over text470, the plug-in can highlight the portion of web page400corresponding to the <div> element containing text412aas a component candidate (or region candidate if Select Region Button440was selected). The user can select portion412aas a component causing the portion of the HTML corresponding to the <div> element to be tagged as Component1and Component1entry472to appear in pane458.

Once a component has been populated inside pane458, the user can rename the component (e.g., Internal Navigation Bar, External Links, etc.), or the plugin may assign a default name to the component (e.g., Component1, Component2, etc.). The user may select a component and edit properties to identify the type of component, the name, etc.FIG. 4Cdepicts a screen shot illustrating one embodiment of modifying a component. In this example, the user has selected Component1entry472causing an Edit Component interface485to be presented. The Edit Component interface485can allow a user to select attributes of the component including, for example, the component name and component type (e.g., in component type menu490). The component types may be component types supported by a content management system (e.g., component types supported by a web content management system112ofFIG. 1A). “Component1” can be renamed and assigned a new component type or other attributes. A user can also select and edit various regions using a similar approach. The user can be presented a Region Edit interface that allows the user to specify attributes for regions.

When the user selects a component or region, the plugin associates the corresponding source code with the component or region, including modifying the copy of the source code or a page document object. One or more attributes may be added to the source code or document object to describe the area as a component or region that can be managed. The attributes may correspond to attributes used in managing templates, region or components by the web content management system. The attributes, for example, can define a name (e.g., Component1), a type (e.g., “text”), a unique ID, or other information.

The user may select a “Build It” button492to instruct a server to build the appropriate template(s). When the user requests that the template be built, the user's computing device communicates with the server to send data to the server (which in some embodiments includes template builder114described inFIG. 1A). Data sent to the server computer may include the attributes or other code that enables the server to transform the HTML into a template and manageable components and regions. The data may identify areas as regions or components, and define portions or areas that are to be used for text, navigation, etc. In some cases, the data may include the source code stored in the local cache.

Generating a template may include converting the data into a form that allows management of both the content and structure. This can include creating template, component, region and other content objects and the appropriate files or other data structures (e.g., JSP files) for the template, components and regions based on the data provided by the client computing device.

When the user selects “View It” button494, the plugin requests a page corresponding to the template from the server.FIG. 5Adepicts an interface displaying web page500returned by a server computer based on a template. At first glance, rendered web page500resembles the web page300rendered inFIG. 3Aand web page400rendered inFIG. 4Aand includes a header, footer, body, etc., having features such as navigation bar507, menus508or514c, text512a-512cor514b, images, videos, media514a, dynamic content items, links, jpegs, and the like. However, the web page500can be hosted by a content management system (e.g., server110ofFIG. 1A) instead of the original web site server computer and the page source for web page500may rendered by processing the templates, regions and components managed by the web content management system.

If web page500is accessed in a content management environment (e.g., by a web site developer or other user), the user may be given the option to edit the template, component or regions. A window, menu, box, tool box and the like may be presented in conjunction with the page. For example, window510provides information regarding the underlying template, such as the template name and unique ID, status in the content management system and other information. Window510also allows the user to initiate actions on the template object in the content management system, such as initiating workflow actions. Furthermore, tools may be accessed to edit components or regions. For example, tools icon515may provide access to tools for editing text514b.

FIG. 5Bdepicts the interface displaying web page500with a “template tree” tab selected in window510. The template tree tab displays a hierarchal list of regions and components associated with web page500. The portions of web page500corresponding to the regions and components may be visually indicated (e.g., by highlighting, dashed lines or otherwise). The user may select a component in the template tree tab and move the component in the hierarchy and move the component to a new region.

InFIG. 5B, for example, the user can select “Component3”, corresponding to text512c, in window510and move Component3from “Region-Component3to “Region-Component2” as indicated at selection516.FIG. 5Cillustrates web page500after the move is complete, showing that text512chas moved, leaving portion517of web page500corresponding to “Region-Component3” empty.

As discussed above, a web page may include editing tools to allow a user to edit the components or regions to create a new template or web page based on the template.FIG. 5D, for example, illustrates on embodiment of editing tools provided in response to the user selecting tools icon515ofFIG. 5Ato edit text component514b. As depicted inFIG. 5D, component514bcontains text which may be edited simply by positioning a cursor520in the text area such that the user can start making some content changes to the page. Instructions associated with window523allow a user to clear formatting within page component, edit/insert or remove hyperlinks, link to pages, link to content, link to a channel, link to a file, insert or edit images/media, etc.

The user may also inspect a template to see all the technical objects associated with the template. For example, .jsp or css objects that are used for generating page500may be viewed.FIG. 5Edepicts a screen shot of page500with window560displaying six different objects562a-fthat a user has selected. InFIG. 5E, these six objects562a-562frefer to the page template, components such as512aand512b, as well as512cand514b(seeFIG. 5A), and theme562f. More objects are possible.

Each object562a-fcan be accessed to edit the source code, view the source code, edit the object, copy the ID, path or name or take other action. For example, a user may double-click to select one of objects562a-f. Based on the selection of a given object, the user may be provided a menu of options for accessing the object. For example, the user may be provided an option that allows a user to edit source, the object or other information.

Appropriate windows and interfaces can be displayed to allow editing. For example, if the user selects to edit the source for an object, a window can be displayed including source code contained in the source code file for the object. Thus, if the user selects to edit the source of the “Template1” object, a window is displayed through which the user may access the source code in the Template1file and add, delete or otherwise modify the source code as a way of customizing the template. Modifications to the template, regions or components may be saved as a new template or page to the web content management system.

FIG. 6illustrates an exemplary architecture for a template building system. The architecture includes external network611that can be bi-directionally coupled to client computer620and web content management server640. Server640can be bi-directionally coupled to storage654. Server640and storage654may be part of a network site.

Client computer620may provide a browser and template developer and server640may provide a template builder. Within server640, a plurality of computers (not shown) may be interconnected to each other over an internal network or a combination of internal and external networks. For simplification, a single system is shown for server640. Other systems (e.g., page generator, application server, etc.) may be part of server640or additional systems that are bi-directionally coupled to an internal network.

A plurality of other client computers620may be bi-directionally coupled to network611. Client computer620can include central processing unit (“CPU”)622, read-only memory (“ROM”)624, random access memory (“RAM”)626, hard drive (“HD”) or storage memory628, and input/output device(s) (“I/O”)629. I/O629can include a keyboard, monitor, printer, electronic pointing device (e.g., mouse, trackball, etc.), or the like. Client computer620can include a desktop computer, a laptop computer, or some other computing device capable of communicating over a network. Server640can include a server computer comprising CPU642, ROM644, RAM646, HD648, and I/O649. Server640can be configured to communicate with client computer620over network611. Each of the computers620and640inFIG. 6may have more than one CPU, ROM, RAM, HD, I/O, or other hardware components. For simplicity, each computer is illustrated as having one of each of the hardware components, even if more than one is used.

Each of computers620and640is an example of a data processing system. ROM624and644; RAM626and646; HD628and648; and memory654can include media that can be read by CPU622or642. Therefore, each of these types of memories includes a data processing system readable medium. These memories may be internal or external to client computers620or server640.

Portions of the methods described herein may be implemented in suitable software code that may reside within ROM624or644, RAM626or646, or HD628or648. In addition to those types of memories, the instructions in an embodiment may be contained on a data storage device with a different data processing system readable storage medium, such as a hard disk. A combination of software code elements may be embodied within a data processing system readable medium on client computer620or server computer640. Alternatively, the instructions may be stored as software code elements on a DASD array, magnetic tape, floppy diskette, optical storage device, or other appropriate data processing system readable medium or storage device.

In an illustrative embodiment, the computer-executable instructions may be lines of compiled C++, Java, or other language code. Other architectures may be used. For example, the functions of any one of the computers may be performed by a different computer shown inFIG. 6. Additionally, a computer program or its software components with such code may be embodied in more than one data processing system readable medium in more than one computer.

In the hardware configuration above, the various software components may reside on a single server computer or on any combination of separate server computers. In alternative embodiments, some or all of the software components may reside on the same server computer.

Communications between any of the computers inFIG. 6can be accomplished using electronic, optical, radio-frequency, or other signals. When a user is at client computer620, client computer620may convert the signals to a human understandable form when sending a communication to the user and may convert input from a human to appropriate electronic, optical, radio-frequency, or other signals to be used by client computer620or server computer640. Similarly, when an operator is at server computer640, server computer640may convert the signals to a human understandable form when sending a communication to the operator and may convert input from a human to appropriate electronic, optical, radio-frequency, or other signals to be used by client computers620or server computer640.

Embodiments described herein make it possible to create in a few seconds a result that would otherwise take days if not weeks, by making it possible to build templates from any existing web page, and by relying on a visual identification process. Advantageously, manageable web content can be rapidly and automatically created without having to manually breakdown or decompose HTML mock-ups or pages into discrete elements. The invention therefore also makes it possible for people with little or no programming skills to create manageable web content and manage a template independently.

The detailed description and the specific examples described above, while indicating the preferred embodiments, are given by way of illustration only and not by way of limitation. Descriptions of known materials and manufacturing techniques may be omitted so as not to unnecessarily obscure the disclosure in detail. Various substitutions, modifications, additions and/or rearrangements within the spirit and/or scope of the underlying inventive concept will become apparent to those skilled in the art from this disclosure.

As used herein, including the claims that follow, a term preceded by “a” or “an” (and “the” when antecedent basis is “a” or “an”) includes both singular and plural of such term, unless clearly indicated within the claim otherwise (i.e., that the reference “a” or “an” clearly indicates only the singular or only the plural). Also, as used in the description herein and throughout the claims that follow, the meaning of “in” includes “in” and “on” unless the context clearly dictates otherwise.

It is also within the spirit and scope of the invention to implement through software programming, operations, methods, routines or portions thereof described herein, where such software programming or code is stored in a computer-readable medium and can be operated on by a processor to permit a computer to perform any of the steps, operations, methods, routines or portions thereof described herein. Embodiments may be implemented in one or more digital computers executing programming instructions, by using application specific integrated circuits, programmable logic devices, field programmable gate arrays, optical, chemical, biological, quantum or nanoengineered systems, components and mechanisms may be used. In general, the functions of the invention can be achieved by any means as is known in the art. For example, distributed, or networked systems, components and circuits can be used. In another example, communication or transfer (or otherwise moving from one place to another) of data may be wired, wireless, or by any other means. Based on the disclosure and teachings provided herein, a person of ordinary skill in the art will appreciate other ways and/or methods to implement the invention.

Although systems and methods have been described with respect to specific embodiments thereof, these embodiments are merely illustrative, and not restrictive. The description herein of illustrated embodiments of the invention, including the description in the Abstract and Summary, is not intended to be exhaustive or to limit the systems and methods to the precise forms disclosed herein and the inclusion of any particular embodiment, feature or function within the description, including the Abstract or Summary, is not intended to limit the scope of the systems and methods to such embodiment, feature or function). Rather, the description is intended to describe illustrative embodiments, features and functions in order to provide a person of ordinary skill in the art context to understand the disclosure without limiting the systems and methods to any particularly described embodiment, feature or function, including any such embodiment feature or function described in the Abstract or Summary. While specific embodiments of, and examples for, are described herein for illustrative purposes only, various equivalent modifications are possible within the spirit and scope of the invention, as those skilled in the relevant art will recognize and appreciate. As indicated, these modifications may be made in light of the foregoing description of illustrated embodiments and are to be included within the spirit and scope of the invention. Thus, while the systems and methods have been described herein with reference to particular embodiments thereof, a latitude of modification, various changes and substitutions are intended in the foregoing disclosures, and it will be appreciated that in some instances some features of embodiments will be employed without a corresponding use of other features without departing from the scope and spirit of the invention as set forth. Therefore, many modifications may be made.