[Amateur] Mon CV (en anglais) : www.claine.net

Bonjour à tous !

Voilà, je soumets mon site à la critique : www.claine.net

Il s'agit de mon "resume", c'est-à-dire mon CV, mais en anglais, et dont le contenu est formatté selon les critères américains, qui diffèrent un peu des CV français.

Le site est valide XHTML, à peu près CSS (quelques déclarations CSS3 qui le rendent invalide).

Testé sur les dernières version windows de FF, Safari, Chrome, Opéra, et sur IE6 (je n'ai pas pu tester mes dernières modifs sur IE7 et IE8, je le ferai + tard).

Il n'est pas tout-à-fait fini, voici ce qu'il manque encore pour vous éviter des surprises

* Les documents PDF et Word
* Le CSS print
* Un chouilla de JS sur le formulaire de contact
* La version pour mobiles

Voilà, merci de vos avis sur le design et le code (et si vous en avez sur le contenu, ne vous gênez pas) !

<Edit : je le trouve vachement long à charger sous FF, est-ce que vous constatez la même chose ?>
Modifié par mistike (08 Dec 2010 - 18:10)

sous ff c'est parfait niveau chargement.

doc mcfly a écrit :
sous ff c'est parfait niveau chargement.

Oui il semblerait que ce soit mon PC qui s'étouffe Sur un autre ça va mieux !

Bonjour,

Aucun problème sur la présentation américaine, c'est très clair. Par contre j'ai un peu de mal à lire certaines polices un peu trop fines (titres principaux surtout).

Pour le code :
* Il manque une meta Content-Language.

* Les meta Author, author, geo.placename, geo.region ne servent strictement à rien.

* La meta robots ne sert à rien non plus car elle a ses valeurs par défaut.

* Pourquoi inclure un script HTML5 pour IE alors que tu n'utilises pas le doctype HTML5 ?

* Tu multiplies un peu les divs (header qui ne contient que wrapper), il y a matière à optimisation.

* Attention à l'utilisation de title : Title peut être utilisé, sur les liens, pour apporter une information nécessaire à la bonne navigation du visiteur et supplémentaire à l'intitulé du lien. Un title "Contact me" sur un lien ayant comme intitulé "Contact form" est donc totalement inutile et redondant. Title est un attribut facultatif, et très rarement nécessaire. Sur les liens pointant sur les différentes versions de ton CV, il est par contre totalement approprié.

* Attention à l’utilisation de alt : Alt doit être présent sur toutes les images, mais il doit rester vide dans deux cas précis : si l’image est décorative ou suivie d’une description ou légende ; ce qui est le cas de l’image mail.jpg, elle est décorative, son alt devrait donc être vide. Un alt rempli alors qu’il devrait rester vide apporte une redondance et une confusion potentielle.

* Ta hiérarchie des titres est un peu bancale. « SAP Basis Consultant <span>&amp; </span>Technical Project Manager » ne devrait pas être un h2, il peut éventuellement faire partie du h1, mais est plut une tagline qu’un titre de section.

* Très bon balisage du CV et bonne utilisation des microformats.

Bonjour Laurie-Anne

Merci

Laurie-Anne a écrit :
Par contre j'ai un peu de mal à lire certaines polices un peu trop fines (titres principaux surtout).

Hum. Je suis un peu tombée amoureuse de cette police, mais je dois admettre qu'elle est parfois un peu trop fine en petit. Par contre dans le cas de mes titres je trouvais ça lisible ? Peux-tu me dire sur quel navigateur tu as testé ?

Laurie-Anne a écrit :

* Il manque une meta Content-Language.

Oops !

Laurie-Anne a écrit :

* Les meta Author, author, geo.placename, geo.region ne servent strictement à rien.

Ca vient de mes premiers tests pour les microformats et autres joyeusetés du genre. Je les ai enlevés. Comme quoi, même en se relisant...

Laurie-Anne a écrit :

* La meta robots ne sert à rien non plus car elle a ses valeurs par défaut.

D'autant plus que j'utilise (toujours) un robots.txt... enlevé aussi.

Laurie-Anne a écrit :

* Pourquoi inclure un script HTML5 pour IE alors que tu n'utilises pas le doctype HTML5 ?

Ma première version était en HTML5, mais j'y ai renoncé... et je n'ai pas enlevé le script

Laurie-Anne a écrit :

* Tu multiplies un peu les divs (header qui ne contient que wrapper), il y a matière à optimisation.

Alors là ça m'intéresse. En général j'ai plutôt la classite aïgue, et je n'aime pas les div qui ne servent à rien ou presque. Mais celle-là... elle n'est là que pour pouvoir mettre la bordure sur toute la largeur de l'écran. C'est pareil pour le footeer.

Si tu as une alternative, je prends avec plaisir !

Laurie-Anne a écrit :

* Attention à l'utilisation de title : (...)

* Attention à l’utilisation de alt : (...)

Exact, là aussi ça vient d'un oubli à la relecture. Au début je n'avais pas mis le texte à côté. Corrigé.

Laurie-Anne a écrit :

* Ta hiérarchie des titres est un peu bancale. « SAP Basis Consultant &lt;span&gt;&amp;amp; &lt;/span&gt;Technical Project Manager » ne devrait pas être un h2, il peut éventuellement faire partie du h1, mais est plut une tagline qu’un titre de section.

Oui... j'ai hésité... et j'hésite encore

J'ai testé sous WinXP / IE8 et avec la methode de lissage standard (je n'aime pas clearType sous WinXP)

Laurie-Anne a écrit :
J'ai testé sous WinXP / IE8 et avec la methode de lissage standard (je n'aime pas clearType sous WinXP)

J'essaierai sans ClearType ce soir, merci.

Sinon, si quelqu'un pouvait me dire si ça passe bien sous Mac... et aussi si le fichier en format texte/mac est correct (ou s'il est inutile, au cas où celui en format texte/win serait ok )

Merci

Niveau design j'aime bien, je trouve juste que le contraste du texte est un peu trop faible.

Au niveau du code :

- Il y a une redondance inutile d'informations au niveau des 2 premiers titres h1 et h2. Ces balises sont faites pour donner des titres aux contenus d'un document, mais pas au document lui-même car la balise <title> est déjà là pour ça.

- Dans la partie "Education", les noms des diplômes sont des titres

- Pour les CV qui sont à téléchargés, ça serait encore mieux de rajouter le poids de chaque fichiers entre parenthèses.

- Je chipote un peu, mais la partie "IBM" contient une liste de 5 missions qui n'est pas balisée comme tel.

La syntaxe ressemblerait à ça :

<!-- fin de la classe "position-summary" -->

<ul id="liste-missions">

<li class="mission">
  <Hn>titre de la mission</h>
  <p>paragraphe si il y en a</p>
  <!-- sous liste -->
  <ul>
     <li>informations concernant la mission effectuée</li>
     <li>informations concernant la mission effectuée</li>
     [...]
  </ul>
</li>

<li class="mission">
  <Hn>titre de la mission</h>
  <p>paragraphe si il y en a</p>
  <!-- sous liste -->
  <ul>
     <li>informations concernant la mission effectuée</li>
     <li>informations concernant la mission effectuée</li>
     [...]
  </ul>
</li>

Etc...

</ul>

Sinon, globalement c'est très bien codé.

"mistike" a écrit :
Sinon, si quelqu'un pouvait me dire si ça passe bien sous Mac...

J'ai regarder avec plusieurs navigateurs et il n'y a aucun problème.
Modifié par Chok71 (09 Dec 2010 - 19:09)

Chok71 a écrit :

- Je chipote un peu, mais la partie &quot;IBM&quot; contient une liste de 5 missions qui n'est pas balisée comme tel.

Je ne suis pas d'accord avec cette proposition. Il y a beaucoup trop d'informations dans chaque élément de la liste pour en faire une liste. Bien que ce soit une liste de missions, ça ne veut pas forcément dire qu'il faut utiliser une liste HTML. Autrement, comme ça a déjà été le cas à une certaine époque, certaines personnes abusaient des listes et y mettaient absolument toute la structure du site. Dès qu'un groupe d'éléments était qualifié de liste, ils mettaient ça dans une liste HTML. Avec cette réflexion, on pourrait mettre une liste de paragraphes dans une liste, une liste d'articles dans une liste, une liste de mots dans une... liste, etc...

Trop de listes tue la liste...
Modifié par Tony Monast (09 Dec 2010 - 19:24)

Chok71 a écrit :
Niveau design j'aime bien, je trouve juste que le contraste du texte est un peu trop faible.

Pas faux... mon gris est peut-être pas assez foncé.

Chok71 a écrit :

- Il y a une redondance inutile d'informations au niveau des 2 premiers titres h1 et h2. Ces balises sont faites pour donner des titres aux contenus d'un document, mais pas au document lui-même car la balise &lt;title&gt; est déjà là pour ça.

Euh... oui mais non, je sais qu'il y a un polémique sur l'utilisation du h1 comme titre de site, mais je ne trouve pas les alternatives beaucoup plus censées d'un point de vue sémantique. Tu mettrais un paragraphe ?

Pour le h2, voir ma réponse à Laurie-Anne, je me tâte

Chok71 a écrit :

- Dans la partie &quot;Education&quot;, les noms des diplômes sont des titres

Comme je l'ait fait pour les h4 dans la partie expérience. Ca se tient.

Chok71 a écrit :

- Pour les CV qui sont à téléchargés, ça serait encore mieux de rajouter le poids de chaque fichiers entre parenthèses.

Oui, j'y ai pensé, mais ça devenait trop lourd. Je pourrais les rajouter dans le title, et ensuite au survol par JS (je suis en train d'intégrer un peu de JS dans tout ça)

Chok71 a écrit :

- Je chipote un peu, mais la partie &quot;IBM&quot; contient une liste de 5 missions qui n'est pas balisée comme tel.

Non, tu ne chipotes pas, et tu n'as pas tort. C'est comme ça que j'ai balisé la partie éducation, donc comme pour ta remarque sur les diplômes, ça se tient. Faudrait que je voies à rester logique avec moi-même, de temps en temps !

D'ailleurs si on pousse le raisonnement jusqu'au bout, je devrais aussi utiliser une liste à la place de mes div "resume-entry" !

Chok71 a écrit :

Sinon, globalement c'est très bien codé.

Merci !

@Tony Monast : Tu as raison, mais dans ma précédente remarque je pense que c'était justifier.

"mistike" a écrit :
D'ailleurs si on pousse le raisonnement jusqu'au bout, je devrais aussi utiliser une liste à la place de mes div "resume-entry" !

La syntaxe est déjà correct. Là je rejoins Tony Monast pour dire que ça serait certainement un abus de listes.
Modifié par Chok71 (09 Dec 2010 - 19:52)

Chok71 a écrit :
@Tony Monast : Tu as raison, mais dans ma précédente remarque je pense que c'était justifier.



La syntaxe est déjà correct. Là je rejoins Tony Monast pour dire que ça serait certainement un abus de listes.

Et c'est bien pour ça que je ne le pousserai pas jusqu'au bout En relisant mon code de plus près, j'avoue que je suis aussi d'accord avec Thierry. Ca se discute, c'est vrai, mais quand j'ai des hx, des paragraphes et d'autres listes, on sort de la notion de liste telle que je la comprends.

Les div "mission" sont là pour regrouper, mais dans l'absolu je pourrais même m'en passer, puisque le contenu est structuré avec des titres et des paragraphes. Ca nuirait à la lisibilité et ça m'empêcherait de les positionner facilement, mais je pourrais ^^

Thierry Henry?

Tony Monast a écrit :
Thierry Henry?

pardon

mistike a écrit :
Sinon, si quelqu'un pouvait me dire si ça passe bien sous Mac... et aussi si le fichier en format texte/mac est correct (ou s'il est inutile, au cas où celui en format texte/win serait ok )

Bonsoir, je n'ai pas vraiment le temps de faire un retour complet sur ton site, mais sur Mac il me semble que ça va très bien comme ça. Après un bref aperçu ton code me semble très propre et le contenu est très bien décrit. A ce niveau de compétence, un petit passage à html5 aurait pu être un petit plus intéressant, non ?

audrasjb a écrit :


Bonsoir, je n'ai pas vraiment le temps de faire un retour complet sur ton site, mais sur Mac il me semble que ça va très bien comme ça. Après un bref aperçu ton code me semble très propre et le contenu est très bien décrit. A ce niveau de compétence, un petit passage à html5 aurait pu être un petit plus intéressant, non ?

Merci pour le retour. Au début je l'avais fait en HTML5, mais je suis finalement revenue au XHTML pour deux raisons :

- J'ai vu dans les stats de mon ancien site qu'environ 1% des visiteurs n'avaient pas JS. Et donc pas de HTML5 sous IE.

- Les problèmes d'impression

Je sais que 1% c'est pas beaucoup, mais quand on cherche un job, surtout à l'étranger, ça peut suffire pour rater l'occasion