WO2009147365A1

WO2009147365A1 - Web-based content delivery

Info

Publication number: WO2009147365A1
Application number: PCT/GB2009/001144
Authority: WO
Inventors: Thomas Andrew D'roza; Martin Christopher Webb; Neil Andrew Emms; Stuart Martin Race
Original assignee: British Telecommunications
Priority date: 2008-06-02
Filing date: 2009-05-08
Publication date: 2009-12-10
Also published as: GB0809973D0

Abstract

A system and method for adding content, such as a gadget, comprising a first part and a second part, to a webpage loaded on a browser without requiring the webpage to be re- loaded on the browser in the process. While keeping the webpage loaded on the browser, the first part of the content is generated and combined with an indicator for the second part of the content. The first part of the content and the indicator are inserted into the webpage. A location specified by the indicator is accessed by the browser and the second part of the content is transferred from the specified location to the browser which combines the transferred second part with the first part in the webpage. The browser optionally generates a floating element that appears on top of the webpage with a prompt to a user of the browser to indicate the content to be added.

Description

Web-Based Content Delivery

The invention is directed to the field of web-based content and, in particular, to adding content, including but not limited to gadgets and widgets, to a webpage in an efficient manner.

Personalised homepages on the Web have existed for many years, with MyYahoo!® being one of the first popular examples. Such personalised homepages allow a user to customise their own personal webpage user-interface by inserting self-contained elements of content and, optionally, functionality. These self-contained user-interface elements are often known as "widgets" or "gadgets". For simplicity, we shall use the term "gadgets" from now on to denote all such elements. A gadget, is often personalised for a specific user. For example a user may add a weather gadget to show the weather forecast specific to their home town, or a sport gadget to show latest news headlines relating to their favourite team. Other gadgets may be used to display personal photos or personalized news. A gadget may also be thought of as a portable chunk of code that can be installed by an end user and executed within an HTML-based webpage without requiring re- compilation of the webpage.

Gadgets are normally restricted in the screen area they can use to present information because a single, personalised homepage may be shared between many gadgets, often organised into columns. As a consequence, information displayed on a personalised homepage by a gadget is usually an overview or summary together with links to a separate website containing more detail on the gadget's topic. Early personalised homepages allowed the user to select from a catalogue of gadgets offered by a homepage provider (e.g. Yahoo!®) and provided basic control over the position of gadgets within the page. More recent examples (e.g. Netvibes®, iGoogle™) allow any third party to create a gadget and publish it for others users to add to their own personalised homepage.

Currently, Google's iGoogle™ website allows the user to customise their personalised homepage by selecting gadgets. However, to do this is a long-winded process requiring the user to navigate away from their homepage to a catalogue, select an element to add to their homepage and then reload their entire homepage.

AJaX (Asynchronous JavaScript and XML) is a technique used to create interactive web applications through exchanging small amounts of data from the user's browser to the web server thus allowing data to be retrieved from the server without needing to reload an entire webpage. However, the nature of web gadgets composed of HTML and JavaScript is such that the AJaX technique alone is not suitable for returning the HTML content of a gadget for insertion directly into a webpage. This is because the gadgets on any one container page may derive from different third-party sources and may access or display information that is confidential to the user. In order to enforce security restrictions, each gadget is contained by an HTML Frame. The IFrame is designed to facilitate embedding one HTML document inside another and acts to prevent one gadget from interrogating the content of another. Standard IFrame behaviour dictates that its contents cannot be specified directly (e.g. from data contained in the response to an AJaX request).

US 2007/214239 describes the use of AJAX to update parts of a form, e.g. in response to a user clicking a button in their browser. This relates to validating user input into a web form and returning an appropriate response to populate a preconfigured area of the page. US 2008/040653 describes a hosted server application that receives data submitted from code embedded in a web page in order to verify the origin of the page so as to prevent click-fraud or referral-fraud in the field of web advertising. In response to the data, the hosted server application may return an appropriate advertisement in the form of a banner ad, for example, however, no content is generated for insertion into the page based on the server response - rather a response is received and inserted into the page exactly as it was received. US 2002/188936 describes a software module to provide client-server communication. This uses a "synch window" invisible to the user, which requires data to be converted before loading into the user's browser window.

The inventors have realised that known techniques are wasteful of user time, server processing capacity and network bandwidth, requiring the re-provisioning of data previously provided to the user, and have devised an improvement aimed at addressing these issues.

To address the issues identified, above, in relation to current techniques for providing content for a user, the inventors have provided a method of adding content to a webpage loaded on a browser while keeping the webpage loaded on the browser; in which the content comprises a first part and a second part; in which the method comprises, without navigating away from the webpage, opening a dialogue window for user selection of content for adding to the webpage; accepting, in the dialogue window, a request for the content to be added to the webpage and obtaining an indicator of a location of the second part of the content to be added; generating the first part of the content to be added; inserting the first part of the content to be added and the indicator for the second part of the content to be added into the webpage; accessing the location of the second part of the content to be added; instigating transfer of the second part of the content to be added from the specified location to the browser and combining the transferred second part with the first part in the webpage.

According to a preferred embodiment, the method comprises the browser submitting, without navigating away from the webpage, an XML HTTP request to a web server indicating the content to be added; the web server responding to the request with the indicator for the content to be added.

According to a preferred embodiment, the indicator is inserted into the first part of the content to be added for retrieving an HTML rendering of code defining the second part of the content to be added; preferably using JavaScript running in the webpage to generate code defining the content to be added.

According to a preferred embodiment, a request to update a record of the webpage content maintained by the server, is sent with information on the content to be added. According to a preferred embodiment, in response to the request sent from the browser to the server, the browser receives data that allows the first part of the content to be added to be generated. Preferably, the content to be added comprises one of a gadget and a widget and the indicator comprises a URL. The webpage to which the content is to be added may comprise at least one of a gadget and a widget.

According to further a preferred embodiment, a floating element is generated in the browser comprising a prompt to a user of the browser to indicate the content to be added.

According to a further a preferred embodiment, upon insertion into the webpage of the first part of the content to be added and the indicator, the browser automatically accesses the location specified by the indicator and transfers the second part of the content to be added from the specified location to the webpage.

The inventors have also provided a system for adding content to a webpage loaded on a browser without re-loading the webpage on the browser; in which the content comprises a first part and a second part; in which the system comprises: a rendering function for generating the first part of the content to be added; said browser for inserting the first part of the content to be added and an indicator for the second part of the content to be added into the webpage, accessing a location specified by the indicator, transferring the second part of the content to be added from the specified location to the browser and combining the transferred second part with the first part in the webpage.

According to a preferred embodiment, the system comprises JavaScript for operation in the webpage to generate code defining the content to be added. Preferably, an interface is provided for sending a request to update, with information on the content to be added, a record maintained by the server of the webpage content.

According to a preferred embodiment, the browser is arranged to receive data in response to the request sent from the browser to the server that allows the first part of the content to be added to be generated.

In order to aid understanding of the invention, embodiments thereof will now be described, by way of example, with reference to the drawings in which:

Figure 1 is a schematic of an Internet network to which the invention can be applied;

Figure 2 is a workflow state-diagram according to a known arrangement;

Figure 3 is a wireframe diagram of a typical gadget homepage.

Figure 4 is a workflow state-diagram according to the invention.

Figure 5 is a wireframe diagram of the gadget homepage, showing an "Add gadget" dialog according to the invention.

Turning to Figure 1 , we find a schematic of an Internet-based network to which the invention can be applied. A user (not shown) is able to access web content using a browser running on network PC 2 connected via Internet 4 and Internet service provider

(ISP) 6 to web server 8 and third-party web server 9.

Figure 2 details the basic workflow of a known system for adding gadgets to a user's personalised homepage. According to the known system of Figure 2, while viewing their personalised homepage (e.g. on network PC 2), the user selects a link in a page header

(e.g. by clicking on the link with a PC mouse) or in a menu to add a new gadget to the page. The personalised homepage is closed and the user is taken to a new page (i.e.: a new page is downloaded to the user's network PC) to allow the user to select the gadget they wish to add. The new page typically displays information on a number of gadgets with a selection button (e.g. marked "Add") provided for each gadget mentioned on the page. When the user finds the required gadget they select the appropriate "Add" button to cause the web browser to submit a request back to the server for the selected gadget.

The request may, optionally invoke validation and profile updates at the server. Upon successful completion of these server-side activities the server reloads the user's personalised homepage onto user's network PC 2. Included in the reloaded homepage are all the headers/footers, menus and navigation buttons previously displayed, together with all previously loaded gadgets and, finally, the newly added gadget.

The content of the user's personalised homepage (as illustrated in Figure 3) is displayed in the form of a webpage comprising different areas of text and images. As shown in Figure 3, the user's personalised homepage 10 comprises, by way of example, a header

11 , menu bar 12, various forms 14 for displaying content on individual topics and footer 16. "Add gadget" button 18 is included in menu bar 12. The webpage is suitable for displaying gadgets and may already include one or more gadgets downloaded from web server 8. In the following, we shall refer to the webpage being viewed as the user's personalised homepage.

The process of adding a gadget to the personalised homepage according to a preferred embodiment will now be described further, by way of example, with reference to Figure 4.

Figure 4 details the new workflow according to the invention. While viewing their personalised homepage, the user initiates the add-gadget process, for example, by clicking on a link (e.g. an "Add Gadget" button) in the page header or forming part of a menu. In response to the user's action, the user's browser opens an "Add Gadget" dialogue window in front of the user's personalised homepage, as illustrated in Figure 5 in the form of floating element 20 above the personalised homepage 10.

Floating element 20 forms part of the existing, personalised homepage 10 and may be provided using standard HTML and CSS (cascading style sheets) techniques to create an absolute-positioned HTML element that appears to float above the rest of the page. Note that, although part of user's personalised homepage 10 may be obscured, the user's personalised homepage is still loaded in the browser. As shown in Figure 5, the "Add Gadget" dialogue window comprises floating element 20 (rather than a separate browser window). Floating element 20 comprises add gadget dialogue header 22 and various sections 24, each section dedicated to displaying information about a different gadget. Each section 24 has an "Add" button 26 for allowing the user to select the gadget described in that section.

As indicated above, when the user finds a section 24, forming part of the "Add Gadget" dialogue window, displaying information on the required gadget, they select the gadget by clicking on the "Add" button 26 provided in that section. According to a preferred embodiment, selecting the "Add" button causes the user's browser to submit an XMLHTTPrequest (for example an AJaX request) to add the new gadget to the user profile (that is: a profile of the content of the user's personalized webpage) maintained by web server 8 . The request to add a new gadget to the user profile is sent from the user's browser on PC 2 to web server 8 in the background (i.e. without having to change the content of the user's personalized homepage). The request includes a parameter to uniquely identify the gadget that is the subject of the request. The request may also include (but is not limited to): a column number and reference to a position within the column indicating the position within the user's personalised homepage at which the new gadget is to be added (if supported by the page layout). The request may also include (but is not limited to): a user ID. By way of example, a request to add a gadget containing just a gadget identifier may take the form:

^■ http://www.mvpersonalisedhomepage.corn/addGadget?id=292

