TW201327353A

TW201327353A - 網頁瀏覽之系統和方法

Info

Publication number: TW201327353A
Application number: TW100148551A
Authority: TW
Inventors: Shih-Ting Huang; Jian-Wei Lee
Original assignee: Acer Inc
Priority date: 2011-12-26
Filing date: 2011-12-26
Publication date: 2013-07-01
Also published as: TWI456483B

Abstract

一種網頁瀏覽系統，包括：一擷取器，擷取一輸入網頁之一原始碼；一網頁分析器，用以分析上述原始碼，並產生一分析結果；一處理器，使用一網頁排版演算法根據上述分析結果修改上述原始碼以產生一修改原始碼；以及一顯示裝置，根據上述修改原始碼顯示一本地端網頁。

Description

網頁瀏覽之系統和方法

本發明主要關於網頁瀏覽技術，特別係有關於修改輸入網頁原始碼之網頁瀏覽技術。

在網路盛行的時代，網頁瀏覽為每個人上網操作型態之一，然而在眾多上網裝置設備中，單一版本的網頁設計是無法完全適用並顯示在設備上。例如，針對電腦滑鼠鍵盤操作的網頁，若是原封不動地搬移到智慧型電視上，電視所提供的遙控器可能無法方便且順利地完成網頁設計出的功能，因為遙控器無法完全取代滑鼠與眾多按鍵的鍵盤。此外，若是將原來於電腦所呈現之網頁內容呈現於小尺寸螢幕的手機或是平板電腦上面，所呈現之畫面的比例會因為手機或是平板電腦之螢幕之尺寸限制，使用者必須繁複地放大縮小調整畫面，對於使用者係相當不方便之瀏覽方式。此外，原始網頁內容中，無可避免的會有相當多的廣告，將會使手機或平板電腦小尺寸顯示器使用者，操作更加不易。

雖然有些入口網站，例如，Google與Yahoo！等，有提供專門為了小尺寸螢幕的手機或平板電腦設計出手機版本的網頁，但畢竟還是少數，從入口網站進入到別的網頁時，還是會遇到上述的問題。

此外，針對電腦瀏覽方式設計的網頁版本中，其瀏覽方式可透過滑鼠的點選得以方便使用者瀏覽，但若將此瀏覽方式直接在智慧型電視上觀看，是無法透過一般遙控器操作的，就算是透過具有重力感應器(G-sensor)的遙控器，也沒有辦法完全克服使用上的不便利性，可能會造成手痠，無法正確定位等。此外，若是採用鍵盤，雖然可以透過「Tab」按鍵可以切換選取可點選的選項，但無法方便地選到使用者想要點選的位置，只能依序由網頁內的選項第一個點到最後一個，如果使用者要的選項在第五個，但若是點選錯誤，得要點選到最後一個後才跳回第一個選項，這樣的操作方式是相當繁瑣的。

有鑑於上述先前技術之問題，本發明提供了一種網頁瀏覽系統和方法，可利用重新排版網頁之原始碼，產生一本地端網頁供使用者瀏覽，此外本發明更針對智慧型電視提供了一種網頁瀏覽系統和方法。

根據本發明之一實施例提供了一種網頁瀏覽系統，包括：一擷取器，擷取一輸入網頁之一原始碼；一網頁分析器，用以分析上述原始碼，並產生一分析結果；一處理器，使用一網頁排版演算法根據上述分析結果修改上述原始碼以產生一修改原始碼；以及一顯示裝置，根據上述修改原始碼顯示一本地端網頁。

根據本發明之一實施例提供了一種網頁瀏覽系統，適用於利用一遙控器操作一智慧型電視瀏覽網頁，包括：一顯示裝置，顯示一輸入網頁以及一游標；一擷取器，擷取上述輸入網頁之一原始碼；一網頁分析器，用以分析上述原始碼，並產生一分析結果；以及一處理器，使用一階層排版演算法根據上述分析結果產生一修改原始碼，並根據上述修改原始碼以及判讀一使用者在上述遙控器之一操作，控制上述游標以選取上述輸入網頁之一連結。

根據本發明之一實施例提供了一種網頁瀏覽方法，包括：擷取一輸入網頁之一原始碼；利用一網頁分析器，分析上述原始碼，並產生一分析結果；根據上述分析結果，利用一網頁排版演算法產生一修改原始碼；以及根據上述修改原始碼，於一顯示裝置顯示一本地端網頁。

根據本發明之一實施例一種網頁瀏覽方法，上述方法適用於利用一遙控器操作一智慧型電視瀏覽網頁，包括：擷取一輸入網頁之一原始碼；利用網頁一分析器，分析上述原始碼，並產生一分析結果；以及根據上述分析結果，使用一階層排版演算法以產生一修改原始碼，且再根據上述修改原始碼，及判讀一使用者在上述遙控器之一操作，控制一游標以選取上述輸入網頁之一連結。

本發明所揭露之內容提供了許多不同的實施例或範例，應用在不同實施例中之不同技術特徵，將在讀完本說明書後可了解。具體的實施例之內容和作法將在下面描述，以簡化本發明之揭露。當然，這些實施例並非用以限制本發明。此外，在不同實施例中，本發明可能會重複使用相同的索引標號和/或文字。使用這些索引標號和/或文字的目的是為了簡化和闡明本發明，但並非用以表示在不同實施例和/或所揭露之結構必須具有相同之特徵。

第1圖係顯示根據本發明一實施例所述之網頁瀏覽系統系統100之架構圖。網頁瀏覽系統100，包括一擷取器110、一網頁分析器120、一處理器130、一顯示裝置140。擷取器110，係用以擷取一輸入網頁S1所包含之原始碼S2；其中上述輸入網頁係透過使用者輸入一統一資源識別符號(Uniform Resource Identifier,URI)，透過網路至網頁伺服器(圖未顯示)所抓取之網頁內容。

網頁分析器120，用以分析上述輸入網頁S1所包含之原始碼S2，並產生一分析結果S3，其中網頁分析器120係利用上述原始碼S2中所包含之複數標籤，來分析上述輸入網頁各段落與位置，並將上述原始碼分為一必要原始碼和一次要原始碼。在本說明書中所述之標籤係指在原始碼設計中，根據超文字標示語言(HyperText Markup Language,HTML)網頁排版設計、層疊樣式表(Cascading Style Sheets,CSS)設計標準、JavaScript(TM)等所定義出之「標籤」。舉例來說，標籤<body>表示網頁所要顯示的內容範圍之標籤、標籤<img>表示內嵌網頁圖片之標籤、標籤<table>表示輔助排版用之表格設計之標籤、標籤<p>or標籤<br>表示文字內文之段落之標籤、標籤<href>表示超鏈結之標籤、標籤<style>則為CSS設計之文字顯示顏色與大小之標籤、標籤<script>則表示JavaScript提供使用互動之標籤等。舉例來說，第2圖係顯示根據本發明一實施例所述之原始碼部分示意圖，如第2圖所示，網頁原始碼中包含許多不同之標籤。因此，網頁分析器120可透過所定義的標籤，抓取出原始網頁中各個段落與位置所設計之意義。舉例來說，可以透過標籤<div>(如標示A所示)與標籤<img>(如標示B所示)來區隔出輸入網頁S1中廣告的內容，因為<div>的標籤可以指定畫面中的寬度與高度，且大多的廣告排版都放置於網頁內容的左右兩側，外加廣告大多為圖片一定含有標籤<img>的使用，此外，由於文章在分段落排格式時，會運用到大量的標籤<p>，網頁分析器120也可根據此標籤與標籤<img>來區隔出輸入網頁S1中廣告的內容。根據本發明一實施利，必要原始碼可視為輸入網頁S1主要內容之原始碼，而次要原始碼可視為輸入網頁S1廣告部分之原始碼。第3A-3B圖係顯示根據本發明一實施例所述之顯示裝置140之示意圖。如第3A圖所示，網頁分析器120可透過所定義的標籤，透過標籤<div>與標籤<img>來區隔出輸入網頁S1之原始碼S2中主要內容141和廣告內容143-147。

