iBooks Author, insérer facilement du contenu html dans ses livres

by Frato on janvier 20, 2012

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.

Télécharger les sources

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.

Mise à jour 2 :

Vous pouvez utiliser iBooks Generator pour créer des widgets en 1 clic (Youtube, Vimeo et cartes Google Map avec POI pour l’instant, beaucoup d’autres widgets très bientôt).

6 comments

Je voulais tester tout ça. Parfait cet article.
ça offre pas mal de possibilité.

Bon boulot.

by Yoan De Macedo on 20/01/2012 at 5:59 . #

Grand merci, Frato, et bonne année. Une question à vous poser si vous avez l’envie (et le temps), bien sûr. J’ai fait l’essai pour la partie 1 sans problème mais je voulais une image avec des zones réactives qui déclenche par click de petits fichiers audio lus directement sans quitter l’image. J’ai essayé de bidouiller un widget avec 3 fichiers audio dans le répertoire du widget et un jpg qui vient doubler le png mais lorsqu’on clique sur les zones réactives s’ouvre une page blanche et le mini logo bleu point d’interrogation. Bref, ça ne marche pas… Si vous voulez jeter un coup d’oeil au au code tout pourri quant à ce que j’ai modifié à partir de votre travail de qualité… Hélas, je n’y connais rien:

HTML Test

#bloc {
width: 512px;
height: 428px;
background-color: white;
padding: 0px;
}

Que vous ayez l’envie ou non d’aider un novice, encore merci pour cet article !

by la CdM on 23/01/2012 at 2:20 . #

Je creuse la question, mais mes premiers tests ne fonctionnent pas sur l’iPad, bien que mes fichiers audio soient au bon format (m4a).
En attendant, une alternative pourrait être de passer par une présentation Keynote.

by Frato on 23/01/2012 at 4:38 . #

Can you explain the link jsonp: ‘jsonp_callback’? I understand it is the function that gets called when the call returns but I do not see that function anywhere.

Thanks
Ralph

by Ralph Krausse on 24/01/2012 at 12:03 . #

You’ll find everything you need about JSONP here : http://remysharp.com/2007/10/08/what-is-jsonp/

If you’re making an ajax call on http://www.francisthomas.fr/jsonp.php for example, jquery will append in the querystring : ?jsonp_callback=jQuery171002402425314941925_1327394323912

Then, on the server, you need to use this callback when outputting the json :

echo $_GET['jsonp_callback'] . ‘(‘ . $json . ‘);’;

which produce :

jQuery171002402425314941925_1327394323912({« result »: »Ca marche »});

by Frato on 24/01/2012 at 10:49 . #

Bonjour, Frato, et merci de ta réponse. Oui, j’avais corrigé mon erreur d’extension (m4v en m4a). J’ai également essayé avec keynote. L’inclusion de son est aussi facile qu’avec ibooks author mais je n’ai pas trouvé d’option pour intégrer de zones réactives multiples sur une image pour déclenchement de son par click. Je continue à chercher avec mes faibles capacité en la matière. Mais si je trouve un moyen, je te l’écrirai.

Encore merci de t’être penché sur la question. Bonne journée à toi, Frato (heure locale Tahiti 3:45)

by la CdM on 24/01/2012 at 3:47 . #

Leave your comment

Required.

Required. Not published.

If you have one.