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

Vous vous demandez ce que peut bien être un intégrateur web ?

À vrai dire, vous n'avez pas à en rougir ! Car ce métier est très récent (quelques années), et il est amené à évoluer au même rythme que les standards et technologies du web. L'intégrateur web, parfois appelé développeur front-end (de l'anglais front-end web developer) joue un rôle important 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 peut fonctionner.
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 wireframer ou prototyper

Nous retrouvons le wireframer ou prototyper. C'est la personne qui devra construire une arborescence et concevoir l'organisation des informations de façon cohérente et adaptée à la cible d'utilisateurs visée.
Il produit donc un document de référence, comme un croquis de ce à quoi le site et sa structure devront ressembler.

2. «Visuel» avec designer ou web designer

Il va produire une maquette graphique à l'aide du logiciel Photoshop. Pour produire cet outil, il se basera sur le wireframe. Certaines contraintes graphiques peuvent l'amener à apporter quelques modifications au wireframe. La maquette graphique produite devra reproduire les principaux modèles de page nécessaire pour dans le projet. Par exemple, il y aura une maquette pour la page d'accueil, une autre maquette pour la page contact, ou encore une autre maquette pour une page particulière. Cela dépend des projets.

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

Il dispose de deux outils complémentaires pour produire la maquette fonctionnelle du site : le wireframe et la (ou les) maquettes graphiques. Il va créer les pages au format HTML5 en utilisant les feuilles de style au format CSS3 et en complétant certaines actions ou effets visuels avec du Javascript (ou jQuery).
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»). L'outil produit permet de s'assurer que le gabarit du site fonctionne correctement sur tous les navigateurs et de façon uniforme.
Le code produit par l'intégrateur web est l'équivalent d'un squelette visuel et fonctionnel qui va être utilisé par le développeur web.

4. «Production» avec le développeur web

Il 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.

Rendre le site accessible ou l'accessibilité

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 se faire, l'aspect visuel devra entièrement être pris en charge par les feuilles de styles au format CSS3 et le contenu devra être «balisé» par du code HTML5. Cette simple procédure permet de rendre le site plus facilement accessible.

Être trouver 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.

Le profil de l'intégrateur web

Il doit avoir de solides connaissances en programmation dédié au web. Le HTML5 et le CSS3 n'ont (presque) pas de secret pour lui. Il maîtrise également le javascript (et jQuery) permettant d'amener des animations et fonctionnalités complémentaires au site. 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 technique liés à un projet qu'on lui soumet. La plupart du temps, il sait manipuler au moins un CMS comme WordPress et sait aussi parfaitement découper des maquettes graphiques via Photoshop.

Si vous voulez consulter le profil d'un intégrateur web, je vous invite à consulter ma page profil, cela pourra vous en donner une idée concrète !

- Cette page sera actualisée régulièrement pour décrire au mieux le rôle et les missions (en constante évolution) de l'intégrateur web.