Et de trois… « Le drôle de chat qui mord » troisième livre numérique nativement HTML vient tout juste de paraître et Pierre Canthelou sera sur ces questions-là mon expert HTML5. Mais, n’est-ce pas ce qu’il est dans la vraie vie ?

Pierre Canthelou (Onzedix), ingénieur en génie logiciel (ça claque) pouvez-vous rapidement nous expliquer ce qu’est un ingénieur en génie logiciel. Quelles études et compétences sont nécessaires ?

Bonjour à tous nos lecteurs et bonjour à vous petite souris. Pour faire court, j’ai un diplôme officiel d’ingénieur maître en mathématiques et génie logiciel, délivré à la suite de 3 ans d’études à l’I.U.P de Rouen. Je ne suis donc que bac+4, je ne sais même pas si ce diplôme existe encore… Il nous préparait à la conception de logiciel, algorithmes, programmation orientée objet, gestion de projet (bon là ils ont vraiment raté leur coup…). Mais, un diplôme reste un diplôme, et j’ai tout appris avant et après. Ma vraie culture informatique s’est enrichie de lectures nombreuses (la plupart du temps des ouvrages en anglais…), d’une veille constante et de la possibilité (ou la prise de risque) de faire des projets avec des technos émergeantes, pour moi ou mes clients. Comme avec vous par exemple !

Comment en êtes-vous arrivé à cette spécialisation ?

C’était pour moi une suite logique : j’ai démarré en 2004 dans la création de sites web, et à cette époque j’ai fait le choix de ne faire que des sites full-css alors que beaucoup utilisaient encore des tableaux ou Flash. Ça a été payant car c’est cette techno qui a pris le pas. Comme je développais aussi avec le PHP, j’ai fait 10 ans de bons et loyaux services dans le domaine de la création de sites… Et quelques applications, mais rien de bien folichon. Avec l’arrivée des terminaux mobiles (téléphones et tablettes), j’avais encore une fois le choix entre une spécialisation (sur iOS) ou garder mes acquis et me lancer dans le « HTML5, l’aventure continue ». J’ai donc délaissé peu à peu le développement de sites au profit des clients m’offrant des perspectives dans la création d’applications, soit mobiles, soit très animées et interactives. Je remercie d’ailleurs La Souris Qui Raconte de m’avoir permis d’embarquer avec vous sur la réalisation de ces livres animés (j’ai trois grands enfants, je leur lisais beaucoup d’histoires, c’était génial, et j’avais envie de créer des livres comme ça).

Pour rappel, il y a eu « Ma rentrée colère » collection histoires « à lire », suivie de « PCR Company » collection histoires « à jouer » et le tout beau tout neuf « Le drôle de chat qui mord » collection histoires « à lire » encore. Pouvez-vous expliquer les différences majeures entre ces trois titres et comment le premier vous a permis de décliner plus rapidement les suivants (c’est bien le cas n’est-ce pas ?).

C’est le cas. Le développement informatique a beaucoup évolué, il est moins rare dorénavant qu’un logiciel sorte ou soit développé sans avoir 100% de ses capacités. En tout cas moi c’est comme ça que je conçois mon travail ; ce qui fait que je suis souvent en retard en fait. Parce que dans le développement, on tâtonne (au début), il y a plusieurs manières d’aborder une action ou un algorithme, et les technos HTML5 sont encore jeunes… Pour « Ma Rentrée Colère » je me souviens avoir démarré en utilisant le moteur de jeu Phaser, qui promettait de belles choses. Mais à l’usage et dans la construction même du livre c’était long et complexe. De fil en aiguille j’ai construit mon propre langage pour créer rapidement les écrans, ce qui fait que, entre le code des premiers écrans de « Ma Rentrée Colère » et le dernier, on peut voir l’évolution ! La complexité était dans la déclaration des objets graphiques, leur positionnement puis leur animation, la synchronisation avec la voix et la musique, le poids des images, les passages de pages etc…
Avec « PCR Company » on a changé de registre, il fallait pouvoir cliquer ; là encore j’ai inventé un langage pour faciliter la création des écrans, en complément de ce que j’avais déjà écrit pour le précédent ouvrage. Et là encore, on voit la différence et l’évolution du code entre le premier écran et le dernier. Ce qui me prenait 5 ou 10 lignes de code dans les premiers ne me prenait plus qu’une ligne à la fin (mais j’avais quelque part 15 lignes de code qui permettaient ce raccourci).
Enfin, avec ce dernier très bel ouvrage « Le Drôle de Chat qui Mord », nous avons introduit la notion d’écran double, qui avait un impact sur la gestion des écrans et des flèches de navigation, et des animations, qu’il fallait arrêter et cacher…
A l’heure actuelle, notre moteur, loin d’être parfait, permet de créer des suites d’écrans chapitrés (écrans simples ou doubles), avec musique, voix et effets sonores, des animations d’objets et des actions diverses sur ces objets, et ce avec un minimum d’instructions et de lignes de code (alors que le premier livre ne permettait de faire que des suites d’écrans simples non chapitrés, avec musique, voix et effets sonores, et animations d’objets).

