TWI822602B

TWI822602B - 網頁編輯系統及其方法

Info

Publication number: TWI822602B
Application number: TW112107103A
Authority: TW
Inventors: 呂英璋
Original assignee: 呂英璋
Priority date: 2023-02-24
Filing date: 2023-02-24
Publication date: 2023-11-11
Also published as: US11966685B1

Abstract

本發明為一種網頁編輯系統及其方法，此系統包括轉換單元及編輯單元，轉換單元設有複數個語法轉換模組，每一個語法轉換模組對應一個網頁編輯指令，每一個網頁編輯指令的一部份以自然語言的語法結構定義而成，編輯單元使用複數個網頁編輯指令的其中之一或任二者以上的組合編輯成網頁編輯指令集，當該編輯單元執行該網頁編輯指令集，由該編輯單元取用在該轉換單元中所對應的該語法轉換模組，用以轉換成一網頁元素。

Description

網頁編輯系統及其方法

本發明有關於編輯系統及其方法，尤指一種使用自然語言的語法結構進行網頁編輯的系統及其方法。

目前網頁程式設計師製作網頁的基礎技術，為以超文字標記語言(HyperText Markup Language，簡稱：HTML)語法編輯的程式碼為主。這些年來，網頁製作技術蓬勃發展，網頁的內容開始嵌入了許多圖像及物件，使得網頁出現多元的樣貌，實際上僅是在HTML的基礎架構之下，加入階層式樣式表(CascadingStyleSheets)的語法的程式碼，來定義文字和其它元素的外觀與布局，或者由爪哇描述語言(JavaScript)的語法的程式碼，來影響增添網頁的新行為，例如嵌入動態文字於HTML頁面、檢測訪客的瀏覽器資訊或對瀏覽器事件作出回應…等行為。

由於，網頁呈現的方式不斷地推陳出新，或者是網頁內容要進行更新，因此，網頁程式設計師就要對網頁的各種程式語言的程式碼進行編輯修改。當網頁的原始碼不斷地進行編輯修改之後，網頁的程式碼會越來越雜亂。而且各種在程式語言的語法定義各自有不同的方式，而語法的種類太多，且與自然語言的語法架構差異甚多，這樣的情況下，網頁程式設計師將可能很難尋找需要修改的程式碼區段，甚至是很難理解程式碼所對應的網頁內容。

基於上述的原因，實有需要針對網頁的製作方式進行改善，讓網頁程式設計師可以很快地找到所要進行修改編輯的程式碼區段，來解決目前網頁的程式碼在多次編輯後會越來越雜亂，導致後續修改編輯上的困難之問題。

有鑑於先前技術的問題，本發明的目的是使得網頁編輯的方式更貼近於人類的自然語言架構，並以精簡程式碼的位元數量，來實現各種網頁元素，也使得日後的網頁編輯或修改較為簡單容易。

根據本發明之目的，提供一種網頁編輯系統，包括轉換單元及編輯單元，其中轉換單元設有複數個語法轉換模組，每一個語法轉換模組對應一個網頁編輯指令，每一個網頁編輯指令的一部份以自然語言的語法結構定義而成，編輯單元使用複數個網頁編輯指令的其中之一或任二者以上的組合編輯成網頁編輯指令集，當編輯單元執行網頁編輯指令集，由編輯單元取用在轉換單元中所對應的語法轉換模組，得每一個網頁編輯指令集被轉換成一網頁元素。

其中，網頁元素為超文本標記語言、樣式表語言或爪哇描述語言的其中之一的程式碼或任二者以上的程式碼組合。

其中，每一個網頁編輯指令包括功能指令部及內容描述部的其中之一或任二者以上之組合，功能指令部的內容之以自然語言的語法結構編輯而成，而內容描述部的內容則為參數、變數或值的其中之一或任二者以上之組合。

其中，每一網頁編輯指令的功能指令部關聯到複數個語法轉換模組的其中一個，使得編輯單元在執行網頁編輯指令集時，編輯單元以功能指令部的內容取得在轉換單元中所對應的語法轉換模組，並且每一個網頁編輯指令的該內容描述部的內容，則為網頁編輯指令的任一功能指令部需要套用到對應的語法轉換模組的參數、變數或值的其中之一或任二者以上之組合。

