Le portrait d’Esther

et #spip_recette donc

Ennemi de la routine - Muzeodrome - par Omer Pesquer
▻https://muzeodrome.substack.com/p/ennemi-de-la-routine

2) La bonne méthode 💻💬👌

“A la croisée de la BD, de l’animation, du roman historique et d’une leçon de science, « la méthode Curie » tente de mettre en valeur les instruments scientifiques utilisés par les Curie et faire comprendre leurs recherches sur la radioactivité.”

Basé sur une proposition originale d’Emmanuel Rouillier (directeur de l’atelier Mosquito), ce projet a été réalisé pour le Musée Curie dans le cadre de l’appel à projet 2019 en faveur du tourisme culturel de la Direction Régionale des Affaires Culturelles de la région Île-de-France. Les cinq auteur·e·s du projet sont : Marion Augustin (spécialiste de la médiation culturelle) - Camilla Maiani (physicienne) - Guillaume Reynard (illustrateur) - Emmanuel Rouillier (designer interactif) - Arnaud Martin (développement technique).

Arnaud Martin a été un des pionniers du web français aussi bien du coté technique que du coté social. Je l’ai d’abord connu sous le nom de Arno* en 1997 à l’époque d’uZine et du "Manifeste du Web indépendant" (dont il est un des co-auteurs). A la mi-2000, dans le cadre des évolutions d’uZine, Arno* créait un nouveau gestionnaire de contenu Web (CMS), identifié plus tard sous le nom de SPIP (lire cet entretien avec David Dufresne, autre co-auteur du Manifeste du Web indépendant). Rarement dans la lumière médiatique, Arnaud Martin a continué de développer à sa façon des "choses" avec des technologies Web (comme l’outil de short-blogging SeenThis en 2009).

Arnaud Martin travaille régulièrement avec Emmanuel Rouillier. En janvier 2016, ils mettaient en ligne pour les Musées d’Angers le premier épisode du "Portrait d’Esther", une bande dessinée numérique multi-dispositifs qui utilisait SPIP avec le plugin spécifique CMS COMICS. Plus 500 scènes dessinées ont ainsi été animé pour les 5 épisodes du "Portrait d’Esther" ! Le fait qu’Arnaud Martin soit le concepteur principal de SPIP lui a permis de développer ce projet singulier. “La méthode Curie”, bande dessinée « augmentée » qui s’adresse particulièrement aux adolescents et aux jeunes adultes, a été mise en mouvement avec CMS COMICS.

« La méthode curie » : la nouvelle bd interactive et en ligne, lancée par le musée Curie – Club Innovation & Culture CLIC France
▻http://www.club-innovation-culture.fr/methode-curie-bd-interactive-musee-curie

https://i0.wp.com/www.club-innovation-culture.fr/wp-content/uploads/visuel-methode-curie-1.jpg?fit=1200%2C676

Le lundi 22 juin 2020, le Musée Curie a publié sur son site web un contenu numérique très original pour permettre de découvrir tout en s’amusant la vie et l’œuvre de Marie et Pierre Curie. À travers une bande dessinée numérique, à la croisée entre BD et roman graphique, ce contenu en ligne offre l’opportunité de plonger au cœur de la méthode Curie, un dispositif mis en place par les époux Curie à la fin du XIX siècle pour mesurer la radioactivité.

Ce nouveau contenu web lamethodecurie.fr est disponible de manière autonome et via le site web du musée musee.curie.fr. Il donne l’occasion de découvrir ou revisiter avec cette fiction digitale l’histoire de cette méthode de mesure inédite et grâce à laquelle les Curie ont découvert deux nouveaux éléments chimiques radioactifs : le polonium et le radium.

@arno Euh vu de chez moi et non pas avec la bande passante du boulot, ben je comprends mieux les remarques de certains sur l’autre post à propos du temps de chargement des images. Y a vraiment pas moyen de les faire maigrir un peu ? Sinon c’est vraiment bien, du coup je vais peut-être attendre d’être au boulot demain matin. Pour pas gâcher.

Faudrait vraiment précharger quelques images. Même avec une connection correcte les images apparaissent en rideau (on voit le chargement). Du coup je rate les animations de page...

Je crois que, tant que je n’ai pas amélioré le code, il faut recommander de visiter ce site avec Chrome, qui offre l’expérience la plus fluide, et déconseiller Firefox, qui n’a pas l’air de pré charger les images.

Sinon, réduire la taille de la fenêtre réduira les images. Et essayer sur smartphone, qui est le support qu’on a ciblé en priorité (ça n’empêche pas que j’essaie d’optimiser, mais d’ici là...)

En effet, sous Chrome c’est mieux !

Chez moi sous Firefox Ubuntu écran 22 pouces, ça fait flou pendant 1 seconde maximum pour les grandes images, mais sinon ça me parait correct (et dans une grande ville).

Mais effectivement, même si c’est pas « en rideau », le flou dit donc que ça ne précharge pas, ne serait-ce que la page suivante.

Je viens de faire beaucoup de modifications sur les scripts, qui devraient corriger pas mal de choses (il y avait une boucle infernale, les images n’étaient pas correctement préchargées dans Firefox…).

Les copains vous pouvez ré-essayer avec différents brouteurs (notamment Firefox, qui avait l’air d’être le plus pénible) ?

@arno firefox sur PC pas tout récent, débit correct sans plus, ça fonctionne très bien. Bravo !

Et sinon c’est toujours aussi bien. Eventuellement, je me demande si de temps en temps les changements d’images, ajout, passage à une autre vue deux secondes plus tard, un voiture passe, ne pourraient pas être un poil plus lente et que pour les changements de points de vue, travelling, panorama ou mise au point, on ne puisse pas repasser vers l’état initial comme sur deux images en rollover.

Sinon c’est toujours aussi bien. Merci.

je t’ai envoyé hier un mail avec des suggestions pour recompresser tes images, je ne sais pas si tu l’as reçu ?

Super (j’ai attendu les modifs pour visiter).

Aucun problème sur MacOS et un vieux Safari. Fluide et tout. Et, les bulles ne laissent plus ignorer qu’il y a une animation (mais on n’en a plus besoin puisque ça marche !)

Bravo aux auteurs et au soutier !

@fil : oui, c’est au sujet de la compression des images. C’est un aspect que je vais regarder, mais je me doutais qu’il y avait des problèmes de script avant tout (c’était mon urgence).

Pour les images, ce n’est pas du tout évident, parce que tout ça passe par mon script image_responsive, puisque la BD balance des images à la bonne taille de l’écran du visiteur. Et ça va pas être super-fastoche puisque ça touchera tout le site.

@philippe_de_jonckheere Cette question de vitesse des successions, c’est assez centrale, et ça fait partie je crois de l’expérimentation et de notre propre apprentissage.

Sinon je suis d’accord, ce deuxième épisode est drôlement bien (je dis ça parce que j’y suis pour rien…).

@arno Oui, j’ai bien compris que l’on se trouvait dans un mode de lecture expérimental pour lequel on manque de références, de points de comparaison, en revanche je me demande si la persistance rétinienne est un truc qui fonctionne avec deux images seulement (j’aurais plutôt tendance à répondre non, mais sans certitude) et d’autre part, je suggère, sans insister, que les mouvements de souris et autres actions du lecteur puissent avoir leur influence sur la lecture, pas forcément pour ce projet mais pour le suivant.

Et par ailleurs, bien que tu n’y sois pour rien, oui, c’est très bien. Et j’ai hâte de lire la suite.

Aaah ouiii !!! Ça tourne sous firefox (dernier en date) sous osx et sur mobile (firefox aussi) c’est fluide en portrait (mais petit), en mode paysage ça saccade encore un peu, mais là c’est une question de puissance du téléphone à gérer les fondus (grrr).

