WO2001009767A1

WO2001009767A1 - Method and apparatus for attaching behavior to web page elements

Info

Publication number: WO2001009767A1
Application number: PCT/US2000/019676
Authority: WO
Inventors: Zebadiah M. Kimmel; Gregory M. Pomerantz
Original assignee: Zebware, Inc.
Priority date: 1999-07-28
Filing date: 2000-07-19
Publication date: 2001-02-08
Also published as: WO2001009767A8

Abstract

A method and apparatus are provided for changing a visual appearance of a web page on a display (24). The method includes the steps of associating a predetermined event of the web page (26) with a predetermined visual behavior involving at least some of the plurality of elements (40) of the web page and triggering the predetermined visual behavior of the at least some elements upon detection of the predetermined event (35).

Description

METHOD AND APPARATUS FOR ATTACHING BEHAVIOR TO WEB PAGE ELEMENTS

Field of the Invention

The field of the invention relates to the Internet and more particularly to the display of web pages.

Background of the Invention The Internet has become a global resource for millions of people. Millions of pages of information have become available to users with the only requirement for access being the possession of a computer with a web browser and a connection to the Internet.

Often a user will enter the Internet with only a vague concept and a few key words describing the concept of interest. Search engines such as Yahoo or Northernlight allow the user to easily identify web sites having relevant information.

When a web site is identified, the user may simply review the information, click on a header of the information and a hyperlink may take the user to the desired web site. Upon arriving at the web site, a web page of further information is downloaded to the user. Often the web page provides other hyperlinks to other web pages either within the same web site or within other web sites.

While information recovered through the Internet is useful, the web page presentation format is relatively limited. Typically a web page is arranged in a paragraph format containing text or graphics and, possibly, one or more paragraph headers providing hyperlinks to other webpages.

Further, early web page browsers (e.g., Netscape 3.x, Internet Explorer 3.x, etc.) did not have the capability to place web page elements, such as text or images, at precise x, y, z positions (where z may be defined as a third or stacking dimension) . Early web page browsers also did not have the capability of modifying elements after the elements had been integrated into a web page; for example moving the elements or changing their content.

More recently available web browsers (e.g., Netscape 4.x, Internet Explorer 4.x, or higher) have been provided with dynamic HTML capabilities, which allows a limited capability for web page elements to be moved and changed in various other ways. Because of the importance of the Internet and the importance of the information available through the Internet a need exists for a means of dynamically modifying web page materials once they are downloaded to the user.

Summary A method and apparatus are provided for changing a visual appearance or audio presentation of a web page presented on a display. The method includes the steps of associating a predetermined event of the web page with a predetermined visual behavior involving one or more of the plurality of elements of the web page and triggering the predetermined visual behavior of the at least some elements upon detection of the predetermined event . Brief Description of the Drawings FIG. 1 is a block diagram of a system for changing the appearance of a web page in accordance with an illustrated embodiment of the invention; FIG. 2 is a block diagram of a lookup table that may be used by the system of FIG. 1; and

FIG. 3 is a block diagram of a behavior processing protocol that may be used by the system of FIG. 1.

Detailed Description of a Preferred Embodiment

FIG. 1 depicts a system 10, which allows elements of a web page 26 to be dynamically changed based upon a set of attributes provided by a web site creator and the needs of a web page user. The web page creator working through a terminal 14 and keyboard 16 may create a web site 12, through which a number of web pages may be available. A user working through a terminal 20 and keyboard 22 may download the web page 26 to the terminal 20. Downloaded with the web page 26 may be one or more JavaScript files 36. The JavaScript files 36 may be used as described below to dynamically change the appearance of the web page 26 or an audio presentation associated with the web page 26. In general, the JavaScript code of the JavaScript files 36 does not act alone. There may also be a relatively complex interaction among HTML, dynamic HTML (DHTML) and JavaScript code that provides, for example, a drag-and- drop editing environment for the page. Java applets may also be involved. For example, a word processing application m the form of a Java applet may be provided as part of the downloaded web page for textual processing .

More specifically, the JavaScript code of the Java files 36 may be used to define a behavior of specific elements (e.g., 40) of the web page 34. Stated in another way, the JavaScript code are a set of protocols which define behavior files 44, 46 (FIG. 2), which may be attached to page elements thereby allowing the actions and interactions of the elements to be described and executed in a flexible and autonomous fashion. The behaviors may all be relayed to the browser in a single file, or separated among multiple files .

As used herein the behavior of an element of a web page means a set of steps performed upon the occurrence of a predetermined event and which results in a change in an audio presentation or the physical appearance of at least some element of the web page, where "appearance" can include, for example, the (x,y) coordinate of the element, the z-index (stacking order) of the element, the element's width and height, the element's background color, the element's foreground color, whether the element is visible or invisible. Appearance could also include the addition of a border place around the element, as well as a change in the actual content of the element, for example, a modification of the text displayed in a text element, or a modification of the image displayed in an image element . The predetermined events triggering the behaviors may be one or more of any of a number of possibilities. Events in general may be detected by an event detector 35, which functions as a gateway to specific behaviors. For example, activation of a particular key or any of set of keys on a keyboard 22 may trigger a first behavior. Dragging an element across the webpage 26 may trigger a second behavior when the element comes within a certain distance of a second element. Clicking on an element of the web page 26 using a cursor 28 may trigger a third behavior. The detection of certain textual information on the web page 26 may trigger a fourth behavior. The size of the text of the web page 26 may trigger a fifth behavior. The completion of downloading of a web page may trigger a sixth behavior, and so on. The events listed herein are not an exhaustive list of the actions contemplated. Under the illustrated embodiment, the event detector 25 may run in the background monitoring the web page and any activity associated with the web page. A set of templates in a lookup table 32 may define triggering events and an associated behavior. The event detector 25 constantly processes web page information and compares that information with triggering events within the lookup table 32. When an event is detected, the associated behavior is triggered. For example, clicking may be used as a trigger for a particular behavior. The act of clicking on an element may cause another element to disappear. Clicking on the element may result in execution of a MIDI element that changes volume or tempo of a presentation. Alternatively, clicking on an element may trigger fetching information for display on the web page or changing the color of other elements. As used herein, clicking on an element means placing a cursor over the element and activating a selection button associated with the cursor.

FIG. 2 shows a lookup table of behaviors that may be defined for any number of elements (e.g., #1-N, M, A, B, etc.). Behaviors may be triggered by any predefined event (e.g., clicking on an element, by pressing a key, by proximity, etc.). As an alternative to a behavior associated with any one element, any of a multitude of behaviors may be triggered by an event related to a first element which in turn triggers the behavior associated with a second element (e.g., as shown in FIG. 3) .

For example, if the cursor 28 were positioned over X]_y_Z]_, then the CPU 30 would determine that the cursor

28 was over element #1. The CPU 30 would then look at the nature of the triggering event from the switch 38. If the triggering event were a single click of the switch, then the CPU 30 would execute behavior subroutine "CALL#1" associated with behavior file 44. Alternatively, if the triggering event were a double-click on the element 40, then the CPU 30 may identify behavior file 50 if FIG. 3. As should be noted from FIG. 3, the behavior file 50 is structured to affect elements #1 and #2. The net effect is that a double click on element #1 would cause behavior subroutine "CALL#1" to provide a predetermined visual behavior with regard to element #1 and behavior subroutine "CALL#2" to provide a predetermined visual behavior with regard to element #2.

It should be appreciated that CALL#1 and CALL#2 could be implemented as substantially the same program and function as correlation programs which impose the same behavior on different elements. IT should also be appreciated that CALL#1 and CALL#2 could be different and together make up a multi-element behavior protocol wherein clicking on the first element may impose a first behavior on the first element and a different, distinctly different behavior on the second element.

It should be appreciated in this regard that any number of other elements may be affected by clicking on a first element. Such a utility has great value in the case of a web page and the display of information. For example, clicking on a visible icon shown on the display 26 may be used to cause a hidden menu to appear (or visa versa) . Turning now to the behavior subroutines, an explanation will be provided of the execution of those subroutines. While the discussion which follows will focus almost exclusively on the method steps, it should be understood that the discussed steps may be executed as discussed above using the disclosed structure.

The means by which an element of a web page may be modified varies from browser to browser. In Netscape 4.5, for example, the JavaScript code (between the dashes) --E . left=50~- changes the x-coordmate of the page element labeled "E" . The equivalent code m Internet Explorer 4.0 is --E . style .posLeft=50-- .

The reader should note that to avoid confusion dashes will sometimes hereinafter be used to delineate code, especially where quotation marks may appear within the code. Quotation marks will sometimes be used within the following text to delineate terms used within code. Periods added to the end of code sequences should be understood to only act as a terminator of the sentence presenting the code and to form no part of the code.

As browser technology evolves, it is to be expected that the means by which web page elements are modified will continue to evolve as well. The present inventive method is independent of the means by which web page elements are modified, although it does require that such means exist. The code in this document should thus be interpreted as pseudocode unless otherwise indicated.

Typical properties of web page elements which may be modified include: location (as defined by x, y and z coordinates, where z indicates a stacking of elements), width, height, visibility, background color, foreground color, and content (e.g., the image or text constituting the displayed portion of the element). This list is not exhaustive.

The nature of the predetermined behavior of elements will be discussed next. As suggested above,

"behavior" may be further defined by the protocol which controls how one or more properties of an element change over time and/or over space, either spontaneously or in response to various stimuli, and how the element may change the properties of other elements, or indeed any aspect or attribute of the web page that contains it. An element may possess multiple behaviors, and a single behavior may be applicable to multiple elements. Following are a limited number of examples of behaviors that may be defined by the protocols 44, 46, 50. Following the examples of behavior, a limited number of examples will be offered of protocols that may be used to achieve those behaviors .

As a first example, the element 40 may move slowly in a straight line from location (xl, yl) = ( 10, 20) to location (x2 , y2 ) = (50, 80) and then back to (xl,yl). The element 40 may then repeat the cycle in a spatially and temporally cyclical pattern.

As a second example, when the element 40 is clicked, the element disappears. When the element is again clicked, the element 40 reappears.

As a third example, the element bounces off the boundaries of the web page, so that it looks like a tennis ball bouncing around the browser window walls. As a fourth example, the element 40 follows the mouse cursor 28 around the window. As a fifth example, the element 40 is replaced by the words "BIG JON" whenever the cursor 28 moves over it. As a sixth example, the element 40 is confined to lie at all times inside the rectangle defined by upper-left corner (10,20) and lower-right corner (50,80). In general, then, a behavior describes the action that a page element should take, and the relevant triggers of the actions (if any) .

Since behaviors operate over time and space, they require a means of measuring time and space. The

JavaScript code to measure the browser window width in Netscape 4.x has the form (between the dashes) -- window. innerWidth ;-- . The equivalent code in Internet Explorer 4.x has the form --document . body. clien tWidth ;-

In general, it is possible to gain information about, for example: the size of the browser window, the size of a page element, the location of a page element, the z-index (stacking order) of a page element 40. This information may be used by the behavior protocol to decide where an element 40 should be positioned relative to the enclosing browser window, where it should be stacked, how big it should be, and so on. Since the behavior protocol first determines its environment and then adapts itself to operate within that environment, the behavior protocols are independent of both the platform and system upon which they operate.

Time will be considered next. In general, it is possible to measure time directly, using the JavaScript code as follows:

now=new Da te () ; now. getTime () ; .

This code returns the current time, measured in milliseconds from a past reference marker.

It is also possible to set actions to occur at certain times in the future. For example, the code (between the dashes) — s etTimeout ( "futuro () " , 200) — instructs the browser to execute the code routine "futuro" as a single occurrence two-hundred milliseconds in the future. The following code (between the dashes) --setlnterval ( "futuro () " , 200) ;-- instructs the browser to execute "futuro" once every two-hundred milliseconds for an indefinite number of occurrences.

Methods of implementing the behaviors will be considered next. As a first example, a behavior protocol (e.g., activated by CALL#1 of FIG. 2) may be provided which moves an element "E" 40 diagonally across the browser window 24. (It is assumed that functions move_element , get_x and get_y are appropriately defined. ) The protocol may have the form:

code= "move_elemen t (E, get_x (E) +1 0 , get_y (E) +1 0) ; " ; setlnterval (code , 200) ; .

While this example is relatively simple, it lacks flexibility. Even in the trivial example shown, it would be difficult to move any element other than "E". For example, to move "F" we would need to rewrite each line of "code", which is cumbersome.

In this and following examples, calls to " setlnterval () " can be replaced with sequential calls to " setTimeout () ", for example as follows:

code= "move_elemen t (E, get_x (E) +1 0 , get_y (E) +1 0) ; set Timeout ( ' code ' , 200) ; "; set Timeou t ( "code ", 200) ; .

As is apparent, this is, in some cases, also somewhat cumbersome, so the use of " setln terval () " is generally preferred.

As another example, behaviors may be defined as object-oriented function calls, attached to page elements 40 as needed, and executed at intervals. The following code moves element "E" 40 diagonally across the browser window 26. functi on behave () { thi s . set_x (this . get_x () +10) ; this . set_y (this . ge t_y () +1 0) ; } E . execute_behavior+behave; setln terva l ( "E . execute_behavior " , 200) ; .

In this case, the "behave ()" function is written independently of any particular element. Attaching the behavior to another page element "F", requires that the last two lines of code be modified to recite "F" instead of "E" . Since we can make the contents of the "behave () " function arbitrarily complicated, but extend the behavior to other elements easily, this is a reasonably efficient option. However, it requires a new call to " setlnterval () " for every element created, and so is not the most preferred method. Note that the code of this example relies on object-oriented features of JavaScript, which are available in both Netscape and Internet Explorer.

As a further set of examples, behaviors are defined as object oriented function calls. Each element 40 on the page is assigned a collection of behaviors (possibly empty) . The behaviors are then called for each element 40 at intervals.

First, we defined two behaviors as follows:

functi on move_diagona l_behavior () { this . set_x (thi s . get_x () +1 0) ; this . set_y (this . get_y () +1 0) ;

} fun cti on make invisibl e behavi or () { this . set_visible (false) ; }

Next, we attach the behaviors to page elements "E" and "F" as follows:

E. cli ck_behavior=move__di a gonal_behavior ;

E. double_click_behavior=make_invisible__behavior ; F. click_behavior=make_invisible_behavior;

F . spontaneous_behavior=move_diagonal_behavior; .

This code suggests that "F" should spontaneously move diagonally in the window. The code also suggests that when the user places the cursor 28 on "F" and activates the switch 38 (i.e., clicks on "F"), it should become invisible. Further, the codes suggests that when "E" is clicked on, it should move diagonally; and that when "E" is double-clicked, it should become invisible .

To process the behaviors, support structures are required that are similar to the following pseudocode:

function handle_spontaneous_behaviors () { for each element X on the page execute X. spontaneous_behavior;

} setlnterval ("handle spontaneous behaviors () " ,200) ;

function handle_events () { for each event and each page element X: if (event is a mouse cli ck on elemen t X) execute X. click_behavior () ; if (event is a double-click on element X) execute X. double cli ck behavior () ;

The central event handler of the CPU 30 activates appropriate element behaviors when events (such as mouse clicks) occur. The

"handle_spontaneous_behaviors ( ) " function, which executes at intervals, makes sure that spontaneous behaviors are handled.

As another option, each element possesses any array of behavior functions, so the multiple behaviors may be triggered by the same stimuli (as suggested by FIG. 3) . The following code segment may be regarded as an example of this concept.

E . click_behavior=new Array (move_diagonal_behavior, make_invisible_behavior) ; .

This code suggests that when "E" is clicked on, it should move diagonally and also become invisible. The supporting routines, such as

"handle_spontaneous_behaviors" and "handle_events" need to be written to execute each behavior in the relevant array, but this is a trivial exercise for one skilled in the art . This example allows a number of behaviors to be imposed on a single element. It should be apparent that such behaviors, m the proper circumstances, could be adapted to execute sequentially or simultaneously.

The following example, because of its flexibility, is the most preferred. The example offers a strategy for designing general purpose behavior functions where actions are specific to the element to which they are applied. A behavior may be easily tailored to an individual element 40, simply by accessing information belonging to that element 40. For example, consider;

function move_behavιor () {

this . set_x (thi s . get_x () -1 0) ; else this . set_x (this . get_x () +1 0) ;

} ■ This behavior moves an element one way or the other, depending upon where the element is located. This gives behaviors great flexibility; although each behavior can apply to many different elements, it can produce different element-specific actions depending on the properties of the element.

The dot-operator used above, represented by a period, is a standard programming construct m object- oriented languages. It is used to draw a relation between an object and something "owned by" or "part of" the object. For example, x. spontaneous_behavιor = move_dιagonal_behavιor means that X now "owns" or "contains" a property called spontaneous_behavιor that references, or is equivalent to, the previously defined function "move_dιagonal_behavιor" . Execute X. spontaneous-behavior means that X executes, or runs,

1 ^ the code contained in "spontaneous_behavior" using information, such as (x,y) position, that also belongs to X.

It can be seen that the dot-operator affords great flexibility. For example, we can write:

X. spontaneous_behavior = grow_larger. This will immediately change X' s spontaneous behavior without requiring any other code changes.

The above example can be generalized to provide tailored behavior functions based upon any property associated with a specific element, such as its color, stacking order, element type, size, orientation, or relationship to other elements.

The above examples provide great flexibility in manipulating and modifying web pages. They also vastly increase the amount of information that may be incorporated into a single web page.

A specific embodiment of a method and apparatus for changing the visual appearance of web page according to the present invention has been described for the purpose of illustrating the manner in which the invention is made and used. It should be understood that the implementation of other variations and modifications of the invention and its various aspects will be apparent to one skilled in the art, and that the invention is not limited by the specific embodiments described. Therefore, it is contemplated to cover the present invention and any and all modifications, variations, or equivalents that fall within the true spirit and scope of the basic underlying principles disclosed and claimed herein.

Claims

1. A method of changing a visual appearance or audio presentation of a web page presented on a display of a computer terminal, such method comprising the steps of: associating a predetermined event of the web page with a predetermined visual behavior involving one or more of the plurality of elements of the web page; and triggering the predetermined visual behavior of the one or more elements upon detection of the predetermined event.

2. The method of changing a visual appearance of a web page as in claim 1 further comprising defining the predetermined event as a mouse click on the one or more elements.

3. The method of changing a visual appearance of a web page as in claim 1 further comprising defining the predetermined event as a proximity of the at least some of elements to other elements.

4. The method of changing a visual appearance of a web page as m claim 1 further comprising scaling a relative size of the object of the predetermined visual behavior.

5. The method of changing a visual appearance of a web page as n claim 1 further comprising determining a position of the one or more elements within the display.

6. The method of changing a visual appearance of a web page as m claim 1 further comprising determining a stacking position of the one or more elements within the plurality of other elements of the web page.

7. The method of changing a visual appearance of a web page as m claim 1 further comprising determining a relative s ze of the one or more elements based upon the display.

8. The method of changing a visual appearance of a web page as m claim 1 wherein the predetermined visual behavior further comprises executing a plurality of visually distinctive steps based upon a set of predetermined temporal intervals.

9. The method of changing a visual appearance of a web page as m claim 1 wherein the step of triggering the predetermined visual behavior further comprises imposing the predetermined visual behavior on at least some other elements of the plurality of elements.

10. The method of changing a visual appearance of a web page as m claim 1 wherein the step of triggering the predetermined visual behavior further comprises triggering a predetermined visual behavior of a second element in response to clicking on the first element.

11. The method of changing a visual appearance of a web page as in claim 1 wherein the predetermined visual behavior further comprises a temporally cyclic pattern.

12. The method of changing a visual appearance of a web page as in claim 1 wherein the predetermined visual behavior further comprises a spatially cyclic pattern.

13. The method of changing a visual appearance of a web page as in claim 1 wherein the one or more elements further comprises one of a text element, an image element, a multimedia element and a control element.

14. The method of changing a visual appearance of a web page as in claim 1 wherein the predetermined visual behavior further comprises causing the element to disappear .

15. The method of changing a visual appearance of a web page as in claim 1 wherein the predetermined visual behavior further comprises causing the element to move in an incremental manner.

16. An apparatus is provided for changing a visual appearance of a web page on a display of a computer terminal, such apparatus comprising: means for associating a predetermined event of the web page with a predetermined visual behavior involving one or more of the plurality of elements of the web page; and means for triggering the predetermined visual behavior of the one ore more elements by detecting the predetermined event.

17. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined event further comprises a mouse click on the one or more elements.

18. The apparatus for changing a visual appearance of a web page as in claim 17 wherein the predetermined event further comprises a proximity of the one or more elements to at lease some other elements.

19. The apparatus for changing a visual appearance of a web page as in claim 16 further comprising means for scaling the one or more elements for the predetermined visual behavior.

20. The apparatus for changing a visual appearance of a web page as in claim 16 further comprising means for determining a position of the one or more elements within the display.

21. The apparatus for changing a visual appearance of a web page as in claim 16 further comprising means for determining a stacking position of the one or more elements within the plurality of other elements of the web page.

22. The apparatus for changing a visual appearance of a web page as in claim 16 further comprising means for determining a relative size of the one or more elements based upon the display.

23. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined visual behavior further comprises means for executing a plurality of visually distinctive steps based upon a set of predetermined temporal intervals.

24. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the means for triggering the predetermined visual behavior further comprises means for imposing the predetermined visual behavior on at least some other elements of the plurality of elements.

25. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the means for triggering the predetermined visual behavior further comprises means for triggering a predetermined visual behavior of a second element in response to clicking on the first element.

26. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined visual behavior further comprises a temporally cyclic pattern.

27. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined visual behavior further comprises a spatially cyclic pattern.

28. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the first element further comprises one of a text element, an image element, a multimedia element and a control element.

29. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined visual behavior further comprises means for causing the element to disappear.

30. The apparatus for changing a visual appearance of a web page as in claim 16 wherein the predetermined visual behavior further comprises means for causing the element to move in an incremental manner.

31. An apparatus is provided for changing a visual appearance of a web page on a display of a computer terminal, such apparatus comprising: an event processor adapted to detect a predetermined event of the web page; and a behavior processor adapted to provide a predetermined visual behavior involving at one or more of the plurality of elements of the web page based upon detection of the predetermined event by the event processor.

32. The apparatus for changing a visual appearance of a web page as in claim 31 further comprising a scaling processor adapted to scale a relative size of the one or more elements for the predetermined visual behavior.

33. The apparatus for changing a visual appearance of a web page as in claim 31 further comprising a position determiner adapted to determine a position of the one or more elements within the display.

34. The apparatus for changing a visual appearance of a web page as in claim 31 further comprising a stacking processor adapted to determine a stacking position of the one or more elements within the plurality of other elements of the web page.

35. The apparatus for changing a visual appearance of a web page as in claim 31 further comprising a size processor adapted to determine a relative size of the one or more elements based upon the display.

36. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the predetermined visual behavior further comprises a plurality of behavior protocols associated with a single element and adapted to execute a plurality of visually distinctive steps based upon a set of predetermined temporal intervals .

37. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the cursor further comprises a correlation program adapted to impose the predetermined visual behavior on at least some other elements of the plurality of elements.

38. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the cursor further comprises a multi-element behavior protocol triggering a predetermined visual behavior of a second element in response to clicking on the first element.

39. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the predetermined visual behavior further comprises a temporally cyclic pattern .

40. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the predetermined visual behavior further comprises a spatially cyclic pattern.

41. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the first element further comprises one of a text element, an image element, a multimedia element and a control element.

42. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the predetermined visual behavior further comprises a behavior protocol adapted to cause the element to disappear.

43. The apparatus for changing a visual appearance of a web page as in claim 31 wherein the predetermined visual behavior further comprises a behavior protocol adapted to cause the element to move in an incremental manner.