[Intermédiaire] Comment améliorer mon site http://mohamedmaiza.com ?

Bonjour à tous.

Je suis un jeune intégrateur web avec une première expérience en entreprise (hors stage).
Je travail sur mon portfolio http://www.mohamedmaiza.com, et voudrais de vos conseils en sémantique, W3C, optimisations des fichiers, graphisme, compatibilité cross-browser, accessibilité etc... JUSTE sur la page d'accueil, le reste des pages n'étant pas encore finalisé graphiquement et coté code .

Merci à tous !
Modifié par Hedisign (26 Jul 2011 - 13:24)

A propos du graphisme, je trouve ( et ça n'engage que moi ) qu'il y a trop de typos différentes. Je ne trouve pas que la typo avec lequel tu écris "Bonjour,..." soit un choix très judicieux : le fait que tous les caractères soit de la même taille et de largeur différentes nuit à la lisibilité.

Il y a des textures dans le fond, puis certains éléments de ton design sont très "lisse" d'autre on un effet "aqua" et les icons de réseaux sociaux ont un style crayonné... bref il n'y a pas vraiment de cohérence dans ton graphisme. certains effet, sur le texte notamment ne sont pas non plus justifié.

Mais ça reste propre et je suis peut-être un peu exigeant pour un site intermédiaire.

Je n'ai pas trop regardé le code HTML CSS.

juste une astuce pour ton background: remplace "0 0" par "center-top" pour que celui-ci reste centré comme ton site.

Tu peux aussi mettre l'appel du JS juste avant la balise de fin </body> et pas dans ton footer.

Merci spout.
c'est vrai qu'il y a surement trop de polices différentes sur la même page.
Et je vais remplacer celle de "Bonjour,..." .

Par contre de quel effet sur le texte parles-tu ?

Et "center top" au lieu de "0 0" ne change rien au background du body.

Salut,

Au niveau du design : je rejoins spout sur la typo, regarde la page Contact par exemple, quatre fonts différentes en moins de dix mots, c'est beaucoup trop. De plus, le footer est pas très esthétique : les icônes sont trop petites (et floues), celle Google+ ne vient pas du même set ce qui fait bizarre, la font employée pour ton nom est un peu moche, l'icône pour ton code valide est moche (d'ailleurs ton xhtml, qu'il faut passer en uft-16 pour le valider, n'est pas valide) et inutile. D'ailleurs, il faudrait mettre un "s" à "valide" sauf si tu considères que ton adjectif ne porte que sur le CSS ce qui serait plus vrai puisque c'est le seul valide.

Page à propos : on s'en fout des logiciels que t'utilises, et on s'en fout que tes sites soient valides W3C, c'est une évidence qu'ils doivent l'être quand tu dis être intégrateur web. Mieux vaut que tu parles de toi-même et de ton expérience si tu en as.
Les citations ne servent à rien, elles n'ont en plus aucun rapport avec ton contenu.

Portfolio : ça bugue.

Contact : c'est quoi ce mini-formulaire ?

Pour ce qui est du code, j'ai regardé vite fait, y a des trucs à améliorer, regarde des tutos xhtml sur le net

Un peu sec, mais c'est le seul moyen pour réussir ...

Bonne continuation !

Merci pour tes critiques Stephanelam, j'en ai besoin.

Pourquoi passer en utf-16 (différence avec utf-8) ?

Les pages "A propos" et "Portfolio" ne sont pas terminées, je l'avais précisé.

Je suis curieux de savoir ce qui est à améliorer en xhtml .

@Stephanelam : seul la page d'accueil était a regardé, le reste n'est pas fini

@Hedisign : si tu regarde ton site avec une résolution de + de 2000px de large par exemple, tu t'apercevra que le background reste a gauche de ton site alors que ton contenu se déplace au centre. Le "top center" te permet de garder ton background au centre.

Je n'ai pas dit que tu devais passer en uft-16, ce que je dis c'est qu'en passant ton site au Validator XHTML, il ne peut pas le scanner en uft-8 à cause de certains caractères, il faut donc le passer en uft-16.

Voilà quand on le passe en détection auto (uft-8) : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mohamedmaiza.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Et quand on lui demande manuellement de le checker en uft-16 : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mohamedmaiza.com%2F&charset=utf-16&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

Tu remarqueras que la ligne 12, celle qui fait le fail, est celle-ci :

<meta name="description" content="Mohamed Hedi Ma&#65533;za | Int&#65533;grateur Web Auto-entrepreneur"/>

En web, on utilise des caractères spéciaux html, qui sont par exemple &eacute; pour é, &egrave; pour è, ...

Y a des listes sur internet.

Ho ! Merci les mecs, moi j'ai pas d'écran géant et j'ai pas cherché à savoir ce que ça pouvait donner.

Ok Stephanelam, je vais repasser ces caractères bizarres en &eacute; . Ça me permettra de rester en utf-8 valide.

C'est pas une question de validité, c'est une question d'encodage des caractères.

Dis-moi, juste par curiosité, tu es vraiment semi-pro ?

Ça dépend on entends quoi par semi-pro .
J'ai compris que c'est les caractères bizarre qui font buger l'utf-8, et qu'une fois qu'ils seront remplacés, mon code sera valide.

Oui, ce sont eux qui rendent ton code invalide mais d'une manière générale il faut savoir faire la différence entre syntaxe et encodage.

Oui je pense faire la différence. Merci à toi.
Les caractères bizarres qui font le fail à la ligne 12, je ne me rappel pas pourquoi les avoir mis :

<meta name="description" content="Mohamed Hedi Ma&#65533;za | Int&#65533;grateur Web Auto-entrepreneur"/>

Comment ça, tu ne te rappelles pas pourquoi tu les a mis ?

C'est le meta description de ton site, la petite ligne qui va apparaître dans Google en-dessous du nom du site, lui symbolisé par le meta title.

Par contre, mets plutôt ceci que ce que tu as proposé :

<meta name="description" content="Mohamed Hedi Ma&iuml;za | Int&eacute;grateur Web Auto-entrepreneur"/>

Lol, je parle de &#65533; et &#65533;.
Effectivement : &iuml; et &eacute; c'est mieux.

Tout à fait.

Maintenant il te reste plus qu'à bosser tout le design, soit 80% du site !

Bonne chance ...

Oui merci.

Stephanelam a écrit :

En web, on utilise des caractères spéciaux html, qui sont par exemple &eacute; pour é, &egrave; pour è, ...

Jamais de la vie, tu pouvais pas lui donner un pire conseil. Si tu gères ton encodage de caractères correctement, il n'y aucune raison pour utiliser les entités HTML pour remplacer les caractères accentués courants en 2011.
Modifié par jb_gfx (26 Jul 2011 - 15:59)

Ah ... on m'avait toujours dit d'utiliser les entités. Tu peux développer "si tu gères ton encodage de caractères correctement" ? Ca m'intéresse ...

Tout simplement parce que l'utf-8 (puisqu'il est en question ici) comprend les caractères accentués (les caractères plus "spéciaux" c'est autre chose).

Les caractères devant être "encodés" sont ceux ne se trouvant pas dans le jeu de caractères choisi.