Nouveau modele pour le site www.pyromaths.org

Faites part de vos remarques/problèmes/solutions pour les sites pyromaths.org.

Modérateur : Développeurs

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 10:24

Bonjour,
Yves m'a demandé il y a quelques semaines combien de connexions il y avait sur le module pyromaths en ligne. C'est environ 6000 par mois. Il m'a alors fait remarqué qu'il serait plus logique que le module pyromaths en ligne soit plus visible sur la page d'accueil.
Ça me trotte dans la tête depuis et je suis en mesure de vous proposer un modèle pour le futur site pyromaths.org
Il ne s'agit que d'un brouillon, donc les liens ne sont pas fonctionnels. c'est juste pour avoir une idée précise. Le code xhtml et css est valide. Je ne l'ai vu que sous Firefox. Je suppose qu'IE va tout foutre en l'air, mais ça m'est égal. :P
J'aimerais que vous me fassiez part de vos remarques si vous en avez (ergonomie, lisibilité, etc).
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Yves
Messages : 461
Inscription : 21 janv. 2009, 20:40
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Yves » 16 avr. 2010, 12:42

Esthétiquement c'est très réussi. J'aime bien la sobriété et la clarté qui améliorent la lisibilité. Je pense que l'ergonomie est vraiment améliorée.
Parmi les améliorations à apporter, au premier coup d'oeil, je n'avais pas vu la corrélation entre la partie droite et la partie gauche de l'animation:

Image

L'aspect du pied de page pourrait également être amélioré, je trouve qu'il dénote un peu avec le reste de la page.

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 15:28

Merci Yves pour tes remarques. J'ai tenté d'y répondre au mieux. J'ai mis à jour le lien du premier post.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Yves
Messages : 461
Inscription : 21 janv. 2009, 20:40
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Yves » 16 avr. 2010, 16:32

J'ai vu que tu as inversé presentation_gauche et presentation_droite. Par contre, comme maintenant je connais le principe de fonctionnement, je ne peux pas te dire si c'est mieux ou pas pour quelqu'un qui découvre le site. De mon côté, j'ai aussi réfléchi à une idée, rajouter une flèche dans l'image case_a_cocher.png pour obtenir quelque chose comme ça:

Image

Je préfère la version sans header.png (sans le dégradé). Pour le footer, je ne suis pas encore convaincu. Je crois que quelque chose de plus sobre serait mieux.

Mes remarques concernent des détails et je trouve que ce modèle pour le futur site est vraiment excellent ! Bravo Jérôme pour ton travail :)

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 17:28

Merci Yves. Tu la fais comment la flèche ? Je la trouve très esthétique.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Yves
Messages : 461
Inscription : 21 janv. 2009, 20:40
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Yves » 16 avr. 2010, 18:11

Avec Skitch qui n'existe malheureusement que pour Mac OS X. En rajoutant 50 pixels à gauche de case_a_cocher.png, voilà ce que ça peut donner :

Image

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 18:17

Super ! Est-ce que j'abuse si je te la demande en png ? :?
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL


Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 19:56

Ah oui. Je n'avais pas activé les javascripts et je n'avais donc pas accès à la version "taille large". D'où ma question. Merci beaucoup. Je vois ce que je peux en faire.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 16 avr. 2010, 23:27

Yves a écrit :J'ai vu que tu as inversé presentation_gauche et presentation_droite. Par contre, comme maintenant je connais le principe de fonctionnement, je ne peux pas te dire si c'est mieux ou pas pour quelqu'un qui découvre le site. De mon côté, j'ai aussi réfléchi à une idée, rajouter une flèche dans l'image case_a_cocher.png pour obtenir quelque chose comme ça:
Je ne parviens pas à ajouter la flèche, car l'image est en background et la flèche sort du cadre, donc n'est pas affichée. Si quelqu'un à une solution pour mon css, je suis preneur. Cela dit, j'aime bien la version menu à gauche et ça me semble assez clair.
Yves a écrit :Je préfère la version sans header.png (sans le dégradé).
Pas moi :mrgreen:
Yves a écrit :Pour le footer, je ne suis pas encore convaincu. Je crois que quelque chose de plus sobre serait mieux.
Hum. J'aimais bien. Cela dit, je ne sais pas trop quoi mettre dans le footer, à part les 2 infos déjà écrites. C'est un peu court, non ?
Yves a écrit :Mes remarques concernent des détails et je trouve que ce modèle pour le futur site est vraiment excellent !
Merci beaucoup Yves.Ça fait plaisir. Je n'avais jamais autant bossé sur les css. C'est laborieux mais intéressant.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Yves
Messages : 461
Inscription : 21 janv. 2009, 20:40
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Yves » 17 avr. 2010, 12:33

Jérôme a écrit :Je ne parviens pas à ajouter la flèche, car l'image est en background et la flèche sort du cadre, donc n'est pas affichée. Si quelqu'un à une solution pour mon css, je suis preneur.
En utilisant les propriétés padding-left et margin-left, ça fonctionne :) :

Code : Tout sélectionner

.presentation_droite{
  width:50%;
  float:right;
  overflow:hidden;
  height:345px;
}

.presentation_gauche{
  border:1px solid #ffa628;
  width:49%;
  height:345px;
  float:left;
  position:relative;
}

.presentation_droite_haut{
  position:relative;
  line-height:24px;
 
}

.presentation_droite_haut h2{
  margin-left:60px;
}

.presentation_droite_haut a{
  padding-left:60px;
  background:transparent url(img/case_a_cocher.png) no-repeat right top;
  display:block;
  text-decoration:none;
}

.presentation_droite_bas{
  padding-left:60px;
}

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 17 avr. 2010, 13:43

Merci Yves. En effet, ça fonctionne. Je crois que je n'avais pas assez agrandi mon cadre (50% maintenant). C'est mis à jour et je suis convaincu.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Avatar de l’utilisateur
Arnaud
Critique officiel de pyromaths
Messages : 609
Inscription : 26 août 2006, 21:49
Localisation : Allemagne
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Arnaud » 17 avr. 2010, 20:51

C'est joli, et il y a du jquery !
C'est de toi ou tu as récupéré le code ?
J'effectuerais encore un léger grossissement de la description que tu as déjà mise en gras ( le h2 de diapo_contenu ).

Au niveau du header, tu sais déjà que j'aime les dégradés, mais ce gris là me parait mal choisi, cela terni trop la page.
Il y a trop d'espace entre les blocs de navigation et les contenus, et le logo est trop petit.
Pour ce dernier, on peut envisager beaucoup de solutions qui le mettent en évidence sans trop prendre de place.

Le footer, ça va pas, tout simplement :mrgreen:

Avatar de l’utilisateur
Arnaud
Critique officiel de pyromaths
Messages : 609
Inscription : 26 août 2006, 21:49
Localisation : Allemagne
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Arnaud » 17 avr. 2010, 20:53

Et les border-bottom dans nav + presentation sont inutiles et alourdissent le tout.
On peut obtenir un résultat aéré sans trop de marges, à condition de ne pas surcharger de traits partout :)

Avatar de l’utilisateur
Jérôme
Administrateur - Site Admin
Messages : 1093
Inscription : 26 août 2006, 13:10
Localisation : Nantes
Contact :

Re: Nouveau modele pour le site www.pyromaths.org

Message par Jérôme » 17 avr. 2010, 22:58

Salut Arnaud,
merci pour toutes ces remarques. Le jquery (je savais que ça te plairait) n'est pas de moi. Je dois même avouer que je n'y comprends rien. Mais ça fonctionne et c'est joli.
Je ne sais pas ce que vous avez contre mon dégradé ! :) Chez moi, il est très discret.
Concernant l'espace entre le bloc nav et le reste, je suis d'accord. Par contre, le logo me semble joli à cette taille là, mais je veux bien faire un essai. J'attends donc tes nombreuses solutions :)
Le footer, ok. Mais j'ai besoin de votre aide là.
Enfin, les border-bottom, je suis tout à fait d'accord. C'était juste pour essayer de répondre à Yves. Mais il a trouvé nettement mieux depuis et j'ai oublié de les enlever.
J'ai modifié en conséquence. Dites-moi ce que vous en pensez.
Pyromaths génère des fiches d'exercices et leur corrigé en toute simplicité.
Un programme multi-plateformes libre et gratuit sous licence GPL

Répondre