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 toutes les techniques que vous utiliseriez 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 aux apps iBooks Author et iBooks 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.

Conseils pour la création de widgets

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 était le cas, vous ne pourrez pas publier le livre dans l’iBooks Store.

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 vous pouvez le voir dans iBooks 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 Français 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. Celle-ci s’affiche dans les apps iBooks Author et iBooks.
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.
Height 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.
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 <true/> Facultatif Si cette clé est définie sur true (vrai), le widget indique à iBooks 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 toutefois inclure des fichiers vidéo et audio à l’aide des éléments HTML5 <video> et <audio>.
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 iBooks et iBooks Author 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

Il n’est pas possible d’utiliser des fichiers multimédia dotés des extensions « .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é.

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

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;
}

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 iBooks. Pour éviter ce flash, mettez à jour votre widget de façon à indiquer à iBooks 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. iBooks 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 iBooks lorsque le fichier HTML est initialisé. Dans la section JavaScript de la portion <head> du fichier HTML, appelez :

widget.notifyContentIsReady()

Publication sur un service Web externe

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.

Date de publication: