TW201518965A - 基於網頁的記錄系統及其方法 - Google Patents

Abstract

一種基於網頁的記錄系統及其方法，透過接收瀏覽網址判斷筆記資料庫中是否存在相應的筆記訊息及其對應的網頁圖像，假設筆記訊息存在則顯示相應的網頁圖像，並且在點選網頁圖像時載入相應的筆記訊息以進行顯示並允許編輯，反之筆記訊息不存在時，則根據瀏覽網址下載相應的網頁文件以進行顯示，並且根據使用者的操作在筆記資料庫建立相應的筆記訊息，用以達成提高網頁的閱讀性之技術功效。

Description

基於網頁的記錄系統及其方法

本發明涉及一種記錄系統及其方法，特別是指一種允許在網頁作筆記並儲存於網路上之基於網頁的記錄系統及其方法。

近年來，隨著網際網路的普及與蓬勃發展，瀏覽網頁已成為許多人日常生活的一部分，然而，網頁內容受限於伺服器，無法由網路上的瀏覽者自行更改、增加註解或筆記，因此對於瀏覽者而言一直存在閱讀性不佳的問題。

一般而言，網頁存放於伺服器中，網頁內容則由伺服器的管理者所控制，由於瀏覽者通常不具備伺服器的管理權限，因此無法對網頁內容進行更改。也就是說，瀏覽者無法像閱讀書本一樣畫重點或做筆記，以實現對網頁的自由注釋和標記，影響瀏覽者對網頁內容的閱讀效率。

綜上所述，可知先前技術中長期以來一直存在網頁顯示內容無法有效的自由添加筆記予以快速顯示之問題，因此實有必要提出改進的技術手段，來解決此一問題。

本發明揭露一種基於網頁的記錄系統及其方法。

首先，本發明揭露一種基於網頁的記錄系統，此系統包含：筆記資料庫及客戶端。其中，筆記資料庫用以儲存筆記訊息及其對應的網頁圖像，每一筆記訊息包含網址、筆記位置及筆記內容。至於客戶端則包含瀏覽模組、操作模組、記錄模組及還原模組。其中，瀏覽模組用以接收瀏覽網址，並且在瀏覽網址與筆記資料庫中每一筆記訊息的網址皆 不匹配時，根據此瀏覽網址下載相應的網頁文件以進行顯示；操作模組用以在顯示網頁文件時，產生操作元件提供點選操作以自筆記資料庫建立相應的筆記訊息，並且將瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於筆記位置、以及將操作結果記錄於筆記內容；記錄模組用以在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成網頁圖像並儲存於筆記資料庫與筆記訊息進行對應；還原模組用以在瀏覽網址與筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息所對應的網頁圖像以進行顯示，以及在載入的網頁圖像被點選時，自筆記資料庫載入相應的筆記訊息以進行顯示並允許編輯。

另外，本發明揭露一種基於網頁的記錄方法，其步驟包括：筆記資料庫提供筆記訊息及其對應的網頁圖像，每一筆記訊息包含網址、筆記位置及筆記內容；客戶端接收瀏覽網址，並且在瀏覽網址與筆記資料庫中每一筆記訊息的網址皆不匹配時，根據此瀏覽網址下載相應的網頁文件以進行顯示；所述客戶端在瀏覽網址與筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息所對應的網頁圖像以進行顯示，以及在載入的網頁圖像被點選時，自筆記資料庫載入相應的筆記訊息以進行顯示並允許編輯；所述客戶端在顯示網頁文件時，產生操作元件提供點選操作以自筆記資料庫建立相應的筆記訊息，並且將瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於筆記位置、以及將操作結果記錄於筆記內容；所述客戶端在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成網頁圖像並儲存於筆記資料庫與筆記訊息進行對應。

本發明所揭露之系統與方法如上，與先前技術的差異在於本發明是透過接收瀏覽網址判斷筆記資料庫中是否存在相應的筆記訊息及其對應的網頁圖像，假設筆記訊息存在則顯示相應的網頁圖像，並且在點選網頁圖像時載入相應 的筆記訊息以進行顯示並允許編輯，反之筆記訊息不存在時，則根據瀏覽網址下載相應的網頁文件以進行顯示，並且根據使用者的操作在筆記資料庫建立相應的筆記訊息。

透過上述的技術手段，本發明可以達成提高網頁的閱讀性，實現對瀏覽網頁筆記的自由添加並予以快速顯示之技術功效。

110‧‧‧筆記資料庫

120‧‧‧客戶端

121‧‧‧瀏覽模組

122‧‧‧操作模組

123‧‧‧記錄模組

124‧‧‧還原模組

130‧‧‧網路

300‧‧‧筆記訊息表

400‧‧‧瀏覽器

401‧‧‧游標

410‧‧‧網址輸入區塊

420‧‧‧查詢元件

430‧‧‧網頁顯示區塊

431‧‧‧網頁圖像

432‧‧‧筆記訊息

501~504‧‧‧操作元件

510‧‧‧高亮顯示

520‧‧‧底線

530‧‧‧註解區塊

步驟210‧‧‧筆記資料庫提供至少一筆記訊息及其對應的網頁圖像，每一筆記訊息包含一網址、一筆記位置及一筆記內容

步驟220‧‧‧客戶端接收一瀏覽網址，並且在該瀏覽網址與該筆記資料庫中每一筆記訊息的網址皆不匹配時，根據該瀏覽網址下載相應的一網頁文件以進行顯示

步驟230‧‧‧所述客戶端在該瀏覽網址與該筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息對應的網頁圖像以進行顯示，以及在載入的該網頁圖像被點選時，自該筆記資料庫載入相應的筆記訊息以進行顯示並允許編輯

步驟240‧‧‧所述客戶端在顯示該網頁文件時，產生一操作元件提供點選操作以自該筆記資料庫建立相應的筆記訊息，並且將該瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於該筆記位置、以及將操作結果記錄於該筆記內容

步驟250‧‧‧所述客戶端在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成該網頁圖像並儲存於該筆記資料庫與該筆記訊息進行對應

第1圖為本發明基於網頁的記錄系統之系統方塊圖。

第2圖為本發明基於網頁的記錄方法之方法流程圖。

第3圖為本發明筆記資料庫中的筆記訊息之示意圖。

第4圖為應用本發明瀏覽網頁圖像之示意圖。

第5圖為應用本發明還原筆記訊息之示意圖。

第6圖為應用本發明產生筆記訊息及其對應的網頁圖像之示意圖。

以下將配合圖式及實施例來詳細說明本發明之實施方式，藉此對本發明如何應用技術手段來解決技術問題並達成技術功效的實現過程能充分理解並據以實施。

在說明本發明所揭露之基於網頁的記錄系統及其方法之前，先對本發明所自行定義的名詞作說明，本發明所述操作元件可包含標記元件、文字輸入元件、清除元件及恢復元件其中之一，用以產生相應的網頁原始碼以嵌入網頁文件來呈現標記、文字輸入、清除及恢復的效果。稍後將配合實施例對網頁原始碼作詳細說明。

以下配合圖式對本發明基於網頁的記錄系統及其方法做進一步說明，請參閱「第1圖」，「第1圖」為本發 明基於網頁的記錄系統之系統方塊圖，此系統包含：筆記資料庫110及客戶端120，所述筆記資料庫110與客戶端120透過網路130相互連接。其中，筆記資料庫110用以儲存至少一個筆記訊息及其對應的網頁圖像，每一筆記訊息包含網址、筆記位置及筆記內容，舉例來說，筆記訊息中的網址為“www.abc.com”、筆記位置為“x：320；y：240”、筆記內容為“<div class=“style0”>文字一</div>”。在實際實施上，筆記內容可包含超文本標記語言(HyperText Markup Language,HTML)及層疊樣式表(Cascading Style Sheets,CSS)以便根據筆記位置控制筆記內容的顯示位置。另外，所述網頁圖像是擷取自網頁文件及筆記訊息的顯示畫面，也就是說，其通過抓圖的方式將具有筆記訊息的整個網頁頁面以圖像的方式儲存成網頁圖像。

至於在客戶端120的部分，客戶端120包含：瀏覽模組121、操作模組122、記錄模組123及還原模組124。其中，瀏覽模組121用以接收使用者鍵入的瀏覽網址，並且在瀏覽網址與筆記資料庫110中每一筆記訊息的網址皆不匹配時，根據此瀏覽網址透過網路130下載網頁文件以進行顯示。由於根據瀏覽網址下載網頁並進行顯示為習知技術，故在此不再多作贅述。

操作模組122用以在顯示網頁文件時，產生至少一個操作元件提供使用者進行點選操作，以便通過網路130在筆記資料庫110中建立相應的筆記訊息，並且將瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於筆記位置、以及將操作結果記錄於筆記內容。在實際實施上，不同的網頁文件可對應不同的網址，如：“www.abc.com/1.htm”、“www.abc.com/2.htm”......等等。甚至於同一個網頁文件的瀏覽網址可以在尾端增加“#1”、“#2”......等等用以儲存成不同的筆記訊息的網址，如：“www.abc.com/1.htm#1”、“www.abc.com/1.htm#2”，以便實現同一個網頁文件同時具 有不同的筆記訊息。接著，以將操作位置記錄於筆記位置的方式為例，假設使用者點選操作元件中的文字輸入元件後，緊接著在x座標“320”、y座標“240”的位置進行點選操作，例如：按壓滑鼠左鍵並輸入文字“文字二”，此時，操作模組122會將上述坐標記錄於筆記位置，如：“x：320；y：240”，並且根據文字輸入元件的點選操作產生相應的操作結果，如：“<p class=“style1”>文字二</p>”，其中，“文字二”是使用者鍵入的文字，然後將此操作結果記錄於筆記內容。接下來，假設使用者又點選操作元件中的文字輸入元件，且在x座標“120”、y座標“280”的位置進行點選操作，例如：按壓滑鼠左鍵並輸入文字“文字三”，此時，操作模組122記錄筆記位置的方式是在“x：320；y：240”的後面接續記錄“x：120；y：280”，而記錄筆記內容的方式則是在“<p class=“style1”>文字二</p>”的後面接續記錄“<p class=“style2”>文字三</p>”，倘若使用者繼續在同一網頁文件上點選操作則記錄方式如上所述並以此類推。特別要說明的是，所述點選操作可包含游標拖曳操作及游標點選操作至少其中之一；操作結果可包含產生標記及文字或兩者任一的網頁原始碼，以及清除標記及文字或兩者任一的網頁原始碼。

記錄模組123用以在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成網頁圖像並儲存於筆記資料庫110與該筆記訊息進行對應。在實際實施上，筆記訊息的顯示畫面是根據筆記位置呈現在網頁文件的顯示畫面上以形成網頁圖像，此網頁圖像可再經過壓縮、加密等等的處理方式進行儲存。

還原模組124用以在瀏覽網址與筆記資料庫110中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息所對應的網頁圖像以進行顯示，以及在載入的網頁圖像被點選時，自筆記資料庫110載入相應的筆記訊息以進行顯示並允 許編輯。舉例來說，假設使用者鍵入的瀏覽網址為“www.abc.com”、筆記資料庫110中有一個筆記訊息的網址也同樣為“www.abc.com”，那麼將判斷為匹配並載入此筆記訊息，還原模組124即可根據筆記訊息中的筆記位置來顯示筆記內容，在實際實施上，還原模組124可根據筆記位置產生相應的層疊樣式表，並且將此層疊樣式表連同筆記內容一併嵌入網頁文件的原始碼。

接著，請參閱「第2圖」，「第2圖」為本發明基於網頁的記錄方法，應用在具有客戶端及筆記資料庫的網路環境中，其步驟包括：筆記資料庫110提供筆記訊息及其對應的網頁圖像，每一筆記訊息包含網址、筆記位置及筆記內容(步驟210)；客戶端120接收瀏覽網址，並且在瀏覽網址與筆記資料庫110中每一筆記訊息的網址皆不匹配時，根據瀏覽網址下載相應的網頁文件以進行顯示(步驟220)；所述客戶端120在瀏覽網址與筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息對應的網頁圖像以進行顯示，以及在載入的網頁圖像被點選時，自筆記資料庫110載入相應的筆記訊息以進行顯示並允許編輯(步驟230)；所述客戶端120在顯示網頁文件時，產生操作元件提供點選操作以自筆記資料庫110建立相應的筆記訊息，並且將瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於筆記位置、以及將操作結果記錄於筆記內容(步驟240)；所述客戶端120在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成網頁圖像並儲存於筆記資料庫110與筆記訊息進行對應(步驟250)。透過上述步驟，即可透過接收瀏覽網址判斷筆記資料庫110中是否存在相應的筆記訊息及其對應的網頁圖像，假設筆記訊息存在則顯示相應的網頁圖像，並且在點選網頁圖像時載入相應的筆記訊息以進行顯示並允許編輯，反之筆記訊息不存在時，則根據瀏覽網址下載相應的網頁文件以進行顯示，並且根據使用者的操作在筆記資料 庫110建立相應的筆記訊息。

