Oeil d'amateur éclairé ou de professionnel svp ?

Oeil d'amateur éclairé ou de professionnel svp ? - PHP - Programmation

Marsh Posté le 04-08-2005 à 15:20:26    

Bonjour,
 
 
je viens de finir mon premier "vrai" site en XHTML/PHP et j'aurais souhaité bénéficier de commentaires de gens versés dans le domaine de la prog web sur ce site.
 
Je tiens à préciser que
 
- il ne s'agit pas de spam : le nom qui figure sur le site actuellement est déjà pris, donc s'il est finalement mis en ligne, il en portera un autre. De plus, y'a rien d'intéressant sur le ftp ou c'est hébergé pour le moment...
 
- ce site est un projet personnel, qui n'entraînera pas de rémunération, même si finalement il aboutit : un des membres de ma famille est bouquiniste, il a émis le souhait de se lancer sur le net. Comme j'étais à la recherche d'un projet qui me permettrait d'apprendre le PHP, je lui ai proposé d'essayer de lui en faire un.
 
Tout commentaire sur le design, les fonctionnalités, la sécurité ou autre est donc le bienvenu. Je vous demanderais juste de pas m'accabler si vous trouvez ca merdique, je rappelle que c'est mon premier site, et que j'ai tout codé moi-même avec mes petits doigts (notamment grâce à ce forum)...
 
Merci à ceux qui voudront bien y consacrer un moment. Si ca pose un pb de charte, ben ... tant  pis, je suppose que ca sera locké [:jagstang]
 
L'url est http://www.onesque.net/books_en_stock
 
:hello:


Message édité par Onesque le 04-08-2005 à 15:20:54
Reply

Marsh Posté le 04-08-2005 à 15:20:26   

Reply

Marsh Posté le 04-08-2005 à 15:32:50    

un peu de semantique pour commencé ...
 
Il n'y a pas de balise <hx> pour les titre ( genre <h>NOUVEAUTE</h1> et <h2>Petit suicides entre amis</h2>
 
Plutot que des div, j'aurais utiliser des liste de définition. ( dl/dd/dt ... )
 
Sinon, c'est pas mal, clair, propre ... un petit commentaire au niveau navigation, si je clique dans livre par genre, je lance un recherche automatique et lesmenu de droite n'es plus dispo, un peu domage à mon avis.
 
voilà !
 
@+


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 04-08-2005 à 15:34:17    

aller, un petit 2ème pour la route :
 

Citation :


Vous avez 1 article(s) dans votre panier.
 
Réinitialiser le panier
 
(Cliquer sur "Vider le panier" effacera toutes les sélections que vous avez déjà pu faire)


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 04-08-2005 à 15:36:21    

j'ai trouvé des erreurs :
1) quand tu confirme ta commande et que tu reva sur le lien panier le montant augmente ....
2) et quand tu veux modifier ton compte il y a un  truc bizare dans le champ mot de passe

Reply

Marsh Posté le 04-08-2005 à 15:40:57    

bl@p_psx : tout d'abord, merci :D
 
Pour "vider le panier", c'est arrangé. C'est typiquement le genre d'erreurs que je ne vois plus maintenant tellement j'ai passé de temps là-dessus.
 
Pour les cadres de droite, je vais voir ca :jap:
 
Pour ce qui est de la sémantique et des <hx>, effectivement, j'ai tout fait par classes nominatives plutôt que par niveaux de titre. Est-ce que cela pose un pb (référencement peut-etre, ou accessibilité) ?
 
ali0baba : aie, c'est ce que je craignais, c'est la partie du site que je maîtrise le moins bien, j'y vais encore vachement à tâtons là. Mais merci du feed, je vais aller voir ça de suite ;)

Reply

Marsh Posté le 04-08-2005 à 15:46:15    

Les p'tites flêches à droite ( http://www.onesque.net/books_en_stock/images/fleche.gif  ) ne vont pas bien avec le fond gris, tout comme le site en général.... Ou alors tu fais partie de ces 20% de développeurs qui oublient de préciser un fond blanc :D
 

Reply

Marsh Posté le 04-08-2005 à 15:49:11    

Fond blanc ajouté au body :D : 20% - 1 maintenant :D

Reply

Marsh Posté le 04-08-2005 à 15:50:55    

Retire le javascript pour ton menu de droite, tu peux faire la même chose avec des css, et ce genre de bête truc qui te bouffe 50/60% de cpu quand tu passes par dessus ça me rend fous.

Reply

Marsh Posté le 04-08-2005 à 15:53:48    

Ou tu vois du javascript ? xHTML + CSS uniquement, à moins qu'à l'insu de mon plein gré... :whistle:


Message édité par Onesque le 04-08-2005 à 15:54:09
Reply

Marsh Posté le 04-08-2005 à 15:59:01    

Onesque a écrit :

Ou tu vois du javascript ? xHTML + CSS uniquement, à moins qu'à l'insu de mon plein gré... :whistle:


 
J'avais même pas regardé enfait, comment un tel truc peux bouffer autant de ressources, je pige pas.
 
Si les webeux ont une explication je suis preneur, on a le même comportement sous IE ? j'ai tjrs mis ça sur le compte de javascript mal employé.


Message édité par push le 04-08-2005 à 16:12:32
Reply

Marsh Posté le 04-08-2005 à 15:59:01   

Reply

Marsh Posté le 04-08-2005 à 16:12:59    

Mais qu'est ce qui te bouffe des resources? Le survol des liens du menu de droite? Ce n'est pourtant qu'un simple a:hover

Reply

Marsh Posté le 04-08-2005 à 16:16:46    

Bein ouais si je survole les liens du menu de droite ça pompe minimum 50% de cpu, c'est pas acceptable ce genre de chose, je dis pas que c'est de ta faute, je constate c'est tout.

Reply

Marsh Posté le 04-08-2005 à 16:26:46    

Effectivement, je viens de tester et c'est vrai que plus tu survoles vite les liens, plus la charge CPU monte. J'atteins 70% en m'excitant sur la souris :D
 
Mais je sais pas d'ou ca vient, et si c'est normal ou pas :/

Reply

Marsh Posté le 04-08-2005 à 16:36:11    

juste pour info, j'obtient la même montés en charge du CPU lors du survol des liens d'HFR par exemple ... AMHA, rien d'anormal.
 
Pour les titres, c'est de la sémantique pure. Et ca joue aussi sur l'accessibilité, puisque ces infos, classé par importance permette d'identifier facilement les differente zones du site.
 
@+


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 04-08-2005 à 16:57:15    

:jap: j'essaierai d'arranger ca et d'utiliser les niveaux de titre alors.
 
Sinon j'ai "en principe" arrangé le panier :D

Reply

Marsh Posté le 05-08-2005 à 10:29:09    

D'autres avis ou commentaires peut-être?

Reply

Marsh Posté le 05-08-2005 à 11:07:10    


on peut pas modifier la quantite des articles qui sont dans le panier ?

Reply

Marsh Posté le 05-08-2005 à 11:09:43    

Non. Pour le moment, les articles sont uniques. Comme c'est du livre d'occasion, en général il n'y en a qu'un à vendre. Puis le bloquer m'arrageait bien quand j'ai commencé sur le panier, ca m'a un peu simplifié la tâche :D
 
Mais les paramètres qui me permettront éventuellement de gérer les quantités sont inclus, au cas ou ca présenterait une utilité plus tard.
 
edit : y'a un problème au niveau du login - mdp, je suis en train de regarder pourquoi ca merde :)


Message édité par Onesque le 05-08-2005 à 11:10:45
Reply

Marsh Posté le 05-08-2005 à 12:49:08    

ça :  

Code :
  1. <div class="cadredroite">
  2.  <p class="entetecadre">LIVRES PAR GENRE</p>
  3.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"></p>
  4.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=2">  Animaux</a></p>
  5.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=6">  Informatique</a></p>
  6.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=9">  Moyen-Age</a></p>
  7.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=15">  Roman XXe</a></p>
  8.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=14">  Philosophie</a></p>
  9.  <p class="listecadredroit"><img alt="fleche" src="http://www.onesque.net/books_en_stock/images/fleche.gif"><a href="http://www.onesque.net/books_en_stock/public/catalogue.php?rubriqueID=13">  Roman XIXe</a></p>
  10. </div>


1 454 caractères
 
tu pourrais pas me faire une DL DT DD et des chemins relatifs ????

Code :
  1. <dl class="cadredroite">
  2. <dt>LIVRES PAR GENRE</dt>
  3.     <dd><a href="../public/catalogue.php?rubriqueID=1">Automobile</a></dd>
  4.     <dd><a href="../public/catalogue.php?rubriqueID=2">Animaux</a></dd>
  5.     <dd><a href="../public/catalogue.php?rubriqueID=6">Informatique</a></p>
  6.     <dd><a href="../public/catalogue.php?rubriqueID=9">Moyen-Age</a></dd>
  7.     <dd><a href="../public/catalogue.php?rubriqueID=15">Roman XXe</a></dd>
  8.     <dd><a href="../public/catalogue.php?rubriqueID=14">Philosophie</a></dd>
  9.     <dd><a href="../public/catalogue.php?rubriqueID=13">Roman XIXe</a></dd>
  10. </dl>


 570 caractères
 
 
et pour le style tu déclare comme ceci :  
dl.cadredroite {}
 
dl.cadredroite dt {}
 
dl.cadredroite dd {}
 
dl.cadredroite dd a{}
 
dl.cadredroite dd a:hover{}
 
et pour la puce, tu t'occupe de la mettre en background et si tu veux un effet, tu la met en background du A + un padding-left
et lors du hover du change la background image


Message édité par gatsusat le 05-08-2005 à 12:49:36
Reply

Marsh Posté le 05-08-2005 à 12:54:14    

tu gagnerai facilement 3ko par page si tu suivais les conseils que je viens de te donner
 
Pour les <p> pour les présentations des DVD, il y a aussi moyen de faire léger

Reply

Marsh Posté le 05-08-2005 à 12:54:28    

et 3ko ca fait déjà pas mal pour une page je trouve

Reply

Marsh Posté le 05-08-2005 à 13:14:16    

ps: c'est ce que je disais au debut ^^ :D


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 13:15:24    

:jap:
 
Pour les DL,DT, DD, je les ai jamais utilisées donc ca ne m'était pas venu à l'esprit spontanément. Par contre, je ne m'étais pas rendu compte à quel point ca devenait volumineux. Je vais essayer d'arranger ca :)
 
Pour les chemins relatifs, c'est juste que cette liste des rubriques peut apparaître à la racine du site (index.php) ou dans le répertoire public. Pour simplifier j'ai mis une adresse absolue, mais je vais changer ça :D
 
Merci pour tes conseils :)

Reply

Marsh Posté le 05-08-2005 à 13:16:02    

bl@p_psx : vi, un point pour toi :D
 
Je vais arranger ça ;)

Reply

Marsh Posté le 05-08-2005 à 13:33:36    

je gagne presque 900 octets rien que pour ton cadre.
 
Même si ca peut paraitre minime, sur un gros site, c'est énorme avec le nombre de visiteurs

Reply

Marsh Posté le 05-08-2005 à 13:37:21    

Oui, je me rends bien compte que c'est ce genre de trucs mal optimisés qui peuvent plomber un site.
 
Je viens de passer certaines "listes" des menus de droite en DL, DD et effectivement, ca allège considérablement le source de la page.
 
Je vais donc réfléchir à faire la même chose pour le contenu de gauche, y'a énormément de <p class=""> que je dois pouvoir supprimer avec cette méthode :jap:

Reply

Marsh Posté le 05-08-2005 à 13:40:57    

je t'ai dit de me virer ton image fleche et de la mettre dans le background du A
 
dl.cadredroite dd a{
 background : url(fleche.gif) left center;
 padding-left:20px;
}

Reply

Marsh Posté le 05-08-2005 à 13:41:41    

des puces comme ton image ca sert à rien de les mettres en html, tu peux en faire abstraction et tout Passer en CSS

Reply

Marsh Posté le 05-08-2005 à 13:57:02    

C'est fait, chef :D
 
Si t'as d'autres conseils du même accabit, je suis preneur !

Reply

Marsh Posté le 05-08-2005 à 14:00:35    

voila ton entete comme il devrait etre
 
limiter au minimum l'utilisation de DIV : trop de DIV tue le DIV
 
n'importe quel élément peut se comporter comme un DIV, faut juste le styler correctement
 

Code :
  1. <div id="contenu">
  2. <h1><a title="retour à l'accueil" href="index.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0"></a></h1>
  3. <ul id="entete2">
  4. <li><a href="index.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0">Accueil site </a></li>
  5. <li><a href="public/catalogue.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0">Catalogue</a></li>
  6. <li><a href="public/panier.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0">Panier</a></li>
  7. <li><a href="public/compte.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0">Compte</a></li>
  8. <li><a href="admin/indexadmin.php?PHPSESSID=68c9948a349277eaa57be9119c8192b0">Administration</a></li>
  9. </ul>
  10. <form id="recherche" action="public/catalogue.php" method="get">
  11. <fieldset class="cat">Recherche par th&egrave;me
  12.  <select name="rubriqueID">
  13.   <option value=""></option>
  14.   <option value="2">Animaux</option>
  15.   <option value="1">Automobile</option>
  16.   <option value="6">Informatique</option>
  17.   <option value="9">Moyen-Age</option>
  18.   <option value="14">Philosophie</option>
  19.   <option value="13">Roman XIXe</option>
  20.   <option value="15">Roman XXe</option>
  21. </select>
  22. <fieldset class="cat">
  23. ou par mot cl&eacute;
  24.  <input type="text" name="motcle" />
  25.  <input type="submit" name="Submit" value="Afficher" /></p>
  26. </fieldset>
  27. </form>


Message édité par gatsusat le 05-08-2005 à 14:01:33
Reply

Marsh Posté le 05-08-2005 à 14:14:07    

Code :
  1. <p class="separateur"></p>


 
ça c'est une hérésie ou une horreur, on ça ne doit plus exister
les margin-bottom et margin-top sont là pour espacer les éléments
 
donc tu me vire ton caca

Reply

Marsh Posté le 05-08-2005 à 14:24:43    

Il a une utilité, c'est lui qui crée la barre bleue qui sépare les différents ouvrages !
 
Je ne pense pas pouvoir recréer ca en CSS : un bordure-bottom me permettrait pas d'obtenir le même effet!
 
Sinon pour les modifs suggérées au-dessus, je les ai intégrées :jap:. Sauf celles qui concernent le formulaire de recherche, j'avais eu des soucis avec lui donc pour le moment je l'ai laissé comme tel.

Reply

Marsh Posté le 05-08-2005 à 14:27:30    

un <hr /> :o

Reply

Marsh Posté le 05-08-2005 à 14:28:04    

fieldset {
display:inline;
border:none;
}

Reply

Marsh Posté le 05-08-2005 à 14:32:29    

j'ai oublié d'enlever un </p> dans le form

Reply

Marsh Posté le 05-08-2005 à 15:04:29    

et tu n'as pas fermé les fieldset :D
 
Pour le hr, mea culpa, j'aurais dû y penser...

Reply

Marsh Posté le 05-08-2005 à 15:20:59    

j'ai oublié de fermer le fieldset avec d'ouvrir l'autre, tu peux le faire à ma place ?

Reply

Marsh Posté le 05-08-2005 à 15:23:22    

Oui, je crois que je peux faire ça :D

Reply

Marsh Posté le 05-08-2005 à 15:26:42    

Bon, malheureusement je dois m'absenter, mais n'hésitez pas me faire part d'autres trucs qui peuvent ne pas aller, particulièrement toi gatsusat puisque tu as l'air inspiré :D
 
Encore merci à tous, c'est agréable de progresser :jap:

Reply

Marsh Posté le 05-08-2005 à 15:29:13    

rajoute un margin:0 à #entete3 car apparament ca deconne sous IE

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed