Le CV HTML5 de Georges Abitbol 3

Le CV HTML5 de Georges Abitbol

Le couple HTML5-CSS3 apporte un nombre conséquent de nouveautés, mais la fraîcheur (ou le manque de maturité) de ces standards m’empêche un peu de les côtoyer au travail. Pour tester et illustrer quelques fonctionnalités HTML5 et CSS2/3, j’ai décidé de réaliser une petite page de démo.

Pour les impatients, le résultat est en bas. Pour les autres, détaillons un peu les points intéressants.

La mission

Evidemment le résultat pourra difficilement être à la fois exhaustif et cohérent, j’ai donc essayé d’appliquer quelques unes de ces nouveautés à un contexte précis : un modèle de CV. Je vous présente donc dans cet article le résultat de cette expérience : le CV de Georges Abitbol.

Je me suis fixé les contraintes suivantes :
Le CV de Georgie

  • Pas de fichier image
  • Pas une ligne de JavaScript !!
  • Utilise des animations
  • Imprimable (c’est un CV après tout)
  • Un minimum Accessible
  • Pas trop laid (pour l’exercice ce n’est pas capital)

HTML5

Les nouveautés des drafts successifs d’HTML5 sont légion et font l’objet de conférences entières. Je me suis concentré sur des nouvelles balises permettant de structurer le contenu en faisant l’économie de classes CSS. J’ai toujours une div avec une classe « container » pour gérer un système de marges, mais en dehors de ça la page contient un <header>, un <footer>, et des <section>. Plutôt sympa. Les sections contiennent des paragraphes et des listes, et grâce à cette structure, une grosse partie du CSS n’aura pas besoin de classes explicites! A noter que j’utilise aussi <address> qui date du HTML4 et ne peut contenir de listes ou de <div>.

Des icônes mais pas d’image

Pour attirer l’attention sur les onglets de contact nous avons besoin de quelques icônes. Deux solutions pour ça: utiliser l’encodage Base64 dans des classes CSS, ou utiliser une police de caractères externe grâce à la règle @font-face permettant de déclarer de nouvelles polices pour le document. Aucune de ces deux techniques n’est vraiment nouvelle. @font-face vient de CSS2 mais son adoption générale et le support des formats .ttf et .otf est relativement récente, donc je m’autorise cet écart pour l’exercice.

Le studio russe Just Be Nice fournit justement une police gratuite contenant tout un tas d’icônes, et même le petit bout de déclaration CSS @font-face pour importer la police dans tous les formats possibles. Pour le CV de Georges nous utiliserons une petite flèche pour les sections, une série d’icônes pour les onglets de contact, et les logos de LinkedIn et Twitter pour les liens vers les différents profils.

Toutes ces icônes n’ont pas besoin d’apparaître dans la source HTML, grâce au pseudo élément :before qui nous permet d’insérer via la propriété content des éléments dynamiquement (ici les lettres correspondant dans notre police russe aux icônes que l’on veut). Pour savoir quelle lettre insérer, soit on crée une classe pour chaque icône, soit on utilise l’information stockée dans un attribut data de l’objet dont on a défini le :before :

address span:before, .icon{
content:attr(data-icontype);
font-family:websymbols;
...
}

En bonus, pour donner un peu de personnalité à notre CV, j’ai décidé de profiter encore de @font-face pour nous affranchir des polices standard et utiliser une police externe, fournie par Google Webfonts. Une fois la police choisie, Google nous propose d’inclure le CSS qui va bien en utilisant la propriété @import : @import url(http://fonts.googleapis.com/css?family=Coustard);

Une fois la police déclarée, on l’utilisera comme les polices standard dans nos propriétés CSS :
body {
font-family: 'Coustard', sans-serif;
}

Interactivité ?

On dit souvent qu’un CV papier français standard devrait tenir sur une page, afin d’avoir une vue d’ensemble au premier coup d’oeil. L’idée pour cette version web est d’arriver à se passer d’ascenseur (donc de défilement) sans trop compromettre la quantité d’informations disponibles, et d’ajouter une touche de dynamisme à l’ensemble. Pour cela j’ai opté pour des sections « en accordéon » qui réagissent au survol de la souris. La section active se déplie et les autres se réduisent. Ainsi on peut espérer conserver une page sans ascenseur, et inviter le lecteur à visiter successivement chacune des sections.

Sections fermées

Un coup d'accordéon

Nous n’avons pas droit au JavaScript, nous allons nous contenter des états reconnus par les pseudo éléments CSS et notamment lorsque le curseur survole un élément (:hover). Ça n’est pas nouveau mais ici nous allons utiliser la propriété transition pour animer la transition entre le statut normal et le statut « survolé » de nos sections. Toutes les propriétés ne sont pas animables, celles qui nous intéressent ici sont l’opacité (opacity) et la hauteur (height). Malheureusement la hauteur doit être explicite en pixels pour que le navigateur anime la transition correctement, et par conséquent nos éléments devront avoir une hauteur fixe. Enfin, il faudra penser à multiplier les déclarations avec les différents préfixes des navigateurs.

Une seconde utilisation quasiment similaire consistera en de petits onglets qui révéleront, en temps voulu par le visiteur, les informations de contact (email, adresse, liens).

Le 06 de l'Homme le plus classe du monde, ça vous intéresse ?

Super, et comment on imprime ça ?

Hum, c’est embarrassant comme dirait Firefox. Les accordéons, les onglets cachés, c’est bien gentil mais pour imprimer le CV ce n’est pas génial. Idem si je suis sur un mobile ou une tablette qui gèrent mal la notion de survol du pointeur…

Heureusement les media queries du CSS viennent à notre secours ! Les types de media avaient été introduits dans CSS2 et permettaient de faire des déclarations différentes en fonction du média screen ou print. Les media queries de CSS3 vont plus loin en nous permettant de former des conditions complexes sur un certain nombre de paramètres comme la largeur de la page et de l’écran. En combinant tout ça on peut donc modifier les styles pour que nos accordéons et nos onglets se déplient si l’on imprime la page ou si on la lit depuis un périphérique mobile.

Cool on peut imprimer !

Ici notamment j’ai supprimé les icones de contact, ce qui est très simple puisque je n’ai qu’à surcharger la classe concernée afin que les :before et autres :after dans lesquels je plaçais les icônes ne soient plus affichés.

Touches finales

Rajoutons en vrac :

  • HTML5 propose une balise footer que nous allons coller en bas de la page en position absolue (sauf pour l’impression et les mobiles grâce aux media queries).
  • Une petite transformation CSS3 (rotation) pour placer le header verticalement dans la marge et gagner un peu de place.
  • J’ai aussi ajouté un dégradé (gradient) en fond, pour la déconnade. La syntaxe est assez horrible et le support plutôt chaotique, de sorte que certains préfèrent se rabattre sur le SVG qui est maintenant assez bien supporté (y compris sur mobiles). Mais il existe aujourd’hui sur le web de nombreux outils permettant de générer facilement le code CSS3 pour créer des dégradés (et des boutons).

Tadaaa !

Au final notre page est valide HTML5 (encore heureux), valide WCAG 2.0, très lisible même sans charger la feuille de style grâce aux balises HTML5 comme header, section ou footer.. Grâce à l’utilisation de pseudo éléments :before ou :after avec content(), nous pouvons insérer des éléments purement visuels comme des icônes sans toucher au code HTML qui reste minimaliste et concentré sur le contenu. Il ne faut d’ailleurs pas perdre de vue que ces éléments ne devraient jamais contenir d’information exclusive (on serait par exemple tenté de les utiliser pour rajouter des unités dans un tableau…).

La feuille de style passe mieux sur Chrome, mais tout est fonctionnel sur Firefox et IE9. Cependant la validité du CSS en prend un coup en raison des préfixes propriétaires que l’on est pour le moment forcé d’utiliser.

Vous pouvez accéder à la page ici, si vous voulez tester sa compatibilité, jouer avec les section dépliantes pour tester les animations, redimensionner ou imprimer le document pour voir l’effet des media queries. Ou accessoirement si vous voulez lire la source de la page html et de la feuille de style, c’est aussi là pour ça ;)

Conclusion

Ce petit TP m’aura donc permis de jouer un peu avec :

  • @font-face et les web fonts,
  • des pseudo éléments très puissants comme :before et after:
  • la propriété content,
  • @media et les media queries,
  • transition et ses propriétés,
  • transform et quelques propriétés (rotate),
  • les dégradés CSS3,
  • des nouvelles balises HTML5 header, footer, section…
  • mes nerfs

Merci à la Désencyclopédie de m’avoir fourni les informations essentielles du profil de Mr Abitbol.

3 thoughts on “Le CV HTML5 de Georges Abitbol

  1. Reply Sandy avr 11, 2012 16:47

    Bon, alors si je comprends bien…
    C’est une page HTML statique…dynamique :p ?

  2. Reply Tom avr 12, 2012 04:10

    Eh bien… c’est une page statique d’un point de vue serveur, mais visuellement dynamique à cause des animations et des media queries :)

  3. Reply françois déc 18, 2012 06:05

    Je pense que le terme juste est une page interactive (2.0).

Leave a Reply