[amateur] Site de pronostics F1

Bonjour tout le monde !

Voilà je tiens un site depuis 2 ans. J'ai à peu près tout fait à la main, j'utilise que Notepad++, un client ftp et 2 extensions firefox... J'ai appris les bases sur un site pour débutants bien connu. Bref tout ça pour vous dire que je suis amateur et sans prétention.

En fait si je viens poster pour vous demander un avis éclairé, c'est que j'ai peur d'avoir d'énormes failles de sécurité sur mon site... De 1 je ne maîtrise pas bien ce qui est sécurité, et de 2 je me suis lancé dans une utilisation assez importante de jQuery et de requêtes Ajax... En termes d'ergonomie c'est extra, mais niveau sécurité j'ai cru comprendre que ça craignait pas mal..

Bien entendu je prendrai note des critiques concernant l'esthétique. Mais avant tout j'aimerais sincèrement avoir vos avis éclairés quant à la sécurité, car j'ai l'intention de faire un tout petit peu de pub, de manière à ce qu'on soit un peu plus nombreux pour la saison de F1 à venir.

Merci d'avance, n'hésitez pas à dire tout ce que vous voulez, le début de la saison est le 13 mars, ce qui me laisse un peu de temps pour, à la limite, chambouler un certain nombre de choses. Et si vous voulez nous rejoindre pour parier, vous êtes également les bienvenus !

@bientôt

PS : svp ne tentez pas de requêtes qui puisse mettre ma base en danger ! je l'ai sauvegardée sur un fichier sql mais jamais j'ai eu à tenter une restauration

EDIT : avec le lien, c'est mieux
http://aeroport.calais.free.fr/pronos/
Modifié par Bertrand40 (11 Jan 2011 - 17:20)

Bonjour,

La "sécurité" est un domaine extrêmement spécifique, qui n'est pas vraiment le plus abordé sur Alsacréations. De plus, difficile de tester la robustesse d'un code sans le "forcer" ni sans pouvoir le lire. Du coup, j'ai l'impression que tu nous demande l'impossible

Sinon, au niveau des conseils de base : je ne vois pas de captcha sur tes formulaires, même un captcha inversé (champs caché que seul certains robots rempliront) serait un plus.

Pour éviter les insertions de code dans tes formulaires des hack kiddies (pour les vrais hackers, ça sera plus difficile), veille utiliser les fonctions PHP du genre htmlentities.

Tu peux également te renseigner sur les injections SQL.


Pour ce qui est de la qualité de ton site : visuellement, c'est triste et sans vie (il faut rajouter des couleurs) ; il y a un gros problème de gestion de l'espace (marges inégales, déséquilibre).

Pour le code :
* Tu as des metas inutiles : keyword (plus utilisée par les moteurs de recherche depuis longtemps), robots (valeurs par défaut), Content-Script-Type (pas utile puisque précisé sur chaque script, ce qui est très bien), cache-control (en commentaire, mais peut être supprimée).

* Ta meta description n’est pas vraiment intéressante dans sont état actuel : la seule utilité de cette meta est qu’elle est affichée dans les pages de résultat des moteurs de recherche, sous le titre de la page, si jugée pertinente. Cette meta est donc le moyen de faire la différence entre deux site pour le visiteur : elle doit l’attirer, être intéressante et sexy. Elle doit également être unique pour chaque page d’un site.

* Je suis ne suis pas convainque que préciser le charset sur tes fichiers liés soit d’une importance capitale, surtout que c’est le même que celui de la page.

* Il est préférable de placer les scripts en fin de document afin de laisser le contenu de la page se charger avant son comportement.

* Les images porteuses de contenu (=texte en général) DOIVENT se trouver dans le code HTML avec un alt correctement rempli et non dans le CSS en tant qu’image de fond. Ton header EST une image porteuse de contenu !

* Le message d’avertissement pour JS, c’est bien gentil, mais si ton site ne fonctionne pas avec la configuration de l’utilisateur, il ira voir ailleurs. Un formulaire d’inscription qui ne fonctionne pas si JS est désactivé, ce n’est pas normal : l’inscription devrait se faire avec PHP et JS n’être utilisé que pour un pre-check, j’espère que c’est le cas...