其中，每一個語法轉換模組是根據每一個網頁編輯指令轉換為網頁元素的轉換關係，事先以一程式語言編輯而成的程式碼。

其中，程式語言為爪哇程式語言、爪哇描述程式語言、C程式語言、Rust程式語言、Go程式語言、WebAssembly程式語言、Python程式語言、Ruby程式語言、PHP程式語言、或者C++。

其中，轉換單元及編輯單元以程式語言編輯而成的一轉換應用程式，轉換應用程式包括複數個轉換函式，每一個轉換函式分別對應該複數個語法轉換模組的其中一個，該轉換應用程式執行每一該網頁編輯指令時，使用該複數個轉換函式的其中一個或任二個以上的組合，用以轉換出該網頁元素。

其中，網頁編輯系統建立存放複數個轉換函式的本地函式庫，或者網頁編輯系統連接的遠端資料伺服器中建立存放複數個轉換函式的遠端函式庫。

根據本發明之目的，提供一種網頁編輯方法，應用於一網頁編輯系統，網頁編輯系統包括一編輯單元及一轉換單元，轉換單元設有複數個語法轉換模組，每一語法轉換模組對應一網頁編輯指令，每一網頁編輯指令包括一功能指令部及一內容描述部，而功能指令部以自然語言的語法結構定義而成，網頁編輯方法包括下列步驟，編輯單元接收一網頁編輯指令集，網頁編輯指令集為一個或多個網頁編輯指令編輯而成，編輯單元執行網頁編輯指令集，並且在執行過程中解析網頁編輯指令集的每一網頁編輯指令的功能指令部及內容描述部，編輯單元根據每一網頁編輯指令的順序取得每一功能指令部在轉換單元中對應的語法轉換模組，編輯單元將每一網頁編輯指令的內容描述部套入到對應的語法轉換模組中，以輸出一網頁元素。

其中，每一語法轉換模組根據每一該網頁編輯指令轉換為該網頁元素的轉換關係，事先以程式語言編輯的程式碼所組成。

據上所述，本發明可以讓使用者以接近自然語言的語法架構來編輯網頁內容，如此，當網頁內容需要修改時，網頁設計工程師可以很容易的找到對應要修改的程式碼的位置，即使網頁的程式碼經過多次修改，依然可以保持簡潔易懂的程式碼架構。

1:轉換單元

10:語法轉換模組

2:編輯單元

20:網頁編輯指令集

200:網頁編輯指令

30:按鈕框

32:實心圓形圖案

S101~S104:步驟

圖1為本發明的系統架構示意圖。

圖2為在網頁上顯示畫圓的按鈕框的畫面示意圖。

圖3為圖2的按鈕框被按壓後顯示實心圓形圖案的畫面示意圖。

圖4為本發明之一實施例的網頁編輯指令集與轉換函式的一對照示意圖。

圖5為本發明之一實施例的網頁編輯指令集與轉換函式的另一對照示意圖。

圖6為本發明之一實施例的網頁編輯指令集與轉換函式的又另一對照示意圖。

圖7為本發明方法流程示意圖。

圖8為本發明之另一實施例的網頁編輯指令集與網頁原始碼的對照示意圖。

圖9為本發明之又另一實施例的網頁編輯指令集與網頁原始碼的對照示意圖。

本發明之實施例將藉由下文配合相關圖式進一步加以解說。盡可能的，於圖式與說明書中，相同標號係代表相同或相似構件。於圖式中，基於簡化與方便標示，形狀與厚度可能經過誇大表示。可以理解的是，未特別顯示於圖式中或描述於說明書中之元件，為所屬技術領域中具有通常技術者所知之形態。本領域之通常技術者可依據本發明之內容而進行多種之改變與修改。

請參閱圖1，本發明為一種網頁編輯系統，包括轉換單元1及編輯單元2，其中轉換單元1設有複數個語法轉換模組10，每一個語法轉換模組10對應一個網頁編輯指令200，每一個網頁編輯指令200的一部份以自然語言的語法結構定義而成，編輯單元2使用複數個網頁編輯指令200的其中之一或任二者以上的組合編輯成網頁編輯指令集20，當編輯單元2執行網頁編輯指令集20，由編輯單元2取用在轉換單元1中所對應的語法轉換模組10，用以轉換成一網頁元素。

在本發明的一些實施例中，每一個語法轉換模組10是根據每一網頁編輯指令200轉換為網頁元素的轉換關係，事先以程式語言編輯的程式碼所組成。

在一些實施例中，為了能夠執行每一行網頁編輯指令200，轉換單元1為以爪哇描述程式語言(JavaScript)根據各轉換關係編寫轉換應用程式(Transform Application)，以及複數個轉換函式(function)，每一個轉換函式分別對應複數個語法轉換模組10的其中一個，轉換應用程式執行每一行網頁編輯指令200時，使用複數個轉換函式的其中一個或任二個以上的組合，用以轉換出相當於超文本標記語言、樣式表語言或爪哇描述語言的其中之一或任二者以上的程式碼，使得網頁瀏覽器執行超文本標記語言、樣式表語言或爪哇描述語言的其中之一或任二者以上的程式碼，並在網頁瀏覽器中呈現對應的網頁元素。然而，本發明不以前述程式語言為限制，前述轉換應用程式可以是透過爪哇程式語言、C程式語言、Rust程式語言、Go程式語言、WebAssembly程式語言、Python程式語言、Ruby程式語言、PHP程式語言、或者C++所編輯而成。

在本發明中，每一個網頁編輯指令200包括功能指令部及內容描述部的其中之一或任二者以上之組合。功能指令部的內容之以自然語言的語法結構編輯而成，而內容描述部的內容則為功能指令部需要的參數、變數或值的其中之一或任二者以上之組合。

舉例而言，我們要在網頁的座標位置上X軸方向的第50個像素以及Y軸方向的第50個像素交集的位置顯示一個網頁元素為畫圓的按鈕框30(如圖2所示)，而且在按鈕框30被按壓後可以在網頁位置顯示一個網頁元素為在X軸方向的第300個像素以及Y軸方向的第200個像素交集的位置為圓心畫出一個半徑為150個像素大小的實心圓形圖案32(如圖3所示)。編輯單元2所編輯的網頁編輯指令集20，如下表所示：

前述的網頁編輯指令集20的列表中，第1~5行的網頁編輯指令200的「初始化」、「建立按鈕」、「座標」、「點擊」、「圓」為網頁編輯指令 200中一部份以自然語言的語法結構定義而成者，「_」或者「._」是轉換應用程式借鏡爪哇描述程式語言呼叫函式的語法，網頁編輯指令200的功能指令部以「_」或者「._」加上一部份以自然語言的語法結構組成。而「=_=>{」及「(_=>{、」等也是轉換應用程式借鏡爪哇描述程式語言(JavaScript)呼叫函式的語法，及「("畫圓")」、「(50,50)」及「(300,200,150)」等參數、變數或值組成內容描述部。

為了進一步了解本發明的網頁編輯指令200與語法轉換模組10(即轉換應用程式的轉換函式)之對應關係，如圖4~6所示，在圖4~6中的左欄為網頁編輯指令集20，並且以灰底標記其中一個網頁編輯指令200，右欄為灰底標記的網頁編輯指令200所對應的轉換函式的程式碼內容的一部份。我們可以看到每一網頁編輯指令200的功能指令部利用「_」或者「._」加上一部份以自然語言的語法結構的語法，用以關聯到複數個語法轉換模組10的其中一個，例如：如圖4所示，網頁編輯指令200的「_建立按鈕」關聯到「function_建立按鈕」，而後續的(按鈕名稱，類別，nobody)則取自於內容描述部，由於內容描述部中只有對應按鈕名稱「("畫圓")」，並沒有類別及nobody等對應的參數、變數或值，則依照爪哇描述程式語言的語法規則處理，圖5的「._座標(50,50)」及圖6的「._點擊(_=>{」也是相同或類似的語法架構。

綜上所述，轉換應用程式利用功能指令部關聯到其中一個轉換函式，使得編輯單元2在利用轉換應用程式執行網頁編輯指令集20時，編輯單元2以功能指令部的內容取得在轉換應用程式中所對應的轉換函式，並且每一個網頁編輯指令200的內容描述部的內容，則為網頁編輯指令200的任一功能指令部需要套用到對應的轉換函式的參數、變數或值的其中之一或任二者以上之組合。

在本發明中，在網頁編輯系統中的建立存放各轉換函式的本地函式庫(Local Library)，或者在網頁編輯系統連接的遠端資料伺服器中建立存放各轉換函式的遠端函式庫，或者前述兩者的組合。

請參閱圖7所示，本發明一種網頁編輯方法，應用於一網頁編輯系統，網頁編輯系統包括轉換單元1及編輯單元2，轉換單元1設有複數個語法轉換模組10，每一語法轉換模組10對應一網頁編輯指令200，每一網頁編輯指令200包括一功能指令部及一內容描述部，而功能指令部以自然語言的語法結構定義而成，網頁編輯方法包括下列步驟：(S101)編輯單元2接收一網頁編輯指令集20，網頁編輯指令集20為一個或多個網頁編輯指令200編輯而成；(S102)編輯單元2執行網頁編輯指令集20，並且在執行過程中解析網頁編輯指令集20的每一網頁編輯指令200的功能指令部及內容描述部；(S103)編輯單元2根據每一網頁編輯指令200的順序取得每一功能指令部在轉換單元1中對應的語法轉換模組10；(S104)編輯單元2將每一網頁編輯指令200的內容描述部套入到對應的語法轉換模組10中，以輸出一網頁元素。

在步驟(S104)中，每一語法轉換模組10根據每一個網頁編輯指令轉換為網頁元素的一轉換關係，事先以程式語言編輯的程式碼所組成。進一步而言，每一個語法轉換模組10將每一網頁編輯指令200轉換成對應的超文本標記語言、樣式表語言或爪哇描述語言的其中之一或任二者以上的程式碼，使得網頁瀏覽器執行超文本標記語言、樣式表語言或爪哇描述語言的其中之一或任二者以上的程式碼，並呈現對應的網頁元素。

本發明的網頁編輯指令集20相較於傳統直接以超文字標記語言、爪哇描述語言及階層式樣式表等編輯而成的網頁原始碼而言，網頁編輯指令集20的編輯內容更為簡潔易懂，如圖8所示，左欄為網頁編輯指令集20，右欄為左欄的網頁編輯指令集20以超文字標記語言、爪哇描述語言及階層式樣式表等編輯的網頁原始碼，其中網頁編輯指令集20為85個字元數，而網頁原始碼為301個字元數，兩者相較可知，本發明節省了約72%的字元數。圖8所示的網頁編輯指令集20及網頁原始碼所呈現出來的網頁元素，如下所示：

又，如圖9所示，左欄為網頁編輯指令集20，右欄為左欄的網頁編輯指令集20以超文字標記語言、爪哇描述語言及階層式樣式表等編輯的網頁原始碼，其中網頁編輯指令集20為395個字元數，而網頁原始碼為659個字元數，兩者相較可知，本發明節省了約40%的字元數。圖9所示的網頁編輯指令集20及網頁原始碼所呈現出來的網頁元素，如下所示：

據上所述，本發明的編輯單元2是將網頁編輯指令集20利用語法轉換模組10轉換成以超文字標記語言、爪哇描述語言及階層式樣式表等編輯的網頁原始碼。而編輯單元2可以是為前述以轉換應用程式軟體的方式安裝在電腦的作業系統中編輯及執行，也可以是利用網路瀏覽器連接到編輯網頁上編輯及執行。

此外，由本發明中可以發現在網路瀏覽器上呈現相同的網頁元素，本發明的網頁編輯指令集20的編輯及修改，比傳統超文字標記語言、爪哇描述語言及階層式樣式表等編輯的網頁原始碼的編輯修改容易，也可以快速地找到對應要修改的內容。再者，本發明的網頁編輯指令集20的編輯字元數比起網頁原始碼的字元數少，表示本發明可以減少編輯時間。

再者，本發明相較於網頁編輯商業軟體(例如：Dreamweaver)而言，網頁編輯商業軟體在完成編輯後的網頁原始碼複雜難懂，而且以不同的網頁編輯商業軟體進行後續編輯時，可能發生不相容的問題。或者以本發明相較於其他為了簡化編輯網頁程式碼的簡化程式語言(例如：jquery)而言，僅是針對簡化爪哇描述語言的語法，並未整合超文字標記語言及階層式樣式表，所以本發明也解決了許多傳統網頁編輯商業軟體與簡化程式語言的問題。

以上所述，僅為舉例說明本發明的較佳實施方式，並非以此限定實施的範圍，凡是依本發明申請專利範圍及專利說明書內容所作的簡單置換及等效變化，皆屬本發明的專利申請範疇。

1:轉換單元

10:語法轉換模組

2:編輯單元

20:網頁編輯指令集

200:網頁編輯指令

Claims

一種網頁編輯系統，包括：一轉換單元，該轉換單元設有複數個語法轉換模組，每一該語法轉換模組對應一網頁編輯指令，每一該網頁編輯指令的一部份以自然語言的語法結構定義而成，且每一該語法轉換模組是根據每一該網頁編輯指令轉換為各自的一網頁元素的轉換關係，事先以一程式語言編輯而成的程式碼；以及一編輯單元，該編輯單元使用該複數個網頁編輯指令的其中之一或任二者以上的組合編輯成一網頁編輯指令集；其中，該編輯單元執行該網頁編輯指令集，由該編輯單元取用在該轉換單元中所對應的該語法轉換模組，又該轉換單元及該編輯單元以該程式語言編輯而成的一轉換應用程式，該轉換應用程式包括複數個轉換函式，每一該轉換函式分別對應該複數個語法轉換模組的其中一個，該轉換應用程式執行每一該網頁編輯指令時，使用該複數個轉換函式的其中一個或任二個以上的組合，用以轉換出各自的該網頁元素。
如請求項2所述的網頁編輯系統，其中該程式語言為爪哇程式語言、爪哇描述程式語言、C程式語言、Rust程式語言、Go程式語言、WebAssembly程式語言、Python程式語言、Ruby程式語言、PHP程式語言、或者C++。
如請求項1所述的網頁編輯系統，其中該網頁編輯系統建立存放該複數個轉換函式的一本地函式庫，或者該網頁編輯系統連接的一遠端資料伺服器中建立存放該複數個轉換函式的一遠端函式庫。
如請求項1所述的網頁編輯系統，其中該網頁元素為超文本標記語言、樣式表語言或爪哇描述語言的其中之一或任二者以上的組合。
如請求項1所述的網頁編輯系統，其中每一該網頁編輯指令包括一功能指令部及一內容描述部的其中之一或任二者以上之組合，該功能指令部的內容以自然語言的語法結構編輯而成，而該內容描述部的內容則為的參數、變數或值的其中之一或任二者以上之組合。
如請求項5所述的網頁編輯系統，其中該每一該網頁編輯指令的該功能指令部關聯到該複數個語法轉換模組的其中一個，使得該編輯單元在執行該網頁編輯指令集時，該編輯單元以該功能指令部的內容取得對應的該語法轉換模組，並且每一該網頁編輯指令的該內容描述部的內容，則為該網頁編輯指令的任一該功能指令部需要套用到對應的該語法轉換模組的參數、變數或值的其中之一或任二者以上之組合。
一種網頁編輯方法，應用於一網頁編輯系統，該網頁編輯系統包括一編輯單元及一轉換單元，該轉換單元設有複數個語法轉換模組，每一該語法轉換模組對應一網頁編輯指令，每一該網頁編輯指令包括一功能指令部及一內容描述部，而該功能指令部以自然語言的語法結構定義而成，且每一該語法轉換模組是根據每一該網頁編輯指令轉換為各自的一網頁元素的一轉換關係，事先以一程式語言編輯而成的一程式碼，該網頁編輯方法包括下列步驟：該編輯單元接收一網頁編輯指令集，該網頁編輯指令集為一個或多個該網頁編輯指令編輯而成；該編輯單元執行該網頁編輯指令集，並且在執行過程中解析該網頁編輯指令集的每一該網頁編輯指令的該功能指令部及該內容描述部；該編輯單元根據每一該網頁編輯指令的順序取得每一該功能指令部在該轉換單元中對應的該語法轉換模組；以及該編輯單元將每一該網頁編輯指令的該內容描述部套入到對應的該語法轉換模組中；其中，該轉換單元及該編輯單元以該程式語言編輯而成的一轉換應用程式，該轉換應用程式包括複數個轉換函式，每一該轉換函式分別對應該複數個語法轉換模組的其中一個該轉換應用程式執行每一該網頁編輯指令，使用該複數個轉換函式的其中一個或任二個以上的組合，用以轉換出該程式語言的各自的該程式碼，使得各自的該程式碼在一網頁瀏覽器呈現各自對應的該網頁元素。