Si vous avez géré les animations sur le premier livre numérique, nous avons décidé ensemble de travailler avec Prakash Topsy (producteur pour le cinéma d’animation) sur la partie animation pour les suivants. Comment votre complémentarité se formalise-t-elle, en trois mots « qui fait quoi » ?

• Nous recevons le script de l’illustrateur et ses prérogatives d’animations.
• Nous étudions ces recommandations et définissons ce qui sera animé par Prakash, et ce qui sera de mon ressort, en fonction des mouvements demandés.
• Prakash réalise des animations et me fournit des suites d’images : de l’animation traditionnelle à la Walt Disney, image par image. On se base sur des cadences de 12 images par seconde, voire 10…
• Je récupère l’énorme travail de Prakash et transforme chaque série d’images en 1 image qu’on appelle « sprite ». J’ajoute une ligne de code pour informer notre « logiciel » qu’il doit traiter cette image comme une animation, un peu comme un GIF animé.
• J’anime avec Javascript ces éléments pré-animés (en leur attribuant translation, rotation, …) et les autres.

Par exemple pour les oiseaux, Prakash fait entre 2 et 8 images d’un oiseau en vol stationnaire, qui bat des ailes, que je transforme en sprite ; ensuite j’insère cet objet graphique dans l’écran avec une ligne de code précise, et avec une autre ligne de code (ou plusieurs) je lui commande d’aller d’un point A à un point B de l’écran à une certaine vitesse.

J’ai quelques angoisses concernant le format HTML5. Pensez-vous que l’on puisse aujourd’hui parler d’un standard ? Le HTML4 a été un standard du web pendant plus de 10 ans (si j’en crois cet article). Quelles différences existent entre la version 4 de HTML et la version 5, avez-vous un avis sur la version 6 ?

Le problème c’est qu’on parle de HTML5 comme on parlait de HTML4+CSS2+JS ; HTML5 ne veut rien dire en soit car on utilise au final toujours les mêmes langages : du HTML, des CSS et du JS. Là où cela évolue, c’est que HTML a de nouveaux TAGs (comme le tag canvas pour le dessin), les CSS se sont enrichis d’instructions d’animations et le Javascript s’enrichit aussi d’instructions d’animations, de gestion de la géolocalisation, des notifications, etc…
Donc en gros, ce qui était impossible à faire il y à 3 ans le devient car l’écosystème logiciel du web s’enrichit de fonctionnalités nouvelles, qui viennent d’ailleurs souvent du monde du portable… C’est pour moi identique à HTML3 et HTML4, la même « révolution » qui n’est en fait qu’une « évolution ».
Donc je n’ai aucune idée de ce que réserve la sixième évolution du web, mais on peut se dire que la possibilité de stockage d’informations, de mise en cache, d’échange direct avec une autre machine, etc. vont pointer le bout de leur nez afin de contrecarrer les applications natives de Apple et Android. Cela va simplifier pas mal de choses !

Avez-vous suivi ce qui s‘opère entre l’IDPF et le W3C. Je suis loin d’être une experte sur ces questions, mais j’imagine que vous avez un avis sur ce rapprochement ? Ça va changer quoi pour des gens comme vous, et par ricochet des éditeurs comme La Souris Qui Raconte ?

Pour être franc, c’est une découverte ! Je vois même qu’il y a une ancienne cliente qui fait partie de l’équipe avec laquelle je bossais pour Magnard. Qu’est-ce que cela pourrait changer ? Techniquement j’imagine qu’ils vont introduire de nouvelles fonctions pour faciliter la conception d’ouvrages (couverture, préface, ligne, pagination, …), ainsi que la lecture (démocratiser la lecture automatique de textes) donc il va falloir, comme on le fait déjà maintenant, apprendre de nouvelles techniques… Rien de bien nouveau. Pour vous ? On peut se dire que ça va faire comme pour la disparition annoncée de Flash. Une refonte des moteurs techniques d’affichage, mais très certainement aucun changement sur le fond.

