基于網(wǎng)頁的記錄系統(tǒng)及其方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種記錄系統(tǒng)及其方法，特別是指一種允許在網(wǎng)頁作筆記并儲存于網(wǎng)絡(luò)上的基于網(wǎng)頁的記錄系統(tǒng)及其方法。
【背景技術(shù)】
[0002]近年來，隨著互聯(lián)網(wǎng)的普及與蓬勃發(fā)展，瀏覽網(wǎng)頁已成為許多人日常生活的一部分，然而，網(wǎng)頁內(nèi)容受限于服務(wù)器，無法由網(wǎng)絡(luò)上的瀏覽者自行更改、增加注解或筆記，因此對于瀏覽者而言一直存在閱讀性不佳的問題。
[0003]一般而言，網(wǎng)頁存放于服務(wù)器中，網(wǎng)頁內(nèi)容則由服務(wù)器的管理者所控制，由于瀏覽者通常不具備服務(wù)器的管理權(quán)限，因此無法對網(wǎng)頁內(nèi)容進(jìn)行更改。也就是說，瀏覽者無法像閱讀書本一樣畫重點(diǎn)或做筆記，以實(shí)現(xiàn)對網(wǎng)頁的自由注釋和標(biāo)記，影響瀏覽者對網(wǎng)頁內(nèi)容的閱讀效率。
[0004]綜上所述，可知現(xiàn)有技術(shù)中長期以來一直存在網(wǎng)頁顯示內(nèi)容無法有效的自由添加筆記予以快速顯示的問題，因此實(shí)有必要提出改進(jìn)的技術(shù)手段，來解決此一問題。

【發(fā)明內(nèi)容】

[0005]本發(fā)明揭露一種基于網(wǎng)頁的記錄系統(tǒng)及其方法。
[0006]首先，本發(fā)明揭露一種基于網(wǎng)頁的記錄系統(tǒng)，此系統(tǒng)包含:筆記數(shù)據(jù)庫及客戶端。其中，筆記數(shù)據(jù)庫用以儲存筆記信息及其對應(yīng)的網(wǎng)頁圖像，每一筆記信息包含網(wǎng)址、筆記位置及筆記內(nèi)容。至于客戶端則包含瀏覽模塊、操作模塊、記錄模塊及還原模塊。其中，瀏覽模塊用以接收瀏覽網(wǎng)址，并且在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫中每一筆記信息的網(wǎng)址皆不匹配時，根據(jù)此瀏覽網(wǎng)址下載相應(yīng)的網(wǎng)頁文件以進(jìn)行顯示；操作模塊用以在顯示網(wǎng)頁文件時，產(chǎn)生操作元件提供點(diǎn)選操作以自筆記數(shù)據(jù)庫建立相應(yīng)的筆記信息，并且將瀏覽網(wǎng)址記錄于筆記信息的網(wǎng)址、將操作位置記錄于筆記位置、以及將操作結(jié)果記錄于筆記內(nèi)容；記錄模塊用以在建立筆記信息后，同時獲取顯示有筆記信息顯示畫面的網(wǎng)頁文件畫面以生成網(wǎng)頁圖像并儲存于筆記數(shù)據(jù)庫與筆記信息進(jìn)行對應(yīng)；還原模塊用以在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫中的其中一筆記信息的網(wǎng)址匹配時，加載相應(yīng)的筆記信息所對應(yīng)的網(wǎng)頁圖像以進(jìn)行顯示，以及在加載的網(wǎng)頁圖像被點(diǎn)選時，自筆記數(shù)據(jù)庫加載相應(yīng)的筆記信息以進(jìn)行顯示并允許編輯。
[0007]另外，本發(fā)明揭露一種基于網(wǎng)頁的記錄方法，其步驟包括:筆記數(shù)據(jù)庫提供筆記信息及其對應(yīng)的網(wǎng)頁圖像，每一筆記信息包含網(wǎng)址、筆記位置及筆記內(nèi)容；客戶端接收瀏覽網(wǎng)址，并且在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫中每一筆記信息的網(wǎng)址皆不匹配時，根據(jù)此瀏覽網(wǎng)址下載相應(yīng)的網(wǎng)頁文件以進(jìn)行顯示；所述客戶端在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫中的其中一筆記信息的網(wǎng)址匹配時，加載相應(yīng)的筆記信息所對應(yīng)的網(wǎng)頁圖像以進(jìn)行顯示，以及在加載的網(wǎng)頁圖像被點(diǎn)選時，自筆記數(shù)據(jù)庫加載相應(yīng)的筆記信息以進(jìn)行顯示并允許編輯；所述客戶端在顯示網(wǎng)頁文件時，產(chǎn)生操作元件提供點(diǎn)選操作以自筆記數(shù)據(jù)庫建立相應(yīng)的筆記信息，并且將瀏覽網(wǎng)址記錄于筆記信息的網(wǎng)址、將操作位置記錄于筆記位置、以及將操作結(jié)果記錄于筆記內(nèi)容；所述客戶端在建立筆記信息后，同時獲取顯示有筆記信息顯示畫面的網(wǎng)頁文件畫面以生成網(wǎng)頁圖像并儲存于筆記數(shù)據(jù)庫與筆記信息進(jìn)行對應(yīng)。
[0008]本發(fā)明所揭露的系統(tǒng)與方法如上，與現(xiàn)有技術(shù)的差異在于本發(fā)明是通過接收瀏覽網(wǎng)址判斷筆記數(shù)據(jù)庫中是否存在相應(yīng)的筆記信息及其對應(yīng)的網(wǎng)頁圖像，假設(shè)筆記信息存在則顯示相應(yīng)的網(wǎng)頁圖像，并且在點(diǎn)選網(wǎng)頁圖像時加載相應(yīng)的筆記信息以進(jìn)行顯示并允許編輯，反之筆記信息不存在時，則根據(jù)瀏覽網(wǎng)址下載相應(yīng)的網(wǎng)頁文件以進(jìn)行顯示，并且根據(jù)使用者的操作在筆記數(shù)據(jù)庫建立相應(yīng)的筆記信息。
[0009]通過上述的技術(shù)手段，本發(fā)明可以達(dá)成提高網(wǎng)頁的閱讀性，實(shí)現(xiàn)對瀏覽網(wǎng)頁筆記的自由添加并予以快速顯示的技術(shù)功效。
【附圖說明】
[0010]圖1為本發(fā)明基于網(wǎng)頁的記錄系統(tǒng)的系統(tǒng)方塊圖。
[0011]圖2為本發(fā)明基于網(wǎng)頁的記錄方法的方法流程圖。
[0012]圖3為本發(fā)明筆記數(shù)據(jù)庫中的筆記信息的示意圖。
[0013]圖4為應(yīng)用本發(fā)明瀏覽網(wǎng)頁圖像的示意圖。
[0014]圖5為應(yīng)用本發(fā)明還原筆記信息的示意圖。
[0015]圖6為應(yīng)用本發(fā)明產(chǎn)生筆記信息及其對應(yīng)的網(wǎng)頁圖像的示意圖。
[0016]【符號說明】
[0017]110筆記數(shù)據(jù)庫
[0018]120客戶端
[0019]121瀏覽模塊
[0020]122操作模塊
[0021]123記錄模塊
[0022]124還原模塊
[0023]130 網(wǎng)絡(luò)
[0024]300筆記信息表
[0025]400瀏覽器
[0026]401 光標(biāo)
[0027]410網(wǎng)址輸入?yún)^(qū)塊
[0028]420查詢元件
[0029]430網(wǎng)頁顯示區(qū)塊
[0030]431網(wǎng)頁圖像
[0031]432筆記信息
[0032]501?504操作元件
[0033]510聞売顯不
[0034]520 底線
[0035]530注解區(qū)塊
【具體實(shí)施方式】
[0036]以下將配合圖式及實(shí)施例來詳細(xì)說明本發(fā)明的實(shí)施方式，藉此對本發(fā)明如何應(yīng)用技術(shù)手段來解決技術(shù)問題并達(dá)成技術(shù)功效的實(shí)現(xiàn)過程能充分理解并據(jù)以實(shí)施。
[0037]在說明本發(fā)明所揭露的基于網(wǎng)頁的記錄系統(tǒng)及其方法之前，先對本發(fā)明所自行定義的名詞作說明，本發(fā)明所述操作元件可包含標(biāo)記元件、文字輸入元件、清除元件及恢復(fù)元件其中之一，用以產(chǎn)生相應(yīng)的網(wǎng)頁原始碼以嵌入網(wǎng)頁文件來呈現(xiàn)標(biāo)記、文字輸入、清除及恢復(fù)的效果。稍后將配合實(shí)施例對網(wǎng)頁原始碼作詳細(xì)說明。
[0038]以下配合圖式對本發(fā)明基于網(wǎng)頁的記錄系統(tǒng)及其方法做進(jìn)一步說明，請參閱「圖1」，「圖1」為本發(fā)明基于網(wǎng)頁的記錄系統(tǒng)的系統(tǒng)方塊圖，此系統(tǒng)包含:筆記數(shù)據(jù)庫110及客戶端120，所述筆記數(shù)據(jù)庫110與客戶端120通過網(wǎng)絡(luò)130相互連接。其中，筆記數(shù)據(jù)庫110用以儲存至少一個筆記信息及其對應(yīng)的網(wǎng)頁圖像，每一筆記信息包含網(wǎng)址、筆記位置及筆記內(nèi)容，舉例來說，筆記信息中的網(wǎng)址為“www.abc.com”、筆記位置為“x: 320; y: 240”、筆記內(nèi)容為“〈div class= “styleO”〉文字一 </div>”。在實(shí)際實(shí)施上，筆記內(nèi)容可包含超文本標(biāo)記語言(Hyper Text Markup Language, HTML)及層疊樣式表(Cascading StyleSheets，CSS)以便根據(jù)筆記位置控制筆記內(nèi)容的顯示位置。另外，所述網(wǎng)頁圖像是獲取自網(wǎng)頁文件及筆記信息的顯示畫面，也就是說，其通過抓圖的方式將具有筆記信息的整個網(wǎng)頁頁面以圖像的方式儲存成網(wǎng)頁圖像。
[0039]至于在客戶端120的部分，客戶端120包含:瀏覽模塊121、操作模塊122、記錄模塊123及還原模塊124。其中，瀏覽模塊121用以接收使用者鍵入的瀏覽網(wǎng)址，并且在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫110中每一筆記信息的網(wǎng)址皆不匹配時，根據(jù)此瀏覽網(wǎng)址通過網(wǎng)絡(luò)130下載網(wǎng)頁文件以進(jìn)行顯示。由于根據(jù)瀏覽網(wǎng)址下載網(wǎng)頁并進(jìn)行顯示為公知技術(shù)，故在此不再多作贅述。
[0040]操作模塊122用以在顯示網(wǎng)頁文件時，產(chǎn)生至少一個操作元件提供使用者進(jìn)行點(diǎn)選操作，以便通過網(wǎng)絡(luò)130在筆記數(shù)據(jù)庫110中建立相應(yīng)的筆記信息，并且將瀏覽網(wǎng)址記錄于筆記信息的網(wǎng)址、將操作位置記錄于筆記位置、以及將操作結(jié)果記錄于筆記內(nèi)容。在實(shí)際實(shí)施上，不同的網(wǎng)頁文件可對應(yīng)不同的網(wǎng)址，如:“www.abc.com/1.htm”、“www.abc.com/2, htm”......等等。甚至于同一個網(wǎng)頁文件的瀏覽網(wǎng)址可以在尾端增加“#1”、
“#2，，......等等用以儲存成不同的筆記信息的網(wǎng)址，如:“www.abc.com/1.htm#l”、“www.abc.com/1.htm#2”，以便實(shí)現(xiàn)同一個網(wǎng)頁文件同時具有不同的筆記信息。接著，以將操作位置記錄于筆記位置的方式為例，假設(shè)使用者點(diǎn)選操作元件中的文字輸入元件后，緊接著在X坐標(biāo)“320”、y坐標(biāo)“240”的位置進(jìn)行點(diǎn)選操作，例如:按壓鼠標(biāo)左鍵并輸入文字“文字二”，此時，操作模塊122會將上述坐標(biāo)記錄于筆記位置，如:“X:320;y:240”，并且根據(jù)文字輸入元件的點(diǎn)選操作產(chǎn)生相應(yīng)的操作結(jié)果，如:“〈P class= “stylel”〉文字二 </p>”，其中，“文字二”是使用者鍵入的文字，然后將此操作結(jié)果記錄于筆記內(nèi)容。接下來，假設(shè)使用者又點(diǎn)選操作元件中的文字輸入元件，且在X坐標(biāo)“120”、y坐標(biāo)“280”的位置進(jìn)行點(diǎn)選操作，例如:按壓鼠標(biāo)左鍵并輸入文字“文字三”，此時，操作模塊122記錄筆記位置的方式是在“x:320;y:240”的后面接續(xù)記錄“x: 120;y:280”,而記錄筆記內(nèi)容的方式則是在“<pclass= “stylel”〉文字二 </p>”的后面接續(xù)記錄“<p class= “style2”> 文字三 </p>”,倘若使用者繼續(xù)在同一網(wǎng)頁文件上點(diǎn)選操作則記錄方式如上所述并以此類推。特別要說明的是，所述點(diǎn)選操作可包含光標(biāo)拖曳操作及光標(biāo)點(diǎn)選操作至少其中之一；操作結(jié)果可包含產(chǎn)生標(biāo)記及文字或兩者任一的網(wǎng)頁原始碼，以及清除標(biāo)記及文字或兩者任一的網(wǎng)頁原始碼。
[0041]記錄模塊123用以在建立筆記信息后，同時獲取顯示有筆記信息顯示畫面的網(wǎng)頁文件畫面以生成網(wǎng)頁圖像并儲存于筆記數(shù)據(jù)庫110與該筆記信息進(jìn)行對應(yīng)。在實(shí)際實(shí)施上，筆記信息的顯示畫面是根據(jù)筆記位置呈現(xiàn)在網(wǎng)頁文件的顯示畫面上以形成網(wǎng)頁圖像，此網(wǎng)頁圖像可再經(jīng)過壓縮、加密等等的處理方式進(jìn)行儲存。
[0042]還原模塊124用以在瀏覽網(wǎng)址與筆記數(shù)據(jù)庫110中的其中一筆記信息的網(wǎng)址匹配時，加載相應(yīng)的筆記信息所對應(yīng)的網(wǎng)頁圖像以進(jìn)行顯示，以及在加載的網(wǎng)頁圖像被點(diǎn)選時，自筆記數(shù)據(jù)庫110加載相應(yīng)的筆記信息以進(jìn)行顯示并允許編輯。舉例來說，假設(shè)使用者鍵入的瀏覽網(wǎng)址為“WWW.abc.com”、筆記數(shù)據(jù)庫110中有一個筆記信息的網(wǎng)址也同樣為“www.abc.com”，那么將判斷為匹配并加載此筆記信息，還原模塊124即可根據(jù)筆記信息中的筆記位置來顯示筆記內(nèi)容，在實(shí)際實(shí)施上，還原模塊124可根據(jù)筆記位置產(chǎn)生相應(yīng)的層疊樣式表,并且將此層疊樣式表連同筆記內(nèi)容一并嵌入網(wǎng)頁文件的原始碼。
[0043]接著，請參閱「圖2」，「圖2」為本發(fā)明基于網(wǎng)頁的記錄方法的流程圖，應(yīng)用在具有客戶端及筆記數(shù)據(jù)庫的網(wǎng)絡(luò)環(huán)