Intégration (HTML, CSS, JS)

L'intégration est la transposition du web design en code informatique. Concrètement, le développeur front-end reprend la maquette validée du site et la transforme en langage HTML, CSS et JavaScript via un éditeur de texte. Chaque choix graphique du designer sera transformé en ligne de code. On pourrait utiliser la métaphore suivante : le designer parle en français à un ordinateur, or cet ordinateur ne comprend que l'anglais, le développeur sera donc en change de traduire le message du designer en anglais pour que l'ordinateur puisse le comprendre. On parle donc bien de langage !

Pour que l'intégration soit réussie, il faut qu'il y ait une étroite collaboration entre le designer et le développeur. Le designer doit comprendre l'intégration et ses contraintes et le développeur doit comprendre le design. 

Techniquement, comment ça se passe ?

Chez VingtCinq, on a notre rituel avant l'intégration : la revue du design. Le designer, le développeur en charge du projet, le lead développeur et le chef de projet se mettent autour d'une table et discute de la faisabilité technique du design et de la démarche à suivre pour optimiser l'intégration. Ensuite le développeur commence le travail sur son ordinateur. Dans un premier temps, il organise ses fichiers dans des dossiers (images, vidéos, html, styles...). Il ouvre son éditeur de texte (Sublime Text ou Atom) et commence à créer des variables correspondant aux couleurs, niveaux de titres, boutons, polices etc. Ensuite, il reprend chaque page du design et l'intègre du haut vers le bas. Si vous avez vu le film Matrix, c'est un peu comme ça, des lignes de code par milliers sur fond noir. Difficile pour un néophyte de comprendre ce qui se trame. Une fois les pages intégrées, le développeur va faire en sorte que les pages s'adaptent aux différentes tailles d'écrans (grand écrans, tablettes, smartphone), c'est ce qu'on appelle le responsivedesign. Ensuite, le développeur se charge de la cross-comptabilité du site avec les différents navigateurs : Chrome, Firefox, Safari, Internet Explorer,... Ces navigateurs ont tous des spécificités et des contraintes différentes qu'il faut prendre en compte dans l'intégration. Une fois le site terminé, le développeur enregistre son travail sur Gitlab (plateforme de stockage cloud pour les développeurs).