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

#26 11-01-2019 00:44:39

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

Re : ClicMenu : A la campagne

Voilà : https://framagit.org/philippe-dpt35/ala … requests/1

C'est brouillon faute de temps mais y'a une esquisse pour la ligne 1. (la ligne 2 c'est strictement la même chose avec un décalage)
Y'a plusieurs modifs :
1. Le déplacement de noeuds
2. background-size: contain; // le svg prend la taille la plus grande possible selon la dimension de la fenêtre sans jamais être tronqué
3. utilisation de : @media screen and (orientation:portrait) {
tout ce qui est à l'intérieur ne concerne que l'écran quand il est en mode portrait
4. les unités vh correspondent à un pourcentage de la hauteur (vw de la largeur) : pratique pour définir une taille en mode paysage d'une zone proportionnelle à la hauteur

J'ai colorié volontairement les zones à caler le temps que tu fasses les ajustements.

Hors ligne

#27 11-01-2019 15:51:25

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

Re : ClicMenu : A la campagne

Merci pour ton aide, mothsart !

Je termine une fonction permettant d'afficher une boîte de dialogue avec des images, ce qui n'est pas possible avec "alert()", et je m'y mets !

Hors ligne

#28 11-01-2019 19:01:20

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

Re : ClicMenu : A la campagne

En quoi une iframe c'est du bricolage dans ce cas? De nombreux sites les utilisent, pour les clicmenus si j' n'imposais pas une taille à wine on perdrait la moitié des activités.

Hors ligne

#29 11-01-2019 19:39:25

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

Re : ClicMenu : A la campagne

C'est pratique pour imposer un taille d'application, mais ça n'est pas adaptable à la taille d'affichage.

Quitte à refaire les applications, c'est mieux de les faire en responsive design de façon à ce qu'elles puissent s'adapter à n'importe quel format et taille d'écran.

Hors ligne

#30 11-01-2019 20:00:57

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

Re : ClicMenu : A la campagne

Philippe a tout dis.

Les iframes ça sert à inclure du contenu que tu ne maitrises pas : genre des pubs dans un site.

Hors ligne

#31 11-01-2019 21:16:13

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

Re : ClicMenu : A la campagne

Mon premier site (2001) était en html et contenait des iframes avec des pages que je maîtrisais, étant donné qu'il n'y avait évidemment pas de pubs. Testé dans de nombreuses résolutions d'affichage, elles m'ont évité bien des soucis.
Il est bien évident qu'il faut maintenant s'adapter aux smartphones et que ce n'est plus l'idéal, mais je ne faisais qu'émettre une idée. Comme PrimTux est destinée aux PC, imposer un 1024x768 en iframe ne me paraissait pas si abracadabrantesque.

Hors ligne

#32 11-01-2019 21:18:50

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

Re : ClicMenu : A la campagne

C'est normal ces rectangles orange dans les enclos? On dirait que les animaux ont un filtre devant eux:

Sélection_207.png

Hors ligne

#33 11-01-2019 21:33:23

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

Re : ClicMenu : A la campagne

Ce n'est pas terminé et en cours de mise en place.
Ces zones ne sont là que pour faciliter la mise en place, elles disparaîtront.

Il faut patienter pour tester, je referai un message pour indiquer quand ce sera bon.

Hors ligne

#34 12-01-2019 12:34:40

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

Re : ClicMenu : A la campagne

Voilà, ça touche à sa fin.

Merci à tous ceux qui voudront bien tester pour remonter les éventuels bugs, et faire part de leurs idées d'amélioration.

Test en ligne ici: https://www.de-bric-et-de-broc.fr/test/ … pagne.html

ou en récupérant depuis les sources ici: https://framagit.org/philippe-dpt35/ala … ree/master

Hors ligne

#35 12-01-2019 13:36:52

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

Re : ClicMenu : A la campagne

C'est beaucoup mieux ! Bravo ! Testé et approuvé sur Chrome et Firefox.

J'ai dessiné le tas de fumier pour remplacer le "trou" (ça à faire rire mon collège qui trouvais ça glauque).

Des points de détail (sans urgence) :
* Quand on resize la fenêtre, les boutons masque parfois le texte
* il y a une barre de scroll vertical indésirable : soit tu supprimes la propriété "height: 100%;" sur #reserve soit tu mets un "overflow: hidden;"

Je vais devoir terminer l'illustration. Y'a la grange qui me pose soucis : la tronquer c'est pas génial. Soit je la dessine en entier soit je la retire : dans les 2 cas,  ça nécessitera sans doute de retoucher le positionnement du drag and drop, j'en ai peur.

Hors ligne

#36 12-01-2019 15:33:51

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

Re : ClicMenu : A la campagne

mothsart a écrit :

J'ai dessiné le tas de fumier pour remplacer le "trou" (ça à faire rire mon collège qui trouvais ça glauque).

On peut aussi tout simplement proposer de faire glisser sur le rocher ou l'un des potagers en bas de l'image.

Pour le glauque, j'avais même pensé un moment à un ogre !  lol

Hors ligne

#37 12-01-2019 15:38:57

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

Re : ClicMenu : A la campagne

Autant mettre un petit enclos sous la liste des animaux.

Hors ligne

#38 12-01-2019 15:52:47

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

Re : ClicMenu : A la campagne

Steph a écrit :

Autant mettre un petit enclos sous la liste des animaux.

Oui, ça serait pas mal !

Hors ligne

#39 12-01-2019 16:00:49

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

Re : ClicMenu : A la campagne

Je viens de me rendre compte que ce que j'avais pris pour un rocher est en réalité le tas de fumier !  sad

Hors ligne

#40 12-01-2019 16:32:45

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

Re : ClicMenu : A la campagne

Voilà, j'ai mis un petit enclos au-dessus des animaux.

Exit le trou glauque !

Hors ligne

#41 12-01-2019 17:48:04

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

Re : ClicMenu : A la campagne

mothsart a écrit :

Des points de détail (sans urgence) :
* Quand on resize la fenêtre, les boutons masque parfois le texte
* il y a une barre de scroll vertical indésirable : soit tu supprimes la propriété "height: 100%;" sur #reserve soit tu mets un "overflow: hidden;"

Corrigé.
Pour les très petites dimensions, j'élimine les consignes pour privilégier les boutons de commande.

Hors ligne

#42 12-01-2019 18:38:20

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

Re : ClicMenu : A la campagne

Pour ceux qui veulent tester ce que donne l'affichage en fonction des divers appareils existants (smartphone, tablette, TV...) on peut le simuler facilement dans Firefox.
Il faut aller dans le menu principal --> développement Web --> vue adaptative.

Dans la fenêtre qui s'affiche, on choisit les différents dispositifs en haut à gauche (on peut en enlever ou en rajouter en cliquant sur "Modifier la liste"). On peut passer en mode portrait ou paysage du dispositif en cliquant sur le petit bouton de la résolution en haut au centre.

On peut modifier manuellement la résolution pour un appareil spécifique si on le souhaite.

Hors ligne

#43 12-01-2019 19:19:48

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

Re : ClicMenu : A la campagne

Si je comprend bien : le fumier ne sert plus à rien (à la base, je savais qu'il y avait encore du taf pour que ça ressemble pas à un rocher mais je travaille toujours de manière général en affinant les détails en plusieurs passes)... je vais le supprimer.
En revanche, pour l'enclos, il faut que je l'inclus dans mon svg, non ? (là t'as fait une image à partir du svg)

1. Les images des animaux sont étirés : il faudrait leur donner un ratio fixe.
Faudrait sans doute partir sur vectoriel aussi (j'ai un peu de mal avec les mix) mais je chipote.
2. Tu t'ais embêter à créer une image poule et poule-mini. C'est bête car tu te retrouves avec une image mini qui charge pour rien.
En réalité, c'est la même image avec des tailles différentes. Ton navigateur l'a déjà en cache donc tu évites un appel http en mettant la même image mais avec des tailles plus petites dans ton css.
3. J'aurais fait la bulle en pure css mais ça reste du détail

Pour les très petites dimensions, j'élimine les consignes pour privilégier les boutons de commande.

Oui, c'est mieux. Dans l'idéal, faudrait mettre en place un bouton "?" avec une modal qui s'ouvre sur les petites résolutions.

Hors ligne

#44 12-01-2019 19:24:41

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

Re : ClicMenu : A la campagne

Ca reste très bien dans l'état des choses : j'aurais tendance à dire, arrête toi jusqu'à obtention du svg finale. Tu fais les petits ajustages et tu t'arrêtes là. Ca permet de te concentrer sur un autre exercice.
Une fois qu'on aura une batterie suffisamment conséquente, on pourra toujours refaire une passe d'amélioration sur l'ensemble.

Surtout que tu as des briques que tu réutilises donc autant rester cohérent sur l'ensemble => même UX sur le groupe.

Hors ligne

#45 12-01-2019 20:26:47

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

Re : ClicMenu : A la campagne

mothsart a écrit :

En revanche, pour l'enclos, il faut que je l'inclus dans mon svg, non ? (là t'as fait une image à partir du svg)

Non, parce qu'on n'arrivera pas à l'avoir sur le bord gauche quelle que soit la résolution (ou plus difficilement). C'est plus simple de l'isoler.

Hors ligne

#46 15-04-2019 16:38:16

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

Re : ClicMenu : A la campagne

j'ai enfin terminé l'illustration Philippe : https://openclipart.org/detail/318457/farm
J'ai exercé ta patience mais le rendu finale devrait te plaire.

Hors ligne

#47 15-04-2019 17:01:54

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

Re : ClicMenu : A la campagne

Merci !
Je finis quelques autres développements et je me replonge dans le javascript que j'ai délaissé depuis quelques semaines (voire mois !). Il me faut également affiner la balance virtuelle.

Hors ligne

Pied de page des forums