以下配合「第3圖」至「第6圖」以實施例的方式進行如下說明，請先參閱「第3圖」，「第3圖」為本發明筆記資料庫中的筆記訊息之示意圖。前面提到，筆記資料庫110預先儲存有至少一個筆記訊息及其對應的網頁圖像，在實際實施上，筆記訊息可如「第3圖」所示意儲存在筆記訊息表300中，此筆記資料庫110可為關聯式資料庫並且使每一筆記訊息各自與一個網頁圖像相對應，例如：透過索引鍵值的方式對應。在實際實施上，網址除了“www.abc.com”、“www.def.com”之外，還可以記錄為“www.def.com/index.htm”、“www.def.com/index.htm#1”......等形式。另外，筆記內容亦可包含層疊樣式表的原始碼，如：“#square{width：10px；height：10px；background：red；}<div id="square"></div>”或是使用“<link rel=”stylesheet”type=”text/css”href=“a.css”/>”來連接外部的層疊樣式表(以此例而言，其檔案名稱為“a.css”)，所述層疊樣式表可預先儲存在筆記資料庫110，至於層疊樣式表的內容則是各操作元件的樣式原始碼，如：第一個操作元件可產生紅色正方形圖像，則其樣式原始碼可為“.square{width：10px；height：10px；background：red；}”。

如「第4圖」所示意，「第4圖」為應用本發明瀏覽網頁圖像之示意圖。假設筆記資料庫110存在一個筆記訊息，此筆記訊息包含的網址為“www.abc.com”。那麼，當使用者在瀏覽器400的網址輸入區塊410鍵入“www.abc.com”並且以游標401點選查詢元件420後，瀏覽模組121將接收“www.abc.com”作為瀏覽網址，此時，還原模組124會判斷瀏覽網址與筆記資料庫110中的其中一筆記訊息的網址匹配，所以載入相應的筆記訊息所對應的網頁圖像431以顯示在網頁顯示區塊430中。

如「第5圖」所示意，「第5圖」為應用本發明 還原筆記訊息之示意圖。當使用者以游標401點選「第4圖」所示意的網頁圖像431時，還原模組124將從筆記資料庫110載入相應的筆記訊息432以顯示在網頁顯示區塊430中，並且允許使用者進行編輯。此筆記訊息432可透過浮動區塊的方式顯示。

請參閱「第6圖」，「第6圖」為應用本發明產生筆記訊息及其對應的網頁圖像之示意圖。前面提到，操作模組122會在顯示網頁文件時，產生至少一個操作元件提供使用者進行點選操作，如：操作元件(501~504)，以便在筆記資料庫110建立相應的筆記訊息，並且將瀏覽網址記錄在筆記訊息的網址中、將操作位置記錄於筆記位置、以及將操作結果記錄於筆記內容。假設使用者以游標401點選操作元件501，此操作元件501代表對選擇的文字進行高亮顯示，那麼，操作模組122會在筆記資料庫110建立相應的筆記訊息，並且將瀏覽網址“www.123.com”記錄於筆記訊息的網址，當使用者緊接著在網頁文件上的文字“網頁文字一”進行點選操作(以拖曳方式選擇文字)後，操作模組122會將此點選操作的位置記錄在筆記訊息的筆記位置，以及根據被點選的操作元件501產生高亮顯示的網頁原始碼(即操作結果)以記錄於筆記訊息的筆記內容中。如此一來，操作模組122即可使網頁文件上的文字“網頁文字一”如「第6圖」所示意呈現高亮顯示510。同樣地，假設操作元件502代表對選擇的文字增加底線520、操作元件503代表增加註解區塊530、操作元件504代表清除操作，使用者可點選不同的操作元件(501~504)來對網頁文件進行不同的點選操作以產生相應的操作結果。接著，記錄模組123會在操作模組122建立筆記訊息完成後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面(如：高亮顯示510、底線520及註解區塊530)以生成網頁圖像並儲存於筆記資料庫110與筆記訊息進行對應。

綜上所述，可知本發明與先前技術之間的差異在 於透過接收瀏覽網址判斷筆記資料庫110中是否存在相應的筆記訊息及其對應的網頁圖像，假設筆記訊息存在則顯示相應的網頁圖像，並且在點選網頁圖像時載入相應的筆記訊息以進行顯示並允許編輯，反之筆記訊息不存在時，則根據瀏覽網址下載相應的網頁文件以進行顯示，並且根據使用者的操作在筆記資料庫110建立相應的筆記訊息，藉由此一技術手段可以解決先前技術所存在的問題，進而達成提高網頁的閱讀性之技術功效。

雖然本發明以前述之實施例揭露如上，然其並非用以限定本發明，任何熟習相像技藝者，在不脫離本發明之精神和範圍內，當可作些許之更動與潤飾，因此本發明之專利保護範圍須視本說明書所附之申請專利範圍所界定者為準。

110‧‧‧筆記資料庫

120‧‧‧客戶端

121‧‧‧瀏覽模組

122‧‧‧操作模組

123‧‧‧記錄模組

124‧‧‧還原模組

130‧‧‧網路

Claims (10)

1. 一種基於網頁的記錄系統，該系統包含：一筆記資料庫，用以儲存至少一筆記訊息及其對應的網頁圖像，每一筆記訊息包含一網址、一筆記位置及一筆記內容；以及至少一客戶端，每一客戶端包含：一瀏覽模組，用以接收一瀏覽網址，並且在該瀏覽網址與該筆記資料庫中每一筆記訊息的網址皆不匹配時，根據該瀏覽網址下載相應的一網頁文件以進行顯示；一操作模組，用以在顯示該網頁文件時，產生一操作元件提供點選操作以自該筆記資料庫建立相應的筆記訊息，並且將該瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於該筆記位置、以及將操作結果記錄於該筆記內容；一記錄模組，用以在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成該網頁圖像並儲存於該筆記資料庫與該筆記訊息進行對應；以及一還原模組，用以在該瀏覽網址與該筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息對應的網頁圖像以進行顯示，以及在載入的該網頁圖像被點選時，自該筆記資料庫載入相應的筆記訊息以進行顯示並允許編輯。
2. 根據申請專利範圍第1項之基於網頁的記錄系統，其中所述操作元件至少包含標記元件、文字輸入元件、清除元件及恢復元件其中之一。
3. 根據申請專利範圍第1項之基於網頁的記錄系統，其中該筆記內容包含超文本標記語言及層疊樣式表以根據該筆記位置控制該筆記內容的顯示位置。
4. 根據申請專利範圍第1項之基於網頁的記錄系統，其中該點選操作包含游標拖曳操作及游標點選操作至少其中之。
5. 根據申請專利範圍第1項之基於網頁的記錄系統，其中該操作結果包含產生標記及文字或兩者任一的網頁原始碼，以及清除標記及文字或兩者任一的網頁原始碼。
6. 一種基於網頁的記錄方法，應用在具有至少一客戶端及一筆記資料庫的網路環境中，其步驟包括：該筆記資料庫提供至少一筆記訊息及其對應的網頁圖像，每一筆記訊息包含一網址、一筆記位置及一筆記內容；所述客戶端接收一瀏覽網址，並且在該瀏覽網址與該筆記資料庫中每一筆記訊息的網址皆不匹配時，根據該瀏覽網址下載相應的一網頁文件以進行顯示；所述客戶端在該瀏覽網址與該筆記資料庫中的其中一筆記訊息的網址匹配時，載入相應的筆記訊息對應的網頁圖像以進行顯示，以及在載入的該網頁圖像被點選 時，自該筆記資料庫載入相應的筆記訊息以進行顯示並允許編輯；所述客戶端在顯示該網頁文件時，產生一操作元件提供點選操作以自該筆記資料庫建立相應的筆記訊息，並且將該瀏覽網址記錄於筆記訊息的網址、將操作位置記錄於該筆記位置、以及將操作結果記錄於該筆記內容；以及所述客戶端在建立筆記訊息後，同時擷取顯示有筆記訊息顯示畫面的網頁文件畫面以生成該網頁圖像並儲存於該筆記資料庫與該筆記訊息進行對應。
7. 根據申請專利範圍第6項之基於網頁的記錄方法，其中所述操作元件至少包含標記元件、文字輸入元件、清除元件及恢復元件其中之一。
8. 根據申請專利範圍第6項之基於網頁的記錄方法，其中該筆記內容包含超文本標記語言及層疊樣式表以根據該筆記位置控制該筆記內容的顯示位置。
9. 根據申請專利範圍第6項之基於網頁的記錄方法，其中該點選操作包含游標拖曳操作及游標點選操作至少其中之一。
10. 根據申請專利範圍第6項之基於網頁的記錄方法，其中該操作結果包含產生標記及文字或兩者任一的網頁原始碼，以及清除標記及文字或兩者任一的網頁原始碼。