Avis sur mon site PronosticsCourses.fr

Membre Honoré
Bonjour,

Quelques simples avis :
- Vous pouvez améliorer le design
- Eviter les sur-optimisations
- Mieux utiliser le CSS (exemple : <p><br/></p>)
- Corriger les erreurs de code (vérifier avec le validateur W3C)

Cordialement.
 
WRInaute accro
Bonjour Madrileno

C'est noté.

Le CSS est conforme W3C, mais la charte graphique est foireuse : Nombreuses couleurs similaires.

Je vais faire deux petits scripts en php qu vont arranger mon script css, en ajustant les couleurs suivant les conseils du site Dareboost : 1er script pour mettre les couleurs en mode #xxyyzz; , et le 2ème script qui évaluera et traduira les couleurs similaires.

Pour le design, je vais probablement changer la couleur de foreground des boutons des liens internes.

Pour les : <p><br /></p> je verrai.

Quant aux erreurs W3C HTML, je suis obligé de garder les alt="" mais je verrai si c'est possible de mettre les <em> et <span> en mode block ou inline-block.

Mais je ne crois pas que celà change grand chose par rapport à la validation HTML. ;(

Les alt="" me permettent de cacher l'arrière-plan des <input type="image"> des formulaires de la notation à étoiles.

Merci beaucoup Madrileno. ;)

Très respectueusement.
 
WRInaute accro
Bonjour

Pour homogénéiser ma charte graphique ( script new_style.css ), j'ai fait deux petits scripts en php, le premier convertit toutes les couleurs au mode : rgb(x,y, z), et le second ( pour l'instant ), m'affiche les coordonnées des couleurs similaires, par degré décroissant de similarité.

J'ai pris ( naïvement ) comme indice de poids : x + 1000 * y + 1000000 * z.

Celà me permet de trier la suite de couleurs par degré décroissant de différence de cet indice, entre une couleur et la couleur suivante dans la liste( triée ).

Cet indice n'est pas fiable pour comparer des couleurs, mais je ne sais pas quel algorithme f(x, y, z) utiliser pour celà.

Quel algorithme utiliser pour comparer des couleurs ?

Merci beaucoup beaucoup pour vos avis.

Respectueusement.
 
WRInaute accro
Bonjour

J'ai trouvé sur le net un site très complet qui m'a secouru. ;)



Code:
        $R = $array_value[$k][0];
        $G = $array_value[$k][1];
        $B = $array_value[$k][2];

        $denom = ($R - $G) * ($R - $G) + ($R - $B) * ($G - $B);

        if($denom > 0)
        {
                $T = acos((($R - $G) + ($R - $B)) / sqrt($denom));

                if($B > $G)
                {
                        $T = 360 - $T;
                }

                $S = 1 - 3 * min($B, min($R, $G));

                $I = ($R + $G + $B) / 3.0;

                if($I > 0)
                {
                        $array_poids[$k] = floor(0.5 + 10000 * $T * $S / $I);
                }
        }
        else
        {
                $array_poids[$k] = 0;
        }

$T = teinte,
$S = saturation,
$I = luminosité.

J'ajuste un peu le coefficient $array_poids[] pour qu'il soit entier et triable facilement.

J'ai jugé bon de le pondérer par $I, merci me dire ce que vous en pensez.

J'ai encore un bug dans mon implémentation.

Respectueusement.
 
WRInaute passionné
Salut, pour le design, j'ai mis du temps mais un jour je m'y suis mis pour un site j'ai utilisé bootstrap et pour le thème j'utilise bootswatch. J'en suis même arrivé à mettre un theme switcher pour que l'utilisateur choisisse son theme préféré dans ceux de bootswatch qui ont un fond clair et j'ai même fait en sorte que celui par défaut (quand le visiteur arrive pour la première fois) change tous les mois (car il y a 12 themes bootswatch avec fond clair)..

Bref, au lieu de chercher un bon design graphique, maintenant ça devient juste une variable, c'est pas important car le contenu est structuré avec ce dont bootstrap a besoin, et donc il est lisible quelque soit le thème choisit.
C'est toujours plus propre que si je choisissais moi-même mes couleurs préférées ou autre..

http://getbootstrap.com
https://bootswatch.com

J'ai juste a mettre dans le head :
css de bootstrap
css de booswatch
jquery
Tout ca en CDN, pas hébergé sur mon site.

Et pour le theme switcher j'ai mis un code jquery, ca permet de changer de theme sans meme recharger la page. LE theme switcher est juste un menu deroulant dans la barre de navigation.
 
WRInaute accro
+1000 pour bootstrap/bootswatch, c'est le design à portée des développeurs :)

J'utilise bower / bootswatch / Font Awesome / Select2 / Pnotify / node-sass / ... dans tous mes projets perso.

J'ai déjà fait idem pour le thème switcher:
Code:
<link rel="stylesheet" href="{% bower 'bootswatch/{theme}/bootstrap.min.css' theme=request.COOKIES.themeName|default:'yeti' %}" id="bootstrap-theme">

Code:
$('body').on('click', '#theme-dropdown .dropdown-menu li a', function(e) {
	e.preventDefault();
	var themeName = $(this).attr('data-theme');
	var themeUrl = "{% bower 'bootswatch/{theme}/bootstrap.min.css' theme='{0}' %}".format(themeName);
	$('#bootstrap-theme').attr('href', themeUrl);
	Cookies.set('themeName', themeName, { expires: 365 });
});
 
WRInaute accro
Bonjour

Celà nécessite du JQuery ( Javascript ).

Et... Si on veut faire un site compatible AMP ?

Je cherche actuellement à enlever tous mes scripts Javascript.

Merci beaucoup de votre aide.

Amicalement.
 
WRInaute accro
AMP n'interdit pas complètement le JS, relis bien la doc...
Ta page d'accueil en comporte même en tout 10 externes, et je n'en vois qu'un seul qui suit les recommandations AMP.
Il y a aussi d'autres "Required mark-up" manquants.
 
WRInaute accro
Bonjour Spout

Je ne sais même pas si un jour mon site sera compatible AMP. ;)

Je n'ai plus ( pour n'avoir aucun Javascript perso ), qu'à enlever ceux nécessaires à l'affichage de mes pronos et stats, et des menus de haut et bas de page.

J'ai écrit ce matin une fonction ( pas encore vérifiée ), pour évaluer le degré de similarité entre deux couleurs :

couleur1 : rgb(x1, y1, z1),
couleur2 : rgb(x2, y2, z2).


racine_carrée( (x1 - x2) * (x1 - x2) + (y1 - y2) * ( y1 - y2) + ( z1 -z2 ) * ( z1 - z2) )
------------------------------------------------------------------------------------------------------
| x1 - x2 | + | y1 - y2 | + | z1 - z2 |


| x | est la valeur absolue de x.

Je vais voir le degré ( si j'ose dire ) de viabilité de cette fonction ce soir.

Merci de me donner vos impressions et avis à propos de cette fonction.

Merci beaucoup de ton aide.

Respectueusement.
 
Nouveau WRInaute
Bonjour,

Ta formule considère qu'entre deux couleurs, si une seule composante varie de l'une à l'autre (par exemple le rouge), alors tu tombes toujours sur 1 (numérateur et dénominateur sont alors égaux).

Pour deux couleurs strictement identiques, tu tombes sur une forme indéterminée 0/0, ce qui n'est jamais très bon.

La racine au numérateur te donne la distance entre les deux couleurs. Tu peux la stocker dans une variable (D par exemple).

Ensuite, tu peux imposer que la similarité maximale, pour deux couleurs identiques, vaut 1.

Alors tu peux écrire quelque chose comme : S = 1 - c*D
où :
S est la similarité
c est un coefficient fixe, qui peut être ajusté pour que S soit égal à 0 entre le noir et le blanc par exemple. Si chaque composante est comprise entre 0 et 1, c vaudra 1/sqrt(3). Si chaque composante est comprise entre 0 et 255, c vaudra 1/sqrt(195075)

Évidemment, la perception par l’œil est assez complexe (moins de sensibilité aux variations de bleu par exemple). Tu peux aussi considérer que des couleurs plus ou moins claires avec la même proportion de chaque composante a plus de similitudes que des variations de proportions etc... mais tout cela n'est sans doute pas nécessaire.
 
WRInaute accro
Bonjour Monsieur

Merci beaucoup beaucoup pour votre aide. ;)

Celà m'ôte une épine du pieds.

Faut dire qu'avant-hier je me suis couché à 2h du matin, et hier soir à 22h30.

Pressé je suis de terminer cette homogénéisation des couleurs de mon fichier *.css

Je serai probablement obligé de ne pas tout faire en mode automatique, ne serait-ce que pour choisir les couleurs de remplacement de chaque groupe de couleurs similaires.

Merci.

Respectueusement.
 
WRInaute accro
Bonjour

J'ai remis à neuf mon site.

J'ai réduit le nombre de couleurs.

Je testerai sous Dareboost dès que je je pourrai.

Merci de me dire si l'apparence est à peu près correcte. ;)

Surtout les couleurs des boutons ( un peu jaunâtre ? ) ou de la liste des 10 derniers jours de courses.

Merci beaucoup de vos réponses.

Respectueusement.
 
WRInaute accro
Rebonjour

J'ai changé mes menus, maintenant en mode full responsive, en recopiant un exemple de menu ( honte à moi. ).

J'aurais besoin de conseils sur les couleurs ( foreground, background ), à donner à mes menus de haut de page.

Egalement l'opportunité de convertir mes menus en bas des pages, pour qu'ils aient la même apparence.

Merci de me confirmer, que la mode est aux boutons pastels rectangulaires sans relief ni dégradé.

Et aussi, la couleur de background générale du site me semble un peu vieillotte.

Merci beaucoup de vos avis.

Cordialement.
 
WRInaute passionné
Salut, tu aurais du suivre le conseil simple que je t'ai donné : utilise bootstrap..

Je n'ai pas regardé ton site en détails, j'ai juste chargé la page d'accueil et j'ai réduit la largeur du navigateur, le responsive fonctionne très mal, avec bootstrap tu n'aurais pas ce problème à gérer tu aurais plus de temps pour autre chose.

Edit: ah oui si tu ne veux plus de javascript, bon ben, ok, c'est pas grave alors, pas de bootstrap :)
Enfin tu peux l'utiliser sans javascript/jquery mais il faut éviter certaines fonctionnalités, je ne vois pas trop l'intérêt mais c'est possible si tu n'utilises que le CSS de bootstrap.
 
WRInaute accro
Bonsoir FortTrafic

Mon site n'est responsive que partiellement.

Les menus de hauts de pages le sont.

Mais la page d'accueil ne l'est pas.

Je vais examiner un peu plus ton site et d'autres sites aussi.

Merci beaucoup pour ta réponse.

Cordialement.
 
WRInaute passionné
Avec ce lien tu peux vite tout changer :
http://www.w3schools.com/bootstrap/
Je m'en suis servis pour transformer mon site dans le www, par contre vu qu'il était fait autrement au début, c'est surement le gros bordel dans le code source, j'ai fait les changements au fur et à mesure, mais en moins d'une journée ça marchait déjà c'était plus propre qu'avant pour le responsive.
L'autre site que je t'ai envoyé en MP je l'ai créé il y a 3 semaines directement avec bootstrap donc il n'y a pas d'anciens restes.
 
Discussions similaires
Haut