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

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

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

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

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

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

• Ресурсы/
• Support Files/Resources/
• Contents/Resources/

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

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

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

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

Целиком файл 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>

Не применяйте следующие ключи, они отвечают за несовместимые функции.

Указанные ключи игнорируются в 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 используются разные способы ввода данных. В созданных виджетах HTML для iBooks Author можно задействовать как управление мышью, так и касаниями.

• Узнайте о разработке событий прикосновения в ОС iOS.
• Узнайте о разработке событий мыши в ОС macOS.

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

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

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

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

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

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

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

widget.notifyContentIsReady()

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