Remarque aux auteurs, j’ai de la peine avec les animations qui arrivent après une seconde d’attente (comme les bulles de dialogue). J’ai tendance à attendre un mouvement, un effet, mais pas assez longtemps et je clic sur suivant au moment ou ça se met à jouer. C’est assez frustrant. Contrairement à ce qu’on pense ce « langage » bd a déjà des années d’expérimentations dans les dents et on a pu dégager quelques bonnes pratiques. Perso je préfère (mais vous faites comme vous voulez hein), les anims qui démarrent au clic de souris, sans attente. Pour les effets de bulles qui viennent dans un deuxième temps et les effets d’attente en général, on laisse le lecteur provoquer l’apparition avec le bouton suivant, tout simplement. Le lecteur donne le rythme à la lecture, comme en bd classique finalement il décide quand il change de case :)

Et bravo pour tout le boulot ! J’en veux encore !!

Juste : #wow !

ça marche super bien, sur la bédé, les petites ruptures, les petits déplacements et décalages, l’arrivée des bulles dans un second temps.

J’ai remarqué qu’en grand (grand) écran, le temps de chargement des images fait qu’on a d’abord l’image floue pendant un délai trop long… tu devrais peut-être précharger ?

PS : pense à régler le favicon

Je précharge, mais si on clique vite on navigue plus vite que le préchargement.

Et, oui, il me faut un favicon et une image pour Facebook.

bizarre car je n’ai pas cliqué vite, j’ai pris le temps de lire et de regarder les images

@intempestive Aïe. Tu as quel navigateur (et version) sur quel système ?

Vraiment sympa, il manquerait un mode planche. Ce qui permettrait d’avoir une vue plus globale. En grand écran, les cases sont trop grandes et le recul est compliqué

Superbe !

Pas de problème avec Chrome (47 me dit gg) que j’ai ouvert parce que j’en avais avec Safari (un vieux, 6.1.6, le tout sous MacOS 10.7.5) chargement un peu long, parfois affichage partiel de l’image).

Du point de vue de l’interface, ce serait bien que le lecteur puisse savoir a priori s’il y a une animation ou pas.

Dans les 2 environnements, je n’ai pas d’image du maréchal :-(
Heureusement, j’ai (un bout) du son
▻http://www.marechal-petain.com/sons/message30101940t.mp3

@azerttyu Oui, la présentation « mode planche », c’est une idée à développer.

Je l’avais proposé, mais ce projet-là ciblait spécifiquement les téléphones portables, en fait. Du coup pas de mode planche. De plus, on se tâtait pour introduire différentes sortes de transitions entre les planches : actuellement c’est un fondu enchaîné, mais on se disait qu’on pourrait avoir différents effets (slide vers la gauche, slide vers le bas…). Et dans ce cas, le mode planche pouvait entrer en conflit avec des enchaînements de cases plus spécifiques (genre : on prévoit un slide vers le bas pour passer à la case du dessous, en utilisant un élément commun aux deux cases, histoire de faire un effet marrant, mais quand on passe en mode planche l’effet est tout cassé…).

Bref : sur ce projet on l’a écarté, mais c’est tout de même quelque chose à voir.

@simplicissimus Il y a une petite animation (très discrète) en haut au centre de l’écran qui dure le temps que se déroule l’action. Pas d’animation si pas d’action.

C’est pas super-visible, parce que sinon ça devient trop envahissant au détriment de la lecture de la BD. (Surtout sur un téléphone portable, on est quasiment sur le dessin.)

Superbe ! Nickel sur Chromium mais même souci que fil et intempestive sur Firefox (c’est super lent et je n’ai pas l’animation qui indique que ça charge) (Firefox à jour sur OSX).

@arno Ok en effet si la cible principale c’est le petit écran, je comprends mieux le comportement proposé.

Super intéressant ! Je serais curieux de voir l’outil côté privé.

Pour avoir participé à une expérience turbomédia de mon côté je suis très curieux de voir apparaître ce genre d’outil, et sous spip en plus !

Par contre comme il a été dit, j’ai buté de première abord sur le préchargement trop long, je ne sais pas si c’est prévu mais j’ai démarré sur mon ordi en plein écran directement et les anims saccadent bien chez moi... Je dois tester sur mon smartphone pour voir ce que ça donne.

Niveau narratif je trouve les fondus pesants et inutiles. C’est un code cinématographique particulier qui marque l’ellipse, le passage d’une période à une autre... Donc, restons simple !!

Avec ma petite expérience je peux confirmer que ce mode de lecture (le turbomédia et toutes ses formes) pousse le lecteur à cliquer assez rapidement (et c’est bien addictif pour le coup). Il faut donc impérativement que la machine suive et toute attente pour cause de chargement devient insupportable (si on reste dans l’esprit du turbomédia). La règle est qu’une anim ne doit pas dépasser 3 secondes dans ce cadre, c’est le max avant le prochain clic.

Très intéressant mais je ne sais pas si je profite de tout. Techniquement
J’ai un vieux mac en 10.6.8 dont le processeur a crié très fort avec !
– Firefox 43.0.4 ça bloque sur le premier écran qui reste en fond noir et où rien n’est cliquable.
– Safari 5.1.10 c’est mieux mais les fondus sont par à-coups.
– Opéra 12.16, le menu en colonne gauche reste ouvert et ça fait des sauts, le panneau en glissé horizontal n’existe pas (41).
– Chrome, ok.

Je suis curieuse du processus mais j’ai pourtant quelques critiques. Je comprends que c’est l’effet expérimental qui fait qu’entre BD/Animation/Internet/Interactivité/Films muets/ ça fait beaucoup à connaitre comme codes narratifs qui s’entrechoquent (6) mais je trouve pas ça très étonnant au final, comme si un code annulait l’autre. Il ne doit pas être facile que les « animations » soient pertinentes pour éviter notamment le renforcement de la linéarité du récit (un comble sur du numérique) comme avec une deuxième case qui est noire puis se remplit après (31). Le mode de lecture restreint l’action du lecteur au clic avancer/reculer, il pourrait cliquer pour autre chose peut-être ? Concernant les fondus, je me souviens que dans le montage film certains monteurs interdisaient d’utiliser les fondus de façon systématique parce que c’est trop facile et que ça ramollit, mais j’ai l’impression que c’est dut à mon ordi qui passe les panneaux en fondus. Une des scènes que je trouve la plus réussie est celle (70-73) où Jakob doit prendre la décision de se séparer du tableau.

Ah, et aussi ce serait chouette d’avoir la possibilité de rejouer une animation avec un bouton recharger.

Merci en tout cas de faire toutes ses recherches, j’avais abandonné avec regrets Director et Flash parce qu’ils ne correspondaient pas à une ligne politique aussi intéressante que celle de SPIP et j’espère retrouver des envies grâce à tes nouvelles idées !

Les transitions graphiques de la scène du cauchemar sont très belles, peut-être pourraient-elles davantage animées. Sinon évidemment c’est un très bel ensemble.

#beau

#bd #bande_dessinée

il a fallut que je m’y reprenne à plusieurs fois pour que tout charge. J’avais l’impression à vos commentaires que je loupais quelque chose. Ce qui est perturbant c’est que je ne sais pas quand il faut que j’attende que ça charge ou quand je peux avancer dans l’histoire car c’est une image seule... J’ai aussi des pages blanches, je ne sais pas si c’est fait exprès. Puis cela clignote à partir des pages 68/69. A lire les posts précedents, il doit y avoir du son, que je n’ai pas. Je suis sous firefox 43.0 sous linux mint.

En attendant que j’améliore le code, il vaut vraiment mieux visiter ce site avec Chrome. Sur ce coup, Firefox est pas du tout fluide.

Scotché !

Une super occasion de mettre mon navigateur en plein écran !

#spip_blog

En lien (je trouve) via @touti :
►http://seenthis.net/messages/462371
▻https://www.youtube.com/watch?v=EZLp4ZEQ1cg

(là c’est en continue, sans bouton pour changer de page)