[Pro] CV en HTML5 avec microformats : johanramon.fr

Salut,

Je viens vous présenter mon CV fraîchement mis en ligne et vous demander votre avis.

Je m'étais "lancé le défi" de le coder en HTML5 et de le "truffer" de microformats (hCard, hCalendar, hResume).
Il atteint, en principe, un haut degré d'accessibilité.
Je me suis également efforcé de proposer une version imprimable adaptée.
N'hésitez pas à me signaler d'éventuelles erreurs.

Que pensez-vous de la mise en page générale ? du choix de la police de caractère ? de la taille des titres ? des espacements ? des interlignages ? etc.

Je vais très prochainement travailler sur sa version mobile.

Merci d'avance pour toutes vos suggestions d'améliorations.

Johan
Modifié par mecho (28 Feb 2011 - 21:23)

Bonjour,

L'absence de design est très flagrante.

Les puces qui sortents des blocs sont dérangeantes.

Je ne vois pas l'intérêt de préciser l'adresse de ton site web... on est dessus.

Un formulaire de contact serait plus convivial et moins attrape-spam que l'adresse en clair.

Pour le code :
* 19 erreurs de code, c'est pas génial... à corriger.

* Ta meta description n'a rien de "sexy", dans les résultats d'un moteurs de recherche elle ne donnera peut-être pas assez envie de cliquer L'etoffer un peu ne lui ferait pas de mal.

* Il est préférable de placer les scripts en fin de document.

* J'ai la flemme de vérifier si le serveur envoie l'information Content-Language, si ce n'est pas le cas, il faudrait rajouter la meta éponyme.

* J'ai vraiment du mal avec les éléments vides, surtout quand ils s'imbriquent...

* Le title sur le liens vers johan_ramon.vcf n'apporte rien, l'information est déjà présente.

* Très bonne utilisation des microformats.

Pour éviter le spam, tu peux générer ton adresse email en javascript.

Attention hgroup n'est pas accessible aux utilisateurs de JAWS pour le moment.

Merci pour vos remarques.

@ Laurie-Anne :

a écrit :
L'absence de design est très flagrante.

Effectivement mais c'est (si j'ose dire) voulu.
Je l'ai souhaité épuré, aéré, sobre, "minimaliste"... avec pour objectif, qu'il soit le plus "neutre" possible, susceptible de plaire au plus grand nombre.

a écrit :
Les puces qui sortents des blocs sont dérangeantes.

Cela permet de n'avoir qu'un seul axe de lecture.
C'est également un choix assumé mais évidemment pas forcément irréversible. Je suis preneur de tout autres avis afin d'appliquer la modification ou de laisser en l'état. merci

a écrit :
Un formulaire de contact serait plus convivial et moins attrape-spam que l'adresse en clair.

J'ai appliqué la technique proposée (ci-dessus) par Patidou, cela évitera que ma boîte mail se fasse polluer .

a écrit :
19 erreurs de code, c'est pas génial... à corriger.

Elles sont normalement corrigées.

a écrit :
Ta meta description n'a rien de "sexy", dans les résultats d'un moteurs de recherche elle ne donnera peut-être pas assez envie de cliquer. L'etoffer un peu ne lui ferait pas de mal.

Tu as raison, je vais me pencher sur la question.

a écrit :
Il est préférable de placer les scripts en fin de document.

Sauf erreur de ma part, pour celui de Google Analytics, il est préférable de le placer en haut.
J'ai appelé celui qui me protégera des spams en fin de document.

a écrit :
J'ai la flemme de vérifier si le serveur envoie l'information Content-Language, si ce n'est pas le cas, il faudrait rajouter la meta éponyme.

En principe oui. Mais par prudence, j'ai ajouté :

<meta name="language" content="fr" />

a écrit :
J'ai vraiment du mal avec les éléments vides, surtout quand ils s'imbriquent..

Idem. Je m'en étais servi pour spécifier que mes coordonnées étaient celles de mon domicile (en microformats : home) et non pas professionnelles (work). Mais, étant donné que je ne propose que mes coordonnées personnelles, j'ai suivi ton conseil .

a écrit :
Le title sur le liens vers johan_ramon.vcf n'apporte rien, l'information est déjà présente.

L'intitulé du lien n'explique pas que son activation entraînera l'ouverture d'une boite de dialogue. Ici, l'attribut 'title' apporte donc une information supplémentaire à l'intitulé du lien seul (+ poids et extension du fichier à télécharger).

@ Patidou :

a écrit :
Pour éviter le spam, tu peux générer ton adresse email en javascript

J'ai appliqué cette méthode. Elle fonctionne parfaitement, juste un peu déroutante en cas de navigation sans le support de JavaScript. Merci à toi et Julien Royer .

a écrit :
Attention hgroup n'est pas accessible aux utilisateurs de JAWS pour le moment.

Oups... Cela veut dire que les contenus encapsulés par cette balise ne seront pas restitués ?

Encore merci pour vos interventions.

Johan
Modifié par mecho (28 Feb 2011 - 21:15)

mecho a écrit :
Cela permet de n'avoir qu'un seul axe de lecture.

Malheureusement, l'effet n'est pas celui attendu, les puces qui sortent du bloc de texte cassent, au contraire l'axe de lecture. De puis, il est normal et attendu que des puces soient en retrait positif par rapport à un paragraphe.

mecho a écrit :
Sauf erreur de ma part, pour celui de Google Analytics, il est préférable de le placer en haut.

EN fait ça dépend pour qui. Pour tes stats, au cas où la page met énormement de temps à charger et que le visiteur est susceptible de quitter le site avant la fin du chargement de la page, alors oui, il vaut mieux le mettre en haut ; MAIS, pour ton visiteur, il est préférable que le contenu se charge avant, donc il est préférable de placer le script en fin de document. Je ne suis pas sûre que le script se charge en parallel avec le reste de la page, si c'est le cas alors il peut rester en haut de document.

mecho a écrit :
L'intitulé du lien n'explique pas que son activation entraînera l'ouverture d'une boite de dialogue. Ici, l'attribut 'title' apporte donc une information supplémentaire à l'intitulé du lien seul (+ poids et extension du fichier à télécharger).

Plus d'information que l'intitulé seul, mais totalement redondant avec le contenu qui suit le lien. CDonc je reste sur ma position, ce title est superflu et potentiellement gênant.

Laurie-Anne a écrit :

EN fait ça dépend pour qui. Pour tes stats, au cas où la page met énormement de temps à charger et que le visiteur est susceptible de quitter le site avant la fin du chargement de la page, alors oui, il vaut mieux le mettre en haut ; MAIS, pour ton visiteur, il est préférable que le contenu se charge avant, donc il est préférable de placer le script en fin de document. Je ne suis pas sûre que le script se charge en parallel avec le reste de la page, si c'est le cas alors il peut rester en haut de document.

Le script de Google Analytics se charge de façon asynchrone (même principe que head.js).

M. Google a écrit :

Le code de suivi Google Analytics asynchrone est un extrait de code JavaScript amélioré, qui permet de charger le code de suivi ga.js en arrière-plan pendant que d'autres scripts ou du contenu continue de se charger sur les pages de votre site Web.

Modifié par jb_gfx (02 Mar 2011 - 18:37)

OK, donc il peut effectivement être placé dans le head (mais pas "doit").

a écrit :
Malheureusement, l'effet n'est pas celui attendu, les puces qui sortent du bloc de texte cassent, au contraire l'axe de lecture. De puis, il est normal et attendu que des puces soient en retrait positif par rapport à un paragraphe.

Ayant reçu plusieurs avis allant dans ce sens, je les ai finalement légèrement indentés.

a écrit :
Le script de Google Analytics se charge de façon asynchrone (même principe que head.js).

Merci pour l'info.

a écrit :
Plus d'information que l'intitulé seul, mais totalement redondant avec le contenu qui suit le lien.

Pour être certain que les informations concernant l'extension du fichier et son poids soit restituées par les aides techniques et ce quelque soit leurs versions et leurs configurations ; j'ai opté pour les placer directement dans le lien.

J'ai également légèrement enrichi la méta description.
Modifié par mecho (04 Mar 2011 - 13:13)