Publié par

développement front-end

Back-End, Front-End, Full Stack… Tant de dénominations pour parler de développement Web, comment s’y retrouver? Vous devez coordonner un projet numérique et vous ne savez pas à quel profil faire appel? Je vais tenter de vous simplifier la tâche.

Dans cet article, je vais répondre à ces 3 questions:

  • Qu’est-ce que fait un développeur Front-End?
  • Comment peut-il améliorer mon site?
  • Avec quoi travaille-t-il?

En quelques mots

Le développement Front-End, c’est un travail de programmation de site Web et de design d’interface.

Le développeur Front-End va travailler sur toutes les parties du site vues par le client.

« Certains comparent le travail de celui-ci au travail d’un traducteur. »

Je m’explique. En programmation, le développeur jongle avec 4 types de langages, soit HTML, CSS, JavaScript et PHP. Il aura besoin de ces langages pour traduire les éléments graphiques afin de livrer un site Web au final.

Il traduit les éléments graphiques? Oui. Le développeur Front-End se sert des éléments pour écrire du code afin de créer l’aspect visuel de votre site. Il est aussi responsable d’appliquer le design choisi par le designer Web pour que vos pages et les éléments de votre site soient cohérents.

Que comprennent les éléments graphiques?

  • Elles comprennent les maquettes graphiques de votre site Web. Voici un exemple des maquettes graphiques du site Evollia. (Voir l’image ci-dessous)

Elles comprennent aussi les guides de styles. On y retrouve des informations quant à la police d’écriture (typographie, taille, style) à employer, les couleurs en hexadécimal, les dimensions, etc.

 

C’est donc au moyen de ces éléments graphiques que le développeur Front-End optimisera votre site Web, c’est en fait ce qui le guide dans ses tâches.

Il optimise les sites Web

Le développeur crée l’environnement pour tout ce que l’utilisateur voit et touche concernant le contenu, la mise en page et l’interaction du site Web.

  • Le développeur Front-End doit prendre en considération plusieurs types de fureteur par exemple Chrome, Safari, Firefox et Internet Explorer (Edge). Pourquoi? Parce qu’il doit s’assurer que le site s’affiche de manière uniforme sur tous les navigateurs. Le développeur concevra également le site pour que le design du site s’adapte à la dimension des différents écrans (ordinateurs, les mobiles et les tablettes). En d’autres termes, c’est lui qui crée le site en responsive design.
  • Le développeur peut identifier rapidement les problèmes technologiques flagrants de votre site Web et il peut corriger ces problèmes en choisissant la technologie la plus adaptée à la situation;
  • Celui-ci améliore la structure du site pour qu’il soit plus rapide et plus fluide à naviguer;
  • Le développeur a également pour objectif d’améliorer l’accessibilité de votre site Web.

 

Voyez comment vous pouvez accélérer un projet d’optimisation Web>>

Qu’est-ce qu’UN DÉVELOPPEUR FRONT-End utilise pour faire son travail?

Il y a 4 types de langage que le développeur Front-End utilise essentiellement soit le HTML, le CSS, le JavaScript et le PHP. Ces 4 langages composent les pages Web et permettent aux pages de s’afficher dans le navigateur.

Le code HTML

Ce code est exprimé sous formes de tags et de balises et permet de représenter le squelette d’une page Web;

  • Il va définir les sections d’une page comme l’emplacement d’un paragraphe ou d’un titre, par exemple.
  • Ce code aide à structurer la hiérarchie du texte
    • Par exemple, au moyen de la hiérarchie des titres <h1>, <h2>, <h3> …<h6>
  • Il permet de pouvoir insérer une image dans une page et de structurer l’information;
  • Le code HTML est également utilisé par le développeur pour définir les zones cliquables dans une page, ou encore pour la création de formulaires et des liens entre vos pages.

Le CSS

C’est un langage qui permet de « décorer » les pages Web en appliquant les styles préétablis dans les éléments graphiques.

Pour vous aider, comparez le HTML à une charpente de maison et le CSS à la finition de celle-ci :

Alors que seuls sa structure et ses panneaux d’isolation sont visibles (HTML), le CSS vous permet de déterminer quelle couleur aura la maison, quel type de briques vous allez mettre, quelle forme et quelle grosseur auront les fenêtres. Le CSS permet également de décorer l’intérieur de la maison, par exemple les murs, le type de céramique et le type de plancher. En fait, le CSS c’est comme le designer d’intérieur d’une maison, mais pour un site Web. C’est ce langage qui stylise votre site.

Voici un exemple d’un site avec CSS puis sans CSS. Le contenu est le même dans les deux cas. C’est simplement pour vous aider à visualiser la différence.

 

Le JavaScript

Le JavaScript est un langage qui est responsable des animations des pages interactives.

Par exemple, dans la photo de gauche, lorsque vous arrivez sur la page d’accueil du site d’Evollia, vous pouvez très bien visualiser le logo en raison de sa grosseur. Toutefois, si vous descendez plus bas dans la page d’accueil, le menu change, il rétrécit et le logo aussi. Donc, il y a une animation créée par JavaScript rattachée au défilement de la page, lorsque vous descendez ou montez la barre de défilement. Ces animations sont conçues pour améliorer la convivialité du site et son dynamisme.

 

Le PHP

Nous n’avons pas oublié le PHP. C’est un langage tout aussi important pour le développeur. Il est utilisé pour compléter la structure HTML. J’en parlerai plus en détail dans un prochain article.

En résumé

Pour résumer, le développement Front-End, c’est un travail de programmation et de design d’interface. Celui qui occupe ce poste se servira des éléments graphiques et de 4 types de langages (HTML, CSS, JavaScript et PHP) pour créer l’aspect visuel et ergonomique de votre site. Un développeur Front-End peut alors créer des sites dynamiques, mais pour un ajout de fonctionnalités plus avancées, il aura alors à collaborer avec un développeur Back-End.

Je reparlerai dans un prochain article du travail d’un développeur Back-End et de son rôle dans l’optimisation de votre site Web.

Aimeriez-vous savoir comment vous pouvez accélérer le développement d’un site Web?
Cliquez ici pour en savoir plus

 

À propos de l'auteur

Geneviève Bérubé-Lamoureux

Geneviève Bérubé-Lamoureux est coordonnatrice en communication et marketing numérique. Elle a réalisé son parcours académique au Baccalauréat en administration des affaires (B.A.A.) à l’Université Laval… En savoir plus


Commentaires

À propos de ce blogue

Notre blogue vous partage le fruit de notre expérience dans l’univers du numérique. Vous y trouverez notre vision, nos meilleurs conseils, nos recommandations et notre regard sur l’actualité qui touche notre industrie.

Si vous êtes à votre première visite, pensez à vous abonner pour recevoir régulièrement nos recommandations par courriel.

Catégories

Articles récents