Contact

Québec

2095, rue Frank-Carrel, bur. 214
Québec (Québec)
G1N 4L8

Téléphone 418 353-1808
Télécopieur 418 907-8445

Localisez-nous via Google Maps

Belgique

Avenue Athéna 1
B 1348 Louvain-la-Neuve
Belgique

Téléphone +32 (0)10 45 85 14

Localisez-nous via Google Maps

France

110 Rue Réaumur,
75002 Paris, 
France

Téléphone +33 1 85 76 30 90

Localisez-nous via Google Maps

  • Ce champ n'est utilisé qu'à des fins de validation et devrait rester inchangé.

L'intégration Web démystifiée

« Tu pèses sur un bouton pis ça se fait tout seul! » – M. Tout-le-monde

J’aime bien cette citation. C’est si simple! Ça me fait penser à cette pub de Bureau en gros, celle avec le bouton « facile ».

Le Web doit être le plus simple possible pour l’utilisateur, et c’est normal. Par exemple, un site transactionnel doit vendre! Pour ce faire, les étapes à suivre entre le point Alpha (l’arrivée sur le site) et le point Omega (la confirmation de la vente) doivent être les plus claires et les plus simples possible.

Souvent, on pense que le secret d’un site efficace est dans le design. Ce n’est pas faux. Le poids sur les épaules des designers est immense! L’aspect visuel du site est la première chose qui saute aux yeux. Le graphiste doit penser ses maquettes en fonction d’ergonomie et d’expérience utilisateur. Un site qui est simplement joli n’est pas nécessairement facile d’utilisation. Il est très important de prendre le temps de réfléchir et d’insister sur l’aspect ergonomique du site pour offrir aux internautes une expérience hors du commun. Mais le site a beau être le plus magnifique et instinctif au monde, il faut que les poulies en arrière-scène fonctionnent!
Le site doit donc être bien programmé pour que la gestion de contenu, la vente d’articles, les formulaires et tout le reste soient fonctionnels… tout doit être rendu possible par un programmeur!

Mais attendez juste un petit instant… Comment est-ce que la programmation du site, soit son squelette et ses fonctions biomécaniques (ou plutôt technomécaniques), peut être combinée avec l’image fournie par les maquettes des graphistes? On entre la programmation d’un côté de la machine, le design de l’autre, puis on appuie sur un bouton? Malheureusement, ce n’est pas si simple.
Heureusement, ça me donne un emploi!

Qu’est-ce que l’intégration Web?

Je vous mentirais si je vous disais que c’est une question qu’on me pose souvent. Du moins, on ne me la pose pas spontanément. La seule situation dans laquelle je me fais questionner à ce sujet est un copier-coller intégral. Ça va comme suit :

– Que fais-tu dans la vie Etienne?
– Je suis intégrateur Web.
– … Hein?
– Je fais de l’intégration Web!
– Ah… *silence inconfortable*… Donc tu fais des sites Web?
– Bah… je combine ce que le graphiste Web et le programmeur Web font.
– *silence encore plus inconfortable*… Et comment ça va, toi, sinon?

J’ai essayé, par le passé d’expliquer en quelques phrases ce en quoi consiste le poste que j’occupe chez Chalifour, mais en général ça fait plus peur aux gens qu’autre chose. En gros, plus de 80% de mon entourage hors travail n’a toujours aucune idée de ce que je fais dans la vie. Pour eux, le Web, ce n’est pas une opération complexe pour combiner deux créations originales et n’en faire qu’une. Ce n’est pas non plus des ajustements sans fin pour que chaque navigateur interprète le même résultat (d’ailleurs, un jour, je devrai expliquer à plusieurs ce qu’est un navigateur…). Pour eux, le Web, c’est simple! Ça fonctionne! Tout ce qu’on a à faire est de cliquer sur un bouton. Pour moi, c’est le découpage de maquettes, la conversion en HTML et CSS, l’ajout d’interactivités en jQuery, le débuggage, les mises à jour incessantes, le soutien technique, le fine-tuning… Tout ça pour peu de reconnaissance de la part des utilisateurs, mais tant pis. J’aime mon travail!

Vulgarisation

Imaginez que les sites Web sont des meubles IKEA. Le graphiste est un artiste designer qui va dessiner un beau meuble sur une feuille blanche et y ajouter plein de couleurs. Il donne sa vision du meuble. Le programmeur, lui, est l’ingénieur industriel qui dessine les plans techniques des mécanismes de fonctionnement du meuble (rails pour les tiroirs, mécanismes des portes, etc.). L’intégrateur, par la suite, est le client de chez IKEA qui doit assembler le meuble, mais avec une difficulté en plus : il n’achète pas le meuble démonté (ce serait trop simple). Non, il achète les deux plans (celui de l’artiste et celui de l’ingénieur) et un droit d’accès à l’entrepôt IKEA au complet. C’est à cet endroit qu’il devra choisir une à une les pièces et outils qu’il utilisera pour assembler son meuble, parmi toutes les pièces et outils possibles. Il faut que le résultat soit conforme!
Assembler du vrai IKEA n’est pas si compliqué, après tout, non? ;)

Les matériaux

Voici donc un aperçu des deux technologies/langages les plus utilisées par les intégrateurs.

HTML

HyperText Markup Language. En termes clairs, le HTML sert à afficher et baliser le contenu d’une page. C’est du texte entouré de balises ayant chacune une façon de séparer et donner une signification particulière à un bout de texte. Certaines balises servent à définir des paragraphes, d’autres des liens, des titres, des images, des blocs de contenu, des références à d’autres fichiers, etc. Le résultat produit par un fichier HTML seul est assez déconcertant, par contre. Ça donne du Web de 1994 en Times, avec des liens bleus et mauves.

HTML

CSS

Pour dévingtièmesciècliser (merci) tout ça, il faut ajouter du style, du CSS (Cascading Style Sheets)! Le CSS est un véritable coffre à outils contenant plus d’une centaine de façons de modifier et styliser du contenu HTML. Grâce au CSS, on peut changer la taille d’un élément, sa couleur, son positionnement, mais on peut aussi lui ajouter une bordure, une marge, une façon spécifique de se transformer et bien plus! Les possibilités sont infinies.
L’expérience d’un intégrateur compte pour beaucoup lorsque vient le temps de styler du contenu. Reproduire une maquette peut être très compliqué et il faut savoir détecter d’un simple regard la meilleure façon de procéder parmi les dizaines de possibilités se servant de centaines de transformations CSS possibles. Le résultat doit être impeccable!

CSS

Les difficultés

Plusieurs maux de tête seront causés par l’un des deux obstacles suivants : les graphistes et Internet Explorer.

Les graphistes sont toujours pleins de bonne volonté et adorent imaginer de nouvelles façons de présenter le contenu ou la navigation. Le problème, c’est que parfois ces innovations graphiques apportent des casses-têtes complexes aux intégrateurs, qui devront jouer d’originalité pour donner vie à la création des artistes graphiques. Le résultat, par contre, est très satisfaisant! Un peu de fierté pour l’intégrateur d’avoir surmonté le défi!

Le véritable ennemi est un monstre d’une taille gigantesque. Il a été, jusqu’à tout récemment, le navigateur le plus utilisé par l’internaute moyen : Internet Explorer. Je parle plus particulièrement des versions antérieures à 9. Depuis quelques années, le HTML5 et le CSS3 apportent de nouveaux outils et solutions pour permettre d’afficher un Web plus beau et plus efficace. Le hic, c’est que beaucoup d’utilisateurs utilisent encore de vieilles versions du navigateur Internet Explorer. Ces dinosaures ne supportent pas la majorité des nouvelles fonctionnalités HTML et CSS. Ça veut dire : moins d’outils pour créer un beau site Web. De plus, Internet Explorer est reconnu pour créer des bogues d’intégrations. J’ai vécu un cas en particulier où, selon Explorer, 2 + 2 égalait littéralement 5. Pour contrer ces bogues, il faut créer des exceptions. Par exemple, dire que la largeur d’un paragraphe est de 600 pixels, sauf pour Explorer 7, pour qui la largeur sera de 590 pixels (sinon on n’obtient pas le même visuel, étrangement).

Le résultat

Une fois le travail terminé, on se retrouve avec un site fonctionnel. C’est comme si la maquette du graphiste avait pris vie! Pour plusieurs, par contre, la seule différence à leurs yeux est que maintenant « la maquette fonctionne ». Mais le tout a été rendu possible par le travail minutieux de programmeurs et d’intégrateurs. Notre but est simple : au final, lorsque vous utiliserez nos sites Web, vous n’aurez qu’à appuyer sur un bouton… et tout se fera tout seul!

« Les choses devraient être faites aussi simples que possible, mais pas plus simples. » – Albert Einstein

À lire ensuite:

Doodle Google pour la Saint-Valentin : et la recherche sociale dans tout ça ?