为 iBooks Author 创建 HTML5 小组件
了解如何创建可用于你在 iBooks Author 中所创建的图书的 HTML5 小组件。
iBooks Author 支持 HTML5 小组件,它的文件扩展名为 .wdgt。要创建 HTML5 小组件,请使用文本编辑器或内容创建 App 来创建以下三个文件:
主要 HTML 文件:这个文件是小组件的主体部分。你可以随意为它命名,但扩展名必须为 .html。你可以将 CSS 和 JavaScript 放入主要 HTML 文件。或者,你可以将 .css 和 .js 文件添加到小组件软件包并从主要 HTML 文件加载它们。你可以使用设计网页时所使用的各种技巧。使用 HTML 定义小组件的结构,使用 CSS 提供视觉样式,以及使用 JavaScript 实现交互。
Default.png 文件:创建 Default.png 最简单的方法是,在网页内容创建 App 或网页浏览器中拍摄主要 HTML 文件的截屏。这是会在页面上显示的图像,读者轻点这个图像即可打开小组件。在网页浏览器或网页内容创建 App 中,拍摄主要 HTML 文件的截屏。请将它命名为“Default.png”,且必须使用大写字母“D”。在小组件处于活跃状态时,它的大小与 Default.png 文件的大小相同。你可以在 Info.plist 文件中更改它的大小。
Info.plist 文件:这个文件提供了 iBooks Author 和 Apple Books 运行小组件所需的信息。文件名必须为“Info.plist”。
创建完这些必需文件后,即可创建你所需的任何可选文件,例如,CSS 或 JavaScript 文件。然后,将这些文件添加到小组件软件包:
在“访达”中,创建一个文件夹。
将文件添加到新文件夹。
重命名这个文件夹并将 .wdgt 文件扩展名添加到文件夹名称中,以创建小组件软件包。之后,文件夹图标会变为小组件图标。
将小组件添加到 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 | 英语 | 选填 | 指定软件包原产地的字符串。这通常对应于软件包创建者的母语。 |
CFBundleDisplayName | Hello World | 必填 | 包含小组件实际名称的字符串。这将显示在 iBooks Author 和 Apple Books 中。 |
CFBundleIdentifier | com.apple.widget.HelloWorld | 必填 | 作为小组件唯一标识符的字符串,采用反向域名格式。 |
CFBundleName | Hello World | 选填 | 包含小组件名称的字符串。它必须与“访达”中小组件软件包的名称相匹配(不包括 .wdgt 文件扩展名)。 |
CFBundleShortVersionString | 1.0 | 选填 | 提供小组件精简版本号的字符串。它通常与 CFBundleVersion 相同。 |
CFBundleVersion | 1.0 | 选填 | 提供小组件版本号的字符串。 |
身高 | 768 | 选填 | 表示小组件高度(以像素为单位)的数字。如果未指定,则会使用 Default.png 的高度。 |
MainHTML | HelloWorld.html | 必填 | 这个字符串提供用于执行小组件的 HTML 文件的名称。 |
Width | 1024 | 选填 | 表示小组件宽度(以像素为单位)的数字。如果未指定,则会使用 Default.png 的宽度。 |
IBNotifiesOnReady | 选填 | 设置为“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 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: 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>
2. 在 HTML 文件的
iOS 和 macOS 已经拥有 Apple 小组件.js,因此你无需将它添加到小组件软件包。
3. 设置你的小组件,以便在 HTML 完成初始化后通知 Apple Books。在 HTML 文件
widget.notifyContentIsReady()
发布到外部网页服务
仅当 HTML 小组件使用正确的跨域资源共享 (CORS) 标头时,才可以将它们发布到外部网页服务。