Un package qui rassemble des illustrations interactives

[mothsart]

Rien de bien nouveau, que du réchauffé, lol
J'ai décidé de réunir le résultat de mes illustrations dans un paquet debian commun avec un exe (qui lance firefox avec le html), un fichier .desktop et un png pour avoir un lanceur digne de ce nom.

C'est pas forcément grand chose mais ça permet de rajouter du contenu et des futures lanceurs pour des handymenus thématiques pertinents.

ça se passe ici : https://github.com/mothsART/illustrationsvg
et on construit le paquet debian avec :

Code :

dpkg-buildpackage -us -uc

[mothsart]

Steph, tu penses que tu pourras inclure ce paquet au dépôt ?

[Steph]

Oui bien sûr!

[Steph]

Après avoir regardé tout ça, il y a 2 illustrations qui me posent problème.

- Je dirais que ça va pour les fruits en anglais et le campement préhistorique (pour ce dernier une petite idée de la position dans la frise historique aurait été bienvenue).

- J'ai un problème avec les organes où différents appareils sont mélangés: le digestif, le respiratoire et l'urinaire... On a l'habitude de les traiter sans les grouper. Exemple pour le digestif: https://fr.vikidia.org/wiki/Digestion#/m...gestif.svg

- Idem pour la lune où sont mélangés phases de la lune et icônes météorologiques. Ils n'ont rien à faire ensemble en fait. Pour les phases de la lune, ce schéma https://upload.wikimedia.org/wikipedia/c...mbined.jpg aurait été plus pertinent par exemple.

[mothsart]

campement préhistorique : pour ce dernier une petite idée de la position dans la frise historique aurait été bienvenue.

Tu peux préciser ?

- J'ai un problème avec les organes où différents ...

Si je comprend bien, il faudrait 1 fichier par type d'appareil ?

Idem pour la lune où sont mélangés phases de la lune et icônes météorologiques.

J'ai, en toute honnêteté piqué un svg libre de droit que j'ai un peu adapté.
Je vais enlever la lune et essayé de faire au plus simple.

[Steph]

De toute façon il faudrait aussi que je m'y mette pour faire des trucs "Education Nationale" quoi, adaptés aux programmes...

[zoom61]

De toute façon il faudrait aussi que je m'y mette pour faire des trucs "Education Nationale" quoi, adaptés aux programmes...

Ne te précipites pas , vu comment les programmes changent d'année en année. Va falloir faire des update souvent

[Steph]

Tu sais quand tu regardes de plus près c'est souvent la même chose renommée autrement: tu veux un exemple?
Histoire:
1985: histoire, sous-ensemble de histoire et géographie
1995: Le temps dans la vie des hommes, sous-ensemble de découverte du monde
2002: Le temps qui passe, sous-ensemble de découvrir le monde
2007: histoire, sous ensemble de se repérer dans l’espace et le temps, lui-même sous-ensemble de la découverte du monde
2015: se situer dans le temps, sous-ensemble de questionner l’espace et le temps, lui-même sous-ensemble de questionner le monde

Prenons maintenant un thème de cycle 2: la journée, la semaine, le mois, les saisons, l'année...:

1985: Rythmes et mesure du temps (le jour et la nuit; les saisons ; l'heure et le calendrier). Événements marquants de la vie de l'enfant, de sa famille, de sa classe, de la commune, de la nation (anniversaires, fêtes, vacances, commémorations). Construction d'une première frise chronologique portant sur la vie personnelle et collective.

1995: L'heure, la journée, la semaine, le mois, l'année ; rythmes naturels et mesure sociale du temps. Éléments de la vie quotidienne: le cadre de vie, le patrimoine et sa conservation, les générations, événements et commémorations.Évocation de modes de vie plus anciens à partir d'images marquantes de l'histoire ou d'exemples significatifs (les châteaux forts, par exemple). Utilisation de diverses sources d'information et mise en ordre chronologique

2002: Explicitation de la programmation des activités scolaires pendant l’année, de l’emploi du temps hebdomadaire et quotidien; présentation quotidienne des activités de la journée et bilan du travail effectué (par exemple, en faisant participer les élèves à la rédaction du cahier-journal); utilisation des horloges et du calendrier.

2008: Les élèves apprennent à repérer l’alternance jour-nuit, les semaines, les mois,les saisons. Ils utilisent des outils de repérage et de mesure du temps : le calendrier, l’horloge. Ils découvrent et mémorisent des repères plus éloignés dans le temps : quelques dates et personnages de l’histoire de France ; ils prennent conscience de l’évolution des modes de vie.

2015: Identifier les rythmes cycliques du temps. Lire l’heure et les dates .» L’alternance jour/nuit .» Le caractère cyclique des jours, des semaines, des mois, des saisons .» La journée est divisée en heures .» La semaine est divisée en jours. Comparer, estimer, mesurer des durées .» Unités de mesure usuelles de durées : jour, semaine, heure, minute, seconde, mois, année, siècle, millénaire .» Relations entre ces unités. .Situer des évènements les uns par rapport aux autres .» Les événements quotidiens, hebdomadaires, récurrents, et leur positionnement les uns par rapport aux autres .» Continuité et succession, antériorité et postériorité, simultanéité.

Ça s'en va et ça revient...

[Steph]

Voilà un peu par exemple (attention, peut être complété, peaufiné...) ce que j'attends d'un document sur les saisons:
https://primtux.fr/les-saisons.html

Merci vikidia!

[mothsart]

Ouahou, super Steph ! T'as fait un vrai travail de composition. Vraiment chouette.

T'as fait à partir des dernières sources ou de la version on-line ?
As-tu rencontré des soucis quelconques sur un projet complet ? (ou des suggestions d'améliorations)

Je vais vraiment me pencher de nouveaux sur cet éditeur pour corriger quelques bugs et rajouter des fonctionnalités demandés depuis longtemps.

T'as du le faire le taf de composition avec Inkscape. ( c'est dans les metas-données du fichier svg)
Seul conseil pour une prochaine fois : enregistrer la version destiné pour l'éditeur dans le format svg "simple". Le format svg inkscape est très bien tant que tu travailles dessus mais c'est assez lourd pour un navigateur : plein de méta-données inutiles.

Néanmoins, c'est pas bien grave, j'ai mes utilitaires en ligne de commande pour améliorer tout ça (svgo et svgcleaner).

Je vais l'empaqueter et, si tu me l'autorises, j'aimerais bien le mettre en exemple dans mon éditeur.

[Steph]

Je l'ai fait à partir des dernières sources. J'ai trouvé le schéma sur les saisons puis les illustrations, le tout en libre, et j'ai essayé de les faire cohabiter... Mais bon je trouve que ça manque encore de cohérence au niveau graphique: il faudrait que je fasse des encadrés, les couleurs ne me conviennent pas tant que ça...
Quand je te dis que ton outil a du potentiel c'est pas du pipeau, et si je te demande de pouvoir insérer du son et des vidéos c'est pour pouvoir enrichir encore plus. Là il accepte ce qui est en local, c'est déjà pas mal: les 4 saisons avec le fichier, l'url qui pointe dessus et ça suffit, mais si un lecteur était intégré ça serait encore mieux. Aussi, si les liens pouvaient ouvrir un nouvel onglet par défaut et forcé ça serait mieux, parce que là avec le copié-collé de vikidia, les liens s'ouvrent dans la même fenêtre, on ne voit donc plus l'illustration.
Ce que je veux mettre en avant, c'est aussi le contenu: le maître a son support de connaissances complet: la préparation est faite, et s'il oublie des choses pendant la leçon, le schéma est là pour l'aider: l'histoire de l'hémisphère sud par exemple peut nous échapper (et on peut choisir de ne pas le traiter). Pendant l'étayage (amener les élèves vers notre objectif), on peut le garder sous le coude sans leur montrer, puis leur présenter une fois qu'on les a bien dégrossis!
Là on parle de support collectif, mais pour des plus grands, ça peut tout aussi bien être un support de recherche avec un questionnaire: on a un document enrichi, le but cette fois-ci n'est pas seulement d'acquérir des connaissances, mais d'exploiter ce document, les questions permettant de cliquer et de lire pour trouver, on ajoute la démarche.
Dans l'ensemble c'est agréable à travailler, une chose m'a déroutée: le zoom: quand on l'active en édition, ça zoome et on ne peut pas revenir en arrière sauf à décocher activer, mais là on croit qu'il ne sera pas activé dans la présentation finale alors qu'il l'est...
Enfin, j'ai testé aussi avec xia. Ce dernier n'a pas su exporter mon schéma depuis inkscape (un sablier qui reste et rien...).
Bien sûr tu peux le mettre dans tes exemples.

[mothsart]

insérer du son et des vidéos c'est pour pouvoir enrichir encore plus

J'en ai déjà parlé fut un temps. C'est effectivement une bonne idée mais ça demande de passer par un format qui empaquette ces sources (un zip avec un format normalisé : sans doute zim) et du coup ça demande un gros investissement et vérifier que la rétro-compatibilité est d'actualité.
J'avais un peu avancé sur ce sujet mais ça reste hard.

Aussi, si les liens pouvaient ouvrir un nouvel onglet par défaut et forcé ça serait mieux

Très pertinent. Je vais commencer par là.

ne chose m'a déroutée: le zoom...

Je comprend pourquoi mais je sèche sur "comment". Si tu as des pistes (sans trop révolutionner ou alors faudra attendre longtemps), je suis preneur.

Bien sûr tu peux le mettre dans tes exemples.

Je vais attendre que tu sois satisfait avec une version définitive et je le ferais. Ca évitera de faire 2 fois et je vais me concentrer sur les correctifs.

[Steph]

Voilà tu peux y aller, même lien.
Un petit encart pour citer les sources (les crédits quoi) ça serait bien aussi.

[mothsart]

Voilà tu peux y aller, même lien.

Ok, entre temps j'ai corrigés quelques bugs (la plupart sont subtiles) et j'ai rajouté la fonctionnalité demandée : les liens s'ouvrent désormais exclusivement dans une nouvelle fenêtre. Je vais tenter de créer une petite moulinette qui va recadrer ton fichier (et ceux précédents) afin de corriger ça s'en rééditer les liens manuellement.

J'ai une petite suggestion : je préférais la couleur de fond précédente : le bleu était moins foncé et les contrastes meilleurs à mon sens.
Je vais sans doute enlever manuellement des éléments non visible dans le svg pour l'alléger. (on voit une demi seconde la terre en mode file de fer : je suppose que c'est un ersatz du fichier initial.

Un petit encart pour citer les sources (les crédits quoi) ça serait bien aussi.

Très bonne idée. Je pense que je vais mettre un petit icône discret en bas à droite qui ouvrira une popup.

[Steph]

Il n'y avait pas de fond dans le premier jet, c'était blanc, mais bon je peux éclaircir.

Pour le zoom: peut-on prévoir de bouger les curseurs sans avoir à cocher "activer" (dans ce cas les nombres du zoom changent mais rien ne se passe sur l'illustration) et "activer" devient alors "Prévisualiser"?

Autre chose (ça me semble compliqué mais on ne sait jamais), et on le voit ici avec l'histoire du fond: y a-t-il moyen de charger un autre svg sans enlever les légendes? Type je change le fond, du svg et je le remets dans l'interactivité sans avoir à remettre toutes les légendes?

[mothsart]

Il n'y avait pas de fond dans le premier jet, c'était blanc, mais bon je peux éclaircir.

Ah oui, comme quoi ... les ressentis.

Pour le zoom: peut-on prévoir de bouger les curseurs sans avoir à cocher "activer" (dans ce cas les nombres du zoom changent mais rien ne se passe sur l'illustration) et "activer" devient alors "Prévisualiser"?

C'est vrai qu'on gagne en efficacité. Je mets sur ma todolist.

Autre chose (ça me semble compliqué mais on ne sait jamais), et on le voit ici avec l'histoire du fond: y a-t-il moyen de charger un autre svg sans enlever les légendes? Type je change le fond, du svg et je le remets dans l'interactivité sans avoir à remettre toutes les légendes?

Compliqué mais pas impossible.
C'est une fonctionnalité qui me parait, après réflexion, juste incontournable. N'importe qui (à part ceux qui touche au code) risque de se trouver dans le même dilemme que toi.
Seul contrainte : il ne faudra pas changer le ratio de l'image (sinon ça fait des chocapics)... va falloir que je me crée des svg de test pour garantir ce qui se passe dans ce genre de condition (pour que ça soit pas trop frustrent pour l'utilisateur) => message d'avertissement et les indices qui devraient se retrouver hors champs vont se retrouver aux limites de l'image. (pas sur que je sois très clair)

[mothsart]

Je viens de mettre à jour les sources sur github :

- le correctif sur zoom est en place.
- c'est possible de changer le fichier source sans perdre la légende : rajout d'un bouton "mise à jour".
Attention : ça fait juste le job (donc ça devrait te débloquer, Steph pour changer la couleur de fond). En revanche, ça manque encore de tests et de sécurité autours.
- j'ai enfin rajouté une fonctionnalité demandé par Cyril Borne depuis plus d'un an : il est désormais possible de piloter l'animation via des raccourcis clavier. (+ une aide pour démarrer)

Manque la fonctionnalité du copyright qui attendra un peu.

[mothsart]

Voilà, j'ai mis à jour pour prendre en compte la possibilité de rajouter des crédits sur un document.
C'est sans doute pas parfait mais ça à le mérite d'exister.

[Steph]

Quand je change le svg en ayant chargé le fichier html, je perds les numéros sur le schéma, et quand j'ajoute un numéro, la case est noire.

[mothsart]

C'est possible de me fournir les 2 documents (html et svg) : que je puisse tester au plus proche ?

[Steph]

Les saisons c'est le même lien qu'au-dessus:

https://primtux.fr/les-saisons.html

et voici le svg:

https://primtux.fr/saisons.svg

[mothsart]

Voilà, c'est corrigé !

En re-touchant au drag and drop + upload de doc, j'ai identifié un autre bug sournois : quand on re-upload un doc qu'on vient de supprimer, il ne se passe rien car le navigateur se base sur un événement "on change" hors si c'est le même doc, il en déduit que rien a changé...

Bon, ça m'amène aussi vers d'autres pistes de réflexion : une barre de progression lors du chargement serait pas du luxe : sur ton doc, j'ai 1 seconde ou il ne se passe rien et c'est assez déroutant.

[Steph]

Ben il y a un problème: quand je charge saisons.html il me balance l'arborescence des répertoires de l'éditeur. Quand j'ouvre tes exemples depuis le menu déroulant de l'éditeur ça passe, quand j'ouvre les saisons ou tes exemples depuis l'arboresecnce qui m'est présentée ils sont en lecture seule.
Autre chose: peux-tu mettre la croix à côté de prévisualisation pour le zoom?

[mothsart]

Bon, ça devrait aller beaucoup mieux là. J'avais complètement flinguer l'import de doc sous firefox.
Pour la croix à côté de la prévisualisation : corrigé (spécifique firefox également)

[Steph]

C'est ok, alors on peaufine...
Les liens ne s'ouvrent toujours pas dans un nouvel onglet par défaut et j'ai ceci quand je veux changer de svg: