Создание виджета HTML5 для iBooks Author

Узнайте, как делать виджеты HTML5 для использования в книгах, созданных в iBooks Author.

Программа 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 и iBooks информацию, необходимую для выполнения виджета. Имя файла должно быть Info.plist.

После создания этих трех обязательных файлов создайте любые дополнительные файлы, например файлы CSS или JavaScript. Затем добавьте их в пакет виджета.

  1. Создайте папку в программе Finder.
  2. Добавьте файлы в новую папку.
  3. Переименуйте папку и добавьте расширение .wdgt к названию папки, чтобы создать пакет виджета. Значок папки будет изменен на значок виджета.
  4. Добавьте свой виджет в программу iBooks Author.

Советы по созданию виджетов

Прежде чем создавать пакет виджета, убедитесь, что ни один из содержащихся в нем файлов не содержит управляющих символов в имени файла. В противном случае опубликовать книгу в магазине iBooks Store будет невозможно.

Если виджет настроен на автоматический запуск, у него не будет доступа к Интернету. 

Не используйте пользовательские значки папок и избегайте следующих имен папок в виджете.

  • Resources/
  • Support Files/Resources/
  • Contents/Resources/

Чтобы оптимизировать виджет для дисплеев Retina, выполните следующие действия.

  • Для файлов HTML, CSS и JavaScript используйте стандартную процедуру создания веб-сайтов с графикой Retina (2x). 
  • Добавьте в свой виджет файл с именем Default@2x.png. Его разрешение должно быть вдвое больше, чем у Default.png. Этот файл нельзя будет просмотреть в программе iBooks Author, но он будет отображаться в iBooks на устройствах с дисплеем Retina.

Узнайте больше об оптимизации книг, созданных в iBooks Author.

Info.plist

Файл Info.plist базового виджета содержит обязательные и дополнительные ключи. Список этих ключей, их определения и примеры некоторых значений для виджета с названием «Hello World». 

Ключ Пример значения Обязательный параметр Определение
CFBundleDevelopmentRegion Английский Необязательный параметр Строка, определяющая родной регион для пакета. Обычно значение соответствует родному языку автора пакета. 
CFBundleDisplayName Hello World Обязательный параметр Строка, содержащая фактическое имя виджета. Она будет отображаться в программах iBooks Author и iBooks.
CFBundleIdentifier com.apple.widget.HelloWorld Обязательный параметр Строка, которая является уникальным идентификатором виджета, в обратном формате домена.
CFBundleName Hello World Необязательный параметр Строка, содержащая имя виджета. Она должна соответствовать имени пакета виджета в Finder без расширения .wdgt.
CFBundleShortVersionString 1,0 Необязательный параметр Строка, содержащая укороченный номер версии виджета. Она зачастую совпадает со строкой CFBundleVersion.
CFBundleVersion 1,0 Необязательный параметр Строка, содержащая номер версии виджета.
Height 768 Необязательный параметр Число, обозначающее высоту виджета в пикселях. Если значение не задано, используется высота значка Default.png.
MainHTML HelloWorld.html Обязательный параметр Строка, содержащая имя файла HTML, который реализует виджет.
Width 1024 Необязательный параметр Число, обозначающее ширину виджета в пикселях. Если значение не задано, используется ширина значка Default.png.
IBNotifiesOnReady <true/> Необязательный параметр Когда установлено значение true, виджет сообщает iBooks, когда переключиться с отображения 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 Интернет-плагины, например Flash, недоступны в книгах, созданных с помощью iBooks Author. Благодаря элементам HTML5 для <video> и <audio> в виджеты можно включать фильмы и аудио.
Для фильмов и аудиоматериалов в составе виджетов HTML не действует защита DRM.
AllowJava Виджеты в книгах, созданных с помощью iBooks Author, не могут включать в себя содержимое Java.
AllowSystem Виджеты в книгах, созданных с помощью iBooks Author, не могут получать доступ к системным командам.
Plugin Виджеты в книгах, созданных с помощью iBooks Author, не могут включать в себя компонент плагина Cocoa.

Указанные ключи игнорируются в iBooks Author. 

Ключ Описание
CloseBoxInsetX В виджетах в iBooks Author и iBooks не отображается оформление закрытия.
CloseBoxInsetY  

 

Fonts В виджетах iBooks Author не поддерживается использование связанных шрифтов.

Требования к видео и аудио

Использование файлов мультимедиа с расширением .m4v или .m4p невозможно. Используйте один из следующих форматов с расширением .mp4.

  • Видео H.264: до 720p, 60 кадров/с. Высокий профиль уровня 4.2 со звуком AAC-LC до 160 Кбит/с, 48 кГц, стереозвук. Такие настройки видео соответствуют параметру HD 720p в программе iMovie 10.
  • Видео MPEG-4: до 2,5 Мбит/с, 640 х 480 пикселей, 30 кадров/с. Простой профиль со звуком AAC-LC до 160 Кбит/с на канал, 48 кГц, стереозвук.

Для аудио используйте файлы AAC (от 8 до 320 Кбит/с, 48 кГц, стерео) с расширением .m4a.

Для видео- и аудиосодержимого в пакетах виджетов HTML не предусмотрена защита DRM.

Если не удается воспроизвести фильм или аудиофайл в виджете iBooks Author, попробуйте открыть его на устройстве iPhone, iPad или на компьютере Mac. Это покажет, как файл будет воспроизводиться в готовой книге.

Локализация

iBooks Author не поддерживает локализованные строки и ресурсы. Встраивайте текстовые строки на целевом языке, чтобы их видел читатель.

Исправление обрезанных элементов

Некоторые элементы, такие как <видео>, могут выглядеть обрезанными с одной стороны. Это возможно, если размеры элемента превышают доступное пространство. Найдите в CSS параметр width:auto в селекторе #video и измените его в соответствии с фактическими размерами. Например, виджет содержит видео с размерами 960 x 540. Найдите в CSS соответствующий селектор и задайте правильные значения ширины и высоты.

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

Разработка для iOS и macOS

В системах iOS и macOS используются разные способы ввода данных. В созданных виджетах HTML для iBooks Author можно задействовать как управление мышью, так и касаниями.

Устранение мерцания кадра во время открытия виджета HTML

При открытии очень сложных виджетов HTML в iBooks читатели могут наблюдать появление короткого кадра. Чтобы этого избежать, добавьте в виджет процедуру переключения между отображением файла Default.png и виджета HTML.

1. Добавьте элемент IBNotifiesOnReady со значением true в файл Info.plist виджета. В этом случае iBooks будет ожидать уведомление от виджета о необходимости отображения виджета HTML.

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






2. Настройте виджет для загрузки библиотеки Apple JavaScript во фрагменте <head> файла HTML.

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

Файл AppleWidget.js уже присутствует в iOS и macOS, и его не нужно включать в пакет виджета.

3. Настройте виджет таким образом, чтобы он сообщал iBooks об инициализации HTML. Добавьте в код JavaScript, включенный во фрагмент <head> файла HTML, следующий вызов.

widget.notifyContentIsReady()

Публикация на внешней веб-службе

Можно публиковать виджеты HTML только на тех внешних веб-службах, на которых используются правильные заголовки Cross-Origin Resource Sharing (CORS).

Дата публикации: