Canvas 2D 網頁應用/iBooks HTML 小部件
本章討論了為桌面瀏覽器設計的 HTML 網頁應用與作為 iBooks HTML 小部件使用的網頁應用之間的區別。它假設您已經熟悉章節 HTML 網頁應用入門。如果您還沒有閱讀該章節，您應該先閱讀它。
iBooks 是由 蘋果公司 提供的免費應用程式，用於在 iOS 裝置上購買、下載和閱讀特定電子書（也稱為“iBooks”）。蘋果公司還提供免費應用程式 iBooks Author，用於 MacOS X 計算機建立和釋出此類電子書。
iBooks Author 允許作者包含多個內建小部件（例如，影片、3D 模型或影像庫的檢視器）。它還允許包含使用者定義的“HTML 小部件”，它們是特殊的 HTML 網頁應用。本章將僅討論 iBooks HTML 小部件與本章 HTML 網頁應用入門 中討論的用於桌面瀏覽器的標準 HTML 網頁應用之間的區別。討論基於 蘋果公司支援文件，該文件提供了更多資訊。
為了為 iBooks 建立一個 HTML 小部件，您至少需要 3 個檔案（注意，所有檔名都不能包含控制字元）
- 網頁應用的 HTML 檔案，如章節 HTML 網頁應用入門 中所述，但它不應該需要網際網路訪問；即，所有必需的檔案（尤其是影像檔案）都應儲存在與 HTML 檔案相同的資料夾中或其子資料夾之一中。在本例中，HTML 檔名為
ibooks_basic.html。 - 一個 PNG 影像檔案，必須命名為
Default.png，它提供了網頁應用的預覽。 - 一個純文字檔案，必須命名為
Info.plist，它指定了特定網頁應用的某些屬性。示例是用於 1024×768 橫向尺寸的填屏小部件，HTML 檔案為ibooks_basic.html。 - 網頁應用需要的任何其他檔案（尤其是影像檔案）。在本例中：HTML5_Shiny_Icon.png.
在本例中，Info.plist 檔案如下所示
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>CFBundleDevelopmentRegion</key> <string>English</string> <key>CFBundleDisplayName</key> <string>my web app</string> <key>CFBundleIdentifier</key> <string>com.dummy.MyWebApp</string> <key>CFBundleName</key> <string>mywebapp</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Height</key> <integer>768</integer> <key>MainHTML</key> <string>ibooks_basic.html</string> <key>Width</key> <integer>1024</integer> <key>IBNotifiesOnReady</key> <false/> </dict> </plist>
這些鍵相對容易理解，大多數實際上是可選的。但是，MainHTML 設定為網頁應用的正確檔名很重要；在本例中：ibooks_basic.html。如果沒有指定 Width 和 Height，則 Default.png 影像的大小將用於網頁應用。如果 IBNotifiesOnReady 設定為 true，則當網頁應用準備好渲染時，它會通知 iBooks 應用程式，以避免在啟動小部件時出現任何閃爍。更多關於這方面的資訊可以在 蘋果公司支援文件 中找到。
要從這些檔案建立一個小部件，您應該將它們複製到 MacOS X 計算機上的一個資料夾中，並將資料夾重新命名為小部件名稱，副檔名為 .wdgt。（資料夾的圖示將會改變，內容會隱藏；但您仍然可以透過右鍵單擊小部件資料夾並從彈出選單中選擇“顯示包內容”來檢視它。）就這樣：您已經建立了一個 iBooks HTML 小部件。
獲得此小部件資料夾後，您可以在 iBooks Author 中開啟一個書籍專案，並透過從主選單中選擇插入 > 小部件 > HTML 建立一個空的 HTML 小部件模板。在檢查器視窗中（如果它不可見，您可以透過從主選單中選擇檢視 > 顯示檢查器 來開啟它），您應該選擇最右側的選項卡圖示（“小部件檢查器”），然後選擇互動設定。單擊選擇... 並從檔案選擇器對話方塊中選擇小部件資料夾。就這樣。您可以透過單擊書籍中小部件表示下方的編輯 HTML 來在計算機上測試小部件。為了在 iPad 上檢視小部件，您應該連線 iPad，在 iPad 上開啟 iBooks 應用程式，然後從 iBooks Author 的主選單中選擇檔案 > 預覽。
在 iBooks 中，小部件的視窗沒有任何問題：它始終具有在 Info.plist 檔案中指定的大小（或者，如果那裡沒有指定大小，則使用 Default.png 影像的大小）。即使 iPad 的方向發生變化，該尺寸（以 CSS 畫素為單位）也會保持不變，但 iBooks 會縮放小部件以適應螢幕。請注意，使用橫向尺寸對於小部件來說可能是一個好主意，因為在這種情況下，它們要麼全屏顯示（如果 iPad 處於橫向模式），要麼標題和字幕顯示在小部件的上方和下方（如果 iPad 處於縱向模式）。
預設情況下，iBooks 支援一些雙指手勢，允許使用者與小部件互動。您可以在章節 iOS 網頁應用入門 中討論的網頁應用中停用這些手勢。