Création de widgets HTML5 pour iBooks Author
Découvrez comment créer des widgets HTML5 que vous pouvez utiliser dans les livres que vous créez dans 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 :
Dans le Finder, créez un dossier.
Ajoutez les fichiers au nouveau dossier.
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.
Ajoutez votre widget à iBooks Author.
Conseils pour la création de widgets
Avant de créer votre paquet de widget, 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 pourrez 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.
Fichier Info.plist
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 ».
Clé | Exemple de valeur | Obligatoire | Définition |
CFBundleDevelopmentRegion | Anglais | Facultatif | Chaîne indiquant la région d’origine du paquet. Il s’agit généralement de la langue maternelle de la personne créant le paquet. |
CFBundleDisplayName | Hello World | Obligatoire | Chaîne comprenant le nom du widget. Cela s’affichera dans iBooks Author et dans l’Apple Books. |
CFBundleIdentifier | com.apple.widget.HelloWorld | Obligatoire | Chaîne identifiant le widget au format de domaine inverse. |
CFBundleName | Hello World | Facultatif | Chaîne comprenant le nom du widget. Ce nom doit correspondre à celui du paquet constituant le widget qui se trouve dans le Finder (sans l’extension .wdgt). |
CFBundleShortVersionString | 1.0 | Facultatif | Chaîne indiquant le numéro de version raccourci du widget. Sa valeur est généralement identique à celle de la clé CFBundleVersion. |
CFBundleVersion | 1.0 | Facultatif | Chaîne indiquant le numéro de version du widget. |
Taille | 768 | Facultatif | Nombre indiquant la hauteur en pixels de votre widget. Si ce nombre n’est pas renseigné, la hauteur du fichier Default.png est utilisée. |
MainHTML | HelloWorld.html | Obligatoire | Chaîne indiquant le nom du fichier HTML mettant en œuvre votre widget avec la clé facultative Width1024 |
Width | 1024 | Facultatif | Nombre indiquant la largeur en pixels du widget. Si ce nombre n’est pas renseigné, la largeur du fichier Default.png est utilisée. |
IBNotifiesOnReady | Facultatif | Si cette clé est définie sur true (vrai), le widget indique à l’Apple Books le moment où il doit passer de l’affichage du fichier Default.png à l’affichage du widget HTML en cours d’exécution. |
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>
Restrictions et limitations associées aux clés
N’utilisez pas les clés ci-dessous. Leurs fonctionnalités ne sont pas compatibles.
Clé | Description |
AllowFileAccessOutsideOfWidget | Les widgets des livres créés à l’aide d’iBooks Author n’ont pas accès aux fichiers du système de fichiers général. |
AllowFullAccess | Abréviation pour une liste d’autres clés d’accès, certaines d’entre elles n’étant pas compatibles. |
AllowInternetPlugins | Les modules Internet, tels que Flash, ne sont pas disponibles dans les livres créés avec iBooks Author. Vous pouvez ajouter des fichiers vidéo et audio en HTML5 Les fichiers vidéo et audio inclus dans un widget HTML ne sont pas protégés par DRM. |
AllowJava | Les widgets des livres créés dans iBooks Author ne peuvent pas inclure de contenu Java. |
AllowSystem | Les widgets des livres créés dans iBooks Author ne peuvent pas accéder aux commandes système. |
Plugin | Les widgets des livres créés dans iBooks Author ne peuvent pas inclure de composant de module Cocoa. |
iBooks Author ignore les clés suivantes :
Clé | Description |
CloseBoxInsetX | Les widgets dans iBooks Author et dans l’Apple Books ne comportent pas de décoration de fermeture. |
CloseBoxInsetY | |
Fonts | Les widgets d’iBooks Author ne peuvent pas utiliser les polices intégrées. |
Configuration requise en matière de fichiers vidéo et audio
Les fichiers multimédias dotés de l’extension .m4v ou .m4p ne sont pas pris en charge. Ceux-ci doivent comporter l’extension .mp4 et utiliser les formats suivants :
Contenu vidéo H.264 : jusqu’à 720p, 60 images par seconde. Profil de qualité 4.2 avec audio AAC-LC jusqu’à 160 kbit/s, 48 kHz, audio stéréo. Ces réglages s’appliquent également aux fichiers vidéo compatibles avec iMovie 10 et l’option HD 720p.
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.
Pour un 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é.
Localisation
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.
Réparation des éléments rognés
Des éléments tels que
#video { width: 960; height: 540; }
Développement pour iOS et macOS
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.
Éviter le flash à l’ouverture du widget HTML
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>
2. Configurez votre widget de manière à charger la bibliothèque JavaScript d’Apple dans une
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 le code JavaScript se trouvant dans la
widget.notifyContentIsReady()
Publication sur un service web externe
Vous pouvez publier des widgets HTML sur des services web externes uniquement s’ils utilisent les en-têtes Cross-Origin Resource Sharing (CORS) appropriés.
