Создание виджетов 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 и Apple Books информацию, необходимую для выполнения виджета. Имя Info.plist обязательно для этого файла.
После создания этих трех обязательных файлов создайте любые дополнительные файлы, например файлы CSS или JavaScript. Затем добавьте их в пакет виджета.
Создайте папку в программе Finder.
Добавьте файлы в новую папку.
Переименуйте папку и добавьте расширение .wdgt к названию папки, чтобы создать пакет виджета. Значок папки будет изменен на значок виджета.
Добавьте свой виджет в программу 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
Файл Info.plist базового виджета содержит обязательные и дополнительные ключи. Список этих ключей, их определения и примеры некоторых значений для виджета с названием «Hello World».
Ключ | Пример значения | Требуемый | Определение |
CFBundleDevelopmentRegion | Английский | Необязательно | Строка, определяющая родной регион для пакета. Обычно значение соответствует родному языку автора пакета. |
CFBundleDisplayName | Hello World | Требуемый | Строка, содержащая фактическое имя виджета. Она будет отображаться в программах iBooks Author и Apple Books. |
CFBundleIdentifier | com.apple.widget.HelloWorld | Требуемый | Строка, которая является уникальным идентификатором виджета, в обратном формате домена. |
CFBundleName | Hello World | Необязательно | Строка, содержащая имя виджета. Она должна соответствовать имени пакета виджета в Finder без расширения .wdgt. |
CFBundleShortVersionString | 1.0 | Необязательно | Строка, содержащая укороченный номер версии виджета. Она зачастую совпадает со строкой CFBundleVersion. |
CFBundleVersion | 1.0 | Необязательно | Строка, содержащая номер версии виджета. |
рост; | 768 | Необязательно | Число, обозначающее высоту виджета в пикселях. Если значение не задано, используется высота значка Default.png. |
MainHTML | HelloWorld.html | Требуемый | Строка, содержащая имя файла HTML, который реализует виджет.Width1024Optional |
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 | Интернет-плагины, например Flash, недоступны в книгах, созданных с помощью iBooks Author. Можно включить фильмы и аудиоматериалы с использованием 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 кадров/с. Высокий профиль уровня 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 не поддерживает локализованные строки и ресурсы. Встраивайте текстовые строки на целевом языке, чтобы их видел читатель.
Исправление обрезанных элементов
Некоторые элементы, такие как
#video { width: 960; height: 540; }
Разработка для iOS и macOS
В системах iOS и macOS используются разные способы ввода данных. В созданных виджетах HTML для iBooks Author можно задействовать как управление мышью, так и касаниями.
Устранение мерцания кадра во время открытия виджета HTML
При открытии очень сложных виджетов HTML в Apple Books читатели могут наблюдать появление короткого кадра. Чтобы этого избежать, добавьте в виджет процедуру переключения между отображением файла Default.png и виджета HTML.
1. Добавьте элемент IBNotifiesOnReady со значением true в файл Info.plist виджета. В этом случае Apple Books будет ожидать указания виджета о необходимости отображения виджета HTML.
<key>IBNotifiesOnReady</key>
2. Настройте виджет для загрузки библиотеки Apple JavaScript во фрагменте
Файл AppleWidget.js уже присутствует в iOS и macOS, и его не нужно включать в пакет виджета.
3. Настройте виджет таким образом, чтобы он сообщал Apple Books об инициализации HTML. Добавьте в код JavaScript, включенный во фрагмент
widget.notifyContentIsReady()
Публикация на внешней веб-службе
Можно публиковать виджеты HTML только на тех внешних веб-службах, на которых используются правильные заголовки Cross-Origin Resource Sharing (CORS).
