外文翻譯---一個個人網(wǎng)頁定制的移動設(shè)備工具包

1、<p>　　畢業(yè)設(shè)計(論文)外文資料翻譯</p><p>　　A personal Web page tailoring toolkit for mobile devices </p><p><b>　　Abstract</b></p><p>　　It is common to browse web pages via mob

2、ile devices. However, most of the web pages were designed for desktop computers equipped with big screens. When browsing on mobile devices, a user has to scroll up and down to find the information they want because of

3、the limited screen size. Some commercial products reformat web pages. However, the result pages still contain irrelevant information. We propose a system to personalize users’ mobile web pages. A user can determine w

4、hich blocks in a </p><p>　　1. Introduction</p><p>　　1.1. Preface</p><p>　　Nowadays, we can build a mobile Web application easily. Take the ASP. NET mobile controls [1] (formerly

5、 known as MMIT, short for the Microsoft Mobile Internet Toolkit) for example, it reduces the work required for developers to develop applications that target different types of mobile devices, like mobile phones and PDAs

6、. At runtime, MMIT will automatically detect the target device and return the proper presentation format. Thus, the developers can focus on the application logic without worr</p><p>　　Similar academic resear

7、ches on this topic include [2] and [3]. Both of them provide plug-ins for famous IDEs, such as JBuilder and Visual Studio.NET respectively, to assist developers to author a single generic application. Accompanied with th

8、e PUML transformation technology [4], this generic application can be further transformed into specific target formats for different mobile devices.</p><p>　　1.2. Motivation</p><p>　　Widespread

9、of mobile devices makes it common to browse Web pages via them. However, most Web pages are mainly designed for desktop computers that are equipped with big screens. When browsing on mobile devices, a user might have

10、 to scroll up and down, left and right all the time to find the information they want. Because of the limited screen size, this kind of operation is really not user-friendly at all.</p><p>　　Fortunately, som

11、e famous websites have another simplified version of Web content specially provided for mobile devices, such as Google Mobile [5] and Yahoo Mobile [6]. On the other hand, it is a heavy burden on Web developers to cra

12、ft and maintain multiple versions of the same website. Even with the help of the fascinating toolkits.</p><p>　　If we resize the original Web page to fit the width of mobile device, the vertical scroll bar

13、 will be too long to view, and the information is crowded. On the other hand, if we provide another version of the original Web page, there may be some important information lost in the mobile version, and the transfor

14、mation of each page costs a lot for Web page developers. Hence, in this research, we propose a system that is designed to help users to personalize their mobile Web pages for handhe</p><p>　　1.3. Researc

15、h objectives</p><p>　　In this sub-section, the four major research objectives are listed and introduced briefly.</p><p>　　1.3.1. Easy-to-use</p><p>　　It does not make sense to launc

16、h another program other than the browser to personalize a Web page. When a user surfs on the Internet and finds a Web page that interests him/her, the configuration tool of this system should be able to pop up in the

17、 browser window somehow right away. Moreover, all the codes needed to accomplish this job (i.e. personalize Web pages) should be downloaded on the fly when accessed, thus allowing a user to work on different computers

18、at different places.</p><p>　　1.3.2. Personalizing Web pages visually</p><p>　　Web pages are usually composed of header, footer, sidebar, and content areas [7]. Parts of them are used to maint

19、ain a consistent style for the website, and other parts of them are used for navigation. Some renowned websites may even contain a lot of advertisements on it. In many Web pages, only a few of information is really nee

20、ded to be shown on the mobile phone screen. This research also aims at allowing a user to determine which parts of a Web page should be retained while browsing this </p><p>　　A friendly user interface shou

21、ld thus be available for a user to perform this task. For example, with appropriate visual aids (such as highlight), a user can choose blocks in a Web page one by one with different granularity. Through the operation o

22、f drag-and-drop, a user can determine the relative position of the chosen blocks according to his/her personal preferences. In short, a user can reconstruct a mobile Web page simply with visual manipulations, and does

23、not have to write any line of </p><p>　　According to the browser market share survey [8], Microsoft Internet Explorer is still by far the most dominant browser on the Web, with 83.88% usage market share, a

24、nd Firefox has increased its share to 10.68%, with the other alternatives, such as Safari, Netscape, Opera, and Mozilla, occupying the remaining share.</p><p>　　The downloaded mobile code should work with at

25、 least the top two popular browsers, i.e. Microsoft Internet Explorer and Firefox Web browser.</p><p>　　1.3.3. Reducing wireless bandwidth consumption</p><p>　　More than screen size constraint

26、s, the limited memory and wireless network bandwidth also make it unsuitable for delivering the entire Web page untailored to mobile devices. Before returning a Web page to mobile devices, some adaptation must be tak

27、en to pre-process a Web page according to a user's preferences. So that the volume of data transmission to a mobile phone could be reduced, and thus reduce the consumption of wireless bandwidth as well.</p>

28、<p>　　1.3.4. Automatic mobile Web page content extraction</p><p>　　The content adapting algorithm we proposed can automatically adapt Web pages to mobile devices. Users always only care about a part

29、 of the web content. Content adapting applications should provide a function to extract these parts from a Web page.</p><p>　　1.4. Research contribution</p><p>　　This paper discusses the pro

30、blems encountered and our corresponding solutions. The major contributions of this research are listed below. </p><p>　　1. A cross-browser configuration tool is designed. </p><p>　　2. The web -

31、based nature of our configuration tool allows a user to configure the settings from different computers, and requires no pre-installation of any software.</p><p>　　3. Blocks in a Web page can be chosen cor

32、rectly under the premise that the layout of a Web page does not change frequently.</p><p>　　4. A web -based management interface is provided.</p><p>　　5. An automatic algorithm for mobile We

33、b page generation is proposed.</p><p>　　1.5. Outline of this paper</p><p>　　This paper is divided into seven sections. The following is a brief description of the content of each section. In Se

34、ction 2, an overview of the proposed system and its three major components are given. In Section 3, the System design details, problems encountered, and our corresponding solutions are illustrated. Furthermore, we discus

35、s our mobile Web page generation algorithm in Section 4. In Section 5, some tests are conducted to evaluate our system. A practical example showing how to make u</p><p>　　2. System design</p><p&

36、gt;　　2.1. Overview</p><p>　　Basically, the personalizing process in our Web page tailoring system comprises two steps (Fig. 1). First, user must specify his/her preferences of a Web page using a PC or la

37、ptop. 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

38、 step. Two pictures are given below to illustrate separately the relationship between a user, our We</p><p>　　Fig. 2 describes the interaction in the first step. When a user enters a URL in his/her Web br

39、owser, 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

40、, 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/h</p><p>　　Fig. 2. Perso

41、nalize Web pages using PC or laptop.</p><p>　　Fig. 3 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,

42、we would snoop each HTTP request and modify its corresponding response (Lines 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

43、 Web page to meet the user preferences.</p><p>　　Fig. 3. Browse Web pages via mobile devices.</p><p>　　In order to achieve the above tasks, three components are designed in our system: Page

44、Tailor, Configuration Manager, and Mobile Proxy. The purpose and functions of each component will be introduced separately. System design details are presented in Section 3.</p><p>　　2.2. Page Tailor</p&g

45、t;<p>　　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

46、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 datab

47、ase that is managed by Configuration Manager. Fig. 4 is a snapshot when executi</p><p>　　Fig. 4. Page Tailor in Firefox Web browser.</p><p>　　2.2.1. Execution and initialization</p><

48、;p>　　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 fu

49、nctions.</p><p>　　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

50、 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

51、 as blocks that had been selected and their order.</p><p>　　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 accelerat

52、e the setting time; particularly when he/she only wants to perform a slight modification.</p><p>　　2.2.2. Visual manipulations</p><p>　　In order to help a user specify his/her preferences about

53、a Web page, Page Tailor provides some visual manipulations. Fig. 5 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

54、 containing more information than that in the bottom is selected. A selected block is highlighted in yellow.</p><p>　　Fig. 5. Select blocks at different granularity.</p><p>　　Fig. 6 illustrates

55、another feature — drag and drop. In this picture, three views are shown from left to right. In the beginning, three blocks have already been selected (left). Next, we switch the last two blocks (middle), and then the fin

56、al 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.</p><p>　　Fig. 6. Rearrange the selected blocks.</p><p>

57、　　2.2.3. User preferences</p><p>　　XPath [9] 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 Tailor

58、ing 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

59、using XPath expressions, we can uniquely identify this block in the future provided that if the layout of th</p><p>　　As for the sequence of selected blocks, the XPath expressions of selected blocks are conc

60、atenated together according to their order in the Page Tailor window (separated by commas) to form the user preferences about this page. Fig. 7 is a practical example.</p><p>　　Fig. 7. Internal expression of

61、 user preferences about a Web page.</p><p>　　2.3. Configuration Manager</p><p>　　The preferences specified by a user will be stored in a database. Configuration Manager serves as a gatekeeper

62、to control the access to the backend database. It provides a Web -based interface) 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 compon

63、ents in this system to access the preferences programmatically. One is used for querying the database and the other for updating.</p><p>　　The reason why we adopted the Web service approach ultimately is b

64、ecause 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.<

65、/p><p>　　2.4. Mobile Proxy</p><p>　　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 ma

66、kes 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 rear

67、range the remaining blocks.</p><p>　　Fig. 8 summarizes the communication between these three major components. Page Tailor is first downloaded and executed in a user's browser. Then the Web services ex

68、ported by Configuration Manager are used by it and Mobile Proxy to access the backend database where user preferences are stored.</p><p>　　Fig. 8. The communication between these three components</p>

69、<p>　　3. Detailed design, standards, and interfaces</p><p>　　In this section, we will describe the system design, standards, and interfaces details of the three major components in our system and the pr

70、oblems encountered. Also, our solutions to these problems are depicted. The system components and their interfaces are shown in Fig. 9.</p><p>　　Fig. 9. System components and their interfaces.</p><

71、;p>　　In Fig. 9, we can see that, almost all of the interfaces are iw, i.e. HTTP1.0 Web interface. Because our system is designed for Web application, the iw interface enables us to develop different system compone

72、nts by different programming languages or platforms. Hence, it provides cross-platform communication for system development.</p><p>　　3.1. Page Tailor</p><p>　　Page Tailor is designed to be impl

73、emented in JavaScript because of the following considerations. </p><p>　　1. JavaScript was designed to add interactivity to HTML pages. This point conforms to the first objective of this paper, i.e. easy-to-

74、use, since we can embed the configuration tool in a Web page, so that users can configure their settings directly in the browser. </p><p>　　2. By using JavaScript, we can manipulate a Web page through th

75、e DOM interface. DOM provides the interface between the JavaScript and original Web pages. In other words, we can change the appearance of a Web page to reflect the user's choice. This one conforms to the second

76、objective, i.e. personalizing Web page visually.</p><p>　　3. JavaScript is one of the most popular scripting languages on the Internet, and works in all major browsers, such as Internet Explorer and Firefo

77、x. This one agrees with the third objective, i.e. support for mainstream browsers.</p><p>　　3.1.1. Page Tailor bookmarklet</p><p>　　The interface between user and Page Tailor is bookmarklet. Tha

78、t is, the ib interface between user and Page Tailor in Fig. 9. The source code of this bookmarklet is shown in Fig. 10. When a user clicks that, an element with tag name “script” is created (Line 2). After being created,

79、 the new element contains no properties. The “src” property (Line 5) is employed to indicate the location of a remote JavaScript file. A created element exists only in the browser's memory, and not as part of this W

80、eb</p><p>　　Fig. 10. This is the bookmarklet used to launch Page Tailor.</p><p>　　By this method, we can dynamically load an external JavaScript file on demand to do something with a Web page.

81、 It can also work for other types of files such as CSS.</p><p>　　3.1.2. Loading external JavaScript Libraries</p><p>　　JavaScript has been used in many applications. Some open source projects ha

82、ve already incorporated the commonly used functions such as drag-and-drop and visual effects. In Page Tailor, we do not reinvent the wheel but take advantage of the Script.aculo.us JavaScript framework [10].</p>&

