iBooks Author, le logiciel d’Apple pour créer des livres interactifs pour iPad, permet d’ajouter du contenu via des widgets (galeries photo, vidéos, présentation Keynote, questionnaires, 3D, images interactives, html). Pour insérer des widgets html, il faut fournir des widgets réalisés avec Dashcode, le logiciel d’Apple distribué avec les outils développeur. Mais si l’on ne souhaite pas passer par Dashcode, on peut tout à fait créer les bundles soit même, à la main.
Pour commencer, créez votre contenu html, dans un fichier index.html. Pour l’exemple, créons une page qui affiche un bloc rouge avec du texte :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<style type="text/css">
#bloc {
width: 500px;
height: 300px;
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div id="bloc">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo justo, molestie eget, tristique at, gravida sed, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit neque molestie elit. Proin cursus, felis non porttitor vestibulum, elit nibh volutpat metus, nec facilisis quam eros et nisi. In varius metus vitae libero. Nullam lorem pede, laoreet in, scelerisque eget, consequat elementum, ipsum. Fusce eu odio. Nullam at enim. Sed nec ipsum in enim pharetra mollis. Proin augue magna, lacinia nec, venenatis posuere, mollis ac, massa. Curabitur id quam. Sed interdum elit nec eros.
</p>
</div>
</body>
</html>
Afin que notre widget soit valide, il faut ajouter 2 fichiers supplémentaires :
- une capture d’écran de notre widget, nommé « Default.png », qui servira de « poster » pour l’affichage dans notre livre.
- un fichier info.plist qui contient la description de notre bundle.
<?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>Frato testBundle</string> <key>CFBundleIdentifier</key> <string>com.francisthomasr-testBundle</string> <key>CFBundleName</key> <string>testBundle</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>CFBundleVersion</key> <string>1.0</string> <key>Height</key> <integer>540</integer> <key>MainHTML</key> <string>index.html</string> <key>Width</key> <integer>960</integer> </dict> </plist>
Télécharger le fichier Info.plist
Attention, dans ce fichier, le champ « CFBundleName » doit correspondre au nom du dossier qui contiendra les fichiers de votre bundle.
Pour terminer, il ne nous reste plus qu’à créer notre dossier « testBundle », d’y copier nos fichiers (index.html, Default.png et Info.plist), et d’ajouter l’extension « .wdgt » à notre dossier.
Il ne reste plus qu’à insérer notre bundle dans notre livre et à tester.
Pour aller un peu plus loin, il serait sympa que notre bundle soit capable d’aller chercher du contenu sur internet, pour afficher des informations à jour.
Modifions notre fichier « index.html » pour y ajouter la bibliothèque jQuery :
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<script src="jquery-1.7.1.min.js"></script>
<style type="text/css">
#bloc {
width: 500px;
height: 300px;
background-color: red;
padding: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
dataType: 'jsonp',
jsonp: 'jsonp_callback',
url: 'http://www.francisthomas.fr/jsonp.php',
success: function (data) {
$('#bloc').append('<p>'+data.result+'</p>');
},
});
});
</script>
</meta></head>
<body>
<div id="bloc">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo justo, molestie eget, tristique at, gravida sed, nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse hendrerit neque molestie elit. Proin cursus, felis non porttitor vestibulum, elit nibh volutpat metus, nec facilisis quam eros et nisi. In varius metus vitae libero. Nullam lorem pede, laoreet in, scelerisque eget, consequat elementum, ipsum. Fusce eu odio. Nullam at enim. Sed nec ipsum in enim pharetra mollis. Proin augue magna, lacinia nec, venenatis posuere, mollis ac, massa. Curabitur id quam. Sed interdum elit nec eros.
</p>
</div>
</body>
</html>
En utilisant JSONP, notre bundle peut se connecter à un serveur pour télécharger du contenu à jour.
Voici le code du fichier jsonp.php :
$json = json_encode(array('result' => 'Ca marche'));
echo $_GET['jsonp_callback'] . '(' . $json . ');';
J’ai testé avec iBooks sur iPad, tout fonctionne. Cependant, je ne sais pas si cela est autorisé par Apple, donc je ne sais pas si notre livre passerait l’étape de validation pour être diffusé sur l’iBook Store. Cependant, rien ne vous empêche de distribuer votre livre vous même, et de l’ajouter dans iBooks en passant par iTunes. Deuxième problème potentiel, il faudrait gérer le cas ou l’iPad n’est pas connecté à internet.
Quoi qu’il en soit, cela ouvre des perspectives très intéressantes pour ajouter de vrais contenus intéractifs dans les livres numériques.
Mise à jour :
Vous pouvez aussi télécharger un service Automator pour créer vos widgets. Sélectionnez vos fichiers, faites un clic-droit et choisissez « iBooks Bundle » dans le menu service. Cela va créer un fichier « Bundle.wdgt » sur votre bureau.
