HTML5-widgets maken voor iBooks Author

Lees hier hoe je HTML5-widgets maakt die je kunt gebruiken met boeken die je in iBooks Author aanmaakt.

iBooks Author ondersteunt HTML5-widgets met de bestandsnaamextensie '.wdgt'. Om een HTML5-widget te maken, gebruik je een programma voor tekstbewerking of voor het aanmaken van materiaal om deze drie bestanden aan te maken:

• HTML-hoofdbestand: dit bestand is het hoofddeel van de widget. Je kunt het een willekeurige naam geven maar de extensie moet '.html' zijn. Je kunt CSS en JavaScript in het HTML-hoofdbestand plaatsen. Of je kunt .css- en .js-bestanden toevoegen aan de widgetbundel en deze laden vanaf het HTML-hoofdbestand. Je kunt elke techniek gebruiken die je zou gebruiken wanneer je een webpagina ontwerpt. Gebruik HTML om de structuur van een widget te definiëren, CSS om de visuele stijl te voorzien en JavaScript om de widget interactief te maken.

• Default.png-bestand: de eenvoudigste manier om een Default.png te maken is een schermafbeelding van een HTML-hoofdbestand maken in een programma voor het maken van webmateriaal of een webbrowser. Dit is de afbeelding die lezers op de pagina zien en waarop ze tikken om de widget te openen. Maak een schermafbeelding van een HTML-hoofdbestand in een programma voor het maken van webmateriaal of een webbrowser. Noem dit 'Default.png' (gebruik de hoofdletter 'D'). Wanneer de widget actief is, heeft deze de grootte van het Default.png-bestand. Je kunt de grootte wijzigen in het Info.plist-bestand.

• Info.plist-bestand: dit bestand geeft de nodige informatie aan iBooks Author en Apple Books om een widget uit te voeren. De bestandsnaam moet 'Info.plist' zijn.

Zodra je deze vereiste bestanden hebt aangemaakt, maak je eventuele optionele bestanden aan, zoals CSS- of JavaScript-bestanden. Voeg deze vervolgens samen in een widgetbundel:

1. Maak een map aan in de Finder.

2. Voeg de bestanden toe aan de nieuwe map.

3. Geef de map een nieuwe naam en voeg de extensie '.wdgt' toe aan de mapnaam om de widgetbundel te maken. Het symbool van de map wordt gewijzigd in een widgetsymbool.

4. Voeg je widget toe aan iBooks Author.

Tips bij het maken van widgets

Voordat je een widgetbundel aanmaakt, controleer je dat er geen bestand is in de bundel met een einde-regelteken in de bestandsnaam. Als er wel een dergelijk bestand in de bundel staat, kun je het boek niet publiceren in Apple Books.

Als je de widget instelt om automatisch te worden afgespeeld, heeft deze geen toegang tot het internet.

Gebruik geen aangepaste mapsymbolen en vermijd deze mapnamen in de widget:

• Informatiebronnen/

• Support Files/Resources/

• Contents/Resources/

Je widget optimaliseren voor een Retina-display:

• Gebruik in je HTML-, CSS- en JavaScript-bestanden het standaardprotocol voor websites met Retina-graphics (2x).

• Voeg een Default@2x.png-bestand toe aan je widget. Zorg ervoor dat het bestand de dubbele resolutie van het Default.png-bestand heeft. Je kunt dit bestand niet zien in iBooks Author, maar je kunt het wel zien in iBooks op een Retina-display.

Lees meer over hoe je boeken optimaliseert die je maakt met iBooks Author.

Het Info.plist

Een basisbestand Info.plist van een widget bevat enkele vereiste sleutels en enkele optionele sleutels. Deze sleutels worden in deze tabel vermeld samen met hun definities en enkele voorbeeldwaarden voor een widget met de naam 'Hallo wereld'.

Het volledige Info.plist voor een widget ziet er als volgt uit:

Sleutelbeperkingen

Gebruik deze sleutels niet; de functies zijn niet compatibel:

iBooks Author negeert deze sleutels:

Vereisten voor video en audio

Je kunt geen media gebruiken met de bestandsextensies .m4v of .m4p. Gebruik een van de volgende structuren met een mp4-bestand:

• H.264-video: tot 720p, 60 frames per seconde, High Profile level 4.2 met AAC-LC-audio tot maximaal 160 kbps, 48 kHz, stereo-audio. Video's die worden geopend in iMovie 10 met de optie HD 720p, gebruiken deze instellingen.

• MPEG-4-video: tot 2,5 Mbps, 640 x 480 pixels, 30 frames per seconde, Simple Profile met AAC-LC-audio tot maximaal 160 kbps per kanaal, 48 kHz, stereo-audio.

Gebruik voor audio AAC (8 tot 320 Kbps, 48 kHz stereo) met de bestandsextensie .m4a.

Video- en audiomedia in HTML-widgetbundels zijn niet met DRM beveiligd.

Als een film- of audiobestand niet in de widget wordt afgespeeld in iBooks Author, bekijk je er een voorbeeld van op een iPhone, iPad of Mac. Hierdoor zie je hoe het bestand zal worden afgespeeld in het afgewerkte boek.

Taalversie

Gelokaliseerde tekenreeksen en onderdelen worden niet ondersteund in iBooks Author. Teksttekenreeksen die de lezer kan zien, moeten in de doeltaal worden opgenomen.

Ingekorte elementen herstellen

Een element, zoals

Ontwikkelen voor iOS en macOS

iOS en macOS gebruiken verschillende invoertypen. Wanneer je HTML-widgets voor iBooks Author aanmaakt, kun je zowel aanraak- als muisinvoer implementeren.

• Lees meer over het ontwikkelen van activiteiten met aanraakbewegingen in iOS.

• Lees meer over het ontwikkelen van activiteiten met muisbewegingen in macOS.

Een flits vermijden wanneer lezers de HTML-widget openen

Als je HTML-widget erg ingewikkeld is, kunnen lezers een flits zien wanneer ze deze in Apple Books openen. Om dit te vermijden, werk je de widget zo bij dat deze aan Apple Books doorgeeft wanneer de HTML-widget moet worden weergegeven in plaats van het bestand Default.png:

1. Voeg een 'IBNotifiesOnReady'-onderdeel toe dat is ingesteld op 'true' in het Info.plist-bestand van de widget. Hierdoor weet Apple Books dat de widget zal aangeven wanneer de HTML-widget moet worden weergegeven.

2. Stel je widget in om de Apple JavaScript-bibliotheek te laden in het gedeelte

iOS en macOS hebben AppleWidget.js al, dus je hoeft dit niet toe te voegen aan de widgetbundel.

3. Stel de widget zo in dat deze aan Apple Books doorgeeft wanneer de HTML is geïnitialiseerd. In het JavaScript dat in het gedeelte

Op een externe webservice plaatsen

Je kunt HTML-widgets alleen plaatsen op externe webservices als deze de juiste CORS-headers (Cross-Origin Resource Sharing) gebruiken.