Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
Voilà : https://framagit.org/philippe-dpt35/alac...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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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 !
Messages : 5,465
Sujets : 157
Inscription : Dec 2021
Réputation :
8
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
Philippe a tout dis.
Les iframes ça sert à inclure du contenu que tu ne maitrises pas : genre des pubs dans un site.
Messages : 5,465
Sujets : 157
Inscription : Dec 2021
Réputation :
8
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.
Messages : 5,465
Sujets : 157
Inscription : Dec 2021
Réputation :
8
C'est normal ces rectangles orange dans les enclos? On dirait que les animaux ont un filtre devant eux:
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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/a...pagne.html
ou en récupérant depuis les sources ici: https://framagit.org/philippe-dpt35/alac...ree/master
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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:
Messages : 5,465
Sujets : 157
Inscription : Dec 2021
Réputation :
8
Autant mettre un petit enclos sous la liste des animaux.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
Steph a écrit :Autant mettre un petit enclos sous la liste des animaux. Oui, ça serait pas mal !
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
Je viens de me rendre compte que ce que j'avais pris pour un rocher est en réalité le tas de fumier !
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
Voilà, j'ai mis un petit enclos au-dessus des animaux.
Exit le trou glauque !
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
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
Citation :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.
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
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.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
Voilà, c'est mis à jour avec l'illustration terminée :
https://framagit.org/philippe-dpt35/alacampagne
J'en ai profité pour améliorer le responsive. N'hésitez pas à faire vos retours sur ce fil.
Messages : 1,524
Sujets : 114
Inscription : Oct 2016
Réputation :
1
Dans l'ensemble, c'est très bien : fonctionnel.
Quelques petites retouches possibles :
- sous certaines tailles, les boutons sont partielles cachés. (tu devrais t'en sortir avec une police en pourcentage ou avec des media queries)
- sous chrome : les nombres dépassant la dizaine pose soucis (ça doit sans doute provenir des tailles de police par défaut : pas les mêmes selon les navigateurs)
- les animaux dans les infos bulles semblent étirés : mettre width:auto; devrait règler
- un peu de padding dans les infos bulles
- un choix de couleur plus appropriés pour les infos-bulles : fond blanc serait sans doute mieux.
dans l'idéal, ne pas utiliser d'image : tout en css.
Messages : 3,313
Sujets : 85
Inscription : Oct 2015
Réputation :
8
mothsart a écrit :- sous certaines tailles, les boutons sont partielles cachés. J'avais déjà corrigé ce problème en mettant des polices proportionnelles. Je n'ai pas réussi à reproduire le problème, même sous Chrome.
Peux-tu m'indiquer le navigateur utilisé et le ratio sous lequel tu as eu le problème ?
Pour les autres remarques, je pense avoir corrigé.
Sinon je galère pour maintenir les animaux dans les enclos en fonction des ratios largeur/longueur d'écran. Les possibilités en media queries sont trop nombreuses compte-tenu de l'importante modification de la taille des enclos dans l'illustration suivant les ratios.
Je viens de voir qu'il existait une propriété aspect-ratio. ça serait peut-être plus efficace que d'utiliser media screen avec des max-width et min-height. Ou as-tu peut-être une autre piste ?
|