Web page generation system

A method, apparatus and computer program product for displaying a web page. Metadata describing a web page is received by a client data processing system. The metadata defines what the web page looks like without content for the web page. The content needed for the web page based on the metadata is identified by the client data processing system. The content for the web page is obtained by the client data processing system. The web page using the metadata and the content is created by the client data processing system without using a markup language. The web page on a graphical user interface on the client data processing system is displayed by the client data processing system.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application is related to the following U.S. patent applications: U.S. Ser. No. 14/809,717, entitled “Web Page Design System”, and U.S. Ser. No. 14/809,780, entitled “Web Page Generation System”, each of which is filed even date hereof, assigned to the same assignee, and incorporated herein by reference.

BACKGROUND INFORMATION

The present disclosure relates generally to an improved computer system and, in particular, to a method and apparatus for generating pages. Still more particularly, the present disclosure relates to a method and apparatus for generating web pages for display on a browser.

The Internet is a global system of interconnected computer networks. The Internet is commonly used to access information resources and services. These information resources and services include documents and applications. In particular, the World Wide Web is an information system accessed via the Internet. This information system is a collection of documents that are linked to each other. These documents are called web pages.

The web pages may be accessed through an application called a web browser on a computer. This application facilitates retrieving, presenting, and traversing information using web pages. A web page may include text, images, video, multimedia components, or other information. In addition, the web page navigation components are in the form of hyperlinks which are often referred to as just links.

A web page may have fixed content and dynamic content. The fixed content may be particular areas in the web page. The dynamic content may be advertisements. In another example, the dynamic content may be information requested by the user. For example, a user may send a request to view banking transactions, current balances, order histories, and other information that may be specific to the user.

Currently, a user requests a web page by selecting a link on a current web page, entering a universal resource locator, or through some other action using a browser. The requested web page is typically generated by a Web page server in a remote location and sent to the browser.

For example, the requested web page may be generated using hypertext markup language (HTML), cascading style sheets (CSS), and Java code for the web page. The hypertext markup language may define static content for the web page. The cascading style sheets describe the look and formatting for the web page. The Java code may be used to generate dynamic content for the web page. The generation of the dynamic content may be performed using a Java service page (JSP) servlet located on the web page server. This dynamically generated web page is then returned to the browser.

The generation of the web pages uses resources on the web page server. For example, the web page server interprets the markup language, scripts, and other code for the web page to generate the web page that is sent to the browser for display. If the amount of traffic on a web page server is high enough, the generation of the web page and sending the web page to the browser may take more time than desired.

For example, a web page server for a popular website may have requests in the thousands per second or tens of thousands per second during high levels of traffic at the website. With this level of traffic, requests may be handled by multiple web page servers to avoid undesired levels of response times for web pages.

As a result, hosting a website may require many web page servers on many different computers to handle times of high traffic. Estimates of traffic or a history of traffic may be used identify the amount of resources needed for a website to handle high levels of traffic and avoid undesired delays in sending web pages in response to requests for the web pages.

The resources are unused or underutilized at times when traffic is lower. As a result, these resources may be wasted at these times.

Therefore, it would be desirable to have a method and apparatus that take into account at least some of the issues discussed above, as well as other possible issues. For example, it would be desirable to have a method and apparatus that overcome the technical problem of having sufficient resources for web page servers to generate web pages.

SUMMARY

An embodiment of the present disclosure provides a method for displaying a web page. Metadata describing a web page is received by a client data processing system. The metadata defines what the web page looks like without content for the web page. The content needed for the web page based on the metadata is identified by the client data processing system. The content for the web page is obtained by the client data processing system. The web page using the metadata and the content is created by the client data processing system without using a markup language. The web page on a graphical user interface on the client data processing system is displayed by the client data processing system.

Another embodiment of the present disclosure provides an apparatus comprising a display system and a web page generator in a client data processing system in communication with the display system. The web page generator receives metadata describing a web page. The metadata defines what the web page looks like without content for the web page; identifies the content needed for the web page based on the metadata; obtains the content for the web page; creates the web page using the metadata and the content without using a markup language; and displays the web page on a graphical user interface on the client data processing system.

Yet another embodiment of the present disclosure provides a computer program product for displaying a web page. The computer program product comprises a computer readable storage media, and first program code, second program code, third program code, fourth program code, and fifth program code stored on the computer readable storage media. The first program code receives metadata describing the web page by a client data processing system. The metadata defines what the web page looks like without content for the web page. The second program code identifies the content needed for the web page based on the metadata by the client data processing system. The third program code obtains the content for the web page by the client data processing system. The fourth program code creates the web page using the metadata and the content by the client data processing system without a using markup language. The fifth program code displays the web page on a graphical user interface on the client data processing system by the client data processing system.

DETAILED DESCRIPTION

The illustrative embodiments recognize and take into account one or more different considerations. For example, the illustrative embodiments recognize and take into account that currently used systems for designing web pages often do not allow a designer to focus on designing a web page as much as desired. The illustrative embodiments recognize and take into account that with currently used web page design systems, a designer often needs to have knowledge about markup languages, web servers, or other technical areas.

Thus, the illustrative embodiments provide a method and apparatus for designing a web page. In one illustrative example, a method is presented for designing a web page. A computer system displays objects in a graphical user interface in a display system. The objects are selectable for use in designing the web page. The computer system generates metadata for the web page based on a user input selecting a group of the objects for the web page, wherein the metadata describes the web page. The computer system creates a preview of the web page from the metadata and displays the preview of the web page in the graphical user interface in the display system.

With reference now to the figures and, in particular, with reference toFIG. 1, an illustration of a block diagram of an information environment is depicted in accordance with an illustrative embodiment. In this illustrative example, information environment100includes information system102. Information system102provides access to information106stored in database107. As depicted, database107may be a storage system in a single location or may be distributed.

For example, web page server108sends information106to client data processing systems110operated by users. In this illustrative example, client data processing systems110are hardware systems that may include software. For example, client data processing systems110may be selected from at least one of a computer, a server computer, a workstation, a tablet computer, a laptop computer, a mobile phone, or some other suitable data processing system that may be used by users104.

In this illustrative example, a portion of information106takes the form of documents112. As depicted, documents112may be web pages114that are displayed on client data processing systems110.

As depicted, web pages114are designed using web page designer116. For example, web page118may be designed by operator120interacting with web page designer116.

Web page designer116may be implemented in software, hardware, firmware, or a combination thereof. When software is used, the operations performed by web page designer116may be implemented in program code configured to run on hardware, such as a processor unit. When firmware is used, the operations performed by web page designer116may be implemented in program code and data and stored in persistent memory to run on a processor unit. When hardware is employed, the hardware may include circuits that operate to perform the operations in web page designer116.

In the illustrative examples, the hardware may take the form of a circuit system, an integrated circuit, an application-specific integrated circuit (ASIC), a programmable logic device, or some other suitable type of hardware configured to perform a number of operations. With a programmable logic device, the device may be configured to perform the number of operations. The device may be reconfigured at a later time or may be permanently configured to perform the number of operations. Programmable logic devices include, for example, a programmable logic array, programmable array logic, a field programmable logic array, a field programmable gate array, and other suitable hardware devices. Additionally, the processes may be implemented in organic components integrated with inorganic components and may be comprised entirely of organic components excluding a human being. For example, the processes may be implemented as circuits in organic semiconductors.

As depicted, web page designer116may be implemented in data processing system122within computer system124. Computer system124is a hardware system that includes one or more data processing systems. When more than one data processing system is present, those data processing systems may be in communication with each other using a communications medium. The communications medium may be a network. The data processing systems may be selected from at least one of a computer, a server computer, a tablet, or some other suitable data processing system.

In the illustrative example, display system126and input device128are in communication with data processing system122. These components aid operator120in interacting with web page designer116.

A display system is a hardware system and includes one or more display devices on which graphical user interface130may be displayed. The display devices may include at least one of a light-emitting diode display (LED), a liquid crystal display (LCD), an organic light-emitting diode display (OLED), or some other suitable device on which graphical user interface130can be displayed. Operator120may interact with graphical user interface130through user input132generated by input device128. Input device128may be, for example, a mouse, a keyboard, a trackball, a touchscreen, a stylus, or some other suitable type of input device.

In operation, web page designer116in data processing system122displays objects134in graphical user interface130in display system146. As depicted, objects134are selectable for use in designing web page118.

In the illustrative example, an object in objects134is used in web page118. The object may be selected from one of a graphical element, a functional element, a script, a graphical control, or some other object that is used in web page118. A functional element performs some step, operation, or function. The functional element may not be visible. The functional element may be a script, a plug in, an extension, or some other suitable component.

Web page designer116generates metadata136for web page118based on user input132selecting a group of objects134for web page118. As used herein, a “group of,” when used with reference to items, means one or more items. For example, a group of objects134is one or more of objects134.

Web page designer116generates metadata136in a number different ways. For example, in generating metadata136, web page designer116may perform at least one of creating new data for metadata136, modifying metadata136, or some other suitable action. Thus, metadata136may be entirely new metadata. In some cases, metadata136may be generated from modifying existing metadata.

In this illustrative example, metadata136describes web page118. For example, metadata136may describe at least one of what information is to be displayed, how the information is to be displayed, and where the information is to be displayed in web page118.

In generating metadata136for web page118, web page designer116does not generate hypertext markup language or cascading style sheets for web page118. Web page designer116does not generate markup language for web page118because web page118is described using metadata136. The markup language may be, for example, hypertext markup language or cascading style sheets.

In the illustrative example, web page designer116creates preview138of web page118from metadata136. Web page designer116displays preview138of web page118in graphical user interface130in display system126.

Preview138is how web page118will look when displayed on one of client data processing systems110. In preview138, web page118may not be complete. As a result, preview138may show how web page118will look on client data processing systems110as currently designed. In other words, preview138does not require web page118to be completed.

Additionally, preview138may include content139for web page118. Also, content139used in preview138may be in a language that is selected based on one of the location of client data processing systems140and a user preference for the languages.

As depicted, content139is something that is to be expressed in web page118, as opposed to describing how or what something looks like in web page118. Content139may include at least one of text, images, video, audio, graphics, or other information that is put into web page118. In contrast, metadata136describes what web page118looks like. For example, metadata136may describe what information is to be displayed, how the information is to be displayed, and where the information is to be displayed in web page118.

Once web page118is completed, web page designer116stores web page118in database107with web pages114. As depicted, the storage of web page118is storing metadata136for web page118. Other ones of web pages114also may have metadata136that describe how those ones of web pages114will look when displayed on client data processing systems110. In storing metadata136in database107for web page118, web page designer116does not store markup language for web page118. Web page designer116does not store markup language for web page118because web page118is described using metadata136.

Web page designer116may retrieve metadata136for web page118from database107after metadata136has been saved in database107. For example, web page designer116may retrieve metadata136to make modifications to metadata136for web page118. In this manner, operator120may modify existing web pages in web pages114.

In the illustrative example, client data processing system140in client data processing systems110may access and display web pages114. For example, after web page118is designed using web page designer116, client data processing system140may retrieve metadata136for web page118.

In this illustrative example, metadata136for web page118may be obtained from web page server108. Web page server108may retrieve metadata136for web page118from database107. In this illustrative example, web page server108is not used to retrieve markup language for web page118. Metadata136is obtained from web page server108because web page118is described using metadata136.

Client data processing system140in client data processing systems110receives metadata136describing web page118. In this illustrative example, browser142in client data processing system140displays web page118. For example, web page118is displayed by browser142in graphical user interface144in display system146for client data processing system140.

In this illustrative example, browser142is a program or application. Browser142in graphical user interface144displays web page118in graphical user interface144in display system146. Browser142is configured to interpret web pages114received from web page server108to display web pages114. For example, browser142may interpret markup language, metadata136, and other information to display web pages114.

As depicted, metadata136defines what web page118looks like without content139for web page118. In this illustrative example, client data processing system140identifies content139needed for web page118based on metadata136. In this illustrative example, content139is stored and retrieved from database107.

As depicted, content139may be a portion of information106that is displayed in web page118. The client data processing system obtains content139for web page118.

With content139, web page generator150in client data processing system140creates web page118using metadata136and content139without using a markup language. For example, web page generator150may create at least one of a document object model data structure for web page118or some other suitable type of data structure for web page118. These data structures generated by web page generator150for web page118do not have markup language. Markup languages are selected from at least one of hypertext markup languages, cascading style sheets, or other suitable types of markup languages.

Because markup languages may have different versions, these markup languages may not support features described by metadata136. Using metadata136to generate web page118without using a markup language may result in a more accurate and uniform representation of web page118when displayed on client data processing system140.

In the illustrative example, web page generator150displays web page118on graphical user interface144in display system146for client data processing system140. The display of web page118, in this example, does not use browser142.

In another illustrative example, web page generator150may send web page118to browser142. Browser142may then display web page118without using a markup language.

In still another illustrative example, web page generator150may be a module located in browser142. As a module, web page generator150creates web page118in browser142without using a markup language. Browser142may then display web page118. In other words, web page generator150enables browser142to display web page118that is based on metadata136and content139.

Thus, the illustrative examples provide a method and apparatus for designing web pages. In one illustrative example, a method and apparatus provide one or more technical solutions that overcome the technical problem of the knowledge and experience about web page servers needed to design web pages. In another illustrative example, a method and apparatus provide one or more technical solutions that overcome the technical problem of designing web pages for display on different types of browsers. In the technical solution, the process implemented in web page designer116using metadata136has a technical effect that avoids operator120needing knowledge and experience about web page server108. Additionally, the technical solution provided by this process has a technical effect of reducing the need for operator120to design web page118on different types of browsers to see whether web page118has a desired display on those browsers. Metadata136describes web page118and is not browser dependent in this illustrative example.

Thus, operator120may focus on designing web page118rather than identifying differences in the manner in which web page118may be displayed on different browsers. Additionally, operator120does not need to access or have knowledge or experience about web page server108. Operator120may focus on designing web page118for a particular look, feel, function, or other goal.

The illustrative example also solves the technical problem of having insufficient resources for Web page servers to generate web pages. In the illustrative example, a technical solution is present in which client data processing system140generates web page118using metadata136for web page118. Additionally, client data processing system140also retrieves content139for use in generating web page118.

The technical effect is reducing resources that are needed for web page server108. For example, web page server108may only send metadata136and does not need to use resources to generate web page118. As a result, times at which web pages114are generated with a lower than desired time may be reduced. Further, web pages114may be displayed more quickly on client data processing systems110even when high levels of traffic are present on web page server108in the illustrative example.

For example, current web page servers process the markup language for a web page and find the content for the web page. The current web page servers then send the web page and the content to the browser on the client data processing system to display.

In contrast, web page server108sends metadata136for web page118to client data processing system140. Web page generator150in client data processing system140processes metadata136to form a visualization for web page118that is displayed in graphical user interface144in display system146. Also, in this example, web page generator150also requests content139for web page118. Web page generator150displays web page118with content139for web page118.

As a result, the technical effect is that less processing resources are needed for web page server108in data processing system122. Also, web pages114may be displayed more quickly in client data processing systems110even when high traffic is present for web page server108. The quicker display occurs because lower wait time is present for obtaining metadata136from web page server108as compared to current processes that deliver web pages.

In the illustrative example, data processing system122operates as a special purpose computer in which web page designer116in data processing system122enables a more efficient design of web page118. For example, web page designer116reduces the knowledge and experience about web page servers needed by operator120. Web page designer116also creates metadata136in a manner that avoids operator120from having to view preview138of web page118on different types of browsers to determine whether web page118will be displayed in a desired manner on different types of browsers. In particular, web page designer116transforms data processing system122into a special purpose computer as compared to currently available general purpose computers that do not have web page designer116.

Data processing system122transforms information106such that information106has a different function or has a different use. For example, web pages114are stored as metadata136in database107. Metadata136is transformed into a form for display on graphical user interface130in display system126for data processing system122. This transformation occurs when generating preview138of web page118. In other words, a visualization of web pages114may be generated as compared to the manner in which web pages114are stored in database107.

Additionally, a similar transformation of information106also occurs when displaying web page118in graphical user interface144in display system146for client data processing system140. Additionally, in displaying web page118as preview138in graphical user interface130in display system126for data processing system122, or displaying web page118using browser142in graphical user interface144in display system146in client data processing system140, content139may be identified and placed in web page118using metadata136. These and the other transformations of information106in the illustrative example are more than a mere display of information106stored in database107.

For example, in addition to storing metadata136for web pages114, other web pages may be present in addition to or in place of web pages114that are described using markup languages such as hypertext markup language (HTML), extensible markup language (XML), or some other suitable type of markup language. These types of web pages, however, may require different versions for different types of browsers in order to have a desired consistency for how the web pages are displayed on client data processing systems110.

As another illustrative example, metadata136for web page118may be obtained from other locations other than from web page server108. For example, metadata136may be located in a local cache in a client data processing system, a proxy server, a data processing system that is remote to data processing system122, or some other location. In this example, data processing system122is a first data processing system and the data processing system that is remote to data processing system122is a second data processing system.

As another example, content139may be located in other locations other than database107. For example, content139may be obtained from another server other than web page server108.

In other illustrative examples, a copy of content139may be stored locally on client data processing system140. In these other illustrative examples, accessing the copy of content139stored locally on client data processing system140enables web page designer116to create preview138with content139without accessing a server for content139.

With reference next toFIG. 2, an illustration of a block diagram of data flow for designing web pages is depicted in accordance with an illustrative embodiment. In this figure, an example of data flow for a process for designing metadata136for web pages114through web page designer116is shown. In the illustrative examples, the same reference numeral may be used in more than one figure. This reuse of a reference numeral in different figures represents the same element in the different figures.

In this illustrative example, web page designer116has a number of different components. As used herein, a “number of items” means one or more items. For example, a number of different components means one or more components.

As depicted, web page designer116includes control module200, design module201, and preview module202. Web page designer116uses these components to generate web pages114. Web page designer116generates web pages114by at least one of creating new web pages or modifying existing web pages in web pages114.

As depicted, control module200creates first metadata204for first web page205when operator120creates first web page205interacting with control module200. For example, control module200may create first metadata204using objects selected by operator120for first web page205. In other words, the presence of objects may be initially absent in first metadata204when web page designer116is being used to create first web page205. First web page205is an example of web page118and first metadata204in metadata136is an example of metadata136for web page118.

In this particular example, control module200retrieves first metadata204for first web page205from database107when operator120modifies first web page205. Control module200sends first metadata204and second metadata207to design module201. Control module200also sends first metadata204to preview module202.

