Qu’est-ce qu’un intégrateur web ?

Vous vous demandez ce que peut bien être un intégrateur web ? C’est un intitulé qui se présente rarement, et pourtant l’intégrateur a un rôle extrêmement important dans le monde du web.

Ce métier a maintenant plusieurs années mais il continue à évoluer au même rythme que les standards et technologies du web. L’intégrateur web, parfois appelé (à tort ?) développeur front-end (de l’anglais front-end web developer) joue un rôle clé dans la chaîne de production d’un site internet.

Pour bien situer les rôles de chacun dans le processus de création d’un site internet, voyons comment la chaîne de production au sein d’une agence web fonctionne.
NB : Une agence web est une entreprise dédiée à la production de sites internet.

Chaîne de production

Les étapes

1. « Structure » avec le designer UX

Le designer UX est la personne qui va construire une arborescence et concevoir l’organisation des informations de façon cohérente et adaptée à la cible utilisateurs.
Il produit donc un document de référence, pouvant comporter des wireframes simples, pouvant être conçu avec Adobe XD, et des recommandations générales en termes d’expérience utilisateur.

2. « Visuel » avec le designer UI ou web designer

Le designer UI va produire une maquette graphique à l’aide d’un logiciel comme Sketch ou Photoshop par exemple. Le designer UI se base sur le wireframe et les recommandations UX du designer UX. Certaines contraintes graphiques peuvent l’amener à apporter quelques modifications. La maquette graphique devra reproduire les principaux modèles de page nécessaire pour tout le projet. Il y a autant de modèles de page que nécessaire.

3. « Fonctionnel » avec l’intégrateur web

L’intégrateur web dispose de deux outils complémentaires pour produire la maquette fonctionnelle du site : le wireframe (et recommandations UX) et les maquettes graphiques. Il va créer les pages en HTML et utiliser les feuilles de style au format CSS et en complétant certaines actions ou effets visuels avec du Javascript. Pour des effets visuels simples, la librairie JS de référence est jQuery, mais le Vanilla Javascript est aussi une solution de plus en plus souvent choisie.
La maquette fonctionnelle produite est lisible dans un navigateur web (comme Firefox, Internet Explorer ou Chrome). Mais cette maquette ne contient que des données factices (appelées «lorem»). La maquette fonctionnelle produite doit respecter les standards W3C de structuration des données, utiliser le HTML sémantique autant que possible et respecter les recommandations WCAG d’accessibilité web.
Le code produit par l’intégrateur web est l’équivalent d’un squelette visuel, fonctionnel et accessible.

Le cas du développeur front-end

Le développeur front-end est développeur qui a de solides connaissances en Javascript et sait faire dialoguer une API avec une interface graphique. Il doit par ailleurs être un excellent intégrateur car il peut aussi concevoir la maquette graphique. Dans la plupart des entreprises et agences web, c’est le développeur front-end qui prend le rôle d’intégrateur web.

4. « Opérationnel » avec le développeur back-end

Le développeur back-end va utiliser la maquette fonctionnelle comme squelette visuel et va « injecter » les contenus réels et les fonctionnalités du site. La plupart du temps en reliant ces éléments à une base de données. La base de données permet de manipuler de façon sécuritaire et indépendante les contenus du site sans modifier directement le code du site. Pour manipuler ces contenus, le développeur va installer un CMS (Content Manager System), comme Drupal ou WordPress. Ces « plateformes » intermédiaires permettent d’éditer, ajouter, supprimer du contenu de façon standardisée sur tout le site selon les contraintes qu’aura choisi le développeur. Parfois (même souvent), l’intégrateur web s’assure lui-même de relier un CMS à la maquette fonctionnelle. Le travail d’intégrateur s’étend donc parfois au-delà de son rôle initial, et il revêt le costume de développeur web !

Les grandes missions de l’intégrateur web

Un intégrateur web a plusieurs missions.

Produire un code organisé et réutilisable

L’intégrateur web devra créer un code propre, organisé et réutilisable. Ceci afin de pouvoir le modifier facilement par un autre intervenant. Car il est rare qu’un site internet ne subisse pas d’évolution au cours de son existence. L’intégrateur pourra décider de démarrer un projet avec un framework front-end comme Bootstrap ou Foundation.

Penser multi-plateforme, multi-navigateur

La contrainte multi-navigateur

L’une des missions importantes (et dont le grand public n’a pas conscience) est de produire un site qui soit identique visuellement et qui propose une expérience utilisateur égale que l’on navigue avec Internet Explorer ou Firefox ou encore Chrome. Ces navigateurs interprètent de façon irrégulière le code rédigé en HTML5. Il faut donc tester et créer des correctifs. Ce travail peut être parfois très long à accomplir même si les différences entre les navigateurs tendent à se réduire avec le temps. Sachez que les navigateurs trop vieux ne sont plus pris en compte lors des tests.

La contrainte multi-plateforme

On entend par multi-plateforme une multitude de terminaux pour consulter le site. Aujourd’hui, il en existe trois principaux :

• L’ordinateur de bureau classique
• La tablette mobile, dont l‘iPad évidemment
• Le mobile ou smartphone, dont l’iPhone, le Galaxy ou le Nexus pour ne citer qu’eux.

L’intégrateur web devra, selon les spécificités du site à produire, créer un code et une structure de site qui puissent s’adapter au terminal du client. Pour cela, on peut choisir de créer une version unique de site ayant la faculté de s’adapter à la taille de l’écran du terminal. On appelle cela du «responsive design».
Ou alors, une version complémentaire dédiée au mobile ou tablette sera déclinée. Dans ce dernier cas, le site aura un modèle standard (pour grand écran) et un modèle alternatif pour tablette et/ou mobile.

Produire un site accessible : c’est l’accessibilité Web

Le code produit par l’intégrateur web devra être lisible et accessible par les personnes utilisant des dispositifs spécifiques pour consulter le site, notamment pour les non voyants. Il existe des normes à respecter, mais d’une façon générale, l’intégrateur devra séparer techniquement l’aspect visuel et le contenu l’un de l’autre. Pour ce faire, l’aspect visuel devra entièrement être pris en charge par les feuilles de styles au format CSS et le contenu devra être « balisé » par du code HTML. Les sites et applications web se doivent de respecter des standards d’accessibilité minimum. Selon les régions et les pays, ces minima, s’ils ne sont pas respectés, peuvent conduire à des amendes ! La meilleure source concernant les problématiques d’accessibilité est la liste de recommandations WCAG produite par la W3C.

Être trouvé facilement : le référencement ou être « SEO friendly »

L’intégrateur web devra également produire un code qui puisse être parcouru par les moteurs de recherche de façon optimale. Pour cela, il devra respecter un certain nombre de protocoles permettant de décrire au mieux le contenu et de le parcourir dans son intégralité avec facilité. On appelle cela de l’optimisation SEO (Search Engine Optimization). Ce travail spécifique est parfois réalisé par une personne spécialisée en SEO.

En général, un code accessible qui suit les recommandations WCAG a toutes les chances d’être grandement optimisée pour le référencement. Il restera à la charge de l’intégrateur de s’assurer que les balises meta sont bien présentes sur toutes les pages et qu’un sitemap a été créé.

Le profil de l’intégrateur web

Il doit avoir de solides connaissances en programmation Web. Le HTML et le CSS n’ont (presque) pas de secret pour lui. Il maîtrise également le javascript (et jQuery) permettant de produire des animations et fonctionnalités complémentaires au site. Enfin, et c’est peut-être l’une de ses plus grosses plus-values, l’intégrateur web sait produire un code accessible et devient force de proposition pour rendre le contenu du site accessible à tous les utilisateurs.

Il suit activement les dernières évolutions et tendances en matière de programmation et design web. Il est curieux, autonome et il est capable de définir les contraintes techniques liées à un projet qu’on lui soumet. La plupart du temps, il sait manipuler au moins un CMS comme WordPress et sait aussi découper des maquettes graphiques via Photoshop.