Alors que Flash (logiciel d’animation) a été le roi du web pendant deux décennies, le voilà déchu et détesté pour cause de failles de sécurité ! Pour avoir entendu dire un paquet de fois « Flash… c’est mort ! » pourquoi HTML (langage de description de pages) ne suivrait-il pas le même destin ? Quelle garantie avons-nous que demain (dans 10 ou 20 ans) HTML(?) ne sera plus HTML(?) mais autre chose et que ce qui marche aujourd’hui ne marchera plus dans 10 ans ?

Le truc c’est que HTML était là avant le Flash. Je pense que c’est une erreur non pas de Macromédia/Adobe mais du W3C d’avoir tant attendu avant d’introduire directement dans le HTML tout ce qui faisait la force de Flash : timeline pour l’animation (le pendant étant les animations CSS et bientôt la timeline JS), dessin vectoriel (SVG), logiciel-éditeur complet. Flash, tout le monde l’aimait parce que l’outil était très bien fait, qu’il permettait de faire assez facilement ce qui était impossible dans une page web, et qu’un graphiste pouvait l’utiliser directement. Dans l’immédiat, on a besoin d’un graphiste puis d’un développeur. En extrapolant, regardez ce qui se déroule avec React ! Ça va faire pareil ! HTML, CSS et JS seront toujours là : ils vont évoluer, intégrer les technos qui auront émergé en avance sous forme de plugins, et ils perdureront.
Pour finir, parler de 10 ans en informatique, c’est comme se demander si les dinosaures pourraient encore fouler notre terre. Ne serait-ce que parce que le matériel évolue trop vite.

J’imagine que vous programmez en HTML pour faire ce que HTML sait faire, des sites web, bien plus que pour « co-créer » des livres comme ceux de LSQR. Que retirez-vous de cette nouvelle expérience ?

Alors en fait non ! J’ai déjà répondu à la question plus haut ! C’est plutôt l’inverse, je préfère largement co-créer avec vous, j’ai déjà fait assez de sites web… Et maintenant avec WordPress, le métier est totalement différent. Je fais en parallèle des sites animés interactifs pour une agence qui bosse beaucoup avec le médical/pharmacie, et c’est très bien aussi. Je me tourne vers l’animation et l’interactivité, c’est un choix d’orientation professionnelle et j’en apprends beaucoup beaucoup avec la réalisation de livres.

Pour avoir pratiqué Flash et sa performance en matière d’animations (c’est quand même ce qu’on fait chez LSQR depuis presque 7 ans, des livres numériques animés), je n’ai pas encore retrouvé cette fluidité avec HTML5, pensez-vous pouvoir me contredire un jour ?

Oui, comme je le disais en début d’interview, au début j’avais envisagé d’utiliser Phaser, un moteur de jeu, moteur qui en fait utilise principalement un objet appelé « canvas », et cet objet permet de faire des animations fluides. Il faut le comparer à un conteneur comme l’était Flash en fait. C’est pour ça que je disais que le HTML absorbe les technos, et les rend finalement plus accessibles. Sauf que pour Flash ils ont attendu trop longtemps.

Autre inconvénient, les questions de poids, ça pèse vite lourd en HTML et je sais que vous bataillez pour trouver des solutions dans vos chargements. Quel régime pour un livre animé et interactif de 30 écrans ?

Notre dernier livre fait 350Mo, nous avons 45 écrans je crois. Il y a un sprite d’animation qui fait 5Mo à lui tout seul… Mais je n’ai pas encore eu le temps de me pencher à fond sur ce problème de chargement et de préchargement, il faut que j’essaye une autre approche en me basant sur les deux approches déjà pratiquées pour ces trois livres. Les nouvelles technos comme Progressive Web App devraient apporter quelques éléments de réponse.

Ah oui, une dernière question, pourquoi Onzedix ?

C’est hyper intime !
Onzedix, c’est binaire et informatique : 1110
Et je suis né le onze octobre 1971… 11/10
Avant ce nom, je me faisais connaitre sous « codesign » (co design, code, design), mais j’ai voulu accompagner ma transition vers l’animation numérique avec un nouveau nom.

Jeunot ! Huhuhu !!!
Merci Pierre, j’ai presque tout compris ! et j’espère que nos lecteurs apprécieront ces petites ficelles qui vous sont propres, et participent à l’élaboration de notre beau catalogue. Le virage que vous prenez avec LSQR a été dur à décider pour moi (d’où mes questions sur Flash, afin d’être sûre de ne rien regretter… mais non… rien de rien …). On ne change pas une équipe qui gagne, et je ne me voyais pas relayer Ivan, notre docteur ès Flash sur le banc ! Finalement il a trouvé sa place dans la suite de l’histoire que j’écris un peu chaque jour, puisque lui aussi passe au HTML, mais avec Animate CC.
Mais C une autre histoire !