PrimTux

La distribution éducative pour débutants et initiés.

Vous n'êtes pas identifié(e).

Annonce

CARTE DES MEMBRES POUVANT AIDER ET DES ÉCOLES SOUS PRIMTUX
Merci de vous y inscrire en nous envoyant un email si vous souhaitez y apparaître.
Les différentes isos de PrimTux4 sont disponibles, cliquez ici pour choisir votre version.

  • Pour être automatiquement informé des réponses à vos messages sur le forum, n'oubliez pas de cliquer sur "Suivre cette discussion" en bas de page. Mieux, en vous abonnant au flux RSS du forum, vous pourrez suivre tout nouveau message sur l'ensemble du forum.
  • En allant dans votre Profil, ligne "Vie privée", vous pouvez également cocher "Suivre automatiquement les sujets auxquels on a répondu.", vous n'aurez plus à cliquer sur "Suivre cette discussion" lorsque vous postez un message.
  • Abonnez-vous à la newsletter sur le site principal pour être informé des nouveaux paquets, nouvelles versions, bugs...

#1 01-01-2019 19:47:04

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 780

remplaçant climenu : paraphalbet

Toujours ici : https://mothsart.github.io/labo/frontend/shootingstand/

Le svg est intégré (full responsive) et j'ai améliorer l'animation.
L'ensemble des animations est en css et tire "normalement" partie de la carte graphique + réduction au mini de la taille du svg mais j'ai l'impression d'avoir parfois des lenteurs confused . (chrome s'en tirant bien moins bien que firefox : comme quoi)

Etant plutôt nofice sur les animations en css (j'en avais un peu fait dans mon éditeur de svg interactif), j'ai été surpris de tout l'inconfort (alors qu'on est en 2019  lol ) pour faire des choses facilement : faut ruser pour synchroniser le javascript avec le css car y'a plein de manques.
Pareil : l'intégration de texte dans du svg c'est juste très contraignant.
Différence de comportement entre firefox et chrome incompréhensible : j'ai dût mettre des hacks pour chrome.
Enfin, les outils de parcours de nœuds dom sont pas bien gérer par les navigateurs dès qu'on est sur du svg : frustrant.

Ca m'a obliger à rectifier le tir plusieurs fois et je vais sans doute un jour écrire un livre de toutes les mauvaises pistes à ne pas explorer plutôt qu'un guide des bonnes pratiques.

Bon, étape suivante et que j'espère la dernière et la plus courte : la logique du jeu.


Le source : https://framagit.org/mothsart/shootingstand

Dernière modification par mothsart (01-01-2019 19:48:03)

Hors ligne

#2 02-01-2019 11:38:49

Philippe Dpt35
Modérateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 2 636
Site Web

Re : remplaçant climenu : paraphalbet

L'info-bulle n'affiche le texte que partiellement chez moi.
Il faudrait des indications sur ce que l'on doit faire.

En travaillant sur la balance virtuelle, j'ai pu avoir un aperçu de certaines difficulté rencontrées pour les animations, notamment en raison de la logique du DOM qu'il est difficile de maîtriser. Effectivement il faut parfois ruser !

J'ai réalisé les animations en javascript, mais par la suite, sur les conseils de mon fils aîné à la maison pendant les fêtes de Noël (ingé développement dans un service R&D) je vais travailler en pur css pour les animations. J'en ai tenté une approche pour ma balance virtuelle, et ça simplifie énormément les choses, car c'est alors le DOM qui gère tout. Je suis toutefois resté en JS pour la balance virtuelle car j'étais trop avancé pour tout refaire. Le principe consiste à penser en classes que l'on attribue ou enlève des éléments selon les événements.

Il me manque les compétences en graphisme qui me permettraient de travailler sur des images vectorielles, assurant un complet responsive.

Si vous voulez avoir un aperçu de ce que donne la balance virtuelle:
https://www.de-bric-et-de-broc.fr/test/ … lance.html

Attention, ça n'est pas terminé à l'heure de ce post. Il reste notamment à créer les séries d'objets dont on doit mesurer la masse. On peut toutefois jouer librement avec les masses, et tester quelques objets à peser avec la 1ère série pour des masses de 0 à 1 Kg.
Et des bugs et imperfections encore à corriger.
La fenêtre d'informations du bas disparaîtra. Elle me sert au suivi pour le débogage. Ne faites pas de retour détaillé pour 'instant sur le fonctionnement de l'application, j'ouvrirai un post quand ce sera plus au point.

Hors ligne

#3 02-01-2019 21:19:54

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 780

Re : remplaçant climenu : paraphalbet

Philippe a écrit :

L'info-bulle n'affiche le texte que partiellement chez moi.
Il faudrait des indications sur ce que l'on doit faire.

Ah, exact : j'ai pas inclus le correctif pour firefox.
Je pense que je vais remanier le texte et mettre une seconde étape avec un explicatif.
Ne pas oublier que c'est destiné à des enfants qui justement apprennent les lettres et ne savent pas lire :
je suis en train de réfléchir à créer une mini-api qui permettrait de piloter Gspeech :
du coup, une mini lib javascript permettra d'envoyer des trames de texte et gpseech le lira directement.

PhilippeDp35 a écrit :

En travaillant sur la balance virtuelle...

Tu pourrais créer une rubrique pour la balance, qu'on s'embrouille pas ? (je décalerais ma réponse)

Je pense que tu as un peu de confusion sur ce qu'est le DOM.
Le DOM c'est un espace mémoire alloué en RAM pour représenter sous la forme d'un arbre la structure de ton document a l'instant T.
Cet espace mémoire à une API (ensemble de fonctions) qui permet de le manipuler. (et c'est souvent cette partie qui est mal comprise car l'API est vielle et souvent non intuitive)

Les soucis de lenteur lié au DOM proviennent que d'1 seul chose : la modification de cet arbre.
Par exemple : on déplace 1000 éléments d'1 nœud parent à un autre nœud.

Les frameworks Js tel que VueJS, Angular, React allège grandement le DOM en utilisant un DOM virtuel : ils mettent en mémoire le delta de ce qui a bougé et ne mette à jour le DOM que quand l'opération est terminé.
Il existe aussi un élément : <canvas> qui n'a aucun noeud DOM et du coup permet de faire des affichage très rapidement.

Pour l'animation, que ça soit javascript ou css, on ne doit pas toucher pas (ou le moins possible) au DOM si l'on souhaite garder des perfs acceptables.

L'animation css a au moins 3 avantages de taille :

- pas d'interprétation de méthode javascript qui sont au miminum 10 x plus lente qu'une fonction native
- pas de javascript donc pas de soucis potentiel lié au thread : je rappel qu'il y a un thread javascript par page et qu'un appel trop couteux peut potentiellement rendre inactif les actions utilisateurs
(je ne compte pas le nombre de sites que je rencontre qui ont se soucis)
- les animations css tirent parti de la carte graphique

J'ai parcourus rapidement tes sources et je vois ceci :

element.style.left = positionGauche + "px";

Si tu veux optimiser ton animation, n'utilise jamais les propriétés 'margin', 'padding', 'left' etc : ce n'est pas fait pour.

En animation css, il n'y a que les "transform" avec des propriétés de translation, rotation, scale qui vont vraiment avoir les 3 avantages cités plus haut.
De plus, une fois maitrisé, tu verras que c'est beaucoup plus pratique.

Si tu veux partir sur du responsive (au moins partiel : c'est encore loin d'être une science exact, y'a plein de trous), je te conseil de bannir les px et de les remplacer par des rem ou des %.

Philippe a écrit :

Le principe consiste à penser en classes que l'on attribue ou enlève des éléments selon les événements.

Oui, tu as bien compris : 99% des interactions/animations sont basés désormais sur ce principe : on touche le moins possible à l'arborescence HTML via le javascript (donc le DOM) mais on ajoute/retire des classes sur des éléments et le CSS fait le reste.

Enfin, pour le SVG : tu peux vectoriser dans un premier temps tes images matricielles avec Inkscape. (plein de tutos facile sur le net).

Hors ligne

#4 02-01-2019 22:19:39

Philippe Dpt35
Modérateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 2 636
Site Web

Re : remplaçant climenu : paraphalbet

Merci pour tes précisions sur le DOM.

mothsart a écrit :

Je pense que je vais remanier le texte et mettre une seconde étape avec un explicatif.
Ne pas oublier que c'est destiné à des enfants qui justement apprennent les lettres et ne savent pas lire :

Certes, mais l'enseignant aura, lui, besoin de savoir ce qu'il faut faire et comment pour guider l'enfant !

Hors ligne

#5 03-01-2019 11:13:19

Philippe Dpt35
Modérateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 2 636
Site Web

Re : remplaçant climenu : paraphalbet

mothsart a écrit :

Enfin, pour le SVG : tu peux vectoriser dans un premier temps tes images matricielles avec Inkscape. (plein de tutos facile sur le net).

Oui, j'avais vu et testé cette fonctionnalité, mais sur des objets un peu complexe j'en avais déduit qu'il était préférable de construire soi-même les objets directement avec inkscape. Et mes compétences en graphisme sont du niveau du degré 0 !

Mais peut-être m'y suis-je mal pris pour tirer parti des conversions !

Hors ligne

#6 03-01-2019 21:51:13

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 780

Re : remplaçant climenu : paraphalbet

Pour ma part, si j'ai pas envie de me prendre la tête, je crée des carrés (limite via un éditeur : le svg peut se créer comme du html) pour chaque poid et 4 carrés contenu dans un groupe (balise <g>) pour la balance.

Ça te permet de travailler sans avoir besoin d'un graphique.

Je trouve que c'est tout l'enjeu du svg dans le web actuellement : le graphiste web n'a pas suffisamment d'outils pour transmettre un svg qui va être adapté pour le web.
Inversement, le développeur peut se retrouver avec des svg très beau graphiquement mais inutilisables ou difficile à exploiter pour le web.

Hors ligne

#7 04-01-2019 11:25:43

zoom61
Modérateur
Inscription : 07-09-2015
Messages : 1 055

Re : remplaçant climenu : paraphalbet

Philippe Dpt35 a écrit :

Il me manque les compétences en graphisme qui me permettraient de travailler sur des images vectorielles, assurant un complet responsive.

Si vous voulez avoir un aperçu de ce que donne la balance virtuelle:
https://www.de-bric-et-de-broc.fr/test/ … lance.html

Que voudrais-tu mettre en vectoriel ?

Hors ligne

#8 04-01-2019 20:31:39

Philippe Dpt35
Modérateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 2 636
Site Web

Re : remplaçant climenu : paraphalbet

zoom61 a écrit :

Que voudrais-tu mettre en vectoriel ?

ça se pose pour toutes les images que j'utilise: balance, découpée en différentes parties pour permettre les animations sur certaines d'entre-elles; masses, objets à peser. Et toutes les images à venir pour rajouter des objets à peser dans des séries de pesées.
Mais pour la balance virtuelle, j'ai fait le choix de travailler en positionnement relatif et absolu pour un positionnement plus réaliste des masses et objets sur la balance. On perd certes un peu en responsive (la div et l'image de la balance sont en taille fixe), mais permet un bon compromis. Dès lors le format png convient très bien.

Avec le temps et l'expérience je perfectionnerai les choses !

L'idéal serait que, dans l'avenir, on soit en mesure de créer des images vectorielles pour les futures applications afin de ne travailler qu'avec ce format. ça concerne également les applications dont le "moteur" est fait (à la campagne, au jardin, ordonner des images, association d'images) et pour lesquelles il reste l'habillage à faire.

