Recherche

Intégrateur Web

Intégrateur HTML, Développeur front office, Développeur front-end



L’intégrateur Web est chargé de traduire et de transposer les maquettes fournies par l’équipe graphique dans un langage informatique : le HTML. Il compose la mise en page du site Web en y intégrant les éléments des maquettes graphiques : textes, sons, images. Il participe à la qualité du site, dans le respect des normes d’accessibilité, de référencement et d’ergonomie. L'intégrateur Web peut exercer dans une agence Web, en tant que travailleur indépendant ou directement chez le client.

Familles de métiers : Programmation et développement

Présentation

L’intégrateur web est chargé de produire, traduire puis transposer les maquettes fournies par l’équipe graphique en langage informatique. Son rôle consiste à composer la mise en page d’un site web en y assemblant tous les éléments des maquettes graphiques (textes, images, sons) dans le respect d'un cahier des charges et en s'efforçant de suivre les normes et les standards. Pour mettre en page le site web, l’intégrateur web s’appuie sur le langage informatique HTML (Hyper Text Mark up Language).
A ce titre, l’intégrateur web est en charge de :

  • La découpe, le montage et l’intégration des pages en HTML/CSS, XHTML
  • La cohérence entre les pages codées en HTML et les maquettes graphiques
  • Le respect des standards web (Norme W3C, normes d’accessibilité)
  • La compatibilité entre les navigateurs (Firefox, Internet Explorer, Safari…)
  • L’intégration des contenus
  • L'intégration des effets graphiques

De façon complémentaire, il participe à :

  • L’architecture de l’information au sein du site
  • La conception des éléments graphiques du site
  • L’optimisation de l’accessibilité du site
  • La mise en place des optimisations techniques propres au référencement

Missions

Pièce maitresse de la réalisation de tout site web, l’intégrateur web collabore au quotidien avec l’équipe créative, les développeurs et les chefs de projet. Il est le garant du respect des spécifications techniques et du design.

L’intégrateur web est souvent amené à travailler sur plusieurs projets en même temps. A ce compte, il doit faire preuve d'adaptabilité, de rigueur et d’organisation.

Il participe, par son expertise, à la qualité globale du site, dans le respect des normes d’accessibilité, de référencement et d’ergonomie. Outre une bonne maitrise du langage HTML, sa mission requiert donc une bonne connaissance des problématiques de graphisme, d’ergonomie et de référencement d’un site web.

Domaine et périmètre d'intervention