處理器130，使用一網頁排版演算法根據網頁分析器120所產生之分析結果S3，修改輸入網頁S1所包含之原始碼S2以產生一修改原始碼S4。根據本發明一實施例，處理器130，用以過濾上述次要原始碼，並根據上述顯示裝置之大小以及一顯示畫面配置之方式，透過網頁排版演算法修改上述必要原始碼以產生修改原始碼S4，其中若網頁瀏覽系統系統100為一手持裝置，顯示畫面配置之方式係指手持裝來之擺放方向為水平或垂直，若網頁瀏覽系統100為一智慧型電視，顯示畫面配置之方式則係指畫面為全螢幕或子母畫面(PIP)。顯示裝置140，根據處理器130產生之修改原始碼顯示一本地端網頁S5，其中在此所述之本地端的網頁，將會是「file://」開頭，抓取本地端的檔案，而不係透過伺服器所提供之以「http://」開頭之原輸入網頁S1，其中本地端網頁S5之原始碼係儲存於網頁瀏覽系統100中。如第3A-3B圖所示，透過處理器130使用網頁排版演算法及根據網頁分析器120所產生之分析結果S3，就可將輸入網頁S1之廣告內容143、145、147過濾掉，以產生修改原始碼S4，顯示裝置140再根據處理器130產生之修改原始碼顯示僅有主要內容141之本地端網頁S5。若網頁瀏覽系統系統100為一手持裝置，如第3B-3C圖所示，處理器130根據手持裝置擺放方向為水平或垂直，會產生不同之修改原始碼S4，於顯示裝置140顯示不同配置之本地端網頁S5。根據本發明一實施例，處理器130係根據一感應器150感應手持裝置擺放方向為水平或垂直，來產生不同之修改原始碼S4，其中感應器150可為一重力感應器(G-sensor)。

第4A-4D圖係顯示根據本發明一實施例所述之顯示裝置140之示意圖。根據本發明一實施例，若網頁瀏覽系統系統100為一智慧型電視，當使用者利用一遙控器操作網頁瀏覽系統系統100瀏覽網頁時，顯示裝置140顯示一輸入網頁以及一游標149。擷取器110擷取輸入網頁所包含之原始碼。網頁分析器120，則用以分析輸入網頁所包含之原始碼，並產生一分析結果，其中網頁分析器120，係利用上述原始碼所包含之複數標籤，來分析上述網頁各段落與位置，對上述網頁作階層分類，而產生上述分析結果。如第4A圖所示，上述階層分類，首先利用原始碼中的標籤<li>來作分類，網頁中每個不同網頁連結(如第4A圖所顯示之體育新聞和藝文新聞)都係以標籤<li>來作區隔，因此針對以標籤<li>來作區隔之網頁連結，網頁分析器120將其定義為第一層選項，在每一個第一層選項中係包含不同之附屬項目(如第4A圖所示，體育新聞包含籃球、棒球、羽球之連結，藝文新聞包含電影、音樂、戲劇之連結)則係以標籤<div>和標籤<href>來作區隔，其中標籤<div>和標籤<href>包含於每一第一層中標籤<li>下，在此網頁分析器120將每一個第一層選項中係包含不同之附屬項目定義為第二層。

處理器130，使用一階層排版演算法根據網頁分析器120所產生之分析結果，選擇上述原始碼需要改寫以及需要插入JavaScript函式的部分，產生一修改原始碼，並根據上述修改原始碼以及判讀一使用者在上述遙控器之操作，控制上述游標149以選取上述輸入網頁之一連結，其中需要插入JavaScript函式係指JavaScript所提供之onkeyboardDown函式，透過此函式，使得處理器130可根據使用者在上述遙控器輸入之操作，控制游標149移動到使用者所想選取之連結。根據本發明一實施例，使用者係利用上述遙控器之上、下、左、右四方向鍵、OK鍵以及Back鍵，來控制上述游標149以選取上述連結。

根據本發明一實施例，選取第一層之連結係透過遙控器之上、下方向鍵，如第4A圖和第4B圖所示，當使用者想將游標149由體育新聞移動到藝文新聞，就按遙控器之下方向鍵即可讓游標149移動到藝文新聞之連結。根據本發明一實施例，游標149由第一層之連結移動到對應之第二層連結係透過遙控器之左、右方向鍵，如第4A圖和第4C圖所示，當使用者想將游標149由體育新聞移動到籃球，就按遙控器之右方向鍵即可讓游標149移動到藝文新聞之連結。根據本發明一實施例，選取第二層之連結係透過遙控器之上、下方向鍵，如第4C圖和第4D圖所示，當使用者想將游標149由籃球移動到棒球，就按遙控器之下方向鍵即可讓游標149移動到棒球之連結。

第5圖係顯示根據本發明一實施例所述之網頁瀏覽之方法之流程圖500。首先在步驟S510中，擷取一輸入網頁之原始碼；在步驟S520中，則利用一網頁分析器，分析上述原始碼，並產生一分析結果；接著在步驟S530中，根據上述分析結果，利用一網頁排版演算法產生一修改原始碼；最後在步驟S540中，根據上述修改原始碼，於顯示裝置顯示一本地端網頁。

第6圖係顯示根據本發明一實施例所述之網頁瀏覽之方法之流程圖600，其中此方法特別係利用於使用者使用一遙控器操作智慧型電視瀏覽網頁的情況。首先在步驟S610中，擷取一輸入網頁之一原始碼；在步驟S620中，則利用網頁一分析器，分析上述原始碼，並產生一分析結果；最後在步驟S630中，根據上述分析結果，使用一階層排版演算法選擇上述原始碼需要改寫以及需要插入JavaScript函式的部分，產生一修改原始碼，且再根據上述修改原始碼，及判讀一使用者在上述遙控器之一操作，控制一游標以選取上述輸入網頁之連結。

本發明所提出之網頁瀏覽之方法，使用者無論係瀏覽電腦版網頁或是手機版網頁，根據顯示器本身的用途與特性，可自行調整與設計自己專屬的網頁並顯示，達到最佳的網頁呈現結果。例如，在電視上的呈現結果將會是呈現出可方便使用方向鍵選取之網頁呈現方式。然而在手機上也可以將擾人的左右廣告區塊，以提供最佳的網頁顯示效果等。

本說明書中所提到的「一實施例」或「實施例」所提到的特定的特徵、結構或性質，可包括在本說明書的至少一實施例中。因此，在不同地方出現的語句「在一個實施例中」，可能不是都指同一個實施例。另外，此特定的特徵、結構或性質，也可以任何適合的方式與一個或一個以上的實施例結合。再者，必須說明的是，以下所附之例圖僅是為了幫助說明，並未依照實際比例繪示。

本說明書所揭露之實施例，對於任何在本領域熟悉此技藝者，將很快可以理解上述之優點。在閱讀完說明書內容後，任何在本領域熟悉此技藝者，在不脫離本發明之精神和範圍內，可以廣義之方式作適當的更動和替換。因此，本說明書所揭露之實施例，是用以保護本發明之專利要求範圍，並非用以限定本發明之範圍。

100．．．網頁瀏覽系統系統

110．．．擷取器

120．．．網頁分析器

130．．．處理器

140．．．顯示裝置

141．．．主要內容

143、145、147．．．廣告內容

149．．．游標

150．．．感應器

500、600．．．流程圖

A、B．．．標示

S1．．．輸入網頁

S2．．．輸入網頁之原始碼

S3．．．分析結果

S4．．．修改原始碼

S5．．．本地端網頁

第1圖係顯示根據本發明一實施例所述之網頁瀏覽系統系統100之架構圖。

第2圖係顯示根據本發明一實施例所述之原始碼部分示意圖。

第3A-3C圖係顯示根據本發明一實施例所述之顯示裝置140之示意圖。

第4A-4D圖係顯示根據本發明一實施例所述之顯示裝置140之示意圖。

第5圖係顯示根據本發明一實施例所述之網頁瀏覽之方法之流程圖500。

第6圖係顯示根據本發明一實施例所述之網頁瀏覽之方法之流程圖600。