Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Les deux projets sont mis en public sur Framagit:
https://framagit.org/philippe-dpt35/ordonner
https://framagit.org/philippe-dpt35/ordonner-img
Vous pourrez les télécharger pour tester la création de vos propres listes de mots, nombres, ou d'images.
N'hésitez pas à me faire des retours sur d'éventuels problèmes ou imperfections.
L'habillage html et css reste à la charge de celui qui veut construire son application, mais il n'est normalement pas nécessaire d'intervenir dans le javascript.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Pour éviter une éventuel travail en double, je me suis lancé dans l'application "Balance virtuelle'.
Pas de retours sur mes deux projets précédents ?
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
18-12-2018, 08:00:00
(Modification du message : 18-12-2018, 08:01:55 par zoom61.)
Ne pourrais-tu pas mettre la police en plus gros ?
Car cela serait plus facile à lire pour les enfants et aussi pour le glisser/déplacer.
Ensuite en mettant peut-être les explications qu'il faut faire glisser les mots dans le rectangle, et faire apparaître la consigne.
Et peut-être avoir un message quand c'est pas bon, car on ne sait pas si le contrôle est fait ou pas, on clique et rien ne se passe...
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
En fait là je ne propose que le moteur javascript, et non pas des applications finies, pour que celui qui le souhaite puisse facilement créer sa propre application sans avoir besoin de toucher au javascript.
Il suffit d'introduire ses données (mots ou nombre à classer, images) dans le tableau du fichier item.js pour que tout se mette en place tout seul sans rien avoir à faire d'autre que l'habillage.
Tout ce que tu dis relève du html et du css. N'importe qui connaissant un peu ces langages peut facilement adapter à sa guise.
Ce sont donc des outils de création facile d'applications. Si tu connais un peu html et css, tu peux tester la création de ta propre application en récupérant les fichier depuis le git, en habillant à ton goût.
Citation :Et peut-être avoir un message quand c'est pas bon, car on ne sait pas si le contrôle est fait ou pas, on clique et rien ne se passe...
ça ça relève effectivement du javascript.
Il y a un choix à faire sur ce qui se passe quand ce n'est pas valide: - rien, donc on ne peut passer à l'étape suivante (beaucoup d'applications fonctionnent sur ce principe)
- indication quelconque que ça n'est pas bon (visuelle, sonore).
Je veux bien les avis des uns et des autres là-dessus avant de faire les éventuels ajouts nécessaires.
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
18-12-2018, 15:53:24
(Modification du message : 18-12-2018, 15:53:47 par zoom61.)
Philippe Dpt35 a écrit :En fait là je ne propose que le moteur javascript, et non pas des applications finies, pour que celui qui le souhaite puisse facilement créer sa propre application sans avoir besoin de toucher au javascript.
Il suffit d'introduire ses données (mots ou nombre à classer, images) dans le tableau du fichier item.js pour que tout se mette en place tout seul sans rien avoir à faire d'autre que l'habillage.
Tout ce que tu dis relève du html et du css. N'importe qui connaissant un peu ces langages peut facilement adapter à sa guise.
Ce sont donc des outils de création facile d'applications. Si tu connais un peu html et css, tu peux tester la création de ta propre application en récupérant les fichier depuis le git, en habillant à ton goût. Je suis d'accord, mais si tu fais un outil (donc tu y as passé du temps) est que 0.1% de personne l'utilise, car les autres ne posséderont pas les connaissances, ils ne vont pas l'utiliser, c'est bien dommage.
D'ailleurs, je vais essayer de faire un truc pour automatiser la création du fichier avec un outil qu'ils pourront maîtriser... si tu es d'accord.
Philippe Dpt35 a écrit :Citation :Et peut-être avoir un message quand c'est pas bon, car on ne sait pas si le contrôle est fait ou pas, on clique et rien ne se passe...
ça ça relève effectivement du javascript.
Il y a un choix à faire sur ce qui se passe quand ce n'est pas valide:- rien, donc on ne peut passer à l'étape suivante (beaucoup d'applications fonctionnent sur ce principe)
- indication quelconque que ça n'est pas bon (visuelle, sonore).
Je me mets à la place d'un enfant qui n'a pas de réponse, je pense que cela va vite m'énerver.
Philippe Dpt35 a écrit :Je veux bien les avis des uns et des autres là-dessus avant de faire les éventuels ajouts nécessaires.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Là, c'est à usage interne, pour l'adaptation des applications du clicmenu, et non pas pour tout le monde.
J'ai envisagé de faire, dans un second temps, une application utilsiable par tout le monde afin de créer facilement une application complète avec divers habillages pré-conçus. Mais ça ne pourra ps se faire en javascript qui, pour des raisons de sécurité, n'autorise pas (ou très difficilement) la lecture et la création de fichiers en local.
Citation :D'ailleurs, je vais essayer de faire un truc pour automatiser la création du fichier avec un outil qu'ils pourront maîtriser... si tu es d'accord.
De quel fichier parles-tu ?
Sinon, les sources sont publiques sur Framagit. Chacun peut donc adapter l'outil comme il l'entend, et si tu as le souhait de le faire évoluer vers un outil comme celui que j'évoque ci-dessus, ça sera avec plaisir, car ça me dégagera du temps pour travailler sur d'autres applis ! 
Messages : 1,404
Sujets : 95
Inscription : Oct 2016
Réputation :
1
Je pense que zoom61 parlait du fichier item.js qui est effectivement un tableau javascript.
Je pense qu'il serait mieux d'utiliser un autre format de donnée : json (le plus facile car des apis native en javascript), yaml, toml pour ça.
Philippe a écrit :J'ai envisagé de faire, dans un second temps, une application utilisiable par tout le monde afin de créer facilement une application complète avec divers habillages pré-conçus. Mais ça ne pourra ps se faire en javascript qui, pour des raisons de sécurité, n'autorise pas (ou très difficilement) la lecture et la création de fichiers en local.
C'est pas impossible mais il faut un serveur local donc langage serveur etc.
C'est vraiment à prévoir dans un second temps.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
mothsart a écrit :C'est pas impossible mais il faut un serveur local donc langage serveur etc. Mais comme le but c'est d'avoir des applications locales autonomes qui puissent fonctionner sans serveur...
Messages : 3,300
Sujets : 41
Inscription : Dec 2021
Réputation :
15
Pour ma part, si je veux tester sereinement, ça sera pendant les vacances.
edit:
- positif: facilement éditable
- négatif: pas très "user-friendly", peut-on "ludifier" l'objet avec des animations, des dialogues... ?
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Les animations, ça peu se faire en css, mais il faut faudra de bonnes connaissances en css, ou suivre un tuto sur le Net.
Pour des dialogues, il faudra repasser par du javascript.
En l'état actuel, ça ne se veut pas user friendly. J'en avais besoin pour diverses applications du clicmenu, j'en ai profité pour partager si d'autres veulent en faire aussi. C'est une sorte de fondation.
Mais comme je l'ai écrit un peu plus haut, ça peut déboucher sur une application user friendly permettant à tout le monde de construire des applications consistant à ordonner des éléments de toutes sortes.
J'ai en tout cas ce projet en tête.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
mothsart a écrit :Je pense que zoom61 parlait du fichier item.js qui est effectivement un tableau javascript.
Je pense qu'il serait mieux d'utiliser un autre format de donnée : json (le plus facile car des apis native en javascript), yaml, toml pour ça. ça peut se régler très facilement, même avec un simple fichier txt. Je fais ça.
Messages : 3,300
Sujets : 41
Inscription : Dec 2021
Réputation :
15
Franchement on a quand même le jclic author aussi qui permet l'export en html5, exelearning... A-t-on vraiment cherché de ce côté avant de se lancer dans du codage?
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
C'est une bonne solution pour qui ne maîtrise pas le codage, et permettra d'avancer beaucoup plus rapidement en agglomérant davantage de contributeurs (si on en trouve !  ).
Mais ce sont des solutions qui sont peu évolutives. On reste enfermé dans les structures, modèles proposés, et il est très difficile de reprendre leur code derrière.
Les deux sont donc complémentaires: jclic author pour aller plus vite, codage pour aller plus loin !
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
Par exemple avec un fichier LibreOffice, comme celui-ci.
Il suffit de mettre le fichier dans le répertoire, de l'ouvrir, de le remplir (correctement) et de cliquer sur le bouton, et cela va créer le fichier "items.js" simplement.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
J'avais imaginé de traiter cela au sein du javascript lui-même, et pas pensé à passer par une application tierce. C'est une bonne idée !
Messages : 1,404
Sujets : 95
Inscription : Oct 2016
Réputation :
1
Zoom61 : c'était la bonne idée : un fichier éditable via un tableur !
Le format le plus adapté reste le csv : c'est un format texte, c'est assez simple, utilisé depuis des décennies par tous les tableurs (donc interopérabilité) et y'a des libs js sympa pour les traiter : https://www.papaparse.com/
D'ailleurs, cette lib permet d'utiliser un worker js :
en gros, javascript a un soucis de taille => de base il n'utilise qu'1 seul thread donc si le traitement est long, l'interface est figé tant que c'est pas terminé (ça vous est déjà arrivé de pester sur un site qui bloque voir même qui ouvre une popup pour dire qu'un script bloque la page). Avec un worker, on peut décharger certaines actions lourdes dans un appel purement asynchrone.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
J'ai ajouté ton fichier Libreoffice Calc sur Framagit, en le renommant et en corrigeant une phrase.
https://framagit.org/philippe-dpt35/ordo...ree/master
Te sens-tu pour faire la même chose ici:
https://framagit.org/philippe-dpt35/ordonner-img
pour créer le fichier images.js ?
Mais là, il y a une petite difficulté supplémentaire: il y deux tableaux, un avec le nom des images, l'autre avec la taille en hauteur de chaque liste d'images !
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
Philippe Dpt35 a écrit :J'ai ajouté ton fichier Libreoffice Calc sur Framagit, en le renommant et en corrigeant une phrase.
https://framagit.org/philippe-dpt35/ordo...ree/master Cool, si vous voyez des choses à améliorer...
Philippe Dpt35 a écrit :Te sens-tu pour faire la même chose ici:
https://framagit.org/philippe-dpt35/ordonner-img
pour créer le fichier images.js ?
Mais là, il y a une petite difficulté supplémentaire: il y deux tableaux, un avec le nom des images, l'autre avec la taille en hauteur de chaque liste d'images ! J'avais prévu d'y travailler aussi.
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
Petite remarque quand on veut mettre une nouvelle image à la fin, mais que la ligne est plein, je n'y arrive pas, je dois la mettre entre ensuite je déplace l'autre image...
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
OUi, effectivement, c'est parce que la ligne est pleine, et il n'y a donc pas d'espace libre à la fin pour ajouter.
Il faut que je trouve une solution pour résoudre ça, sans doute en créant automatiquement une nouvelle ligne vide lorsqu'on arrive en fin de ligne.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Philippe Dpt35 a écrit :Il faut que je trouve une solution pour résoudre ça, sans doute en créant automatiquement une nouvelle ligne vide lorsqu'on arrive en fin de ligne. Pour l'instant je bute pour trouver une solution. En effet, je laisse le DOM gérer le positionnement, ce qui assure un total responsive.
Et je ne trouve pour l'instant pas de solution fiable pour déterminer comment agrandir verticalement la zone de drop si l'on arrive en fin de ligne.
Ce problème ne se produit que si l'on a une largeur correspondant exactement à un multiple de la largeur des images avec leur marge, ce qui ne laisse pas de zone libre.
En positionnement absolu cela se résoudrait, mais oblige à fixer la taille de la zone de réception en fonction des dimensions des images de chaque liste.
Pour celui qui veut faire son application, ça ne pose pas de problème, car il suffit d'attribuer en css une largeur fixe à la zone de réception en tenant compte des dimensions des images.
Je laisse donc comme cela pour l'instant mais continue à cogiter sur une solution sans positionnement absolu.
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
En creusant dans les propriétés des objets html de javascript, j'ai réussi à trouver celle qui me donnait l'information dont j'avais besoin pour résoudre simplement le problème.
Les redimensionnements pouvant donner lieu à des problèmes imprévus, j'attends des retours de test de
https://www.de-bric-et-de-broc.fr/test/a...r-img.html
avant de fusionner les modifs sur Framagit.
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
C'est beaucoup mieux et l'utilisation est plus intuitive.
Messages : 479
Sujets : 5
Inscription : Sep 2015
Réputation :
1
21-12-2018, 11:12:22
(Modification du message : 21-12-2018, 11:13:47 par zoom61.)
Donc pour les images voici une proposition.
Mode opératoire :
- On met les images dans le répertoire
- On clique sur le premier bouton du fichier
- On fait un copie/coller des noms d'images
- On clique sur le second bouton pour créer le fichier JS
Messages : 2,210
Sujets : 46
Inscription : Oct 2015
Réputation :
10
Merci pour cette proposition.
Il est dommage que Libreoffice Calc n'autorise pas le drag & drop de cellule comme Excel, ça simplifierait grandement la manip !
Pour les dimensions, ce qui doit être indiqué, c'est la hauteur de l'image pour chaque série, les images de séries différentes pouvant ne pas être de même taille. La largeur n'est pas utile.
Il faudrait donc une colonne supplémentaire, au début, avant les noms des images, pour saisir cette valeur une seule fois pour chaque série.
Si dans la série il y a des images de tailles différentes, ce qui sera utile c'est la hauteur de la plus grande d'entre-elles.
J'avais essayé de récupérer cette taille depuis le javascript, mais le problème c'est qu'on en a besoin dès le début, et le DOM n'a pas encore forcément téléchargé tous les fichiers. Il m'a fallu un bout de temps pour comprendre le problème, par ailleurs documenté. Si en plus il y a une liaison Internet peu rapide, on accentue la probabilité que le DOM ne disposera pas de l'information.
|