* Ton site n’a aucune hiérarchie des titres... il faut revoir cela.

Dans l’ensemble, ton code est propre et plutôt sémantique même s’il y a encore des points à améliorer (les titres et images), bonne continuation.

Bonjour Laurie-Anne et merci pour ta réponse assez complète,

Laurie-Anne a écrit :
Bonjour,
difficile de tester la robustesse d'un code sans le "forcer" ni sans pouvoir le lire. Du coup, j'ai l'impression que tu nous demande l'impossible

En effet, je comprends. Quel conseil me donnes-tu alors ? Confier mon site à une boîte payante ? Un pro accepterait-il un truc pareil ?

a écrit :
Sinon, au niveau des conseils de base : je ne vois pas de captcha sur tes formulaires, même un captcha inversé (champs caché que seul certains robots rempliront) serait un plus.

Le seul formulaire (en page d'accueil) est "protégée" par une captcha. Les 2 autres (section discussion) sont protégés par javascript et par des sessions. Suffisant ? Et sinon, celui servant à récupérer ses identifiants (en page d'accueil) mériterait-il une captcha également ?

a écrit :
veille utiliser les fonctions PHP du genre htmlentities.
Tu peux également te renseigner sur les injections SQL.

De ce côté-là je crois que c'est correct.

a écrit :
Pour ce qui est de la qualité de ton site : visuellement, c'est triste et sans vie (il faut rajouter des couleurs) ; il y a un gros problème de gestion de l'espace (marges inégales, déséquilibre)

D'accord. Je vais remettre l'image de fond avec sa qualité couleur d'origine pour commencer. Pour le reste tu mettrais donc des couleurs plus pétantes ? Les quelques couleurs et icones sont insuffisantes ? Sinon que veux-tu dire par marges inégales ? Elles sont les mêmes partout et mon site est centré ?

a écrit :
Pour le code :
* Tu as des metas inutiles : keyword (plus utilisée par les moteurs de recherche depuis longtemps), robots (valeurs par défaut), Content-Script-Type (pas utile puisque précisé sur chaque script, ce qui est très bien), cache-control (en commentaire, mais peut être supprimée).

* Ta meta description n’est pas vraiment intéressante dans sont état actuel : la seule utilité de cette meta est qu’elle est affichée dans les pages de résultat des moteurs de recherche, sous le titre de la page, si jugée pertinente. Cette meta est donc le moyen de faire la différence entre deux site pour le visiteur : elle doit l’attirer, être intéressante et sexy. Elle doit également être unique pour chaque page d’un site.

* Je suis ne suis pas convainque que préciser le charset sur tes fichiers liés soit d’une importance capitale, surtout que c’est le même que celui de la page.

Ok je m'y attèle ce soir, c'est une partie totalement floue pour moi.

a écrit :
* Il est préférable de placer les scripts en fin de document afin de laisser le contenu de la page se charger avant son comportement.

Ca je le savais, honte à moi.

a écrit :
* Les images porteuses de contenu (=texte en général) DOIVENT se trouver dans le code HTML avec un alt correctement rempli et non dans le CSS en tant qu’image de fond. Ton header EST une image porteuse de contenu !

Par soucis d'indexation alors ?

a écrit :
* Le message d’avertissement pour JS, c’est bien gentil, mais si ton site ne fonctionne pas avec la configuration de l’utilisateur, il ira voir ailleurs. Un formulaire d’inscription qui ne fonctionne pas si JS est désactivé, ce n’est pas normal : l’inscription devrait se faire avec PHP et JS n’être utilisé que pour un pre-check, j’espère que c’est le cas...

J'en suis conscient, mais très franchement combien de personnes surfent avec JS désactivé ? Est-ce que IE6 occupe encore une part significative du marché sinon ?

a écrit :
* Ton site n’a aucune hiérarchie des titres... il faut revoir cela.

Comment ça ?

Merci pour ces réponses !
Modifié par Bertrand40 (12 Jan 2011 - 09:32)

Bertrand40 a écrit :

Pour ce qui est de la qualité de ton site : visuellement, c'est triste et sans vie (il faut rajouter des couleurs) ; il y a un gros problème de gestion de l'espace (marges inégales, déséquilibre)

D'accord. Je vais remettre l'image de fond avec sa qualité couleur d'origine pour commencer. Pour le reste tu mettrais donc des couleurs plus pétantes ? Les quelques couleurs et icones sont insuffisantes ? Sinon que veux-tu dire par marges inégales ? Elles sont les mêmes partout et mon site est centré ?

Mettre l'image de fond n'est pas nécessairement une bonne idée, car ça passe mal pour certaines résolutions, et pour que ça puisse passer même sur les grosses résolutions, ça te mettrait à faire un méga-placard qui ne fera que ralentir le chargement, et déjà avec la photo actuelle, le ralentissement se sentait déjà chez moi ! (connexion 12 mégas par câble, Pentium 4 CPU 2.8 GHz, Firefox 3.6.13, Ubuntu 10.04).

Mise à part le fond, on n'a pas vraiment l'impression d'être sur un site de F1, la seule autre indication, c'est le motif damier très délavé dans le titre, et les deux petits drapeaux. Pour le reste, c'est trop générique.

a écrit :
* Les images porteuses de contenu (=texte en général) DOIVENT se trouver dans le code HTML avec un alt correctement rempli et non dans le CSS en tant qu’image de fond. Ton header EST une image porteuse de contenu !

Par soucis d'indexation alors ?

Pas seulement pour le référencement, mais aussi pour l'accessibilité ! Teste en désactivant les images SANS désactiver le style (tu peux le faire avec l'extension Web Developer, dispo pour Firefox et Chrome), pour avoir un aperçu de ce qu'on peut voir si le serveur déconne ou que les images sont bloquées au boulot. Pour un aperçu encore plus réaliste de ce qu'un robot de référencement voit, tu peux aussi tester avec Lynx dont il existe un package pour Windows. Et finalement, tu peux tester avec NVDA pour avoir un aperçu de ce qu'un non-voyant voit.

Un peu de lecture : http://www.alsacreations.com/astuce/lire/62-balise-ltimggt-ou-feuille-de-style-css.html

a écrit :
* Le message d’avertissement pour JS, c’est bien gentil, mais si ton site ne fonctionne pas avec la configuration de l’utilisateur, il ira voir ailleurs. Un formulaire d’inscription qui ne fonctionne pas si JS est désactivé, ce n’est pas normal : l’inscription devrait se faire avec PHP et JS n’être utilisé que pour un pre-check, j’espère que c’est le cas...

J'en suis conscient, mais très franchement combien de personnes surfent avec JS désactivé ? Est-ce que IE6 occupe encore une part significative du marché sinon ?

Plus que tu ne le penses... j'en fais d'ailleurs partie parce qu'il y en a qui font n'importe quoi avec javascript (les popups par exemple) et certains scripts peuvent faire planter mon navigateur !

À lire : http://forum.alsacreations.com/topic.php?fid=6&tid=39428

a écrit :
* Ton site n’a aucune hiérarchie des titres... il faut revoir cela.

Comment ça ?

Un peu de lecture : http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html

IshimaruChiaki a écrit :

Mettre l'image de fond n'est pas nécessairement une bonne idée, car ça passe mal pour certaines résolutions, et pour que ça puisse passer même sur les grosses résolutions, ça te mettrait à faire un méga-placard qui ne fera que ralentir le chargement, et déjà avec la photo actuelle, le ralentissement se sentait déjà chez moi ! (connexion 12 mégas par câble, Pentium 4 CPU 2.8 GHz, Firefox 3.6.13, Ubuntu 10.04).

Oui. Et moi je m'en rends plus compte de ça car tout est caché. Je comprends bien ce que tu me dis, mais alors sincèrement je ne vois pas ce que je pourrais mettre en fond

a écrit :
Mise à part le fond, on n'a pas vraiment l'impression d'être sur un site de F1, la seule autre indication, c'est le motif damier très délavé dans le titre, et les deux petits drapeaux. Pour le reste, c'est trop générique.

Trop soft. Ok vous m'avez convaincu, je vais revoir cette partie. Le gros du problème va être de trouver des idées. Le thème est la F1, mais à part mettre un damier qui se répète (si on reste dans l'optique de quelque chose de léger), je vois pas ce que je peux faire d'autre. Sans compter qu'un damier géant ça serait plutôt vilain non ?

a écrit :
Pas seulement pour le référencement, mais aussi pour l'accessibilité ! Teste en désactivant les images SANS désactiver le style (tu peux le faire avec l'extension Web Developer, dispo pour Firefox et Chrome), pour avoir un aperçu de ce qu'on peut voir si le serveur déconne ou que les images sont bloquées au boulot. Pour un aperçu encore plus réaliste de ce qu'un robot de référencement voit, tu peux aussi tester avec Lynx dont il existe un package pour Windows. Et finalement, tu peux tester avec NVDA pour avoir un aperçu de ce qu'un non-voyant voit.

Je vais faire tes manips, ça me convaincra sûrement..

a écrit :
Plus que tu ne le penses... j'en fais d'ailleurs partie parce qu'il y en a qui font n'importe quoi avec javascript (les popups par exemple) et certains scripts peuvent faire planter mon navigateur !

Oh merde.. Ca par contre c'est plus inquiétant, ça demande de revoir pas mal de choses. J'ai du temps celà-dit. Mais celà étant dit, je me dis aussi que ça n'est pas un site pro, ni un site commercial.

Je m'en vais lire la lecture que tu me proposes..! Merci pour tes réponses, c'est sympa.
Modifié par Bertrand40 (12 Jan 2011 - 19:07)

Bon j'ai lu pas mal de choses dans tout ce que vous m'avez donné. J'ai effectivement du boulot.

Je ne sais pas si la démarche est la bonne, mais toujours est-il que je souhaite commencer par l'esthétique du site. En fait elle me motive, c'est tout.

J'ai peu de temps ce soir et j'ai fait ceci, vite fait. Pensez-vous que ce soit une meilleure orientation ?

http://aeroport.calais.free.fr/pronos/v2

EDIT : pouvez-vous me confirmer que si j'ai bien tout compris, au niveau de la hiérarchie des titres, le petit bandeau du haut (nombre de membres, etc..) sera donc en h1 avec une classe particulière.. Puis ensuite, en descendant le flux, on passe à du h2, h3, etc... c'est ça ?
Modifié par Bertrand40 (16 Jan 2011 - 11:52)

Bonsoir !

J'ai avancé dans la nouvelle mouture du site. Pouvez-vous me dire si je vais dans le bon sens svp ? Pour l'instant seuls l'accueil et la section "divers" sont faites.

Merci d'avance !

http://aeroport.calais.free.fr/pronos/v2/index.php

je mettrai le background du V1.

doc mcfly a écrit :
je mettrai le background du V1.

Merci pour cet avis. Bon du coup je ne sais pas où donner de la tête. Les goûts et les couleurs..

Enfin, ceci mis à part, est-ce que vous pouvez me confirmer que vos remarques concernant le code (pas l'esthétique), ont bien été écoutées ?

- le header est en IMG
- j'ai structuré mes titres (c'est là que j'aimerais avoir confirmation svp)
- l'en-tête http est épuré
- les répétitions de charset sont supprimées
- le javascript est toujours là néanmoins, mais entièrement repoussé en bas de code

J'arrive à un résultat de 95% avec Page Speed. J'imagine que c'est pas un exploit, compte tenu du peu de contenu affiché, du peu de requêtes. Mais à ce sujet, est-ce que vous accordez de l'importance à ces tests de performances ? (comme Page Speed, Yslow)

Sinon, à l'attention de IshimaruChiaki, j'ai installé et lancé NVDA. Alors, conclusion : à moins qu'il n'y ait bien des choses à configurer dans ce logiciel, et ben ma structure craint pas mal, parce que ce qui est énoncé par le logiciel est soit trop complet, soit inexistant.

Étant sous Linux, je ne peux pas vraiment te répondre pour NVDA puisque ce soft est pour Win. Mais QuentinC sera mieux placé pour te répondre

Ok. Et selon ce que tu vois de cette nouvelle structure, est-ce que c'est plus correct ?