Vous utilisez actuellement Internet Explorer. Pour profiter pleinement de Codeur.com, veuillez utiliser un des navigateurs suivant :
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.
Avant de continuer, n'hésitez pas à utiliser Codeur.com pour trouver un prestataire freelance ou trouver des appels d'offres.
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 :
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'é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.
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 !)
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.
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 navigateurs clés de l'intégration[/caption]
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.
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.
Vous souhaitez démultiplier votre prospection client ? Nous avons testé la plateforme Codeur.com pour vous ! Découvrez notre article Codeur.com : Avis & Test
Déposez vos devis et contactez jusqu'à 400 clients par mois
Créer un compte (gratuit)