L’intégration web dans la chaine de production d’un site Internet

Parler de mon métier d’intégrateur web peut s’avérer compliqué et ennuyeux, surtout lorsqu’il s’agit de l’expliquer à une personne externe au milieu du web.

J’ai donc fait un choix. Celui de répondre à une question sur mon job par un simple mais efficace : « Je crée des sites Internet ». Je manque de respect à ma passion, mais au moins les gens comprennent.

L’intégration web dans le monde réel, c’est plus compliqué que ça. Lançons-nous dans quelques explications sur le métier : origine, rôle, définitions et concepts.

1. Les origines du métier d’intégrateur, ou l’évolution de l’espèce humaine au format web [#]
2. Quel est le rôle de l’intégrateur ? [#]
3. Un métier qui manque de reconnaissance [#]
   • Les standards du web [#]
   • Le balisage sémantique [#]
   • Accessibilité & ergonomie [#]
4. Comment savoir si mon intégrateur a fait du bon boulot ? [#]
5. Conclusion [#]

Les origines du métier d’intégrateur, ou l’évolution de l’espèce humaine au format web

A la naissance du « web » au début des années 90 (Internet tel que nous le connaissons aujourd’hui), il n’y avait qu’une seule personne en charge de la création d’un site : le « webmaster » (« webmestre » en français).

Celui-ci avait la lourde tâche de créer le site de toute pièce, du maquettage graphique à la maintenance des contenus, en passant par le développement et le référencement.

Mais en même temps que le web, le métier de webmaster a évolué. Pour répondre à des besoins toujours plus nombreux, il s’est diversifié et a donné naissance à plusieurs spécialités : graphisme, intégration, développement, référencement, rédaction et maintenance des contenus, etc.

Comme l’évolution des technologies et des mœurs n’est pas contrôlable, nous autres, acteurs du web, serons sans cesse obligés de nous adapter.

Le processus de division qu’a subi le métier de webmaster est voué à se répéter encore et encore, pour à chaque fois créer de nouveaux métiers d’avantages spécialisés que leurs prédécesseurs.

Quel est le rôle de l’intégrateur ?

En une définition, sans être technique :

L’intégrateur est celui qui récupère les maquettes du graphiste pour les « transformer » en pages web. Les modèles de page (aussi appelés « gabarits ») obtenus sont ensuite transmis à la personne suivante dans la chaine de production : le développeur.

En une métaphore, si le site web était une marionnette en bois (inspiré librement de la métaphore de Gepetto, ou le métier d’intégrateur expliqué aux mamans) :

• Le graphiste dessinerait les plans,
• L’intégrateur sculpterait et peindrait le pantin,
• Le développeur automatiserait la marionnette en y ajoutant ficelles et mécanismes.

L’intégrateur utilise essentiellement 3 langages pour « monter » une page web :

• L’(X)HTML : Qui permet de créer le squelette du site, à l’aide de « balises ». Celles-ci permettent de structurer sémantiquement le contenu des pages (texte, images, formulaires, etc.).
• Le CSS : Pour réaliser la mise en forme / mise en page des contenus définis dans le document (X)HTML, au moyen de « styles ».
• Le JavaScript : Est utilisé pour ajouter de l’interactivité et modifier le comportement des éléments présentés sur la page.

En plus de monter les pages à l’aide de ces langages, l’intégrateur doit s’assurer que le site s’affiche correctement sur les navigateurs et les résolutions courantes. Pour cela, il doit régulièrement consulter des sites qui proposent des statistiques sur le sujet (comme W3Counter, W3Schools ou encore Statcounter).

Un bon intégrateur est également un technicien polyvalent, doué de connaissances dans plusieurs domaines (et plus particulièrement en développement, graphisme, ergonomie et référencement). Ce savoir-faire, s’il est reconnu à sa juste valeur, pourra lui permettre d’intervenir en tant que consultant dans de nombreuses phases de la chaine de production.

Un métier qui manque de reconnaissance

L’intégrateur est un homme de l’ombre. Dans le sens où le travail qu’il fournit n’est pas directement visible par celui qui n’est pas du milieu.

La seule chose « palpable » par un utilisateur lambda, c’est le rendu final du site, tel que celui-ci est présenté sur son navigateur.

Mais le fait qu’une page web corresponde visuellement à la maquette du graphiste ne fait pas tout. Il faut surtout que le code (X)HTML / CSS / JavaScript mis en place pour arriver au résultat soit cohérent et performant.

Une intégration, pour être de qualité, se doit de respecter un certain nombre de règles, de concepts et de subtilités :

Les Standards du web

Les langages du web reposent sur des normes fixées par le W3C (groupe de travail chargé d’établir des recommandations garantissant un web de qualité : compatible, accessible et durable).

Pourquoi faut-il respecter les standards du W3C ?

• Ils garantissent la compatibilité entre les navigateurs et leurs supports (ordinateur, téléphone portable, TV, etc.).
• Ils rendent les contenus accessibles aux personnes handicapées (navigateur vocal, plage braille).
• Ils permettent d’alléger le code grâce à la séparation de la structure du document (HTML) avec les styles de présentation (CSS) :
  • la lisibilité du code est améliorée : la maintenance et la relecture du code sont facilitées,
  • le poids des pages est réduit : les chargements sont plus rapides, l’utilisation de la bande passante est réduite et les frais d’hébergement sont moins élevés.
• Ils assurent un référencement plus efficace.
• Ils garantissent la pérennité des contenus (le site sera compatible avec les navigateurs et les technologies de demain).

Le balisage sémantique

Le langage HTML définit un certain nombre de balises, chacune ayant des fonctions différentes. Le but du balisage sémantique est de les utiliser au bon endroit, au bon moment et de la bonne manière (pour des raisons d’Accessibilité et de maintenance, entre autres).

Exemple : Pour baliser un paragraphe on utilise la balise <p>. On pourrait arriver au même résultat visuel en utilisant une balise <div>, mais celle-ci n’a pas été conçue pour ça. De plus, cela peut poser des problèmes lorsqu’il s’agit d’appliquer un style à tous les paragraphes du site.

La sémantique, c’est la « grammaire » du code (X)HTML.

Accessibilité & Ergonomie

Internet doit être accessible au plus grand nombre, quel que soit son handicap (physique, auditif, visuel ou mental). Les personnes ayant un handicap disposent d’outils spécifiques leur permettant de naviguer sur le web (navigateur vocal, plage braille, etc.).

L’Accessibilité du web suit des standards spécifiques établis par le W3C (mais repris par différents référentiels).

La frontière entre ergonomie et accessibilité est parfois difficile à délimiter. Une personne qui ne souffre d’aucun handicap pourra tout de même apprécier la plupart des critères d’accessibilité, qui rendent sa navigation plus confortable. Cette personne doit-elle dire que le site est agréable à utiliser (= ergonomique) ou… accessible ?

Quelques exemples de points à forte connotation ergonomique :

• Un formulaire, qui donne le focus au champ quand on clique sur son label.
• Un lien, qui informe au survol qu’il redirige vers un autre site dans une nouvelle fenêtre.
• Des styles de présentation cohérents et une structure identique d’une page à l’autre.

Comment savoir si mon intégrateur a fait du bon boulot

Soyons clair dès le début : seule une analyse approfondie du code par un professionnel permettra de dire si l’intégrateur a correctement fait son travail.

Il existe cependant quelques techniques pour vérifier la qualité d’une intégration. Attention, ces méthodes ne sont pas fiables à 100% et sont présentées de manière informative et officieuse. Ne vous inquiétez surtout pas si votre site ne valide pas les points suivants, les facteurs à prendre en compte pour pouvoir en juger réellement sont beaucoup trop nombreux.

Valider le code

Pour cela, utilisez le validateur (X)HTML et le validateur CSS du W3C. Gardez en tête que ce n’est pas parce que le code est valide qu’il est forcément cohérent. En effet, obtenir un code (X)HTML valide n’est pas un problème en soi, la difficulté réside dans le choix des balises à utiliser (voir la notion de balisage sémantique).

Et inversement, un code invalide ne suggère pas forcément une mauvaise intégration. Je pense notamment à la validation CSS : pour tirer profit de certaines technologies non-officialisées par le W3C ou non-implémentées (à l’heure actuelle) par les navigateurs, l’intégrateur peut avoir recours à des styles propriétaires. Leur utilisation est parfaitement légitime, mais crée des erreurs à la validation.

Désactiver les feuilles de styles CSS

La désactivation de la (ou des) feuille(s) de styles est une bonne technique pour vérifier la sémantique du document. En effet, enlever la « couche de peinture » permet d’apprécier la hiérarchisation des titres et des contenus, de vérifier que les feuilles de styles ont été utilisées à bon escient (séparation correcte des styles de présentation et de la structure du document), de contrôler l’accessibilité des images, etc.

Voici les manipulations à effectuer pour désactiver les CSS sur votre navigateur :

• Avec Firefox : « Affichage », « Style de la page » et « Aucun style ».
• Avec Internet Explorer : Appuyez sur ALT pour faire apparaître la barre des menus, puis « Affichage », « Style » et « Aucun style ».

Observer le code source

Pour afficher le code source de la page, cliquez sur « Affichage » puis « Code source ».

On peut ensuite contrôler l’indentation, l’organisation, la présence et la pertinence des commentaires. Cette technique est à prendre avec des pincettes, la plupart des développeurs utilisent des frameworks et/ou des systèmes de gestion de contenu (plus couramment appelés par leur diminutif anglais CMS) sur lesquels la modification de certaines parties du code est parfois complexe et fastidieuse.

Il existe encore bien des outils permettant de vérifier l’accessibilité d’un site, l’optimisation du poids de ses pages, etc. Si vous souhaitez en savoir plus, les moteurs de recherche sont vos amis !

Conclusion

L’étape d’intégration d’un site n’est pas à prendre à la légère. Seule une personne passionnée, rigoureuse et cultivant une veille technologique régulière est capable de fournir un produit fini d’une réelle qualité.

L’intégrateur est loin des clichés du geek asocial, il faut régulièrement lâcher l’écran pour communiquer avec les autres maillons de la chaine (notamment avec les graphistes et les développeurs), mais parfois même avec le client pour s’assurer que le produit (son apparence, son fonctionnement et son interactivité) est conforme à ses attentes.

Un bon devis de création de site Internet se doit d’intégrer une partie « Intégration ». Méfiez-vous des devis bradés et des prestataires qui offrent des services d’intégration « discount », il y a peu de chance pour que la qualité finale du produit soit au rendez-vous…

Si vous avez des questions ou des remarques, n’hésitez pas, les commentaires sont là pour ça !