iBooks Author ondersteunt HTML5-widgets (met de extensie .wdgt).
Als u een HTML-widget wilt maken voor iBooks Author, gebruikt u een programma voor tekstbewerking of voor het maken van webmateriaal om de volgende 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 .css- en .js-bestanden toevoegen aan de widgetbundel en het HTML-hoofdbestand instellen om deze te laden. In deze bestanden kunt u elke techniek of truc gebruiken die u zou gebruiken wanneer u een webpagina ontwerpt. Doorgaans gebruikt u HTML om de structuur van een widget te definiëren, CSS om de visuele stijl te voorzien en JavaScript om interactiviteit te ondersteunen.
- Default.png: dit is de afbeelding die op de pagina zal verschijnen en waarop gebruikers zullen tikken om de widget te openen. De naam moet Default.png zijn, met de hoofdletter 'D'. De eenvoudigste manier om een Default.png te maken is een schermafbeelding van een HTML-hoofdbestand maken dat wordt uitgevoerd in een programma voor het maken van webmateriaal of een webbrowser. Wanneer de widget actief is, heeft deze de grootte van de Default.png tenzij u een andere grootte opgeeft in de Info.plist.
- Info.plist: dit bestand geeft de nodige informatie aan iBooks Author en iBooks om een widget uit te voeren. De naam moet Info.plist zijn. Hieronder vindt u meer informatie en een voorbeeld.
Zodra u de drie vereiste bestanden hebt gemaakt (en misschien enkele optionele bestanden, zoals CSS of JavaScript), voegt u deze samen in een widgetbundel:
- Maak een map aan met behulp van de Finder en voeg er de bestanden aan toe.
- Wijzig de naam van de map en voeg de .wdgt-extensie toe aan de naam van de map. Hierdoor wordt de widgetbundel aangemaakt en het mapsymbool wordt gewijzigd naar een widgetsymbool.
De widget is nu klaar om aan iBooks Author te worden toegevoegd.
Opmerkingen
- Als het boek HTML-widgets bevat met bestanden die einde-regeltekens in hun bestandsnaam hebben, kan het niet worden gepubliceerd in de iBooks Store. Voordat u een widgetbundel aanmaakt, zorgt u ervoor dat geen enkel bestand in de bundel deze tekens gebruikt in de bestandsnaam. Gebruik geen aangepaste mapsymbolen.
- Voeg geen mappen met deze namen toe aan de widgetbundel:
- Resources/
- Support Files/Resources/
- Contents/Resources/
- Als u materiaal maakt voor iPads of Macs met een Retina-display:
- Wanneer u HTML-, CSS- en JavaScript-bestanden codeert, volgt u het standaardprotocol voor het maken van websites met de grafische prestaties van Retina (2x).
- Een widgetbundel moet een Default@2x.png-bestand bevatten dat de dubbele resolutie van het Default.png-bestand heeft. U kunt dit bestand niet weergegeven in iBooks Author maar wel in iBooks op iPads of Macs met een Retina-display.
- Als u wilt dat de widget het volledige scherm inneemt wanneer u inzoomt, maakt u het Default.png-bestand 768 op 1024 pixels groot en het Default@2x.png 1536 op 2048 pixels. Als u wilt dat de widget kleiner wordt weergegeven dan de grootte van het scherm, maakt u het Default.png-bestand met de gewenste grootte voor de widget (bijvoorbeeld 600 op 900) en maakt u het Default@2x.png dubbel zo groot.
- Lees meer over het optimaliseren van boeken die in iBooks Author zijn gemaakt.
Het Info.plist
Een basisbestand Info.plist van een widget bevat enkele vereiste sleutels en enkele optionele sleutels. Deze sleutels worden hieronder vermeld samen met hun definities en enkele voorbeeldwaarden voor een widget met de naam 'Hallo wereld'.
| Sleutel | Voorbeeldwaarde | Definitie |
| CFBundleDevelopmentRegion | Nederlands | 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 die in iBooks Author en iBooks wordt 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>Engels</string> <key>CFBundleDisplayName</key> <string>Hallo wereld</string> <key>CFBundleIdentifier</key> <string>com.apple.widget.HelloWorld</string> <key>CFBundleName</key> <string>Hallo wereld</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Hoogte</key> <integer>768</integer> <key>MainHTML</key> <string>HelloWorld.html</string> <key>Breedte</key> <integer>1024</integer> <key>IBNotifiesOnReady</key> <true/></dict></plist>
Beperkingen
Sommige functies zijn niet compatibel. U mag deze sleutels niet gebruiken:
| Sleutel | Beschrijving |
| AllowFileAccessOutsideOfWidget | Widgets in boeken die met iBooks Author zijn gemaakt, hebben geen toegang tot bestanden in 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. Films en audio kunnen via de HTML5-elementen <video> en <audio> respectievelijk worden toegevoegd. Opmerking: 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 films en audio
U kunt media met de bestandsextensies '.m4v' of '.m4p' niet gebruiken.
U wordt aanbevolen H.264-video te gebruiken in een MPEG-4-container met een '.mp4'-bestandsextensie.
Voor audio wordt u aanbevolen AAC-audio te gebruiken in een MPEG-4-container met een '.mp4'-bestandsextensie.
Opmerking: video- en audiomedia in HTML-widgetbundels zijn niet met DRM beveiligd.
Opmerking: in sommige gevallen worden films en audiobestanden in HTML-widgets niet afgespeeld in iBooks Author maar wel in iBooks. Als u geen film- of audiobestand in de widget kunt afspelen in iBooks Author, probeert u een voorvertoning ervan op een iPad of een computer met OS X Mavericks weer te geven. Hierdoor ziet u hoe het bestand zal worden afgespeeld in het afgewerkte boek.
Taalversie
Gelokaliseerde tekenreeksen en onderdelen worden niet ondersteund in iBooks Author. Daarom moeten teksttekenreeksen, die de gebruiker kan zien, worden opgenomen in de doeltaal.
Ingekorte elementen
Als een element, zoals een <video>-element, is ingekort aan een zijde, is dit mogelijk omdat het wordt vergroot om een groter gebied dan zichtbaar in te nemen. Controleer de CSS op '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, controleert u de CSS op de relevante selector en stelt u de breedte en hoogte nauwkeurig in op de juiste waarden:
#video { width: 960; height: 540;}Ontwerpen voor zowel iOS als OS X Mavericks
iOS en OS X gebruiken eigenlijk andere invoertypen. Wanneer u dus HTML-widgets voor iBooks Author maakt, moet u ervoor zorgen dat u zowel aanraakbewegingen als muisbewegingen implementeert als u alle bedieningen wilt gebruiken die niet door standaardbewegingen worden uitgevoerd.
- Lees meer over het ontwikkelen van activiteiten met aanraakbewegingen in iOS.
- Lees meer over het ontwikkelen van activiteiten met muisbewegingen in OS X.
HTML-widget openen
Afhankelijk van hoe ingewikkeld de HTML-widget is, kunnen lezers een flits zien tijdens de HTML-initialisatie wanneer ze de widget in iBooks openen. Als u de flits wilt vermijden, wijzigt u de widget zo dat deze aan iBooks doorgeeft wanneer de HTML-widget moet worden weergegeven in plaats van het bestand Default.png.
Er zijn drie wijzigingen die u moet aanbrengen om deze optionele functie toe te voegen:
- Voeg een 'IBNotifiesOnReady'-onderdeel toe dat is ingesteld op 'true' in het info.plist-bestand van de widget zodat iBooks weet dat deze widget zal aangeven wanneer de HTML-widget moet worden weergegeven:
<key>IBNotifiesOnReady</key><true/>
- 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>
Opmerking: AppleWidget.js bevindt zich al op de iPad en u moet dit niet toevoegen aan de widgetbundel. - Stel de widget zo in dat deze doorgeeft aan iBooks wanneer de HTML is geïnitialiseerd, en iBooks kan de HTML-widget weergeven in plaats van het bestand Default.png met behulp van een aanroep (in JavaScript opgenomen in het onderdeel HEAD van het HTML-bestand):
widget.notifyContentIsReady()
Belangrijk: als u de HTML-widget wilt wijzigen om de flits te vermijden, zorgt u ervoor dat u de drie bovenstaande stappen uitvoert. U moet alle stappen uitvoeren om dit naar behoren te laten werken.
Posten op externe webvoorzieningen
HTML-widgets kunnen alleen publiceren op externe webvoorzieningen als die webvoorzieningen de gepaste CORS-kopteksten (Cross-Origin Resource Sharing) hebben geïmplementeerd.