iBooks Author : à propos de la création de widgets HTML

Vous pouvez créer des widgets HTML5 pouvant être utilisés dans des livres développés à l’aide d’iBooks Author.

iBooks Author prend en charge les widgets HTML5 (avec l’extension .wdgt).

Pour créer un widget HTML pouvant être utilisé avec iBooks Author, utilisez un éditeur de texte ou une application de création de contenu Web afin de créer les fichiers suivants :

  • Fichier HTML principal : partie principale du widget. Nommez ce fichier comme vous le souhaitez ; cependant, son extension doit être « .html ». Vous pouvez utiliser les langages CSS et JavaScript dans ce fichier, ou ajouter des fichiers .css ou .js au paquet constituant le widget et faire en sorte que le fichier HTML principal les charge. Ces fichiers vous permettent d’utiliser toute méthode ou astuce de conception se rapportant à la création de pages Web. En règle générale, HTML définit la structure du widget, CSS son apparence, et JavaScript prend en charge son interactivité. 
  • Default.png : cette image est celle qui apparaît sur la page et que les utilisateurs doivent toucher pour ouvrir le widget. Vous devez la nommer « Default.png », avec un D majuscule. Le meilleur moyen de créer un tel fichier est de prendre une capture d’écran de votre fichier HTML principal alors que celui-ci est en cours d’exécution dans une application de création de contenu Web ou dans un navigateur Web. Lorsque votre widget est actif, sa taille correspond à celle du fichier Default.png, à moins que vous n’indiquiez une taille différente dans le fichier Info.plist.
  • Info.plist : ce fichier fournit aux applications iBooks Author et iBooks les informations nécessaires à l’exécution de votre widget. Vous devez le nommer « Info.plist ». Reportez-vous aux détails et à l’exemple ci-dessous. 

Une fois les trois fichiers nécessaires (et accessoirement, les fichiers facultatifs comme CSS ou JavaScript) créés, rassemblez-les dans un paquet constituant le widget :

  1. Créez un dossier à l’aide du Finder et ajoutez-y les fichiers.
  2. Renommez le dossier et ajoutez-y l’extension .wdgt. Le paquet constituant le widget est ainsi créé, et l’icône de dossier est remplacée par une icône de widget.

Votre widget peut désormais être ajouté à iBooks Author.

Remarques

  • Si votre livre inclut des widgets HTML contenant des fichiers dont le nom comporte des caractères de contrôle, il ne peut pas être publié dans l’iBooks Store. Avant de créer votre paquet pour le widget, assurez-vous qu’aucun des noms de fichiers contenus dans le paquet ne comporte ce type de caractères. N’utilisez pas d’icônes de dossier personnalisées.
  • Évitez d’utiliser, dans votre paquet, des dossiers contenant les noms de fichiers suivants :
    • Ressources/
    • Support Files/Resources/
    • Contents/Resources/
  • Si vous créez du contenu destiné aux iPad et aux ordinateurs Mac dotés d’un écran Retina :
    • Suivez le protocole standard de création de sites Web avec graphismes Retina (2x) lors du chiffrement de vos fichiers HTML, CSS et JavaScript. 
    • Votre paquet constituant le widget doit désormais comporter un fichier Default@2x.png, présentant une résolution deux fois supérieure à celle du fichier Default.png. Ce fichier ne peut pas être lu dans iBooks Author. Il s’affiche uniquement dans l’application iBooks, sur les iPad ou les ordinateurs Mac dotés d’un écran Retina. 
  • Si vous souhaitez que votre widget occupe l’intégralité de l’écran lorsque vous effectuez un zoom avant, attribuez des dimensions de 768 x 1 024 pixels au fichier Default.png et de 1 536 x 2 048 pixels au fichier Default@2x.png. Si vous préférez que votre widget occupe seulement une partie de l’écran, attribuez les dimensions de votre choix au fichier Default.png (par exemple, 600 x 900) et doublez-les pour le fichier Default@2x.png.
  • Découvrez comment optimiser des livres développés dans iBooks Author.

Info.plist

Un fichier Info.plist de base comprend des clés obligatoires et des clés facultatives. Ces clés, accompagnées de leur définition et de valeurs d’exemple pour le widget « Hello World », sont répertoriées ci-dessous : 

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 Champs obligatoires. Chaîne comportant le nom du widget qui s’affichera dans iBooks et iBooks Author.
CFBundleIdentifier com.apple.widget.HelloWorld Champs obligatoires. Chaîne identifiant le widget au format de domaine inverse.
CFBundleName Hello World Facultatif. Chaîne comprenant le nom de votre 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. Il s’agit souvent de la même valeur que CFBundleVersion.
CFBundleVersion 1.0 Facultatif. Chaîne indiquant le numéro de version du widget.
Hauteur 768 Facultatif. Nombre indiquant la hauteur en pixels de votre widget. Si ce nombre n’est pas renseigné, la hauteur de Default.png est utilisée.
MainHTML HelloWorld.html Champs obligatoires. Chaîne indiquant le nom du fichier HTML prenant en charge votre widget.
Largeur 1 024 Facultatif. Nombre indiquant la largeur en pixels de votre widget. Si ce nombre n’est pas renseigné, la largeur de Default.png est utilisée.
IBNotifiesOnReady <true/> Facultatif. Si cette clé est définie sur vraie, 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. 

Les informations complètes, incluses dans le fichier Info.plist et se rapportant à un widget, se présentent de la manière suivante :

<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

Certaines fonctionnalités ne sont pas compatibles. Vous ne devez pas utiliser les clés suivantes :

AllowFileAccessOutsideOfWidget Les widgets contenus dans des livres eux-mêmes 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 audio et vidéo par l’intermédiaire des éléments <vidéo> et <audio> HTML5.
Remarque : les vidéos et les fichiers audio des widgets 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 :

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 pour la lecture de fichiers audio et vidéo

Il n’est pas possible d’utiliser des fichiers multimédia dotés des extensions « .m4v » ou « .m4p ». 

Nous vous recommandons d’utiliser un codec vidéo H.264 dans un encapsulage MPEG4 avec un fichier d’extension .mp4.

Pour l’audio, il est recommandé d’utiliser le format audio AAC dans un encapsulage MPEG4 avec un fichier d’extension m4a.

Remarque : les fichiers audio et vidéo contenus dans des paquets widget HTML ne sont pas protégés par DRM.

Remarque : il arrive que certains fichiers audio ou vidéo des widgets HTML fonctionnent dans iBooks, mais pas dans iBooks Author. Si vous ne parvenez pas à lire un fichier audio ou vidéo de votre widget à partir d’iBooks Author, essayez de le prévisualiser sur un iPad ou sous OS X Mavericks. Cela devrait vous permettre de savoir comment le fichier sera lu une fois votre livre terminé.

Localisation

Les segments ou éléments localisés ne sont pas pris en charge dans iBooks Author. C’est pourquoi le texte visible par l’utilisateur doit être inclus en ligne dans la langue cible.

Éléments rognés

Il arrive qu’un élément (par exemple, une <vidéo>) soit rogné d’un côté. Ceci peut s’expliquer par le fait que la taille de cet élément dépasse celle de l’écran. Recherchez « width:auto » dans le sélecteur #vidéo du langage CSS. Modifiez sa valeur pour refléter les dimensions réelles. Par exemple, si votre widget contient une vidéo mesurant 960 x 540 pixels, utilisez le sélecteur CSS approprié et saisissez les valeurs de hauteur et de largeur correctes :

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

Développement sous iOS et OS X Mavericks

iOS et OS X utilisent des types d’entrée fondamentalement différents. Par conséquent, vous devez vous assurer que les widgets HTML créés pour iBooks Author gèrent aussi bien les actions tactiles que les actions liées à la souris, si vous souhaitez recourir à des types de contrôles non pris en charge par les gestes standard.

 

Ouverture du widget HTML

Selon le degré de complexité de votre widget HTML, vos lecteurs peuvent apercevoir un flash durant l’initialisation HTML, lorsqu’ils ouvrent le widget dans iBooks. Afin d’éviter ce flash, modifiez votre widget pour qu’il 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.

Pour activer cette fonctionnalité facultative, appliquez les trois modifications suivantes :

  1. Ajoutez un élément IBNotifiesOnReady défini sur Vrai dans le fichier info.plist du widget, afin qu’iBooks sache que ce widget va lui indiquer le moment où il doit passer à l’affichage du widget HTML en cours d’exécution :
    <key>IBNotifiesOnReady</key><true/>
  2. Paramétrez 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>
    Remarque : AppleWidget.js est déjà présent sur l’iPad, et vous ne devez pas l’inclure dans le paquet constituant votre widget.

  3. Paramétrez votre widget pour qu’il indique à iBooks quand le fichier HTML est initialisé. Ainsi, iBooks peut passer de l’affichage du fichier Default.png à l’affichage du widget HTML en cours d’exécution grâce à la commande ci-dessous (s’applique également au langage JavaScript, dans la section HEAD du fichier HTML).
    widget.notifyContentIsReady()

Important : vous devez appliquer l’ensemble de ces trois modifications si vous souhaitez éviter que le flash se produise. Vous devez suivre toutes les instructions pour que cela fonctionne correctement.

Publication sur des services Web externes

Les widgets HTML peuvent uniquement être publiés sur des services Web externes si ces derniers ont adopté les en-têtes CORS (Cross-Origin Resource Sharing) appropriés.

Date de publication: