为 iBooks Author 创建 HTML5 widget

了解如何创建可用于您在 iBooks Author 中创建的图书的 HTML5 widget。

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

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

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

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

widget 创建提示

在创建 widget 软件包之前,请确保软件包中文件的文件名都不包含控制字符。如果其中一个文件名包含控制字符,则无法将图书发布到 iBooks Store。

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

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

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

要针对 Retina 显示屏优化 widget:

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

详细了解如何优化使用 iBooks Author 创建的图书

Info.plist

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

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

 

widget 的完整 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 如果 widget 位于通过 iBooks Author 创建的图书中,则它将无法访问常规文件系统中的文件。
AllowFullAccess 其他访问键列表的简写,部分不兼容。
AllowInternetPlugins 在通过 iBooks Author 创建的图书中无法使用互联网插件,如 Flash。您可以使用 HTML5 <视频> 和 <音频> 元素来添加影片和音频。
HTML widget 内的影片和音频不受 DRM 保护。
AllowJava 如果 widget 位于通过 iBooks Author 创建的图书中,则它将不能包含 Java 内容。
AllowSystem 如果 widget 位于通过 iBooks Author 创建的图书中,则它将无法访问系统命令。
Plugin 如果 widget 位于通过 iBooks Author 创建的图书中,则它将无法添加 Cocoa 插件组件。

iBooks Author 会忽略以下键:

描述
CloseBoxInsetX iBooks Author 和 iBooks 中的 widget 不会显示结束装饰。
CloseBoxInsetY  

 

Fonts iBooks Author widget 无法使用捆绑的字体。

视频和音频要求

无法使用文件扩展名为 .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 widget 软件包中的视频和音频媒体不受 DRM 保护。

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

本地化

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

修复剪辑的元素

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

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

针对 iOS 和 macOS 进行开发

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

避免在读者打开 HTML widget 时出现闪烁

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

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

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






2. 在 HTML 文件的 <标头> 部分,将 widget 设置为载入 Apple JavaScript 库:

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

iOS 和 macOS 已经拥有 AppleWidget.js,因此您无需将其添加到 widget 软件包。

3. 设置您的 widget,以便在 HTML 完成初始化后通知 iBooks。在 HTML 文件 <标头> 部分的 JavaScript 中,调用:

widget.notifyContentIsReady()

发布到外部 Web 服务

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

发布日期: