HTML5-widgets maken voor iBooks Author

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

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

  • HTML-hoofdbestand: dit bestand is het hoofddeel van de widget. U kunt het een willekeurige naam geven maar de extensie moet '.html' zijn. U kunt CSS en JavaScript in het HTML-hoofdbestand plaatsen. Of u kunt .css- en .js-bestanden toevoegen aan de widgetbundel en deze laden vanaf het HTML-hoofdbestand. U kunt elke techniek gebruiken die u zou gebruiken wanneer u 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. U kunt de grootte wijzigen in het Info.plist-bestand.
  • Info.plist-bestand: dit bestand geeft de nodige informatie aan iBooks Author en iBooks om een widget uit te voeren. De bestandsnaam moet 'Info.plist' zijn.

Zodra u deze vereiste bestanden hebt gemaakt, maakt u enkele optionele bestanden die u wilt, 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 uw widget toe aan iBooks Author.

Tips bij het maken van widgets

Voordat u een widgetbundel maakt, zorgt u ervoor dat er geen bestand is in de bundel met een einde-regelteken in de bestandsnaam. Als dat het geval is, kunt u het boek niet in de iBooks Store publiceren.

Als u de widget instelt om automatisch te worden afgespeeld, hebt u geen toegang tot het internet. 

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

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

Om uw widget te optimaliseren voor een Retina-display:

  • Gebruik in uw HTML-, CSS- en JavaScript-bestanden het standaardprotocol voor websites met de grafische prestaties van Retina (2x). 
  • Voeg een Default@2x.png-bestand toe aan uw widget. Zorg ervoor dat het bestand de dubbele resolutie van het Default.png-bestand heeft. U kunt dit bestand niet zien in iBooks Author, maar u kunt het zien in iBooks op een Retina-display.

Lees hier meer over hoe u boeken optimaliseert die u 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'. 

Sleutel Voorbeeldwaarde Vereist Definitie
CFBundleDevelopmentRegion Engels Optioneel Een tekenreeks die het oorspronkelijke gebied voor de bundel specificeert. Dit stemt doorgaans overeen met de moedertaal van de persoon die de bundel maakte. 
CFBundleDisplayName Hallo wereld Vereist Een tekenreeks met de huidige naam van de widget. Deze naam wordt in iBooks Author en iBooks weergegeven.
CFBundleIdentifier com.apple.widget.HalloWereld Vereist Een tekenreeks voor de unieke identificatie van de widget, in omgekeerde domeinstructuur.
CFBundleName Hallo wereld Optioneel Een tekenreeks met de naam van de widget. Dit moet overeenstemmen met de naam van de widgetbundel in de Finder zonder de .wdgt-bestandsextensie.
CFBundleShortVersionString 1.0 Optioneel Een tekenreeks met het verkorte versienummer van de widget. Dit is vaak gelijk aan CFBundleVersion.
CFBundleVersion 1.0 Optioneel Een tekenreeks met het versienummer van de widget.
Hoogte 768 Optioneel Een cijfer met de hoogte van de widget in pixels. Indien dit niet wordt gespecificeerd, wordt de hoogte van Default.png gebruikt.
MainHTML HalloWereld.html Vereist Een tekenreeks met de naam van het HTML-bestand dat de widget implementeert.
Breedte 1024 Optioneel Een cijfer met de breedte van de widget in pixels. Indien dit niet wordt gespecificeerd, wordt de breedte van Default.png gebruikt.
IBNotifiesOnReady <true/> Optioneel Wanneer dit is ingesteld op true, geeft de widget door aan iBooks wanneer het de actieve HTML-widget moet weergeven in plaats van het Default.png. 

 

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

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

Sleutelbeperkingen

Gebruik deze sleutels niet; de functies zijn niet compatibel:

Sleutel Beschrijving
AllowFileAccessOutsideOfWidget Widgets in boeken die zijn gemaakt met iBooks Author hebben geen toegang tot het algemene bestandssysteem.
AllowFullAccess Steno voor een lijst met andere toegangssleutels, waarvan er enkele niet compatibel zijn.
AllowInternetPlugins Internetplugins, zoals Flash, zijn niet beschikbaar in boeken die met iBooks Author zijn gemaakt. U kunt films en audio toevoegen met de HTML5-elementen <video> en <audio>.
Films en audio in HTML-widgets zijn niet met DRM beveiligd.
AllowJava Widgets in boeken die met iBooks Author zijn gemaakt, mogen geen Java-inhoud bevatten.
AllowSystem Widgets in boeken die met iBooks Author zijn gemaakt, hebben geen toegang tot systeemcommando's.
Plugin Widgets in boeken die met iBooks Author zijn gemaakt, mogen geen Cocoa-pluginonderdeel bevatten.

iBooks Author negeert deze sleutels: 

Sleutel Beschrijving
CloseBoxInsetX Widgets in iBooks Author en iBooks geven geen dichte opmaak weer.
CloseBoxInsetY  

 

Lettertypen De widgets van iBooks Author kunnen geen gebundelde lettertypen gebruiken.

Vereisten voor video en audio

U 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, geeft u er een voorvertoning van op een iPhone, iPad of Mac. Hierdoor ziet u 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 <video>, kan aan één kant ingekort worden weergegeven. Dit kan zich voordoen als de afmetingen ervan groter zijn dan de beschikbare ruimte. Zoek de CSS voor 'width:auto' in de #video-selector en wijzig die om de huidige afmetingen weer te geven. Als de widget bijvoorbeeld een video heeft waarvan de afmetingen 960 op 540 zijn. Controleer de CSS op de relevante selector en stel de breedte en hoogte in op de juiste waarden:

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

Ontwikkelen voor iOS en macOS

iOS en macOS gebruiken verschillende invoertypen. Wanneer u HTML-widgets voor iBooks Author maakt, kunt u zowel aanraak- als muisinvoer implementeren.

Een flits vermijden wanneer lezers de HTML-widget openen

Als uw HTML-widget erg ingewikkeld is, kunnen lezers een flits zien wanneer ze deze in iBooks openen. Om dit te vermijden, werkt u de widget zo bij dat deze aan iBooks 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 iBooks dat de widget zal aangeven wanneer de HTML-widget moet worden weergegeven.

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






2. Stel de widget in om de Apple JavaScript-bilbiotheek te laden in het onderdeel <head> van het HTML-bestand:

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

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

3. Stel de widget zo in dat deze doorgeeft aan iBooks wanneer de HTML is geïnitialiseerd. Doe in de JavaScript die zich bevindt in het onderdeel <head> van het HTML-bestand de volgende aanroep:

widget.notifyContentIsReady()

Op een externe webservice plaatsen

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

Publicatiedatum: