blog

Vestiges d’un CSS Guru

Billet

Projet final : Timeline et Coups de Cœur

La page A propos est la première générée par WordPress. On l’édite souvent très rapidement parce que notre souhait est plutôt d’éditer le 1er billet et d’en écrire pleins d’autres (c’est pourquoi on débute un blog non ?).

La page A propos, elle, finit par prendre la poussière. C’est normal : chaque jour qui passe la rend de plus en plus désuète. Elle demande sans cesse à être mise à jour, mais vous la négligez continuellement au profit de vos billets, toujours fringuants.

Sur mon blog, elle demeurait secrètement en ligne mais il n’existait aucun lien pointant vers elle. Un manque de tact de ma part, forcément.

Mais soudain, une vision…

Timeline : animation, perspective et perception

Au départ, je voyais cette simple timeline, légèrement en perspective, avec seulement mon parcours professionnel. Mais la rédaction plutôt rapide du parcours m’a amené à rajouter ce qui se passe avant. Du coup, l’espace requis s’agrandissait et imposa au final une animation de la timeline.

Ce sont au final les 8 chapitres qui sont les maîtres à bord :

  • chacun des 8 chapitres est lié à l’une des 7 périodes de la timeline et récupère sa couleur
  • un clic sur un chapitre met en valeur la période correspondante
  • la mise en valeur est en réalité un positionnement au centre absolu de la période concernée
  • ce positionnement s’effectue selon la distance au bord gauche et la largeur de la période
  • la perspective est un skew en CSS3
  • le style des box des chapitres vient de la page about:home Firefox
  • les années (2000-2012) et les numéros (1-8) sont générés en jQuery

Coups de Cœur : icônes, icônes et rédaction

Si vous aviez travaillé avec moi, vous m’aurez souvent entendu dire “Dropbox, c’est la vie“, ou encore “Soundcloud, c’est la vie“. Et quelque part, c’est vrai.

Du coup, j’ai regroupé 15 produits et services que j’adore (et quand je dis j’adore, j’ADORE). Il en manque peut-être, je sais pas trop, mais il me fallait un multiple de 3… En tout cas, je peux vous assurez d’une chose : vous ne vous tromperez pas si vous vous décidez (ou avez déjà décidé) d’utiliser un de ces produits.

Un peu de technique :

  • les infos des 15 boutons (nom, tagline, type, url) sont dans un tableau JS
  • le background-position est généré à la volée
  • l’affichage et le filtrage sont un simple show/hide (car toute tentative animée s’avérait infructueuse)

Ces 15 produits sont tous au final très connus, mais il est facile de négliger leur qualité et leur importance tant ils sont utilisés abondamment par tout le monde tout le temps. Exemple : Wikipedia.

Le succès de Wikipedia vient de l’approche absolument désintéréssée de ses contributeurs : l’intérêt de fournir de fausses informations relève du néant. A qui profiterait le crime ? A personne. Là réside la clé de la victoire.
Les hérétiques existeront toujours. Que voulez-vous : l’ignorance n’a pas de limite.

Est-ce que cette liste est destinée à s’agrandir ? Pourquoi pas. J’aurais pu rajouter Google Reader, Winamp, Steam, Audacity, WinSCP… parce qu’ils sont les seuls auxquels j’ai pu m’accrocher définitivement dans leur domaine, mais sont encore perfectibles dans l’absolu. On verra…

Projet… final ?

Oui.

Depuis septembre, j’ai réalisé 3 projets :

Ils m’ont pris beaucoup de temps (à rédiger surtout), notamment parce que je les destinais à la pérennité.

Je ne prévoyais pas du tout de réaliser cette nouvelle page A propos, mais l’idée est apparue soudainement dans ma tête. Et dès lors que ça arrive, impossible pour moi de laisser tomber en chemin. J’ai donc raconté succintement mon parcours, d’où j’étais parti et jusqu’où je suis arrivé, avec les étapes parfois curieuses qui l’ont régulé.

Quelque part, la boucle est bouclée. Et je n’ai plus rien à dire.