The user profile held by web server 8 maintains, for each user, information on the content, including gadgets, currently comprised in the user's personalised homepage. In more detail, the user profile is a collection of data that defines the user's personalized homepage. As a minimum this will comprise: a unique identifier for the user (the User ID) and identifiers for all the gadgets currently added to the user's page including their position. The user profile may optionally also include additional information relating to the user, such as forename, surname, email address etc. When the user replaces the user's personalized webpage in the browser with a different webpage or logs-off from the server, the state of the webpage (i.e. identifying the content) is not stored by the browser.

Advantageously, the user profile allows web server 8 to re-establish the user's personalized webpage, with all the content previously present being re-loaded, once the user wishes to view it once more. As a result of receiving the request, web server 8 updates the user profile with information to identify the added gadget. This information takes the form of an indicator, e.g.: the URL or another suitable identifier of the location where the gadget is hosted. In the following, we shall use the term "URL" to represent all such indicators. Web server 8 may also optionally validate that the gadget to be added is available and valid as, especially when hosted on third-party website 9, the gadget code may have been moved or the third-party server may be unavailable.

The arrival of the request at server 8 may also invoke server-side validation and profile updates. Server-side validation is done using whichever is the preferred web framework for the application. If provided, the validation checks the parameters passed in the request and serves to handle invalid input in a user-friendly manner. Server-side validation advantageously acts as a barrier to malicious users seeking to corrupt a valid request, e.g.: in order to gain access to restricted resources.

Upon successful completion of any server-side validation and profile updates, the server returns a response to the client web browser on user's PC 2 to indicate that the gadget has been added successfully to the user profile. This response acts to inform the browser that the gadget identified in the request is valid and that the user profile has been successfully updated. The response will typically be returned as XML (extensible markup

Language), or JSON (JavaScript Object Notation) or another format that can be parsed by the client browser. If the URL is not already available to the browser via the "Add gadget" dialogue (e.g. as a JavaScript variable), the response may also contain the URL of where the newly added gadget is hosted - this choice is simply a matter of implementation preference. Upon receiving and parsing the response, JavaScript running in the client browser removes the "Add Gadget" dialog thus revealing any parts of the user's personalized homepage that were obscured by the appearance of the dialogue.

As indicated, above, the profile update request and the corresponding response form the server are optional. Where the URL is available to the browser via the "Add gadget" dialogue, the browser may continue without the validation information from the server and without requesting updating of a user profile, if such precautions are seen as unnecessary.

The browser generates a skeleton HTML fragment (often referred to as the "gadget chrome") to contain the gadget. The gadget chrome is generated based on data received either from web server 8 in response to the profile update request or from the "Add g gadget" dialogue. JavaScript running in the user's browser on network PC 2 creates the gadget chrome which comprises the user interface elements immediately surrounding the gadget such as title bar, border, and any links to minimise/maximise/remove the gadget. The server response does not contain the actual HTML code for the gadget chrome so the content of the response cannot be inserted into the webpage immediately, rather the response contains enough information about the gadget-to-be-added for the JavaScript running in the webpage to generate the HTML code of the gadget. As a minimum this information will include the gadget's URL, but may also include gadget title, gadget position, colours for border, title bar etc.

In more detail, within the gadget chrome, the JavaScript creates an HTML "Frame" tag with a source attribute which the JavaScript configures into an appropriate URL that, when invoked, will return an HTML rendering of the gadget code from whichever server it is hosted on (this may be the same server as web server 8, but is more likely to be third- party web server 9). The JavaScript within the browser then dynamically inserts the newly created gadget chrome into the user's personalized homepage in an appropriate position (e.g. at the top of the first column, above all other preexisting gadgets or at the position within the user's personalised homepage indicated in the request ). It will be understood that the precise sequence of actions may be selected according to individual preference. In particular, the source attribute or URL may be combined with the IFrame either before or after the IFrame is inserted into the webpage. Once the chrome is added into the user's personalised homepage the browser renders the content of the IFrame based on the IFrame source attribute and the gadget appears. By inserting just the newly created gadget into the existing page, the browser is able to update the user's personalised homepage by identifying and fetching only the content required for that gadget, whereas, in previous implementations, the server would also have to look up all the gadgets currently present on the user's personalised homepage and return URLs for each of these gadgets for the browser to fetch.

Viewing a gadget as a particular collection of HTML elements, it is clear that the above- described procedure, according to the present invention, will work with any "flavour" of gadget, whether plain HTML, HTML and JavaScript, Flash or other object embedded in the browser and whether hosted on the same domain as the personalized homepage or on a third-party domain,

The invention presented here develops modern "Web2.0" techniques to allow a user to add a gadget to their personalised webpage without having to navigate away from their homepage. According to the invention, the gadget is dynamically inserted into the currently-loaded webpage without the need to reload any part of the page. This has advantages from a usability perspective as it is more intuitive, but also from a website performance perspective as only the new component of the page (the gadget) is sent from the server to the browser, rather than the whole page content being resent and reloaded. As each gadget is likely to come from a different hosting source (i.e.: different third-party web servers) this significantly reduces the number of web requests being made and eliminates requests for content that has been previously loaded and does not require to be refreshed. This has the effect of transferring less data over the network (reducing hosting/bandwidth costs) and increasing the speed at which the updated page will render the new gadget and become usable again.

For example, in an existing personalised homepage there could be twenty gadgets on a page. On addition of a twenty-first gadget, the homepage will, according to conventional arrangements, issue to the server requests for all of the data for all twenty-one gadgets; will reform the entire homepage and will attempt to load all twenty-one gadgets on the page as content. In the proposed invention on the addition of the twenty-first gadget, the homepage will issue to the server one request for only the content required for the twenty- first gadget. Advantageously, according to the invention, the twenty-first gadget is dynamically rendered in the homepage leaving the other twenty gadgets untouched.

A further advantage of the proposed invention is that, as the postulated twenty existing gadgets are untouched, any transient "state" information is maintained - for example if in one of the existing gadgets a user had clicked on links, entered some data or performed a search, the information will be preserved, even if the data has not been saved by the gadget, because the gadget has not been reloaded and therefore retains its "state". In a conventional personalised homepage any transient state information is lost upon adding a new gadget, because all gadgets are reloaded when the new gadget is loaded and so return to their initial state

The above embodiments are to be understood as illustrative examples of the invention. Further embodiments of the invention are envisaged and will be evident to the skilled reader. It is to be understood that any feature described in relation to any one embodiment may be used alone, or in combination with other features described, and may also be used in combination with one or more features of any other of the embodiments, or any combination of any other of the embodiments. Furthermore, equivalents and modifications not described above may also be employed without departing from the scope of the invention, which is defined in the accompanying claims.

In particular, as will be understood by those skilled in the art, the gadget, referred to above, may comprise fixed data or data combined with functionality (in the form of code or script). Moreover, the data may comprise links to further content held on the web server or on one or more different web servers. Validation of the remote gadget code may be preferable, e.g.: in order to improve security, but is not an essential element of the present invention, which is capable of providing improved gadget processing without any validation of remote gadget code. Moreover, server-side validation may be preferable, e.g.: in order to improve security in certain applications, but is not an essential element of the present invention, which is capable of providing improved gadget processing without any server side validation.

As will be understood by those skilled in the art, all references to a browser include any form of software application which enables a user to display and interact with information comprised in a webpage. Examples of suitable browsers include, Mozilla Firefox, Safari from Apple Inc, Opera from Opera Software ASA and Internet Explorer from Microsoft Inc. Although embodiments have been described, above, with reference to a personalised homepage, the invention has broad application to any form of web page into which a gadget or similar is to be downloaded.

As will be understood by those skilled in the art, the invention may be implemented in computer program product software, any or all of which may be contained on various storage media so that the program can be loaded onto one or more general purpose computers or could be downloaded over a computer network using a suitable transmission medium. The computer program product used to implement the invention may be embodied on any suitable carrier, readable by a suitable computer input device, such carrier comprising optically readable marks, magnetic media, punched card or tape, or on an electromagnetic or optical signal.

