Exerciseurs et remplacement progressifs des Clicmenu

[mothsart]

Si on est plusieurs à travailler dessus, il faudrais éviter de marcher sur les mêmes plate-bandes.

Je propose de travailler sur :

- Avoir et être + conjuguer sur mars : en réalité Grammatrainer
- les 2 carrés magiques
- et ou est
- euro comme tout

Ne connaissant pas le niveau de ceux qui souhaiterais aider, n'hésitez pas à me demander conseil si besoin (dev web, c'est mon métier même si je suis plus orienté back que front).

Je conseil les tutos vidéos en français dans le domaine de https://www.grafikart.fr/ (y'en a pour tous les niveaux)

J'aime aussi beaucoup https://github.com/kamranahmedse/developer-roadmap (c'est en anglais en revanche) qui donne la trame d'apprentissage d'un dev web (franchement proche de la réalité) et permet de déterminer le niveau, vers quoi se former etc.

Après, il faudra que je liste les briques que j'utilise ou que je vais utiliser (par exemple : https://kamranahmed.info/driver.js/), que j'ai créé qui pourrait vous faire gagner du temps et harmoniser nos travaux respectifs.
J'ai tendance à réfléchir minimalisme : pas de jquery (j'explique pourquoi ici : https://mothsart.github.io/vanilla-a-a-a-a.html), Vuejs quand c'est un projet suffisamment gros pour que ça vaille coup. Même principe pour l'utilisation de pré-processeurs.

De toute façon, le mieux est de tout mettre sur un ou plusieurs dépôts git et on pourra faire de review sur nos devs respectifs.

[Philippe Dpt35]

En ce qui me concerne, ça ne sera de toutes façons pas pour tout de suite !
Y'a encore du boulot pour le RPi.

Comme je suis niveau débutant en javascript, je n'hésiterai pas à te demander conseil !

[Philippe Dpt35]

Mothsart, as-tu testé Ardora, installable dans PrimTux depuis les dépôts (ardora-primtux pour une installation individuelle, sinon avec les logiciels outils complémentaires par l'accueil) ?

C'est un exerciseur permettant, depuis une interface graphique, de générer des applications Web.

Quels inconvénients y vois-tu en tant que développeur ?

Au niveau des avantages, est-ce que le résultat obtenu est suffisamment satisfaisant afin de permettre à des non développeurs d'élargir l'équipe se chargeant de remplacer les clicmenus, voire développer de nouveaux contenus ?

[Steph]

On a aussi JclicAuthor qui permet l'export en html5. D'ailleurs est-ce que les exercices Jclic passnet sur Rpi? C'est du java normalement ça passe, non?

[Philippe Dpt35]

Tout ce qui est Java ou Python passe sur RPi, sauf cas excpetionnel. Les activités Jclic sont intégrées.

[Steph]

Voilà un exemple vite fait avec un tuto lu en 5 minutes:

https://www.primtux.fr/beta/co/index.html

Bon en consigne j'aurais pu mettre relie...

[Steph]

C'est si moche que ça pour que personne ne réponde? Ça de multiples avantages: html5, un prof peut faire des exos... Disons que c'est une piste. Parce que le javascipt, python ok mais ça sera sans moi, pas le temps de me former la-dedans. Si on veut des contributeurs on n'aura pas 50 solutions, il faut du graphique.

[Philippe Dpt35]

En e qui me concerne, je pense que l'aspect rendu visuel est secondaire. Il faut d'abord voir si, sur un plan technique, des solutions comme Ardora ou Jclic author donnent des résultats suffisamment souples au niveau du code pour que l'on puisse repasser derrière en html et css afin de rendre le visuel plus attractif si nécessaire.

Je dis ça parce que quand il y a des années j'ai voulu trouver une solution pour redessiner l'interface graphique de mon site utilisant un CMS, j'avais lorgné du côté des logiciels proposant des outils graphiques pour le faire. Outre que ce n'était pas gratuit, les versions d'essai m'ont montré que si on voulait sortir des sentiers battus des modèles prédéfinis proposés, il fallait mettre les mains dans le cambouis, et donc passer par un apprentissage. De plus, le code produit était si illisible que j'ai trouvé plus simple de me mettre directement à l'apprentissage de html et css et de coder à la main !

[Steph]

Je t'ai tout mis dans le répertoire projects de ton espace ftp.

[mothsart]

Désolé Steph, j'ai eu des obligations et écrire en coup de vent ne me réussi pas (cf: plus haut => relie :lol: :lol: )

Le résultat est mieux que ce que je pensais avec Jclic Author.
Après, le côté "moche" est à mon sens très subjectif et je rejoins Philippe : il vaut mieux une panoplie d'exercices pertinents et un peu moins finis plutôt qu'un échantillons beaucoup plus réduit, fait par une minorité.
C'est pareil, si on a des exercices hétérogènes en termes de qualités (UI, graphisme etc.), c'est pas trop grave... on pourra toujours homogénéiser une fois qu'on a de la masse.

Au niveau css, c'est toujours possible d'écraser l'existant. Pour le javascript, il faudrait regarder si le script existe en non minifié dans le paquet pour se simplifier les choses.

J'ai fait quelques tests avec JClic et Ardora avec une préférence pour Jclic (qui est quand même plus réactif sur les prévisualisations).

Ce qui a tendance à me gêner sur ce genre de soft c'est le côté trop permissif (outil fait par des techniciens pour des techniciens) : sans suivre un tuto et apprendre comment fonctionne l'outil, c'est très difficile de faire quoi que ce soit avec du sens.
L'utilisateur arrive sur une interface avec pleins de boutons et de paramètres.
Un logiciel pour un non technicien doit prendre le contre-pied à mon sens : l'utilisateur suit un chemin tout tracé avec le moins possible de fausse piste et un outil le plus proche possible du résultat définitif. (voir une série de template qu'il peut modifier à sa guise)
Pour la personnalisation, ça doit être possible dans un second temps (ou un mode avancé).

Après, il faut avancer intelligemment et concentrer le dev sur des exerciseurs qui ne sont pas possibles via JClic et Ardora.

[Philippe Dpt35]

(outil fait par des techniciens pour des techniciens) : sans suivre un tuto et apprendre comment fonctionne l'outil, c'est très difficile de faire quoi que ce soit avec du sens.

Tout à fait d'accord, c'est la réflexion que je me suis faite en testant Ardora.

Comme sur Jclic Author Stéphane a réussi à faire quelque chose en passant 5 min sur un tuto, ça peut être la solution à recommander à ceux qui veulent donner un coup de main pour faire rapidement des adaptations des logiciels climenu.

[Philippe Dpt35]

Pour le javascript, il faudrait regarder si le script existe en non minifié dans le paquet pour se simplifier les choses.

Tadaaaaa !!!
https://korben.info/deminifier-js.html
ou
https://unminify.com/
ou encore
https://beautifier.io/

[mothsart]

Comme sur Jclic Author Stéphane a réussi à faire quelque chose en passant 5 min sur un tuto, ça peut être la solution à recommander à ceux qui veulent donner un coup de main pour faire rapidement des adaptations des logiciels climenu.

Pour les démminifieurs, ça fait longtemps que ces outils ne servent plus (à mon sens) car les navigateurs le font directement en natif. (sur chrome, t'as le bouton "pretty print" mais t'as l'équivalent sur firefox ou IE)

Le soucis, c'est que tu perds souvent toute l'arborescence de tes fichiers, les commentaires, la partie débogages, les nom de tes variables et méthodes, (un bon minificateur va remplacer "ma_fonction_qui_veut_dire_quelque_chose" par "a" pour gagner de la place) les algos. (oui, les très bons minificateurs font de l'optimisation des algos. Du coup, ça fait pas mal offuscation au final ou un déminificateur n'arrivera pas à obtenir une opération inverse)
La tendance actuelle est à l'utilisation de préprocesseurs : on écrit son code dans un javascript moderne (par exemple avec de la POO) mais pas encore supportés par les navigateurs et on compile dans une version interprétable (mais aussi difficilement compréhensible).

L'avenir s'annonce encore pire avec l'émergence de webassembly qui est un format bytecode.

Du coup, travailler avec les sources, c'est franchement pas du luxe.

[Steph]

Ah oui moi c'est ce que je vais faire, du Jclic Author. Je ne suis absolument pas spécialiste en script de tout genre, des instits non-techniciens ont réussi à faire des exercices très pertinents, maintenant il y a en plus le html5. Si tu tombes sur un tuto clair ça va très bien, un non-technicien c'est pas un beubeu non plus! De toute façon quoique tu veuilles développer, il faut être technophile. Les exercices les plus jolis en html5 je les ai vus sur classetice. Mais je ne sais pas comment elle fait, elle utilisait Jclic avant.

[mothsart]

Si tu tombes sur un tuto clair ça va très bien, un non-technicien c'est pas un beubeu non plus!

En fait, c'est plus le côté frustration que ça peut entraîner qui me dérange.
Je pense qu'on est tous frustré quand on fait un achat quelconque et qu'on fini par lire la notice ou qu'on va sur internet pour trouver de la doc. (on ce dit intérieurement : ça a été mal pensé car ça ne fonctionne pas avec les codes attendus)

La, c'est pareille : si on s'écarte du tuto pour faire un truc personnalisé et que le résultat est incohérent, la première émotion c'est la frustration et tous n'ont pas la logique de trouver le cheminement du pourquoi et de sa résolution.
La deuxième émotion risque d'être l’indécision : qu'est-ce que je fais ? Je refais depuis le début ou j'essai de résoudre ?

Réfléchir à l'UX c'est justement passer d'un scénario ou l'on accumule des émotions négatives (résoudre des points les uns derrière les autres pour obtenir un résultat final) à un scénario d'émotions positives : on produit rapidement quelque chose et on peut l'améliorer progressivement.

Je vois aussi un gros désavantage aux logiciels qui sont fortement couplés à des tutos : le numéro de version a son importance.
Imagine le soft qui a complètement changé de la v1 à la v2 : faut un tuto pour chaque, que l'utilisateur ne se trompe pas...

[Steph]

Il n'y a de liberté qu'encadrée. Jamais tu ne trouveras un exerciseur qui corresponde pile à ce que tu veux. Surtout qu'on a chacun notre mainère de voir. Si tu prends l'exemple des lms: il y en a qui aiment moodle, c'est d'ailleurs le plus populaire, pour moi c'est une vraie purge et je lui préfère 100 fois chamilo. Mais il y a bien des gens qui utilisent moodle et qui en sont satisfaits.

Ensuite, si je prends l'exemple de Jclic Author, certes, il peut évoluer, mais comme tout logiciel, regarde les handymenus: on a le glisser-déposer, le double-clic pour éditer (et là tu vas voir, il y en a qui n'auront rien lu et qui vont demander comment on fait). L'essentiel dans ce cas, c'est l'export en html5, d'ailleurs on n'est pas obligé d'utiliser tous le même soft une fois que c'est compatible pour tout.

Le truc sympa, ça serait les animations, pour le coup indisponibles sous Jclic Author: un exemple: le paralphabet. Si tu trouves le moyen de faire ça avec du javascript, html5 et toute la panoplie, ça sera très intéressant, et au lieu de te concentrer sur des logiciels qui peuvent aisément être remplacés par une appli créée sous Jclic Author, tu utiliseras tes connaissances pour faire un soft plus sympathique.

En gros il faudrait trier: ce qui peut être remplacé par Jclic Author (pas d'animations par exemple) et ce qui ne peut pas l'être. Là on tirera profit de nos diverses compétences: tu ne perdras pas ton temps à faire une appli somme toute simple à transférer / les contributeurs non-scripteurs (dont je fais partie) auront de quoi participer sans s'arracher les cheveux pour apprendre un code.

[mothsart]

Ok, Steph : je suis entièrement daccord. Toi qui utilise déjà ClicMenu et JClic Author, arriverais-tu à me ressortir une liste de softs ClicMenu qui n'ont pas de pareil dans le paysage Primtux et qui ne peuvent pas être réalisé à partir de JClic Author ?

Si oui, je m'attardes la dessus par ordre de priorité.

En attendant, je me concentre sur "paralphabet".

[Steph]

Je vais te faire ça mais petit à petit...

[Steph]

Dans clicmenu-mini, franchement il y a du boulot, c'est vraiment impossible sans plus de contributeurs et en plus ce n'est que mon avis selon ce que j'ai pu constater (utilité, ce qui plaisiat le plus... Mais j'ai une petite expérience en maternelle):

- Je compte avec Bip
- Le paralphabet
- Les puzzles de Zébulon
- Mon abécédaire
- Tangram (valable pour les 3 cycles)
- Zébulon le petit monstre vert.

[Philippe Dpt35]

@mothsart

Je travaille sur le drag et drop en html5, mais me heurte à quelques difficultés.

Les tutos que j'ai trouvés proposant les bases ne fonctionnent pas sur Firefox.

Lorsque je reprends les codes des tutos plus élaborés (html, css et js) cela ne fonctionne sur aucun navigateur alors que ça fonctionne sur leur page Web. Sans doute parce qu'elles intègrent des liens vers d'autres bibliothèques.

Donc, pour ne pas perdre de temps à travailler sur du code qui
- soit ne fonctionnera pas sur tous les navigateurs
- soit dépendra de bibliothèques externes

peux-tu m'indiquer un ou des bons tutos pour travailler le drag et drop en évitant ces deux écueils ?

[Philippe Dpt35]

J'ai regardé le code produit par jclic author.

Le html se réduit à un renvoi vers un fichier xml traité par javascript. Pas de css du coup.

Il sera donc très difficile, voire impossible de retravailler derrière pour en modifier, améliorer la présentation. Ce qui sera fait avec jclic author devra donc être considéré comme devant rester en l'état.

Dès lors, je pense qu'il est préférable de ne construire sur jclic que les applications dont on estimera que le rendu final sera suffisamment satisfaisant.

[mothsart]

Philippe :

1. Comme ça, je te conseillerais d'utiliser https://github.com/bevacqua/dragula
C'est assez facile à comprendre et utiliser et il vaut mieux que tu ai rapidement un produit fonctionel.
Ca sera toujours possible de la supprimer dans un second temps s'il faut.
Même avec mes années d'expérience, j'ai encore tendance à travailler par couche successive ou j'affine la qualité.
C'est un peu comme la peinture, l'amateur risque de se perdre dans le détail alors que le peintre expérimenté fait une esquisse et affine en plusieurs passent.
J'ai malheureusement perdu l'habitude de passer par des tutos donc difficile de t'aiguiller.

2. Oui, Jclic crée le css à partir du javascript: c'est une technique d'offuscation difficilement contournable.
Y'a toujours la solution (sale) d'ajouter un fichier css et de suffixé toutes les règles rajoutés par !important.

[Philippe Dpt35]

J'ai regardé l'outil du lien donné, et pas si simple et pratique: https://github.com/bevacqua/dragula

En effet, le code javascript donné pour obtenir les effets souhaités ne suffit pas. Si on crée un fichier js avec ce simple code, ça ne fonctionne pas. On peut le vérifier, depuis l'exemple donné, en remplaçant le fichier example.mini.js par example.js. Le drag & drop ne fonctionne plus. Il faut impérativement utiliser le example.mini.js, qui n'est pas en fait un code minifié, mais un code différent, plus complexe.

Difficile alors d'en avoir une maîtrise suffisante si l'on veut pouvoir ajouter des événements et des traitements lors de drag & drop, comme ce sera nécessaire pour créer des softs.

J'ai en revanche trouvé un tuto proposant les bases, très simples, fonctionnant sous Firefox et Chrome:
https://www.useragentman.com/blog/2010/0...-and-drop/

Je vais travailler avec ça.

[mothsart]

Désolé, je me suis trompé de lien :

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

Je viens de faire une rapide esquisse d'un remplaçant du paralphabet :
https://mothsart.github.io/labo/frontend/shootingstand/

Je suis parti sur l'idée d'un stand de tir ou les lettres défilent : quand on commence le jeu, l'utilisateur tire sur les lettres si il a été suffisamment rapide.
C'est pas fonctionnel ni esthétique pour un clou mais la structure est là.

Avant de peaufiner, est-ce que l'idée vous séduit-elle ?
C'est pensé responsive comme d'hab.

[Steph]

C'est marrant mais ça défile trop vite!