La boîte à outils d’un développeur web

Du directeur artistique au copywriter, en passant par le chef de projet ou le social media manager, les métiers en communication sont divers et variés. Une harmonie qui permet à une agence de répondre à des appels d’offres et d’accompagner des clients dans leur communication, parfois de A à Z.

Un de cess métiers et qui sera au coeur de cet article est celui du développeur web, un nom qui ne veut parfois rien dire et dont le temps de travail est parfois difficile à valoriser auprès de ceux qui ne connaissent pas les dessous d’un site web.

Le fruit du travail d’un développeur web : un site

Un site internet est un moyen de communication qui donne accès à une audience qui n’est pas restreinte géographiquement, bien que privilégiée pour les commerces locaux notamment. En effet, un site est en ligne et donc visible par tous. De ce fait, beaucoup d’entreprises misent sur leur site web pour trouver une clientèle : qu’il s’agisse d’un site vitrine dans le but de rendre visible grâce à une indexation sur les moteurs de recherche, ou d’un e-commerce afin de vendre ses produits à une plus grande échelle.

Mais un site web peut aussi avoir une vocation interne : apporter des solutions pour simplifier le travail des utilisateurs en termes d’organisation et de collaboration, accompagner des entreprises dans leur transition numérique via des intranets tels que les CRM, automatiser des tâches répétitives dans le traitement de données ou en intégrant différents services entre eux : emailing, logiciels de gestion d’entreprise…

Les sites web font référence à une branche de l’informatique qui correspond au développement web, différente d’un développement logiciel ou encore mobile.

Le code comme langage

Armé d’un environnement de développement (IDE) tels que Notepad++ et Visual Studio Code, d’une logique imparable et de patience, le développeur va créer de toute pièce un site web en s’exprimant en grande partie avec du code. De manière plus précise, nous dirons qu’il programme : mais même ce terme n’est pas en accord avec tous les langages qui sont bien différents, autant dans la syntaxe que dans leur finalité.

Voici un aperçu des langages de base :

Langage de balisage : HTML

<a href="/contact" title="Contact">Contactez-nous</a>

Il s’agit du langage qui structure une page web. Chaque page web est constituée de HTML, permettant de définir les éléments de la page : liens, images, boutons, texte, formulaire… À noter que ce langage étant statique, les développeurs ont recours au PHP qui lui est un langage de programmation utilisée en grande partie pour générer du HTML. Le PHP est à la base du CMS WordPress, ou de frameworks tels que Symfony et Laravel qui offrent des bases solides pour démarrer le développement d’un site web. Pour résumer simplement, chaque page web correspond à une une page HTML, ce code source est d’ailleurs visible par tous depuis le navigateur. Mais plusieurs pages HTML peuvent être générées par un seul script PHP qui s’occupe de récupérer le contenu provenant d’une base de données en fonction de la route (l’URL) demandée et de l’afficher selon un template prédéfini.

Langage de programmation : JavaScript

Il s’agit d’un langage sur la base de déclencheurs / évènements qui rend une page web interactive. Il est à la base de nombreux frameworks qui façonnent le web d’aujourd’hui et de demain : jQuery, NodeJS, React, Vue.js, Angular, Svelte…

document.querySelector('button').addEventListener('click', function() {
this.innerHTML = "Cliqué !";
})

Cet évènement simple à l’écoute d’un clic sur un bouton change le contenu textuel. JavaScript est à la base de toute l’interaction qui s’effectue sans rechargement de page. C’est de cette façon que de véritables logiciels sont capables d’exister sur le web : Google Sheets, Figma, Canva… n’ont plus rien à envier à des logiciels à installer sur votre machine. C’est aussi comme cela que des réseaux sociaux comme TikTok ou Instagram ont une version desktop qui ressemble à l’application mobile : possibilité de scroll infini, ajout de like et commentaire en instantané. Seul JavaScript est capable de communiquer des informations (recevoir et envoyer) de manière asynchrone.

