6. System Architecture
6.1 The USHAS Content Adaptation Sub-System
The overview of the USHAS Content Adaptation Sub-System (CAS) is shown in Figure 6-2.
The steps of using it are described as follows: (1) User opens a Web page which is going to be customized. (2) User clicks a bookmark to download and execute the Page Tailor. (3-4) Using the Page Tailor to select and store the interesting parts of Web page. (5) Using the mobile device to browse Web page via Web Proxy. (6-9) Filtering out the un-selected parts and sending the selected parts of Web page to mobile device.
Figure 6-2. Overview of USHAS Content Adaptation Sub-System
38
The personalizing process in the USHAS content adaptation sub-system comprises two steps.
First, user must specify his/her preferences of a web page using a PC or laptop. Second, he/she has to configure the browser on his/her mobile device to go through a specially made proxy, which is responsible for adjusting the content of web pages according to the preferences set in the first step. Two pictures are given below to illustrate separately the relationship between a user, our web page tailoring system, and a remote Web server (such as CNN.com) in each step.
Figure 6-3. Personalize web pages using PC or laptop
Figure 6-3 describes the interaction in the first step. When a user enters a URL in his/her Web browser, a HTTP request is sent to (Line 1) the corresponding Web server specified in the URL. After processing the request by the server, a HTTP response is sent back (Line 1). If the user wants to personalize that page, a program hosted on a tiny Web server included in our system would be downloaded (Line 2) and executed in his/her browser. With the help of that program, the user can specify his/her preferences simply by visual manipulations. After
39
finishing the job, preferences about this page are sent back and stored in a database for later use (Line 2).
Figure 6-4. Browse web pages via mobile devices
Figure 6-4 pictures the interaction in the second step. Since the user would configure the browser on his/her mobile device to use a proxy included in our system, we would snoop each HTTP request and modify its corresponding response (Line 3 and 4) in between. For example, if the user visits a web page that has been personalized before, some actions would be taken to tailor the web page to meet the user preferences.
In order to achieve the above tasks, three components are designed in our system: Page Tailor, Configuration Manager, and Mobile Proxy. The purpose and functions of each component will be introduced separately.
40
a. Page Tailor
Figure 6-5. Page Tailor in Firefox Web browser
Page Tailor in the form of mobile code can be downloaded and executed in a user’s browser when he/she is about to personalize a Web page. It provides some visual manipulations for users to help them specify their preferences about a Web page. The preferences here include:
blocks of a Web page that should be retained and their final arrangement. All the preferences about this page would be saved in a remote database that is managed by Configuration Manager. Figure 6-5 is a snapshot when executing Page Tailor in a Firefox Web browser.
41
When browsing Web pages, a user can click on the installed bookmarklet to download and execute Page Tailor. From the other perspective of users, it seems that the Web page itself provides the personalizing functions.
After the Page Tailor window is launched in the user’s browser, some actions are performed in the background automatically. First, Page Tailor will connect with Configuration Manager to retrieve the user preferences about this current visited page. If the user has personalized this page before, Page Tailor would retrieve the old preferences, and then use the data retrieved to reconstruct the past, such as blocks that had been selected and their order.
On the contrary, if there are no preferences about this page, nothing will happen, of course.
The purpose of this action is to help users accelerate the setting time; particularly when he/she only wants to perform a slight modification.
In order to help a user specify his/her preferences about a Web page, Page Tailor provides some visual manipulations. Figure 6-6 demonstrates the feature that a user can select a block in a Web page at different granularity. For example, in the top half of this picture, a block containing more information than that in the bottom is selected. A selected block is highlighted in yellow.
Figure 6-7 illustrates another feature – drag and drop. In this picture, three views are shown from left to right. In the beginning, three blocks has already been selected (left). Next, we switch the last two blocks (middle), and then the final result comes out (right). The sequence of blocks in the Page Tailor window would be the same as that in the browsers on mobile devices.
42
Figure 6-6. Select blocks at different granularity
Figure 6-7. Rearrange the selected blocks
43
XPath [72] is a language that describes how to locate specific elements in a document. This is the standard we adopted to store the user preference. In our Web Page Tailoring system, the user preferences stored are composed of XPath expressions. In other words, when a user adds a block to the Page Tailor window, Page Tailor would internally generate an XPath expression for that block. By using XPath expressions, we can uniquely identify this block in the future provided that if the layout of this page does not change too frequently.
As for the sequence of selected blocks, the XPath expressions of selected blocks are concatenated together according to their order in the Page Tailor window (separated by commas) to form the user preferences about this page. Figure 6-8 is a practical example.
Figure 6-8. Internal expression of user preferences about a Web page
44
b. Configuration Manager
The preferences specified by a user will be stored in a database. Configuration Manager serves as a gatekeeper to control the access to the backend database. It provides a Web-based interface (Figure 2-9) for a user to manage his/her preferences base on the HTTP 1.0 Web protocol. Two Web services are also exported to allow other components in this system to access the preferences programmatically. One is used for querying the database and the other for updating.
The reason why we adopted the Web service approach ultimately is because of its language- and platform-specific nature. Hence, other components utilizing the services in our system could be implemented in different programming languages that are more appropriate for specific tasks.
c. Mobile Proxy
Mobile Proxy is a specially made proxy that is responsible for the final step in completing the personalizing process. It would monitor every HTTP request and makes Web service calls (query service) with the request URL as the parameter to Configuration Manager. The returned user preferences, if any, could then be employed to filter out the unwanted Web page content and rearrange the remaining blocks.
Figure 6-9 summarizes the communication between these three major components. Page Tailor is first downloaded and executed in a user’s browser. Then the Web services exported by Configuration Manager are used by it and Mobile Proxy to access the backend database where user preferences are stored.
45
Figure 6-9. The communication between these three components