Création de widgets HTML5 pour iBooks Author

iBooks Author prend en charge les widgets HTML5, dont l’extension est .wdgt. Pour créer un widget HTML5, utilisez un éditeur de texte ou une app de création de contenu pour créer ces trois fichiers :

• Un fichier HTML principal : celui-ci constitue la partie principale du widget. Vous pouvez lui donner le nom de votre choix, mais son extension doit être .html. Vous pouvez placer du code CSS et JavaScript dans le fichier HTML principal. Vous pouvez également ajouter des fichiers .css et .js au paquet du widget, et les charger à partir du fichier HTML principal. Vous pouvez utiliser n’importe quelle technique pour concevoir une page web. Utilisez le fichier HTML pour définir la structure du widget, du code CSS pour le style visuel et du code JavaScript pour le rendre interactif. 
• Fichier Default.png : le meilleur moyen de créer ce fichier consiste à effectuer une capture d’écran de votre fichier HTML principal dans une app de création de contenu web ou dans un navigateur web. Il s’agit de l’image que les utilisateurs voient sur la page et qu’ils doivent toucher pour ouvrir le widget. Dans une app de création de contenu web ou un navigateur web, effectuez une capture d’écran de votre fichier HTML principal. Donnez-lui le nom « Default.png » en vous assurant d’utiliser un D majuscule. Lorsque le widget est actif, sa taille correspond à celle du fichier Default.png. Vous pouvez modifier cette taille dans le fichier Info.plist.
• Fichier Info.plist : ce fichier fournit à iBooks Author et à l’Apple Books les informations nécessaires à l’exécution de votre widget. Le nom du fichier doit être Info.plist.

Une fois ces fichiers obligatoires créés, vous pouvez en créer d’autres, facultatifs, tels que des fichiers CSS ou JavaScript. Ajoutez-les ensuite tous à un paquet de widget :

1. Dans le Finder, créez un dossier.
2. Ajoutez les fichiers au nouveau dossier.
3. Renommez le dossier et ajoutez une extension .wdgt à son nom pour créer le paquet contenant le widget. L’icône du dossier devient une icône de widget.
4. Ajoutez votre widget à iBooks Author.

Avant de créer votre paquet, assurez-vous qu’aucun des fichiers à inclure ne comporte de caractère de contrôle dans son nom. Si tel est le cas, vous ne pouvez pas publier le livre dans la librairie de l’Apple Books.

Si vous définissez votre widget pour une lecture automatique, il ne peut pas accéder à Internet. 

N’utilisez pas d’icônes de dossiers personnalisés et évitez les noms de dossiers suivants dans votre widget :

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

Pour optimiser votre widget pour un écran Retina :

• Dans vos fichiers HTML, CSS et JavaScript, utilisez le protocole standard de création de sites web avec graphismes Retina (2x). 
• Incluez, dans votre paquet, un fichier nommé Default@2x.png. Attribuez à ce fichier une résolution deux fois supérieure à celle du fichier Default.png. Vous ne pouvez pas voir ce fichier dans iBooks Author, mais dans l’Apple Books sur un écran Retina.

Découvrez comment optimiser les livres que vous créez avec iBooks Author.

Un fichier Info.plist de base comprend des clés obligatoires et des clés facultatives. Ce tableau répertorie ces clés, leur définition et des exemples de valeurs pour un widget intitulé « Hello World ». 

Le fichier Info.plist complet d’un widget ressemble à ceci : 

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

N’utilisez pas les clés ci-dessous. Leurs fonctionnalités ne sont pas compatibles.

iBooks Author ignore les clés suivantes : 

Il n’est pas possible d’utiliser des fichiers multimédia dotés de l’extension .m4v ou .m4p. Ceux-ci doivent comporter l’extension .mp4 et utiliser les formats suivants :

• Contenu vidéo H.264 : jusqu’à 720p, 60 images par seconde. Niveau High Profile 4.2 avec audio AAC-LC jusqu’à 160 kbit/s, 48 kHz, audio stéréo. Les fichiers vidéo qui s’ouvrent dans iMovie 10 avec l’option HD 720p utilisent ces réglages.
• Contenu vidéo MPEG-4 : jusqu’à 2,5 Mbit/s, 640 x 480 pixels, 30 images par seconde. Niveau Simple Profile avec audio AAC-LC jusqu’à 160 kbit/s par canal, 48 kHz, audio stéréo.

Avec le contenu audio, utilisez le format AAC (8 à 320 kbit/s, stéréo 48 kHz) avec l’extension de fichier .m4a.

Les fichiers vidéo et audio inclus dans un widget HTML ne sont pas protégés par DRM.

Si un fichier audio ou vidéo n’est pas lu dans votre widget dans iBooks Author, visionnez un aperçu sur votre iPhone, iPad ou Mac. Cela vous permettra de savoir comment le fichier sera lu une fois votre livre terminé.

iBooks Author ne prend pas en charge les chaînes ou éléments localisés. Incluez les chaînes de texte dans la langue cible que le lecteur peut voir en ligne.

Un élément, tel qu’une <video>, peut être rogné sur l’un de ses côtés. Cela peut se produire si les dimensions sont plus grandes que l’espace disponible. Recherchez « width:auto » dans le sélecteur #video du langage CSS. Modifiez sa valeur pour refléter les dimensions réelles. Votre widget peut par exemple contenir une vidéo dont les dimensions sont de 960 x 540. Consultez le CSS pour connaître le sélecteur approprié et définissez une largeur et une hauteur correctes :

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

iOS et macOS utilisent des types d’entrée différents. Vous pouvez accepter à la fois les entrées tactiles et celles de la souris lorsque vous créez votre widget HTML pour iBooks Author.

• Découvrez comment développer des actions tactiles sous iOS.
• Découvrez comment développer des actions liées à la souris sous macOS.

Si votre widget HTML est très complexe, vos lecteurs peuvent voir un flash lorsqu’ils l’ouvrent dans l’Apple Books. Pour éviter ce flash, mettez à jour votre widget de façon à indiquer à l’Apple Books quand passer du fichier Default.png au widget HTML :

1. Ajoutez un élément IBNotifiesOnReady défini sur true (vrai) au fichier Info.plist du widget. L’Apple Books sait alors que le widget lui indiquera quand passer au widget HTML.

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

2. Configurez votre widget pour qu’il charge la bibliothèque Apple JavaScript dans la section <head> du fichier HTML :

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

iOS et macOS disposent déjà du fichier AppleWidget.js. Vous n’avez donc pas à l’inclure dans votre paquet.

3. Configurez votre widget pour qu’il informe l’Apple Books lorsque le fichier HTML est initialisé. Dans la section JavaScript de la portion <head> du fichier HTML, appelez :

widget.notifyContentIsReady()

Vous pouvez publier des widgets HTML sur des services web externes uniquement s’ils utilisent des en-têtes Cross-Origin Resource Sharing (CORS) appropriés.