Control module200receives changes to first metadata204through user input132as illustrated in this figure. Control module200stores first metadata204for first web page205in database107.

As depicted, design module201receives first metadata204for first web page205and second metadata207for second web page208from control module200. Design module201creates design view209from second metadata207for second web page208. In this illustrative example, design view209is displayed in graphical user interface130. Design view209is an interface displayed by design module201to operator120.

In this illustrative example, design view209is used by operator120to visually design web pages114. The designing of web pages114may include creating new web pages in web pages114, modifying existing web pages in web pages114, or some combination thereof.

In displaying design view209, design module201in web page designer116displays objects210and selected objects211in second web page208. Second web page208is generated by design module201from second metadata207. Second metadata207may be stored and retrieved from database107in this example.

Thus, database107may include metadata136for web pages114that are accessed by client data processing systems140. Additionally, database107also may include second metadata207for second web page208for design view209used by operator120at data processing system122. In other illustrative examples, second metadata207may be stored in other locations, such as in data processing system122.

As depicted, second web page208forms design view209in graphical user interface130. Operator120interacts with design view209to design first web page205. In other words, design view209may be a web page similar to web page118and web pages114that are designed by operator120.

In this illustrative example, the process includes generating metadata136for web pages114. For example, first web page205may be modified by modifying first metadata204for first web page205through operator120interacting with second web page208. As depicted, design module201creates design view209to receive user input132for generating first metadata204for first web page205.

As shown in this figure, design view209includes objects210and a group of selected objects211. Objects210are examples of objects134inFIG. 1. In the illustrative example, one or more of objects210may be added to the group of selected objects211through user input132.

As depicted, design module201identifies the group of selected objects211from first metadata204. Design module201also identifies selected metadata212for the group of selected objects211from first metadata204. Selected metadata212is first metadata204for first web page205. Design module201displays the group of selected objects211in design view209based on selected metadata212.

In this illustrative example, control module200receives user input132at design view209displayed in graphical user interface128through input device128. Design module201receives new object214from user input132through control module200. New object214is an object that is used to create an object for first web page205. For example, new object214may be a button that operator120adds to first web page205.

Operator120may identify new object214through user input132that selects new object214in objects210. For example, user input132may be a drag and drop operation of new object214from objects210to the group of selected objects211.

As depicted, design module201receives selected object216from user input132through control module200. Selected object216is an object selected from the group of selected objects211. Design module201displays selected metadata212for selected object216when selected object216is received.

Design module201receives selected metadata218from user input132through control module200. Selected metadata218is at least one of user input that creates selected metadata212for selected objects211or user input that changes selected metadata212for selected objects211.

In this illustrative example, control module200modifies first metadata204based on changes to the group of selected objects211and selected metadata212. For example, when new object214is added to the group of selected objects211in design view209, control module200also adds new object214to first metadata204.

Control module200receives selected command220through input device128. Selected command220is a command to perform at least one of retrieving first metadata204, storing first metadata204, generating preview138based on first metadata204, generating design view209based on first metadata204, or some other suitable action.

In this illustrative example, control module200retrieves first metadata204for first web page205from database107when the command to retrieve first metadata204is received. Control module200also sends first metadata204to design module201and preview module202when the command to retrieve first metadata204is received. As depicted, control module200stores first metadata204in database107when the command to store first metadata204is received.

For example, instead of displaying design view209in second web page208, design module201may display design view209in any suitable type of window in graphical user interface130. In this example, design module201may create the window in graphical user interface130for which design module201displays design view209.

As another example, design module201may create second web page208in a window for a browser. In this example, the browser displays the window in graphical user interface130.

With reference now toFIG. 3, an illustration of a block diagram of objects is depicted in accordance with an illustrative embodiment. In this illustrative example, objects300are examples of objects134inFIG. 1and objects210inFIG. 2. Objects may be selected for a web page from objects300in this example.

In this illustrative example, view332is an object that includes a group of objects with a layout. A layout for a group of objects is a description of how the group of objects are arranged relative to each other on a graphical user interface when the group of objects are displayed. For example, view332may be included in metadata for a web page for storing information for the group of objects included in view332and information for the layout of the group of objects. This information is placed into the metadata for the web page.

In these illustrative examples, a portion of the objects in the group of objects included in view332may also be views. These views, in turn include other groups of objects. These views are used to form a hierarchy for the objects for the web page. As depicted, the hierarchy represents parent to child relationships for the objects. In other words, view332is an object that is the parent of a group of objects. The group of objects included in view332are children of view332.

Button302is an object in a web page that displays text. Button302is selectable. Selecting button302performs an action for the web page. This action is at least one of retrieving dynamic content for the web page, saving data entered into the web page, displaying another web page, or any other suitable type of action for a button on a web page. Chart304is a table that displays rows and columns of other objects in objects300.

Currency316is an entry field for entering a monetary amount. The display of currency316is based on a format for currency for a selected locale. For example, if the selected locale is United States English, the monetary amount in currency316may be displayed in the format $xxx,xxx.xx. Custom318is an entry field with a custom format.

Objects300may also include at least one of additional types of objects, or different types of objects. For example, color picker308may not be included in objects300. As another example, objects300may include a slider bar for selecting from a group of options with the slider bar.

Turning toFIG. 4, an illustration of a block diagram of metadata is depicted in accordance with an illustrative embodiment. In this illustration, an example of a number of components of metadata136for web page118is shown.

As depicted, metadata136includes identifier402, layout404, rules406, and service definitions408. Identifier402points to web page118. For example, identifier402may be a universal resource locator for web page118. Layout404in metadata136is a layout for objects displayed on web page118.

Rules406are in metadata136. In the illustrative example, rules406are at least one of code that performs actions for objects in layout404or options used by code to perform actions for objects in layout404. For example, if the layout for web page118includes a button, a rule in rules406for the button may be to execute code that performs an action for the button when a user input selects the button.

In this illustrative example, when a rule in rules406for an object in objects300in layout404is located in metadata136, the rule is an embedded rule for the object. In other words, the rule in rules406is embedded in metadata136for the object for web page118when the rule is included in metadata136for the object for web page118.

Service definitions408is configuration information for sending and receiving user data and content139. User data is data in objects entered by an operator. For example, if the layout for web page118includes a text box for entering in text, the text entered by the operator is user data.

