Logo personnel

La Vitrine

  • TagsPHP
  • TagsSASS
  • TagsGrunt
  • TagsOOCSS
  • Tagsjavascript
  • TagsHTML5

La Vitrine est un site internet qui présente une collection de verreries acquises au fil du temps grâce à des rencontres passionnantes et de fréquents coups de cœur pour de très beaux objets qui ont traversé les années, si pas les siècles, avec élégance. Quelques tableaux, un peu de grès, viennent apporter de la diversité sans pour autant jamais ternir ces éclats de verre et de cristal qui, nous l’espérons, vous éblouiront longtemps.

La Vitrine est un projet que j’ai entièrement mené. À commencer par la mise au point des besoins du client. Ensuite, j’ai proposé une maquette pour chacune des pages, qui compose le futur site internet. Une maquette se résume à un montage photo qui illustre ce à quoi le futur site ressemblera. Cela me permet d’intégrer, plus facilement les demandes du client. Ainsi en seulement quelques clics j’adapte la maquette au besoin du client sans être confronté aux contraintes techniques qu’impose le langage. Bien qu’avec CSS 3, ces limites ont été revues. Une fois que celles-ci conviennent au client, je commence le développement du site : transformer ces images en vraies pages interactives. Les maquettes sont métaphoriquement les plans de « l’œuvre ». Il devient normal de permettre au client de facilement interagir avec le contenu et même au-delà pouvoir gérer son site comme il le souhaite. Afin de gagner en temps, on travaille souvent avec des CMS, il s’agit de programmes qui permettent depuis une administration d’interagir avec la base de données.

En ce qui concerne le décor technique, il s’agit pour le back-end de Wordpress (PHP). Pour le front-end j’ai fait le site en HTML5 avec SASS et JavaScript. Concernant le CSS, je me suis d’abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan. Le concept de OOCSS est de repérer des « objets CSS », c’est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. La méthode consiste à prendre le design comme point de départ : on repère des répétitions visuelles puis on les nomme. La sémantique du document n’est donc plus une base de travail, et des classes CSS nommées selon l’apparence sont autorisées à partir du moment où elles sont génériques. En cela, OOCSS est en décalage avec les bonnes pratiques des années 2000. L’ancien nommage par la sémantique préconisait des classes comme. last-articles-box ou. comment-title, alors qu’en OOCSS des classes. links-box ou. tiny-title seront préférées. Cela implique que le pilotage de l’apparence se fait depuis le code HTML. Ainsi, lorsqu’une feuille de styles écrite à la manière OOCSS est bien faite, il devient possible d’ajouter des morceaux entiers dans le design sans toucher à la feuille CSS, juste en réutilisant des objets CSS déjà existants. Mais j’ai encore été plus loin en respectant l’arborescence INUIT que propose Harry Roberts. Il s’agit là de ne pas simplement écrire les règles CSS, mais d’organiser celles-ci dans des fichiers de sorte, qu’à partir de quelques variables de configuration on puisse facilement changer l’apparence du site. Et surtout afin d’avoir des composants hautement modulables de sorte à pouvoir les utiliser à d'autres endroits.

Afin de pouvoir emballer tout ceci et de mimifier, concaténer mes scripts, optimiser mes images, etc., je travaille avec Grunt.