Vous utilisez actuellement Internet Explorer. Pour profiter pleinement de Codeur.com, veuillez utiliser un des navigateurs suivant :
Intégrateur Web : Le fonctionnement et les outils
Les besoins pour la création d'un site internet
Malgré les nombreuses évolutions – graphiques et techniques – des sites Internet, leur construction passe systématiquement par les mêmes étapes : au-delà des questions relatives à sa structure et à sa hiérarchisation, la phase concrète implique l’intervention de trois compétences distinctes.
- Le web designer pour la réalisation du design,
- L’intégrateur pour la transposition du webdesign sur Internet,
- Le développeur pour l’écriture des programmes.
Retour en détails sur le procédé d’intégration et sur les éléments à surveiller pour bénéficier d’une prestation de qualité et pour maitriser le prix de votre site internet.
Sommaire
Avant de continuer, n'hésitez pas à utiliser Codeur.com pour trouver un prestataire freelance ou trouver des appels d'offres.
L'utilité de l'intégration ?
L’intégration HTML permet de transformer le fichier graphique - établi par le web designer, la plupart du temps, au format PSD de Photoshop ou sur Sketch - en contenu HTML, destiné à être lu sur Internet.
Véritable passerelle entre le design et le web, l’intégration est une phase obligatoire qui doit répondre à de nombreuses exigences : le respect du web design fourni par le designer, la conformité aux standards du web et la compatibilité avec tous les navigateurs Internet.
Concrètement, l’intégrateur va :
- Découper le design en plusieurs images qu’il placera ensuite sur un fichier HTML
- Mettre en page les différents éléments sur un fichier HTML et une feuille de styles CSS
- Tester la compatibilité avec les navigateurs et les différents supports.
Le rôle clé de l’intégrateur
De ce fait, les intégrateurs sont souvent des personnes aux compétences multiples, maîtrisant les questions d’ergonomie, de design et de langages de développement que sont le HTML, le CSS et le JavaScript.
La conformité aux normes proposées par le W3C - World Wide Web Consortium – garantit :
- L’évolutivité ou la séparation du fond et de la forme qui permet d’agir indépendamment l’un de l’autre,
- La portabilité ou l’utilisation sur de nombreux supports et plateformes,
- La visibilité, influence la présence sur les moteurs de recherche en aidant les robots à bien comprendre le contenu.
L'évolution du web design de Codeur.com à travers des années. Le site a évolué graphiquement mais aussi techniquement, en 2014 la version de Codeur a été optimisé pour la navigation sur les smartphones et les tablettes.
Or, si le design connait des changements, il en est de même pour les méthodes d’intégration et les procédés de développement.
L’intégration requière une veille permanente des mises à jour des navigateurs afin de proposer une prestation optimale. A noter qu’une intervention de qualité prévoira une amélioration progressive, de manière à ce que le site puisse répondre aux avancées des navigateurs les plus récents, tout en offrant une expérience utilisateur agréable pour les utilisateurs des plus vieux.
Les outils de l’intégrateur
Chaque intégrateur a besoin d’un certain nombre d’outils de travail : un logiciel de traitement d’images, un éditeur de texte et plusieurs navigateurs.
Les logiciels de traitement d’images
L’intégration nécessite un logiciel de traitement des images – comme Photoshop – pour effectuer le découpage du design en plusieurs images. Si la découpe se faisait avant sous forme de tableaux, elle s’organise aujourd’hui avec les CSS : une technique qui permet de dissocier le contenu de la forme et qui optimise le site en facilitant ainsi les changements.
Suite au découpage, l’intégrateur ne dispose plus d’un fichier PSD mais de plusieurs images .JPG ou .PNG optimisées pour le web (légères !)
Les éditeurs de texte
A ce stade, il faut distinguer deux familles d’éditeurs :
Les éditeurs de texte WYSIWYG (What you see is what you get) comme Dreamweaver et Blue Griffon, qui génèrent automatiquement le code, en permettant à l’utilisateur de composer visuellement le résultat (sans réellement « toucher au code »).
Les éditeurs textuels comme Notepad ou TextEdit avec lesquels l’intégrateur codent directement, tout en bénéficiant d’une aide à la saisie et de différentes couleurs syntaxiques.
A noter que les WYSIWYG sont traditionnellement utilisés par les débutants qui apprécient le fait de voir directement la « retranscription » de leur code ; les professionnels préfèreront, quant à eux, écrire directement le code pour « maîtriser » totalement leur travail.
Les éditeurs de texte sur Mac
Quelques éditeurs de texte sur Window Unix / Linux:
Exemple d'intégration HTML / CSS avec Notepad.
Les framework front end
La compatibilité sur les différents navigateur
L’intégrateur doit pouvoir vérifier son travail sur plusieurs navigateurs – ce qui supposent d’installer au moins les plus courants : Firefox, Chrome, Safari et Internet Explorer. Il peut ainsi voir les différents rendus et effectuer quelques ajustements au besoin.
Les outils pour tester les différents navigateurs
Idéalement, il doit pouvoir également tester les différentes versions de ces navigateurs : pour cela, il existe de nombreux outils en voici une petite liste pour vous aider dans vos recherches :
Les extensions pour les intégrateurs
Certains navigateurs proposent également des extensions qui facilitent grandement le travail de l’intégrateur, à l’image de Firebug,Html Validator etWeb Developer.
Les navigateurs clés de l'intégration[/caption]
Les livrables de l’intégrateur
Si chaque intégrateur web suit sa propre méthodologie, ils présentent tous, à la fin de leur exercice, deux fichiers.
Le fichier HTML : le fichier-clé qui transforme le design en page Internet. Chaque intégrateur dispose d’un squelette HTML sur lequel est écrit un certain nombre de balises communes à toutes les pages / sites, à savoir celles relatives à la sémantique et au référencement naturel. Ensuite, il personnalise chaque page pour y intégrer les éléments du design.
Le fichier CSS: le fichier de styles qui définit l’aspect graphique du contenu (typographie des différents titres et textes, les couleurs, les espaces etc.) et qui place / organise les différents blocs composant le design global de la page.
Exemple de fichier CSS.
L’intégration HTML5 / CSS3
Aujourd’hui, les évolutions du métier d’intégrateur imposent de coder en « HTML 5 / CSS3 ». Chaque étape étant symbolisée par un nouveau numéro – HTML 2.0 en 1995-96, HTML 3.2 et 4.0 en 1997, etc. Arrivé en 2013, le HTML 5 est une évolution majeure offrant une logique plus « sémantique » : autrement dit, les balises sont désormais plus intelligibles.
Exemple de découpage sémantique avec l'HTML5.
Comme le HTML, le langage CSS a subi également des évolutions : l’idée étant d’apporter à chaque fois des innovations, à l’image des transformations 3D facilitées par les CSS3.
Mais si l’on code avec les toutes dernières versions HTML et CSS, il faut s’assurer de la compatibilité des nouvelles fonctionnalités avec les différents navigateurs. Pour savoir si certaines nouveautés sont interprétées correctement pour les différents navigateurs, vous pouvez vous servir des outils html5please et CanIuse.
Véritable passerelle entre le web design et le web, l’intégration est une étape clé dans la création d’un site. Point de ralliement d’un certain nombre de compétences, elle doit rester au contact des dernières évolutions du web, sans pour autant négliger les précédentes pour offrir une expérience utilisateur optimale – quel que soit le support ou le navigateur.
Cet article vous est proposé par Codeur.com. Depuis 2006, notre plateforme simplifie la mise en relation entre les porteurs de projets et les prestataires freelances. N'hésitez pas à en parler autour de vous.
Trouvez un intégrateur (gratuit)