HTML 5-Widgets für iBooks Author erstellen

Erfahren Sie, wie Sie HTML 5-Widgets erstellen, die Sie in mit iBooks Author erstellten Büchern nutzen können.

iBooks Author unterstützt HTML 5-Widgets, die die Dateierweiterung ".wdgt" besitzen. Wenn Sie ein HTML 5-Widget anlegen möchten, erstellen Sie die folgenden drei Dateien mithilfe eines Texteditors oder einer App zur Inhaltserstellung:

  • Haupt-HTML-Datei: Diese Datei bildet den Hauptteil des Widgets. Sie kann einen beliebigen Namen haben, aber die Endung muss ".html" lauten. Sie können CSS und JavaScript in die Haupt-HTML-Datei einbinden. Alternativ können Sie dem Widget-Bundle .css- und .js-Dateien hinzufügen und sie aus der Haupt-HTML-Datei laden. Sie können jede Technik nutzen, die auch zum Erstellen einer Webseite geeignet ist. Verwenden Sie HTML, um die Struktur des Widgets zu definieren, CSS für den visuellen Stil und JavaScript zum Herstellen von Interaktivität. 
  • Default.png-Datei: Der einfachste Weg, eine "Default.png" zu erstellen, besteht darin, ein Bildschirmfoto Ihrer Haupt-HTML-Datei aufzunehmen, wenn sie in einer App zum Erstellen von Webinhalten oder in einem Webbrowser ausgeführt wird. Das ist das Bild, das die Leser auf der Seite sehen und auf das sie tippen, um das Widget zu öffnen. Nehmen Sie in einem Webbrowser oder einer App zur Inhaltserstellung ein Bildschirmfoto Ihrer Haupt-HTML-Datei auf. Benennen Sie das Bildschirmfoto als "Default.png". Achten Sie darauf, tatsächlich den Großbuchstaben "D" zu verwenden. Wenn das Widget aktiv ist, entspricht seine Größe der Größe der Default.png-Datei. Die Größe lässt sich in der Datei "Info.plist" ändern.
  • Info.plist-Datei: Diese Datei sendet die Informationen an iBooks Author und iBooks, die zur Ausführung Ihres Widgets benötigt werden. Der Dateiname muss "Info.plist" lauten.

Sobald Sie diese erforderlichen Dateien angelegt haben, erstellen Sie alle gewünschten optionalen Dateien, zum Beispiel CSS- oder JavaScript-Dateien. Anschließend fügen Sie alle dem Widget-Bundle hinzu:

  1. Legen Sie einen Ordner im Finder an.
  2. Fügen Sie die Dateien Ihrem neuen Ordner hinzu.
  3. Benennen Sie den Ordner um, und fügen Sie dem Ordnernamen die Erweiterung ".wdgt" hinzu, um das Widget-Bundle zu erstellen. Das Ordnersymbol verwandelt sich in ein Widget-Symbol.
  4. Fügen Sie Ihr Widget zu iBooks Author hinzu.

Tipps zum Erstellen von Widgets

Vergewissern Sie sich vor dem Erstellen Ihres Widget-Bundles, dass keine Datei im Bundle Steuerzeichen in ihrem Dateinamen hat. Andernfalls können Sie das Buch nicht im iBooks Store veröffentlichen.

Wenn Sie Ihr Widget für eine automatische Ausführung konfigurieren, kann sie nicht auf das Internet zugreifen. 

Verwenden Sie keine benutzerdefinierten Ordnersymbole, und vermeiden Sie in Ihrem Widget folgende Ordnernamen:

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

So optimieren Sie Ihr Widget für ein Retina-Display:

  • Verwenden Sie in Ihren HTML-, CSS- und JavaScript-Dateien das Standardprotokoll für Websites mit Retina (2x)-Grafiken. 
  • Binden Sie eine Default@2x.png-Datei in Ihr Widget ein. Geben Sie dieser Datei die doppelte Auflösung wie der Default.png-Datei. Sie können diese Datei in iBooks Author nicht sehen, wohl aber in iBooks auf einem Retina-Display.

Erfahren Sie mehr darüber, wie Sie mit iBooks Author erstellte Bücher optimieren.

Info.plist

Eine Info.plist-Datei eines grundlegenden Widgets enthält einige notwendige Schlüssel und einige optionale Schlüssel. In der folgenden Tabelle werden diese Schlüssel, ihre Definitionen und einige Beispielwerte für ein Widget namens "Hello World" aufgeführt. 

Schlüssel Beispielwert Erforderlich Definition
CFBundleDevelopmentRegion English Optional Ein String, der die Ursprungsregion des Bundles angibt. Das ist normalerweise die Muttersprache der Person, die das Bundle erstellt hat. 
CFBundleDisplayName Hello World Erforderlich Ein String, der den tatsächlichen Namen des Widgets enthält. Dieser wird in iBooks Author und in iBooks angezeigt.
CFBundleIdentifier com.apple.widget.HelloWorld Erforderlich Ein String, der nur das Widget kennzeichnet, in umgekehrtem Domainformat.
CFBundleName Hello World Optional Ein String, der den Namen Ihres Widgets enthält. Er muss mit dem Namen des Widget-Bundles im Finder übereinstimmen (ohne die Dateiendung ".wdgt").
CFBundleShortVersionString 1.0 Optional Ein String, der die abgekürzte Versionsnummer des Widgets angibt. Dieser String ist oft derselbe wie für CFBundleVersion.
CFBundleVersion 1.0 Optional Ein String, der die Versionsnummer des Widgets angibt.
Height 768 Optional Eine Zahl, die die Höhe Ihres Widgets in Pixeln angibt. Ist diese nicht angegeben, wird die Höhe von Default.png verwendet.
MainHTML HelloWorld.html Erforderlich Ein String, der den Namen der HTML-Datei angibt, die Ihr Widget umsetzt.
Width 1024 Optional Eine Zahl, die die Breite Ihres Widgets in Pixeln angibt. Ist diese nicht angegeben, wird die Breite von Default.png verwendet.
IBNotifiesOnReady <true/> Optional Ist hierfür "true" eingestellt, gibt das Widget iBooks einen Hinweis, wann von der Anzeige von Default.png zur Anzeige des ausgeführten HTML-Widgets gewechselt werden soll. 

 

Die komplette Info.plist für ein Widget sieht wie folgt aus: 

<?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>

Einschränkungen und Begrenzungen für Schlüssel

Vermeiden Sie folgende Schlüssel, da ihre Merkmale inkompatibel sind:

Schlüssel Beschreibung
AllowFileAccessOutsideOfWidget Widgets in Büchern, die mit iBooks Author erstellt werden, können nicht auf Dateien im allgemeinen Dateisystem zugreifen.
AllowFullAccess Kurzversion für eine Liste anderer Zugriffsschlüssel, von denen einige nicht kompatibel sind.
AllowInternetPlugins Internet-Plug-Ins wie Flash sind in Büchern, die mit iBooks Author erstellt wurden, nicht verfügbar. Mithilfe der HTML5-<Video>- und -<Audio>-Elemente können Sie Video- und Audiodateien einbinden.
Filme und Audiodateien innerhalb von HTML-Widgets sind nicht DRM-geschützt.
AllowJava Widgets in Büchern, die mit iBooks Author erstellt wurden, können keine Java-Inhalte einbinden.
AllowSystem Widgets in Büchern, die mit iBooks Author erstellt wurden, können nicht auf Systembefehle zugreifen.
Plug-In Widgets in Büchern, die mit iBooks Author erstellt wurden, können keine Cocoa-Plug-In-Komponente einbinden.

Folgende Schlüssel werden von iBooks Author ignoriert: 

Schlüssel Beschreibung
CloseBoxInsetX Widgets in iBooks Author und iBooks weisen keine Kennzeichnung zum Schließen auf.
CloseBoxInsetY  

 

Fonts iBooks Author kann keine gebündelten Schriften verwenden.

Video- und Audioanforderungen

Medien mit der Dateierweiterung .m4v oder .m4p können nicht verwendet werden. Verwenden Sie eines dieser Formate mit der Dateierweiterung .mp4:

  • H.264-Video: Bis zu 720p, 60 Bilder pro Sekunde. High-Profile-Level 4.2 mit AAC-LC-Audio mit bis zu 160 Kbit/s, 48 kHz, Stereo-Audio. Diese Einstellungen gelten für Videos, die in iMovie 10 mit der Option "HD 720p" geöffnet werden.
  • MPEG-4-Video: Bis zu 2,5 Mbit/s, 640 x 480 Pixel, 30 Bilder pro Sekunde. Simple Profile mit AAC-LC Audio mit bis zu 160 Kbit/s pro Kanal, 48 kHz, Stereo-Audio.

Verwenden Sie bei Audio-Dateien AAC (8 bis 320 kbit/s, 48 kHz Stereo) mit einer .m4a-Erweiterung.

Video- und Audiomedien in HTML-Widget-Bundles sind nicht DRM-geschützt.

Wenn eine Video- oder Audio Datei in Ihrem Widget in iBooks Author nicht abgespielt wird, spielen Sie es über die Vorschau auf Ihrem iPhone, iPad oder Mac ab. Dies zeigt Ihnen, wie die Datei in Ihrem vollständigen Buch abgespielt wird.

Lokalisierung

iBooks Author unterstützt keine lokalisierten Zeichenfolgen und Medien. Sie sollten für Benutzer sichtbare Textzeichenketten inline in die Zielsprache integrieren.

Abgeschnittene Elemente reparieren

Ein Element wie <Video> könnte an einer Seite abgeschnitten angezeigt werden. Dies kann auftreten, wenn die Abmessungen des Elements den verfügbaren Platz übersteigen. Suchen Sie im #video-Selektor nach der CSS-Datei mit "width:auto", und passen Sie die Abmessungen an den verfügbaren Platz an. Ihr Widget könnte beispielsweise ein Video mit den Abmessungen 960 x 540 enthalten. Überprüfen Sie den entsprechenden Sektor in der CSS-Datei, und setzen Sie Breite ("width") und Höhe ("height") auf die korrekten Werte:

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

Entwicklung für iOS und macOS

iOS und macOS verwenden unterschiedliche Eingabetypen. Beim Erstellen von HTML-Widgets für iBooks Author können Sie sowohl Touch- als auch Maussteuerung einbinden.

Bildschirmblitzen beim Öffnen des HTML-Widgets vermeiden

Wenn Ihr HTML-Widget besonders kompliziert ist, sehen Ihre Leser möglicherweise ein Aufblitzen, wenn sie es in iBooks öffnen. Dies können Sie vermeiden, indem Sie in iBooks einstellen, wann von der Default.png-Datei auf das HTML-Widget umgeschaltet werden soll:

1. Fügen Sie ein "IBNotifiesOnReady"-Objekt hinzu, das in der Info.plist-Datei des Widgets auf "true" gesetzt ist. Auf diese Weise erkennt iBooks das Widget als entscheidende Instanz für das Umschalten auf das HTML-Widget.

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






2. Stellen Sie Ihr Widget so ein, dass die Apple JavaScript-Bibliothek im <head>-Teil der HTML-Datei geladen wird:

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

iOS und macOS verfügen bereits über die Datei "AppleWidget.js", daher müssen Sie sie nicht mehr in Ihr Widget-Bundle einbinden.

3. Stellen Sie Ihr Widget so ein, dass iBooks beim Initialisieren der HTML-Datei benachrichtigt wird. Rufen Sie in JavaScript, das sich im <head>-Abschnitt der HTML-Datei befindet, Folgendes auf:

widget.notifyContentIsReady()

In externen Webdiensten veröffentlichen

Das Veröffentlichen von HTML-Widgets in externen Webdiensten ist nur dann möglich, wenn diese Webdienste die richtigen CORS-Header (Cross-Origin Resource Sharing) verwenden.

Veröffentlichungsdatum: