Bannière du site
C'est la partie du forum consacrée aux idées et améliorations pour le site et/ou le forum. Toutes les idées sont les bienvenues !
-
Fouad En ligne
Plus d'infos
- Messages : 16899
- Enregistré le : 10 juin 2014, 18:06
- Nom : Fouad Ouchène
- Association : Société Mycologique de Strasbourg
- Localisation : Alsace-Vosges
- Plus d'infos
- Messages : 33060
- Enregistré le : 03 oct. 2011, 10:37
- Nom : Jean-Pierre Lachenal-Montagne
- Associations : Société Mycologique de France - Associu U Muchjinu : Société Mycologique de Porto-Vecchio
- Localisation : Paris, parfois Corse
- Plus d'infos
- Messages : 3402
- Enregistré le : 08 sept. 2017, 17:24
- Nom : Nicolas Schwab
- Associations : Société Mycologique de Tramelan - Société Mycologique des Montagnes Neuchâteloises
- Localisation : Renan, BE (Suisse)
04 févr. 2020, 22:21Jplm a écrit : Bonsoir,Non, il est uniquement présent sur la version PC.
Ca a été très vite, je n'ai pas encore eu l'occasion de voir sur PC, je commenterai le moment venu.
Le sous-titre Portail mycologique francophone que j'aimais bien à t-il définitivement disparu ?
Jplm
Mycologue intégriste radicalisé.
- Plus d'infos
- Messages : 3383
- Enregistré le : 14 oct. 2005, 11:39
- Nom : Félicien Corbat
- Associations : Société mycologique d'Ajoie - Société mycologique de Genève
- Localisation : Versoix (Genève), Bonfol (Jura), Suisse
04 févr. 2020, 18:42Fouad a écrit : Bonsoir à tous,Bonsoir,
Je n'arrive pas à m'habituer au losange et à la multitude d'angles dans "l'enseigne"
Par rapport à la bannière, je laisse la parole à Nicolas. Personnellement, je la trouve jolie mais je ne suis peut-être pas une référence en la matière
Il est toujours possible d'en discuter. Qu'est-ce que tu changerais Fouad ? Il y a d'autres avis ?
Pour éviter d'avoir un sujet à rallonge, je divise le sujet avec pour titre bannière.
"Tous les champignons sont comestibles, certains une fois seulement." Coluche
- Plus d'infos
- Messages : 3402
- Enregistré le : 08 sept. 2017, 17:24
- Nom : Nicolas Schwab
- Associations : Société Mycologique de Tramelan - Société Mycologique des Montagnes Neuchâteloises
- Localisation : Renan, BE (Suisse)
04 févr. 2020, 18:42Fouad a écrit : Bonsoir à tous,Difficile d'y répondre. C'est un avis personnel et s'il est formulé seul, je ne peux rien améliorer. Je vais tout de même répondre que la tendance en matière de design est d'utiliser des géométries simples. Les arrondis sont beaucoup utilisés chez Google (Material Design ; plutôt Android) et Apple (Human Interface ; plutôt iOS et macOS), mais beaucoup moins chez IBM (Carbon ; plutôt web) et Microsoft (Fluent Design System ; plutôt Windows 10), par exemple. En conclusion, cela dépend grandement du ciblage de l'application et en matière de web, c'est généralement un système de design interne qui est utilisé.
Je n'arrive pas à m'habituer au losange et à la multitude d'angles dans "l'enseigne"
Le problème est ici la consistance entre les différents éléments du site et il est vrai que ce n'est pas forcément le cas ici. Cela ne me dérangerait pas de re-designer le site (seulement du côté UI, le UX est bon). Il faut aussi dire que certaines règles d'accessibilité ne sont pas respectées, ce qui peut être gênant pour certaines personnes. A voir selon les envies.
Mycologue intégriste radicalisé.
- Plus d'infos
- Messages : 3383
- Enregistré le : 14 oct. 2005, 11:39
- Nom : Félicien Corbat
- Associations : Société mycologique d'Ajoie - Société mycologique de Genève
- Localisation : Versoix (Genève), Bonfol (Jura), Suisse
- Plus d'infos
- Messages : 3402
- Enregistré le : 08 sept. 2017, 17:24
- Nom : Nicolas Schwab
- Associations : Société Mycologique de Tramelan - Société Mycologique des Montagnes Neuchâteloises
- Localisation : Renan, BE (Suisse)
04 févr. 2020, 23:39felicien a écrit : Personnellement, ça me va bien de te laisser gérer la partie frontend, ce n'est pas ce que je préfèreComme je te l'ai dit en privé, j'aime bien le front-end. Ce n'est pas que j'aime moins le back-end, mais surtout le fait que je n'ai jamais vraiment travaillé avec des frameworks PHP qui me gêne pour l'instant dans cette partie. Bref, là n'est pas le sujet. Je peux m'en occuper, y compris pour la partie design. Je ne pense par contre pas refaire de sondage comme pour l'en-tête, cela prendrait trop de temps. J'ouvrirai un sujet pour les retours.
Mycologue intégriste radicalisé.
-
Nommo En ligne
Plus d'infos
- Messages : 23104
- Enregistré le : 18 août 2017, 18:36
- Nom : François Desprès
- Association : Alès
- Localisation : Gard
- Plus d'infos
- Messages : 26484
- Enregistré le : 23 sept. 2011, 17:11
- Nom : Laurent Francini
- Association : LA CHANTERELLE DE VILLE-LA-GRAND
- Localisation : La Yaute - Haute-Savoie (la «vraie» Savoie) ;-)
J'imagine qu'on parle de ce que l'internaute voit (l'aspect graphique, les liens, la couleur des différents éléments, donc l'interface) et de ce qu'on ne voit pas (le code qui est derrière, pour parler simple). J'ai fait mon site internet tout seul, comme un grand, sans rien y connaître au départ, mais de façon empirique, sans maîtriser du tout le code html, ni le javascript, et encore moins le php, pour ne parler que de ça. J'ai voulu m'y mettre, à un moment, et puis j'ai laissé tomber (trop compliqué). Donc, j'ai utilisé un logiciel (Dreamweaver) pour faire tout ça du mieux que je peux. J'ai fait des erreurs, au début, et puis j'ai fini par trouver un bon compromis entre automatismes et code. Ça ferait hurler de rire un spécialiste, mais moi ça me va...
http://www.francini-mycologie.fr/index.html • Myco-botaniste passionné! • Nikon D90 - F-S DX 18-200 mm f:3,5/5,6 G ED VRII - AF-S Nikkor 105 mm macro f:2.8 G ED - Micro Nikkor 60 mm f:2.8
- Plus d'infos
- Messages : 3383
- Enregistré le : 14 oct. 2005, 11:39
- Nom : Félicien Corbat
- Associations : Société mycologique d'Ajoie - Société mycologique de Genève
- Localisation : Versoix (Genève), Bonfol (Jura), Suisse
05 févr. 2020, 14:00castor74 a écrit : J'imagine qu'on parle de ce que l'internaute voit (l'aspect graphique, les liens, la couleur des différents éléments, donc l'interface) et de ce qu'on ne voit pas (le code qui est derrière, pour parler simple). J'ai fait mon site internet tout seul, comme un grand, sans rien y connaître au départ, mais de façon empirique, sans maîtriser du tout le code html, ni le javascript, et encore moins le php, pour ne parler que de ça. J'ai voulu m'y mettre, à un moment, et puis j'ai laissé tomber (trop compliqué). Donc, j'ai utilisé un logiciel (Dreamweaver) pour faire tout ça du mieux que je peux. J'ai fait des erreurs, au début, et puis j'ai fini par trouver un bon compromis entre automatismes et code. Ça ferait hurler de rire un spécialiste, mais moi ça me va...Oui, le front-end correspond à la partie graphique (HTML, CSS, javascript, ...), c'est ce que l'utilisateur voit. J'ai utilisé bootstrap comme framework (https://getbootstrap.com), c'est facile d'utilisation. On peut ajouter des boutons, des listes, ... et on utilise des variables que nous donne le back-end.
Le back-end est en php (ici, c'est le framework symfony et phpBB) et on communique avec la base de données (MySQL). C'est là qu'on s'occupe de mettre les données dans la base, de les récupérer, ... Le site est basé sur phpBB qui lui-même utilise des composant de Symfony. J'ai donc créé une extension à phpBB pour ajouter les différents éléments en plus dont on a besoin (les pages hors forum, la taxonomie, ...).
Mais il n'y a pas de soucis à créer un site statique comme le tien. Tu es seul pour y ajouter du contenu donc ça va très bien.
"Tous les champignons sont comestibles, certains une fois seulement." Coluche
-
Fouad En ligne
Plus d'infos
- Messages : 16899
- Enregistré le : 10 juin 2014, 18:06
- Nom : Fouad Ouchène
- Association : Société Mycologique de Strasbourg
- Localisation : Alsace-Vosges
- Plus d'infos
- Messages : 3402
- Enregistré le : 08 sept. 2017, 17:24
- Nom : Nicolas Schwab
- Associations : Société Mycologique de Tramelan - Société Mycologique des Montagnes Neuchâteloises
- Localisation : Renan, BE (Suisse)
08 févr. 2020, 18:14Fouad a écrit : C'est bien meilleur, mais si je peux me permettre cette suggestion :Je partais là-dessus originellement. Mais le problème est que c'est très difficilement réalisable. Je peux tout de même essayer.
IMG_1045.jpg
Mycologue intégriste radicalisé.
- Plus d'infos
- Messages : 33060
- Enregistré le : 03 oct. 2011, 10:37
- Nom : Jean-Pierre Lachenal-Montagne
- Associations : Société Mycologique de France - Associu U Muchjinu : Société Mycologique de Porto-Vecchio
- Localisation : Paris, parfois Corse
Bonjour,
De retour de Corse, je vois enfin la nouvelle bannière sur grand écran.
Plusieurs choses me plaisent : d'abord le sous-titre "Portail mycologique francophone" a été conservé ; ensuite, les polices ont été homogénéisés avec les mots "Champis.net" et le reste du site, enfin le tout a été mis en transparence pour ne pas masquer les photos ni ajouter une ligne supplémentaire.
En revanche, comme Fouad, je tique un peu sur le losange. S'il est conservé, il faudrait a minima comme le suggère Fouad que le texte soit inscrit dans un parallélogramme au lieu de se terminer en pointe de flèche, ça éviterait un angle supplémentaire. En même temps ce parallélogramme n'aurait pas beaucoup plus de sens que le losange lui-même : ce qui gêne est peut-être que ces figures sont en surimpression sur un bandeau qui lui est rectangulaire, encadré de deux barres rectangulaires et contenant des photos rectangulaires... notez-bien comme ça ça tranche... et je n'ai pas grand chose d'autre à proposer.
Je continue à réfléchir, il n'y a aucune urgence à changer, ce n'est pas affreux tel que c'est.
Jplm
De retour de Corse, je vois enfin la nouvelle bannière sur grand écran.
Plusieurs choses me plaisent : d'abord le sous-titre "Portail mycologique francophone" a été conservé ; ensuite, les polices ont été homogénéisés avec les mots "Champis.net" et le reste du site, enfin le tout a été mis en transparence pour ne pas masquer les photos ni ajouter une ligne supplémentaire.
En revanche, comme Fouad, je tique un peu sur le losange. S'il est conservé, il faudrait a minima comme le suggère Fouad que le texte soit inscrit dans un parallélogramme au lieu de se terminer en pointe de flèche, ça éviterait un angle supplémentaire. En même temps ce parallélogramme n'aurait pas beaucoup plus de sens que le losange lui-même : ce qui gêne est peut-être que ces figures sont en surimpression sur un bandeau qui lui est rectangulaire, encadré de deux barres rectangulaires et contenant des photos rectangulaires... notez-bien comme ça ça tranche... et je n'ai pas grand chose d'autre à proposer.
Je continue à réfléchir, il n'y a aucune urgence à changer, ce n'est pas affreux tel que c'est.
Jplm
Jean-Pierre Lachenal-Montagne
- Plus d'infos
- Messages : 3402
- Enregistré le : 08 sept. 2017, 17:24
- Nom : Nicolas Schwab
- Associations : Société Mycologique de Tramelan - Société Mycologique des Montagnes Neuchâteloises
- Localisation : Renan, BE (Suisse)
Je me suis peut-être un peu mal fait comprendre. Oui, j'avais initialement prévu d'en faire une parallélogramme (j'en avais même réalisé un). Mais le problème, c'est que ça demande un assez gros effort afin que la bannière soit "responsive". C'est à dire, qu'elle fonctionne sur tous les types de supports. Pour le voir, essayez de redimensionner la fenêtre. Quand elle est assez petite, elle passe en mode mobile (taille d'un écran de téléphone). C'est difficile à gérer avec le parallélogramme, car l'espace à la fin pose problème au niveau de la forme.
Mycologue intégriste radicalisé.
Bonjour,
plutôt qu'un clip-path, j'utiliserais transform: skew(-45deg).
Comme c'est l'ensemble de ton <h3> qui va se retrouver déformé, il te faut "retransformer" ton texte dans l'autre sens.
Problème : ton texte est entre des balises "inline" (strong et span), et les éléments inline ne prennent pas en compte la propriété transform.
Solution : ajouter à ta définition la propriété inline-block. (Attention : il faudra aussi modifier ta classe .d-md-inline)
Ce qui nous amène à :
plutôt qu'un clip-path, j'utiliserais transform: skew(-45deg).
Comme c'est l'ensemble de ton <h3> qui va se retrouver déformé, il te faut "retransformer" ton texte dans l'autre sens.
Problème : ton texte est entre des balises "inline" (strong et span), et les éléments inline ne prennent pas en compte la propriété transform.
Solution : ajouter à ta définition la propriété inline-block. (Attention : il faudra aussi modifier ta classe .d-md-inline)
Ce qui nous amène à :
Code : Tout sélectionner
.champis-title {
//tes propriétés déjà définies, avec un peu d'adaptation concernant le padding left et top
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
//supprime ton clip-path
}
h3.champis-title strong,
h3.champis-title span {
-webkit-transform: skew(45deg);
transform: skew(45deg);
display: inline-block;
}
@media (min-width: 768px) {
display: inline-block!important
}
Débutant qui débute... Pas encore mycologue, mais mycophile passionné