The configuration information in service definitions408includes at least one of json service definition configuration information, or other suitable types of service definition configuration information. For example, service definitions408may include information for using json objects through restful application programming interfaces to send and receive user data and content139.

Turning next toFIG. 5, an illustration of a block diagram of a layout is depicted in accordance with an illustrative embodiment. In this illustration, an example of a number of components of layout404in metadata136for web page118is shown.

In this illustrative example, layout404includes identifier502, objects504, and regions506. Identifier502is alphanumeric characters for layout404used to identify layout404in web page118. Objects504are a group of objects selected from objects300.

Regions506are portions of web page118where objects504are located. Regions506include information describing locations of objects504relative to each other in these portions of web page118when web page118is displayed.

Turning now toFIG. 6, an illustration of a block diagram of objects is depicted in accordance with an illustrative embodiment. In this illustration, an example of a number of components of objects504in layout404in metadata136for web page118is shown.

As depicted in this example, objects504include identifiers602, attributes604, and validations606. Identifiers602are names for objects504. These names may be used to identify one object from another in objects504.

Attributes604are values for objects504that define objects504. Attributes604include at least one of display characteristics, content, default selections, or other suitable types of attributes for objects504.

In this illustrative example, validations606are at least one of code that validates objects504or options used by code to validate objects504. For example, when the object is a date, the validation code may verify that the date entered by an operator is valid.

With reference toFIG. 7, an illustration of a block diagram of rules is depicted in accordance with an illustrative embodiment. In this illustration, an example of a number of components of rules406in metadata136for web page118is shown.

In this illustrative example, rules406include service interactions702, bindings704, and compound validations706. Service interactions702is code that performs actions based user input provided to objects504specified in layout404in metadata136for web page118.

For example, service interactions702for objects504may include program code for generating an order form based on user input made to objects504. In this depicted example, the program code for generating the order form in service interactions702is executed when user input made to objects504on web page118is received. For example, the order form may be a json object that is generated by service interactions702.

As another example, service interactions702for objects504may include program code for calculating a value for an object in objects504based on user input provided to objects504. In this example, the program code for calculating the value in service interactions702is executed when user input to objects504on web page118is received. For example, the value may be the output of an algorithm implemented by service interactions702for web page118that processes user input made to objects504.

In this illustrative example, the program code for calculating the value may be a java script function. The following is an example of program code in service interactions702that calculates tax for an object in objects504:

document[objectName].value=calculateTax(document[salesPriceInput].value,document[taxRateInput].value);
where “document” is a data structure that includes objects504, “salesPrice” and “taxRate” are parameters of the function “calculateTax”, web page “salesPriceInput” and “taxRateInput” are examples of objects in objects504in which user input is present, and “objectName” is an example of the object where the value calculated by the function “calculateTax” is placed on web page118.

In this illustrative example, the function “calculateTax” is executed on at least one of client data processing systems110, data processing system122, or web page server108. When data used by a function in service interactions702is not provided to the function as a parameter of the function, the execution of the function may be restricted to a data processing system that has access to the data. For example, when a function in service interactions702accesses the data structure “document,” execution of the function may be restricted to the data processing system where “document” is present.

Bindings704is code that links user input and content in objects504to an application programming interface for sending and retrieving the user input and content. For example, a binding in bindings704for a text box in web page118may include code that sends the text entered into the text box as a json object using a restful application programming interface.

Compound validations706are codes that validate a group of objects504. For example, when web page118includes a group of name and address text boxes, a compound validation for the group of name and address text boxes may include code that validates the name and address entered.

FIGS. 8-12are diagrams of illustrative examples of a graphical user interface that may be used to design a web page. With reference first toFIG. 8, an illustration of a graphical user interface for designing a web page is depicted in accordance with an illustrative embodiment. As depicted, graphical user interface800is an example of one implementation for graphical user interface130shown in block form inFIG. 1.

In this illustrative example, graphical user interface800includes a number of different graphical elements in a number of different sections. As depicted, graphical user interface800includes options section802, views section804, and commands section806.

Options section802includes drop down list808for selecting a web page from drop down list808as the web page being designed in graphical user interface800. The web page being designed in graphical user interface800is an example of web page118shown in block form inFIG. 1.

Options section802also includes drop down list810for selecting the country being used for a group of language translations in graphical user interface800. In this illustrative example, when the country selected in drop down list810is set to default, the country used is set to at least one of the country where data processing system122is located, the country where client data processing system140is located, or a preference selected by operator120.

Options section802further includes drop down list812for selecting the role of operator120in using graphical user interface800to generate web page118. As depicted, the role of operator120is selected from at least one of architect for generating web page118, coder for generating rules in metadata for web page118, translator for generating translations, or other suitable types of roles of operators that use graphical user interface800.

In the illustrative example, the role selected specifies which changes to metadata for web page118are allowed by operator120. For example, operator120may be allowed to create or modify translations and may not be allowed to make other types of changes when the role selected is translator.

In this illustrative example, drop down list814in options section802is for selecting the locale being used in graphical user interface800. In this illustrative example, when the locale selected in drop down list814is set to default, the locale used is set to at least one of the default locale for the country where data processing system122is located, the locale for the country where client data processing system140is located, or a preference selected by operator120.

As depicted, options section802still further includes tab816for selecting design view817to show design view817in views section804, tab818for selecting a preview to show the preview in views section804, and tab820for selecting a source view to show the source view in views section804. In this illustrative example, tab816has been selected.

Design view817shown in graphical user interface800is an example of design view209shown in block form inFIG. 1. Design view817includes objects822and layout824. As depicted, objects822shown in design view817are an example of objects210shown in block form inFIG. 2. In this particular example, layout824is an example of layout404shown in block form inFIG. 4for metadata136shown in block form inFIG. 4for web page118.

As depicted, regions826in layout824show portions of web page118where objects827are located. Regions826show relative locations within layout824where objects827are shown when web page118is displayed. Regions826shown in layout824are examples of regions506shown in block form inFIG. 5. Objects827are examples of objects504shown in block form inFIG. 5and selected objects211shown in block form inFIG. 2.

In this illustrative example, operator120has used pointer828to perform a drag and drop operation to create new object829. As depicted, operator120has moved new object829in the direction of arrow830to region832. New object829is an example of new object214shown in block form inFIG. 2. New object829is an example of currency316shown in block form inFIG. 3. Pointer828shown in graphical user interface800is an example of input device128shown in block form inFIG. 1.

Commands section806includes a number of different buttons. In this illustrative example, commands section806includes save button834and delete button836. Selecting these buttons sends commands to web page designer116.

For example, web page designer116receives and processes the command to save web page118when save button834is selected. As another example, web page designer116receives and processes the command to delete a selected object in objects827when delete button836is selected.

As depicted, region838is located in regions826. Region838includes object840. Object840is an example of view332shown in block form inFIG. 3. In this illustrative example, object840is an example of a view in web page118for performing a search for jobs related to a type of career.

With reference next toFIG. 9, an illustration of a graphical user interface for designing a web page is depicted in accordance with an illustrative embodiment. In this illustration, graphical user interface800is showing a number of graphical elements used to generate metadata900for selected object902for web page118. Selected object902is an example of selected object216shown in block form inFIG. 2.

Metadata900is a portion of metadata136for selected object902. This portion includes a number of graphical elements. In this illustrative example, metadata900includes label904, identifier906, a group of attributes908, and a group of validations910.

Label904is text that identifies selected object902as a currency object. Identifier906shows that the name of the selected object is “MyComponent.” Identifier906is an example of an identifier in identifiers602shown in block form inFIG. 6.

In this illustrative example, the group of attributes908shown in graphical user interface800is an example of a portion of attributes604for selected object902shown in block form inFIG. 6. The group of validations910shown in graphical user interface800is an example of a portion of validations606for selected object902shown in block form inFIG. 6.

As depicted, label912in the group of attributes908is text that describes selected object902. The text for label912is entered into text entry field913for label912.

Position914in the group of attributes908specifies where label912is displayed relative to selected object902. Position914is selected using radio button915for position914. In the illustrative example, the selection for where to display label912relative to selected object902is between at least one of on top of selected object902, to the left of selected object902, or to the right of selected object902.

Attributes908are entered by an operator through user input. For example, an operator may enter the text for label912into text entry field913and make the selection for where to display label912relative to selected object902using radio button915for position914.

In this illustrative example, the group of validations910specifies the validations for selected object902. As depicted, required916in group of validations910specifies whether selected object902is required or not required. When selected object902is required, an amount of currency must be entered into selected object902. Whether selected object902is required or not required is entered into check box917for required916.

With reference next toFIG. 10, an illustration of a graphical user interface for designing a view in a web page is depicted in accordance with an illustrative embodiment. In this illustration, object838in region840has been selected. As discussed above in the description ofFIG. 8, object838is an example of view332shown in block form inFIG. 3.

Regions1002include region1006, region1008, region1010, and region1012. These regions are examples of regions506shown in block form inFIG. 5.

Objects1004include object1014, object1016, object1018, and object1020. Object1014is located in region1006, object1016is located in region1008, object1018is located in region1010, and object1020is located in region1012. These objects are examples of objects504shown in block form inFIG. 5. Object1014and1016are examples of text326shown in block form inFIG. 3; object1018is an example of text box330shown in block form inFIG. 3; and object1020is an example of view332shown in block form inFIG. 3.

As depicted, object1020is for multiple views. In this illustrative example, the multiple views are for career center jobs. For example, when object1020is displayed in web page118object1020may show multiple career center jobs based on text entered into object1018.

As depicted, when an object in a first layout is an example of view332, the object includes a second layout with objects that form the object. Each of the objects that form the object may in turn also be an example of view332. In other words, when an object in web page118is an example of view332, metadata136for web page118is hierarchical.

With reference now toFIG. 11, an illustration of a graphical user interface for displaying a preview of a web page is depicted in accordance with an illustrative embodiment. In this illustration, tab818has been selected.

As depicted, graphical user interface800is showing preview1100for web page118. Preview1100is an example of preview138shown in block form inFIGS. 1-2.

InFIG. 12, an illustration of a graphical user interface for displaying a source view of a web page is depicted in accordance with an illustrative embodiment. In this illustration, tab820has been selected.

As depicted, graphical user interface800is showing source view1200for web page118. In this illustrative example, source view1200includes metadata1202. Metadata1202is an example of metadata136shown in block form inFIGS. 1-2. Graphical user interface800displays metadata1202as text in this illustrative example.

With reference now toFIG. 13, an illustration of a block diagram of data flow for creating and displaying web pages is depicted in accordance with an illustrative embodiment. In this depicted example, the data flow may be implemented in client data processing system140to display web pages114. In this example, web pages114have been designed using web page designer116in data processing system122.

In this figure, an example of data flow for a process that generates and displays a web page in web pages114through web page generator150is shown. In this illustration, web page generator150is a program. For example, web page generator150may be implemented as a browser.

In this illustrative example, web page generator150includes control module1300and display module1302. Control module1300receives metadata1304describing web page1306. Metadata1304for web page1306is an example of metadata for a web page in metadata136. Web page1306is an example of a web page in web pages114inFIG. 1.

Control module1300identifies content1314needed for web page1306based on metadata1304. Control module1300obtains content1314for web page1306. For example, control module1300may obtain content1314from at least one of database107inFIG. 1or some other suitable location where content1314is stored.

Control module1300places content1314into objects1312based on metadata1304. For example, when an attribute in metadata for an object points to content, control module1300places the content into the object.

As depicted, display module1302receives layout1310from control module1300. Display module1302creates web page1306using layout1310. For example, layout1310may specify that web page1306is displayed as preview1100shown inFIG. 11with objects for a web page used for performing a career search. Display module1302displays web page1306on graphical user interface144.

With reference now toFIG. 14, an illustration of another block diagram of data flow for creating and displaying web pages is depicted in accordance with an illustrative embodiment. In this illustration, the data flow may be implemented in browser142in client data processing system140to display web pages114. Web pages114have been designed using web page designer116in data processing system122in this illustrative example.

In this figure, an example of data flow for a process that generates and displays a web page in web pages114through web page generator150is shown. In this illustration, web page generator150is a module in modules1400in browser142.

In this illustrative example, web page generator150includes control module1300and document object model tree generator1402. As described above inFIG. 13, control module1300identifies layout1310for objects1312from metadata1304, obtains content1314for web page1306, and places content1314in objects1312.