The text of the abstract is incorporated hereby: a system and method for adding content, such as a gadget, comprising a first part and a second part, to a webpage loaded on a browser without requiring the webpage to be re-loaded on the browser in the process. While keeping the webpage loaded on the browser, the first part of the content is generated and combined with an indicator for the second part of the content. The first part of the content and the indicator are inserted into the webpage. A location specified by the indicator is accessed by the browser and the second part of the content is transferred from the specified location to the browser which combines the transferred second part with the first part in the webpage. The browser optionally generates a floating element that appears on top of the webpage with a prompt to a user of the browser to indicate the content to be added.

Claims

1. A method of adding content to a webpage loaded on a browser; in which the content comprises a first part and a second part; in which the method comprises, while keeping the webpage loaded on the browser: without navigating away from the webpage, opening a dialogue window for user selection of content for adding to the webpage; accepting, in the dialogue window, a request for the content to be added to the webpage and obtaining an indicator of a location of the second part of the content to be added, generating the first part of the content to be added; inserting the first part of the content to be added and the indicator for the second part of the content to be added into the webpage; accessing the location of the second part of the content to be added; instigating transfer of the second part of the content to be added from the specified location to the browser and combining the transferred second part with the first part in the webpage.

2. The method as claimed in claim 1 , comprising the browser submitting, without navigating away from the webpage, an XML HTTP request to a web server indicating the content to be added; the web server responding to the XML HTTP request with the indicator for the content to be added.

3. The method as claimed in any above claim, comprising using JavaScript running in the webpage to generate code defining the content to be added.

4. The method as claimed in any above claim, comprising sending a request to update, with information on the content to be added, a record maintained by the server of the webpage content.

5. The method as claimed in claim 4, in which, in response to the request, the browser receives data that allows the first part of the content to be added to be generated.

6. The method as claimed in any above claim, comprising generating in the browser a floating element comprising a prompt to a user of the browser to indicate the content to be added.

7. The method as claimed in any above claim in which the content to be added comprises one of a gadget and a widget.

8. The method as claimed in any above claim in which the webpage to which the content is to be added comprises at least one of a gadget and a widget.

9. A method of adding content to a webpage loaded on a browser; in which the content comprises a first part and a second part; in which the method comprises, while keeping the webpage loaded on the browser: generating the first part of the content to be added; inserting the first part of the content to be added and an indicator for the second part of the content to be added into the webpage; accessing a location specified by the indicator and instigating transfer of the second part of the content to be added from the specified location to the browser and combining the transferred second part with the first part in the webpage.

10. The method as claimed in claim 9, comprising inserting the indicator into the first part of the content to be added for retrieving an HTML rendering of code defining the content to be added.

11. A computer-readable storage medium containing a computer program or suite of computer programs which, when executed by one or more computers performs the method steps as set out in any of claims 1 to 10.

12. A system for adding content to a webpage loaded on a browser without re- loading the webpage on the browser; in which the content comprises a first part and a second part; in which the system comprises: a rendering function for generating the first part of the content to be added; said browser for inserting the first part of the content to be added and an indicator for the second part of the content to be added into the webpage, accessing a location specified by the indicator, transferring the second part of the content to be added from the specified location to the browser and combining the transferred second part with the first part in the webpage.

13. The system as claimed in claim 12 in which the browser is arranged to insert the indicator into the first part of the content to be added for retrieving an HTML rendering of code defining the content to be added.

14. The system as claimed in any of claims 12 to 13 comprising an interface for sending a request to update, with information on the content to be added, a record maintained by the server of the webpage content.

15. The system as claimed in claim 14 in which the browser is arranged in response to the request to receive data that allows the first part of the content to be added to be generated.