PrimTux

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

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

Annonce

CONSULTER LES MENTIONS LÉGALES RGPD.

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.

  • 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...

#26 04-12-2019 20:57:54

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Modification en ligne.
Si ça te convient, je referai un paquet.

Hors ligne

#27 04-12-2019 20:59:39

Steph
Administrateur
Inscription : 03-06-2015
Messages : 5 906

Re : Histoires en images à reconstituer

oui c'est bien.

En ligne

#28 05-12-2019 04:39:55

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Nouveau paquet disponible: histoires_1.1.1_all.deb
https://primtux.fr/Documentation/applis … .1_all.deb

Hors ligne

#29 05-12-2019 07:58:46

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

Re : Histoires en images à reconstituer

Juste une remarque pourquoi devoir appuyer sur "Commencer", vu que l'on sélectionne une histoire au dessus, il n'y a pas de niveau de difficultés ou autre... je ne vois pas la valeur ajoutée de devoir cliquer dessus.

Hors ligne

#30 05-12-2019 10:24:55

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Le lien en début de fil est obsolète. ça a été modifié.
Teste à partir de la page  https://primtux.fr/applications/
Lien direct vers cette application:  https://primtux.fr/applications/histoires/index.html

Hors ligne

#31 05-12-2019 16:58:20

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

Re : Histoires en images à reconstituer

Bonjour
On peut aussi créer des histoires séquentielles en images avec H5P
cf
https://h5p.org/node/670676


Voir cette video pour voir comment cela  est possible sur primtux (le fichier précedent a été fait sous primtux avec wordpress installé sous lampp avant d être envoyé sur H5P ) https://vimeo.com/377564482

parmi les avantages de H5P
la possibilité d'intégrer une consigne sonore
l'aspect multiplate-formes (ordi tablettes etc )
la faisabilité dans l'activité de création d' exercices par des eleves à partir du cours élémentaire

le suivi des réussites ( si intégration à un wordpress ...)

Remarque
l'installation du wordpress sur une primtux n'est pas une chose facile mais si l'on dispose d'une machine windows dans la classe il faut savoir que les wordpress en versions portable sur disque dur usb sont tout à fait fonctionnels et s'adaptent à quasiment toutes les machines en gardant la base de données intacte avec identifiants, articles et medias du wordpress,  exercices  et configuration de l'h5P.

Alain

Hors ligne

#32 05-12-2019 17:36:35

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Pour info:

l'application permet de rajouter très facilement ses propres séries d'images.

Il suffit de rajouter les liens vers les images, dans l'ordre séquentiel, dans le tableau du fichier images.js
On rajoute un bouton pour la série d'images en faisant un copier-coller d'une des lignes de boutons en début de fichier index.html en indiquant le nom que l'on veut donner à la série, et un changeant le numéro de liste dans les différents champs, et c'est fini ! L'application les prendra en compte et les proposera dans un ordre aléatoire.

Le plus long, c'est de trouver ou créer ses images !

L'application peut ainsi être réutilisée comme "moteur" pour ses propres séries d'images.

Hors ligne

#33 07-12-2019 12:03:13

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Je viens de te proposer quelques correctifs via une demande de merge : https://framagit.org/philippe-dpt35/his … ts/1/diffs

Dedans j'ai mis :

- un pointeur sur les images
- des marges équivalentes entre les images vertical et horizontales
- un peu de ménage de css
- un peu de ménage de js : en l'état, ta fonction "auSurvol" ne faisait jamais de décalage et par conséquent ne servait à rien.
J'ai pas été capable de savoir si c'est une régression ou un oubli de suppression

Hors ligne

#34 07-12-2019 12:17:51

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Une évolution qui serait sans doute approprié : la possibilité via l'URL de cibler une histoire x.
Ex: https://primtux.fr/applications/histoir … tml#le-ski qui ouvrirait directement l'histoire "Le ski"

L'idée en tâche de fond est de pouvoir proposer à l'avenir des handymenu thématiques.
Par exemple toutes les activités autours de :
- la classe de neige
- noël
- la chandeleur
- le carnaval
- pâques
etc.

Du coup, avec cette fonctionnalité, ça permettrais d'avoir des points d'entrée. Qu'en penses-tu ?
Si il faut te dev le truc, je peux le faire.

Hors ligne

#35 07-12-2019 14:10:39

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

mothsart a écrit :

- un peu de ménage de js : en l'état, ta fonction "auSurvol" ne faisait jamais de décalage et par conséquent ne servait à rien.

Si, elle crée un espace, lors du survol, qui permet d'intercaler les images entre elles. Avec ta version, il n'est pas possible de redéplacer un image pour l'intercaler entre deux autres.

Hors ligne

#36 07-12-2019 14:52:40

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Ah, ben en fait ça ne fonctionne pas sous chrome et vu que je dev dessus ben, j'en ai déduis que ça faisait rien.

Je vais corriger.

Y'a "puis clique sur [commencer]" qui n'est plus d'actualité dans les consignes.

De plus, je serais d'avis de ne pas afficher cette consigne pendant l'exercice.

Hors ligne

#37 07-12-2019 15:36:01

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

ça serait utile de savoir pourquoi ça ne fonctionne pas sous Chrome.
Je regarderai ça quand j'aurai un moment.

Hors ligne

#38 07-12-2019 16:20:47

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Philippe Dpt35 a écrit :

ça serait utile de savoir pourquoi ça ne fonctionne pas sous Chrome.
Je regarderai ça quand j'aurai un moment.

C'est lié à
ev.dataTransfer.getData('Text')
dans la fonction auSurvol
qui ne renvoie rien sous Chrome alors que ça fonctionne bien sous Firefox.
Et pour l'instant je n'arrive pas à savoir pourquoi !

Hors ligne

#39 07-12-2019 16:51:52

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

J'ai identifié et c'est un bug lié à Chrome. (https://stackoverflow.com/questions/190 … -in-chrome)
Ca me conforte dans l'idée que ce navigateur est SUR-coté face à Firefox : sur des tests automatisés, il parait clairement en avance, sur les faits c'est loin d'être le cas.
Tout ce qui me retient c'est les outils de debug et sans doute mes habitudes avec.

La solution proposé est d'utiliser une variable globale... ce qui est franchement un avis de faiblesse.
Du coup, je vais te proposer un correctif correspondant.

Perso, j'aurais sans doute pas fait les choses de la même façon que toi : déclarer des événements dynamiquement, c'est toujours à mon sens casse-gueule à débugger... mais je vais pas non plus tout refactoriser donc on va allé au plus rapide.

Hors ligne

#40 07-12-2019 17:21:28

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

mothsart a écrit :

Perso, j'aurais sans doute pas fait les choses de la même façon que toi : déclarer des événements dynamiquement, c'est toujours à mon sens casse-gueule à débugger...

ça m'intéresse de savoir comment tu t'y serais pris, au moins sur le principe, pour enrichir ma panoplie !
Je ne suis pas un spécialiste, et je suis déjà content quand je trouve une solution ! lol

Hors ligne

#41 07-12-2019 20:17:46

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Bon, voilà : c'est fait.

Je voulais que la zone lors du survol soit un carré propre au dimension d'une image avec les espaces intermédiaires.
Pour cela, j'utilise :
1. la propriété css :before qui bien sur ne s'applique pas des elements html autofermant tel que <img>
2. créer un élément englobant l'image en évitant de ne drager que l'img (attribut "draggable" de la balise img forcé à false)
+ m'assurer que l'ensemble du code fonctionne avec cette balise englobante.
3. éviter que le dragover et dragleave se déclenche sur la balise img : utilisation de la règle css "pointer-events: none;"

Hors ligne

#42 07-12-2019 21:06:45

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

J'ai fusionné.
C'est effectivement plus propre !
Fonctionnement OK avec Chrome sous Windows.
Le bon fonctionnement sous Chrome sera quand même à tenter d'assurer sur les applications en prévision de la mise en place de la réponse au tactile.

Hors ligne

#43 07-12-2019 21:06:47

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

PhilippeDpt35 a écrit :

ça m'intéresse de savoir comment tu t'y serais pris, au moins sur le principe, pour enrichir ma panoplie !
Je ne suis pas un spécialiste, et je suis déjà content quand je trouve une solution !

J'aurais créer le max de html à l'initialisation avec des éléments cachés.
Pour le drag and drop, j'aurais créer des zones de drop transparente dans receptacle de tailles équivalentes aux images.
Du coup, les événements peuvent être posé dessus dès le début.
Pareille, j'évite les positionnements avec du javascript. (je les ai d'ailleurs enlevé)

