網(wǎng)上建材銷售系統(tǒng)畢業(yè)設(shè)計(jì)開題報(bào)告

1、<p>　　畢業(yè)設(shè)計(jì)（論文）開題報(bào)告</p><p><b>　　理工類</b></p><p>　　2010 年 1 月 9 日</p><p>　　淮海工學(xué)院畢業(yè)設(shè)計(jì)（論文）開題報(bào)告</p><p>　　淮海工學(xué)院畢業(yè)設(shè)計(jì)（論文）開題報(bào)告</p><p>　　淮海工學(xué)院畢業(yè)設(shè)計(jì)（

2、論文）開題報(bào)告</p><p>　　畢業(yè)設(shè)計(jì)(論文)外文資料翻譯</p><p>　　A personal Web page tailoring toolkit for mobile devices </p><p><b>　　Abstract</b></p><p>　　It is common to browse

3、 web pages via mobile 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 th

4、ey want because of 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 u

5、ser can determine which 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 con

6、trols [1] (formerly 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 mob

7、ile phones and PDAs. 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>　　Simi

8、lar academic researches 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.

9、Accompanied with the 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><

10、;p>　　Widespread 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

11、, a user might have 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>

12、;　　Fortunately, some 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

13、 developers to craft 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

14、vertical scroll bar 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 versio

15、n, and the transformation 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><

16、p>　　1.3. Research 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

17、make sense to launch 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 ab

18、le to pop up in the 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 d

19、ifferent computers 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 the

20、m are used to maintain 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 inform

21、ation is really needed 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

22、user interface should 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. Thro

23、ugh the operation of 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 manip

24、ulations, and does 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% us

25、age market share, and 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

26、should work with at 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 scr

27、een size constraints, 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 ada

28、ptation must be taken 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 a

29、s well.</p><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 onl

30、y care about a part 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 pape

31、r discusses the problems 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

32、>　　2. The web -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 pag

33、e can be chosen correctly 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 algor

34、ithm for mobile Web 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

35、each section. In Section 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. Fur

36、thermore, we discuss 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 desig

37、n</p><p>　　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 pa

38、ge 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 preferenc

39、es set in the first 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

40、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 pe

41、rsonalize 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/h</p><p

42、>　　Fig. 2. Personalize 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 inclu

43、ded in our system, 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

44、taken to tailor the 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 i

45、n our system: Page 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.

46、Page Tailor</p><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

47、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 save

48、d in a remote database 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 initializa

49、tion</p><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 t

50、he personalizing functions.</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 Confi

51、guration 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 reconst

52、ruct the past, such 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 h

53、elp users accelerate 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

54、 preferences about 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 th

55、is picture, a block 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>　　

56、Fig. 6 illustrates 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

57、), 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.</p><p>　　Fig. 6. Rearrange the selected blocks.&l

58、t;/p><p>　　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 ou

59、r 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

60、for that block. By 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 selec

61、ted blocks are concatenated 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. Int

62、ernal expression of 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 serv

63、es as a gatekeeper 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

64、 allow other components 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 appro

65、ach 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

66、specific tasks.</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

67、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 pa

68、ge content and rearrange 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 th

69、e Web services exported 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 com

70、ponents</p><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 ou

71、r system and the problems 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 interfa

72、ces.</p><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 diffe

73、rent system components 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

74、designed to be implemented 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 p

75、aper, i.e. easy-to-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 W

76、eb page through the 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 conf

77、orms to the second 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

78、Explorer and Firefox. 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

79、is bookmarklet. That 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). A

80、fter being created, 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

81、 as part of this Web</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

82、 with a Web page. 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

83、 source projects have 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

84、 [10].</p><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 pag

85、e in some order, which 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 sc

86、riptaculous.js until 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

87、indirectly deduce the 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<

88、/p><p>　　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

89、the entire hierarchy 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 l

90、abeled on the left-hand side of the figure.</p><p>　　一個(gè)個(gè)人網(wǎng)頁定制的移動(dòng)設(shè)備工具包</p><p><b>　　摘要</b></p><p>　　通過移動(dòng)設(shè)備瀏覽網(wǎng)頁是很常見的。然而，大部分的網(wǎng)頁是配備大屏幕的臺式電腦設(shè)計(jì)的。當(dāng)在移動(dòng)設(shè)備上瀏覽時(shí)，由于有限的屏幕尺寸，用戶必須向上和向下滾

91、動(dòng)去找到他們想要的信息。雖然一些商業(yè)產(chǎn)品重新格式化了網(wǎng)頁，但是最終的網(wǎng)頁仍然包含不相關(guān)的信息。我們提出了一個(gè)系統(tǒng)去個(gè)性化用戶的移動(dòng)網(wǎng)頁。用戶可以確定哪些塊在一個(gè)網(wǎng)頁中應(yīng)予以保留。根據(jù)個(gè)人的喜好，這些序列塊也可以改變。</p><p><b>　　1.介紹</b></p><p><b>　　1.1前言</b></p><p&

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

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

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

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

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

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

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

99、額，F(xiàn)irefox的份額增加了10.68％，而其他選擇，例如， Safari瀏覽器，網(wǎng)景，Opera和Mozilla占領(lǐng)了其余的份額。</p><p>　　下載的移動(dòng)代碼應(yīng)與至少前兩名流行的瀏覽器合作，如微軟的Internet Explorer和Firefox Web瀏覽器。 </p><p>　　1.3.3．減少無線帶寬消耗</p><p>　　除了屏幕大小的限

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