L’intégrateur web travaille principalement dans deux types d’environnements : les agences Web et les ESN (Entreprises de Services du Numérique). Il est directement rattaché au chef de projet (qui dépend lui-même du directeur de l’agence web ou de l'ESN).

Le plus souvent, il est associé à la phase de réflexion technique qui précède le début du développement. En fonction de son expérience et de ses compétences, mais aussi de la taille des sites à créer, l'intégrateur aura des attributions plus ou moins larges : de la simple exécution jusqu'à des interventions sur l'ergonomie ou le design du site. Il peut aussi être amené à assister les développeurs et les infographistes au cours du développement en les conseillant en matière de format, de taille des fichiers ou encore de compression.

Activités & tâches

Activité 1
Découpage, montage et intégration des pages

Tâches

Découper chaque zone partir des maquettes réalisées par les graphistes :

  • Découpage de textes
  • Découpage d’images
  • Découpage de sons
  • Découpage de vidéos

Assembler / Structurer les différentes zones :

  • Assemblage de textes
  • Assemblage d’images
  • Assemblage de sons
  • Assemblage de vidéos 

Traduire les différentes zones en langage web :

  • XHTML / HTML
  • CSS
Activité 2
Veiller au respect des normes

Tâches

Respect des normes d’accessibilité :

  • W3C

Respect des normes de référencement :

  • Balises METAS
  • Renseigner la balise ALT des images
  • Renseigner les TITLE des liens

Respect des principes d’ergonomie :

  • Chemins de navigation
  • Affordance
  • Règles d’utilisabilité
Activité 3
Compatibilité entre les différents navigateurs

Tâches

Vérifier l’affichage du site sur les navigateurs les plus utilisés :

  • Firefox
  • Internet Explorer
  • Chrome
  • Safari
  • Opéra

Vérifier la cohérence avec les maquettes graphiques fournies :

  • Place exacte des éléments
Activité 4
Intégration des contenus

Tâches

Intégrer les différents contenus :

  • Via un CMS (Content Management System)

ou

  • Directement dans le code HTML

 

Intégrer tous les éléments de contenu :

  • Textes
  • Images
  • Vidéos
  • Sons
Activité 5
Intégration des effets graphiques

Tâches

Transcrire les effets graphiques en langage web :

  • JavaScript
  • AJAX
Activité 6
Intégration des contenus pour le référencement

Tâches

Intégrer les balises METAS pour chaque page :

  • TITLE
  • Description
  • Keyword

Mettre une balise ALT sur chaque image du site

Intégrer les titres des liens

Compétences

Savoirs

Compréhension des contraintes du projet :

  • Délais
  • Budget
  • Spécificités propres au client et/ou au projet

Connaissance des règles et normes applicables sur le web :

  • Accessibilité
  • Ergonomie
  • Référencement

Connaissances informatiques : 

  • Méthodes, normes, langages et outils de développement 
  • Langages de programmation web
  • Environnement de développement
  • Culture générale informatique
  • Environnement web et XML

Savoir-faire

Maîtrise des langages et des technologies de publication du web :

  • XHTML / HTML
  • JavaScript
  • AJAX
  • XML
  • SQL

Maîtrise opérationnelle des outils suivants :

  • CMS (Content Management System)
  • Editeurs de code

Utilisation de logiciels spécifiques :

  • Traitement d’images
  • Flash

Savoir-être

Rigueur :

  • Sens du détail
  • Respect des normes

Autonomie :

  • Respect des délais
  • Rapidité d’éxécution

Capacités d’adaptation :

  • Polyvalence
  • Force de proposition
  • Compréhension des métiers des autres membres de l’équipe

Capacités à travailler en équipe :

  • Écoute
  • Ouverture aux autres
  • Goût pour l’échange

Veille technologique :

  • Langages
  • Méthodes d’intégration
  • Nouveaux navigateurs et pourcentage d’utilisateurs
 

 


 

Licence Creative Commons
Cette fiche métier est mise à disposition selon les termes de la Licence Creative Commons Attribution 2.0 France.

 

Dernière mise à jour : 24 septembre 2012.
Retour au sommaire

Formation de niveau bac +2 à bac +5 en développement web qui peut être éventuellement complétée par une formation en webdesign.

Formations diplômantes/certifiantes

Contributeurs

Laisser un commentaire
42.
05/10/2014 à 17h31
Par coralie

Quelle différence entre intégrateur et développeur ?

41.
29/05/2014 à 12h52
Par Thomas Zilliox

L'émergence du web mobile et les techniques associées au responsive web design (RWD) ont contribué à une mutation de notre métier d'intégrateur HTML/CSS. De plus en plus, nous constatons une spécialisation et nous ne pouvons plus nous contenter d'être simplement intégrateur. Thomas

40.
30/04/2014 à 10h20
Par Michael

Je suis ravi de voir qu'il existe une fiche pour le métier d'intégrateur Web sur ce site portail ! Métier peu (re)connu il y a encore quelques années, l'intégrateur est aujourd'hui au centre du projet de conception d'un site Web. Il doit être capable de guider le webdesigner dans ses choix graphiques, d'anticiper et de prévoir les contraintes liées au Web mobile, de prendre en compte les contraintes SEO, d'intégrer des frameworks comme Jquery UI, de connaître quelques CMS... en bref, il ne s'ennuie pas ! Michael, intégrateur

39.
22/02/2014 à 16h44
Par Cédric

Si il y a quelques années de cela, un intégrateur n'avait besoin que d'un savoir en HTML et CSS. Or, aujourd'hui un intégrateur n'est rien sans au minimum quelques notions de PHP et Javascript, notamment pour créer un site e-commerce ou vitrine en Responsive Design (site qui s'adapte au différents formats d'écran: ordinateurs, tablettesn smartphones). Cédric

38.
20/12/2013 à 12h07
Par Edouard

L'intégrateur web est encore plus vrai aujourd'hui avec les multiplications des CMS il faut absolument savoir intégrer toutes les options voulu par le client une agence web peux le faire par exemple ou alors des freelance intégrateur web

37.
29/01/2013 à 10h37
Par Marjorie Soutric - Portail des Métiers de l'Internet

@Sebastien SCARPELLI Un petit sondage a été ouvert sur nos réseaux sociaux pour savoir si la connaissance du langage PHP doit faire partie des compétences d'un intégrateur web.

36.
19/01/2013 à 11h23
Par Sebastien SCARPELLI

@ Marjorie : D'après wikipedia, l'intégration est "le fait de rassembler, dans un même composant, plusieurs composants de base". Cette définition correspond bien à celle que j'en ai, de plus elle est générique (adaptée à plusieurs domaines). En reformulant (pour internet), l'intégrateur assemble donc des briques pour faire un grand tout, le produit final i.e le site internet. C'est une construction. C'est un peu le maitre d'oeuvre. Il est plutot généraliste, pas nécessairement spécialisé dans un métier (même si souvent ces débuts et formation ont bien démarré par un métier / spécialité). nota : c'est un peu faux aujourd'hui car il existe des formations d'intégrateur donc sans spécialité à l'origine). Mais pour moi, on ne nait pas intégrateur, on le devient (comme le référencement) ! Je continue … Bien évidemment, on part rarement de zéro, on utilise un réceptacle (une structure ex. CMS maison ou payant ou libre) que l'on habille de peau (graphisme), équipe d'outil (fonctions), sculpte (ergonomie) en fonction de la quantité d'information, on peut même lui donner plus de vie (animation) tout cela selon le cahier des charges (CdC). Deux exemples d'intégration simple, en partant d'un outil (re)connu (le CMS wordpress + thème striking) : "http://kaptinlin.com/themes/striking/" Avec ce même "environnement" donc, on change texte, design, un peu de code, et on arrive à ca : "http://www.maccagno.fr/" ou ca : "http://www.tpbat.eu" Un site internet fait appel à de nombrables compétences / métiers comme vous le savez … code (php, js, html, css …), graphisme, marketing, ergonomie, animation, rédactionnel, référencement, admin système et réseaux etc … Un intégrateur est en bout de chaine et est censé suivre une série d'instructions consignées dans le cahier des charges (oral ou écrit), à l'aide d'outils et de compétences. Et comme il ne peut pas tout savoir, il doit être guidé par tous les acteurs (client, chef projet, métier), tt en respectant la trame du CdC. D'ailleurs, les sites étant de plus en plus complexes, les intégrateurs commencent à se spécialiser … intégrateur de graphisme, intégrateur de code etc … voire intégrateur selon la plateforme (intégrateur wordpress, joomla …) On peut même voir les "fabricants" de module de base (graphisme, code, seo,) réaliser l'intégration par eux même, ou bien assister l'intégrateur pour atteindre l'objectif. nota : PHP est un langage de script qui sert à produire des pages dynamiques. La majorité des CMS utilise PHP, Apache (serveur http), Mysql (base de données). L'intégrateur doit savoir à minima le modifier, si ce n'est créer quelques script voire le maitriser (c'est un gros plus). Sebastien SCARPELLI

35.
21/11/2012 à 16h04
Par Marc

L'intégration web est un domaine important. Mais il est également vital de penser à vérifier la parfait configuration de son nom de domaine. Je vous recommande pour cela d'effectuer une analyse. Marc

34.
24/09/2012 à 17h17
Par Marjorie Soutric - Portail des Métiers de l'Internet

@Sebastien SCARPELLI Merci pour vos remarques pertinentes. Nous avons mis la fiche métier à jour. Je ne suis toutefois pas sûre de saisir le point 4 de votre commentaire. Qu'entendez-vous par "intégration" de code PHP ? Nous mentionnons déjà le langage JavaScript dans la fiche.

33.
22/09/2012 à 13h07
Par Sebastien SCARPELLI

remarque :
"Son rôle consiste à composer la mise en page statique d’un site web en y assemblant […] dans le respect des normes et des standards."

1 - Pourquoi statique ? ce mot est en trop et n'apporte rien à la définition, voire supprime son aspect générique.

2 - Au sujet de "dans le respect des normes et des standards" …

rectification :
"dans le respect du cahier des charges (dont peut faire partie le respect des normes web)".

Le respect des normes est un idéal, non respecté (c'est ce que je constate) … il y a des enjeux économiques derrière et tout le monde veut sa part du gateau !

Un exemple concret : l'utilisation de flash ou silverlight, solution propriétaire pour la videos qui rend incompatible / difficile la lecture des vidéos sur certaines plateformes. Ce choix est imposé pour diverses raisons (copyright ou autre) et va à l'encontre de la compatibilité.

3 - Une coquille …
pourquoi Internet Explorer 7 et 8 ? Internet Explorer suffit ;)

4 - Au sujet de l'intégration, on peut aussi ajouter l'intégration de code … javascript, php par exemple (j'ai pas dit codage).

En résumé, c'est un peu le prométhée numérique (par analogie à Frankenstein ou Le Prométhée moderne). Il assemble des éléments selon un schéma donné, dans l'objectif de lui donner vie (ensuite).

Sebastien

Poster un nouveau commentaire

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Plus d'informations sur les options de formatage

By submitting this form, you accept the Mollom privacy policy.