{"id":1930,"date":"2013-01-09T19:14:19","date_gmt":"2013-01-09T18:14:19","guid":{"rendered":"http:\/\/www.ralentirtravaux.com\/le_blog\/?p=1930"},"modified":"2013-04-13T13:02:00","modified_gmt":"2013-04-13T12:02:00","slug":"comment-integrer-des-exercices-du-type-hotpotatoes-dans-ibooks-author","status":"publish","type":"post","link":"https:\/\/www.ralentirtravaux.com\/le_blog\/comment-integrer-des-exercices-du-type-hotpotatoes-dans-ibooks-author\/","title":{"rendered":"Comment int\u00e9grer des exercices du type HotPotatoes dans iBooks Author"},"content":{"rendered":"<p>Je crois bien que c\u2019est la premi\u00e8re fois que je r\u00e9alise un tutoriel. Il y a un d\u00e9but \u00e0 tout !<\/p>\n<p>En fait, comme j\u2019ai re\u00e7u plusieurs messages me demandant comment j\u2019avais r\u00e9alis\u00e9 tel ou tel exercice pour mon manuel, je me suis dit que j\u2019allais expliquer les choses une bonne fois pour toutes. Et je n\u2019aurai, ensuite, plus qu\u2019\u00e0 indiquer le lien \u00e0 chaque fois qu\u2019on me poserait la question. Le droit \u00e0 la fain\u00e9antise m\u00e9rite bien quelques efforts.<\/p>\n<p>Avant de vous expliquer comment je m\u2019y suis pris pour int\u00e9grer certains exercices r\u00e9alis\u00e9s avec <a title=\"HotPotatoes\" href=\"http:\/\/hotpot.uvic.ca\" target=\"_blank\">HotPotatoes<\/a> dans <a title=\"iBooks Author\" href=\"http:\/\/www.apple.com\/ibooks-author\/\" target=\"_blank\">iBooks Author<\/a>, je tiens \u00e0 prendre quelques pr\u00e9cautions d\u2019usage. Je n\u2019ai rien d\u2019un sp\u00e9cialiste. Je bidouille, et, \u00e0 force, le HTML ou le CSS me deviennent plus ou moins familiers. Quant au JavaScript, je suis une v\u00e9ritable quiche dont la nullit\u00e9 crasse ne peut qu\u2019inviter \u00e0 l\u2019humilit\u00e9. Bref, si je dis une b\u00eatise, je vous prierai de ne pas m\u2019en vouloir. Les intentions sont nobles, l\u2019exactitude des renseignements subs\u00e9quents non garantie.<\/p>\n<p>Commen\u00e7ons.<\/p>\n<p><iframe loading=\"lazy\" src=\"http:\/\/www.youtube.com\/embed\/JhyRBBdee0c\" frameborder=\"0\" width=\"853\" height=\"480\"><\/iframe><\/p>\n<p>Si vous n&rsquo;aimez pas les vid\u00e9os, lisez la suite. De toute fa\u00e7on, c&rsquo;est compl\u00e9mentaire.<\/p>\n<p><strong>I &#8211; Utiliser le widget HTML<\/strong><\/p>\n<p><a href=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture.png\" rel=\"lightbox[1930]\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1942\" title=\"Capture\" src=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture-300x186.png\" alt=\"Capture\" width=\"300\" height=\"186\" srcset=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture-300x186.png 300w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture-1024x634.png 1024w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture-483x300.png 483w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture.png 1224w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Si, dans un \u00e9lan d\u2019enthousiasme na\u00eff, vous choisissez de cr\u00e9er un widget HTML, et que vous cherchez \u00e0 y entrer beno\u00eetement un peu de HTML, vous constaterez que rien ne se passe. Vous ne pouvez rien faire. Vous aurez beau cliquer sur le rectangle indiquant HTML, ce sera en vain. Stup\u00e9fait, vous d\u00e9couvrez ensuite que l\u2019inspecteur vous propose de choisir un widget HTML 5. Et, en effet, vous avez la possibilit\u00e9 d\u2019importer quelque chose portant l\u2019extension .wdgt.<\/p>\n<p>J\u2019abandonne dor\u00e9navant le ton un tantinet verbeux que j\u2019ai employ\u00e9 jusqu\u2019\u00e0 pr\u00e9sent, je vous \u00e9pargne la description de l\u2019\u00e9tonnement, l\u2019agacement et le d\u00e9pit que j\u2019ai \u00e9prouv\u00e9s. Je vous passe les phases d\u2019\u00e9nervement et d\u2019abandon, et j\u2019en viens aux r\u00e9sultats auxquels je suis parvenu.<\/p>\n<p><strong>II &#8211; Cr\u00e9er un widget<\/strong><\/p>\n<p>Vous l\u2019aurez compris. Il s\u2019agit de cr\u00e9er un widget, par vous-m\u00eame. Ne croyez pas ceux qui vous disent qu\u2019il faut t\u00e9l\u00e9charger <a title=\"Xcode\" href=\"https:\/\/itunes.apple.com\/fr\/app\/xcode\/id497799835?mt=12\" target=\"_blank\">Xcode<\/a> et tout le tintouin. C\u2019est peut-\u00eatre gratuit, mais c\u2019est tr\u00e8s lourd et parfaitement inutile pour ce que nous allons faire.<\/p>\n<p>En fait, tout ce que vous devez faire consiste \u00e0 cr\u00e9er un dossier le plus simplement du monde. Vous cr\u00e9ez votre dossier, vous lui donnez l\u2019extension .wdgt, et votre dossier change d\u2019apparence. Il devient un widget ! Un widget parfaitement vide, mais un widget.<\/p>\n<p><a href=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture5.png\" rel=\"lightbox[1930]\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1946\" title=\"Capture 5\" src=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture5-300x180.png\" alt=\"Capture 5\" width=\"300\" height=\"180\" srcset=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture5-300x180.png 300w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture5-500x300.png 500w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture5.png 953w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Vous faites alors un clic droit sur ledit widget et vous choisissez Afficher le contenu du paquet. \u00c9videmment, il n\u2019y a rien dedans. Vous allez devoir le \u00abremplir\u00bb.<\/p>\n<p><a href=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture1.png\" rel=\"lightbox[1930]\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1931\" title=\"Capture 1\" src=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture1-300x212.png\" alt=\"Capture 1\" width=\"300\" height=\"212\" srcset=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture1-300x212.png 300w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture1-423x300.png 423w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture1.png 1006w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>III &#8211; Remplir votre widget<\/strong><\/p>\n<p>Que mettre dedans ? Eh bien l\u2019exercice que vous avez r\u00e9alis\u00e9 avec HotPotatoes (pour \u00e7a, je ne vous explique pas comment faire ; il y a d\u2019ailleurs une kyrielle de tutoriels sur le sujet).<\/p>\n<p>Vous allez donc mettre, dans votre widget, le fichier que vous avez cr\u00e9\u00e9 avec HotPotatoes. Quel que soit le nom que vous lui avez donn\u00e9 au moment de sa cr\u00e9ation, vous allez devoir le renommer. Il doit imp\u00e9rativement porter le nom suivant : index.html. Attention, HotPotatoes cr\u00e9e des fichiers portant l\u2019extension .htm, vous devrez la changer pour .html.<\/p>\n<p>Ensuite, vous devez cr\u00e9er un fichier .plist r\u00e9pondant au doux nom de Info.plist dans lequel vous devez \u00e9crire les lignes ci-dessous :<\/p>\n<pre class=\"brush:xml\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\r\n&lt;!DOCTYPE plist PUBLIC \"-\/\/Apple\/\/DTD PLIST 1.0\/\/EN\" \"http:\/\/www.apple.com\/DTDs\/PropertyList-1.0.dtd\"&gt;\r\n\r\n&lt;plist version=\"1.0\"&gt;\r\n&lt;dict&gt;\r\n\t&lt;key&gt;CFBundleDevelopmentRegion&lt;\/key&gt;\r\n\t&lt;string&gt;French&lt;\/string&gt;\r\n\t&lt;key&gt;CFBundleDisplayName&lt;\/key&gt;\r\n\t&lt;string&gt;Exercice&lt;\/string&gt;\r\n\t&lt;key&gt;CFBundleIdentifier&lt;\/key&gt;\r\n\t&lt;string&gt;com.yannhoury-exercice&lt;\/string&gt;\r\n\t&lt;key&gt;CFBundleName&lt;\/key&gt;\r\n\t&lt;string&gt;Exercice&lt;\/string&gt;\r\n\t&lt;key&gt;CFBundleShortVersionString&lt;\/key&gt;\r\n\t&lt;string&gt;1.0&lt;\/string&gt;\r\n\t&lt;key&gt;CFBundleVersion&lt;\/key&gt;\r\n\t&lt;string&gt;1.0&lt;\/string&gt;\r\n\t&lt;key&gt;Height&lt;\/key&gt;\r\n\t&lt;integer&gt;768&lt;\/integer&gt;\r\n\t&lt;key&gt;MainHTML&lt;\/key&gt;\r\n\t&lt;string&gt;index.html&lt;\/string&gt;\r\n\t&lt;key&gt;Width&lt;\/key&gt;\r\n\t&lt;integer&gt;1024&lt;\/integer&gt;\r\n&lt;\/dict&gt;\r\n&lt;\/plist&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>\u00c9videmment, vous voudrez peut-\u00eatre modifier certaines informations, mais, quels que soient les choix que vous ferez, il n\u2019y a pas l\u00e0 de grandes difficult\u00e9s.<\/p>\n<p>Vous devez enfin cr\u00e9er une image devant \u00eatre intitul\u00e9e Default. Elle aura l\u2019extension .png. Cette image est celle qui servira \u00e0 iBooks Author pour afficher votre exercice. Pour ma part, j\u2019ai c\u00e9d\u00e9 \u00e0 la facilit\u00e9 et j\u2019ai cr\u00e9\u00e9 une image avec <a title=\"Pixelmator\" href=\"http:\/\/www.pixelmator.com\" target=\"_blank\">Pixelmator<\/a> sur laquelle j\u2019ai \u00e9crit&#8230; Exercice (ce n\u2019est pas tr\u00e8s original, je sais. Et, en plus, mon image est moche).<\/p>\n<p><a href=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture3.png\" rel=\"lightbox[1930]\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1939\" title=\"Capture 3\" src=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture3-300x241.png\" alt=\"Capture 3\" width=\"300\" height=\"241\" srcset=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture3-300x241.png 300w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture3-373x300.png 373w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture3.png 969w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Est-ce tout ?<\/p>\n<p>Bah ! non.<\/p>\n<p><strong>IV &#8211; Modifier le code de index.html<\/strong><\/p>\n<p>Une des caract\u00e9ristiques de HotPotatoes est de produire des choses assez moches. Quand je r\u00e9alise un exercice avec ce logiciel, je change une partie du CSS afin que ce soit le plus neutre possible. N\u2019\u00e9tant pas un ma\u00eetre de la feuille de style, j\u2019essaie au moins d\u2019aspirer \u00e0 la sobri\u00e9t\u00e9. Je me dis que \u00e7a passera mieux.<\/p>\n<p>Que faut-il faire ?<\/p>\n<p>Pas grand-chose. Il faut ouvrir votre fichier index.html dans un \u00e9diteur de code. J\u2019utilise <a title=\"Coda\" href=\"http:\/\/panic.com\/coda\/\" target=\"_blank\">Coda<\/a>, mais il en existe de nombreux notamment <a title=\"TextWrangler\" href=\"http:\/\/www.barebones.com\/products\/textwrangler\/\" target=\"_blank\">TextWrangler<\/a> qui est gratuit. Un v\u00e9ritable codeur se livrerait \u00e0 un nettoyage en bonne et due forme du code, mais n\u2019\u00e9tant pas un, je me contente de modifier ce qui m\u2019importe (cela dit, la tentation est grande&#8230;).<\/p>\n<p>Pour \u00eatre clair et pr\u00e9cis, vous devez modifier ce qui se trouve entre les balises suivantes :<\/p>\n<pre class=\"brush:css\">&lt;style type=\"text\/css\"&gt;<\/pre>\n<pre class=\"brush:css\">&lt;\/style&gt;<\/pre>\n<p><a href=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4.png\" rel=\"lightbox[1930]\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1940\" title=\"Capture 4\" src=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4-300x185.png\" alt=\"Capture 4\" width=\"300\" height=\"185\" srcset=\"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4-300x185.png 300w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4-1024x633.png 1024w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4-484x300.png 484w, https:\/\/www.ralentirtravaux.com\/le_blog\/wp-content\/uploads\/2013\/01\/capture4.png 1225w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Mais ce n&rsquo;est pas indispensable. \u00c7a l&rsquo;est si vous n&rsquo;\u00eates vraiment pas satisfait de l&rsquo;esth\u00e9tique de votre exercice. Mais pour le faire, il faut conna\u00eetre un peu le CSS (il existe nombre de tutoriels sur le sujet).<\/p>\n<p>Quant \u00e0 moi, j&rsquo;ai chang\u00e9 les propri\u00e9t\u00e9s de quelques s\u00e9lecteurs afin d&rsquo;avoir des marges plus ou moins grandes, j&rsquo;ai \u00e9limin\u00e9 les bordures, etc.<\/p>\n<pre class=\"brush:css\">body{font-family: Georgia;\r\nbackground-color: #ffffff;\r\ncolor: #000000;\r\nwidth: 60%;\r\nmargin:auto;\r\nfont-size: 1em;}\r\n\r\ntable,div,span,td {font-size: 100%;\r\ncolor: #000000;}\r\n\r\ndiv.Titles {margin-top: 0;\r\npadding-top: 3em;\r\npadding-bottom: 1em;\r\npadding-left: 6em;\r\ntext-align: left;\r\ncolor: #ffffff;}\r\n\r\nbutton {font-family: Georgia,Baskerville,Times New Roman,Geneva,Arial,sans-serif;\r\nfont-size: 100%;\r\ndisplay: inline;}\r\n\r\n.ExerciseTitle {font-size: 120%;\r\ncolor: #000;}\r\n\r\n.ExerciseSubtitle {font-size: 120%;\r\ncolor: #000033;}\r\n\r\ndiv.StdDiv {background-color: #ffffff;\r\ntext-align: left;\r\nfont-size: 100%;\r\ncolor: #4c4b4b;\r\npadding-right: 6em;\r\npadding-left: 6em;\r\npadding-bottom: 2em;}<\/pre>\n<p><strong>V &#8211; Pour finir<\/strong><\/p>\n<p>Pour finir, pr\u00e9cisons que tout ne fonctionne pas. Ainsi, <a title=\"Tel exercice\" href=\"http:\/\/www.ralentirtravaux.com\/lettres\/exercices\/sixieme\/phrase\/phrase-1.htm\" target=\"_blank\">tel exercice r\u00e9alis\u00e9 avec HotPotatoes<\/a> ne fonctionne pas. \u00c0 vrai dire, cet exercice ne fonctionne ni dans iBooks Author ni dans Safari. C\u2019est un exercice o\u00f9 l\u2019on peut d\u00e9placer des portions de texte. C\u2019est bien dommage, et si un d\u00e9veloppeur passant par l\u00e0 pouvait m\u2019apporter quelques \u00e9l\u00e9ments de r\u00e9ponse, j\u2019en serais vraiment tr\u00e8s heureux.<\/p>\n<p>En revanche, je viens d\u2019essayer, <a title=\"Les mots crois\u00e9s\" href=\"http:\/\/www.ralentirtravaux.com\/lettres\/exercices\/sixieme\/litterature\/mots-croises-contes.htm\" target=\"_blank\">les mots crois\u00e9s<\/a> g\u00e9n\u00e9r\u00e9s avec HotPotatoes fonctionnent dans iBooks Author.<\/p>\n<p>Vous rencontrerez probablement un tas de petites difficult\u00e9s d\u00e9pendant de ce que vous cherchez \u00e0 obtenir, sachez que si je peux vous aider d\u2019une mani\u00e8re ou d\u2019une autre, je n\u2019h\u00e9siterai pas.<\/p>\n<p>Dernier point. On peut tr\u00e8s bien r\u00e9aliser la m\u00eame chose avec <a title=\"Netquiz Pro\" href=\"http:\/\/www.01net.com\/telecharger\/mac\/Internet\/fiches\/112112.html\" target=\"_blank\">Netquiz Pro<\/a>. Simplement, l\u2019exerciseur g\u00e9n\u00e8re de nombreux fichiers qu\u2019il faut tous mettre dans le m\u00eame dossier comportant l\u2019extension .wdgt. Vous n\u2019aurez pas \u00e0 renommer le principal fichier puisqu\u2019il est d\u00e9j\u00e0 nomm\u00e9 index.html. Et le CSS, si vous d\u00e9sirez le modifier, se trouve (comme il se doit) dans un dossier \u00e0 part.<\/p>\n<p><strong>T\u00e9l\u00e9charger les fichiers dont il est question dans ce tutoriel<\/strong><\/p>\n<ul>\n<li><a title=\"L'exercice r\u00e9alis\u00e9 avec HotPotatoes\" href=\"https:\/\/www.dropbox.com\/s\/yvb8bp4eqcpihpm\/index.html\" target=\"_blank\">L&rsquo;exercice r\u00e9alis\u00e9 avec HotPotatoes<\/a><\/li>\n<li><a title=\"Info.plist\" href=\"https:\/\/www.dropbox.com\/s\/7q3e1gm0hkjwicx\/Info.plist\" target=\"_blank\">Le fichier Info.plist<\/a><\/li>\n<li><a title=\"L'image\" href=\"https:\/\/www.dropbox.com\/s\/g0szj0tsrk161be\/Default.png\" target=\"_blank\" rel=\"lightbox[1930]\">L&rsquo;image Default.png<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Je crois bien que c\u2019est la premi\u00e8re fois que je r\u00e9alise un tutoriel. Il y a un d\u00e9but \u00e0 tout ! En fait, comme j\u2019ai re\u00e7u plusieurs messages me demandant comment j\u2019avais r\u00e9alis\u00e9 tel ou tel exercice pour mon manuel, je me suis dit que j\u2019allais expliquer les choses une bonne fois pour toutes. Et [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1930","post","type-post","status-publish","format-standard","hentry","category-informatique"],"_links":{"self":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/comments?post=1930"}],"version-history":[{"count":25,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1930\/revisions"}],"predecessor-version":[{"id":2240,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1930\/revisions\/2240"}],"wp:attachment":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/media?parent=1930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/categories?post=1930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/tags?post=1930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}