Method and system for representing a web element for storing and rendering into other formats

[0002] This patent application claims priority from and is a division of patent application bearing Ser. No. 09/394,120, filed on Sep. 10, 1999 now abandoned, entitled “Method For Converting Two-Dimensional Data into a Canonical Representation”.

[0003] This invention relates to customization of data into a representation suitable for presentation in different formats, including aural and limited visual formats. This invention relates specifically to selection of data in a HyperText Markup Language (HTML) so that it is suited for rendering in another form such as an audio format or a visual format other than the source format.

[0004] A great deal of valuable information is now available in HTML format. However, HTML is primarily designed for access in a specific visual context, namely by means of a graphical user interface of the type designed for use with web browsers. There is a need to make HTML data accessible via other interfaces and readers. The invention herein described is intended to address an important aspect of that need.

[0005] According to the invention, in a computer network system, a method is provided for converting two-dimensional data, particularly information in HTML format, into a canonical representation for rendering in aural or other visual forms wherein each element of interest is selected based on it being part of a mathematically regular expression, namely any expression that can be parsed in a tree. To perform the selection, the container of the element is located, and then the local route of the element within the parsed tree is followed, such that a signature of the element built upon this identification can be constructed and stored for later use in retrieving and rendering the value of the element of interest. As a further refinement of the invention, the method searches for repeated elements and then stores only one of the selected repeated elements, such as the first repeated element.

[0006] It is an important recognition of the present invention that HTML pages can be represented by regular expressions. It is also an important recognition of the invention that only elements need to be selected, and that the actual values of the elements need not be selected, thus permitting the values to be dynamically updated and rendered with the current value.

[0007] The invention will be better understood by reference to the follow in the detailed description in conjunction with the accompanying drawings.

[0008] FIG. 1 is a block diagram of a system according to the invention in which a design tool is employed to select and identify elements HTML pages.

[0009] FIG. 2 is a block diagram illustrating in greater detail the functional relationships of identification, extraction, and translation.

[0010] FIGS. 3A and 3B are a flow chart of a method according to a specific embodiment of the invention.

[0011] FIG. 4 is a block diagram of the relationship of HTML pages and processing triplets.

[0012] Referring to FIG. 1, the invention is explained in the context of a web page in the world web. On the web, an interactive designer tool 10 according to the invention is employed to customize web pages 11 written in a mathematically regular form such as HTML found on a source web site located on a host server 12 after first copying the desired web pages to a storage means 14. The storage means 14 may be a shared persistent store such as a bank of disk drives or other database storage means with persistent storage. By using the designer tool 10 as hereinafter explained, designers can select and identify and customize information from an existing web application without disturbing the source web application. To customize each web page, the designer determines what text and prompts will be rendered to the user, typically a telephone caller if an aural interface is the target, what input data the caller needs to provide for input components, and what order the caller will visit any audio-enabled pages. The designer creates design objects 16. The output of the design process in a particular embodiment is audio metadata. This metadata is represented via a script, specifically herein called collections of elements, which are stored in a database of the storage means 14. The runtime engine hereinafter described uses this script to enable callers to interact with an audio enabled Web site.

[0013] The interactive designer tool 10 in operation acts like a web browser to the host Web server 12 in that it queries and downloads the site's HTML pages 11. The designer/user of the tool 10 decides which pages to audio-enable. For each such page, the designer selects the information that will be rendered at runtime. The designer may create vocal prompts that will ask the caller to provide data for the pagers input controls. The designer may further decide what words and phrases will be recognized as proper responses from the caller in response to each prompt. For example, if the Web page has a drop-down selection list for choosing a color, the prompt could be “Please choose red, white, or blue.” The designer specifies that the caller should respond by saving either “red,” “white,” or “blue.”

[0014] The designer also specifies the audio control flow. Within a single Web page, the intra-page flow determines the order that text will be read and which prompts will be issued to the caller. Inter-page flow determines the order that the caller will visit the audio-enabled pages of the site. The audio path followed through a Web site is typically similar to a visual path using a visual Web browser.

[0015] The designer tool 10 is provided with components to create a set of design objects that are kept in the storage means 14. These objects encapsulate all the information necessary to audio-enable a Web site. The designer tool can retrieve these objects from the storage means 14, update them, and save them back into the storage means.

[0016] Upon saving the design objects 16 to the storage means 14, the designer tool 10 invokes a generator 18 to create textual script written in a specification language called herein AML. The AML scripts encode information extracted from the design objects 16 that will be rendered at the run time. Each script contains the WJRL of its corresponding Web page. Since the URLs and AML scripts are used at run time. AML scripts are also kept in the storage means 18. The values on the web pages are expressed using AML.

[0017] A. Component Selection, Identification and Customization

[0018] During a design process, component selection and customization consists of the following steps:

[0019] 1. Selection of components from an existing HTML page;

[0020] 2. Identification of selected components from the HTML page;

[0021] 3. Customization of selected components from the HTML page;

[0022] 4. Specification of the selected and customized components via a language that is functionally complete in expressing any selection and customization required.

[0023] The above technique of design is controlled and implemented by the user interface, freeing the designer from the details and the underlying algorithms that are required to correctly select, identify and generate AML scripts.

[0024] B. Selection and Identification of Components from HTML Pages

[0025] FIG. 2 is a conceptual depiction of a runtime system for selecting and rendering data from an HTML page into a target viewing aural rendering language. The web pages 11 are retrieved from the host web server 12 into a translator 20, which in turn retrieves corresponding AML documents 21 from the shared persistent store 14 to produce WML pages 23 and runtime objects 24. After a designer 13 has selected some data, henceforth called a “component” 17, from an HTML page 11 by pointing and clicking on it, the designer tools 10 (FIG. 1) automatically generate a unique signature that is subsequently employed by the runtime environment via the runtime engine 22 in order to extract real time data from the HTML page. The runtime engine 22 interfaces with the phone server 26 and the user 28. The signature of the component 11 may comprise one or more of the following:

[0026] 1. The position of the component 17 on the HTML page. Consider the following simple HTML page (This code will produce an HTML page if executed by a web browser operating on a client computer):

[0027] In the above example, if a designer 13 (FIG. 1) selects the entire table T1 and if it is always the first table on the HTML page, then table T1 can identified by its position as “1” with the signature being the symbol representing “the first table on the HTML page.”

[0028] 2. Attributes of the component. Consider the above example in which the second row of table T1 contains form Form1. If a designer 13 selects Form 1, then it can be uniquely identified by its action attribute. If this is the only form with value WEBBOT-SELF for this attribute then the identifier of this attribute-value pair becomes the signature of Form1.

[0029] 3. The ancestors of the component, i.e. the identification of other components on the page which associate with the component. Unlike the foregoing cases where the signature of a component is determined by its one of properties such as position or attribute-value pair, the signature of a component could depend on the identification of other components in the HTML page. Any HTML page can be represented by a regular expression. For example, consider the above HTML page. If the syntax A (B) is used to imply that component A contains B within the scope of component A, then the above simple HTML page can be expressed as HTML (T1 (tr tr (td (Form 1 (C1 V1 R1))))). Furthermore, the identification of a given component in a mathematically regular expression depends on the ancestor components that contain the given component. Consequently, the identification of Form1 depends on the identification of the enclosing components such as HTML, Table T1, and so on. By recursively identifying these enclosing elements, one can uniquely identify form Form 1. For example, Form1 can be uniquely identified by identifying container T1, second tr in T1 and td with in the second tr. Thus, form Form1's signature is: “look for highest level container HTML, within HTML container look for container table T1, with in container T1, look for second rots container and with in this container look for first cell which contains torn Form1”

[0030] 4. The “left” siblings of the component, in addition to the identification of its ancestor components. The identification of left siblings is required in the case when one or more left siblings of component repeats a number of times. In this case, it is necessary to identify these left siblings as well. Consider the following HTML page:

[0031] In the above example, the second row of Table T1 contains an initial set of columns that contain digits in them. If the number of these columns varies from one instantiation to the next instantiation of the HTML page, then the identification of form Form1 requires identification of these repeating columns. Thus, form Form1 can be uniquely identified by identifying container T1 that contains second <tr>which in turn contains repeating <td>'s containing digits (12.5 & 2.5, respectively) and the final <td>containing form Form1. In this case, the signature of component Form1 will be: “look for highest level container HTML, within HTML container look for container table T1, within container T1, look for second row container and within this container look for container <td> that repeats ‘n’ times, followed by last container <td> that contains form Form 1”.

[0032] 5. A pattern extracted from the HTML page. Consider the previous example. If Form1 is always expected to contain three inputs, then these inputs provide the identification for the form. Thus its signature is: “look for a form that contains three inputs with pattern for the first input is:

[0033] <input type=“checkbox” name=“C1” value=“ON”>.

[0034] the pattern for the second input is:

[0035] <input type=“radio” value=“V1” checked. >”.

[0036] Sometimes the final signature of a component may consist of a combination of methods described above. However, once the signature of the component is established, it is considered the canonical representation, that is, the representation which uniquely and most compactly identifies the component and its associated attributes.

[0037] FIGS. 3A and 3B provide an overview of the identification algorithm that implements the methods according to the invention. The input to the identification algorithm is a component selected by a designer and the output of the algorithm is a script in a target language, a form of markup language, herein called AML (described in the next section) that specifies the complete signature of the selected component.

[0038] First a component of the target language, in this case the AML language, is created for the source language component, in this case the HTML component, as selected by the designer (Step A). Then the values for the attributes of that AML component are obtained or retrieved (Step B). The attributes are tested to determine if the attributes of the components uniquely specific, the component in its parent container (Step C) and continues. If not, then a sequence of “left” sibling components is selected such that the sequence followed by the component has a unique signature in the context of the parent container. This sequence is then included in the component specification (Step D) With the uniqueness specification of components, all other components are tested to determine if they need to be specified at this level (Step E). If so, then the specification of the other components of interest at this level is obtained (Step F).

[0039] The following steps focus on uniqueness in the specifications. Having thus gotten the specification of separately specified components, the specifications are each tested to determine if the subject specification is part of a case-type specification at the current level (Step G). If it is, then the specification for all other patterns are retrieved or obtained and an identification switch component (IdSwitch) is defined which is used to enclose the patterns so obtained (Step H). Each specification is thereafter tested to determine if it is part of a repeating pattern (Step I). If so, then an identification loop (IdLoop) is defined which encloses the current specification (Step J). The specification is then tested against other specifications on the same HTML page to determine if the specification thus defined is unique (Step L). If not, then the type information about the ancestor containers is retrieved and enclosing AML components are defined to reflect the containment property in the HTML page (Step M). The process cycle is repeated for all AML components selected by the designer until done (Step M), finally outputting an AML script (Step O).

[0040] A computer language according to the invention must meet certain requirements in order to specify the identification and customization steps of the selected components. The language used according to the invention, herein called AML complies with these requirements. Additionally, this language is also XML compliant.

[0041] In order to correctly express any combination of methods employed for identification (as per the algorithm detailed in connection with FIGS. 3A and 3B), the target markup language must be able to specify the following:

[0042] It should be able to specify HTML elements along with all their relevant attributes.

[0043] It should be able to describe any regular expression.

[0044] It should have advanced constructs such as switch, case, loop, etc that are useful in describing alternate and repeating components, respectively.

[0045] It should be able describe concatenation of HTML elements.

[0046] It should be able to describe string pattern.

[0047] The AML language according to the invention meets the above requirements. It views an HTML page in terms of its components as herein defined: forms, tables, and lists. A description of a component is split into three parts:

[0048] Identification: The identification is used to identify various components on the HTML page.

[0049] Extraction: The extraction is used to specify, how data is extracted from the components selected.

[0050] Translation: The translation specifies how the components are rendered over the phone.

[0051] All the identifications, extractions, and translations for the components on a given HTML page are collectively placed in a dialogue.

[0052] FIG. 4 is a diagram chart illustrating the association of identification/extraction/translation triplets with each HTML page and the association of flow elements with each url/action transition between HTML pages. An HMTL page 36 has associated HTML pages 38 and 40 to which it is nominally a parent. Each HTML page is connected by a url/action transition 50, 51, 52. Moreover, each identification/exraction/translation triplet 30, 32, 34 is associated with a corresponding HTML page 36, 38, 40 by a url/action transition 54, 55, 56. However, there is also the flow of information among the triplets along information paths 58, 59, 60. The following sections describe in greater detail the components, identification methods, extraction methods and the underlying grammer that are embodied in a specific example of AML according to the invention.

[0053] C. Identification & Extraction

[0054] A component is identified using the element “component”, where the value for all attribute value pairs inside any element is herein rendered in quotations to set it off as a value. Thus a row can be identified as component A as follows:

[0055] <component name=“A” type=“tr”></component>

[0056] The type of a component corresponds to an HTML tag.

[0057] Components may recursively contain components using a nested component notation. Thus, the following notation expresses that component A is contained within component B:

[0058] Further components may be repeated multiple times using the “idloop” element. Thus, the following notation means that the component named A can appear multiple times:

[0059] A component can be composed of two alternate components. The following notation expresses that component A is made up of either component X or component Y:

[0060] This illustrates provision of the ability to express regular expressions:

[0061] Parent-child relationship is expressed by nesting; in shorthand notation A(B) specifies that A is parent of B.

[0062] Repitition is expressed by idloop, in shorthand notation A* specifies that A is repeated

[0063] OR is expressed by switch: in shorthand notation A|B specifies that either A or B exists

[0064] AND is expressed by concatenation: in shorthand notation AB specifies that A is followed by B.

[0065] For example, the regular expression A(B/C)*D—where A is the parent of a idloop or-expression of components B and C. followed by a component D—can be written as:

[0066] The name of a component, or an idswitch or an idloop, could be used as a variable. A variable defined inside an idloop has several instances. An instance is specified by qualifying the variable name with a subscripted idloop name. For example, “loop1 [0].C” represents the instance of “C” identified during the first iteration of the idloop “loop1”. In general, an instance of a variable is specified by qualifying the name of the variable with subscripted names of the enclosing idloops.

[0067] A variable could also be explicitly declared/defined using the <amlvar> element.

[0068] C.1. Variable Definition

[0069] Variable are created using the amlvar element. The scope of a variable is global to an audio page. Its lifetime is until the audio page is being referenced in a user session. The name of the variable must be unique for an audio page. A variable has the following attributes which help define the name, type, etc. of the variable.

[0070] The following notation describes a variable x which encodes a field of type “date”:

[0071] <amlvar name=×type=‘date’ format=‘mmddv4’ render=‘y4’></amlvar>

[0072] C.2. Variable Usage

[0073] All variables are objects containing the following elements:

[0074] Thus, a loop, named var1, could be accessed using the variable Samlvar(var1). The following would be true of the var1 object:

[0075] var1, {vector=yes; length=# elements in loop}

[0076] Similarly a variable cell1, which represents a cell element in the table, could be accessed using the notation Samlvar(cell1). and its fields could be accessed as Samlvar(cell1.vector), Samlvar(cell1), colspan, etc. If cell1 was in the fifth iteration of the loop var1, then the anchor element associated with cell1 could be accessed as Samlvar(var1[4].cell1.anchor).

[0077] C.2.1. Global System Variables

[0078] Variables can be marked as “global”. Their definitions are available across all pages that are traversed subsequently. The order of accessing of variables is: local variables (loop indexes), page variables (variables extracted from the page). followed by global variables.

[0079] amlerror

[0080] The amlerror variable is a system variable which exposes errors to the user. The variable is an object and has the following fields:

[0081] The user can refer to the type of the error as Samlvar(amlerror.type). The errors can be one of the following types:

[0082] The following table describes default action taken on error for the following error conditions.

[0083] Error type Input

[0084] RECOGNITION_FAILURE 1) Retry specified#times: unless session max, exceeded, then never try

[0085] 2) Try shadow prompt

[0086] 3) Present navigation menu to caller

[0087] WRONG_NUMBER_DIGITS

[0088] CALLER_TIMEOUT 1) Repeat previous prompt and input#times 2) Present navigation menu

[0089] C.3. Identification of Components

[0090] Components can be combined into regular expressions. Components can be identified, including such components as forms, tables, and lists on an HTML page. A component can be identified using one of two broad techniques:

[0091] Identify type (e.g. form, table, tr, td, etc.) and one or more of name/position/URL/dimension.

[0092] Identify “structure” of the component. This all-encompassing method can be the only method chosen. However, it needs much more user interaction than type identification. In many cases it would be easier for the user to use one of the other mechanisms. Therefore the designer should be allowed to move forward from easier to more difficult methods of identification.

[0093] Keeping in mind the preference for workflow to the designer, the following methods of identification are provided:

[0094] 1) Type: What is the type of the object, e.g., form, table, row, cell, cell, input, etc. E.g., <component name=“keywordsearch” type=“form”>//component is a form

[0095] 2) ID: Some components may be uniquely identifiable because they are given a unique <ID> on the HTML page.

[0096] <component name=“table1” class=class1 id=table1>

[0097] 3) HTMLname: name attribute on the HTML page

[0098] 4) Position: Specifies the ordinal number of that type of component in the subtree of the HTML parse tree rooted at the HTMLnode corresponding to the parent aml component. The second row of the first table in the document could be specified as

[0099] Note that the position is the rank among the sub-containers of the same type within the parent container.

[0100] Similarly the second table on the second frame can be specified using the following nested specification:

[0101] Similarly, if Table A has nested within it Table B, and Table B has Table C nested within it, then Table C could be specified with nested component specification as:

[0102] 5) URL: A fixed form can be specified using, the action URL. E.g.

[0103] <component name=“keywordsearch” type=“form” url=“www.amazon.com/keywordsearch>”

[0104] 6) Dimension: Fixed forms, tables, rows and lists can be specified using their dimensions. The sizes of tables and forms can be specified as follows:

[0105] 7) Structure: This is the choice of last resort, or if sub-component level information about the component is desired. The text in the component can be specified in terms of two types of objects:

[0106] (a) quoted text which is matched exactly, and

[0107] (b) any text specified by the tag amlvar

[0108] A form could be specified as:

[0109] structure=“<form><amlvar name=‘formbody’></form>”

[0110] where “<form>” and </form> are matched exactly, and the entire body of the form is matched by the variable-text element <amlvar> and is assigned to the variable formbody.

[0111] If multiple conditions are used to specify the page then they all must be true. For example, in the following identification the component being identified is of type form and has an action method which is the value “www.amazon.com/keyword-search, has 3 inputs, and is the first form on the page”:

[0112] In some cases, a component cannot be identified unambiguously by itself. In such cases, it must reference its parent subtree until it reaches an ancestor which can be unambiguously identified. Consider a parse tree, where it is necessary to identify the second cell in the second row of table level2 and consider where the number of cells in any of the rows in table level1 are not pre-determined. All that is known is that the last cell in the last row in level1 has the table level2 embedded within it. The lowest cell might be identified as:

[0113] Once a component is identified, the data within the component can be extracted.

[0114] C.4 Extraction: Forms

[0115] Consider an example form such as a broker's sign-on page. This form has two inputs specified by the user: name and password. The remaining inputs are hidden elements as far as the user is concerned. There is also an option list to specify where the user wants to start the session.

[0116] The HTML code for such a form is shown below:

[0117] The component specifies that there is one form of interest on this page, and it is placed as the first form on the page, namely;

[0118] <component Name=“Logon” TYPE=“FORM”position=“1”></component>

[0119] The action method of the form can be extracted using the following structure specification (where the tag amlvar describes any free-matched text):

[0120] structure=“<form><amlvar>action=<amlvar name=‘url’>METHOD <amlvar>”>

[0121] This is interpreted as follows:

[0122] Start off by matching <form, then there is text until you match action=”, then the next part is a variable from the HTML page, which ends when you reach METHOD. Name the component Logon. Refer to the variable “url” as Samlvar(Logon.url).

[0123] Consider the following text in a page:

[0124] The source HTML language for the above table is as follows:

[0125] The table above has a variable number of rows, each of which has 5 cells. Of this table, only cells 1, 3, and 5 are intended for use. The structure of the table can be described as follows:

[0126] The specification of each cell using the structure mechanism seems convoluted because of the HTML constructs appearing in the specification. One simplification is to have the structure refer to the “visible” part of the cell—this is what the user sees on a regular web browser.

[0127] The variables can be referred to as Samlvar(headlines[index] date). Samlvar(headlines[index].time). and Samlvar(headlines[index].news). Further, the anchor element of the 5th column could be referred to as Samlvar(headlines[index].url)

[0128] C.6 Extraction: Looping Variable Component (e.g. List)

[0129] A variable component is one whose structure may change from one version of the HTML page to another. For example, when searching for a book on amazon.com, the results constitute a variable component, because the components cannot be identified as rows/cells of a table. It is possible though to have a generic specification of how the sub-components of a component are defined. In the source HTML, each component is started with a <dt> tag, and ended with the <p> tag.

[0130] The above is an example of a component from a site labeled amazon.com.

[0131] The result component could be specified as follows:

[0132] In the above specification, there is a fixed header component “<d1>” followed by a looping component. In each iteration of the looping component we need to identify the following sections:

[0133] Title=Design and Inference in Finite Population Sampling (Wiley Series in Probability and Mathematical Statistics)

[0134] Shipping=Ships in 2-3 days

[0135] Author=A. S. Hedavat(Contributor), B. K. Sinha

[0136] Type=Paperback

[0137] Date=1991

[0138] Price=S101.00

[0139] To extract the above sections, the result component could be described as follows:

[0140] The title text can be referred to as Samlvar(loop1 [index].title); information about the title can be accessed as Samlvar(loop1 [index].detail).

[0141] C.7 Extraction: Alternate Structures

[0142] In the best case, a component of interest to the user may be identified using exactly one method. However, there may be cases in which the same form may appear as the 1 st/3rd form on a page, or a table may appear with 3 or 4 cells. Extending the identification of components using unique structures to identification of components with alternate structures yields the following examples:

[0143] Consider the following table (transaction history table from a stock quote site) where the rows are of three different types.

[0144] In this case, since the rows do not represent the same “types” of transactions they may need to be read out in different formats. Also, their input is organized differently. The rules for this table can be as follows:

[0145] it is a transaction of type interest,

[0146] it is a transaction of type dividend.

[0147] it is a buy/sell transaction.

[0148] To specify the above table:

[0149] The invention has been described with reference to specific embodiments. Other embodiments will be evident to those of ordinary skill in the relevant art. It is therefore not intended that the invention be limited, except as indicated by the appended claims.