The present invention relates generally to the field of computing, and, more particularly, to web pages that have resizable modules, and where the content displayed in a module is responsive to the relevant context such as the size at which the module is being displayed.
In providing customization of web pages, one goal is to provide users with control over not only the content that appears on such pages, but also the way in which such content is presented. Content is generally controlled by selecting from a library of generalized modules, and by customizing more specific modules such as weather forecasts or stock quotes with settings to control the data displayed within these modules. Conventionally, end-user control over presentation has been primarily limited to the style of the page—e.g., by providing a gallery of themes that can be applied to the pages to change the colors, background images, and so on.
However, in many cases it is desirable to allow users control over a greater number of variables regarding how a page is displayed. For example, a page may be composed of different pieces of content, and the user may wish to move these pieces around the page or to resize them. While some systems may allow certain limited degrees of user control in these areas, the control is generally exercised by communicating the user's selections to the server, and then having the server re-create the page in accordance with the user's choices and re-deliver a newly-created page to the user for rendering on the user's browser. Thus, the user's computer functions essentially as a passive renderer of content, and all processing of a user's choices requires a round-trip to the server. This structure is undesirable for systems in which frequent and dynamic user control over content is expected to take place.
In view of the foregoing, there is a need for a system that overcomes the drawbacks of the prior art.
The present invention provides mechanisms that enable a high degree of user-customization of remotely delivered content, such as a web page. Content is delivered in the form of a web page that comprises one or more columns, as well as “modules” that may be placed in the columns. Each module is composed of various content components, and each component can have an attribute associated therewith that indicates whether the component is to be displayed or hidden at particular column widths. The user may resize the columns, and may move a module from one column to another. When a column is resized, or when a module is placed in a column having a different size than the one in which the module had previously been located, client-side logic causes a given component within the module to be either displayed or hidden depending on whether the attributes associated with that component indicate that the component is to be displayed or hidden at the current column width. Thus, modules are delivered with all of the content components that could potentially be displayed as part of the module, and logic residing at the user's machine causes different components to be displayed or hidden based on the attributes of the module's content and the user-settable column width. In other words, from the user's perspective the module appears to be aware of its rendered context (e.g., the width of the column in which it is located), and can change its appearance to provide the data that is most relevant within this context.
In a preferred embodiment, column widths are classified into discrete categories—e.g., small, medium, large, and extra large. Each content component in a module (e.g., a piece of text) is associated with zero or more attributes that indicate which category(ies) of column widths should cause that component to be hidden. For example, the attributes may indicate that a particular component (e.g., a current stock price in a stock-ticker module) should be hidden if the current column width is small, but should be displayed at any other column width. In a preferred embodiment, categories of column widths may be defined based on the number of pixels that span the width of the column (e.g., any column whose with is less than 251 pixels may be a “small” column).
In general, the user can resize a column to any width, and the current view of the modules will be adapted in accordance with the technique described above. Additionally, a module may be assigned a minimum width, and client-side logic may ensure that the user is not resizing the column to a width that is smaller than the largest minimum width for all modules present in the column. An attempt to resize the column below such a width may result in rejection of the user's attempt to resize the column.
Other features of the invention are described below.
The foregoing summary, as well as the following detailed description of preferred embodiments, is better understood when read in conjunction with the appended drawings. For the purpose of illustrating the invention, there is shown in the drawings example constructions of the invention; however, the invention is not limited to the specific methods and instrumentalities disclosed. In the drawings:
Exemplary Computing Arrangement
The invention is operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the invention include, but are not limited to, personal computers, server computers, hand-held or laptop devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, embedded systems, distributed computing environments that include any of the above systems or devices, and the like.
The invention may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network or other data transmission medium. In a distributed computing environment, program modules and other data may be located in both local and remote computer storage media including memory storage devices.
With reference to
Computer 110 typically includes a variety of computer readable media. Computer readable media can be any available media that can be accessed by computer 110 and includes both volatile and nonvolatile media, removable and non-removable media. By way of example, and not limitation, computer readable media may comprise computer storage media and communication media. Computer storage media includes both volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CDROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computer 110. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. The term “modulated data signal” means a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wired media such as a wired network or direct-wired connection, and wireless media such as acoustic, RF, infrared and other wireless media. Combinations of any of the above should also be included within the scope of computer readable media.
The system memory 130 includes computer storage media in the form of volatile and/or nonvolatile memory such as read only memory (ROM) 131 and random access memory (RAM) 132. A basic input/output system 133 (BIOS), containing the basic routines that help to transfer information between elements within computer 110, such as during start-up, is typically stored in ROM 131. RAM 132 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 120. By way of example, and not limitation,
The computer 110 may also include other removable/non-removable, volatile/nonvolatile computer storage media. By way of example only,
The drives and their associated computer storage media discussed above and illustrated in
The computer 110 may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 180. The remote computer 180 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to the computer 110, although only a memory storage device 181 has been illustrated in
When used in a LAN networking environment, the computer 110 is connected to the LAN 171 through a network interface or adapter 170. When used in a WAN networking environment, the computer 110 typically includes a modem 172 or other means for establishing communications over the WAN 173, such as the Internet. The modem 172, which may be internal or external, may be connected to the system bus 121 via the user input interface 160, or other appropriate mechanism. In a networked environment, program modules depicted relative to the computer 110, or portions thereof, may be stored in the remote memory storage device. By way of example, and not limitation,
Example Web Page with Resizable Columns
In the example of
A module is, in a preferred embodiment, a “draggable” object, in the sense that it can be moved from column to column, or can be moved to a different vertical location within a column. In the example of
The width of a module can be significant, because, in accordance with aspects of the invention, the nature and amount of content displayed depends on the module's current width. For example, a module can be delivered to a web page with plural content components, but each of the content components may be designated to be displayed, or to be hidden, depending on the module's current width. Thus, at any given point in time, the content that is being displayed can be made to depend on the current width of the module, and, therefore, on the column in which the module is currently placed. It should be noted that changing which components of the content are currently being displayed preferably does not require redelivery of the module from the server; rather, the module is delivered with all of the content that it could potentially display, and the decision is made at the user (client) machine as to which components will be displayed or hidden, based on the current width of the module. For example, module 206 shows a list of movies. That module may also contain a list of the last week's gross receipts for each movie on the list, but that information is hidden in
Resizable Column Widths and Column-Width Attributes
In accordance with one feature of the invention, columns may be classified based on their width—for example, a column may be classified as being small (s), medium (m), large (l), or extra large (xl), based on the current number of pixels that span the width of the column. Moreover, the various components of a given module's content may be assigned attributes that indicate whether a particular component is to be displayed or hidden in a particular width category. Thus, a module may contain a content component that is marked to be always displayed; or such a component may be marked to be hidden when the module is in a small column, but to be displayed if the module is in a column having any other size. All content in a module—regardless of the attributes associated with that column—may be delivered to the client's computer, and the client's computer may contain logic that determines, based on the width of the column in which the module is located, whether a particular component of the module's content is to be displayed or hidden.
The classification of columns as being small, medium, large, or extra large, can be defined as in the following example:
At any given point in time, a column may have the attribute col_s, col_m, col_l, or col_xl, indicating that the column's width is small, medium, large, or extra large, respectively. Additionally, each component of a module's content may be assigned one or more of the attributes hide_s, hide_m, hide_l, and/or hide_xl. Each of these attributes indicates that the content to which it applies is to be hidden (i.e., not displayed) when the column in which the module is located has a particular size. Thus, if the module is located in a column that currently has the attribute col_s, then any content in the module that has been assigned the attribute hide_s will not be displayed. Similarly, if the module is located in a column that has the attribute col_m, then any content in the module that has been assigned the attribute hide_m will not be displayed.
The following tables shows, for each type of attribute, whether a content component having that attribute would be displayed in a column having a particular width:
For example,
As noted above, a user may indicate that the view of a web page is to be changed, and the view may be changed by logic that resides on the user's machine. As one example the user may resize a column of the page, which, in turn, may cause the modules in that column to display different information that was displayed at the previous column width.
Initially, the user directs that a column is to be resized (402). For example, the user may use a pointing device to move the boundary of a column horizontally, thereby indicating a change in the column's width. Client-side logic then assesses the minimum required width for the column, by retrieving the minimum widths for each of the modules in the column and finding the maximal value among these minimum widths (404). If the new width that the user has attempted to set is less than the minimum width for the column (406), then the column width is set to the minimum allowable width (408) (or, as an alternative, the resize request may be rejected entirely). If the new width set by the user is not less than the minimum width for the column, then the width of the column is set to the value specified by the user (410). After the new column width has been set (either at 408 or 410), the column's width category (e.g., small, medium, large, or extra large) is set based on which range the column's current width falls into (412). Next, the content that is displayed in each of the modules is adjusted to hide or display content components depending on whether a component's attributes indicate that the component is to be displayed or hidden at the current column width category.
The following are example functions, depicted in the form of Java, which can be used to perform the actions described in
Client-Side Javascript Routines for Resizable Columns
// The following function sets the width and class name on the column being resized
// The following function returns the minimum width for the column being passed by inspecting the columns children
// The following function returns an object that provides properties with the actual dimensions and position
It is noted that the foregoing examples have been provided merely for the purpose of explanation and are in no way to be construed as limiting of the present invention. While the invention has been described with reference to various embodiments, it is understood that the words which have been used herein are words of description and illustration, rather than words of limitations. Further, although the invention has been described herein with reference to particular means, materials and embodiments, the invention is not intended to be limited to the particulars disclosed herein; rather, the invention extends to all functionally equivalent structures, methods and uses, such as are within the scope of the appended claims. Those skilled in the art, having the benefit of the teachings of this specification, may effect numerous modifications thereto and changes may be made without departing from the scope and spirit of the invention in its aspects.