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

par Alexis Blondin, le 20 février 2013. 16 commentaires

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

Chaine de production d'un site internet

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.

article rédigé par Alexis Blondin
Je suis développeur Front-End freelance.
Mes spécialités sont le HTML, le CSS et le jQuery/JS. Je travaille régulièrement pour des agences web et en collaboartion avec d'autres freelances.
Si vous souhaitez me confier votre projet, n'hésitez pas à me contacter.
Vous voulez être informé des dernières nouveautés du développement web ?
Rejoignez la newsletter
Pas plus d'un mail par mois, c'est promis.

commentaires (16)

  1. Pagchen
    2016-06-07 16:35:00
    Je vois que les commentaires datent un peu, mais comme je suis tombé sur cette page... Voici un offre d'emploi pour intégrateur web chez MediaWeb http://www.espresso-jobs.com/emplois/mediaweb-integrateur-web-phpcssresponsive/ Avis aux intéressés !
  2. Caroline
    2016-02-09 22:56:00
    Excellent article !!! Clair, précis & intuitif !!!
  3. مدريدي أصيل
    2015-12-21 15:29:00
    Magnifique .. Merci bcp :-)
  4. Wi
    2015-03-03 02:39:00
    Très bonnne description, ca m'a été très utile
  5. Leslie
    2014-12-26 20:35:00
    Merci Alexis pour toutes ses explications. Je suis actuellement une information en infographie et j'aurais besoin d'un éclaircissement... J'ai appris à créer un site en HTML, CSS, JS.... y intégrer du php.... Je viens de voir rapidement comment créer un site par Wordpress et Joomla.... Et là vous parlez "«injecter» les contenus réels et les fonctionnalités dans un CMS" et ça j'ai pas appris... Je comprends pas pour moi c'était 2 choses distinctes, vous faites comment pour basculer un site HTML dans un site CMS ? Bon je retourne fouiller dans votre site. Leslie
  6. Bienbien
    2014-12-14 04:36:00
    Oui bravo au rédacteur, ceci est une très bonne définition de l'intégrateur web et de ses objectifs. J'ai une meilleur compréhension dorénavant.
  7. matthieu
    2014-11-05 17:38:00
    Malheureusement la réalité n'est pas aussi simple. Vous avez oublié le référenceur, par exemple, qui intervient dès le début du projet, voir dès le début avec le prospect. Quand au designer il doit déjà penser aux diverses plates formes avant que l'intégrateur ne prenne en main ce problème et bien souvent il produit à la fois le wireframe et la maquette visuelle, ce qui permet une meilleur maitrise du rendu. Enfin, en général, le développeur est lui-même intégrateur, ce qui permet d'optimiser le workflow au niveau programmation... La chaine de travail apparait bien plus souvent sous forme d'un cercle collaboratif et non d'une chaine d'étapes. Les intégrateurs, designer, programmeurs ou autres doivent savoir travailler avec tous les domaines de leur secteur en partage de taches et non au sein d'une chaine...
  8. Alexis Blondin
    2014-11-05 20:21:00
    Bonjour Matthieu, la chaine de production est volontairement simplifiée. Sinon on pourrait rajouter en plus du referenceur, le gestionnaire de projet, un redacteur, un UX designer, un responsable web marketing, un «community manager», etc. ... La liste serait longue. Je suis d'accord pour la perception du workflow comme un cercle collaboratif. Mais il est aussi possible de le schématiser sous forme d'étapes successives. À chaque étape, il y aura effectivement un échange entre les différents métiers et donc une forme de collaboration. Enfin sur des gros projets, il est peu réaliste de considérer que l'intégrateur fera aussi la programmation (back-end). Merci pour ton commentaire qui apportent de nouveaux éléments. Je t'invite également à consulter l'article http://www.alticreation.com/difference-developpeur-front-end-et-developpeur-back-end/ qui devrait t'intéresser.
  9. blackcode
    2014-10-10 00:55:00
    je fais les 4 métiers à la fois ....
  10. Jean-Yves ;
    2014-07-22 10:20:00
    Bonjour ; merci pour ces informations utiles sur le métier; quelle formation/cycle utile pour l'exercer ?
  11. leimen
    2014-04-19 14:23:00
    Merci aussi alexis de me redonner espoir moi age de 50 ans je me suis lance ca fait trois ans dans tous ce qui concerne le web du css au css3 du html au html5 du php4 au php5 du javascript bientôt jquerry et l oriente objet et aujourd’hui hui je suis capable de construire un site web complet en bouclant avec le framework Symfony2 .La finalement je vais me spécialiser d un l intégration web!Merci encore!
  12. toledano sarah
    2015-07-30 16:35:00
    bonjour, je suis web developer et je cherche à intégrer le travail du web designer dans mon code. que dois je utiliser pour le faire ?
  13. Alexis Blondin
    2015-07-31 20:54:00
    Bonjour Sarah, le web designer devrait etre capable de te fournir une maquette fonctionnelle contenant majoritairement du html / css / js voire php. Selon l'environnement dans lequel tu souhaites intégrer ces éléments (framework php ou autre) libre à toi de choisir la methode qui convient. Par exemple dans laravel (framework php), tu peux intégrer les pages fournies par le designer via le moteur de templating appelé blade. Autre exemple dans WordPress, il faudra découper les fichiers fournis pour créer (idéalement) un header, un footer puis des modèles de pages standards (les pages, les posts de blog, les archives) et des modèles de template indépendants. Si tu as des questions, n'hésites pas.
  14. Alexis Blondin
    2014-04-20 04:25:00
    Merci leimen. Je suis heureux que cet article soit utile. Je t'invite à consulter les autres articles du blog qui devraient également t'apporter quelques informations pertinentes sur notre métier. Bonne lecture !
  15. Samuel Anctil
    2013-11-21 05:25:00
    Excellent travail! Ce site m'a beaucoup aidé dans ma recherche sur le métier d'intégrateur web :) Merci beaucoup!
  16. MichelBeauBarda
    2013-10-18 20:48:00
    Magnifique ergonomie ! Une telle page me donne espoir ... ! Malgré ma réorientation de carrière tardive ... Je persévère; la toile à encore besoin d'intégrateurs qui excellent du bon côté de la « force » ! Cordialement ! Michel !
Générez votre propre montagne