83、lt;p>　　Although we can dynamically load these JavaScript files, the exact time spent on loading, however, depends on the browsers. In other words, even if we add the “script” elements to a Web page in some order, wh

84、ich is not equivalent to load the first JavaScript file and then the second one. The results are still unexpected.</p><p>　　To address the above problem, we must postpone the loading of scriptaculous.js unti

85、l after prototype.js has been loaded. By selecting a unique identifier from the file (prototype.js or scriptaculous.js) and checking periodically whether the identifier has been defined or not, we can indirectly deduce t

86、he current state of that file. In other words, an identifier has been defined, which means that the file containing it must have been loaded, too. For example, we choose the identifier named Protot</p><p>　　

87、3.1.3. Containment hierarchy of Page Tailor</p><p>　　After pagetailor.js is loaded, it would create the containment hierarchy of elements that together compose the Page Tailor window, and the entire hierarch

88、y would be appended to the Web page. Fig. 11 shows the correspondence between each element and their appearance displayed on the browser. The tag name of each element contained in this hierarchy is labeled on the left-

89、hand side of the figure.</p><p>　　一個個人網(wǎng)頁定制的移動設(shè)備工具包</p><p><b>　　摘要</b></p><p>　　通過移動設(shè)備瀏覽網(wǎng)頁是很常見的。然而，大部分的網(wǎng)頁是配備大屏幕的臺式電腦設(shè)計的。當(dāng)在移動設(shè)備上瀏覽時，由于有限的屏幕尺寸，用戶必須向上和向下滾動去找到他們想要的信息。雖然一些商業(yè)產(chǎn)

90、品重新格式化了網(wǎng)頁，但是最終的網(wǎng)頁仍然包含不相關(guān)的信息。我們提出了一個系統(tǒng)去個性化用戶的移動網(wǎng)頁。用戶可以確定哪些塊在一個網(wǎng)頁中應(yīng)予以保留。根據(jù)個人的喜好，這些序列塊也可以改變。</p><p><b>　　1.介紹</b></p><p><b>　　1.1前言</b></p><p>　　現(xiàn)在，我們可以的很容易的建立

91、一個移動網(wǎng)頁應(yīng)用程序。添加ASP.NET移動控件[1] （以前稱為MMIT，短的微軟移動互聯(lián)網(wǎng)工具包）例如，它減少了開發(fā)所需要的工作去開發(fā)針對不同類型移動設(shè)備的應(yīng)用程序，如移動電話和PDA等。在運行時，MMIT將會自動偵測到目標(biāo)設(shè)備并返回正確的編制格式。因此，開發(fā)人員可以專注于應(yīng)用程序邏輯而不用擔(dān)心介紹的問題。</p><p>　　類似的關(guān)于這一主題的學(xué)術(shù)研究包括[2]和[3]。他們都為著名的插件提供IDE，如J

92、Builder和Visual Studio，以協(xié)助開發(fā)人員提交一個通用應(yīng)用程序。在PUML變換技術(shù)的作用下[4]，這個通用的應(yīng)用可以進一步轉(zhuǎn)化為不同的移動設(shè)備的具體目標(biāo)格式。</p><p><b>　　1.2.動機</b></p><p>　　移動設(shè)備的廣泛使得通過他們?yōu)g覽網(wǎng)頁變得普通。然而，大多數(shù)網(wǎng)頁是由配備了大屏幕的臺式電腦設(shè)計的。當(dāng)在移動設(shè)備上瀏覽時，一個用戶

93、可能要一直上下，左右滾動來尋找他們想要的信息。由于有限的屏幕大小，這種操作是很不方便的。</p><p>　　幸運的是，一些著名的網(wǎng)站有另一種為移動設(shè)備提供的簡化版本的專門網(wǎng)頁內(nèi)容，例如谷歌手機[5]和雅虎移動[6]。另一方面，即使再加上迷人的工具包幫助，設(shè)計和維護同一網(wǎng)站的多個版本是一個Web開發(fā)人員的沉重負(fù)擔(dān)。</p><p>　　如果我們調(diào)整了原來的網(wǎng)頁以適應(yīng)移動設(shè)備的寬度，垂直滾動

94、條查看起來就會太長，而且信息很擁擠。另一方面，如果我們提供另一個網(wǎng)頁的原始版本，可能有一些重要的信息會在手機版本中丟失，并且每一頁的轉(zhuǎn)變會給頁面開發(fā)者帶來很多麻煩。因此，在本研究中，我們設(shè)計了一個旨在幫助用戶為手持設(shè)備瀏覽而個性化移動網(wǎng)頁的系統(tǒng)。</p><p><b>　　1.3.研究目標(biāo)</b></p><p>　　在這個小節(jié)，四個主要的研究目標(biāo)被列出并簡要介紹。

95、</p><p>　　1.3.1．易于使用</p><p>　　啟動其他程序是沒有意義的，除了瀏覽器的個性化網(wǎng)頁。當(dāng)用戶在互聯(lián)網(wǎng)上沖浪，發(fā)現(xiàn)一個他/她感興趣的網(wǎng)頁， 這個系統(tǒng)配置工具應(yīng)該可以在適當(dāng)?shù)臅r候用某種方式在瀏覽器窗口中彈出。此外，所有完成此工作需要的代碼（即個性化網(wǎng)頁）在訪問時應(yīng)該很快的被下載。從而使用戶可以在不同的地方的不同計算機上工作。</p><p>

96、　　1.3.2．個性化網(wǎng)頁視覺</p><p>　　網(wǎng)頁通常由標(biāo)題、頁腳、側(cè)邊欄和內(nèi)容范圍組成的。其中一部分是用來為網(wǎng)站維持一貫風(fēng)格的，他們的其他部分用于導(dǎo)航。一些著名的網(wǎng)站上甚至可能含有大量的宣傳廣告。在許多網(wǎng)頁， 只有少數(shù)的信息確實需要顯示在手機屏幕上。本研究的目的還在于讓用戶在用手機瀏覽網(wǎng)頁時確定其中一個網(wǎng)頁部分應(yīng)予以保留。</p><p>　　一個友好的用戶界面應(yīng)該可為用戶來執(zhí)行這

97、項任務(wù)。例如，使用適當(dāng)?shù)囊暵犉鞑模ㄈ缤怀觯┯脩艨梢栽诰W(wǎng)頁用不同的尺寸一個接一個的選擇塊。通過拖和拖放操作，用戶可以根據(jù)他/她的個人喜好決定所選擇的塊的相對位置。總之，用戶可以簡單地通過可視化操作建立移動網(wǎng)頁，并且沒有寫任何一行代碼。 </p><p>　　根據(jù)瀏覽器市場份額的調(diào)查顯示[8]，微軟互聯(lián)網(wǎng)瀏覽器仍然是目前為止在網(wǎng)絡(luò)上使用的最主流瀏覽器，83.88％的市場份額，F(xiàn)irefox的份額增加了10.6

98、8％，而其他選擇，例如， Safari瀏覽器，網(wǎng)景，Opera和Mozilla占領(lǐng)了其余的份額。</p><p>　　下載的移動代碼應(yīng)與至少前兩名流行的瀏覽器合作，如微軟的Internet Explorer和Firefox Web瀏覽器。 </p><p>　　1.3.3．減少無線帶寬消耗</p><p>　　除了屏幕大小的限制，有限的內(nèi)存和無線網(wǎng)絡(luò)帶寬也使它不適

99、合提供整個移動設(shè)備網(wǎng)頁。在返回前一個網(wǎng)頁到移動設(shè)備之前，必須根據(jù)用戶的喜好對一些預(yù)處理網(wǎng)頁作一些調(diào)整。所以說移動電話的數(shù)據(jù)量傳輸可能會減少，從而也減少了無線帶寬的消費。</p><p>　　1.3.4．移動網(wǎng)頁內(nèi)容自動提取 </p><p>　　我們建議的內(nèi)容適應(yīng)算法可以自動調(diào)整網(wǎng)頁到移動設(shè)備。用戶總是只關(guān)心網(wǎng)站內(nèi)容的一部分。內(nèi)容適應(yīng)應(yīng)用應(yīng)該提供一個函數(shù)來從網(wǎng)頁中提取這些部件。 &