Comme le suggérait mothsart, je pourrais dans un premier temps travailler avec des formes grossières pour la réalisation des applications. Ensuite ceux qui sont compétents en graphisme réaliseraient l'habillage complet en svg.

Hors ligne

#9 06-01-2019 12:00:38

Alain
Membre
Inscription : 20-07-2017
Messages : 171

Re : remplaçant climenu : paraphalbet

Bonjour

Peut -être qu'il y a des idées sur
https://phet.colorado.edu/sims/html/bal … ct_fr.html

Alain

Hors ligne

#10 06-01-2019 12:19:27

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 780

Re : remplaçant climenu : paraphalbet

Pas mal ton lien Alain : on est très proche de la problématique de Philippe avec du svg responsive !

Hors ligne

#11 06-01-2019 13:26:42

Philippe Dpt35
Modérateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 2 636
Site Web

Re : remplaçant climenu : paraphalbet

Oui, c'est intéressant, mais on est sur une situation plus complexe relevant de notions physiques de rapports masse x distance.
ça peut également être intéressant pour aborder la proportionnalité si l'on a déjà bien manipulé une simple balance auparavant.

C'est complémentaire à la balance virtuelle.

De nos jours on ne fait généralement plus suffisamment manipuler les élèves à l'école. On y trouve rarement des balances, et quand il y en a, c'est de toutes façons en nombre insuffisant pour permettre à tous de s'exercer à effectuer des pesées. Certes une balance virtuelle ne vaut pas une balance physique, mais c'est mieux que rien !

Pour la balance virtuelle, j'avais dans un premier temps envisagé de travailler avec un graphisme simple. Mais après réflexion j'ai fait le choix d'images réalistes pour tenter de combler le manque de manipulations concrètes en essayant d'être le plus proche possible d'une situation réelle. Schématiser, c'est abstraire, et l'abstraction n'est pas à la portée de tous les enfants à n'importe quel âge.

Hors ligne

Pied de page des forums