PrimTux, la distribution éducative

Version complète : Clicmenu: Blocs logiques
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
Pages : 1 2
J'ai entrepris l'adaptation de l'application Clicmenu Blocs logiques.
Voici un premier jet de l'application, à tester en ligne:
https://primtux.fr/applications/blocs-logiques/

J'attends vos retours.
Ben c'est franchement sympa.

Gros bémol : le drag and drop ne fonctionne pas sous chrome.

Niveau couleur, quelques simplifications :

1. .zoneActions_zoneDroite_boutons {
background-color: #354e4f;
}

Le orange n'apporte rien.

2. .zoneActions_zoneDroite_boutons {
background: white; // l'interface respire tout de suite plus
}

3. pas de border pour le canvas.

4. quelques soucis de responsive mais ça reste acceptable

5. Les boutons "couleurs en visuel"/"couleur en mots" et "couleur fixées"/"couleur au hasard" devrait être des radio bouttons dans 2 groupes distincts.

6. Même principe pour "bloc au hasard"/"Dessin libre"

7. Un titre soit sous forme de modal au début, soit tout le temps présent.

8. Une bulle d'aide avec des consignes

9. pinaillage inside : toutes tes formes peuvent être entièrement créé en css : du coup, aucune requète http pour des images.
Même principe pour les dessins dans le canvas : ça peut être dessiné directement, voir https://developer.mozilla.org/fr/docs/Tu...%A9triques
mothsart a écrit :Gros bémol : le drag and drop ne fonctionne pas sous chrome.
Après vérification, ce n'est pas un problème de drag & drop, mais de chargement d'image. Si tu fais l'opération une seconde fois, en dessin libre, là ça fonctionne.
La solution que tu m'avais indiquée pour résoudre ce problème de chargement d'image, et qui fonctionne parfaitement sous Firefox, n'est donc pas efficiente sous Chrome.
Il va falloir trouver une autre solution. Je vais regarder ta piste en css. Elle résoudra peut-être le problème.

Avec Chrome il y a par ailleurs un problème de décalage de position entre l'image et la souris pendant le drag. Il faut que je vois si je peux résoudre ça.

Pour tes points 1 et 2, je ne comprends pas. Tu indiques 2 couleurs de fond différentes pour une même zone.

Pour le canvas j'aurais personnellement tendance à préférer avec une bordure car ça délimite bien la zone de drop.

Pour le responsive, il n'est partiel et c'est volontairement pour que les blocs et le canvas soient facilement utilisables. ça s'adresse avant tout à de jeunes enfants (session mini) à la psychomotricité encore encore en développement. Il faut des formes et une zone de drop de tailles suffisantes.

Pour le titre, je n'en perçois pas la nécessité. Pourquoi sur cette application précisément, alors que la question ne s'est pas posée pour toutes les autres applications clicmenu ?

Je corrige les autres points.
Citation :La solution que tu m'avais indiquée pour résoudre ce problème de chargement d'image, et qui fonctionne parfaitement sous Firefox, n'est donc pas efficiente sous Chrome.

Étonnant, car je dev que sur chrome en réalité. (et je test en rapide sur firefox derrière)

Pour le point 2, c'est .zoneActions_zoneDroite_zoneCanvas, désolé

Citation :Pour le canvas j'aurais personnellement tendance à préférer avec une bordure car ça délimite bien la zone de drop.

Je suis pas convaincu : les enfants vont se concentrer sur les formes. La zone de drop ne veut rien dire pour eux.(si ils glissent des fichiers à l'intérieur ou a l'exterieur de la zone: si c'est pas au dessus d'une forme, le résultat est le même, non ?)

Pour le responsive : si je comprend bien, tu imposes une taille minimal ?
C'est pas déconnant mais j'insinuais plutôt l'inverse : sur des grand écrans, la zone de drop peut être plus grande.

Enfin, pour les titres, effectivement, c'est pas propre a cet app mais à l'ensemble.
Faut, à mon sens un point de repère : un titre et je verrais bien un logo identifiable pour chaque app.

Mais faudrait sans doute se créer un topic spécifique ou on commence à lister les trucs qui doivent figurer dans tous les clicmenu.
Je verrais bien un bouton d'aide par exemple toujours à la même position, avec un raccourci clavier.
Problème résolu avec Chrome.
Ce n'était pas lié à la procédure d'affichage dans le canvas (donc à la solution que tu m'avais indiquée et qui reste fonctionnelle), mais à setDragImage dans la fonction drag qui permet d'afficher le bloc avec la taille qu'il a dans le canvas. Sous Chrome, l'image n'était pas chargée.
Nickel
mothsart a écrit :Pour le responsive : si je comprend bien, tu imposes une taille minimal ?
Oui. S'il y a un scroll, les positions lors du drag & drop sont respectées en tenant compte du scroll.
Je me tâte d'ailleurs pour mettre en bouton de bascule plein écran pour disposer de tout l'affichage pour l'application.

mothsart a écrit :Je suis pas convaincu : les enfants vont se concentrer sur les formes. La zone de drop ne veut rien dire pour eux.(si ils glissent des fichiers à l'intérieur ou a l'exterieur de la zone: si c'est pas au dessus d'une forme, le résultat est le même, non ?)
Tu oublies la fonction dessin libre : là il est nécessaire de délimiter la zone précise de drop. D'où le fait également de ne pas passer en blanc cette zone, et de ne réserver le blanc qu'à la zone de drop.
mothsart a écrit :Faut, à mon sens un point de repère : un titre et je verrais bien un logo identifiable pour chaque app.
Je me souviens d'avoir déjà soulevé cette question d'un estampillage de nos adaptations des applications clicmenu. Je me demande si ça n'était pas dans un mail lors de la préparation des PrimTux Days. Il nous faudrait avancer concrètement là-dessus : quoi et où.
ben, pour le dessin libre, faut justement leur laisser la liberté d'utiliser "tout" l'espace blanc. (à part peut-être les padding) Cool
Bonjour
je viens de tester c'est sympa ....
avec firefox certaines fois le drag and drop ne fonctionne pas
en cliquant sur le milieu du bloc au moment de la selection la dépose est en genéral acceptée
mais plus on s'éloigne du milieu au moment de la selection moins la dépose est acceptée...

Autrement c'est vraiment dommage que toutes ces applications qui utilisent seulement le navigateur soient incompatibles avec les tablettes ...

Alain
Tout d'abord : merci Alain de tester avec nous.

Pour ce qui est du drop, ça doit sans doute correspondre à la zone de colision (avec une marge d'erreur) qui doit être carré alors que les formes n'y sont pas forcément.

Philippe : tu confirmes ?

A voir si ça ne peut pas être amélioré.

Pour ce qui est de l'incompatibilité "tactile" (pas que tablette : il y a des ordis avec du tactile, des téléphones etc.) c'est un soucis déjà soulevé.
Il faudrait faire déjà faire sur une app clicmenu et créer une lib intermédiaire pour le ré-appliquer un peu partout.
Je vais voir ce que je peux faire dans les jours qui viennent mais effectivement, ça commence à manquer.
Pour que le drop soit accepté, il faut que la forme corresponde en taille et en couleur. Il faut également qu'elle soit superposée à l'élément correspondant du dessin, avec une marge de tolérance de 20 pixels en x et en y que je peux modifier si elle est jugée insuffisante à l'usage.
La position du curseur de la souris sur la forme lors du drag n'a aucune importance

Pour la tactile, j'avais commencé à jeter un œil il y a quelques temps. ça ne semblait pas si simple. Il faudrait que je m'y replonge.
Modifications en ligne tenant compte des remarques.

Les boutons des options sont en boutons radio. Mais pas pour "Formes au hasard" et "Dessin libre" qui ne constituent pas des bascules entre 2 états. Ce sont des fonctionnalités indépendantes au même titre que la sélection d'un dessin prédéfini.

Edit:
pour l'utilisation du canvas sur toute la zone centrale, il faut que j'en vois la faisabilité. Il doit en effet pouvoir être retaillé pour des résolutions plus basses, et ça n'est peut-être pas très simple.
C'est mieux effectivement.

Est-ce que c'est possible de mettre un couleur ou une bordure de sélection sur les boutons de gauche : "formes au hasard", 'dessin libre" etc.

Une règle d’esthétique je qualifierais d'immuable : pas de noir dans une interface excepté un texte de plus d'une phrase.
donc background-color : black à proscrire.
Pour tes checkbox, je dirais pas de fond de couleur, peut-être juste un soulignement.
Aussi, le changement de checkbox a tendance a décaler légèrement.
Vos désirs sont des ordres, Monseigneur ! :lol:
C'est fait.
premier test
- je me retrouve avec le rond à remplir mais je ne sais plus de quelle couleur
capture écran
Tu es sous la fonction "Blocs au hasard" pour te retrouver dans cette situation ?
Philippe Dpt35 a écrit :Tu es sous la fonction "Blocs au hasard" pour te retrouver dans cette situation ?
oui
mais ça peut être envisagé pour travailler la mémorisation
cependant il faudrait que la consigne soit précisée

ensuite, lors des premiers tests :
- je ne savais pas quelle grandeur de forme choisir
car la grandeur des formes du haut ne correspondent pas à celles du bas
- une fenêtre popup ou autre chose pour expliquer la consigne ?
- est-il possible d'envisager pour le dessin libre par exemple un mélange des couleurs sur les parties communes aux formes ?
- on lit un écran généralement de haut en bas et de gauche à droite : ne faudrait-il pas avoir en en haut à gauche les options couleurs ?
Sur le problème du chevauchement lors de la disposition de blocs au hasard, les options possibles :
- je revois l'algorithme de positionnement au hasard pour éviter que les blocs ne se chevauchent de trop
- on liasse comme ça en considérant que ça contribue à faire travailler la mémorisation comme tu le dis, ou le développement de stratégies tierces comme :
* savoir quel bloc positionner en 1er pour ne pas cacher la couleur de l'autre bloc
* si la couleur est cachée, tester les différentes couleurs des formes correspondantes.

Je n'ai as d'avis préconçu là-dessus, je souhaite donc des retours d'utilisateurs pour définir ce qui est pédagogiquement le plus utile.

Citation :car la grandeur des formes du haut ne correspondent pas à celles du bas
Oui, sinon il ne serait pas possible d'afficher les blocs à utiliser en raison d'une trop grande taille. Mais dès que l'on commence le drag, les formes se mettent à la bonne taille. Il me semble que ça présente un intérêt pédagogique : puisqu'il y a 2 tailles pour chaque forme, il faut repérer si l'on doit utiliser la grande ou la petite. On le vérifie immédiatement lorsqu'on commence le drag, et dès lors on peut se corriger.

L'application originale est beaucoup moins explicite: on dispose de petits boutons, tous de la même taille, à l'intérieur duquel le bloc occupe plus ou moins de surface. Pas de drag: on clique sur le bouton. Il ne se passe rien. Il faut déplacer la souris sur la zone de dessin pour voir apparaître la forme.

Je vois ce que je peux faire pour les autres points :

Le mélange de couleurs est envisageable.

Pour l'affichage de consignes, 2 solutions : une popup au démarrage, ou un bouton d'aide. Là aussi je n'ai pas d'avis préconçu. Je veux donc bien les avis des uns et des autres.
J'ai mis en place un mélange de couleurs. Mais attention, on est sur des couleurs RVB, pas sur des couleurs "peinture".

Je m'interroge donc sur la pertinence pédagogique. Apprend-on en maternelle qu'il y une des différences entre les couleurs en informatique et les couleurs en peinture, et que leur combinaison est différente ?
Alors, j'ai refait une passe.

1. quand on glisse une forme sans choisir d'exercice, on a direct le message de succès.
Ne serait-il pas possible d'afficher un message "il faut au préalable sélectionner un exercice" dans ce cas ?

2. si on passe de "couleur en visuel" à "couleur par noms", si on a commencé un exercice, ça efface tout.

3. pour une question d’esthétique, j’enlèverais les bordures sur les boutons et je mettrais un background : #e4a20f quand c'est sélectionné.

4. Pour les histoires de bloc au hasard, j'éviterais le chevauchement perso.
mothsart a écrit :1. quand on glisse une forme sans choisir d'exercice, on a direct le message de succès.
J'avais vu ce bug, qui est normalement corrigé depuis le début d'après-midi


mothsart a écrit :12. si on passe de "couleur en visuel" à "couleur par noms", si on a commencé un exercice, ça efface tout.
Normal, il faut redessiner le canvas. Et logique aussi : ce choix doit conduire à un nouvel exercice.
Diverses améliorations, tenant compte des retours des uns et des autres.
Après avoir testé à maintes reprises les blocs disposés au hasard, je vais laisser la possibilité de chevauchement qui présente un réel intérêt pédagogique, notamment pour les élèves plus grands.
Comme déjà signalé, il faudra trouver des stratégies lorsque la couleur est cachée. Mais surtout, dans certaines situations d'entrecroisement, cela impose d'être capable de repérer les formes simples dans cet entrecroisement.
Pages : 1 2