TWI578220B - 網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式開發工具以及使用其等之方法 - Google Patents

網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式開發工具以及使用其等之方法 Download PDF

Info

Publication number
TWI578220B
TWI578220B TW101132001A TW101132001A TWI578220B TW I578220 B TWI578220 B TW I578220B TW 101132001 A TW101132001 A TW 101132001A TW 101132001 A TW101132001 A TW 101132001A TW I578220 B TWI578220 B TW I578220B
Authority
TW
Taiwan
Prior art keywords
display
scalar
web application
file
host frame
Prior art date
Application number
TW101132001A
Other languages
English (en)
Other versions
TW201324322A (zh
Inventor
侯昭榮
Original Assignee
英特爾公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 英特爾公司 filed Critical 英特爾公司
Publication of TW201324322A publication Critical patent/TW201324322A/zh
Application granted granted Critical
Publication of TWI578220B publication Critical patent/TWI578220B/zh

Links

Classifications

    • GPHYSICS
    • G09EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09GARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/14Display of multiple viewports
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G09EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09GARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00Aspects of display data processing
    • G09G2340/04Changes in size, position or resolution of an image
    • G09G2340/045Zooming at least part of an image, i.e. enlarging it or shrinking it
    • GPHYSICS
    • G09EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09GARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2370/00Aspects of data communication
    • G09G2370/02Networking aspects
    • G09G2370/022Centralised management of display operation, e.g. in a server instead of locally
    • GPHYSICS
    • G09EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09GARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2380/00Specific applications
    • G09G2380/14Electronic books and readers

Description

網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式 開發工具以及使用其等之方法 發明領域
本文揭示大致上係有關於針對多個作業系統及形狀因數的裝置模擬及網頁應用程式開發。
發明背景
網頁應用程式乃駐在瀏覽器控制裝置(例如爪哇小應用程式)或係以瀏覽器支援語言諸如JavaScript、超文字標記語言(HTML)或其類編碼的電腦軟體應用程式。此等應用程式由於網頁瀏覽器的廣泛且交叉平台的使用而變成普及。確實,網頁瀏覽器常用在許多普及作業系統(OS)諸如微軟(Microsoft)銷售的視窗(Windows)OS、蘋果(Apple)銷售的MAC OS、及谷歌(Google)銷售的安卓(Android)OS。網頁瀏覽器也係用在落入於寬廣範圍的形狀因數之裝置,諸如桌上型電腦、膝上型電腦、平板個人電腦(PC)、及掌上型裝置(例如行動電話、智慧型電話等)。
網頁應用程式逐漸地使用本身屬於網頁應用程式亦即駐在於一網頁瀏覽器的創作工具開發。常見此等創作工具具有裝置模擬器形式,顯示在開發系統上跑的網頁瀏覽器中。裝置模擬器包括一目標裝置(例如行動電話、平板個人電腦等)的溝緣影像。正在開發的網頁應用程式係顯示在該目標裝置的溝緣影像內部。藉此方式,模擬器許可開發者預覽在該目標裝置的溝緣影像之脈絡中正在開發的 網頁應用程式。
為了讓裝置模擬器準確地表示該網頁應用程式將如何出現在一目標裝置上,需要能做兩型對映。第一,該裝置模擬器須可逐一像素對映,其中在該裝置模擬器的一模擬顯示器(後文稱作為「模擬顯示器」)中的一個像素係相對應於在該目標裝置的該顯示器(後文稱作為「目標顯示器」)上的一個像素。第二,需要逐一英寸(亦即實體)對映,其中一模擬顯示器的一英寸係相對應於一目標顯示器的一英寸。
雖然既有創作工具為有用,但無法準確的逐一英寸對映。原因在於準確的逐一英寸對映要求有關該模擬顯示器或換言之執行該裝置模擬器的開發系統的顯示器的每英寸像素數目(PPI)。於許多情況下,該模擬顯示器的PPI為未知。雖言如此,即便開發系統的PPI為已知,開發系統的PPI對映至目標裝置的PPI仍然困難。
此外,既有網頁應用程式開發工具無法同時針對多個OS及/或形狀因數,提供將電子文件諸如電子書轉換成互動文件應用程式的直捷機制。反而,既有網頁應用程式開發工具通常要求應用程式開發者運用不同的工具來為個別OS產生應用程式。此種程序既煩瑣又不便,且可能產生互動文件應用程式,其具有OS及/或形狀因數間的不一致使用者介面。此外,許多將文件轉換成互動文件應用程式的應用工具不會調整頁面布局而考慮不同平台間的解析度及螢幕配向。結果,運用既有工具開發的互動文件應用程式 的使用者可能必須來回地捲動才能讀取文件的單一頁面,此點乃非期望者。
依據本發明之一實施例,係特地提出一種系統包含一處理器;具有裝置模擬器指令儲存於其上之一記憶體,其中當執行時,該等裝置模擬器指令係使得該處理器:在一網頁瀏覽器內部產生一使用者介面,該使用者介面係包含至少一個主機圖框及至少一個純量,該至少一個主機圖框係含有在其中執行之一目標裝置的模擬,該目標裝置係包含至少一個顯示器;將該純量之一位置轉換成一變焦比;及施加該變焦比至該至少一個主機圖框;其中該純量之至少一個第一位置係與一變焦比相關,使得該至少一個主機圖框與該目標裝置的該至少一個顯示器間獲得逐一英寸對映。
圖式簡單說明
圖1提供依據本文揭示之非限制性實施例一種裝置模擬器的軟體組件之方塊圖。
圖2為依據本文揭示之非限制性實施例,如藉一裝置渲染而即時調整一目標裝置的模擬顯示器之變焦之一非限制性方法流程圖。
圖3提供JavaScript虛擬代碼之一非限制性實例,其許可在多個網頁瀏覽器諸如,網際網路探索者(Internet Explorer)、火狐(Firefox)、及克隆(Chrome)即時準確淡入/淡出一主機圖框(iframe)。
圖4為本文揭示之網頁應用程式開發工具的一或多個面向可植基於其上的模式、視野、控制(MVC)架構型樣的方塊圖實例。
圖5為依據本文揭示之非限制性實施例一種網頁應用程式開發工具實例之頂層架構及工作流程圖。
圖6為依據本文揭示之非限制性實施例一種互動文件網頁應用程式的架構圖。
圖7為依據本文揭示之非限制性實施例一種藉一編譯器服務所產生的本機應用程式之架構圖。
圖8提供依據本文揭示一種使用者介面之非限制性實例。
圖9為依據本文揭示之非限制性實施例一種以網頁為基的使用者介面之架構圖。
圖10為依據本文揭示之非限制性實施例一種轉換服務之架構圖。
圖11為依據本文揭示一種網頁應用程式開發工具之非限制性實例的類別圖。
圖12為依據本文揭示之非限制性實施例一種方法之方塊圖。
詳細說明
本文揭示之一個面向係有關於準確地模擬一目標裝置的顯示之系統及方法。於是,此處描述者為包括一處理器及一記憶體其上儲存有裝置模擬器指令的系統。當 被執行時,該等裝置模擬器指令可使得該處理器執行多項功能。舉例言之,裝置模擬器指令可使得該處理器在一網頁瀏覽器內部產生一使用者介面,其中該使用者介面包括至少一個主機圖框及至少一個純量。於若干實施例中,一目標裝置的模擬可於該主機圖框內操作,其中該目標裝置包括至少一個顯示器。
該等裝置模擬器指令當執行時可進一步操作來使得該處理器將該純量之位置轉換成一變焦比,及施加該變焦比至該主機圖框。於若干非限制性實施例中,該純量的該至少一個第一位置可與一變焦比相關聯,許可該至少一個主機圖框與該目標裝置的該顯示器間之逐一英寸對映關係。於其它非限制性實施例中,該純量的該至少一個第二位置可與一變焦比相關聯,許可該至少一個主機圖框與該目標裝置的該顯示器間之逐一像素對映關係。
此處也描述一目標裝置的模擬方法。該方法例如可包括在由一瀏覽器所執行的一網頁瀏覽器中產生一目標裝置的模擬,及基於從一純量位置所決定的變焦比而變更模擬大小。於此處所述方法之若干非限制性實施例中,該純量的該至少一個第一位置係與一變焦比相關聯,許可該模擬與該目標裝置的一顯示器間之逐一英寸對映關係。於此處所述方法之其它非限制性實施例中,該純量的該至少一個第二位置係與一變焦比相關聯,許可該至少一個主機圖框與該目標裝置的該顯示器間之逐一像素對映關係。
於若干實施例中,此處所述方法包括在由一瀏覽 器所執行的一網頁瀏覽器中顯示一使用者介面。該使用者介面可包括一呈現層及一渲染層。該呈現層可包括HTML代碼,及該渲染層可包括JavaScript代碼。於若干實施例中,該等方法包括在該呈現層中執行一目標裝置的模擬,其中該目標裝置包括至少一個顯示器。該等方法可進一步包括以該渲染層檢測一純量位置,以該渲染層將該純量位置轉換成一變焦比,及施用該變焦比至該模擬。於若干非限制性實施例中,該純量的該至少一個第一位置係與一變焦比相關聯,許可該模擬與該目標裝置的一顯示器間之逐一英寸對映關係。於其它非限制性實施例中,該純量的該至少一個第二位置係與一變焦比相關聯,許可該至少一個主機圖框與該目標裝置的該顯示器間之逐一像素對映關係。
本文揭示之一個面向係有關於在一目標裝置諸如行動電話的瀏覽器主機模擬中,體現準確逐一英寸對映之系統及方法。於若干實施例中,本文揭示之系統及方法許可一目標裝置與該目標裝置的瀏覽器主機模擬間之準確逐一英寸對映,同時也提供直捷機構以切換成該模擬與該目標裝置間的準確逐一像素對映關係。
於是,此處揭示者為裝置模擬器,如同網頁應用程式在一運算裝置的一處理器上運作。概略言之,此處描述之裝置模擬器使得一使用者介面(UI)欲在運算裝置上運作的網頁瀏覽器中顯示。該UI包括至少一個裝置模擬器預覽區(此處又稱為「主機圖框」),該預覽區係經組配來模擬一目標裝置的顯示器,諸如行動電話、平板個人電腦、膝 上型電腦等。互動文件網頁應用程式,諸如電子書可在該至少一個主機圖框內部運作與顯示。藉此方式,本文揭示之裝置模擬器許可一使用者(例如軟體開發者),在模擬一目標裝置的顯示之環境下,看到一互動文件網頁應用程式的操作及出現。
除了前述基本元件及功能外,此處描述之裝置模擬器可更進一步包括至少一個裝置圖框相鄰於或以其它方式鄰近於該至少一個主機圖框。此等裝置圖框可顯示影像,諸如一目標裝置的溝緣影像。於此種情況下,裝置圖框可環繞一主機圖框分布,藉此加強在該主機圖框內部執行的一網頁應用程式之模擬操作及出現。
此處描述之裝置模擬器可進一步包括調整該至少一個主機圖框的屬性之一機構。舉例言之,此處描述之裝置模擬器的UI可包括元件及潛在代碼,其許可對該目標裝置的型別、解析度、及配向作選擇。舉例言之,此處描述之裝置模擬器可包括來源檔案,該來源檔案含有有關多個目標裝置及形狀因數的資料,諸如行動電話、平板個人電腦、智慧型電話、及膝上型電腦。當選擇特定裝置或屬性(例如解析度及/或配向)時,此處描述之裝置模擬器可調整該主機圖框的相關性質,且使用該調整後的屬性,重新渲染在該主機圖框中跑的一互動文件網頁應用程式。
例如,若一使用者透過該UI而選擇不同的解析度,則此處描述之裝置模擬器可操作以調整該主機圖框的解析度,且使用新選的解析度,重新渲染該主機圖框(及在 其中跑的網頁應用程式)及/或裝置圖框。同理,若裝置型別係透過UI而改變,則此處描述之裝置模擬器可將相關資料載入該所選裝置(例如溝緣影像、解析度、配向等),且以所選裝置相聯結的性質來重新渲染該主機圖框及/或裝置圖框。
該UI可進一步包括一純量,該純量組合該純量代碼(容後詳述)許可一使用者改變該至少一個主機圖框及/或裝置圖框的大小。舉例言之,該純量位置可藉純量代碼轉換成變焦比,該變焦比可施加至該至少一個主機圖框及/或裝置圖框的變焦屬性。容後詳述,此項功能允許在該至少一個主機圖框的模擬顯示器與一目標裝置諸如行動電話、平板個人電腦等的顯示間之準確逐一英寸對映。而於若干實施例中,此項功能可提供有效機構用於主機圖框與一目標裝置的顯示間準確逐一英寸對映與逐一像素對映間之過渡。
為了本文揭示之目的,「位置」一詞當用在純量脈絡時,係指該純量(例如相對於該純量之另一部分)的實際位置、及歸因於該純量位置之一值中之一者或二者。舉例言之,若該純量為滑動器具有一臂可從左至右橫過一數值範圍(例如0至100),則該滑動器的「位置」可指稱該滑動器臂的相對位置及/或在該位置歸因於該滑動器之值(例如0、25、50、100等)。
圖1提供依據本文揭示一種裝置模擬器的軟體組件之非限制性實例之方塊圖。如前文解說,該裝置模擬器 可在開發系統諸如桌上型個人電腦的一處理器上跑的一網頁瀏覽器內部執行。
如圖1所示,裝置模擬器100包括呈現層101及渲染層102。呈現層101(於模式、視野、控制架構脈絡中,此處又稱為「場景」)包括潛在代碼,通常係用來在開發系統的一處理器上跑的一網頁瀏覽器中繪製一使用者介面。於圖1顯示的非限制性實例中,呈現層101繪製預覽區103、主機圖框104、裝置圖框105、及純量106。呈現層101的精確操作係容後詳述,連同用於網頁應用程式開發工具的UI之製造,該使用者介面係輔助互動文件網頁應用程式的產生。為了目前討論目的,須注意呈現層101可使用HTML編碼,且可包括多個符合熟諳技藝人士之瞭解的多個外掛程式。舉例言之且容後詳述,呈現層101可包括一index.html檔案(或其它類似檔案),包括述及第三方外掛程式應用程式及資料庫,諸如jQuery JavaScript滑動器外掛程式及相聯結的資料庫。
雖然圖1例示說明預覽區103顯著大於主機圖框104,但須瞭解預覽區103可為任何大小。於若干實施例中,預覽區103的尺寸使得其近似主機圖框104的至少一個維度。
預覽區103可細分(例如使用HTML)成為多行及多列,如此界定分開區或圖框。此種構想在圖1中係以影線107例示說明,顯示預覽區103被劃分為三列及三行,因而將預覽區103劃分成環繞主機圖框104的八區(例如八個裝 置圖框105)。符合前文討論,預覽區103(包括裝置圖框105)的各區(圖框)可獨立地編碼因而顯示影像,諸如一目標裝置的溝緣影像。此種構思容後例示說明於圖8,圖8提供一種使用者介面的非限制性實例,其中一或多個裝置圖框顯示一目標裝置的一溝緣影像。
雖然圖1例示說明預覽區劃分成環繞單一主機圖框104的八區,但須瞭解預覽區103可劃分成任何數目的區,且可含有多於一個主機圖框。確實,具有一預覽區含有1、2、3、4、5或更多個主機圖框的裝置模擬器係涵蓋於本文揭示之範圍。舉例言之,預覽區103可劃分成六行三列,因而形成各自由八區環繞(含八個裝置圖框105)的二主機圖框顯示。藉此方式,可同時渲染目標裝置的多個模擬。
預覽區103(含主機圖框104)可使用HTML、其變化例及/或其它適當代碼編碼。於預覽區103係使用HTML編碼之情況下,主機圖框104例如可使用<iframe>HTML標籤定義。
純量106乃一使用者介面物件,具有可由使用者改變的位置範圍。於若干實施例中,純量106係呈現為滑動器、輪子、一對淡入/淡出鈕、下垂列表、及/或一串列收音機按鈕形式。至於依據本文揭示可使用的適當純量之非限制性實例,值得一提者為jQuery使用者介面存庫及/或外掛程式,其體現係容後詳述。
渲染層102操作來施加裝置模式資料及其它性質至主機圖框104,因而渲染網頁瀏覽器內部的訂製面板(容 後詳述),及因而渲染在具有一目標裝置的適當屬性及/或使用者擇定性質的主機圖框104運作的網頁應用程式。渲染層102可提供此項功能,例如藉呼叫含有與一目標裝置的顯示相聯結的屬性的至少一個來源檔案。此種來源檔案可包括針對一個或多個目標裝置的顯示器之資訊(例如裝置型別、配向、解析度等)。渲染層102可施加目標顯示器的屬性至主機圖框104的相關屬性。結果,在裝置模擬器100的主機圖框104運作的網頁應用程式可顯示在具有該目標裝置的合宜屬性之一開發系統的網頁瀏覽器內部。
渲染層102也可包括純量代碼107,其監視純量106的位置。基於純量106位置,純量代碼107可決定變焦比或尺規,取決於裝置模擬器100在其中執行的瀏覽器。舉例言之,純量代碼可將純量106位置變換成一尺規比用在火狐(Firefox)網頁瀏覽器,或一變焦比用在微軟網際網路探索者(Explorer)。為求精簡清晰,此種變換結果在此稱作為「變焦比」。
純量代碼107可施加決定的變焦比至預覽區103、主機圖框104、裝置圖框105、及其組合,且以決定的變焦比重新渲染預覽區103(含主機圖框104及裝置圖框105)。
純量代碼107也可包括一事件處置器,其係回應於一純量事件而施加決定的變焦比至預覽區103。舉例言之,當純量106的位置開始改變時(「開始」),當純量106的位置改變時(「移動」或「滑動」),當純量106的位置停 止改變時(「停止」),或其組合,純量代碼107可施加一決定的變焦比至預覽區103(或其組件)。於若干實施例中,當純量106的位置改變時,純量代碼107施加決定的變焦比至預覽區103(若存在時,含主機圖框104及裝置圖框105)。於此種情況下,純量代碼107可造成渲染層102更新預覽區103、主機圖框104、裝置圖框105、或其組合的變焦比,及即時使用決定的變焦比而重新渲染此等區。
藉適當調整純量106,預覽區103、主機圖框104、裝置圖框105、或其組合的大小可經調整,因而提供一目標裝置的模擬顯示器對實際目標裝置的準確逐一英寸對映。此點之達成方式例如藉調整純量106使得裝置模擬器100渲染在一開發系統的顯示器上的預覽區103(及特別主機圖框104)大小,使得預覽區103(及特別主機圖框104)近似一目標裝置的實體大小。藉此方式,裝置模擬器可提供所見即所需(WYSWYG)環境。結果,網頁應用程式如同在一目標裝置之相同方式,可出現在裝置模擬器中。
圖2顯示依據本文揭示如藉一裝置渲染,即時調整一目標裝置的模擬顯示器之變焦之一非限制性方法流程圖。於開始步驟201中,裝置模擬器100可運用符合內設的目標顯示之性質而渲染在預覽區103之主機圖框104中的一網頁應用程式。另外,在全部或部分預覽區103含主機圖框104及裝置圖框105渲染網頁應用程式之前,裝置模擬器100可等待一目標裝置的選擇。與開始步驟201中進行的操作無關,於渲染預覽區步驟202中,裝置模擬器100渲染預覽區 103。
在渲染預覽區103後,於檢測純量位置步驟203中,純量代碼107監視純量106的位置。然後純量106的位置可在變換純量位置為變焦比步驟204中變換成一變焦比。於施加變焦比至裝置模擬步驟205中,然後裝置模擬器100可施加決定的變焦比至預覽區。當純量106調整時,可重複步驟202-205。運用此一方法,預覽區103(含主機圖框104及/或105)可更新,藉此許可一使用者即時看到預覽區103的變焦比的改變。
於若干實施例中,此處描述之裝置模擬器可產生一目標裝置的模擬顯示器,該模擬顯示器的大小與一目標裝置的顯示器之實體大小差異達約5%或以下,約2%或以下,或甚至約1%或以下。於若干實施例中,此處描述之裝置模擬器可產生一目標裝置的模擬顯示器,其具有大小等於一目標裝置的顯示器之實體大小。
為了實現逐一英寸對映,純量106可經手動調整直到與藉裝置模擬器100渲染的模擬顯示器比較,近似一目標裝置的實體大小。此點之達成方式例如藉在一開發系統的監視器上渲染該模擬顯示器,保有該目標裝置直至該主機系統,及調整該純量之同時,目測比較模擬顯示器的大小與該目標裝置的實體大小。另外,此項比較可自動地進行,例如藉一程式編碼來比較該模擬顯示器之屬性與該開發顯示器的每英吋像素(點)(PPI)。舉例言之,此種程式可針對多個開發顯示器呼叫含PPI資訊的資料庫,且比較該 PPI資訊與模擬顯示器的相關屬性,及特別主機圖框。
純量106也可經組配來使得一擇定位置係與針對裝置模擬預覽區103、主機圖框104、裝置圖框105、或其組合的一變焦比相關,該等組合係與一目標裝置的顯示器為逐一像素對映。舉例言之,純量106之一擇定位置可與針對裝置模擬預覽區103、主機圖框104、裝置圖框105、或其組合的一100%變焦比相關。於若干非限制性實例中,在預覽區的像素數目係大於或等於一目標裝置的顯示器的像素數目。換言之,該預覽區(及特別一主機圖框)的解析度較佳地係等於或大於一目標裝置的顯示器的解析度。於此種情況下,從純量決定的變焦比可提供一模擬顯示器,該模擬顯示器為逐一像素對映一目標裝置的顯示器。
於某些情況下,預覽區的解析度可設定低於一目標裝置的顯示器的解析度。於此種情況下,在預覽區(及特別一主機圖框104)運作的模擬顯示器可與一目標裝置的顯示器之一部分相關。雖言如此,運用此處描述之純量,可決定一變焦比,結果導致該模擬顯示器與該目標裝置的該顯示器之相對應部分間可獲得逐一像素對映。
至於依據本文揭示可使用的純量之一非限制性實例,值得一提者為藉jQuery UI滑動器外掛程式及JavaScript存庫(後文稱作「jQuery外掛程式」)變成作用態的滑動器。jQuery外掛程式提供無數滑動器選項,包括可由開發者選擇的多個把手及範圍。該等把手及範圍例如可由使用者以滑鼠或鍵盤選擇。
為了例示說明jQuery UI滑動器外掛程式的非限制性用途,可參考圖3。概略言之,圖3提供JavaScript虛擬代碼實例,其許可在多個網頁瀏覽器諸如,網際網路探索者、火狐、及克隆(Chrome)即時準確淡入/淡出一主機圖框(iframe)。
於圖3顯示的非限制性實例中,jQuery存庫可藉添加以下各行至一HTML文件定義呈現層101(例如於index.html)而被含括:<script type="text/javascript" src="../common/js/jquery-1.5.1.min.js"></script>;and <script type="text/javascript" src="../common/js/jquery-ui-.8.11.custom.min.js"></script>.
然後,於HTML文件的正文區段,可使用「<div>」提供滑動器的一位符,例如:<div class=”slide”id=”slider”<>/div>.
然後jQuery存庫經指示來在適當位符顯示一滑動器,使用下式,具有含一最大值、一最小值、及一內設值的範圍:$(“#slider”).slider({range:“max”,value:70,min:40,max,100,.
當然,也可使用不同型別的滑動器及具有不同範圍的滑動器。
滑動器的事件處置器可載明在前一行終端。於圖3之非限制性實例中,該事件處置器係藉下式定義:slide:function(event,ui){
載明該事件處置器將揀取滑動器的每個移動,及更新預覽區,藉此回應於該滑動器的每次移動,即時重新繪製 該預覽區(含該主機圖框)。但如前記,也可載明回應於其它事件(例如開始及/或停止事件)重新繪製該預覽區的事件處置器。
圖3中虛擬代碼的其餘部分載明滑動器位置變換成一變焦比,及該變焦比施用於各個網頁瀏覽器,諸如網際網路探索者及克隆。
如於背景章節所記,目前網頁應用程式開發工具未能提供方便的方式來讓應用程式開發者將電子文件諸如電子書轉換成同時用在多個OS及/或形狀因數的互動文件應用程式。反而,既有工具典型地要求應用程式開發者為不同的OS,使用不同工具來將電子文件轉換成此等互動文件應用程式。此種處理耗時費事且可能導致所產生的互動文件應用程式之使用者具有不一致的經驗。此外,既有工具經常未能考慮影響跨不同平台及作業系統的讀取經驗,在解析度、螢幕配向、及其它因素上的差異。
本文揭示藉由提供利用此處所述裝置模擬器的整合式開發方法及網頁應用程式開發工具,可解決此等議題中之一或多者。舉例言之,本發明之網頁應用程式開發工具及方法可提供一機構,來針對多個OS及形狀因數快速地將電子文件諸如電子書轉換成互動文件網頁應用程式。此外,此處描述之工具及方法可調整所產生的應用程式之各項元件,因而考慮不同的目標裝置間的螢幕解析度、配向、形狀因數等的差異。
據此,本文揭示之另一構面係有關於網頁應用程 式開發工具。於若干實施例中,此處描述之網頁應用程式開發工具係在開發系統諸如桌上型或膝上型電腦的處理器上執行。網頁應用程式開發工具通常含括以網頁為基的使用者介面及轉換服務。於若干實施例中,該網頁應用程式開發工具進一步包括一編譯器服務。此等組件各自的功能及組態實例以細節討論如下。
就該方面而言,係參考圖4,其提供模式、視野、控制(MVC)架構型樣的方塊圖實例,本文揭示之網頁應用程式開發工具的一或多個面向可植基於該架構型樣之上。於該MVC型樣中,模式401可管理應用程式領域的行為及資料,回應於有關其狀態的資訊請求(例如來自於該視野),及/或回應於改變狀態的指令(例如來自控制器)。於事件驅動系統中,模式401可通知觀察者(例如視野)有關其狀態何時改變,讓觀察者可回應。
視野402通常係經組配來渲染該模式成為適用於互動的形式,例如使用者介面元件。須瞭解針對單一模式可存在有多個視野。於此種情況下,各個視野可服務相同或不同目的作為另一個視野。視野402可具有與顯示器表面(例如監視器)的1:1對應關係,且可經組配來使其知曉如何渲染顯示器表面。
控制器403通常係經組配來接收輸入(例如來自一使用者),及藉對模式物件或其它資源作呼叫而起始對此等輸入的回應。舉例言之,控制器403可接收來自使用者的輸入,且指示模式及視野基於該輸入而執行動作。
如前記,本文揭示之工具及方法可利用UI及轉換服務來將電子文件諸如電子書轉換成互動文件網頁應用程式。容後詳述,該UI可經組配來提出供給來源檔案的方便機構,例如藉提供上傳或輸入程式其許可來源檔案被載入本文揭示之網頁應用程式開發工具。一旦載入時,轉換服務可將來源檔案轉換成互動文件網頁應用程式(例如於HTML/Javascript語言),其可在裝置模擬器內執行與編輯。選擇性地,以網頁為基的創作工具可利用轉換服務來將互動文件網頁應用程式封裝成套裝軟體,及適用於寬廣多種OS及形狀因數的應用程式安裝程式。
為求簡明清晰,本文揭示聚焦在儲存於epub檔案格式的電子文件轉換成互動文件網頁應用程式。但須瞭解可使用可以任一種適當檔案格式儲存的電子文件。舉例言之,可使用以PDF格式、doc格式、docx格式、HTML格式、TXT格式、MOBI格式等儲存的文件。
圖5提供依據本文揭示之非限制性實例一種網頁應用程式開發工具實例之頂層架構及工作流程圖。如圖所示,網頁應用程式開發工具500包括使用者介面501、轉換服務502、及編譯器服務503。於操作中,來源檔案504諸如電子書例如透過使用者介面501而載入網頁應用程式開發工具500。一旦載入後,轉換服務502將來源檔案504轉換成互動文件網頁應用程式505。在使用者介面501內部執行的裝置模擬器(圖中未顯示)內部產生互動文件網頁應用程式505的預覽。
容後詳述,互動文件網頁應用程式505可包括樣式代碼(例如串級樣式表單)及動態代碼(例如JavaScript)。一般而言,樣式代碼許可使用者介面501的使用者介面之客製化。相反地,動態代碼通常係操作來回應於透過網頁應用程式開發工具500的使用者介面501所做輸入而動態地調整使用者介面501的各個元件(例如其頁面布局、配向等)。
牢記此點,使用者介面501可包括客製化代碼、模擬器控制代碼、及工具項目欄代碼,其中之任一者可用來客製化互動文件網頁應用程式505。舉例言之,透過UI所做輸入可用來變更互動文件應用程式505的使用者介面及/或其解析度、布局、配向、字型等。此外,使用者介面501可包括元件,其功能係將外掛程式(例如社群外掛程式)插入使用者介面501內。回應於此等輸入,可更新互動文件網頁應用程式505及/或其預覽。
一旦互動文件網頁應用程式505的客製化完成,編譯器服務503可操作來將結果所得的客製化互動文件網頁應用程式封裝成適用於安裝在多個OS上的本機應用程式。此點係例示說明於圖5的頂層架構及工作流程圖實例,其中編譯器服務503將互動文件網頁應用程式505封裝成適用於OS1、OS2、OSn的應用程式安裝程式5071、5072、507n。編譯器服務503可使用網頁套組或另一種適當機構而將一互動文件網頁應用程式封裝成本機應用程式。
由轉換服務所產生的電子文件網頁應用程式包括來源檔案及/或潛在代碼,其許可應用程式於一裝置模擬 器內動態地編輯。舉例言之,電子文件網頁應用程式可包括動態代碼,諸如JavaScript引擎,其係經組配來從其它來源檔案動態地產生HTML頁面。
此外,互動文件網頁應用程式可包括布局代碼,諸如一或多個HTML頁面,其定義該電子文件網頁應用程式的使用者介面的布局。此外,電子文件網頁應用程式可包括樣式代碼(例如串級樣式表單),其界定該互動文件網頁應用程式的使用者介面之各個組件的外觀(例如色彩方案、按鈕形狀、小圖幟等)。互動文件網頁應用程式也包括提供一內容表(TOC)的TOC代碼(例如一或多個HTML檔案)及選擇性地用作為互動文件網頁應用程式的入口。最後,互動文件網頁應用程式可包括章節代碼(例如一或多個html檔案),其含有含在前述一來源檔案中的該電子文件的各章節物質。
圖6提供依據本文揭示一種互動文件網頁應用程式的架構圖實例。如圖所示,互動文件網頁應用程式601係使用前述MVC架構編碼。模式602包括動態代碼603(例如JavaScript引擎treesaver.js),其係從下列來源檔案動態地產生HTML頁面,諸如布局代碼604(例如resources.html)、樣式代碼605(例如style.css)、TOC代碼606(例如index.html)、及章節代碼607(例如HTML檔案)。
動態代碼603(例如treesaver.js)、布局代碼604、及/或樣式代碼605中之一或多者可經編碼,使得其在主機瀏覽器載入TOC代碼606(例如index.html)及/或章節代碼 607之前被載入。如此可使得動態代碼603使用於樣式代碼605(例如style.css)載明的樣式(例如樣式表單),及在布局代碼604(例如resources.html)載明的導航布局而在主機瀏覽器內產生HTML頁面。由動態代碼603所產生的HTML頁面可在視野608(例如在主機瀏覽器)渲染,於該處可由使用者觀看。
動態代碼603也可應答透過控制609所做的輸入,其可具體實施於此處描述之網頁應用程式開發工具的使用者介面中。如此,例如,控制609可發揮功能變更模式602的各個構面,例如移至前一章/下一章,移至前一頁/下一頁,或旋轉畫面。動態代碼603可回應於此等輸入產生HTML頁面,藉此更新模式602來含括透過控制609輸入的變更。然後視野608可以應答該輸入所產生的HTML頁面更新,允許一使用者觀看對該互動文件網頁應用程式所做變更。
注意實際上圖6所示非限制性實例中,該互動文件網頁應用程式係使用HTML及JavaScript產生。結果,互動文件網頁應用程式可與平台獨立無關,原因在於寬廣多種OS及硬體能夠執行HTML及JavaScript。確實,預期只要一目標裝置的OS及硬體支援網頁瀏覽,則該目標裝置應可毫無困難地執行本文揭示之互動文件網頁應用程式。
雖然此處描述之互動文件網頁應用程式可為與平台及/或OS獨立無關,但可能須將此等應用程式封裝於適當安裝程式內,隨後可安裝在一目標作業系統上。牢記此 點,不同OS可要求不同型別的安裝程式。舉例言之,微軟視窗可要求使用於MSI格式的安裝程式,而另一OS可要求使用於另一種格式的安裝程式。於若干實施例中,本文揭示之網頁應用程式開發工具可透過選擇性地編譯器服務的使用而解決此項議題。
概略言之,本文揭示之編譯器服務係操作來將一互動文件網頁應用程式編譯成用於目標OS之一最終本機應用程式,及對目標OS產生適當安裝程式。於互動文件網頁應用程式欲用在多個OS之情況下,編譯器服務可經組配來針對各個目標OS同時地或分開地產生本機應用程式及安裝程式。
此處揭示的編譯器服務可包括前處理代碼(例如圖9中之ebulwagsvc.php)及封裝代碼中之一或多者。前處理代碼可執行多項功能。舉例言之,前處理代碼可將小圖幟(例如使用者上傳的小圖幟)加至互動電子文件網頁應用程式。此外地或另外地,前處理代碼可將該互動電子文件網頁應用程式壓縮成單一檔案,例如.zip檔案。及於若干實施例中,前處理代碼可上傳壓縮檔案至一分配伺服器,及一旦建立互動文件網頁應用程式的個別本機應用程式版本,則呈示下載鏈路給以網頁為基的UI。
封裝代碼為一種服務,其作用來將互動文件網頁應用程式編譯成各個OS及形狀因數的本機應用程式。封裝代碼可駐在本地或遠端。舉例言之,封裝代碼可為駐有網頁服務的電腦(例如伺服器),其係在跑此處描述之網頁應用 程式開發工具的開發系統遠端。
圖7提供依據本文揭示藉一編譯器服務所產生的本機應用程式之架構圖的非限制性實例。如圖所示,編譯器服務701將一互動文件網頁應用程式包裹成一互動文件網頁應用程式套裝軟體702。此外,編譯器服務701可增加額外層,諸如網頁引擎703、軟體開發套組(SDK)704、及混成包裹程式705。
互動文件網頁應用程式套裝軟體702可包括此處揭示的互動文件網頁應用程式之各個組件。例如,互動文件網頁應用程式套裝軟體702可包括如先前描述的動態代碼、布局代碼、樣式代碼、章節代碼、及TOC代碼。互動文件網頁應用程式套裝軟體可呈含有多個前文討論之檔案的一壓縮檔案(例如zip檔案)形式。
網頁引擎703可為OS相依性引擎,其係經組配來從互動文件網頁應用程式套裝軟體702中擷取該互動文件網頁應用程式。此外,網頁引擎703可經組配來剖析該互動文件網頁應用程式的潛在代碼(例如布局代碼(例如html)、樣式代碼(例如CSS)、及動態代碼(例如JavaScript)),及渲染一輸出至一分派窗(例如由混成包裹程式705所分派的窗)。目前,一網頁引擎須對各個OS編譯。直至跨多個OS可操作的網頁引擎變成可利用的程度,本文揭示之涵蓋此等網頁引擎。
SDK 704可為OS相依性SDK,且可執行多項功能。舉例言之,SDK 704可證實特定使用者是否經授權來使 用一最終本機應用程式。此外,SDK可操作來將該最終本機應用程式置於全螢幕模式或視窗模式。當然,此等功能僅供例示說明目的,SDK 704可提供如業界已知之其它SDK功能。於本文揭示之若干實施例中,編譯器服務701針對各個目標OS編譯一個SDK。
混成包裹程式705可為對一目標OS編譯的應用程式,且可用來調用證實及其它協定。舉例言之,混成包裹程式705可調用SDK 704來證實一使用者是否經授權來使用該最終本機應用程式。當成功時,混成包裹程式705可針對一目標OS載入網頁引擎703,及將互動文件網頁應用程式套裝軟體的位置傳送至網頁引擎703。
與方法無關,須瞭解編譯器服務701操作來分別地對OS1及OSn產生應用程式安裝程式7061、706n。此點可運用圖7顯示的架構圖及方法實例或以其它方式完成。
如前記,本文揭示之網頁應用程式開發工具包括一使用者介面(UI)。容後詳述,本文揭示之UI可以網頁為基,且可允許一使用者編輯在一裝置模擬器內跑的一互動文件網頁應用程式的各個面向。對互動文件網頁應用程式所做編輯可即時、定時、或以各種時間間隔渲染。藉此方式,UI可許可一使用者觀察於一目標裝置的模擬顯示器脈絡中對一互動文件網頁應用程式所做改變的影響。
為了達成此項目的,參考圖8,提供一種依據本文揭示的UI之非限制性實例。如圖所示,UI 800包括裝置模擬器,含裝置模擬器預覽區801及裝置圖框802。一般而 言,裝置模擬器係用作為一個位置其中可預覽由一轉換服務所產生的互動文件網頁應用程式。裝置圖框802通常係與如此處描述之裝置模擬器的裝置圖框相關。如此,裝置圖框802可操作來顯示一或多個影像,諸如目標裝置(例如行動電話、平板個人電腦等)的溝緣影像。裝置模擬器預覽區801可與先前此處描述之裝置的主機圖框相關。因此,可在裝置模擬器預覽區801內部進行互動文件網頁應用程式的預覽。
如圖8進一步例示說明,UI 800可包括其它組件,諸如工具項目欄803、模擬器設定值面板804、及客製化面板805。通常工具項目欄803含有與工具項目層面操作相關的元件。舉例言之,工具項目欄803可包括元件,該等元件允許使用者選擇一工具項目型別,產生新工具項目,製作測試套裝軟體,及/或公開既有工具項目之一釋放套裝軟體。
模擬器設定值面板804通常包括與在UI 800內部跑的一裝置模擬器之操作有關的元件。舉例言之,模擬器設定值面板804可包括一純量806(諸如一滑動器),其可用來調整裝置模擬器預覽區801及/或802的變焦比。於若干實施例中,如先前所述,純量806許可由該裝置模擬器所產生的模擬顯示器與一目標裝置的顯示間之逐一像素對映及逐一英寸對映。
除了純量806之外,模擬器設定值面板804可包括其它客製化命令,影響在UI 800內部執行的裝置模擬器中 跑的一互動文件網頁應用程式的顯示。舉例言之,模擬器設定值面板可包括命令,許可對模擬裝置型別、解析度、配向(旋轉)等作改變。
客製化面板805可包括命令,該等命令變更一互動文件應用程式的格式、型別、及布局。舉例言之,客製化面板805可包括命令,改變一互動文件網頁應用程式的使用者介面、該應用程式中之資訊組織、字型等。此外,客製化面板805可包括命令,該等命令將外掛程式插入一互動文件網頁應用程式內部的適當位置。舉例言之,客製化面板805可包括命令,該等命令將連至社群媒體網址(例如www.facebook.com及www.twittter.com)的鏈路或外掛程式插入一互動文件網頁應用程式內部的適當位置。容後詳述,此項目的可使用動態代碼將相關外掛程式代碼插入一互動文件網頁應用程式的來源檔案達成。
本文揭示之以網頁為基的UI可使用MVC型樣設計。至於此一構思之非限制性實例,參考圖9,提供依據本文揭示UI 900的非限制性架構圖。
當電子書被選作為工具項目型別(例如透過工具項目欄803)時,UI 900的潛在代碼可產生適當控制器類別物件903(例如eBookController.js)來為得自其它資源諸如模式類別物件904(例如eBookmodel.js)的擇定工具項目載入相關資料及面板。此外,控制器類別物件903可渲染於一網頁瀏覽器內的相關客製化面板。
UI 900的潛在代碼也可產生一或多個額外控制 器類別物件來載入得自適當資源的裝置模擬器資料,及渲染在UI 900中跑的一裝置模擬器之裝置圖框。此係顯示於圖9之非限制性實例中,其中deviceHelper.js載入得自sharedmodel.js(含模擬器資訊的模式資源)的裝置模擬器資料。
當提供來源文件諸如epub文件(例如藉上傳、輸入、或其它手段)時,轉換服務901(例如圖9的epub2html.php)可用來將來源檔案轉換成一互動文件網頁應用程式905,如前文說明,包括布局及樣式代碼。舉例言之,epub2html.php服務可將來源檔案轉換成互動文件網頁應用程式,包括HTML檔案及CSS檔案。當完成時,控制器類別物件903(例如eBookController.js)可載入互動文件網頁應用程式,及在裝置模擬器預覽區渲染之。
當命令諸如含在工具項目欄803、模擬器設定值面板804、及客製化面板805的命令被調用時(例如點選或拖曳且落在裝置模擬器預覽區上),控制器類別物件903(例如eBookController.js)可指令轉換服務901(例如透過服務諸如ebupdatesvc.php)來修正互動文件網頁應用程式的來源檔案(例如布局代碼諸如resources.html;樣式代碼諸如style.css等)而含括期望的改變。此外,控制器類別物件903可指示轉換服務901來重新載入互動文件網頁應用程式於視野902的裝置模擬器預覽區內。一旦編輯成互動文件應用程式905完成,則編譯服務(例如ebulbwasvc.php)906可為多個OS編譯本機安裝程式。
從前文顯然易知本文揭示之非限制性實例的該等轉換服務可執行兩項功能。第一,此處描述之轉換服務可操作來將電子文件轉換成互動文件網頁應用程式(例如epub轉成webapp)。第二,此處描述之轉換服務可操作來更新一互動文件網頁應用程式的來源檔案而含括透過該UI所做的任何變化。如圖9所示且如前文簡述,此二功能可藉個別服務例如epub2html.php及ebupdatesvc.php執行。
有關電子文件轉換成互動網頁應用程式,此處描述之轉換服務(例如圖9的epub2html.php)可使用轉換演算法來從文件來源檔案擷取資料。概略言之,轉換演算法包括電子書剖析器,該剖析器擷取電子文件來源檔案(於epub或其它支援格式)來取回相關資料,及一webapp產生器其產生互動網頁應用程式的某些來源檔案。舉例言之,電子書剖析器可擷取相對應於作用、標題、出版者、章節列表等的母資料,以及剖析文件來源檔案的本身文字及/或影像。網頁應用程式產生器可以藉電子書剖析器擷取的資料,諸如母資料及章節列表填入一樣板檔案(例如樣板TOC.html檔案)而產生互動文件網頁應用程式的TOC代碼(例如TOC.html)。此外,網頁應用程式產生器可以所擷取的正文文本資料及影像填充章節樣板(例如樣板章節html檔案)而產生章節代碼(例如個別HTML檔案)。
至於將一互動文件網頁應用程式的來源檔案更新成包括透過該UI所做的任何變化,轉換服務(例如圖9的ebupdatesvc.php)可發揮一或多個項功能。舉例言之,轉換 服務可操作來將社群外掛程式代碼插在互動文件網頁應用程式的布局代碼(例如resources.html)的適當位置。另外或此外,轉換服務可操作來藉以選定主題載明的樣式代碼及布局代碼來替換或更新樣式代碼(例如style.css)及/或布局代碼(例如resources.html)而改變書籍主題。於此種情況下,可保有或可不保有社群外掛程式代碼。於若干實施例中,儘管主題改變,仍保有社群外掛程式代碼。由此須瞭解轉換服務可用來更新與一互動文件網頁應用程式的布局及外觀相關的任何及全部元素,諸如字型、字型大小、配向、解析度等。
轉換服務也可經組配來提供復置選項。當實施時,復置選項可用來將互動文件網頁應用程式的樣式及布局代碼復置為一內設主題或預選定主題中載明的樣式及布局代碼。於此種情況下,可保有或可不保有社群外掛程式代碼。於若干實施例中,當實際復置選項時去除社群外掛程式代碼。
圖10為依據本文揭示一種轉換服務之架構圖實例。如圖所示,文件來源檔案1001可透過UI 1002或其它裝置而載入本文揭示之以網頁為基的創作工具。一旦載入時,轉換服務1003使用電子書剖析器1004從文件來源檔案1001擷取資料(例如母資料、正文文本、影像等)。網頁應用程式產生器1005施加所擷取的資訊而產生針對互動文件網頁應用程式1006的來源檔案。
可在UI 1002中跑的裝置模擬器中產生(例如使 用內設主題、布局等)及顯示互動文件網頁應用程式1006的預覽。更新服務1007可檢測透過1002所做變化,及據此指示動態代碼(JavaScript代碼諸如treesaver.js)來更新互動文件網頁應用程式1006的來源檔案。然後可再新在UI 1002內部跑的互動文件網頁應用程式1006的預覽。
為求清晰,現在本文揭示討論由一電子文件對依據本文揭示的網頁應用程式轉換演算法執行的工作流程之非限制性實例。為了例示說明目的,本實例係聚焦在以epub格式儲存的文件來源檔案轉換成一互動文件網頁應用程式。但須瞭解使用以其它格式儲存的來源文件,可施行相同的或相似的步驟。
於本非限制性實例中,轉換服務包括電子書剖析器,其係以epub格式擷取一來源文件檔案至一過渡目錄。初始電子書剖析器可證實所擷取的檔案內容,及然後前進至藉檢查擷取自該來源文件檔案且儲存在該過渡目錄的一XML檔案(例如container.xml)而擷取母資料。透過此檢查,電子書剖析器可獲得根檔案節點的全路徑屬性,此一路徑為罩住一epub的母資料、檔案表徵、及線性讀取順序的開放式封裝格式(OPF)檔案的路徑。
一旦已經決定OPF檔案的路徑,電子書剖析器可開啟OPF檔案為可擴延標記語言(XML)檔案,定位母資料節點,及做出母資料節點的克隆拷貝(後文中稱作為「克隆母資料節點」)。然後,電子書剖析器可搜尋在該母資料節點內部的特定節點而識別可用在該互動文件網頁應用程式的 資訊。舉例言之,電子書剖析器可識別與標題(例如de:title)及內容表(例如一自旋節點)有關的節點。至於內容表,電子書剖析器可檢查自旋節點的TOC屬性,在該表徵節點下方搜尋子代節點有關具有id等於TOC屬性的分錄。此外,電子書剖析器可識別href屬性值,其可相對應於導航控制檔案(NCX檔案)的路徑名稱。
轉換演算法可藉下述方式而產生一內容表:迭代重複在該自旋節點下方的全部itemref子代節點;獲得其識別值(例如idref);搜尋在該表徵節點下方子代節點有關具有一識別符等於該識別值的分錄;對此等項目獲得href屬性值;及運用該href屬性作為全路徑名稱,在一TOC列表中產生新的章節項目。
電子書剖析器可開啟NCX檔案為XML檔案,及檢查來執行數項功能。例如電子書剖析器可找出在NCX檔案中的docTitle節點及獲得其文字節點值。於OPF檔案中遺漏de:title節點之情況下,此值可用作為標題。此外,電子書剖析器可為docAuthor節點分析NCX檔案,及獲得文字節點值。此值可用作為書籍作者名稱。此外,電子書剖析器可藉下列方式更新TOC列表:找出在NCX檔案中的navMap節點;迭代重複全部navPoint子代節點,及獲得其navLabel/text節點值。此值可用作為各章節的標題。電子書剖析器也可搜尋前述TOC列表,且將作為標題的navLabel/text節點值加至與內容節點的src屬性具有相同全路徑名稱的任一章節項目。否則內設描述符,例如「part xx」 可用作為章節標題,於該處xx為TOC列表中的索引號碼。
如前文簡短說明,電子書剖析器可從一電子文件來源檔案中擷取正文文本及影像。後文詳細說明部分提供電子書剖析器及網頁應用程式產生器可使用該資訊來產生針對一互動文件網頁應用程式的來源檔案的非限制性實例。
於此一非限制性實例中,電子書剖析器可開啟在前述TOC列表中由各個章節項目所載明的HTML檔案。網頁應用程式產生器可開啟用於寫入的一輸出章節檔案(於一輸出目錄),且可以樣板檔案內容預先填入輸出章節檔案。於某些情況下,輸出章節檔案具有與來源電子文件檔案相同名稱,但有HTML擴延。電子書剖析器也可找出相關標頭→標題節點,網頁應用程式產生器可使用該節點值作為關注的章節標題。若標頭→標題節點為不可得,則網頁應用程式產生器可使用另一值作為章節標題,諸如書名。
然後網頁應用程式產生器可輸出已克隆的母資料節點給該輸出章節檔案。使用遞歸函式(例如convertnodelist()),電子書剖析器可迭代重複一輸入章節檔案的<正文>章節的全部子代節點,及擷取該正文文本及/或影像。然後網頁應用程式產生器可將該正文文本及影像加至該輸出章節檔案。
遞歸函式(例如convertnodelist())可使用兩個自變數,亦即nodeList及parentNode。nodeList自變數為電子書剖析器可從其中讀取的一輸入節點列表。parentNode自變 數為一目標輸出節點,其為輸出可藉該網頁應用程式產生器插入位置。
電子書剖析器可迭代重複在nodeList自變數中的全部節點,及取決於節點型別進行多個動作。舉例言之,若節點型別為XML_TEXT_NODE,則電子書剖析器可從該節點值擷取正文文本,及將該正文文本附在一親代節點下方。
若節點型別為XML_TEXT_NODE,則電子書剖析器可檢查該節點名稱且基於該節點名稱執行不同動作。例如,若該節點名稱為img,則電子書剖析器可從該節點的src屬性中擷取該影像所在位置,及從過渡目錄拷貝該影像至該輸出目錄。然後網頁應用程式產生器可產生一img節點,設定該img節點的src屬性至在該輸出目錄中的位置,及設定該影像的寬度及高度屬性至一期望值。
若該節點名稱為div、p、span、及/或pre,則該網頁應用程式產生器可基於該相關親代節點名稱而執行功能。舉例言之,若該親代節點名稱為p或span,或若無文字子代節點,則網頁應用程式產生器可呼叫遞歸函式(例如convertnodelist()),使用該目前節點的全部子代節點作為該nodeList,及使用該目前親代節點作為parentNode。否則,該網頁應用程式產生器可:產生一新p節點;將該新p節點附在parentNode下方;呼叫遞歸函式(例如convertnodelist());使用該目前節點的全部子代節點作為該nodeList,及使用該新p節點作為parentNode。
若該節點名稱為table、tr、td、或svg,則該網頁應用程式產生器可呼叫遞歸函式(例如convertnodelist()),使用該目前節點的全部子代節點作為該nodeList,及使用該目前親代節點作為parentNode。
若該節點名稱為h1、h2、h3、h4、h5、h6、b、l、big、ol、ul、li、d、dt、dd、em、code、strong、及/或blockquote,則該網頁應用程式產生器可:產生有相同名稱的一新節點;將該新節點附在parentNode下方;呼叫遞歸函式(例如convertnodelist());使用該目前節點的全部子代節點作為該nodeList,及使用該新節點作為parentNode。
網頁應用程式產生器也可使用前述TOC樣板(例如TOC.html)及TOC列表而產生一互動文件網頁應用程式的TOC代碼(例如index.html)。舉例言之,網頁應用程式產生器可開啟一輸出TOC檔案(例如index.html),及預先填入一TOC樣板檔案的內容。該TOC樣板可包括標題(例如標頭→標題)及作者(例如正文→物件)的節點分錄,可藉網頁應用程式產生器而以由電子書剖析器擷取的相關資料填充。於若干實施例中,網頁應用程式產生器以針對書名的h1節點,及針對作者的h4節點填充正文→物件節點。網頁應用程式產生器也可迭代重複在TOC列表(如前文討論)中的全部章節項目,及針對各章節項目產生一節點(例如h4節點)。然後各節點值可經設定來含括相對應於該章節標題的文字(如前文討論,可由電子書剖析器決定)。與各個章節代碼位置相聯結的超連結也可加在各個章節項目節點下方。
當電子文件至網頁應用程式的轉換完成時,轉換服務可回送於過渡資料夾中的輸出檔案(例如index.html)至以網頁為基的UI供預覽渲染。
圖11提供依據本文揭示針對網頁應用程式開發工具的一使用者介面的一分類圖的非限制性實例。於該非限制性分類圖中的物件可對映至圖6的架構視圖,如表1所示:
圖11更進一步識別可對各個物件界定的各項函式,例如於webappauthoringtool物件中的+load()及+unload()。此等函式只為了例示說明目的提供,而不應視為限制本文揭示之範圍。如技藝界將瞭解,依據本文揭示之網頁應用程式開發工具,可使用包括比較圖11所示特定非限制性實例更多或更少的函式的使用者介面。
本文揭示之另一個面向係有關於針對多個OS及/或形狀因數,創作互動文件網頁應用程式且將此等應用程式編碼成本機檔案的電腦體現方法。就該方面而言,參考圖12,該圖提供依據本文揭示一種方法之非限制性實例。
於來源檔案提供步驟1200中,依據本文揭示一電子文件來源檔案(例如epub、pdf等)提供給一網頁應用程式開發工具。該電子文件來源檔案例如可由一使用者例如透過前述UI上傳,或透過其它手段提供。
於轉換步驟1210中,調用一轉換服務來從該電子文件來源檔案擷取資料。舉例言之且如前述,該轉換服務可從該電子文件來源檔案擷取母資料、正文文本、影像、及其它資訊。此項資料可由轉換服務用來使用一內設的或預選定的型樣而產生一互動網頁應用程式,含括一內容表、章節、及其它期望部分。
於渲染步驟1220中,依據本文揭示在一裝置模擬器中渲染該互動文件網頁應用程式之一預覽。如前記,此一預覽可以使用一內設的或預選定的型樣而渲染。稍後,該互動文件網頁應用程式的該預覽可經渲染而含括於編輯 步驟1230期間所做編輯,容後詳述。
於編輯步驟1230中,該互動文件網頁應用程式的該預覽可為使用一使用者介面的編輯,如前文描述。舉例言之,可變更該互動文件網頁應用程式的解析度、配向、型樣、及格式(例如字型、字型大小等)。此外,外掛程式(例如外掛於社群媒體網址)可插入該互動文件網頁應用程式內。
於更新步驟1240中,該互動文件網頁應用程式係經更新(例如藉一轉換服務)以含括於編輯步驟1230期間輸入的改變。然後可再新該互動文件網頁應用程式的該預覽。
一旦不再需要編輯,則於編譯步驟1250中,該互動文件網頁應用程式可針對所選OS及形狀因數而編譯成互動網頁應用程式套裝軟體及安裝程式。最終結果為針對選用的平台提供安裝程式,於圖12中闡釋為步驟1260。
本文揭示之另一個面向係有關於機器可讀取媒體,該等媒體含有用以執行本文揭示之操作的指令,或含有代碼或設計資料,其界定此處描述之結構、電路、裝置、處理器、及/或系統特徵結構。舉例言之,本文揭示涵蓋物件,該等物件包含有指令儲存於其上的一機器可讀取媒體,該等指令當藉一處理器執行時使得該處理器執行符合本文揭示之裝置模擬器、網頁應用程式開發工具、及/或方法的操作。
前文說明述及特定名稱(例如針對此處描述之檔案、服務、函式及物件)及代碼。此等名稱及代碼提供於此 處只為了討論目的,而須視為舉例說明。熟諳技藝人士將瞭解任何適當名稱皆可用於此處描述之檔案、服務、及函式,此處描述之各個結構特徵的編碼變化皆屬可能。此等變化係涵蓋於本文揭示且係爰引於此並融入本說明書的揭示。
本文揭示之其它實施例將為業界人士從考慮本說明書及此處揭示之本發明之實務為顯然易知。本說明書意圖僅視為舉例說明目的,而本發明之真諦範圍及精髓將由如下申請專利範圍指示。
100‧‧‧裝置模擬器
101‧‧‧呈現層
102‧‧‧渲染層
103、801‧‧‧預覽區、裝置模擬器預覽區
104‧‧‧主機圖框
105、802‧‧‧裝置圖框
106、806‧‧‧純量
107‧‧‧純量代碼
202-206‧‧‧步驟
401、602‧‧‧模式
402、608、902‧‧‧視野
403‧‧‧控制器
500‧‧‧網頁應用程式開發工具
501、800、900、1002‧‧‧使用者介面(UI)
502‧‧‧轉換服務
503、701‧‧‧編譯器服務
504‧‧‧來源檔案
505、601、905、1006‧‧‧互動文件網頁應用程式
5071-n、7061-n‧‧‧作業系統(OS)之應用程式安裝程式
603‧‧‧動態代碼
604‧‧‧布局代碼
605‧‧‧樣式代碼
606‧‧‧內容表(TOC)代碼
607‧‧‧章節代碼
609‧‧‧控制
702‧‧‧互動文件網頁應用程式套裝軟體
703‧‧‧網頁引擎
704‧‧‧軟體開發套件(SDK)
705‧‧‧混成包裹程式
803‧‧‧工具項目欄
804‧‧‧模擬器設定值面板
805‧‧‧客製化面板
901、1003‧‧‧轉換服務
903‧‧‧控制器類別物件
904‧‧‧模式類別物件
905‧‧‧互動文件應用程式
906‧‧‧編譯服務
1001‧‧‧文件來源檔案
1004‧‧‧電子書剖析器
1005‧‧‧網頁應用程式產生器
1007‧‧‧更新服務
1200‧‧‧來源檔案提供步驟
1210‧‧‧轉換步驟
1220‧‧‧渲染步驟
1230‧‧‧編輯步驟
1240‧‧‧更新步驟
1250‧‧‧編譯步驟
1260‧‧‧應用程式安裝程式步驟
圖1提供依據本文揭示之非限制性實施例一種裝置模擬器的軟體組件之方塊圖。
圖2為依據本文揭示之非限制性實施例,如藉一裝置渲染而即時調整一目標裝置的模擬顯示器之變焦之一非限制性方法流程圖。
圖3提供爪哇虛擬代碼之一非限制性實例,其許可在多個網頁瀏覽器諸如,網際網路探索者(Internet Explorer)、火狐(Firefox)、及克隆(Chrome)即時準確淡入/淡出一主機圖框(iframe)。
圖4為本文揭示之網頁應用程式開發工具的一或多個面向可植基於其上的模式、視野、控制(MVC)架構型樣的方塊圖實例。
圖5為依據本文揭示之非限制性實施例一種網頁應用程式開發工具實例之頂層架構及工作流程圖。
圖6為依據本文揭示之非限制性實施例一種互動文件網頁應用程式的架構圖。
圖7為依據本文揭示之非限制性實施例一種藉一編譯器服務所產生的本機應用程式之架構圖。
圖8提供依據本文揭示一種使用者介面之非限制性實例。
圖9為依據本文揭示之非限制性實施例一種以網頁為基的使用者介面之架構圖。
圖10為依據本文揭示之非限制性實施例一種轉換服務之架構圖。
圖11為依據本文揭示一種網頁應用程式開發工具之非限制性實例的類別圖。
圖12為依據本文揭示之非限制性實施例一種方法之方塊圖。
100‧‧‧裝置模擬器
101‧‧‧呈現層
102‧‧‧渲染層
103‧‧‧預覽區
104‧‧‧主機圖框
105‧‧‧裝置圖框
106‧‧‧純量
107‧‧‧純量代碼

Claims (20)

  1. 一種網頁應用程式開發之系統,其包含:一處理器;一開發顯示器,其具有每英寸像素參數;一記憶體,其具有儲存於其上之裝置模擬器指令,其中當該等裝置模擬器指令被執行時使得該處理器:在一網頁瀏覽器內產生一使用者介面,該使用者介面包含至少一個主機圖框及至少一個純量,其中該純量為具有可由一使用者改變之位置範圍的一使用者介面物件,且該至少一個主機圖框會顯示於該開發顯示器上且含有一模擬顯示器,該模擬顯示器為一目標裝置的一實體顯示器之模擬;當該純量在一第一位置時,至少部分基於保持於一資料庫之中的該實體顯示器的屬性與至少該每英寸像素參數的一比較,將該第一位置轉換為一第一變焦比,並且施用該第一變焦比來調整該至少一個主機圖框的該大小,使得該模擬顯示器與該實體顯示器逐一英寸對映;以及當該純量在一第二位置時,將該第二位置轉換為一第二變焦比,且施用該第二變焦比至該至少一個主機圖框,使得該模擬顯示器與該實體顯示器逐一像素對映。
  2. 如申請專利範圍第1項之系統,其中該開發顯示器具有一第一解析度,該實體顯示器具有一第二解析度,且該 第一及第二解析度彼此不同。
  3. 如申請專利範圍第1項之系統,其中當該等裝置模擬器指令被執行時進一步使得該處理器產生相鄰於該至少一個主機圖框的多個裝置圖框。
  4. 如申請專利範圍第3項之系統,其中該等多個裝置圖框含有該目標裝置的一溝緣的影像。
  5. 如申請專利範圍第1項之系統,其中當該等裝置模擬器指令被執行時進一步使得該處理器回應於與該純量相聯結的一事件而再新該至少一個主機圖框。
  6. 如申請專利範圍第5項之系統,其中與該純量相聯結的一事件係選自於由一開始、一停止、一移動、或其組合所組成之一組群。
  7. 如申請專利範圍第5項之系統,其中該至少一個主機圖框係回應於與該純量相聯結的一事件而即時再新。
  8. 如申請專利範圍第1項之系統,其中回應於施用該第一變焦比至該至少一個主機圖框,係以與該目標裝置的該顯示器之一相對應維度差異實質上達5%或以下的至少一個維度,將該至少一個主機圖框渲染在該系統之一顯示器上。
  9. 一種網頁應用程式開發之方法,其包含下列步驟:在一開發顯示器上產生一使用者介面,該使用者介面包含一純量及於一網頁瀏覽器中執行的主機圖框,該純量為具有可由一使用者改變之位置範圍的一使用者介面物件,該主機圖框包含一模擬顯示器,該模擬顯示 器係一目標裝置之一實體顯示器的一模擬,該開發顯示器具有一每英吋像素參數;當該純量在一第一位置時,至少部分基於該每英寸像素參數與儲存於一資料庫中之該實體顯示器的屬性的比較,來決定一第一變焦比;當該純量在一第二位置時,決定一第二變焦比;當該純量在該第一位置時,施用該第一變焦比至該主機圖框以調整該主機圖框的該大小,使得該模擬顯示器與該實體顯示器逐一英寸對映;當該純量在該第二位置時,施用該第二變焦比至該主機圖框,使得該模擬顯示器與該實體顯示器逐一像素對映。
  10. 如申請專利範圍第9項之方法,其中該開發顯示器具有一第一解析度,該實體顯示器具有一第二解析度,且該第一及第二解析度彼此不同。
  11. 如申請專利範圍第9項之方法,其進一步包含:於相鄰該至少一個主機圖框的至少一個裝置圖框中顯示該目標裝置的一溝緣影像。
  12. 如申請專利範圍第9項之方法,其進一步包含回應於一純量事件而再新該模擬顯示器。
  13. 如申請專利範圍第12項之方法,其中該純量事件係選自於一開始、一停止、一移動、或其組合。
  14. 如申請專利範圍第12項之方法,其中該模擬顯示器係回應於該純量事件而即時再新。
  15. 一種網頁應用程式開發之方法,其包含下列步驟:在具有每英寸像素參數之一開發顯示器上,於藉一處理器執行的一網頁瀏覽器內顯示一使用者介面,該使用者介面包含一呈現層及一渲染層,該呈現層包含超文字標記語言代碼,該渲染層包括JavaScript代碼;在該呈現層的至少一個主機圖框內執行一模擬顯示器,該模擬顯示器包含一目標裝置之一實體顯示器的一模擬;以該渲染層來檢測一純量之一第一位置或一第二位置,該純量係一使用者介面物件,其具有可由一使用者改變的位置範圍;當該純量在一第一位置時,至少部分基於儲存於一資料庫中之該實體顯示器的屬性與該每英寸像素參數之比較,以該渲染層將該第一位置轉換成一第一變焦比;當該純量在一第二位置時,以該渲染層將該第二位置轉換成一第二變焦比;當該純量在該第一位置時,施用該第一變焦比至該主機圖框以調整該主機圖框的大小,使得該模擬顯示器與該實體顯示器逐一英寸對映;及當該純量在該第二位置時,施用該第二變焦比至該主機圖框,使得該模擬顯示器與該實體顯示器逐一像素對映。
  16. 如申請專利範圍第15項之方法,其中該開發顯示器具有 一第一解析度,該實體顯示器具有一第二解析度,且該第一及第二解析度彼此不同。
  17. 如申請專利範圍第15項之方法,其進一步包含:於相鄰該至少一個主機圖框的至少一個裝置圖框中顯示該目標裝置的一溝緣影像。
  18. 如申請專利範圍第15項之方法,其進一步包含:回應於純量事件以該渲染層再新該模擬顯示器。
  19. 如申請專利範圍第18項之方法,其中該純量事件係選自於一開始、一停止、一移動、或其組合。
  20. 如申請專利範圍第18項之方法,其中該模擬顯示器係回應於該純量事件而即時再新。
TW101132001A 2011-09-26 2012-09-03 網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式開發工具以及使用其等之方法 TWI578220B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
US13/245,258 US9142192B2 (en) 2011-09-26 2011-09-26 Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same

Publications (2)

Publication Number Publication Date
TW201324322A TW201324322A (zh) 2013-06-16
TWI578220B true TWI578220B (zh) 2017-04-11

Family

ID=47910815

Family Applications (1)

Application Number Title Priority Date Filing Date
TW101132001A TWI578220B (zh) 2011-09-26 2012-09-03 網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式開發工具以及使用其等之方法

Country Status (5)

Country Link
US (1) US9142192B2 (zh)
EP (1) EP2761495A4 (zh)
CN (1) CN103814371B (zh)
TW (1) TWI578220B (zh)
WO (1) WO2013048799A1 (zh)

Families Citing this family (31)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130145361A1 (en) * 2011-12-01 2013-06-06 International Business Machines Corporation Discovering and installing web application plugins
EP2798533A4 (en) * 2011-12-30 2015-09-23 Intel Corp APPARATUSES AND METHODS FOR WEB APPLICATION CONVERSION SYSTEMS
US9449126B1 (en) * 2012-06-01 2016-09-20 Inkling Systems, Inc. System and method for displaying content according to a target format for presentation on a target presentation device
US9355150B1 (en) 2012-06-27 2016-05-31 Bryan R. Bell Content database for producing solution documents
US9317513B1 (en) * 2012-06-27 2016-04-19 Netapp, Inc. Content database for storing extracted content
US9519624B1 (en) 2013-02-05 2016-12-13 Inkling Systems, Inc. Displaying previews of content items for electronic works in a target rendering environment
US20140282398A1 (en) * 2013-03-15 2014-09-18 Wolters Kluwer U.S. Corporation Platform for developing and distributing mobile applications
US10268666B2 (en) * 2013-10-30 2019-04-23 Rockwell Automation Technologies, Inc. Industrial automation workstation and display method for scaling and displaying text destined for a target industrial automation device
TWI505098B (zh) * 2014-01-08 2015-10-21 Service supply node control system
TWI507984B (zh) * 2014-01-15 2015-11-11 Chunghwa Telecom Co Ltd Web application versioning and loading method
CN106663007B (zh) * 2014-07-03 2020-07-03 阿贝尔环球国际有限公司 使工具运作于作业环境的方法以及应用该方法的机器
US20160103815A1 (en) * 2014-10-10 2016-04-14 Dicky Suryadi Generating mobile web browser views for applications
CN104866313A (zh) * 2015-05-22 2015-08-26 国云科技股份有限公司 一种通用的jsp上传文件的方法
US10157047B2 (en) * 2015-10-19 2018-12-18 Facebook, Inc. Methods and systems for communicating application prototype information
US9870062B2 (en) 2015-11-11 2018-01-16 Facebook, Inc. Methods and systems for defining gestures for a user interface
CN105446796B (zh) * 2015-11-30 2018-10-23 金蝶软件(中国)有限公司 一种移动轻应用的模拟方法及设备
CN105740403A (zh) * 2016-01-28 2016-07-06 浪潮通用软件有限公司 一种对预览效果进行调整的方法及装置
CN106874323A (zh) * 2016-06-28 2017-06-20 阿里巴巴集团控股有限公司 一种数据存储方法和装置
US20180129484A1 (en) * 2016-11-04 2018-05-10 Microsoft Technology Licensing, Llc Conversational user interface agent development environment
KR20180071012A (ko) * 2016-12-19 2018-06-27 삼성전자주식회사 전자 장치 및 전자 장치 제어 방법
WO2018142588A1 (ja) * 2017-02-03 2018-08-09 楽天株式会社 情報処理装置、情報処理方法、プログラム、記憶媒体
TWI638314B (zh) * 2017-08-10 2018-10-11 易易資設有限公司 編輯超文件標示語言文件之方法
JP2019200524A (ja) * 2018-05-15 2019-11-21 ルネサスエレクトロニクス株式会社 プログラム、情報処理装置、および情報処理方法
CN111488139B (zh) * 2019-01-25 2023-01-31 成都鼎桥通信技术有限公司 一种基于专网终端的集群业务二次开发方法
EP3716037A1 (en) * 2019-03-28 2020-09-30 ABB Schweiz AG Responsive auto-layouting of industrial process graphics
CN110543372B (zh) * 2019-09-10 2023-03-28 北京百度网讯科技有限公司 移动终端原生端与h5端交互的方法及装置
CN111026485B (zh) * 2019-12-02 2021-05-07 腾讯科技(深圳)有限公司 数据处理方法及装置
US11762525B2 (en) * 2020-01-15 2023-09-19 Vmware, Inc. Enterprise branding configuration provisioning
FR3110995A1 (fr) * 2020-05-27 2021-12-03 Orange Procédé d’affichage d’une interface graphique d’un équipement source sur un équipement récepteur.
CN111475163B (zh) * 2020-06-22 2020-10-30 腾讯科技(深圳)有限公司 视图模板的代码文件生成方法、装置、设备及存储介质
CN113434587B (zh) * 2021-06-30 2023-08-18 青岛海尔科技有限公司 一种数据存储、数据查询方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1815439A (zh) * 2005-01-31 2006-08-09 微软公司 用于目标设备显示模拟的方法和系统
CN100407642C (zh) * 2004-12-01 2008-07-30 华为技术有限公司 一种网页数据的实时更新方法
CN101727498A (zh) * 2010-01-15 2010-06-09 西安交通大学 一种基于web结构的网页信息自动提取方法
CN101079768B (zh) * 2006-05-25 2010-11-03 阿里巴巴集团控股有限公司 一种统计网页链接点击数据的方法
CN102054162A (zh) * 2009-11-10 2011-05-11 仲琦科技股份有限公司 利用图像特征的图像评量方法与系统

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5778403A (en) 1994-09-01 1998-07-07 Microsoft Corporation Method for displaying text on a rendering device to accurately represent the text as if displayed on a target device
US6993575B2 (en) 2000-02-22 2006-01-31 Oracle International Corporation Using one device to configure and emulate web site content to be displayed on another device
US20040027377A1 (en) 2002-08-06 2004-02-12 Grace Hays User interface design and validation including dynamic data
US9390132B1 (en) * 2009-10-16 2016-07-12 Iqor Holdings, Inc. Apparatuses, methods and systems for a universal data librarian
US8589140B1 (en) * 2005-06-10 2013-11-19 Wapp Tech Corp. System and method for emulating and profiling a frame-based application playing on a mobile device
US7546131B1 (en) * 2006-01-20 2009-06-09 Google Inc. Emulating a messaging operation for mobile devices
CN101206702A (zh) * 2006-12-22 2008-06-25 邓文彬 一种web源代码保护技术
US20080256468A1 (en) 2007-04-11 2008-10-16 Johan Christiaan Peters Method and apparatus for displaying a user interface on multiple devices simultaneously
CA2621744C (en) * 2007-09-13 2016-10-04 Research In Motion Limited System and method for interfacing between a mobile device and a personal computer
US20090228838A1 (en) 2008-03-04 2009-09-10 Ryan Christopher N Content design tool
WO2009143294A2 (en) 2008-05-20 2009-11-26 Citrix Systems, Inc. Methods and systems for using external display devices with a mobile computing device
TWI412975B (zh) * 2009-09-02 2013-10-21 Pixart Imaging Inc 手勢辨識方法及使用該方法之互動系統
US20110257958A1 (en) * 2010-04-15 2011-10-20 Michael Rogler Kildevaeld Virtual smart phone
US20130024251A1 (en) * 2011-07-22 2013-01-24 Bruno Richard Preiss Communicating presentation data relating to presentation of information
US20130096906A1 (en) * 2011-10-11 2013-04-18 Invodo, Inc. Methods and Systems for Providing Items to Customers Via a Network

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN100407642C (zh) * 2004-12-01 2008-07-30 华为技术有限公司 一种网页数据的实时更新方法
CN1815439A (zh) * 2005-01-31 2006-08-09 微软公司 用于目标设备显示模拟的方法和系统
CN101079768B (zh) * 2006-05-25 2010-11-03 阿里巴巴集团控股有限公司 一种统计网页链接点击数据的方法
CN102054162A (zh) * 2009-11-10 2011-05-11 仲琦科技股份有限公司 利用图像特征的图像评量方法与系统
CN101727498A (zh) * 2010-01-15 2010-06-09 西安交通大学 一种基于web结构的网页信息自动提取方法

Also Published As

Publication number Publication date
TW201324322A (zh) 2013-06-16
CN103814371A (zh) 2014-05-21
EP2761495A4 (en) 2015-04-29
EP2761495A1 (en) 2014-08-06
CN103814371B (zh) 2017-06-27
US20130076797A1 (en) 2013-03-28
US9142192B2 (en) 2015-09-22
WO2013048799A1 (en) 2013-04-04

Similar Documents

Publication Publication Date Title
TWI578220B (zh) 網頁瀏覽器中之網頁應用程式及次要裝置之模擬技術、網頁應用程式開發工具以及使用其等之方法
TWI476677B (zh) 開發網頁應用程式之方法與系統
US20230083102A1 (en) Systems and methods for conversion of web content into reusable templates and components
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
KR101494844B1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
US20170192877A1 (en) Mobile application development and deployment
CN107015903B (zh) 一种界面测试程序的生成方法、装置及电子设备
Anderson et al. Pro business applications with silverlight 4
Jakobus et al. Mastering bootstrap 4
Johnson Programming in HTML5 with JavaScript and CSS3
Çalışkan et al. PrimeFaces cookbook
Wenz Essential Silverlight 2 Up-to-Date
Bailey et al. Primefaces Theme Development
US20200159805A1 (en) System and method for producing transferable, modular web pages
Leeds Microsoft Expression Web 4 Step by Step
Colombo-Mendoza et al. Alexandria: A visual tool for generating multi-device rich internet applications.
Firdaus et al. HTML5 and CSS3: Building Responsive Websites
CN112269960B (zh) 基于关联报表的网页更新方法、系统、设备及存储介质
CN111694723B (zh) 产品在h5下运行时对节点及组件编辑的方法、存储介质
Shah et al. HTML5 Enterprise Application Development
Zhekova et al. Automatic Conversion of Image Design into HTML and CSS
Samoylova Testing Responsive Web Pages Using the Consistency of Automated Web Pages
CN112269961A (zh) 基于关联报表的网页生成方法、系统、设备及存储介质
Dixit Comprehensive Web Application for CITER
Christodoulou Supervisor: Prof. Ian Watson

Legal Events

Date Code Title Description
MM4A Annulment or lapse of patent due to non-payment of fees