As depicted, browser142includes document object model interface1404. Document object model interface1404is an application programming interface in browser142for generating and accessing document object model trees. A document object model tree is a data structure that includes objects. These objects are examples of objects134inFIG. 1.

Document object model tree generator1402receives layout1310from control module1300. Document object model tree generator1402uses document object model interface1404to generate document object model tree1406for web page1306from layout1310.

Browser142generates web page1306from document object model tree1406. In this illustrative example, browser142displays web page1306.

In this illustrative example, modules1400include web page generator150, hypertext markup language (HTML) version (v.) 4.01 generator1408, and hypertext markup language version 5 generator1410. As depicted, modules1400in browser142enable browser142to generate and display web pages based on metadata1304, hypertext markup language version 4.01, and hypertext markup language version 5.

Web pages other than web pages114may be designed using different versions of hypertext markup language. Different web browsers implement support for these different versions of hypertext markup language. These web browsers have unique implementations for the versions of hypertext markup language. As a result, there are differences between the web browsers in how these other web pages look when displayed by the different web browsers.

Web pages114are designed using web page designer116. Metadata136specifies what web pages114look like when displayed. Web pages114are generated and displayed by the web browsers using web page generator150. Thus, no differences are present for what web pages114look like between the different web browsers when web pages114are displayed by the different web browsers.

The illustration of data flow for creating and displaying web pages shown inFIGS. 13-14is not meant to imply physical or architectural limitations to the manner in which an illustrative embodiment may be implemented. Other components in addition to or in place of the ones illustrated may be used. Some components may be unnecessary. Also, the blocks are presented to illustrate some functional components. One or more of these blocks may be combined, divided, or combined and divided into different blocks when implemented in an illustrative embodiment.

For example, web page generator150may also store user data entered into web page1306. In this example, when metadata1304includes a rule for storing the user data, web page generator150stores the user data based on the metadata for the rule.

As another example, metadata1304may be a first version of metadata1304received by web page generator150. In this example, web page generator150may receive a second version of metadata1304. Web page generator150may then generate web page1306a second time using the second version of metadata1304and content1314. Web page generator150may display the web page generated the second time in graphical user interface144.

As yet another example, control module1300may store metadata1304in a cache in client data processing system140when metadata1304is received. In this example, control module1300may also retrieve metadata1304from the cache in the client data processing system140.

As a further example, control module1300may receive other metadata for an application instead of metadata1304. In this example, the metadata for the application specifies web pages of the application. Control module1300identifies metadata1304from a portion of the metadata for a web page specified in the metadata for the application. In other words, the processes shown inFIG. 13andFIG. 14for creating and displaying web page1306can also be used to create and display web pages of applications. As still another example, the example of web page generator150inFIG. 14as a module in modules1400in browser142may also be implemented as at least one of a plug-in for browser142, an extension for browser142, a part of browser142, or in some other suitable manner.

Turning next toFIG. 15, an illustration of a flowchart of a process for designing a web page is depicted in accordance with an illustrative embodiment. The process illustrated inFIG. 15may be implemented in information environment100shown in block form inFIG. 1. For example, the process may be implemented in web page designer116in information system102.

The process begins by displaying objects in a graphical user interface in a display system, wherein the objects are selectable for use in designing a web page (step1500). The process generates metadata for the web page based on a user input selecting a group of the objects for the web page (step1502). The metadata describes the web page.

The process creates a preview of the web page from the metadata (step1504). The process then displays the preview of the web page in the graphical user interface in a display system (1506).

A determination is made as to whether the web page is complete (step1508). At this point, the web page may or may not be complete. For example, the preview may be only a portion of the web page as designed thus far.

If the web page is complete, the process stores the metadata for the web page (step1510) with the process terminating thereafter. For example, the web page may be stored with web pages114for distribution by web page server108. If the web page is not complete, the process returns to step1500.

Turning next toFIG. 16, an illustration of a flowchart of a process for designing a web page is depicted in accordance with an illustrative embodiment. The process illustrated inFIG. 16may be implemented in information environment100shown in block form inFIG. 1andFIG. 2. For example, the process may be implemented in web page designer116in information system102inFIG. 1and the data flow shown inFIG. 2.

The process begins by displaying objects in a design view of a web page in a graphical user interface (step1600). In step1600, the design view may be displayed in a web page of a browser in the graphical user interface.

The process receives user input identifying an object in the objects to add as a new object in a group of selected objects for the web page (step1602). The process adds the new object to a group of selected objects for the web page (step1604). The process then displays the group of selected objects for the web page in the design view (step1606).

The process generates metadata for the web page based on the group of selected objects (step1608). The metadata describes the web page.

The process receives user input identifying one of the group of selected objects as a selected object (step1610). The process then displays metadata for the selected object in the graphical user interface (step1612). The process receives user input to the metadata for the selected object (step1614). The user input to the metadata for the selected object at least one of creates or modifies the metadata for the selected object.

The process next receives user input identifying a command (step1616). The command is at least one of retrieving the metadata for a web page, storing the metadata for the web page, generating a preview of the web page based on the metadata, generating a design view of the web page based on the metadata, or terminating the process.

A determination is made as to whether the command is to terminate the process (step1618). If the command is to terminate the process, the process terminates. Otherwise, the process performs the command (step1620) and returns to step1602.

Turning next toFIG. 17, an illustration of a flowchart of a process for displaying a web page is depicted in accordance with an illustrative embodiment. The process illustrated inFIG. 17may be implemented in information environment100shown in block form inFIG. 1. For example, the process may be implemented using web page generator150in client data processing system140.

The process begins by receiving metadata describing a web page (step1700). In this illustrative example, the metadata may be received from different sources. For example, the metadata may be received from a web page server, a local cache on the client data processing system, a proxy server, or some other suitable source. The metadata defines what the web page looks like without content for the web page.

The process identifies content needed for the web page based on the metadata (step1702). The process then obtains the content for the web page (step1704).

The process creates the web page using the metadata and the content without using a markup language (step1706). The process displays the web page on a graphical user interface on the client data processing system (step1708) with the process terminating thereafter.

Turning next toFIG. 18, an illustration of a flowchart of a process for displaying a web page is depicted in accordance with an illustrative embodiment. The process illustrated inFIG. 18may be implemented in information environment100shown in block form inFIG. 1. For example, the process may be implemented using web page generator150in client data processing system140.

