Règles générales

Préserver la lisibilité : l’indentation, les commentaires

Un développeur écrit des lignes et des lignes de code. Il en faut quelques milliers avant de pouvoir se prétendre développeur. Et dans tous les cas, peu importe le langage utilisé, il est très important d’être rigoureux quant à l’agencement de ces lignes. Un peu comme le texte d’un magazine qui est bien présenté, il faut que le code soit lisible et agréable à l’œil.

Un développeur, tous langages confondus, passe sûrement plus de temps à relire son code qu’à l’écrire, pour corriger une erreur ou apporter une amélioration. Et il est plus agréable de lire un code bien mis en forme qu’un code dans lequel tout est désordonné : c’est ce que nous allons voir dans cette section.

actif = 'indefini';  
if (age >= 18) {  
adulte = 'Ok'; 
chargePage("adulte") ;  
} else {  
adulte = 'Ko';  
chargePage("ado") ;  
} 

Penser au référencement

Toute personne qui veut créer un site internet va faire son maximum pour que le site fonctionne correctement, qu’il soit agréable à l’œil, que tout soit bien lisible, que les informations soient facilement accessibles, etc.

Mais il faut amener des visiteurs sur le site pour admirer ce travail.

Il y aura toujours les visiteurs qui auront vu l’adresse du site au bas d’un courriel ou sur une carte de visite. Mais le plus important est de faire que les moteurs de recherche et les sites sociaux « connaissent » l’existence de ce site.

Le texte contenu dans un site est important pour le référencement. Il faudra donc écrire ce texte en tenant compte des mots-clés pour le site.

Le site http://www.outiref.fr permet, en lui indiquant l’URL d’un site internet, de faire un rapport sur les mots-clés du site accompagné de nombreux conseils.

Si un vendeur de voitures d’occasion possède un site internet, il est fort probable que les mots « voiture » et « occasion » soient fréquemment présents sur ce site.

Pour donner une méthode simple, la question à se poser avant de développer un site est : « Qu’est-ce que les internautes auront saisi dans leur moteur de recherche pour arriver sur mon site ? »...

Dossiers et chemins vers les fichiers

Un site web complet nécessite la présence de différents types de fichiers à manipuler. Une liste non exhaustive donnerait les types suivants :

Selon la complexité du site qui doit être créé, il sera possible d’avoir une très grande quantité de fichiers. Le plus simple pour s’y retrouver est au minimum de créer un dossier par type de fichier. Même si dans certains cas il est possible de n’avoir qu’un seul fichier CSS, ce serait une bonne idée qu’il soit dans un dossier qui lui est propre, qui pourra être nommé simplement « css ».

Voyons comment les fichiers communiquent entre eux, pour mieux comprendre comment organiser les dossiers.

Si une instruction CSS a besoin d’une image pour décorer le fond de la page, il faut écrire dans le fichier CSS le nom de l’image nécessaire, par exemple « fond_bleu.jpg » :

body { 
    background-image:url("fond_bleu.jpg"); 
} 

L’instruction CSS background-image va utiliser une URL, c’est-à-dire une chaîne de caractères, qui indique où se trouve la ressource nécessaire, dans notre cas le fichier fond_bleu.jpg.

Si le fichier image se trouve dans le même dossier que le fichier CSS, il suffit, comme dans l’exemple précédent, d’écrire le nom de l’image. L’ordinateur cherche dans le dossier dans lequel se trouve le fichier CSS s’il existe un fichier fond_bleu.jpg. Et lorsqu’il le trouve, le CSS peut...

Les éditeurs pour le code

Pour créer un site, il faut des fichiers qui vont contenir des instructions pour mettre en place des blocs, leur donner des couleurs, les faire réagir au clic de la souris… Si la compréhension du texte est plus ou moins complexe, l’écriture peut se faire avec le plus simple des éditeurs qui existe sur n’importe quel système d’exploitation, par exemple Notepad sous Windows ou TextEdit sur Mac. Il existe des éditeurs, payants ou gratuits, qui vont aider à écrire le code de nos pages. Certains, comme Adobe Dreamweaver (payant), ont même une partie WYSIWYG (What you see is what you get : ce que l’on voit sur l’éditeur apparaîtra tel quel sur notre navigateur).

C’est vrai que ça a l’air attirant, mais dans la pratique ça l’est nettement moins. Il y a deux principaux problèmes avec ces outils. Tout d’abord What You See Is presque What You Get. Eh oui, il faut toujours vérifier son travail sur un navigateur, et lorsque certaines fonctionnalités CSS récentes sont utilisées, il y a fort à parier que le logiciel WYSIWYG ne saura pas les afficher.

Un autre point concernant ce type de logiciel est qu’il nous donne envie de créer notre site sans s’intéresser au code. Et il est tout à fait possible, avec la souris, de dessiner un bloc ici, et un autre là, et ainsi faire évoluer le site. Le problème est la perte complète de contrôle sur le code qui est généré, sans parler de la façon dont le code évolue lorsqu’un bloc est ajouté, puis supprimé, puis recréé, et déplacé... il y a toujours au final des morceaux de code à supprimer, des balises vides qui sont devenues inutiles, des styles qui sont créés automatiquement avec des noms comme style1, style2. En fait, tout cela donne l’illusion de faire gagner du temps, qui sera vite perdu ensuite pour tout remettre au propre.

D’autres éditeurs, moins sympathiques au premier abord, seront tout de même bien plus efficaces pour avancer sur un site. Prenons par exemple NetBeans. Cet éditeur était à ses débuts exclusivement réservé à la programmation dans...

L’IA dans un éditeur de code

Voici plusieurs expériences menées par l’auteur avec l’intelligence artificielle, ainsi que des exemples d’outils permettant d’assister le développement informatique.

Mot-clé : prompt

Il a été demandé à différentes intelligences artificielles de rédiger un petit programme correspondant à un exercice auparavant proposé à des étudiants en PHP (langage serveur). La qualité du code généré s’est révélée particulièrement élevée : celui-ci était correctement structuré, intelligemment commenté et fonctionnel dès la première exécution. Un point essentiel réside dans la formulation du prompt, c’est-à-dire le message adressé à l’IA. Il est nécessaire de consacrer du temps à sa rédaction, en décrivant précisément les attentes ; il peut même être pertinent de rédiger ce prompt dans un fichier texte afin de le tester sur plusieurs IA.

Visual Studio Code et intelligence artificelle

Aujourd’hui, il existe des outils que l’on peut intégrer à Visual Studio Code qui permettent à une IA :

Des raccourcis bien pratiques