En développement front, le JavaScript sert aussi à rendre vivant les éléments HTML en les animant : selon divers déclencheurs tels que le scroll ou le survol de la souris, les éléments vont recevoir de nouvelles propriétés CSS (changement de couleur, de fond, de position…). Sur ce simple constat, il est possible de faire des animations plus ou moins complexes, notamment à l’aide de librairies de renom comme GSAP. Si vous êtes curieux n’hésitez pas à faire un tour sur notre site très animé !

Requête de base de données : SQL

SELECT * from posts WHERE post_status = "published" AND post_type = "page"

Langage de communication avec une base de données MySQL ou son dérivé open-source (MariaDB). Cette requête est inspirée de la fameuse base de données WordPress qui est basée sur une table contenant toutes les publications du site, différenciées ensuite par leur type : page, média, article… Plus de détails sur le fonctionnement de WordPress.

Ligne de commande : shell Bash

mkdir directory 
cd directory
touch file.txt

Ce langage est natif sur plusieurs systèmes d’exploitation, à l’instar de Linux et MacOS. Pour simplifier, il permet de naviguer et d’interagir avec des fichiers, fichiers qui sont à la base de tout site puisqu’ils en composent le code source. Nous avons déjà expliqué le fonctionnement d’un serveur ainsi que les commandes Linux les plus courantes.

Feuille de style : CSS

a { 
 color: blue;
 text-decoration: underline;
}

En coordination avec le HTML, le CSS décrit l’apparence de chaque élément de la page web. Le JavaScript permet ensuite de le dynamiser pour obtenir des animations. Si nous pouvons le décrire comme un simple langage descriptif avec des sélecteurs et des propriétés, il s’avère que le langage évolue avec des concepts avancés comme les custom properties qui imposent une logique de programmation. Également des pré-processeurs comme Sass permettent de gérer des conditions ou des boucles.

Front-end vs Back-end

Ce qui différencie ces langages, c’est aussi de pouvoir séparer le développement en deux parties : le front-end (interface utilisateur) et le back-end (serveur, fonctionnalités, gestion des données). Des langages sont plus front-end que d’autres, comme le CSS, le JavaScript, contre des langages serveurs comme le PHP ou Python. Mais là aussi la limite est floue, à l’instar du JavaScript qui peut également être un langage serveur grâce à Node.js.

Parfois, un développeur se spécialise dans l’un de ces deux domaines et n’a que peu à intervenir sur le deuxième, mais beaucoup de développeurs sont capables de maîtriser les deux. Attention tout de même au fameux « jack of all trades, master of none »...

Nous avons écrit un article détaillé sur la distinction entre front et back.

Univers numérique

Le développeur est aussi en capacité d’agir sur les éléments qui orbitent autour d’un site :

• Gestion de nom de domaine : achat auprès d’un registrar, transfert, modification d’enregistrements DNS…
• Hébergement web : création de l’environnement sur des plateformes comme OVHcloud, mise en place de déploiement automatique, monitoring des logs…
• Gestion des e-mails : création d’adresse e-mail et d’alias, configuration anti-spam
• Analyses : mise en place de services d’analyse de traffic (Google Analytics) et d’évènements sur divers éléments à vocation marketing (envoi formulaire de contact, clic sur numéro de téléphone)
• Référencement : avec l’aide d’un expert en SEO, le développeur devra mettre en place toutes sortes d’optimisations afin de garantir un positionnement sur les moteurs de recherche. Attention car tout ne repose pas sur ses épaules : le contenu prime à la fin et seul un contenu de qualité sera capable de placer un site parmi les premiers résultats.

Un équilibre entre créativité et faisabilité

En développement, les possibilités sont presque infinies. Mais il existe quand même des limites qui seront dictées par les différents langages ou librairies utilisées et des technologies déjà en place. L’étude de la faisabilité d’une fonctionnalité est primordiale avant tout développement, notamment pour faire coïncider le fameux triangle coût, délai et qualité.

Le développeur web peut accompagner le client dès son besoin pour le guider vers une solution adaptée à son budget.

De plus, après plusieurs décennies de navigation sur la toile, des conventions et bonnes pratiques se sont banalisées et beaucoup de sites se ressemblent dans la construction. Et heureusement car cela facilite amplement la prise en main des utilisateurs. Désormais, tout le monde sait ce qu’est un bouton CTA, un menu ou un hyperlien, bien que ces mots n’ont pas le même sens en dehors du web. Il est donc de notre intérêt de rendre un bouton facilement cliquable, et un lien souligné et d’une autre couleur.

C’est pourquoi il est parfois utile de rester assez classique pour s’adapter au plus grand public, qui lui n’est pas toujours à la pointe de la technologie. Ou trouver le juste milieu pour respecter ces conventions tout en étant créatifs !

Des concepts comme l’accessibilité, l’éco-conception, l’ergonomie ou encore les performances pourront alors complètement transformer un développement. Des sacrifices seront notamment faits au niveau de l’esthétique pour éviter de surcharger une page ou la rendre difficile à naviguer.

De plus, la créativité ne s’exprime pas que dans le rendu final mais dans le code lui-même. Comme certains le disent très bien, à l’instar de WordPress qui en a fait son slogan, “Code is poetry”, et les développeurs sauront apprécier un code élégant et efficace, jusqu’à le qualifier de beau !

Une création interactive en ligne

En terme de création, le développeur s’appuie souvent sur une maquette de site réalisée par un graphiste, qui peut la créer et la visionner avec des logiciels comme Adobe XD ou Figma. Mais il ne peut pas transposer cette maquette sur un site web directement : c’est le développeur qui lui donne vie.

Une question que se posent parfois les clients est de savoir pourquoi il n’est pas possible « d’exporter” la maquette en ligne et en faire un site web. Cela peut paraître abstrait car la maquette Adobe est visible en ligne, elle aussi sur un navigateur, alors qu’est-ce qui la différencie d’un site web ?

La réponse se cache dans la technique utilisée. En front, pour définir qu’un certain élément se trouve à cet endroit de la page, Adobe utilise du positionnement absolu qui consiste à dire que sur la totalité des 1440 pixel de largeur de la maquette, le bloc se trouve à 100px de la gauche par exemple.

Le positionnement absolu est parfois utile en développement, mais il est à bannir de manière générale : il faut laisser les éléments dans un positionnement dit statique qui permet de faire découler naturellement les informations, surtout quand ce contenu est dynamique. Cela permet aussi de respecter la règle d’or du responsive : le site doit être parfaitement lisible aussi bien sur un écran de smartphone que sur un grand écran 32 pouces. Nous utilisons alors des valeurs relatives qui consistent à positionner les éléments en fonction des uns des autres et de la résolution : grâce à des valeurs en pourcentage par exemple.

Par exemple, voici que qu’Adobe génère :

/* Layout Properties */ 
top: 430px; 
left: 0px; 
width: 1440px; 
height: 380px;

Ce code n’est pas utilisable : il ne propose pas de sélecteur, ni le HTML lié à ce CSS. En plus d’être du positionnement absolu comme en témoignent les valeurs fixes en pixel.

Évolution constante et opportunités infinies

L’informatique et le web plus particulièrement sont des domaines récents et en constante évolution, portés par une communauté nombreuse du monde entier qui grandit et apprend ensemble. Grâce au travail de la communauté open source notamment, tout le monde peut participer et ajouter sa pierre à l’édifice.

Le développeur doit bien sûr s’adapter pour suivre la tendance mais cela lui amène des opportunités de nourrir ensuite ses futurs projets de ces nouvelles technologies. Mais les anciens projets sont également concernés par cette évolution constante : les technologies utilisées sont mises à jour, pour s’adapter à la tendance mais souvent pour corriger des failles de sécurité. Ces mises à jour menacent l’équilibre du site web qui pourrait développer des bugs ou des dépréciations, en plus d’être en danger de sécurité dans la mesure où il devient obsolète.