为 iBooks Author 创建 HTML5 小组件

了解如何创建可用于您在 iBooks Author 中所创建的图书的 HTML5 小组件。

iBooks Author 支持 HTML5 小组件,它的文件扩展名为 .wdgt。要创建 HTML5 小组件,请使用文本编辑器或内容创建应用来创建以下三个文件:

  • 主要 HTML 文件:这个文件是小组件的主体部分。您可以随意为它命名,但扩展名必须为 .html。您可以将 CSS 和 JavaScript 放入主要 HTML 文件。或者,您可以将 .css 和 .js 文件添加到小组件软件包并从主要 HTML 文件加载它们。您可以使用设计网页时所使用的各种技巧。使用 HTML 定义小组件的结构,使用 CSS 提供视觉样式,以及使用 JavaScript 实现交互。 
  • Default.png 文件:创建 Default.png 最简单的方法是,在网页内容创建应用或网页浏览器中拍摄主要 HTML 文件的屏幕快照。这是会在页面上显示的图像,读者轻点这个图像即可打开小组件。在网页浏览器或网页内容创建应用中,拍摄主要 HTML 文件的屏幕快照。请将它命名为“Default.png”,且必须使用大写字母“D”。在小组件处于活跃状态时,它的大小与 Default.png 文件的大小相同。您可以在 Info.plist 文件中更改它的大小。
  • Info.plist 文件:这个文件提供了 iBooks Author 和 Apple Books 运行小组件所需的信息。文件名必须为“Info.plist”。

创建完这些必需文件后,即可创建您所需的任何可选文件,例如,CSS 或 JavaScript 文件。然后,将这些文件添加到小组件软件包:

  1. 在“访达”中,创建一个文件夹。
  2. 将文件添加到新文件夹。
  3. 重命名这个文件夹并将 .wdgt 文件扩展名添加到文件夹名称中,以创建小组件软件包。之后,文件夹图标会变为小组件图标。
  4. 将小组件添加到 iBooks Author 中。

有关创建小组件的提示

在创建小组件软件包之前,请确保软件包中文件的文件名都不包含控制字符。如果包含,则无法将图书发布到 Apple Books 中的 Book Store。

如果您将小组件设置为自动播放,则它将无法访问互联网。 

请勿使用自定文件夹图标,并在小组件中避免使用以下文件夹名称:

  • 资源/
  • 支持文件/资源/
  • 目录/资源/

要针对视网膜显示屏优化小组件,请按照以下步骤操作:

  • 在 HTML、CSS 和 JavaScript 文件中,对于包含视网膜 (2x) 图形的网站,请使用标准协议。 
  • 将 Default@2x.png 文件添加到您的小组件中。将文件的分辨率设为 Default.png 文件的两倍。您不会在 iBooks Author 中看到这个文件,但可以在配备视网膜显示屏的设备上的 Apple Books 中看到。

进一步了解如何优化使用 iBooks Author 创建的图书

Info.plist

基本小组件的“Info.plist”文件包含部分必需键和部分可选键。下表列出了这些键及相应的定义,并以名为“Hello World”的小组件为例展示了一些示例值。 

示例值 是否必需 定义
CFBundleDevelopmentRegion English 可选 指定软件包原产地的字符串。这通常对应于软件包创建者的母语。 
CFBundleDisplayName Hello World 必需 包含小组件实际名称的字符串。这将显示在 iBooks Author 和 Apple Books 中。
CFBundleIdentifier com.apple.widget.HelloWorld 必需 作为小组件唯一标识符的字符串,采用反向域名格式。
CFBundleName Hello World 可选 包含小组件名称的字符串。它必须与“访达”中小组件软件包的名称相匹配(不包括 .wdgt 文件扩展名)。
CFBundleShortVersionString 1.0 可选 提供小组件精简版本号的字符串。它通常与 CFBundleVersion 相同。
CFBundleVersion 1.0 可选 提供小组件版本号的字符串。
Height 768 可选 表示小组件高度(以像素为单位)的数字。如果未指定,则会使用 Default.png 的高度。
MainHTML HelloWorld.html 必需 这个字符串提供用于执行小组件的 HTML 文件的名称。
Width 1024 可选 表示小组件宽度(以像素为单位)的数字。如果未指定,则会使用 Default.png 的宽度。
IBNotifiesOnReady <true/> 可选 设置为“true”时,小组件会指示 Apple Books 何时从显示 Default.png 切换为显示正在运行的 HTML 小组件。 

 