Ca évite pas mal de gymnastique intellectuel en fonctionnent ainsi.

Maintenant, je suis comme toi, j'ai pas toujours réponse à tout. (surtout sur les domaines que je pratique peu à titre pro : le drag and drop, par exemple, j'en fait pas ou peu)
Je lis beaucoup de doc, je recherche et expérimente pas mal (pour pas dire tâtonne parfois).
Le web, même si ça se standardise de plus en plus, y'a toujours une part de bidouille.

Hors ligne

#44 07-12-2019 23:14:11

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Pour la proposition de ciblage par l'URL, je viens de te faire une proposition de merge.

Hors ligne

#45 08-12-2019 00:03:55

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Je vois plusieurs problèmes :

-les boutons des séries faites ne se désactivent pas
- je n'avais pas vu, mais le bug était présent dans ta branche précédente: lorsqu'on arrive en bout de ligne dans le réceptacle, si on fait glisser une image entre deux, la dernière image passe à la ligne suivante, mais ne revient pas en place si on décide de ne pas faire le drop.

Hors ligne

#46 08-12-2019 07:05:12

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

Précision :
le bouton d'une série faite n'étant pas désactivé une fois la série faite et après vérification positive, si l'on reclique dessus, l'application plante.

Hors ligne

#47 08-12-2019 14:28:52

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Alors, pour la désactivation des séries réalisés, c'est corrigé. (désolé, je ne connaissais pas cette fonctionnalité et par conséquent, je suis passé à côté)
Pour le soucis en bout de ligne, j'ai fait au mieux mais ça reste bancale (surtout sur chrome) avant et après : il faudrait que le carré soit toujours positionné au bon endroit ce qui n'est pas le cas.
Et là, c'est un peu patatra : si on veut faire faut tricher à fond les manettes... je vais te faire une nième proposition.

Hors ligne

#48 08-12-2019 18:15:45

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

mothsart a écrit :

Pour le soucis en bout de ligne, j'ai fait au mieux mais ça reste bancale (surtout sur chrome) avant et après : il faudrait que le carré soit toujours positionné au bon endroit ce qui n'est pas le cas.
Et là, c'est un peu patatra : si on veut faire faut tricher à fond les manettes... je vais te faire une nième proposition.

Les fins de ligne sont effectivement délicates à gérer. C'était dans ma fonction "resize". Il est important de trouver une solution pour le faire, car sinon c'est vraiment gênant à l'usage.

Pour moi, ça n'a pas de sens de parler de "tricherie". ça doit fonctionner d'un point de vue utilisateur. Il vaut mieux un code moins joli mais qui fonctionne. L'utilisateur il s'en fiche du code. Il voit si ça fonctionne ou non.

Hors ligne

#49 08-12-2019 18:31:35

Philippe Dpt35
Administrateur
Lieu : Ille-et-Vilaine
Inscription : 28-10-2015
Messages : 3 157
Site Web

Re : Histoires en images à reconstituer

En revérifiant, ma solution de gestion de fin de ligne n'était pas très propre non plus. Certes l'image passée en ligne suivante revenait bien à sa place si on ne déposait pas, mais pendant le drag on assiste à des clignotements et des positionnements imprécis.

Hors ligne

#50 08-12-2019 22:47:27

mothsart
Modérateur
Inscription : 31-10-2016
Messages : 1 134

Re : Histoires en images à reconstituer

Voilà, j'ai effectué les modifs (sur la même demande de merge).

Oui, c'est bien les histoires de clignotement dont je te parle et c'était difficilement résoluble en l'état :
l'image se décale en dessous à l’événement "dragover" mais du coup, le curseur n'est plus au dessus de l'image et par conséquent, ça déclenche le "dragleave".

Du coup, j'ai changé le comportement en dupliquant (pendant le dragover) l'image et en jouant sur sa visibilité afin de garder le focus dessus.
Désolé mon week-end était chargé... du coup, j'ai fait ça un peu à l'emporte pièce.

Hors ligne

Pied de page des forums