GO BETWEEN, Agence de booking d'Artistes - Version imprimable
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Vous, vos sites ... (https://forum.cmsmadesimple.fr/forum-7.html)
+--- Sujet : GO BETWEEN, Agence de booking d'Artistes (/thread-618.html)
+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Vous, vos sites ... (https://forum.cmsmadesimple.fr/forum-7.html)
+--- Sujet : GO BETWEEN, Agence de booking d'Artistes (/thread-618.html)
GO BETWEEN, Agence de booking d'Artistes - GregOS - 25/08/2010
Ayant fait mon stage dans une boite de Booking d'artistes, j'en ai profité pour faire mon tout premier site sous CMSMS!
Le tout est ici ---> http://www.gobetween.us
Voilà, dites-moi donc ce que vous en pensez, tant au niveau du code qu'au niveau design,
Je débute dans la création de site et je ne demande que des conseils pour m'améliorer!
Merci!
GregOS
----> Mes photos : http://www.flickr.com/photos/bazart/ <-------
GO BETWEEN, Agence de booking d'Artistes - kraygoon - 26/08/2010
Salut,
Comme on dit : « C'est en forgeant qu'on devient forgeron et c'est en sciant que Léonard devint... scie. »
Je ne vais pas prendre de gants, et tu m'en excuseras j'espère mais au au final ça aura l'avantage d'améliorer ta connaissance du « code » et de l'accessibilité.
Page d'arrivée, celle où on choisi les langues :
Déjà ce type de page me semble pénible, je préfère et la majorité je pense arriver directement sur le site et trouver des petits drapeaux pour basculer d'une langue à l'autre si besoin.
Sur cette même page l'image de fond implique la présence de barres de défilement inutile. Pourquoi ne pas mettre l'image en background du body dans ton code ?
Les boutons de sélection de langue ont un effet « hover » fait en Javascript dans la page même... Beurk, pourquoi ne pas utiliser un effet « hover » dans le CSS ?
Plus généralement, tes liens devraient utiliser les « Pretty URLs » pour un meilleur référencement.
Toutes tes balises HTML devraient être notées en minuscules et tu devrais enlever les balises inutiles du type HSPACE, VSPACE et tout çà.
Les autres pages :
Même conseils.
Certains liens vers des fichiers pointent sur un TLD en .lu et d'autres en .us.
Tu as beaucoup trop de « code CSS » directement dans ton code au lieu de l'avoir dans ton fichier stylesheet.
Voilà pour le début, une fois ces corrections faites, tu repasses par là et on s'occupera du reste ;-)
GO BETWEEN, Agence de booking d'Artistes - GregOS - 26/08/2010
Ok merci pour les conseils, je vais modifier tout ça dès que j'aurais le temps
- Pour la page d'accueil, avec le choix des langues, je suis d'accord avec toi, c'est pas ergonomique, mais c'était dans le cahier des charges, j'ai quand même rajouté sur chaque page un petit onglet pour switcher facilement vers l'autre version
- Pour le Hover en css, je ne savais pas qu'on pouvait l'appliquer aux images, mais t'as raison, c'est bien mieux dans le css, maintenant je le saurais :-)
GO BETWEEN, Agence de booking d'Artistes - bess - 26/08/2010
Même avis que kraygoon qui est toujours d'aussi bon conseil à ce propos
Vu que c'est ton premier site avec cmsms (ou premier site tout court ?) il ne faut pas prendre nos remarques comme des coups de couteau dans le dos mais bien comme autant d'avis de personnes qui en ont vu passer des vertes et des pas mures et te souhaitent d'éviter les erreurs qu'on a pu faire nous même par le passé
Voilà pour enrober la suite des évènements.
Graphiquement
Code couleur sympa, mais un peu vide puisqu'à part le fond et le header il n'y a aucune subtilité dans la déco. Mais sur ce point précis il faut se rappeler que les gouts et les couleurs ...
CSS
Aïe j'ai perdu deux rétines... si tu les retrouves préviens moi... c'est une boucherie comme rarement vu. Petit exemple de ce qui est fait et pas à faire
Code :
#fondheader {
background:url("uploads/images/stripfond.PNG") repeat-x scroll 0 0 transparent;
height:143px;
left:0;
min-width:900px;
position:absolute;
width:101%;
}WTF ? une largeur à 101% ? une position à gauche ? mais c'est inutile .... idem pour position : inutile dans ton cas présent. il te faut installer Firebug sous firefox pour tester toi même la bonne combinaison CSS car en général tu utilise CSS comme on utilisait les <table> il y a 5 ans : tu ne gère pas le css naturellement, tu lui force la main en plaçant toi même les zones sur la plage plutôt que de les agencer intelligemment depuis le gabarit. La correction ne sera pas longue à faire mais il faut prendre le temps de bien étudier avant de te lancer. par exemple : div blocprincipal est en dessous graphiquement des div blocgauche et blocdroite alors que dans le code il est déclaré avant. Du coup tu te fait chier à configurer en css l'inversion : perte de temps et de code.
La règle en CSS est que tu configure toujours l'encadrant avant de configurer le contenu. Attache toi donc à faire une feuille de style vierge puis de commencer à gérer le <body> puis ensuite le <header> puis l'intérieur du header et ainsi de suite.
TU N'AS PAS A POSITIONNER DE left:0 OU DE position:relative POUR CHAQUE DIV ! (qu'on se le dise) c'est le statut normal pour une div de se caller en haut à gauche de toute manière
évite les margin-left : X & margin-right : Y, si tu veux centrer une div dans une autre tu utiliseras margin-left:auto + margin-right=auto. Et si c'est pas centré c'est que c'est ta div parent qui déconne ==> corrige là. (padding ? margin ? il doit y avoir une valeur qui traine et firebug te le dira.)
voilà pour le cimetière du css
Validation W3C
dsl j'ai pas pu tester, mon taff à un réseau de merde qui empêche d'y accéder (merci nordnet \o/)
Au cas ou : vérifie ici qu'il n'y a AUCUNE erreur Xhtml et très peu pour le CSS.
quelques erreurs grave déjà relevées :
Citation :<a href="index.php"><img src="uploads/images/logo.png" alt="logo gobetweeen>"</a>
ou encore l'entête Xhtml qui est surmontée de 5 retours à la ligne : pas bon !
Notes Yslow & PageSpeed
YSlow Grade:65%
Page Speed Grade: 67%
Page load time: 4.81s
Total page size: 931KB
Total number of requests: 49
http://gtmetrix.com/reports/www.gobetween.us/o61fBgyQ
Arg, un site à 1Mo mettra cent plombes à charger pour ceux qui n'ont pas une connexion rapide (et oui le modem 56K existe toujours) : il faut réduire tout ca soit en optimisant les photos présentes, soit en réduisant leur nombre en les combinant (regarde ce qu'est un sprite css) ou active le cache des fichiers ou active la compression Gzip... ou fait tout à la fois.
Tes notes sont mauvaises, suit mon tuto si tu souhaites y remédier et rendre ton site meilleur
voilà un florilège de point à re-travailler dans l'ordre : Xhtml > CSS > Optimisation images > Notes PageSpeed & Yslow
Je te souhaites un bon courage et surtout ne lâche pas l'affaire, faire un site est une chose, bien le faire en est une autre et c'est la partie la plus dur
GO BETWEEN, Agence de booking d'Artistes - Jean le Chauve - 26/08/2010
Il faudra également que tu empêches le texte de se développer trop en largeur pour les écrans larges, sinon on perd la "ligne" (je suis en 1950px*1920px et c'est pénible).
Opter pour une max-width pour le content conviendrait beaucoup mieux (attention à la compatibilité IE).
De plus, je ne trouve pas le text-align center des plus agréable, ça fait web préhistorique.
GO BETWEEN, Agence de booking d'Artistes - kraygoon - 26/08/2010
GregOS, le plus important est de prendre les points un par un. Ne te sens pas submergé. Fais toi une liste des modifications et coches au fur-et-à-mesure de ton avancement.
N'hésites pas à notre présenter les travaux intermédiaires pour qu'on puisse t'aider.
GO BETWEEN, Agence de booking d'Artistes - GregOS - 26/08/2010
éh bé! Je ne m'y attendais pas trop x-p
C'est vrai que en tant que premier site, c'était une application directe de la théorie... et vu que je vois les choses en grand, le code a parfois du mal à suivre.
Bon, je vais m'y remettre avec toutes les modifs que vous m'avez précisé.
Merci en tout cas pour l'implication!
GregOS
----> Mes photos : http://www.flickr.com/photos/bazart/ <-------
GO BETWEEN, Agence de booking d'Artistes - bess - 26/08/2010
courage, on sera ravis de t'épauler au fur et à mesure de tes corrections.et au passage si c'est ton premier pas dans le monde réel du webdev : félicitation ! j'ai déjà vu pas mal de "pro" ou d'amateurs qui se désignent comme expert dans le milieu faire des sites bien plus pourrit que tu n'auras fait pour ton premier coup !
Si tu as réussit à faire un tel site du premier coup, c'est certain qu'avec un minimum d'entrainement tu sauras faire des purs site