Intégrateur web : passé, présent, futur.

Un peu d’histoire

La préhistoire

La naissance

Cher intégrateur, qui es-tu réellement ?

Que fais-tu ?

  • son profil
  • son expérience
  • ses envies ou affinités personnelles avec des langages, outils ou technos spécifiques,
  • l’entité dans laquelle il travaille, ainsi que la taille et surtout de l’organisation de celle-ci.
  • Découpage des maquettes sous Photoshop / Sketch / Adobe XD : échanges préalables avec le webdesigner, création de font icons ou symbols svg, création des images utilisée dans la charte, récupération des fonts texte et couleurs projet
  • Construction du HTML : respect de la sémantique, hiérarchisation cohérente du document, préparation logique du HTML en vue des styles et de l’animation
  • Styles CSS : utilisation du préprocesseur (ou pas, ça dépend), nomenclature (OOCSS, ITCSS ou encore BEM)
  • Responsive / Fluid design : prise en compte de tous les devices, media queries, mobile first
  • Animation web : keyframes CSS, JavaScript, librairies JS dédiées, WebGL
  • Compatibilité navigateurs : autoprefix selon les règles en vigueur, tests visuels ou automatisés
  • Création de thèmes complets pour CMS Wordpress
  • Automatisation de tâches de build et d’optimisation via Grunt, Gulp ou Webpack
  • Création de templates d’email : intégration, tests de compatibilité, tests de délivrabilité
  • Création et évolution de kits et starters avec nos bonnes pratiques pour démarrer rapidement un projet : kit css, kit javascript, kit config (linter, packages, gulpfile…), starter WordPress.

Des compétences techniques, mais pas seulement…

Des tâches transverses

  • L’accessibilité : organisation et hiérarchie des contenus, sémantique des balises HTML, navigation au clavier, prise en compte de la synthèse vocale (standard ARIA)
  • La performance : production de code organisé, découpé, propre, logique et léger
  • Le SEO : respect des bonnes pratiques pour favoriser un bon référencement naturel
  • La modularité et la maintenabilité de son code : organisation du code en composants, code tourné réutilisabilité

En bonus

  • La rigueur : pour soi-même (si on travaille seul.e) ou pour l’ensemble des membres de l’équipe dans laquelle on travaille, l’intégrateur se doit d’avoir et de suivre des règles, des conventions, des bonnes pratiques, qui facilitent la pérennité, la maintenabilité et éventuellement une passation facilitée et sereine de son code à un autre intégrateur
  • L’adaptabilité / La flexibilité : Quel que soit le type de projet, le travail de l’intégrateur doit prendre en compte et souvent anticiper à la fois les besoins et contraintes du client et ceux de l’utilisateur final du produit. Dans un environnement technique qui en découle et très souvent différent (Symfony, Angular et WordPress chez Biig), l’intégrateur doit avoir une bonne compréhension des langages utilisés par ces outils (PHP, Twig, JavaScript, Typescript pour les outils cités plus haut). Le contexte d’intégration change ainsi régulièrement, les contraintes qui lui sont liées également, obligeant l’intégrateur à s’adapter sans cesse.
  • La créativité / “L’oeil graphique” : L’intégrateur a pour mission de construire et mettre à disposition du navigateur ce qu’a conçu et imaginé le webdesigner. Expliquée et décortiquée sous toutes les coutures par le webdesigner, la maquette laisse toutefois systématiquement une part d’interprétation au moment de la coder, notamment au niveau des effets liés à l’interaction utilisateur (hover, focus, click, drag & drop, scroll… et autres interactions ‘tap’ sur appareils mobiles). C’est ce que l’on va appeler l’animation d’interface. L’animation n’est pas (et ne doit pas être) une surcouche optionnelle de l’intégration. L’animation fait partie du design, c’est un outil du design. C’est d’ailleurs le langage commun du binôme intégrateur/webdesigner, ce qui lie leur travail respectif.

Pour résumer

Dans ma boule de cristal, je vois…

Le CSS, du bourgeon à la fleur

Des sous-branches qui poussent

  1. L’accessibilité : S’il est bien de créer des sites/apps et ses contenus, il est encore mieux, voire indispensable, de le rendre accessible à tous, c’est-à-dire de prendre en compte les facultés et difficultés éventuelles des internautes (situation de handicap, daltonisme par exemple…), ou encore leur mode de consultation (navigation au clavier, lecteur d’écran pour ne citer qu’eux). On est d’accord, l’accessibilité n’est pas censée être une spécialisation mais bien au coeur de tous les métiers de la production web. Pourtant, ça n’est pas encore toujours le cas. A ce jour, seuls quelques irréductibles (de plus en plus toutefois) en font leur cheval de bataille (et ils ont raison), en attendant que tous soient convertis, de gré ou de force.
  2. La qualité : Après l’éclosion d’Internet où les sites ont poussé comme des champignons, il est l’heure pour ce média de se structurer et se rationaliser un peu. La qualité web est une notion un peu plus large et transverse que l’accessibilité. Elle regroupe non seulement les principales règles d’accessibilité, mais aussi des bonnes pratiques d’ergonomie, de navigation, d’utilisation, de qualité des contenus, de performance… En France, la problématique de qualité web est mise en avant et portée depuis déjà une dizaine d’années par l’organisme Opquast et la certification “Maîtrise de la qualité web en projet web” qu’il propose. Une certification “must-have” pour un intégrateur.
  3. L’animation 2D / 3D : Avec un retour en grâce du JavaScript, l’utilisation croissante du format d’image SVG, et la solidification du standard WebGL, le CSS est en train de devenir un outil puissant du design et de l’interaction utilisateur. La combinaison de tous ces langages/formats tente de répondre à une problématique à laquelle a répondu Flash pendant plusieurs années : l’animation et la fluidification de la lecture des contenus. Après un trou de 10 années sur le sujet (oui la mort de flash c’était il y a déjà longtemps), ça y est ! Tout est enfin mûr pour s’y remettre. Animons le web !

Conclusion

  • Frontend Designer
    Appellation la plus logique.
    Ce terme permet d’illustrer au plus juste la position de l’intégrateur. On en revient au concept de “mi-chemin entre design et développement”.
  • Frontend” rappelle sur quel aspect du projet web l’intégrateur web travaille : le front, la partie visible par l’utilisateur.
  • “Designer” rappelle sa proximité avec le webdesigner et l’intérêt pour les 2 métiers de travailler et échanger régulièrement.
  • UI Developer
    Appellation la + technique.
  • UI” rappelle l’interface utilisateur et directement ce sur quoi porte le travail de l’intégrateur. Par association, rappel également de son binôme UX (expérience utilisateur), ce qui crée un lien direct avec le webdesigner.
  • Developer” : parce que l’intégrateur est un technicien qui code toute la journée, dans des langages qui évoluent et se rapprochent de plus en plus de la logique de développement pur.

Lectures complémentaires 🧐

UI & WordPress theme developer @be_api, Paris, France. https://francoisthibaud.me

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
François Thibaud

François Thibaud

UI & WordPress theme developer @be_api, Paris, France. https://francoisthibaud.me

More from Medium

Chrome extension-UI: icons — part III

ACA Class 16 Blog JS211

Shoppers Stop E-Commerce Website Clone, Using HTML, CSS & JavaScript

Building a Nuxt.js static website with SEO meta tags