TWI476677B - 開發網頁應用程式之方法與系統 - Google Patents

開發網頁應用程式之方法與系統 Download PDF

Info

Publication number
TWI476677B
TWI476677B TW101132012A TW101132012A TWI476677B TW I476677 B TWI476677 B TW I476677B TW 101132012 A TW101132012 A TW 101132012A TW 101132012 A TW101132012 A TW 101132012A TW I476677 B TWI476677 B TW I476677B
Authority
TW
Taiwan
Prior art keywords
file
web application
interactive
application
processor
Prior art date
Application number
TW101132012A
Other languages
English (en)
Other versions
TW201329852A (zh
Inventor
Zhaorong Hou
Original Assignee
Intel Corp
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 Intel Corp filed Critical Intel Corp
Publication of TW201329852A publication Critical patent/TW201329852A/zh
Application granted granted Critical
Publication of TWI476677B publication Critical patent/TWI476677B/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/137—Hierarchical processing, e.g. outlines
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G06F40/205—Parsing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • User Interface Of Digital Computer (AREA)

Description

開發網頁應用程式之方法與系統
本揭露通常係關於用於多個作業系統和形式因數的裝置模擬及網頁應用程式開發。
網頁應用程式係為一種電腦軟體應用程式，其在瀏覽器控制環境(例如，Java applet)中控制，或以例如JavaScript、超文件標示語言(HTML)或之類的瀏覽器支援語言來編碼。這類應用程式由於普遍且跨平台地使用網頁瀏覽器因而受到歡迎。確切來說，網頁瀏覽器係頻繁地使用在許多普遍的作業系統(「OS」或「OSes」)中，例如，由Microsoft®所銷售的Windows® OS、由Apple所銷售的MAC OS®、以及由Google®所銷售的Android® OS。它們亦使用於落在大範圍之形式因數內的裝置中，例如，桌上型電腦、膝上型電腦、平板個人電腦(「PC」或「PCs」)、及手持裝置(例如，行動電話、智慧型手機等)。
網頁應用程式使用為網頁應用程式本身的編輯工具(亦即，在網頁瀏覽器中主控)而逐漸被開發。通常，這類編輯工具採用顯示在運作於開發系統上之網頁瀏覽器中的裝置模擬器之形式。裝置模擬器包括一影像或一目標裝置(例如，行動電話、平板PC等)之邊框的影像。開發中的網頁應用程式係顯示於目標裝置之邊框的影像內。以 此方式，模擬器使開發者能在目標裝置之邊框環境中預覽開發中的網頁應用程式。
為了使裝置模擬器準確地呈現網頁應用程式將如何出現在目標裝置上，必須能進行兩種類型的映射。首先，裝置模擬器必須能夠像素對像素的映射，其中裝置模擬器中的模擬顯示器(以下稱為「模擬顯示器」)之一個像素與目標裝置之顯示器(以下稱為「目標顯示器」)上的一個像素相關。第二，必須吋對吋(亦即，實體)的映射，其中一模擬顯示器的一吋與一目標顯示器的一吋相關。
儘管現有的編輯工具係有用的，但它們仍無法吋對吋的準確映射。這是由於吋對吋的準確映射需要關於模擬顯示器(或者換言之，為運作裝置模擬器之開發系統的顯示器)之每吋像素(PPI)量的資訊。在許多情況下，模擬顯示器的PPI係未知的。無論如何，即使已知開發顯示器的PPI，將開發顯示器的PPI映射至目標顯示器的PPI仍然會是困難的。
此外，現有的網頁應用程式開發工具並未提出一種簡單的機制來將例如電子書的電子文件同時轉換成用於多個OS及/或形式因數的互動文件應用程式。反而，現有的網頁應用程式開發工具通常需要應用程式開發者使用不同的工具以產生用於個別OS的應用程式。上述過程會是繁瑣且不便的，且會產生在OS及/或形式因數間有不一致的使用者介面之互動文件應用程式。另外，許多用來將文件轉換成互動文件應用程式之現有工具不會調整網頁佈置，此 導致在不同平台之間的解析度和螢幕定向之變化。因此，使用現有工具所開發的互動文件應用程式之使用者可能必須來回滾動以閱讀文件的單一網頁，這是令人不快的。
本揭露之一態樣係關於用來準確地模擬一目標裝置之顯示器的系統及方法。因此，本文中所描述的係為包括一處理器及具有儲存於其上的裝置模擬器指令之一記憶體的系統。當執行裝置模擬器指令時，可使處理器進行各種函式。例如，裝置模擬器指令可使處理器在網頁瀏覽器內產生一使用者介面，其中使用者介面包括至少一主框架及至少一縮放器。在一些實施例中，目標裝置之模擬可運作於主框架中，其中目標裝置包括至少一顯示器。
當執行裝置模擬器指令時，可進一步運作以使處理器將所述之縮放器的位置轉換成縮放比，並將此縮放比應用於主框架。在一些非限制實施例中，縮放器的至少一第一位置可與致能於至少一主框架與目標裝置之顯示器之間吋對吋的映射的縮放比相關。在其它非限制實施例中，縮放器的至少一第二位置可與致能像素對像素的映射至少一主框架與目標裝置之顯示器的縮放比相關。
又，本文中所描述的係為用來模擬一目標裝置的方法。方法可包括，例如，在由瀏覽器所執行的網頁瀏覽器中產生目標裝置的模擬以及基於由縮放器的位置所決定之縮放比來改變模擬的尺寸。在本文中所述之方法的一些非 限制實施例中，縮放器的至少一第一位置與致能於該模擬與該目標裝置之顯示器之間吋對吋的映射的縮放比相關。在本文中所述之方法的其它非限制實施例中，縮放器的至少一第二位置與致能像素對像素的映射該至少一主框架與該目標裝置之顯示器的縮放比相關。
在一些實施例中，本文中所述之方法包括在由處理器所執行的一網頁瀏覽器內顯示一使用者介面。使用者介面可包括一表現層及一呈現層。表現層可包括HTML碼，而呈現層可包括JavaScript碼。在一些實施例中，方法包括在表現層內執行目標裝置的模擬，其中目標裝置包括至少一顯示器。方法更可包括以該呈現層偵測縮放器的位置、以呈現層將縮放器的位置轉換成縮放比、以及將縮放比應用於模擬。在一些非限制實施例中，縮放器的至少一第一位置與致能於該模擬與目標裝置之至少一顯示器之間吋對吋的映射的縮放比相關。在其它非限制實施例中，縮放器的至少一第二位置與致能像素對像素的映射至少一主框架與目標裝置之至少一顯示器的縮放比相關。
本揭露之一態樣係關於用來實作在如一行動電話的目標裝置之瀏覽器主控模擬中的準確吋對吋映射之系統及方法。在一些實施例中，本揭露之系統及方法致能吋對吋的準確映射於一目標裝置與目標裝置的一瀏覽器主控模擬之間，同時亦提出一種簡單的機制來切換至像素對像素的準確映射於模擬與目標裝置之間。
因此，本文中所描述的係為在計算裝置之處理器上運 作作為網頁應用程式的裝置模擬器。一般來說，本文中所述之裝置模擬器使得使用者介面(UI)顯示在運作於計算裝置上的網頁瀏覽器中。UI包括至少一裝置模擬器預覽區(本文中亦稱為「主框架」)，其係配置以模擬目標裝置(例如，行動電話、平板個人電腦、膝上型電腦等)的顯示器。例如如電子書之互動文件網頁應用程式可在至少一主框架內運作並顯示。以此方式，本揭露之裝置模擬器能使使用者(例如，軟體開發者)得以看見在模擬目標裝置之顯示器的環境中的互動文件網頁應用程式之操作和外觀。
除了上述基本元件和功能之外，本文中所述之裝置模擬器可更包括毗鄰於或接近於至少一主框架的至少一裝置框架。上述裝置框架可顯示影像，例如，目標裝置之邊框的影像。在這種情況下，裝置框架可分佈於主框架周圍，藉此提升在主框架內執行的網頁應用程式之模擬操作和外觀。
本文中所述之裝置模擬器更可包括用來調整至少一主框架之屬性的機制。例如，本文中所述之裝置模擬器的UI可包括允許選擇目標裝置類型、解析度、和定向的元件和基本碼。例如，本文中所述之裝置模擬器可包括含有關於複數個目標裝置和形式因數(例如，行動電話、平板PC、智慧型手機和膝上型電腦)的資料之原始檔案。一旦選擇特定裝置或屬性(例如，解析度及/或定向)，本揭露之裝置模擬器可調整主框架的相關特性並使用所調整之 屬性來重新呈現運作於主框架中的互動文件網頁應用程式。
例如，若使用者透過UI來選擇不同的解析度，則本文中所述之裝置模擬器可運作以調整主框架之解析度，並以新選擇的解析度來重新呈現主框架(和運作於其中的網頁應用程式)及/或裝置框架。同樣地，若透過UI來改變裝置類型，則本文中所述之裝置模擬器可載入與所選擇裝置相關的資料(例如，邊框畫像、解析度、定向等)，並以與所選擇裝置關聯之特性來重新呈現主框架及/或裝置框架。
UI更可包括一結合縮放碼(說明在後)的縮放器，使得使用者能改變至少一主框架及/或裝置框架的尺寸。例如，縮放器的位置可由縮放碼轉換成縮放比，其可適用於至少一主框架及/或裝置框架的縮放屬性。如將於之後詳細所述，此功能能允許吋對吋的準確映射於至少一主框架中的模擬顯示器與目標裝置(例如，行動電話、平板PC等)之顯示器之間。並且在一些實施例中，此功能能提供一有效機制來在於主框架與目標裝置之顯示器之間準確的吋對吋映射以及像素對像素映射之間作轉換。
為了本揭露之目的，當「位置」之詞使用在縮放器之上下文中時係指縮放器的實際位置(例如，相對於縮放器的另一部分)，及/或可由縮放器之位置所推出的值。例如，若縮放器係具有可在數值(例如，0至100)之範圍內左右來回移動的桿之滑動器，則滑動器之「位置」可指 滑動桿的相對位置，及/或由在此位置上的滑動器所推出之值(例如，0、25、50、100等)。
第1圖提出依照本揭露之裝置模擬器的軟體元件之非限制實例的方塊圖。如之前所述，裝置模擬器可在運作於開發系統(例如，桌上型PC)之處理器上的網頁瀏覽器內執行。
如第1圖所示，裝置模擬器100包括表現層101及呈現層102。表現層101(本文中在模型、視圖、控制架構之上下文中亦稱為「視圖」)包括通常用來在運作於開發系統之處理器上的網頁瀏覽器中畫出一使用者介面的基本碼。在第1圖所示之非限制實例中，表現層101畫出預覽區103、主框架104、裝置框架105、及縮放器106。表現層101的確切操作係說明在後，其係有關用於利用本文中所述之裝置模擬器以協助產生互動文件網頁應用程式的網頁應用程式開發工具之UI的產生。為了目前討論，應注意表現層101可使用HTML來編碼，且可包括符合本領域之通常技藝者之理解的各種外掛程式。例如，如將於下詳細所述，表現層101可包括一index.html檔案(或其它類似檔案)，其包括參考第三方外掛應用程式和資料庫，例如，jQucry javascript滑動器外掛程式及關聯的資料庫。
雖然第1圖繪示預覽區103會顯著大於主框架104，然而應了解到預覽區103可為任何尺寸。在一些實施例中，會按尺寸制定預覽區103，使得其接近主框架104的至少一維度。
預覽區103可再分(例如，使用HTML)成複數個行和列，以界定分開的區域或框架。此概念係以虛線107繪示於第1圖中，其繪示分成三列和三行的預覽區103，藉此將預覽區103分成在主框架104周圍的八個區域(例如，八個裝置框架105)。與前面的討論相符，預覽區103的每個區域(框架)(包括裝置框架105)可被單獨地編碼以顯示影像，例如，目標裝置之邊框的影像。之後在第8圖中繪示此概念，其提供一使用者介面的非限制實例，其中一或多個裝置框架顯示目標裝置之邊框的影像。
雖然第1圖繪示將預覽區分成在單一主框架104周圍的八個區域，但應了解到預覽區103可被分成任何數量的區域且可包含超過一個的主框架。更確切地說，本揭露設想出具有包含1、2、3、4、5或更多主框架的預覽區之裝置模擬器。透過舉例方式，預覽區103可被分成六行和三列，藉此能顯示各由八個區域(包括八個裝置框架105)所圍繞的兩個主框架。以此方式，可同時呈現目標裝置的多個模擬器。
預覽區103(包括主框架104)可使用HTML、其變體、及/或其它合適的碼來編碼。在使用HTML編碼預覽區103的例子中，主框架105可例如使用<iframe>HTML標籤來定義。
縮放器106係為具有可由使用者改變位置之範圍的使用者介面物件。在一些實施例中，縮放器106係以滑動器、滾輪、一對縮小/放大按鈕、一個下拉列表、及/或一 連串的無線電鈕之形式來表現。作為可依照本揭露來使用之適當的縮放器之非限制實例，舉出jQuery UI滑動器程式庫及/或外掛程式，其實作係說明在後。
呈現層102運作以將裝置模型資料及其它特性應用於主框架104、在網頁瀏覽器內呈現客製化面板(說明在後)、及以目標裝置之適當屬性及/或使用者所選擇之特性來呈現運作於主框架104中的網頁應用程式。呈現層102可例如藉由呼叫包含與目標裝置之顯示器關聯的屬性之至少一原始檔案來提供此項功能性。這類原始檔案可包括用於一或複數個目標裝置的資訊(例如，裝置類型、定向、解析度等)。呈現層102可將目標顯示器的屬性應用於主框架104的相關屬性。因此，裝置模擬器100之運作於主框架104中的網頁應用程式可以目標裝置的適當屬性來顯示在開發系統的網頁瀏覽器內。
呈現層102亦可包括監控縮放器106之位置的縮放碼107。基於縮放器106之位置，縮放碼107可依據其中執行裝置模擬器100的瀏覽器來決定縮放比或縮放。例如，縮放碼可將縮放器106之位置轉換成使用於Firefox網頁瀏覽器中的縮放比、或使用於Microsoft Internet Explorer中的縮放比。為求簡潔及明確起見，此轉換之結果在本文中係稱為「縮放比」。
縮放碼107可將所決定之縮放比應用於預覽區103、主框架104、裝置框架105、及其組合，並且以所決定之縮放比來重新呈現預覽區103(包括主框架104和裝置框 架105)。
縮放碼107亦可包括一事件處理器，其回應於縮放事件而將所決定之縮放比應用於預覽區103。例如，當縮放器106之位置開始改變(「啟動」)時、隨著縮放器106之位置改變(「移動」或「滑動」)、當縮放器106之位置停止改變(「停止」)時、或其組合時，縮放碼107可將所決定之縮放比應用於預覽區103(或其元件)。在一些實施例中，隨著縮放器106之位置改變，縮放碼107會將所決定之縮放比應用於預覽區103(包括裝置模擬預覽區104和框架105(若存在的話))。在這種例子中，縮放碼107可使呈現層100更新預覽區103、主框架104、裝置框架105或其組合之縮放比，並即時地使用所決定之縮放比來重新呈現上述區域。
藉由適當地調整縮放器106，可調整預覽區103、主框架104、裝置框架105、或其組合之尺寸，以便提供吋對吋的準確映射目標裝置之模擬顯示器於實際的目標裝置。例如，這可藉由調整縮放器106使得裝置模擬器100在開發系統之顯示器上呈現預覽區103(且尤其是主框架104)來實現，使得預覽區103(且尤其是主框架104)的尺寸近似目標裝置之實體尺寸。以此方式，裝置模擬器可提供一種所見即所得(WYSWYG)的環境。於是，網頁應用程式能以與在目標裝置上相同方式出現在裝置模擬器中。
第2圖提出即時調整目標裝置之模擬顯示器的縮放之 非限制方法的流程圖，如由依照本揭露之裝置模擬器所呈現。在開始步驟201中，裝置模擬器100可使用符合預設目標顯示器的特性在預覽區103之主框架104中呈現網頁應用程式。替代地，裝置模擬器100可在所有或部分之預覽區103(包括主框架104和裝置框架105)中呈現網頁應用程式之前等待目標裝置的選擇。不管在開始步驟201中所進行的操作，裝置模擬器100都會在呈現預覽區步驟202中呈現預覽區103。
在呈現預覽區103之後，縮放碼107在偵測縮放器位置步驟203中監視縮放器106的位置。縮放器106的位置可接著在將縮放器位置轉換成縮放比步驟204中被轉換成縮放比。裝置模擬器100可接著在將縮放比應用於裝置模擬步驟205中將所決定之縮放比應用於預覽區。當調整縮放器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圖提出能即時準確地放大/縮小在各種例如Internet Explorer,、Firefox、和Chrome之網頁瀏覽器中的主框架(iframe)之示範性JavaScript虛擬碼。
在第3圖所示之非限制實例中，可藉由增加下列行至定義表現層101的HTML文件來包括jQuery程式庫(例如，在index.html中)：<script type="text/javascript" src="../common/js/jquery-1.5.1.min.js"></script>；及<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圖之示範性虛擬碼的剩餘部分指出滑動器位置至縮放比的轉換，以及在各種例如Internet Explorer和Chrome之網頁瀏覽器中的縮放比之應用程式。
如先前技術所述，目前的網頁應用程式開發工具並未提出一種方便的方法給應用程式開發者將例如電子書之電子文件同時轉換成用於多個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。互動文件網頁應用程式505之預覽係在運作於使用者介面501內的裝置模擬器(未顯示)中產生。
如將於之後詳細所述，互動文件網頁應用程式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 。編譯服務505可使用web-kit或另一適當機制來將互動文件網頁應用程式封裝成本地應用程式。
藉由轉換服務所產生的電子文件網頁應用程式包括能使應用程式在裝置模擬器中被動態地編輯的原始檔案及/或基本碼。例如，電子文件網頁應用程式可包括例如JavaScript引擎的動態碼，其係配置以根據其它原始檔案動態地產生HTML網頁頁面。
此外，互動文件網頁應用程式可包括佈置碼，例如，一或多個定義電子文件網頁應用程式的使用者介面之佈置的HTML網頁頁面。再者，電子文件網頁應用程式可包括定義互動文件網頁應用程式的使用者介面之每個元件之外觀(例如，色彩設計、按鈕形狀、圖像等)的樣式碼(例如，級聯樣式表)。互動文件網頁應用程式亦可包括提供一目錄(TOC)並選擇性地當作進入互動文件網頁應用程式之入口的TOC碼(例如，一或多個HTML檔案)。最後，互動文件網頁應用程式可包括章節碼(例如，一或多個html檔案)，其包含在上述原始檔案中所含之電子文件的每個章節之內容。
第6圖提出依照本揭露之互動文件網頁應用程式的示 範性架構圖。如圖所示，互動文件網頁應用程式601係使用上述MVC架構來編碼。模型602包括動態碼603(例如，JavaScript Engine treesaver.js)，其根據例如佈置碼604(例如，resources.html)、樣式碼605(例如，style.css)、TOC碼606(例如，index.html)、及章節碼607(例如，HTML檔案)之原始檔案動態地產生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可在本文中所述之網頁應用程式開發工具的使用者介面中具體化。因此，例如，控制609可用來改變模型602的各種態樣，例如，移動至上一個/下一個章節、上一個/下一個網頁、或旋轉螢幕。動態碼603可回應上述輸入而產生HTML網頁頁面，藉此更新模型602以包括透過控制609所輸入的變更。接著可回應輸入而以所產生之HTML網頁頁面來更新視圖608，使得使用者能看 到對於互動文件網頁應用程式的變更。
值得注意的是在第6圖所示之非限制實例中，互動文件網頁應用程式係使用HTML和JavaScript來產生。於是，互動文件網頁應用程式可以是平台獨立的，因為各種OS和硬體能夠執行HTML和JavaScript。確實地，預期只要目標裝置的OS和硬體支援網頁瀏覽，則目標裝置應能毫無困難地執行本揭露的互動文件網頁應用程式。
雖然本文中所述之互動文件網頁應用程式可以是平台及/或OS獨立的，但可能在它們能被安裝於目標作業系統上之前，仍必須將上述應用程式封裝成適當的安裝器。基於此項考量，不同的OS可能需要不同類型的安裝器。例如，Microsoft Windows®可能需要使用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編譯SDK給每個目標OS。
混合封套資料705可為編譯給目標OS的應用程式，且可用來調用驗證及其它協定。例如，混合封套資料705可調用SDK 704來驗證一使用者是否被授權使用最終本地應用程式。一旦成功，混合封套資料705可載入網頁引擎703給目標OS，並將互動文件網頁應用程式套件的位置傳給網頁引擎703。
不論用任何方法，應了解到編譯服務701運作以產生分別用於OS1 和OSn 的應用程式安裝器7061 、706n 。這可使用第7圖所示之示範性架構圖及方法、或以其它方式來實現。
如上所述，本揭露之網頁應用程式開發工具可包括一使用者介面(UI)。如將於下詳細所述，本揭露之UI可以是以網頁為基礎的，且能允許使用者編輯運作於裝置模擬器中的互動文件網頁應用程式之各種態樣。可即時、週期性地、或以變化間隔呈現對於互動文件網頁應用程式所作的編輯。以此方式，UI能允許使用者觀察對於在目標裝置之模擬顯示器方面的互動文件網頁應用程式所作之改變的影響。
為此目的，參考第8圖，其提出依照本揭露之UI的非限制實例。如圖所示，UI 800包括裝置模擬器，其包括裝置模擬器預覽區801及裝置框架802。一般來說，裝置模擬器當作可預覽由轉換服務所產生之互動文件網頁應用程式的位置。裝置框架802通常與本文中前述之裝置模擬器的裝置框架相關。因此，裝置框架802可運作以顯示一或多個影像，例如，目標裝置(例如，行動電話、平板PC等)之邊框的影像。裝置模擬器預覽區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.twitter.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的編輯，編譯服務(例如，ebulgwasvc.php)906可編譯本地安裝器給多個OS。
由上述應清楚了解本揭露之非限制實施例的轉換服務可進行兩個函式。第一，本文中所述之轉換服務可運作以將電子文件轉換成互動文件網頁應用程式(例如，epub至webapp)。第二，本文中所述之轉換服務可運作以更新互動文件網頁應用程式之原始檔案以包括透過UI所作的任何改變。如第9圖所示以及以上簡短所述，藉由各自的服務(例如，epub2html.php以及ebupdatesvc.php.)可進行這兩個函式。
關於將電子文件轉換成互動網頁應用程式，本文中所述之轉換服務(例如，第9圖中的epub2html.php)可使用一轉換演算法以從文件原始檔案取得資料。一般來說，轉換演算法包括一電子書剖析器，其取得電子文件原始檔案(為epub或另一支援格式)以取得相關資料、以及一網頁應用程式產生器，其產生互動網頁應用程式的某些原始檔案。例如，電子書剖析器可取得對應於作者、標題、出版商、章節列表等的元資料，以及剖析文件原始檔案的 主體文字及/或影像。網頁應用程式產生器可藉由以電子書剖析器所取得的資料(例如，元資料和章節列表)來置入模板檔案(例如，template TOC.html檔案)來產生互動文件網頁應用程式的TOC碼(例如，TOC.html)。此外，網頁應用程式產生器可藉由將所取得的主體文字資料和影像之填入章節模板(例如，template chapter html檔案)來產生章節碼(例如，個別的HTML檔案)。
關於更新互動文件網頁應用程式之原始檔案以包括透過UI所作的任何改變，轉換服務(例如，第9圖中的ebupdates.php)可進行一或多個函式。例如，轉換服務可運作以在互動文件網頁應用程式之佈置碼(例如，resources.html)中的適當位置處插入社群外掛程式碼。替代地或額外地，轉換服務可運作以藉由以由所選擇主題中指定的樣式碼和佈置碼來取代或更新樣式碼(例如，style.css)及/或佈置碼(例如，resources.html)來改變書的主題。在這種情況下，可能會或可能不會保留社群外掛程式碼。在一些實施例中，儘管改變主題，仍會保留社群外掛程式碼。由此應了解到轉換服務可用來更新任何或全部與互動文件網頁應用程式之佈置及外觀(例如，字型、字型大小、定向、解析度等)相關的元件。
轉換服務亦可配置以提供一重置選擇。當行使重置選擇時，可用來將互動文件網頁應用程式之樣式和佈置碼重置成在預設或預選主題中指定的樣式和佈置碼。在這種情況下，可能會或可能不會保留社群外掛程式碼(例如， html碼)。在一些實施例中，當行使重置選擇時就移除社群外掛程式碼。
第10圖係依照本揭露之轉換服務的示範性架構圖。如圖所示，文件原始檔案1001可透過UI 1002或其它方式被載入至本揭露之以網頁為基礎的編輯工具。一旦被載入，轉換服務1003便使用電子書剖析器1004從文件原始檔案1001取得資料(例如，元資料、主體文字、影像等)。WebApp產生器1005應用所取得資訊以產生用於互動文件網頁應用程式1006的原始檔案。
可在運作於UI 1002內的裝置模擬器中產生(例如，使用預設主題、佈置等)並顯示互動文件網頁應用程式1006的預覽。更新服務1007可偵測透過UI 1002所做的改變，並藉此指示動態碼(例如，如treesaver.js的JavaScript碼)更新互動文件網頁應用程式1006的原始檔案。接著可再新運作於UI 1002內的互動文件網頁應用程式1006的預覽。
為求清楚明瞭，本揭露現在將討論由依照本揭露之電子文件至網頁應用程式轉換演算法所進行之工作流程的非限制實例。為了說明，此實例著重於將儲存為epub格式的文件原始檔案轉換成互動文件網頁應用程式。然而，應了解到可使用儲存為其它格式的原始文件來進行相同或類似的步驟。
在本非限制實例中，轉換服務包括將epub格式的原始文件檔案提取至暫時目錄的電子書剖析器。首先，電子 書剖析器可驗證所取得檔案的內容，並接著藉由檢察從原始文件檔案取得並儲存在暫時目錄中的XML檔案(例如，container.xml)來繼續取得元資料。透過此檢查，電子書剖析器可獲得根檔案節點之全路徑屬性，其係為納入epub的元資料、檔案清單、及線性閱讀順序的開放包裹格式(OPF)檔案之路徑。
一旦決定了OPF檔案的路徑，電子書剖析器可開啟OPF檔案作為一可延伸標識語言(XML)檔案、定位元資料節點、及製作元資料節點之仿製副本(以下稱為「仿製元資料節點」)。電子書剖析器可接著搜尋元資料節點內的特定節點以識別可使用在互動電子文件應用程式中的資訊。例如，電子書剖析器可識別有關於標題(例如，dc：title)及目錄(例如，自旋節點)的節點。關於目錄，電子書剖析器可檢查關於TOC屬性的自旋節點，且為具有等於TOC屬性之識別子的項目搜尋清單節點下的所有子節點。此外，電子書剖析器可識別可對應於導航控制檔案(NCX檔案)之路徑名稱的href屬性值。
轉換演算法可藉由：疊代自旋節點下的所有itemref子節點；獲得其識別值(例如，idref)；為具有等於識別值之識別子的項目搜尋清單節點下的所有子節點；獲得關於上述項目的href屬性值；及使用href屬性作為全路徑名稱在TOC列表中產生一個新的章節項目，來產生一目錄。
電子書剖析器可開啟NCX檔案作為XML檔案，並檢 查它以進行幾個函式。例如，電子書剖析器可定位NCX檔案中的docTitle節點並獲得其文字節點值。這個值可用來作為未在OPF檔案中發現dc：title節點之情況下的標題。另外，電子書剖析器可分析關於docAuthor節點的NCX檔案，並獲得文字節點值。這個值能用來作為書籍作者名稱。此外，電子書剖析器可藉由：定位NCX檔案中的navMap節點；疊代所有navPoint子節點並獲得其navLabel/text節點值，來更新TOC列表。這個值可用來作為每個章節的標題。電子書剖析器亦可搜尋上述之TOC列表，且加入作為標題的navLabel/text節點值至任何具有與內容節點之src屬性相同的全路徑名稱之章節項目。否則，可使用預設描述符(例如，「part xx」)作為章節的標題，這裡的xx係為TOC列表中的索引號碼。
如上簡短所述，電子書剖析器可從電子文件原始檔案取得主體文字和影像。下列說明提出電子書剖析器和網頁應用程式產生器如何可使用此資訊來產生關於互動文件網頁應用程式之原始檔案的非限制實例。
在本非限制實例中，電子書剖析器可開啟由上述之TOC列表中的每個章節項目所指定的HTML檔案。網頁應用程式產生器可開啟輸出章節檔案(在輸出目錄中)來寫入，且可以模板檔案之內容來預先置入輸出章節檔案。在一些情況下，輸出章節檔案具有與原始電子文件檔案相同的名稱，但具有HTML延伸。電子書剖析器亦可定位相關標頭->標題節點，且網頁應用程式產生器可使用此節點之 值作為考慮中的章節之標題。若標頭->標題節點不可用，則網頁應用程式產生器可使用另一值作為章節標題，例如，書籍標題。
網頁應用程式產生器可接著輸出仿製元資料節點至輸出章節檔案。藉由使用遞迴函數(例如，convertnodelist( ))，電子書剖析器可疊代輸入章節檔案之<body>段的所有子節點，並取得主體文字及/或影像。網頁應用程式產生器可接著加入主體文字和影像至輸出章節檔案。
遞迴函數(例如，convertnodelist( ))可使用兩個引數，nodeList和parentNode。nodeList引數係為電子書剖析器可讀取的一列輸入節點。parentNode引數係為可由網頁應用程式產生器插入輸出的目標輸出節點。
電子書剖析器可疊代nodeList引數中的所有節點，並依據節點類型來進行各種動作。例如，若節點類型係為XML_TEXT_NODE，則電子書剖析器可從nodeValue取得主體文字，並將bodyText附加於上代節點之下。
若節點類型係為XML_ELEMENT_NODE，則電子書剖析器可檢查nodeName並基於nodeName進行不同的動作。例如，若nodeName係為img，則電子書剖析器可從節點之src屬性取得影像之位置，並從暫時目錄複製影像檔案至輸出目錄。網頁應用程式產生器接著可產生一img節點、將img節點之src屬性設定成輸出目錄中的位置、並將影像之寬度和高度屬性設定成希望的值。
若nodeName係為div、p、span、及/或pre，則網頁 應用程式產生器可基於相關上代節點名稱進行函式。例如，若上代節點名稱係為p或span，或若沒有文字子節點，則網頁應用程式產生器可呼叫遞迴函數(例如，convertnodelist( ))、使用目前節點之所有子節點作為nodeList、及使用目前上代節點作為parentNode。否則，網頁應用程式產生器可：產生新的p節點；將其附加於parentNode之下；呼叫遞迴函數(例如，convertnodelist( ))；使用目前節點之所有子節點作為nodeList；及使用新的p節點作為parentNode。
若nodeName係為table、tr、td、或svg，則網頁應用程式產生器可呼叫遞迴函數(例如，convertnodelist( ))、使用目前節點之所有子節點作為nodeList、及使用目前parentNode作為parentNode。
若nodeName係為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檔案。 TOC模板可包括關於標題(例如，head->title)和作者(例如，body->article)的節點項目，其可藉由使用由電子書剖析器取得的相關資料之網頁應用程式產生器來置入。在一些實施例中，網頁應用程式產生器以用於書籍標題的h1節點、以及用於作者的h4節點來置入body->article節點。網頁應用程式產生器亦可疊代(上述之)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‧‧‧預覽區
104‧‧‧主框架
105‧‧‧裝置框架
106‧‧‧縮放器
107‧‧‧虛線
201-206‧‧‧步驟
401‧‧‧模型
402‧‧‧視圖
403‧‧‧控制器
500‧‧‧網頁應用程式開發工具
501‧‧‧使用者介面
502‧‧‧轉換服務
503‧‧‧編譯服務
504‧‧‧原始檔案
505‧‧‧互動文件網頁應用程式
5071 、5072 、507n ‧‧‧應用程式安裝器
601‧‧‧互動文件網頁應用程式
602‧‧‧模型
603‧‧‧動態碼
604‧‧‧佈置碼
605‧‧‧樣式碼
606‧‧‧TOC碼
607‧‧‧章節碼
608‧‧‧視圖
609‧‧‧控制
701‧‧‧編譯服務
702‧‧‧互動文件網頁應用程式套件
703‧‧‧網頁引擎
704‧‧‧軟體開發套件
705‧‧‧混合封套資料
7061 、7062 、706n ‧‧‧安裝器
800‧‧‧使用者介面
801‧‧‧裝置模擬器預覽區
802‧‧‧裝置框架
803‧‧‧專案條
804‧‧‧模擬器設定面板
805‧‧‧客製化面板
806‧‧‧縮放器
900‧‧‧使用者介面
901‧‧‧轉換服務
902‧‧‧視圖
903‧‧‧控制器類別物件
904‧‧‧模型類別物件
905‧‧‧互動文件網頁應用程式
906‧‧‧編譯服務
1001‧‧‧文件原始檔案
1002‧‧‧使用者介面
1003‧‧‧轉換服務
1004‧‧‧電子書剖析器
1005‧‧‧WebApp產生器
1006‧‧‧互動文件網頁應用程式
1007‧‧‧更新服務
1200‧‧‧原始檔案提供步驟
1210‧‧‧轉換步驟
1220‧‧‧呈現步驟
1230‧‧‧編輯步驟
1240‧‧‧更新步驟
1250‧‧‧編譯步驟
第1圖提出依照本揭露之非限制實施例的裝置模擬器之軟體元件的方塊圖。
第2圖係為如依照本揭露之裝置模擬器所呈現之即時調整一目標裝置之模擬顯示器的縮放/比例之非限制方法的流程圖。
第3圖提出能即時準確放大/縮小各種網頁瀏覽器(例如Internet Explorer,、Firefox、和Chrome)中的主框架(iframe)之JavaScript虛擬碼的非限制實例。
第4圖係為本揭露之網頁應用程式開發工具的一或多個態樣可依據之模型、視圖、控制(MVC)架構樣式之示範性方塊圖。
第5圖係為依照本揭露之非限制實施例的用於網頁應用程式開發工具之上層架構及工作流程圖。
第6圖係為依照本揭露之非限制實施例的互動文件網頁應用程式的架構圖。
第7圖係為依照本揭露之非限制實施例的用於由編譯服務生產之本地應用程式的架構圖。
第8圖提出依照本揭露之使用者介面的非限制實例。
第9圖係為依照本揭露之非限制實施例之以網頁為基礎的使用者介面之架構圖。
第10圖係為依照本揭露之非限制實施例的轉換服務之架構圖。
第11圖係為依照本揭露之用於網頁應用程式開發工具的非限制實例之分類圖。
第12圖係為依照本揭露之非限制實施例的方法之方塊圖。
100‧‧‧裝置模擬器
101‧‧‧表現層
102‧‧‧呈現層
103‧‧‧預覽區
104‧‧‧主框架
105‧‧‧裝置框架
106‧‧‧縮放器
107‧‧‧虛線

Claims (18)

  1. 一種開發網頁應用程式之方法，包含：以一處理器將一電子文件原始檔案轉換成一互動文件網頁應用程式；在一網頁瀏覽器上呈現一使用者介面，該使用者介面包含至少一裝置模擬器預覽區，該裝置模擬器預覽區係組態以模擬目標裝置之顯示器；在該裝置模擬器預覽區中呈現該互動文件網頁應用程式的一預覽；及以該處理器將該互動文件網頁應用程式編譯成適用於在至少一目標作業系統上執行的至少一本地應用程式安裝器。
  2. 如申請專利範圍第1項所述之方法，其中該處理器將該互動文件網頁應用程式編譯成用於多個目標作業系統或形式因數的多個本地應用程式安裝器。
  3. 如申請專利範圍第2項所述之方法，其中該多個本地應用程式安裝器係同時地、相繼地、或其組合地被該處理器編譯。
  4. 如申請專利範圍第1項所述之方法，更包含：以該處理器對該互動文件網頁應用程式的至少一原始檔案施用修改，以回應透過該使用者介面輸入的命令；及再新該互動文件網頁應用程式的該預覽以反映該等修改。
  5. 如申請專利範圍第1項所述之方法，其中該使用者 介面包含客製化碼、模擬器控制碼、及專案條碼之至少一者。
  6. 如申請專利範圍第1項所述之方法，其中該轉換係由該處理器所執行的一電子文件至網頁應用程式轉換服務來進行，該電子文件至網頁應用程式轉換服務包含：一電子書剖析器，可用來從該電子文件原始檔案取得原始文件資訊；及一網頁應用程式產生器，可用來使用該原始文件資訊產生該互動文件網頁應用程式。
  7. 如申請專利範圍第6項所述之方法，其中該原始文件資訊係從由元資料、主體本文、影像、及其組合構成的群組選擇。
  8. 如申請專利範圍第4項所述之方法，其中該施用係由一應用程式更新轉換服務來進行，其中當被該處理器執行時，該應用程式更新轉換服務運作以對該互動文件網頁應用程式的該至少一原始檔案施用該修改，以回應透過該使用者介面輸入的命令。
  9. 如申請專利範圍第8項所述之方法，其中該應用程式更新轉換服務包含由該處理器執行的JavaScript碼。
  10. 一種開發網頁應用程式之系統，包含：一處理器；一記憶體，具有儲存於其上的網頁應用程式開發工具指令，其中當執行該網頁應用程式開發工具指令時，使該處理器： 將一電子文件原始檔案轉換成一互動文件網頁應用程式；在一網頁瀏覽器上呈現一使用者介面，該使用者介面包含至少一裝置模擬器預覽區，該裝置模擬器預覽區係組態以模擬目標裝置之顯示器；在該裝置模擬器預覽區中呈現該互動文件網頁應用程式的一預覽；及將該互動文件網頁應用程式編譯成適用於在至少一目標作業系統上執行的至少一本地應用程式安裝器。
  11. 如申請專利範圍第10項所述之系統，其中當執行該網頁應用程式開發工具指令時，更使該處理器將該互動文件網頁應用程式編譯成用於多個目標作業系統或形式因數的多個本地應用程式安裝器。
  12. 如申請專利範圍第11項所述之系統，其中當執行該網頁應用程式開發工具指令時，更使該處理器同時地、相繼地、或其組合地編譯該多個本地應用程式安裝器。
  13. 如申請專利範圍第10項所述之系統，其中當執行該網頁應用程式開發工具指令時，更使該處理器：對該互動文件網頁應用程式的至少一原始檔案施用修改，以回應透過該使用者介面輸入的命令；及再新該互動文件網頁應用程式的該預覽以反映該修改。
  14. 如申請專利範圍第10項所述之系統，其中該使用者介面包含客製化碼、模擬器控制碼、及專案條碼之至少 一者。
  15. 如申請專利範圍第10項所述之系統，更包含儲存在該系統之一記憶體中的電子文件至網頁應用程式轉換指令，其中當執行該電子文件至網頁應用程式轉換指令時，使該處理器：從該電子文件原始檔案取得原始文件資訊；及使用該原始文件資訊產生該互動文件網頁應用程式。
  16. 如申請專利範圍第15項所述之系統，其中該原始文件資訊係從由元資料、主體本文、影像、及其組合構成的群組選擇。
  17. 如申請專利範圍第13項所述之系統，更包含儲存在該系統之一記憶體中的應用程式更新轉換指令，其中當執行該應用程式更新轉換指令時，使該處理器對該互動文件網頁應用程式的該至少一原始檔案施用該修改，以回應透過該使用者介面輸入的命令。
  18. 如申請專利範圍第17項所述之系統，其中該應用程式更新轉換指令包含JavaScript碼。
TW101132012A 2011-09-26 2012-09-03 開發網頁應用程式之方法與系統 TWI476677B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
US13/245,272 US8819624B2 (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
TW201329852A TW201329852A (zh) 2013-07-16
TWI476677B true TWI476677B (zh) 2015-03-11

Family

ID=47912643

Family Applications (1)

Application Number Title Priority Date Filing Date
TW101132012A TWI476677B (zh) 2011-09-26 2012-09-03 開發網頁應用程式之方法與系統

Country Status (5)

Country Link
US (1) US8819624B2 (zh)
EP (1) EP2761448A4 (zh)
CN (1) CN103890727B (zh)
TW (1) TWI476677B (zh)
WO (1) WO2013048808A1 (zh)

Families Citing this family (31)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9268848B2 (en) 2011-11-02 2016-02-23 Microsoft Technology Licensing, Llc Semantic navigation through object collections
US20130111382A1 (en) * 2011-11-02 2013-05-02 Microsoft Corporation Data collection interaction using customized layouts
US20130145361A1 (en) * 2011-12-01 2013-06-06 International Business Machines Corporation Discovering and installing web application plugins
US9170783B1 (en) * 2011-12-15 2015-10-27 The Mathworks, Inc. Class creation assistant for textual programming languages
US9311427B2 (en) * 2012-01-03 2016-04-12 Cimpress Schweiz Gmbh Automated generation of mobile optimized website based on an existing conventional web page description
US20130191495A1 (en) * 2012-01-23 2013-07-25 Cristian Almstrand Framework and system to distribute applications for heterogeneous platforms
US10049168B2 (en) * 2012-01-31 2018-08-14 Openwave Mobility, Inc. Systems and methods for modifying webpage data
US20150106685A1 (en) * 2012-10-12 2015-04-16 Thrivon Management Consulting Transforming a document into web application
US10614156B1 (en) 2012-11-14 2020-04-07 Worldwide Creative Techniques, Llc System and method for using a dynamic webpage editor
US9400660B1 (en) * 2013-03-12 2016-07-26 Intuit Inc. Customizing user interfaces of native applications for portable electronic devices
CN103761277A (zh) * 2014-01-09 2014-04-30 北京掌阔技术有限公司 一种ePub电子书的加载方法和系统
CN105786881A (zh) * 2014-12-24 2016-07-20 阿里巴巴集团控股有限公司 自适应电子书刊文件结构以及相应的方法及装置
KR101648964B1 (ko) 2015-04-02 2016-08-30 네이버 주식회사 자동 여백 생성을 이용하여 컨텐츠를 제공하는 시스템 및 방법
KR101654300B1 (ko) 2015-04-03 2016-09-22 네이버 주식회사 모션 연출이 포함된 페이지의 레이어 병합을 이용하여 컨텐츠를 제공하는 시스템 및 방법
US10452244B2 (en) * 2015-05-04 2019-10-22 Salesforce.Com, Inc. Systems and methods of optimizing delivery of form factor specific content
WO2017023049A1 (en) 2015-07-31 2017-02-09 Samsung Electronics Co., Ltd. Electronic device and server related to rendering of web content and controlling method thereof
TWI560613B (en) * 2015-08-18 2016-12-01 Pai Tsung Lee Method and system for creating app
US20170185609A1 (en) * 2015-12-28 2017-06-29 International Business Machines Corporation Universal adaptor for rapid development of web-based data visualizations
US11126685B2 (en) * 2016-10-28 2021-09-21 Ebay Inc. Preview and optimization of publication for target computing device
US10083015B2 (en) * 2016-12-15 2018-09-25 International Business Machines Corporation Mobile accessibility evaluation from application binary
US10877735B1 (en) 2017-09-25 2020-12-29 Amazon Technologies, Inc. Automated generation of software applications using analysis of submitted content items
US10740550B1 (en) 2017-11-20 2020-08-11 Amazon Technologies, Inc. Network-accessible data management service with web-of-sheets data model
US10705805B1 (en) 2017-12-12 2020-07-07 Amazon Technologies, Inc. Application authoring using web-of-sheets data model
EP3514681A1 (en) * 2018-01-22 2019-07-24 Robert Bosch GmbH Method, host device and system for providing applications
US11586603B1 (en) 2018-05-23 2023-02-21 Amazon Technologies, Inc. Index sheets for robust spreadsheet-based applications
US11263271B2 (en) * 2018-09-11 2022-03-01 Book Walker Co., Ltd. Digital content viewing system, digital content viewing method, and computer-readable recording medium
US11010536B2 (en) * 2018-12-20 2021-05-18 AINS, Inc. Systems and methods for dynamic web user interface generation
CN111694568B (zh) * 2019-03-15 2023-04-07 阿里巴巴集团控股有限公司 一种ui卡片文档的生成方法和装置
US20220283791A1 (en) * 2021-03-08 2022-09-08 Charles Amashta Systems and Methods For Cascading Style Sheets in Native Mobile Applications
CN113672225B (zh) * 2021-08-24 2023-08-22 网易（杭州）网络有限公司 用户界面的处理方法、装置、设备及存储介质
CN117290016B (zh) * 2023-11-24 2024-01-26 本溪钢铁（集团）信息自动化有限责任公司 视图的页面配置方法及装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI269182B (en) * 2002-10-29 2006-12-21 Ibm Apparatus and method for automatically highlighting text in an electronic document
US20090235162A1 (en) * 2008-03-11 2009-09-17 Disney Enterprises, Inc. Method and system for providing enhanced virtual books

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5966535A (en) * 1995-12-07 1999-10-12 At&T Corporation Method and apparatus for generating program code for world wide web service applications
US7536324B2 (en) * 1996-10-25 2009-05-19 Ipf, Inc. Internet-based system for managing and delivering consumer product brand information to consumers at points of presence along the world wide web (WWW)
US6092114A (en) * 1998-04-17 2000-07-18 Siemens Information And Communication Networks, Inc. Method and system for determining the location for performing file-format conversions of electronics message attachments
WO2001050349A1 (en) * 1999-12-30 2001-07-12 Rutgers, The State University Of New Jersey Electronic document customization and transformation utilizing user feedback
FR2811782B1 (fr) * 2000-07-12 2003-09-26 Jaxo Europ Systeme de conversion de documents a structure arborescente par parcours selectif de ladite structure
US7814413B2 (en) * 2003-04-17 2010-10-12 Oracle International Corporation System and method for controlling web pages
US20050268215A1 (en) 2004-06-01 2005-12-01 Microsoft Corporation Method and apparatus for viewing and interacting with a spreadsheet from within a web browser
WO2006041318A1 (en) 2004-10-14 2006-04-20 Onstream Systems Limited A process for electronic document redaction
US7689908B2 (en) * 2005-01-31 2010-03-30 Microsoft Corporation Method and system for a target device display simulation
JP2007287025A (ja) * 2006-04-19 2007-11-01 Nec Corp 画面遷移プログラム生成方法及び装置
US20080005667A1 (en) 2006-06-28 2008-01-03 Dias Daniel M Method and apparatus for creating and editing electronic documents
US8555239B1 (en) * 2007-10-12 2013-10-08 The Pnc Financial Services Group, Inc. Mainframe-based web service development accelerator
US20110088011A1 (en) * 2009-10-14 2011-04-14 Vermeg Sarl Automated Enterprise Software Development
US20110131482A1 (en) * 2009-12-02 2011-06-02 Olive Software Inc. System and method for multi-channel publishing
US9134964B2 (en) * 2011-04-06 2015-09-15 Media Direct, Inc. Systems and methods for a specialized application development and deployment platform

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI269182B (en) * 2002-10-29 2006-12-21 Ibm Apparatus and method for automatically highlighting text in an electronic document
US20090235162A1 (en) * 2008-03-11 2009-09-17 Disney Enterprises, Inc. Method and system for providing enhanced virtual books

Also Published As

Publication number Publication date
CN103890727B (zh) 2017-06-27
US20130080887A1 (en) 2013-03-28
WO2013048808A1 (en) 2013-04-04
EP2761448A4 (en) 2015-04-29
TW201329852A (zh) 2013-07-16
CN103890727A (zh) 2014-06-25
EP2761448A1 (en) 2014-08-06
US8819624B2 (en) 2014-08-26

Similar Documents

Publication Publication Date Title
TWI476677B (zh) 開發網頁應用程式之方法與系統
US9142192B2 (en) Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
US20220067268A1 (en) Systems and methods for remote dashboard image generation
US11216253B2 (en) Application prototyping tool
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
US10460013B2 (en) Using server side font preparation to achieve WYSIWYG and cross platform fidelity on web based word processor
JP2017501508A (ja) メタデータを利用したチャート変換システム及びその方法
Varaksin PrimeFaces Cookbook
Kuan Learning highcharts 4
AU2016256364A1 (en) Rendering graphical assets natively on multiple screens of electronic devices
US20140281922A1 (en) Application of a system font mapping to a design
Jakobus et al. Mastering bootstrap 4
Bailey et al. Primefaces Theme Development
Holaň et al. Vaadin 7 cookbook
Leeds Microsoft Expression Web 4 Step by Step
Aryal Bootstrap: a front-end framework for responsive web design
Firdaus et al. HTML5 and CSS3: Building Responsive Websites
US11036932B2 (en) Technology platform having integrated content creation features
Verzani gWidgetsWWW: Creating Interactive Web Pages within R
Sundar et al. Content Management System and Automation of Model Cloning Scalable EAV Model in GNEISYS Framework
Gao Design and Implementation of End-User Programming Tools for Web Mashups
Dixit Comprehensive Web Application for CITER
Christodoulou Supervisor: Prof. Ian Watson
Tapani Study and Integrate Bootstrap 3 for OpixManager
Desjardins et al. Framework-Specific Features

Legal Events

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