3246 sujets

Critiques de vos sites: code et design

Vos avis sur mon Portfolio - http://www.syntaxlb.fr/

- EDIT -

Voilà je viens de mettre à jour ma nouvelle version de mon portfolio !
Bon aucun changement niveau design, à part quelques corrections.

Design et texte :
- Sprite pour les icones Home et Contact
- J'ai mis un menu en texte, plus propre que les images je trouve.
- Quelques corrections d'orthographe dans mon texte
- Favicon

Code :
- Changement complet de l'architecture du site.
- Ajout de la POO
- Système d'actualité + commentaire en poo.
- Petit système d'identification, je me suis crée une classe ACL pour les contrôles d'accès .
bon pour l'instant j'ai pas mis de page d'inscription, donc on peut juste se connecté avec "test" / "test" ^^
- Quelques corrections niveau accessibilité et standard web.

- Ajout de meta tag pour les descriptions et titles variables selon les pages


Sinon, les pages "Portfolio", et "Contact" sont en construction.

Voilà je crois que c'est tout.

- FIN EDIT -

Bonjour, voilà j'ai 19 ans, et j'ai décidé il y a 2 semaines de me faire un portFolio, tout en respectant au maximum la sémantique du web.

J'ai eu peu le temps pour travailler, là je suis actuellement à l'hôpital depuis 5 jours, donc je peux travailler un peu dessus, même si c'est pas dans les conditions idéales.

Voici le lien : http://www.syntaxlb.fr/

Tout d'abord, mon site n'est pas du tout fini.
J'ai juste fini le design, et tout ce qui fait parti de la sémantique et l'accessibilité du web.
Pour dire, je n'ai fais que la page d'accueil, et mon CV dans 'A propos'.

La partie de droite, me servira à mettre une catégorie pour se loguer sur mon site ( en tant que membre). Et d'autres catégories viendront peut-être dans le futur.

Je compte aussi mettre un champs en haut à droite pour la recherche sur mon site.

Donc pour faire vite, j'aimerais des avis axés sur la design du site, l'accessibilité et la sémantique utilisée.

Merci d'avance, cordialement
Syntaxlb.

ps: je sais pas si c'est ma connexion, mais lors des changements d'images grâce au "onmouseover" sur la balise <a>, les images mettent du temps à se charger.
C'est ma connexion, ou l'hébergeur ?
Modifié par Syntaxlb (31 Oct 2010 - 15:09)
Bonjour,

D'un point de vue uniquement design.

J'aime bien.

Mais, à mon avis (chacun ses goûts) tu feras ce que tu en veux.

J'aurai vu le menu de la largeur du bloc de contenu et pile au dessus le bloc de contenu. Tu gagnerais en dynamisme.

Attention au niveau du menu le reflet de "à propos" est incorrecte, surtout les "p", de plus les reflet ne sont pas très bien calé.

Le fil d'Ariane ( "accueil >" ) serait mieux centré en hauteur
et le "retour en haut" serait mieux aussi tout à gauche ou aligné avec le bloc de contenu (comme les raccourci en haut d'ailleurs.

D'un autre point de vue marketing, je te conseille de supprimer la mention "bienvenue visiteur" ça me fait penser à ce site et surtout, surtout à supprimer la mention website qui casse le coté professionnel de ton portefolio

Voilà,Voilà Smiley cligne
Salut,

Avant toute chose, je te conseille vivement de corriger ceci (faille xss) : 3, 2, 1 .. abracadabra !!

Les valeurs de ta variable $_GET['module'] ne sont pas parsées :
XSS a écrit :
?module=</title><meta http-equiv=refresh content=4;url=http://example.com/><title>
XSS a écrit :
?module=XSS</title></head><body><h1><marquee behavior=alternate scrollamount=50>Cay le ouik end ! Cay le ouik end ! Cay le ouik end !</marquee></h1><center><iframe src=http://www.alsacreations.com/static/nimp/ouik.html width=90% height=800/></center></body></html><noscript>
Tu résoudrais le problème, simplement, en passant tes variables utilisateur par htmlentities.
Ça c'est pour éviter que du html soit interprété tel quel, c'est bien.

Revoir ton code de telle manière qu'un élément de ta page ne soit pas directement issu de la valeur d'une variable utilisateur (même parsée), ce serait mieux.
Modifié par Akhilleus (22 Dec 2009 - 22:28)
Merci pour vos réponses, je réglerai ça dés que je rentre chez moi.

Que pourrais-je mettre au lieu de 'website' ? 'portfolio' ?

Et dans la barre du haut, je pensais mettre 'Bonjour visiteur', ou 'Bonjour <pseudo>' si l'utilisateur est loggué.
Que pourrais-je mettre à la place ? car j'ai pas trop envie de laissé vide, même si il y aura un champs de recherche à droite.

Concernant les reflets, je les vois pourtant bien calés horizontalement, j'ai laissé une marge d'un 1px pour pas qu'ils soient collés au texte. ( Sauf 'news', faudra que je le refasse ).

Merci encore.
Tu peux peut-être mettre le menu de raccourci.

Au lieu de website, si c'est un site qui ne concerne que toi tu peux mettre webdesigner par exemple.

Pour les callages j'entendais sur ça sur les lettres o (en exemples) qui dès fois sont collés avec le miroir, dès fois non. La lettre "t" est toujours collé alors que les autre non.
Mais surtout c'est la lettre "p" qui me choque. Je ne vois pas de solution, mais elle casse tout l'effet vu que ça ne fait plus un effet miroir.
Bonjour, et bon rétablissement,

Graphiquement, il y a deux-trois choses qui me dérangent sur ton site :
* Les changement de police entre serif et sans-serif qui ne sont pas optimaux et créent un ensemble mal assortis. Il serait préférable de ne choisir qu'un type de police pour les textes de taille similaire et éventuellement utiliser l'autre pour des textes plus gros (titres).

* La partie de droite déséquilibre le site et n'apporte rien (un portfolio est un site vitrine, pas un site communautaire, je ne pense pas qu'à part toi beaucoup de visiteurs y contribuent (éventuellement pour laisser des commentaires, mais cela ne nécessite pas vraiment une inscription et connexion). De plus sur un affichage en 1024 (la résolution la plus courrante encore actuellement) la colonne de droite passe à la ligne.

* La zone verte est intéressante car elle apporte de la couleurs, mais le "bienvenue visiteur" n'est pas à sa place dedans (les liens d'évitement y serait plus appropriés), d'ailleurs il ne sert à rien et fait plutôt cheap.

* Pour ce qui est de ta question concernant les roll-over ; c'est malheureusement un comportement normal (les images étant chargées au survol et non à l'ouverture de la page), mais qui peut être évité en utilisant la technique des portes coulissantes

Pour ce qui est du code :
* La meta description doit contenir une description de la page en cours ; là elle ressemble trop au titre de la page pour être intéressant, pour les robots et, surtout, pour les visiteurs. Cette balise est uniquement utilisée par les robots pour afficher une description de la page dans les résultats de recherche, il est donc important qu'elle apporte une information utile et supplémentaire au titre.

* La meta keyword ne sert à rien et peut donc être supprimée.

* Attention à l'utilisation de title sur les liens : 
<a href='#contenu' title='Aller au contenu'>Aller au contenu</a>
Title peut être utilisé pour apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Si le title doit répéter (ou paraphraser) l'intitulé du lien c'est qu'il est totalement inutile. D'ailleurs la plupart du temps les titles sur les liens ne sont pas nécessaires. À supprimer donc (idem pour les titles de ton menu qui n'apportent, en définitive rien, à part un alourdissement du code).

* Attention à l'utilisation de alt sur les images. L'attribut alt doit contenir la même information que l'image. Il n'est pas non plus nécessaire de préciser "(lien)", "banner" (sans changement de langue en plus, pas bien !)... comme tu le fais. Cela alourdi la lecture de la page plus que cela n'aide.

* Il pourrait être judicieux d'utiliser une liste pour baliser ton menu.

* Attention à la position des espace lors de la saisie de texte. En français (les règles sont différentes suivant les langues) il faut mettre un espace avant et après les points d'exclamation et d'interrogation, les points virgules et les deux-points ; en revanche il ne faut mettre qu'un espace après le point, les points de suspension et la virgule ; pour les parenthèse, c'est encore différent puisque l'on mettra un espace avant et pas d'espace après la parenthèse ouvrante et un espace après et pas d'espace avant la parenthèse fermante. La typographie est très importante pour ta crédibilité, en apprendre les règles ne prends pas longtemps mais peut apporter beaucoup.

* La balise abbr soit être utilisée pour définir une abréviation ou un acronyme (même q'il existe une autre balise pour ça). Elle ne doit pas être utiliser pour donner une traduction. On préfèrera utiliser un span, avec indication de la langue du mot balisé et éventuellement un title pour mettre la traduction (mais bon pour website, c'est prendre les gens pour des idiots ; d'ailleurs pour website et les autres il serait mieux d'utiliser le terme français directement).

* En français on utilise " (les guillemets) et non ' (l'apostrophe) pour mettre entre guillemets une portion de texte.

* Attention aux fautes d'orthographe et de frappe.
Bonjour à tous,

Désolé pour le déterrage de topic, mais j'ai eu de petit problème qui font que je n'ai pu avancer sur mon site, et de plus, j'avais perdu le lien de ce topic.

Je tiens énormément à tous vous remerciez pour vos réponses, qui m'apportent beaucoup d'aide et de connaissance!

Je travail actuellement sur mon site depuis 2, 3semaines, je vous montrerais les modifications bientôt. Smiley biggrin

Encore merci. Smiley cligne
Modifié par Syntaxlb (21 Oct 2010 - 09:32)
Bonjour,

j'avance progressivement sur mon site, et là je suis sur une méthode permettant de précharger les images du menu.

Je me suis renseigner sur la méthode des "sprites" en css. C'est intéressant, mais le problème c'est qu'on utilise l'attribut "background" sous CSS pour afficher l'image. Hors, mes images du menu sont porteuses de contenu ("News", "A propos", etc..). Il ne serait pas donc très accessible d'utiliser cette méthode ?

Mais alors, quelle méthode puis-je utiliser pour précharger mes images du menu, sachant que je souhaite afficher mes images par la balise <img>, par question d'accessibilité ?


Merci d'avance !
Salut,

Un détail qui m'a sauté aux yeux : connexion s'écrit avec un X
(+ quelques autres fautes dans ton texte.)

C'est normal les pointillés blancs verticaux sur le bord gauche de l'écran à côté de connexion justement ? C'est un peu étrange.

Sinon j'aime bien...

Bonne continuation
Modifié par thelma (28 Oct 2010 - 22:18)
Salut !

Voilà je viens de mettre à jour ma nouvelle version de mon portfolio !
Bon aucun changement niveau design, à part quelques corrections.

Design et texte :
- Sprite pour les icones Home et Contact
- J'ai mis un menu en texte, plus propre que les images je trouve.
- Quelques corrections d'orthographe dans mon texte
- Favicon

Code :
- Changement complet de l'architecture du site.
- Ajout de la POO
- Système d'actualité + commentaire en poo.
- Petit système d'identification, je me suis crée une classe ACL pour les contrôles d'accès .
bon pour l'instant j'ai pas mis de page d'inscription, donc on peut juste se connecté avec "test" / "test" ^^
- Quelques corrections niveau accessibilité et standard web.

- Ajout de meta tag pour les descriptions et titles variables selon les pages


Sinon, les pages "Portfolio", et "Contact" sont en construction.

Voilà je crois que c'est tout.


Thelma > Merci pour ton message, j'ai jamais fais attention à cette faute ! Smiley sweatdrop Bon, il est vrai que je suis pas très doué niveau orthographe, j'essaie de m'améliorer.
Pour les pointillés blanc, oui c'est normal. C'est pour essayé de combler un peu le vide, il faudra que j'essaye sans, ça rend peut-être mieux Smiley ravi

Encore merci à tous, et n'hésitez pas à lancer les critiques, c'est comme ça que je m'améliore !

Je vous tiens au courant pour d'éventuels changements. Bonne journée.
Sujet clos
Aller à