TWI322361B

TWI322361B - Method, system and computer program product for improving presentation of html pages in web devices

Info

Publication number: TWI322361B
Application number: TW093115707A
Authority: TW
Inventors: Philippe Favre; Bernard Dakar; Denis Aubert; Frank Boudinet; Eric Forestier
Original assignee: Ibm
Priority date: 2003-06-30
Filing date: 2004-06-01
Publication date: 2010-03-21
Also published as: KR100810010B1; CN100440208C; EP1661036A1; US20060236223A1; DE602004011952T2; TW200517886A; CN1826600A; ATE386985T1; US7620891B2; KR20060061304A; JP4398462B2; DE602004011952D1; WO2005003998A1; EP1661036B1; JP2009514045A

Description

1322361 九、發明說明：【發明所屬之技術領域】本發明係關於在諸如個人資料助理（PDA)之網路裝置上所顯示之HTML V4頁面之領域’其中該等網路裝置不能支援層疊樣式表（CSS)。【先前技術】儘管諸如PDA、袖珍型PC及行動電話之網路裝置支援 HTML，但其在顯示於其螢幕上之HTML頁面之呈現方面受到限制。該限制最初來源於網路裝置能力之限制，例如記憶體大小、顯示器屬性之限制或行動網路中之頻寬之限制。為了改良網路裝置上所顯示之HTML頁面之呈現，標準化 HTML V4提出對層疊樣式表（CSS)之支援。支援CSS之瀏覽器解譯指向超鏈結之HTML V4頁面之鏈結語句，其中該等超鏈結含有利用諸如色彩、線高等之高級顯示能力呈現頁面之描述。作為鏈結語句之替代，呈現樣式表可嵌入於 HTML·頁面内。諸如W3C之標準化組織強力推動CSS之使用以使HTML語言自呈現職責中解脫出來。例如，1996年12 月17日之W3C推薦書中描述了稱作REC-CSS1-19990111之CSS 級1之描述；其於1999年1月11日修訂。為了與HTML方法學之進展並行，網路裝置本身已增加了其呈現能力。遺憾的是’並非所有的瀏覽器都支援HTML V4 之css。一些網路裝置之瀏覽器並不支援css。其最高僅支援至HTML V3.2’如1997年1月14日之W3C推薦書HTML 3.2 參考s尤明REC-html32中所描述。最高支援至HTML 32的網 93484.doc 路裝置瀏覽器可藉由跳過鏈結語句及嵌入式css來讀取 HTML V4頁面。因此，即使在網路裝置具有高級本文呈現之硬體及軟體能力時，由於瀏覽器不能使用css及css之呈現特性’所以該等網路裝置所顯示^html頁面呈現特性仍疋基礎的不⑨令人滿意。此外，受限的呈現特性問題會對網路應用之功能性產生影[例如，網頁之功能按紐僅可由同級呈現特性看見，因此其不能被啟動，因為劉覽器不能理解CSS。 ° 具有问級主現能力但操作最高僅支援至HTML V3.2網頁之㈣器之網路裝置的—實例為Nokia 911〇行動電話，該劉覽器之限制在1999年4月21日出版的小冊子N〇kia 9ιι〇 unicator Browser Style Guide book 中有所描述。該問題之一解決方案為在該等網路裝置上開發支援 L V4之CSS之瀏覽器。開發及分銷專用瀏覽器之成本可防止裝置製造商對劉覽器升級。防止網路裝置製造商操縱此等開發之另一原因是如下事實，即儘管一些裝置具有經改良之呈現能力’但並不能假定HTML v4之⑶規格支斤有特性此思味需要開發一種專門針對網路裝置且需要進一步升級以具有增大的裝置呈現能力之瀏覽器。因此，需要利用目前包含操作最高支援至html 32之 HTML網頁之劉覽器的網路裝置，以能夠在顯示包含⑶之 HTML V4網頁時利用其固有的高級裝置呈現能力。【發明内容】本發明之一目標係提供一種用於相較於HTML V3.2頁面 93484.doc 1322361 中之呈現特性而優化在操作至多3 2級瀏覽器之網路裝置上的HTML V4頁面之呈現的方法。本發明之另一目標係將HTML V4頁面呈現優化至網路裝置本身所固有之最大顯示能力。此等目標可藉由利用一種方法達成，該方法允許一使用不能支援CSS之網路瀏覽器之裝置藉由網路提出請求，並允許該裝置在利用其能經由網路支援之所包含的css之所有呈現特性的同時顯示包含CSS之網路HTML頁面，該方法包括以下步驟：接收該裝置獲取網路HTML頁面之請求；識別提出請求裝置，聚集所有裝置及網路顯示可能性之資訊，並抑制矛盾資訊，其中網路顯示可能性具有最高優先等級，結果形成請求規則清單；自網路伺服器擷取所請求之網頁；聚集該網頁之所有css呈現^義，同時抑制所得css 規則清單内之衝突定義；修改町胤頁面中與css無關之語句，檢討CSS規則清單，同時考慮請求規則清單中所確定之裝置及網路可能性；將包含經修改之語句的町紙頁面傳輸給該裝置。該方法係在一網路元件上執行，該網路元件可為具有計算能力之代理伺服器或路由器。該等目標亦可在由安裝於網路元件上之程式執行該方法時達成’丨中該網路元件可為具有計算能力之代理词服器或路由器或轉換器。就本發明之解決方案而言，無需修改瀏覽器或該裝置之任何部分，該解決方案對於迅速支援廣泛範· ' 支援CSS之瀏覽器之裝置而言十分有用。 /、 93484.doc 1322361 本發明之解決方案之-優勢係提供—種簡單的解決方案，該解決方案被建構為在網路元件上運作之程式。該解決方案安裝料，能適應各種I置，且僅利用有關所連接之裝置及網路之資訊，資訊為公開資訊，其可分別經由網路裝置製造商及網路運營者獲取。網路元件亦可用於其它集中式操作，例如帳務處理、安全措施或任何其它加值功能。此外，該解決方案能在多用戶共用之網路之現有元件上實現以用於其它集中式應用。【實施方式】 & 圖1展不根據較佳實施例之解決方案之作業環境。諸如一 PDA(120)或一薄形PC(110)之網路裝置藉由一網路⑽〇)存取網路伺服器(130)。該等網路裝置利用其網路瀏覽器顯示在網路伺服器上讀取之網頁。目前已知之請求網頁之協定為HTTP或HTTPS 網路裝置向網路伺服器位址發送Ηττρ 或HTTPS請求以獲取網頁。在圖丨之網路伺服器（ΐ3〇)中，網頁實施包含層疊樣式表（CSS)特性之HTML V4。HTML v4 網頁存在於兩個不同的檔案（14〇, 15〇)中。第一檔案（i4〇) 包含HTML語句及-些向第二檔案（15〇)(即外部css樣式表）提供URL之”鏈結”語句。應注意，一些css樣式表鏈結可能指向儲存於不同網路伺服器（16〇)上之其它css樣式表檔案該寺CSS樣式表檔案描述了僅可藉由支援html V4 之瀏覽器顯示之呈現。在圖i中，網路裝置（11〇，12…最高僅支援至HTML 3.2。具有不支援Css之瀏覽器之此等裝置為袖珍型IE至袖珍型PC 2002、掌上型導向網路瀏覽器、 93484.doc -10- 1322361 NOKIA 9110、小型電傳裝置及所有安裝有V4之前版本之 Internet Explorer 及Netscape Navigator之計算設備。此等劉覽器自網路伺服器接收HTML V4網頁，其僅解譯第一檔案 (140)，而跳過所有鏈結語句。當將CSS嵌入於HTML V4頁面之語句中時，HTML V3.2瀏覽器亦跳過所嵌入之CSS描述。以下為HTML V4頁面語句之一實例，其中包含兩個鏈結語句，其指向其位址所指示之外部CSS檔案： <html> <link rel="stylesheet" type="text/css" ref="/common/v6/css/w3_common.css"/> <link rel = "stylesheet" type="text/css" hre f= ”/common/v6/c s s/w3—nets cape, css "/> <body> <hl>This is header l</hl> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> 以下為利用嵌入於兩個"樣式"語句之間的CSS之HTML V4語句之實例： <html> <head> <style type="text/css"> hi {color： #〇〇ff〇〇) 93484.doc 1322361 h2{color: #ddaOdd} pjcolor: rgb(0, 0, 255)} </style> </head> <body> <hl>This is header l</hl> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> 如圖1所述，就該較佳實施例之解決方案而言，程式係安裝於網路之CSS補償層元件（170)上。該程式利用網路裝置所發出之HTTP請求，收集兩個檔案HTML V4網頁，若需要，收集其它網路伺服器上之其它CSS樣式表檔案，並將新建網頁送回網路裝置，該等新建網頁可由最高支援至HTML V3.2網頁之瀏覽器顯示，當在初始HTML V4網頁CSS樣式表檔案中呈現該等網頁時，該瀏覽器具有最好地反映呈現特徵之顯示屬性。CSS補償層網路元件可為具有程式化構件能力之尖端路由器之代理伺服器，其能夠實施根據較佳實施例之程式。圖2說明構成在根據較佳實施例之CSS補償層網路元件 (170)上運作之CSS代理程式之邏輯區塊。該”CSS代理”充當用戶端裝置網路瀏覽器之”分佈式插入程式”。此可藉由使用servlet 3.2篩選程式、HTTP代理插入程式或WBI Megs來 93484.doc -12- 1322361 貫現。例如，A 了創建該程式，可使用麵鳩响⑽ Transcoding Pubilsher之外部注解工具。 css代理餘來自㈣路裝置對包含css且該裝置不能解譯之HTML V4網頁的請求。css代理負責收集所請求之 HTML V4頁面，並根據裝置能力及網路之約束裁剪該等頁面以盡可能多地應用呈現樣式。例如，黑色及白色小型電傳不能顯示色彩，但能使本文閃爍。因此，"紅色”屬性可由”閃爍|，屬性代替。然後，CSS代理將裁剪後之頁面返回給網路裝置。 CSS代理之第一邏輯區塊實施優先權聚集（2〇〇)之功能。該區塊自網路裝置接收在標題中含有（例如）裝置識別之請求。在網路輸送亦被識別之請求（來自掌上導向等之無線網路）後，優先權聚集功能存取與所識別之裝置相關之資訊，並將其與有關網路之資訊合併以製造，，請求規則清單，，，該 '’請求規則清單”係待用於為該裝置準備網頁呈現之呈現屬性清單。 3玄等資訊可儲存在連接至css補償層網路元件（170)之儲存庫中。該等資訊係公共資訊，其可分別經由網路裝置製造商及網路運營者獲取。該等資訊總是藉由通訊協定在關鍵字-值語言中獲取。圖4 5兒明儲存於根據較佳實施例之CSS代理網路元件之對應儲存庫（220)中之網路優先權樣例。網路之該等特徵代表適用於呈現規則之首要約束。在此樣例中，吾人具有無線網路（關鍵字為'NetworkName，），其不能支援mpg檔案（關鍵 93484_doc -13- 1322361 字為'unsupportedExtension’）及bmp標案類型之影像（關鍵字為'unsupportedlmages')。當製造該裝置之"請求規則清單” 時，網路優先權形成最高優先等級約束。圖5說明儲存於根據較佳實施例之CSS代理網路元件之對應儲存庫（215)中之優先權樣例。該裝置優先權樣例描述了在初始化時為該裝置界定之呈現的可組態優先權之值。由於該裝置之瀏覽器最高支援至HTML 3.2版本，所以其不支援 CSS，且不能用關鍵字 ’cascadingStyleSheetSupported'表示，並設定為’false'。所支援之影像（關鍵字為’supportedlmages) 為gif及jpg，此聽起來並不與網路優先權矛盾，因為其並非不支援之影像（關鍵字為'unsupportedExtension’）之清單中之一部分。當製造裝置之"請求規則清單"時，應核查裝置優先權與代表最高優先等級準則之網路優先權之相容性。圖6說明儲存於根據較佳實施例之CSS代理網路元件之對應儲存庫（215)中之裝置優先權樣例。一旦核查出網路優先權與裝置優先權相對，就要考慮裝置能力以建立該裝置之最終"請求規則清單"。在此樣例中，裝置為袖珍型PC。該裝置具有特定能力，其可以被先前所分析之網路約束覆寫。圖7說明在CSS代理之優先權聚集邏輯區塊執行結束時為該裝置建立之所得請求規則清單。總之，吾人獲得圖7之清單來為網頁呈現作準備以應答無線模式連接之袖珍型PC所發出之請求。吾人注意到：例如，在請求規則清單中，裝置優先權'textLinksPreferredToImages=false'已被網路優先權樣例中所識別之網路約束'textLinksPreferredioImages=false' 93484.doc -14- 1322361 覆寫。回到圖2，優先權聚集邏輯區塊所處理之請求被傳送至網路伺服器（130)，該裝置之請求中包含該（等）網路伺服器之位址。然而，亦可將請求首先傳送至CSS代理之第二邏輯區塊，即加值邏輯區塊（230)。圖2中以虛線說明該區塊，其可任選，實施該區塊以用於額外功能，例如帳務處理，需要時還包括安全措施。因此，在一選用之實施例中，於CSS 代理功能之頂部，實施了其它加值功能，以優化對根據較佳實施例之解決方案之作業環境之CSS補償層網路元件 (170)之利用。網路伺服器返回所請求之頁面，該頁面可能是HTML V4 格式。在此情況下，CSS係嵌入於HTML語句中，或者HTML V4頁面之鏈結語句含有指向CSS檔案之位址。在該較佳實施例中，HTML頁面被接收到不可選之CSS聚集邏輯區塊中。在CSS聚集邏輯區塊中，擷取並統一 CSS，從而建立CSS 規則清單，該清單統一所有來自所擷取之所有CSS之CSS樣式定義。自CSS伺服器（160)或網路伺服器（130)本身擷取外部CSS，並在呈現語句與其它語句混合時將其插入V3.2級 HTML頁面中。然而，在此操作過程中，在來自嵌入式CSS 與外部CSS之呈現語句之間可能存在一些矛盾。為了統一頁面呈現，在此邏輯區塊中解決衝突。例如，若在一嵌入式 CSS中有： hi {color: #00ff00}，且在一外部CSS(鏈結）中讀到： 93484.doc •15- 1322361 h 1 {color: #ddaOdd} * 則CSS聚集邏輯區塊僅將HI {color: #ddaOdd}加入CSS規則清單中。在CSS聚集邏輯區塊中執行後，出現含有V3.2語句之 HTML頁面及CSS規貝|J清單，該CSS規貝|J清單含有自所擷取之所有CSS提取的一致樣式定義之清單。可視需要將所擷取之CSS儲存於快取記憶體，即CSS快取記憶體（250)中，用以改良在處理裝置之下一頁面請求方面的效能。在最後的譯碼邏輯區塊（260)中，處理來自優先權聚集邏輯區塊之輸入及來自CSS聚集邏輯區塊之輸入。在優先權聚集邏輯區塊中，已製造了請求規則清單，且在CSS聚集邏輯區塊中，已製造了 HTML V3.2語句頁面及CSS規則清單，該 CSS規則清單含有自CSS擷取且經統一之頁面的樣式定義。在譯碼邏輯區塊中，處理輸入，建立裁剪成適用於已發送請求之裝置之網頁，並將其傳回裝置（110)。輸入分兩步處理。第一步為：核查之CSS規則清單是否具有對應於該裝置之請求規則清單，並建立動作規則清單，該動作清單包括對HTML V3.2頁面語句執行之所有動作，以在考慮該裝置之請求規則清單的同時引入CSS規則清單。第二步為：在譯碼邏輯區塊中，解譯該等動作，並產生新的頁面語句。最後，CSS代理以下列方式將HTML V4頁面轉化成HTML V3.2頁面：對CSS規則清單中之每一樣式，CSS代理為該裝置解譯在其一覽表（請求規則清單）中所定義之等效樣式，並 93484.doc -16- 1322361 將相關屬性增加至HTML V4頁面之HTML標簽中，如同 HTML 3.2中所完成的那樣。作為一實例，假定在CSS聚集邏輯區塊執行後所提供之 HTML V3.2頁面如下： <html> <body> <hl>This is header l</hl> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> 亦假定CSS規則清單如下： hi {color: #00ff00} h2{color: #ddaOdd} p{color: rgb(0, 0，255)} 若自請求規則清單中獲知該裝置不支援色彩屬性之事實，則在譯碼邏輯區塊甲創建下列動作清單： Replace<hl>by<B>

Replace<h2>by<I> 將在譯碼邏輯區塊中對此解譯，並將產生下列HTML V3.2 頁面語句： <html> <body> <hl><B>This is header l</B></hl> 93484.doc -17- 1322361 <h2><I>This is header 2<Ix/h2> <p>This is a paragraph</p> </body> 接著’將該裁剪後之頁面發送給該裝置。圖3係根據較佳實施例之方法之總流程圖。在第一步（3⑽) 中，接收請求，較佳在HTTP或HTTPS協定下於計算位置中進行，其中該計算位置為一網路元件，例如具有計算資源之專用代理伺服器或路由器。該請求係由瀏覽器不支援c s s 之網路裝置發出。在第二步（31〇)中，藉由Ηττρ及包括裝置識別符之HTTP標題來識別該裝置。$取儲存在對應於彼裝置之裝置能力儲存庫及裝置優先權儲存庫中之資訊。該裝置用來發送請求之網路係自計算系統獲得，且係獲得自此項技術中所熟悉的許多種可能方式之―，在該步驟中，該網路係用於自網路優先權儲存庫巾提取對應的網路優先權貝訊。在下一步驟(32〇)中’藉由在所提取之所有資訊中建置選定資訊之清單來執行優先權聚集。為建置1選擇清單項目，將優S等級給予網路優先權，該等網路優先權相對於裝置優先權生效，接著，藉由裝置能力進行最後的選擇。在優先權聚集步驟結束時，請求規則清單完成。下一步驟為榻取自網路祠服器所請求之網頁（340)。若該網頁不含有 CSS(對測試345回答否，則所擷取之頁面藉由其它功能原置· °最高支援至HTML V3.2 若所擷取之頁面含有至少樣轉遞（390) ’並照樣傳輸給該裝之瀏覽器裝置能夠解譯該頁面。 93484.doc •18- 1322361 一 css，則其核查在請求規則清單中該裝置是否支援css。若該裝置支援CSS(對測試350回答是），則所擷取之頁面藉由其它功能原樣轉遞（390)，並照樣傳輸給該裝置。支援 HTML V4之瀏覽器裝置本身能夠解譯CSS樣式並用它來顯示該網頁。若該裝置不支援CSS(對測試350回答否），則大部分情況下其係較佳實施例之方法來支援，若需要，擷取並聚集CSS。可將CSS樣式定義直接嵌入於先前步驟中所擷取過之頁面之HTML V4語句中。當HTML頁面語句包括鏈結語句時會出現另一種情況。在這種情況下，CSS樣式定義係自位於網路伺服器或特殊CSS伺服器上之檔案擷取。一旦擷取了 HTML頁面之所有CSS樣式定義，便抑制該清單中之矛盾定義，所得清單形成CSS規則清單（370)。該清單及所擷取之HTML頁面用作下一譯碼步驟（365)之輸入。在該步驟中，將與CSS無關之HTML頁面語句修改成考慮CSS規則清單之呈現樣式定義但並不與裝置及網路之能力及優先權之請求規則清單矛盾。基於效能的原因，在該較佳實施例中，譯碼步驟分兩步執行：第一步，製造描述修改之動作清單以達成剩餘HTML語句；第二步，解譯對HTML語句之該等動作。所得HTML語句形成為該裝置裁剪成適於其呈現可能性之最終HTML頁面，其僅含有該裝置能解譯顯示該網頁之HTML V3.2語句。【圖式簡單說明】圖1係執行根據較佳實施例之解決方案時所在的系統圖；圖2說明構成在根據較佳實施例之CSS補償層網路元件上 93484.doc -19- 1322361 運作之程式之邏輯區塊；圖3係根據較佳實施例之方法之總流程圖；圖4係網路優先權儲存庫之樣例；圖5係裝置優先權儲存庫之樣例；圖6係裝置能力儲存庫之樣例；圖7係無線連接之袖珍型PC之請求規則清單之樣例。【主要元件符號說明】 100 網路 110 個人電腦（PC) 120 個人資料助理（PAD) 130 網路伺服器 140 第一檔案 150 第二檔案 160 CSS伺服器/網路伺服器 170 CSS補償層網路元件 200 優先權聚集 210 裝置能力儲存庫 215 裝置優先權儲存庫 220 網路優先權儲存庫 230 加值邏輯區塊 250 CSS快取記憶體 260 譯碼邏輯區塊 93484.doc -20-

Claims

1322361 第093115707號專利申請案中文申請專利範圍替換本(98年10月）十、申請專利範圍： 1 · 一種在一計算系統上執行之方法，其允許一使用一不能支援CSS之網路瀏覽器之裝置藉由一網路提出請求，並允許該裝置在利用其能經由該網路支援之所包含的CSS之所有呈現特性的同時顯示包含CSS之網路HTML頁面，該方法包括以下步驟：自該裝置接收一獲得一網路HTML頁面之請求；識別提出請求之該裝置，聚集所有裝置及網路顯示可能性之資訊，並抑制矛盾資訊，其中該網路顯示可能性具有最高優先等級，結果形成一請求規則清單；自一網路伺服器擷取所請求之該網頁；聚集該網頁之所有CSS呈現定義，同時抑制在一所得 CSS規則清單中之衝突定義；修改該HTML頁面中與CSS無關之語句，檢討該CSS規則清單，同時考慮該請求規則清單中所確定之該等裝置及網路可能性；將包括該等經修改之語句之該HTML頁面傳輸給該裝置。 2. 如請求項1之方法，其中該修改步驟進一步包括下列步驟：建立一動作清單，其中列出需導入與CSS無關之該 HTML頁面的該等修改；及解譯該等動作以建立該等經修改之語句。 3. 如請求項1或2中任一項之方法，其中聚集所有該等CSS 93484-981023.doc 5. 6. 7. 8. 9. 呈現定義之該步驟進一步包括：收集嵌入於所擷取之該HTML頁面中之該等CSS呈現定義；網硌伺服器讀八· .一., y -cr ι-g AlPt is 檔案中之該等CSS呈現定義，其中該網路伺服器之位址係包含於一HTML語句中。如請求項3之方法，其進一步包括儲存於一 css快取檔案上之步驟’該CSS檔案係讀取自該網路伺服器。如請求項1或2之方法，其進一步包括利用來自該裝置之該請求執行與該裝置之活動相關之加值功能之步驟。 :請求項!或2之方法，其進一步包括一在健存庫中儲存 ^裝^力 '裝置優先權及網路優先權之資訊的初始步驟，項取該等儲存庫以執行聚集顯示可能性之資訊的步驟。寺裝置及網路如請求们或2之方法，其進一步包括—在別的步驟，即在該等HTML頁面語句中抑制所U 擷取之該網頁中及與CSS相關之語句。斤一種包括程式碼指令之電腦程式產品，去行該程式時，爷黧如人田^ 田在一電腦上執往式柃。玄專指令用以執行如請求項之方法之該等步驟。、中任一項一種育料處理系統，其包括被調適成執行如中任-項之方法之該等步驟的構件。 ”求項1至7 93484-981023.doc