The process begins by receiving metadata describing a web page (step1800). The process identifies a layout for objects for the web page from the metadata (step1802). The web page is an example of web page1306and the metadata is an example of metadata1304.

The process identifies content needed for the web page based on the metadata (step1804). The process then obtains the content for the web page (step1806).

The process creates the web page using the layout for the objects and the content (step1808). The process displays the web page on a graphical user interface on the client data processing system (step1810) with the process terminating thereafter.

As an example, in step1808, the process may use web page generator150to generate document object model tree1406in browser142. In this example, web page generator150uses document object model interface1404to generate document object model tree1406from the layout for the objects and the content. In this example, the process uses browser142to display the web page based on document object model tree1406in step1810.

For example, the process inFIG. 18may perform steps1806substantially concurrently with steps1808and1810. In this example, the web page is displayed on the client data processing system as the content is obtained in step1806.

As another example, the content may be obtained in step1806from a stored copy of the content located in a cache of content in the client data processing system. For example, when the process obtains the content in step1806, the process may also store the content in the cache in the client data processing system for use at a subsequent time in which the process obtains the content from the cache in client data processing system.

Turning now toFIG. 19, an illustration of a block diagram of a data processing system is depicted in accordance with an illustrative embodiment. Data processing system1900may be used to implement computer system124, data processing system122, and client data processing systems110. In this illustrative example, data processing system1900includes communications framework1902, which provides communications between processor unit1904, memory1906, persistent storage1908, communications unit1910, input/output (I/O) unit1912, and display1914. In this example, communications framework1902may take the form of a bus system.

Processor unit1904serves to execute instructions for software that may be loaded into memory1906. Processor unit1904may be a number of processors, a multi-processor core, or some other type of processor, depending on the particular implementation.

Memory1906and persistent storage1908are examples of storage devices1916. A storage device is any piece of hardware that is capable of storing information, such as, for example, without limitation, at least one of data, program code in functional form, or other suitable information either on a temporary basis, a permanent basis, or both on a temporary basis and a permanent basis. Storage devices1916may also be referred to as computer readable storage devices in these illustrative examples. Memory1906, in these examples, may be, for example, a random access memory or any other suitable volatile or non-volatile storage device. Persistent storage1908may take various forms, depending on the particular implementation.

For example, persistent storage1908may contain one or more components or devices. For example, persistent storage1908may be a hard drive, a flash memory, a rewritable optical disk, a rewritable magnetic tape, or some combination of the above. The media used by persistent storage1908also may be removable. For example, a removable hard drive may be used for persistent storage1908.

Communications unit1910, in these illustrative examples, provides for communications with other data processing systems or devices. In these illustrative examples, communications unit1910is a network interface card.

Input/output unit1912allows for input and output of data with other devices that may be connected to data processing system1900. For example, input/output unit1912may provide a connection for user input through at least of a keyboard, a mouse, or some other suitable input device. Further, input/output unit1912may send output to a printer. Display1914provides a mechanism to display information to a user.

Instructions for at least one of the operating system, applications, or programs may be located in storage devices1916, which are in communication with processor unit1904through communications framework1902. The processes of the different embodiments may be performed by processor unit1904using computer-implemented instructions, which may be located in a memory, such as memory1906.

These instructions are referred to as program code, computer usable program code, or computer readable program code that may be read and executed by a processor in processor unit1904. The program code in the different embodiments may be embodied on different physical or computer readable storage media, such as memory1906or persistent storage1908.

Program code1918is located in a functional form on computer readable media1920that is selectively removable and may be loaded onto or transferred to data processing system1900for execution by processor unit1904. Program code1918and computer readable media1920form computer program product1922in these illustrative examples. In one example, computer readable media1920may be computer readable storage media1924or computer readable signal media1926. In these illustrative examples, computer readable storage media1924is a physical or tangible storage device used to store program code1918rather than a medium that propagates or transmits program code1918.

Alternatively, program code1918may be transferred to data processing system1900using computer readable signal media1926. Computer readable signal media1926may be, for example, a propagated data signal containing program code1918. For example, computer readable signal media1926may be at least one of an electromagnetic signal, an optical signal, or any other suitable type of signal. These signals may be transmitted over at least one of communications links, such as wireless communications links, optical fiber cable, coaxial cable, a wire, or any other suitable type of communications link.

Thus, the illustrative examples provide a method and apparatus for designing web pages. In one illustrative example, a method and apparatus overcome the technical problem of the knowledge and experience about web page servers needed to design web pages.

In another illustrative example, a method and apparatus overcome the technical problem of designing web pages for display on different types of browsers. In the technical solution, the process using the metadata has a technical effect that avoids an operator needing knowledge and experience about a web page server. Additionally, the technical solution provided by this process has a technical effect of reducing the need for the operator viewing a web page on different types of browsers to see whether the web page has a desired display on those browsers.

Thus, the operator designing a web page may focus on designing the web page rather than identifying differences in the manner in which the web page may be displayed on different browsers. In this manner, the operator designing a web page may focus on how the web page should look rather than having to worry about how the web page will be displayed on different browsers or having knowledge about web servers to view or test web pages. Thus, the operator may focus on designing the web page for a particular look, feel, function, or other goal.

Further, when web pages are displayed on a browser on a client data processing system, the display of the web pages may occur more quickly, with less use of web page server resources, more consistently, or some combination thereof. For example, a client data processing system may display web pages more quickly because the web pages are generated on the client data processing system instead of on a web server on a remote computer. In particular, displaying web pages using metadata and content on a client data processing system overcomes the technical problem of having sufficient resources for web page servers to generate web pages. As a result, a technical effect occurs in which web pages are displayed more quickly on client data processing systems.

For example, when the web page includes a view, versions the view may be provided for political units. When the political unit is identified, the web page is created for display using the objects included in the version of the view for the political unit.

The description of the different illustrative embodiments has been presented for purposes of illustration and description and is not intended to be exhaustive or limited to the embodiments in the form disclosed. The different illustrative examples describe components that perform actions or operations. In an illustrative embodiment, a component may be configured to perform the action or operation described. For example, the component may have a configuration or design for a structure that provides the component an ability to perform the action or operation that is described in the illustrative examples as being performed by the component.