[Fouad]

Bonsoir à tous,
Je n'arrive pas à m'habituer au losange et à la multitude d'angles dans "l'enseigne"

[Jplm]

Bonsoir,

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

[NSchwab]

Bonsoir,

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

Non, il est uniquement présent sur la version PC.

[Félicien]

Bonsoir à tous,
Je n'arrive pas à m'habituer au losange et à la multitude d'angles dans "l'enseigne"

Bonsoir,

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.

[NSchwab]

Bonsoir à tous,
Je n'arrive pas à m'habituer au losange et à la multitude d'angles dans "l'enseigne"

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

[Félicien]

Personnellement, ça me va bien de te laisser gérer la partie frontend, ce n'est pas ce que je préfère

[NSchwab]

Personnellement, ça me va bien de te laisser gérer la partie frontend, ce n'est pas ce que je préfère

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

[Nommo]

Vous vous exprimez dans une langue qui m’est étrangère mais je vous fais confiance, champis.net est dans de ( très ) bonnes mains.

[Castor74]

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

[Félicien]

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.

[Fouad]

C'est bien meilleur, mais si je peux me permettre cette suggestion :

[NSchwab]

C'est bien meilleur, mais si je peux me permettre cette suggestion :
IMG_1045.jpg

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.

[Jplm]

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

[NSchwab]

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.

[Vinny]

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 à :

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
}