小组件的完整 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>Hello World</string>
	<key>CFBundleIdentifier</key>
	<string>com.apple.widget.HelloWorld</string>
	<key>CFBundleName</key>
	<string>Hello World</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>HelloWorld.html</string>
	<key>Width</key>
	<integer>1024</integer>
	<key>IBNotifiesOnReady</key>
	<true/>
</dict>
</plist>

与键有关的限制和局限

请勿使用以下键;这些功能并不兼容:

描述
AllowFileAccessOutsideOfWidget 如果小组件位于通过 iBooks Author 创建的图书中,则它将无法访问常规文件系统中的文件。
AllowFullAccess 其他访问键列表的简写,其中的某些访问键不兼容。
AllowInternetPlugins 在通过 iBooks Author 创建的图书中无法使用互联网插件,例如 Flash。您可以使用 HTML5 <video> 和 <audio> 元素来添加影片和音频。
HTML 小组件内的影片和音频不受 DRM 保护。
AllowJava 如果小组件位于通过 iBooks Author 创建的图书中,则它将不能包含 Java 内容。
AllowSystem 如果小组件位于通过 iBooks Author 创建的图书中,则它将无法访问系统命令。
Plugin 如果小组件位于通过 iBooks Author 创建的图书中,则它将无法添加 Cocoa 插件组件。

iBooks Author 会忽略以下键:

描述
CloseBoxInsetX iBooks Author 和 Apple Books 中的小组件不会显示结束装饰。
CloseBoxInsetY  

 

字体 iBooks Author 小组件无法使用捆绑的字体。

视频和音频要求

无法使用文件扩展名为 .m4v 或 .m4p 的媒体文件。请使用以下某个文件扩展名为 .mp4 的格式:

  • H.264 视频:高达 720p,每秒 60 帧,High Profile level 4.2(高达 160 Kbps 的 AAC-LC 音频),48kHz,立体声音频。在“iMovie 剪辑 10”中使用 HD 720p 选项打开的视频将使用这些设置。
  • MPEG-4 视频:高达 2.5 Mbps,640 x 480 像素,每秒 30 帧,Simple Profile(各声道高达 160 Kbps 的 AAC-LC 音频),48kHz,立体声音频。

对于音频,应使用文件扩展名为 .m4a 的 AAC(8 至 320 Kbps,48 kHz 立体声)。

HTML 小组件软件包中的视频和音频媒体不受 DRM 保护。

如果在 iBooks Author 的小组件中无法播放影片或音频文件,请在 iPhone、iPad 或 Mac 中预览该文件。这可以展示文件在已完成的书中将如何播放。

本地化

iBooks Author 不支持本地化的字符串和资源,其中包括读者可以看到的以目标语言编写的内联文本字符串。

修复截断的元素

某个元素(如 <视频>)可能显示为在某一侧被截断。如果元素尺寸大于可用空间,则会出现上述情况。请在 #video 选择器中找到“width:auto”的 CSS 并对它进行更改,以适应实际尺寸。例如,您的小组件可能包含尺寸为 960 x 540 的视频。请检查相关选择器的 CSS,并将宽度和高度设为合适的值:

#video   {
	width: 960;
	height: 540;
}

针对 iOS 和 macOS 进行开发

iOS 和 macOS 使用不同的输入类型。为 iBooks Author 创建 HTML 小组件时,您可以使用触摸输入和鼠标输入。

避免在读者打开 HTML 小组件时出现闪烁

如果您的 HTML 小组件非常复杂,那么当读者在 Apple Books 中将它打开时,可能会出现闪烁。要避免上述情况,请更新您的小组件,让它指示 Apple Books 何时从 Default.png 文件切换为 HTML 小组件:

1. 添加已在小组件的 Info.plist 文件中设置为“true”的“IBNotifiesOnReady”项。通过上述操作,Apple Books 会知道小组件将指示它何时切换到 HTML 小组件。

<key>IBNotifiesOnReady</key>
 <true/>

2. 在 HTML 文件的 <head> 部分,将小组件设置为载入 Apple JavaScript 库:

<script type="text/javascript" src="AppleClasses/AppleWidget.js"> </script>

iOS 和 macOS 已经拥有 Apple 小组件.js,因此您无需将它添加到小组件软件包。

3. 设置您的小组件,以便在 HTML 完成初始化后通知 Apple Books。在 HTML 文件 <head> 部分的 JavaScript 中,调用:

widget.notifyContentIsReady()

发布到外部网页服务

仅当 HTML 小组件使用正确的跨域资源共享 (CORS) 标头时,才可以将它们发布到外部网页服务。

发布日期: