HTML5-Widgets für iBooks Author erstellen
Hier erfährst du, wie du HTML5-Widgets zur Verwendung in mit iBooks Author erstellten Büchern erstellen kannst.
iBooks Author unterstützt HTML5-Widgets, die die Dateierweiterung „.wdgt“ besitzen. Verwende zur Erstellung eines HTML5-Widgets einen Texteditor oder ein Programm zur Inhaltserstellung, und lege damit die folgenden drei Dateien an:
Haupt-HTML-Datei: Diese Datei bildet den Hauptteil des Widgets. Der Name ist beliebig, aber die Erweiterung muss „.html“ lauten. Du kannst CSS und JavaScript in der Haupt-HTML-Datei einbetten. Oder du fügst dem Widget-Paket .css- und .js-Dateien hinzu und lädst diese über die Haupt-HTML-Datei. Du kannst beliebige Techniken einsetzen, die du auch beim Entwickeln einer Webseite verwenden würdest. Definiere die Struktur des Widgets mit HTML, lege den visuellen Stil mit CSS fest und nutze JavaScript für Interaktivität.
Datei „Default.png“: Die einfachste Methode zum Erstellen einer Datei „Default.png“ ist die Aufnahmen eines Bildschirmfotos von deiner Haupt-HTML-Datei in einem Programm zur Erstellung von Webinhalten oder in einem Webbrowser. Dies ist das Bild, das den Lesern auf der Seite angezeigt wird und auf das sie tippen, um das Widget zu öffnen. Nimm in einem Programm zur Erstellung von Webinhalten oder in einem Webbrowser ein Bildschirmfoto deiner Haupt-HTML-Datei auf. Nenne es „Default.png“, und achte darauf, den Großbuchstaben „D“ zu verwenden. Wenn dein Widget aktiv ist, hat es die Größe der Datei „Default.png“. Die Größe lässt sich in der Datei „Info.plist“ ändern.
Datei „Info.plist“: Diese Datei enthält die Informationen, die iBooks Author und Apple Books zur Ausführung deines Widgets benötigen. Der Dateiname muss „Info.plist“ lauten.
Nachdem du diese erforderlichen Dateien erstellt hast, kannst du bei Bedarf weitere optionale Dateien wie CSS- oder JavaScript-Dateien erstellen. Füge anschließend alle Dateien dem Widget-Paket hinzu:
Erstelle einen Ordner im Finder.
Füge die Dateien in den neuen Ordner ein.
Benenne den Ordner um, indem du dem Ordnernamen die Erweiterung „.wdgt“ hinzufügst, um das Widget-Paket zu erstellen. Das Ordnersymbol verwandelt sich in ein Widget-Symbol.
Füge dein Widget in iBooks Author ein.
Tipps zum Erstellen von Widgets
Bevor du das Widget-Paket erstellst, musst du sicherstellen, dass keine Datei im Paket ein Steuerungszeichen im Dateinamen verwendet. Sollte dies der Fall sein, kann das Buch im Book Store in Apple Books nicht veröffentlicht werden.
Wenn dein Widget auf automatische Wiedergabe eingestellt ist, kann es nicht auf das Internet zugreifen.
Verwende keine benutzerdefinierten Ordnersymbole, und vermeide folgende Ordnernamen im Widget:
Ressourcen/
Support Files/Resources/
Contents/Resources/
So optimierst du dein Widget für ein Retina-Display:
Verwende in deinen HTML-, CSS- und JavaScript-Dateien das Standardprotokoll für Websites mit Retina-Grafik (2x).
Füge deinem Widget eine Datei „Default@2x.png“ hinzu. Erstelle diese Datei mit der doppelten Auflösung der Datei „Default.png“. Diese Datei ist in iBooks Author nicht zu sehen, wird aber in Apple Books auf einem Retina-Display angezeigt.
Hier erhältst du weitere Informationen zum Optimieren von Büchern, die du mit iBooks Author erstellst.
Info.plist
Eine Info.plist-Datei eines grundlegenden Widgets enthält einige notwendige Schlüssel und einige optionale Schlüssel. Die folgende Tabelle listet diese Schlüssel, deren Definitionen und einige Beispielwerte für ein Widget namens „Hello World“ auf.
Schlüssel | Beispielwert | Erforderlich | Definition |
CFBundleDevelopmentRegion | Englisch | 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 Apple Books 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 des 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. |
Größe | 768 | Optional | Eine Zahl, die die Höhe des 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, mit der das Widget implementiert wird. |
Width | 1024 | Optional | Eine Zahl, die die Breite des Widgets in Pixeln angibt. Ist diese nicht angegeben, wird die Breite von Default.png verwendet. |
IBNotifiesOnReady | Optional | Ist hierfür „true“ eingestellt, gibt das Widget Apple Books 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
Folgende Schlüssel dürfen nicht verwendet werden, da ihre Features nicht kompatibel 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. Du kannst Filme und Audio mit den HTML5-Elementen 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 Apple Books 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. Verwende eines der folgenden Formate mit einer 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.
Nutze für Audio das Format AAC (8 bis 320 Kbit/s, 48 kHz Stereo) mit einer Dateierweiterung .m4a.
Video- und Audiomedien in HTML-Widget-Bundles sind nicht DRM-geschützt.
Wenn eine Film- oder Audiodatei in iBooks Author nicht im Widget wiedergegeben wird, öffne eine Vorschau auf deinem iPhone, iPad oder Mac. Dort siehst du, wie die Datei im finalen Buch wiedergegeben wird.
Lokalisierung
iBooks Author unterstützt keine lokalisierten Zeichenfolgen und Medien. Füge Textzeichenfolgen in der Zielsprache ein, die dem Leser inline angezeigt werden.
Abgeschnittene Elemente reparieren
Ein Element wie das folgende
#video { width: 960; height: 540; }
Entwicklung für iOS und macOS
iOS und macOS verwenden unterschiedliche Eingabetypen. Du kannst beim Erstellen von HTML-Widgets für iBooks Author sowohl Touch- als auch Mauseingaben vorsehen.
Hier erfährst du, wie du Touch-Ereignisse in iOS entwickelst.
Hier erfährst du, wie du Maus-Ereignisse in macOS entwickelst.
Bildschirmblitzen beim Öffnen des HTML-Widgets vermeiden
Wenn dein HTML-Widget sehr kompliziert ist, sehen deine Leser möglicherweise einen Blitz, wenn sie es in Apple Books öffnen. Um dies zu vermeiden, aktualisiere dein Widget so, dass es Apple Books die Information übergibt, wann von der Datei „Default.png“ auf das HTML-Widget umgeschaltet werden soll:
1. Füge in der Info.plist-Datei des Widgets ein Element „IBNotifiesOnReady“ hinzu, das auf „true“ eingestellt ist. Auf diese Weise erkennt Apple Books das Widget als entscheidende Instanz für das Umschalten auf das HTML-Widget.
<key>IBNotifiesOnReady</key>
2. Stelle dein Widget so ein, dass die Apple JavaScript-Bibliothek geladen wird. Verwende hierfür den Abschnitt
„AppleWidget.js“ ist in iOS und macOS bereits vorhanden, du musst die Datei deinem Widget-Paket also nicht hinzufügen.
3. Stelle dein Widget so ein, dass Apple Books benachrichtigt wird, wenn die HTML-Datei initialisiert wird. In JavaScript im Abschnitt
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.
