L’an dernier – un an jour pour jour – Ralentir travaux avait déjà connu un léger lifting : le code était devenu du HTML 5/CSS 3, l’apparence du site avait été revue, quelques ajouts avaient été faits (comme la possibilité de commenter, par exemple).
C’est qu’il s’agit de procéder par petites retouches, au fur et à mesure, sans grande révolution. Il n’y a pas de grands chantiers quinquennaux, mais une évolution permanente, rendant, je l’espère, le site plus agréable à utiliser.
Design extensible
L’an dernier, j’avais eu un seul regret, c’était de ne pas avoir réalisé un design extensible. C’est désormais chose faite. Il me semble que cela évite d’avoir deux versions du site, qui serait l’une pour les ordinateurs, l’autre pour les appareils mobiles (tels que les tablettes ou les téléphones).
Or je déteste cette double interface. Cela encore plus quand la version «normale» du site, surchargée d’informations et de pubs, correspond à une version mobile anémique. Surcharge d’un côté, uniformité vidée de l’autre, il y a des designers qui me semblent démériter.
Exemple de page
Lisibilité et interface épurée
J’ai donc privilégié une interface unique, simple, épurée (j’ai déjà clamé mon goût pour Instapaper). Hormis le header et le footer, le site est composé d’une page blanche et du texte. C’est un texte dont la police est passée à 1.1em (à ce sujet, ce site m’a bien aidé à convertir les pixels en em ou en %).
Si, la première fois que j’ai lu que les sites web devraient adopter de telles dimensions, j’ai été quelque peu dubitatif, je n’ai, à présent, plus la moindre incertitude. On est tout d’abord étonné ; on ne s’en passe plus par la suite. Il n’y a aucune raison de choisir une police trop petite, à moins que l’on ne cherche à faire comme beaucoup de monde, c’est-à-dire des sites peu lisibles. Mais peut-être ne suis-je qu’un quarantenaire aux yeux fatigués…
Exemple de page avec image
J’en ai profité pour agrandir la taille des images dont la plupart me semblent désormais bien petites en regard de la police de caractère. Je me suis efforcé de légender chaque image. Par ailleurs, un cadre qui s’insère dans le corps du texte permet d’y glisser un texte indépendant apportant diverses informations. Enfin, je tenais à ajouter une citation du texte dans le corps de l’article sans avoir à répéter le texte. Cet article propose une solution assez élégante à mettre en place grâce au HTML 5 (attribut data-pullquote).
Cette page ou celle-ci peuvent donner un bon aperçu des transformations apportées à Ralentir travaux.
Les lecteurs les plus perspicaces remarqueront que le design de Ralentir travaux a été quelque peu influencé par les templates proposés par Apple dans iBooks Author.
Quoi d’autre ?
Un tas de choses. Le problème quand on modifie un truc, c’est qu’on bute sur mille et une choses à adapter, modifier, transformer… Toujours est-il que j’en ai profité pour refaire le moteur de recherche (made in Google) qui buguait.
La page d’accueil a été refaite également : le menu en accordéon ne me plaisait que moyennement (il n’était pas toujours très agréable à utiliser). Et un flux RSS en PHP affiche maintenant les articles les plus récents (merci à l’auteur de cet article).
Je ne sais pas si vous l’aviez remarquée, mais une page consacrée aux manuels a été ajoutée. Elle fait le point sur les parutions sur iPad. Elle fait la somme des articles publiés sur ces manuels.
Dons
Enfin, un bandeau (que vous pouvez faire disparaître) invite le généreux visiteur que vous êtes à faire un don si vous souhaitez participer aux frais d’hébergement, d’achat du nom de domaine, etc.
Ce chapitre est ternaire. C’est le troisième, il évoque la guerre de Troie (pardon pour le pauvre jeu de mots), il propose l’étude de trois auteurs (Homère, Virgile et Ovide) et il représente, grosso modo, avec les deux autres, le tiers du manuel.
De surcroît, c’est vraiment un chapitre qui me tient à cœur, car pour qu’il voie le jour, il a fallu que j’adapte des traductions tombées dans le domaine public. Ce chapitre a donc demandé un gros travail de recherche, de lecture, d’élagage et de simplification. Je ne sais pas si j’y suis parvenu. En tout cas, je tenais tout particulièrement à ce que les élèves aient accès à quelques-uns des grands auteurs de l’Antiquité. Ce sont des textes qui sont étudiés pour eux-mêmes et non instrumentalisés pour permettre la découverte de tel ou tel point de grammaire. Du renoncement de Zeus à Thétis, en passant par la pomme d’or, de la haine d’Achille souhaitant dévorer Hector tout cru jusqu’à la fuite d’Énée portant son père sur ses épaules, voilà l’histoire que je voulais faire découvrir.
Cependant, ce chapitre est l’occasion de travailler différents points comme le sujet, mais aussi le groupe nominal, ainsi que les déterminants et les pronoms.
Voilà ce que contient, en gros, ce nouveau chapitre.
Le prochain chapitre portera sur L’Odyssée, et j’ai hâte de le publier, car le travail a déjà commencé.
Télécharger les chapitres du manuel de sixième (cliquez sur les images) :
En principe, lorsque vous souhaitez intégrer une vidéo dans votre site ou votre blog, vous copiez et collez une portion de code, et le tour est joué. Ce sont quelques lignes que vous obtenez en cliquant sur Partage, et qui ressemblent à ça :
Il n’en va pas de même avec iBooks Author. Vous ne pouvez pas simplement copier et coller le code qui vous a été donné. Il faut réaliser un widget.
Souvenez-vous, je vous avais expliqué comment importer des exercices interactifs que vous aviez obtenus avec un exerciseur du type HotPotatoes. La méthode est sensiblement la même. Vous pourrez alors intégrer dans iBooks Author n’importe quelle vidéo, que celle-ci provienne de YouTube, DailyMotion, Vimeo ou l’Ina… Évidemment, on se dira qu’on aura plus vite de recourir aux services d’un site comme Bookry, mais il faut s’inscrire et la création du widget qui nous intéresse ne concerne que les seuls YouTube et Vimeo.
Pour commencer :
Tout d’abord, créez un dossier. Vous pouvez, par exemple, lui donner le nom de votre vidéo. Dans notre cas, ce sera verbe. On obtient donc un dossier intitulé verbe.
Créer un fichier HTML :
Dans ce dossier, placez un fichier HTML. Celui-ci doit impérativement s’appeler Main et porter l’extension .html. Votre fichier sera donc Main.html.
Dans ce fichier, placez le code suivant :
Entre les balises title, mettez le titre de votre vidéo. Entre les balises body, placez le code obtenu sur le site de partage de vidéo. Dans notre cas, cela donnera ceci :
Créer une image :
À présent, créez une image de la dimension que vous voulez. Cette image va permettre d’afficher votre vidéo dans votre livre fait avec iBooks Author. Ce peut être un simple rectangle affichant le titre de votre vidéo. Vous préférerez probablement mettre une image provenant du film. Pour cela, affichez votre vidéo en plein écran et faites une capture d’écran.
Placez votre image dans le dossier verbe créé au tout début de ce tutoriel. Attention votre image doit s’appeler Default et être au format PNG. Votre image s’appellera donc Default.png.
Créer un fichier PLIST :
Dernière étape avant import dans iBooks Author, créez un fichier PLIST. Pour cela, copiez ce code :
Ce code doit figurer dans un fichier intitulé Info et portant l’extension PLIST. Votre fichier sera donc Info.plist.
L’essentiel à retenir de ce fichier XML est qu’il délivre un certain nombre d’informations à propos de votre vidéo. Les plus importantes étant les dimensions de cette vidéo. Soyez sûr que ces dimensions correspondent à celles qui se trouvent dans votre fichier PLIST. Ma vidéo est de 480 par 360. Ce sont des dimensions qui m’ont été données par YouTube (naturellement, j’aurais pu en obtenir d’autres). Elles doivent donc figurer dans le fichier PLIST.
Pour finir :
Maintenant que vous avez les 3 fichiers Main.html, Default.png et Info.plist dans votre dossier verbe, il vous reste une chose à faire.
Il faut ajouter l’extension WDGT à votre dossier qui sera désormais un widget intitulé verbe.wdgt. Il n’y a plus rien à faire si ce n’est glisser et déposer le widget dans iBooks Author. Branchez votre iPad. Cliquez sur Aperçu et vérifiez que votre vidéo fonctionne.
Si quelque chose ne fonctionne pas, si vous désirez modifier votre widget, il faudra faire un clic droit et choisir Afficher le contenu du paquet. Vous pourrez alors modifier le fichier HTML, PLIST ou PNG.
Je me suis réveillé ce samedi matin avec une bonne surprise : un message m’annonçant la publication du chapitre II du manuel de sixième. Cela aura donc pris moins d’une semaine ! Alléluia !
Ce deuxième chapitre est consacré à la Genèse, au tout début de la Genèse. On commence avec la création du monde pour terminer avec la tour de Babel. Naturellement, ça a été difficile de faire des choix – un véritable crève-cœur – parce qu’avec la Bible, on pourrait imaginer des milliers de chapitres différents. Si l’on n’avait des contraintes de temps ou de programme, j’aurais volontiers suivi la trame narrative du film de John Huston. Cela m’aurait permis d’évoquer Abraham et différentes histoires comme celle de Sodome et Gomorrhe.
De manière générale, je voulais, un peu à la manière de Victor Hugo, présenter la Bible comme un fabuleux recueil d’histoires, de contes, de légendes, etc., montrer des temps immémoriaux où l’homme vivait en compagnie de Dieu avant d’être chassé de l’Éden, un temps où l’homme vivait des centaines d’années, un temps où l’on pouvait rencontrer des géants – les Néphilim – les hommes forts du temps jadis (pour dire la vérité, je les ai oubliés ceux-là).
De toute façon, je pense publier à l’avenir des variantes du chapitre II. Ce seront des chapitres bis. Je pourrais alors en consacrer un à L’Exode, par exemple. Le chapitre II n’est donc pas terminé, et ne le sera jamais, un peu comme les lettres permutant de la Torah.
Reste que je suis vraiment très heureux de poursuivre la publication de ce manuel de sixième, lequel, contrairement à celui de quatrième, voit le jour chapitre après chapitre, progressivement, au fur et à mesure de mes envies, de mes découvertes. Et plus j’avance dans ce travail, plus j’en arrive à la conclusion que le numérique nous permet d’accéder à la beauté des choses. J’en veux pour preuve ce tableau de Brueghel, La tour de Babel, que l’on peut télécharger, pour peu qu’une image de 200 Mo ne vous fasse pas peur. Et même si iBooks Author ne vous permet pas d’afficher une image d’une telle résolution, 5000 pixels par 5000 pixels, sur un iPad, c’est déjà très beau !
Il me reste à vous souhaiter une bonne lecture.
Pendant ce temps-là, j’irai poursuivre ce manuel, qui se poursuivra par la guerre de Troie. Ce sera le chapitre trois (oui, je sais, le jeu de mots est pitoyable).
Le manuel de sixième (chapitre I) a connu une petite mise à jour. Ont été ajoutés, entre autres, 1 exercice et deux screencasts.
Pour accompagner cette première mise à jour, voici une
petite vidéo exposant les différentes ressources offertes par un manuel numérique.
P.-S. L’heure tardive, un mac vieillissant et soufflant comme un damné ainsi qu’un nez bouché vous inviteront, je l’espère, à l’indulgence.
L’accord sur la numérisation et la diffusion du fond de la BNF, la monétisation qui doit en découler ne laissent pas de m’inquiéter. Cela devrait d’ailleurs inquiéter tout utilisateur d’internet, mais l’enseignant que je suis est doublement inquiet. Il l’est, bien sûr, en tant que citoyen (auquel, par ailleurs, les questions de neutralité, d’accès à la culture importent), il l’est en tant que professionnel de l’éducation.
Voici pourquoi.
Sans Wikipédia, sans Gallica, sans tous ces sites qui donnent accès librement à la littérature, aux illustrations, aux manuscrits, etc., je retourne à ce qui est, pour moi, l’âge de pierre de ma profession : les années 90 où il fallait recopier à la main des textes, des contes entiers, les scanner, utiliser un logiciel de reconnaissance de caractères puis les corriger. Aujourd’hui, cela n’est plus la peine, car il me suffit de copier et de coller un extrait de tel ou tel auteur, de le relire et, éventuellement, de corriger telle ou telle erreur. Je gagne alors un temps précieux. Imaginez le temps qu’il faut pour recopier ne serait-ce qu’un conte de Voltaire !
J’ai trouvé un autre moyen de jouir (professionnellement) de Wikipédia ou Gallica. Ai-je à faire un exercice sur les propositions subordonnées relatives ? Voudrais-je quelques exemples littéraires de bon aloi qui en imposeront davantage que mes petites phrases inventées pour l’occasion ? Vais-je relire des milliers de pages pour trouver le bon exemple littéraire ? Que nenni ! On ouvre, dans Gallica ou Wikipédia une page de Chateaubriand, de Zola ou de n’importe quel auteur, on fait un cmd (ou clic) + f, on tape quelques mots clefs et l’on trouve tout ce que l’on cherche en un clin d’œil. Des centaines de propositions apparaissent surlignées. Combien de temps, d’heures, de jours ai-je gagnés en ayant à ma disposition tout ceci?
Ce temps, entre autres, m’a permis, par exemple, de concevoir des manuels libres et gratuits. D’ailleurs, ces manuels ont vu le jour parce que le partage de la culture, le libre (Aaron Swartz, je te salue au passage) m’ont permis d’accéder à tout un pan de notre culture, celui-là même qui était auparavant enfermé dans les coffres des grandes bibliothèques, oublié, car ne faisant plus l’objet de publication peu rentable, exposé dans des musées lointains ou des collections privées, etc. Privés de tout cela, mes manuels ressembleraient, après en avoir accouché dans la douleur du scanner et de l’OCR, à de vagues et exsangues photocopies dépourvues d’illustrations.
Or Apple m’avait déjà signifié que les mots «libre» et «gratuit» n’étaient pas les bienvenus sur la couverture d’un livre exposé sur son store. Très bien. Faut-il que dorénavant il n’y ait plus rien de libre ni de gratuit ? Que les incunables (vous savez ceux qui sont «antérieurs à 1500». Appréciez la tautologie) soient commercialisés ? bardés de DRM ? Savez-vous ce que cela signifie pour tous ces pays – je pense notamment à certains pays d’Afrique, du Maghreb – qui bénéficient gratuitement et librement de cette somme ?
Bien des fois, lors de l’élaboration de mes manuels, je me suis dit que le droit d’auteur avait été inventé, non pas pour nourrir les ayants droit, mais pour engraisser des éditeurs confisquant des œuvres d’auteurs morts depuis près de cent ans (un vrai conte !). Mais ceux qui le sont depuis un demi-millénaire, faut-il qu’ils le soient également ? Faudra-t-il payer pour les lire ? En ce cas, il faudra faire ce qu’a fait Aaron Swartz, il faudra piller le catalogue et le mettre en ligne. Il doit bien y avoir des littéraires chez les hackers.
Les élèves et moi allons donc faire un galop d’essai, et ce sera avec les propositions subordonnées relatives.
J’avais déjà un cours sur la proposition subordonnée relative. En fait, j’en ai plusieurs sur Ralentir travaux, mais j’avais préparé ce cours sur la proposition il y a peu, car il me semblait plus simple à aborder pour mes élèves de cinquième. J’y ai aujourd’hui ajouté une vidéo que je viens de réaliser. C’est un «screencast» c’est-à-dire une petite vidéo dans laquelle on peut suivre mes explications en voyant ce que j’écris sur mon ordinateur.
L’idée est de varier les supports pour permettre à tous de comprendre telle ou telle notion, à son rythme et en levant tout blocage éventuel. Et si un élève achoppe quelque part, pourquoi ne me contacterait-il pas par mail ou Skype ?
Ainsi le temps scolaire sera véritablement occupé à faire quelque chose (ne serait-ce que des exercices) et non pas à écouter quelqu’un… ou surtout à ne pas l’écouter. C’est d’ailleurs le grand miracle numérique que de permettre d’appuyer sur pause et de revenir en arrière quand votre esprit, absorbé qu’il est par mille et une choses, s’est mis à battre la campagne. Dans la réalité, la sinistre réalité, c’est trop tard. «Il fallait écouter», déclare alors l’enseignant pressé. Mais, ça, c’est fini, non ?
Je crois bien que c’est la première fois que je réalise un tutoriel. Il y a un début à tout !
En fait, comme j’ai reçu plusieurs messages me demandant comment j’avais réalisé tel ou tel exercice pour mon manuel, je me suis dit que j’allais expliquer les choses une bonne fois pour toutes. Et je n’aurai, ensuite, plus qu’à indiquer le lien à chaque fois qu’on me poserait la question. Le droit à la fainéantise mérite bien quelques efforts.
Avant de vous expliquer comment je m’y suis pris pour intégrer certains exercices réalisés avec HotPotatoes dans iBooks Author, je tiens à prendre quelques précautions d’usage. Je n’ai rien d’un spécialiste. Je bidouille, et, à force, le HTML ou le CSS me deviennent plus ou moins familiers. Quant au JavaScript, je suis une véritable quiche dont la nullité crasse ne peut qu’inviter à l’humilité. Bref, si je dis une bêtise, je vous prierai de ne pas m’en vouloir. Les intentions sont nobles, l’exactitude des renseignements subséquents non garantie.
Commençons.
Si vous n’aimez pas les vidéos, lisez la suite. De toute façon, c’est complémentaire.
I – Utiliser le widget HTML
Si, dans un élan d’enthousiasme naïf, vous choisissez de créer un widget HTML, et que vous cherchez à y entrer benoîtement 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éfait, vous découvrez ensuite que l’inspecteur vous propose de choisir un widget HTML 5. Et, en effet, vous avez la possibilité d’importer quelque chose portant l’extension .wdgt.
J’abandonne dorénavant le ton un tantinet verbeux que j’ai employé jusqu’à présent, je vous épargne la description de l’étonnement, l’agacement et le dépit que j’ai éprouvés. Je vous passe les phases d’énervement et d’abandon, et j’en viens aux résultats auxquels je suis parvenu.
II – Créer un widget
Vous l’aurez compris. Il s’agit de créer un widget, par vous-même. Ne croyez pas ceux qui vous disent qu’il faut télécharger Xcode et tout le tintouin. C’est peut-être gratuit, mais c’est très lourd et parfaitement inutile pour ce que nous allons faire.
En fait, tout ce que vous devez faire consiste à créer un dossier le plus simplement du monde. Vous créez votre dossier, vous lui donnez l’extension .wdgt, et votre dossier change d’apparence. Il devient un widget ! Un widget parfaitement vide, mais un widget.
Vous faites alors un clic droit sur ledit widget et vous choisissez Afficher le contenu du paquet. Évidemment, il n’y a rien dedans. Vous allez devoir le «remplir».
III – Remplir votre widget
Que mettre dedans ? Eh bien l’exercice que vous avez réalisé avec HotPotatoes (pour ça, je ne vous explique pas comment faire ; il y a d’ailleurs une kyrielle de tutoriels sur le sujet).
Vous allez donc mettre, dans votre widget, le fichier que vous avez créé avec HotPotatoes. Quel que soit le nom que vous lui avez donné au moment de sa création, vous allez devoir le renommer. Il doit impérativement porter le nom suivant : index.html. Attention, HotPotatoes crée des fichiers portant l’extension .htm, vous devrez la changer pour .html.
Ensuite, vous devez créer un fichier .plist répondant au doux nom de Info.plist dans lequel vous devez écrire les lignes ci-dessous :
Évidemment, vous voudrez peut-être modifier certaines informations, mais, quels que soient les choix que vous ferez, il n’y a pas là de grandes difficultés.
Vous devez enfin créer une image devant être intitulée Default. Elle aura l’extension .png. Cette image est celle qui servira à iBooks Author pour afficher votre exercice. Pour ma part, j’ai cédé à la facilité et j’ai créé une image avec Pixelmator sur laquelle j’ai écrit… Exercice (ce n’est pas très original, je sais. Et, en plus, mon image est moche).
Est-ce tout ?
Bah ! non.
IV – Modifier le code de index.html
Une des caractéristiques de HotPotatoes est de produire des choses assez moches. Quand je réalise un exercice avec ce logiciel, je change une partie du CSS afin que ce soit le plus neutre possible. N’étant pas un maître de la feuille de style, j’essaie au moins d’aspirer à la sobriété. Je me dis que ça passera mieux.
Que faut-il faire ?
Pas grand-chose. Il faut ouvrir votre fichier index.html dans un éditeur de code. J’utilise Coda, mais il en existe de nombreux notamment TextWrangler qui est gratuit. Un véritable codeur se livrerait à un nettoyage en bonne et due forme du code, mais n’étant pas un, je me contente de modifier ce qui m’importe (cela dit, la tentation est grande…).
Pour être clair et précis, vous devez modifier ce qui se trouve entre les balises suivantes :
<style type="text/css">
</style>
Mais ce n’est pas indispensable. Ça l’est si vous n’êtes vraiment pas satisfait de l’esthétique de votre exercice. Mais pour le faire, il faut connaître un peu le CSS (il existe nombre de tutoriels sur le sujet).
Quant à moi, j’ai changé les propriétés de quelques sélecteurs afin d’avoir des marges plus ou moins grandes, j’ai éliminé les bordures, etc.
Pour finir, précisons que tout ne fonctionne pas. Ainsi, tel exercice réalisé avec HotPotatoes ne fonctionne pas. À vrai dire, cet exercice ne fonctionne ni dans iBooks Author ni dans Safari. C’est un exercice où l’on peut déplacer des portions de texte. C’est bien dommage, et si un développeur passant par là pouvait m’apporter quelques éléments de réponse, j’en serais vraiment très heureux.
En revanche, je viens d’essayer, les mots croisés générés avec HotPotatoes fonctionnent dans iBooks Author.
Vous rencontrerez probablement un tas de petites difficultés dépendant de ce que vous cherchez à obtenir, sachez que si je peux vous aider d’une manière ou d’une autre, je n’hésiterai pas.
Dernier point. On peut très bien réaliser la même chose avec Netquiz Pro. Simplement, l’exerciseur génère de nombreux fichiers qu’il faut tous mettre dans le même dossier comportant l’extension .wdgt. Vous n’aurez pas à renommer le principal fichier puisqu’il est déjà nommé index.html. Et le CSS, si vous désirez le modifier, se trouve (comme il se doit) dans un dossier à part.
Télécharger les fichiers dont il est question dans ce tutoriel
Apple m’envoie ce matin (ou cette nuit) un message pour me dire que mon livre est désormais disponible sur l’iBookstore. L’année commence donc avec la publication du premier chapitre du manuel de sixième conscré aux fables !
Je ne vous réexplique pas tout. Je ne vous redis pas pourquoi j’écris ce manuel, pourquoi j’ai choisi de le publier dorénavant par chapitre. En revanche, je vous laisse découvrir ce premier chapitre de ce nouveau manuel toujours libre, toujours gratuit.
Lors des vacances de la Toussaint, le manuel de quatrième a été mis à jour. Cette mise à jour a d’ailleurs été publiée assez rapidement. Dans le même temps, le manuel avait aussi été découpé en tranches afin de permettre le téléchargement, non pas d’un livre volumineux, mais de chapitres. Pour différentes raisons, ces différents chapitres n’avaient pas été publiés. Ils le sont à présent.
L’intérêt est évident : si vous n’avez pas l’espace nécessaire sur votre iPad, vous pouvez vous contenter de télécharger le chapitre de votre choix (le plus léger fait une vingtaine de Mo). Si, de surcroît, votre connexion à internet laisse à désirer, vous serez d’autant plus intéressé par une telle possibilité.
Il y a également un avantage pour moi puisque le manuel de sixième auquel je suis en train de travailler sera publié, cette fois, chapitre par chapitre, et non dans un an lorsque tout sera terminé. Le premier chapitre verra donc le jour dans un mois tout au plus.
Plus intéressant encore, la possibilité de combiner toutes les ressources trouvées çà et là, de les agréger afin de constituer la progression de son choix permettra à l’enseignant de ne plus avoir à subir l’architecture immuable d’un manuel composé par autrui pour une classe qui, par définition, ne saurait être la vôtre.
Pour que les choses aillent dans ce sens, il ne faudrait ni publier de manuel, ni de chapitre mais des leçons, des exercices, etc. On obtiendrait ainsi une «granularité» fine, si fine que l’enseignant pourra véritablement recomposer son manuel idéal via la multitude de ressources rendues disponibles sur le net. En atomisant le manuel traditionnel, on voit là apparaître un nouveau genre de manuel.