L'intégrateur est chargé de mettre en page les choix graphiques et éditoriaux décidés par le chef de projet. Son rôle consiste à monter les pages d'un site web en y assemblant tous les éléments des maquettes graphiques dans le respect des normes et des standards. Pour mettre en page le site web, l'intégrateur s'appuie sur les langages HTML et CSS.
Pièce maîtresse de la réalisation de tout site web, l'intégrateur 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 est souvent amené à travailler sur plusieurs projets en même temps. Il participe, par son expertise, à la qualité globale du site, dans le respect des normes d'accessibilité, de référencement et d'ergonomie.
Pour créer une page HTML, il faut penser en "cadre". Chaque élément est contenu dans un "cadre" qui lui même peut être contenu dans un autre. Une page HTML est donc une succession de "cadres" imbriqués ou accolés les uns aux autres. Seul, une page HTML ressemble à un fichier de traitement de texte.
Pour mettre en page les éléments contenu dans le fichier HTML, nous utilisons une feuille de style (CSS) qui permet de définir des propriétés de style comme des bordures, une couleur, etc...
Pour visualiser une page HTML il faut utiliser un navigateur web comme Internet Explorer, Firefox, etc... Ces navigateurs interprète la page HTML et la feuille de style afin de l'afficher de manière graphique. Cette notion d'interprétation est très importante car selon le navigateur utilisé le résultat peut différer.
C'est le plus gros travail de l'intégrateur, créer des pages HTML/CSS visible sur chaque navigateur de la même manière. Malheureusement, les navigateurs plus anciens, tel qu'Internet Explorer 6, ne connaisse pas toutes les nouveautés du langage CSS version 2 et nous devons ruser pour garder une affichage correcte sur ces navigateurs. De plus, ces navigateurs ralentisse l'évolution des langages utilisés sur le web car encore beaucoup d'internautes les utilisent.
Afin que tous puissent accéder aux ressources du web, des organismes ont décidés qu'il fallait définir des standards pour faciliter l'accès aux informations. Le W3C (= le World Wide Web Consortium) est un de ces organismes. Son but est de promouvoir la compatibilité des technologies du web comme HTML, XML, PNG, etc... Ce ne sont pas des normes mais des recommandations.
HTML 5 est le nouveau standard en cours d'élaboration par le W3C. Cette nouvelle version de HTML est plus proche de l'esprit de structuration des sites d'aujourd'hui. Elle apporte ainsi de nouvelles balises pour mieux structurer un site tout en allégeant son code. Les plus grosses nouveautés concerne en particulier les balises <video> et <audio> de cette version. Actuellement, pour lire une vidéo dans un site internet nous utilisions un lecteur flash tout comme pour lire un fichier audio. Grâce à ces nouvelles balises, c'est le navigateur qui se chargera de lire la vidéo ou le fichier audio sans passer par un plug-in externe et sera donc lisible (en théorie) sur toutes les plateformes (Windows, Mac et Linux) et sur tous les navigateurs.
En plus de ces nouveautés, HTML 5 permet de nouvelles interactions avec l'internaute comme par exemple le "drag and drop", l'édition de n'importe quel contenu (spécifié via un nouvel attribut), etc...
Au niveau de la structuration des pages, plusieurs nouvelles balises sont apparues pour simplifier et mieux séparer les différents contenus. Par exemple, les balises <header>, <nav> et <footer> permettent de structurer la page via des balises dont le rôle est reconnu par tous.
Avec les améliorations structurels de l'HTML 5, les feuilles de styles CSS évolues aussi dans l'esprit des designs actuelles. Un grand nombre de nouveautés permettent de faire simplement et sans image ce qu'il était difficile de faire avec quelques images.
Grâce à CSS 3 il est désormais possible de faire :
Cela va permettre de réaliser des effets réservés jusque-là à JavaScript ou aux découpes d'images contraignantes (ombrage, survol, arrondis...). Il est important de rappeler que certains navigateurs n'ont pas encore implémenté l'ensemble de ces fonctionnalités et seul les dernières versions des navigateurs "de dernière génération" les ont implémentés.