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 l’utiliser.

Si maintenant le fichier CSS est dans un dossier et que le fichier image est dans un autre dossier, il faut indiquer à l’ordinateur le chemin qui va du fichier CSS (dans le dossier css), jusqu’au fichier JPEG (dans le dossier images).

Pour faire cela, il y a un symbole à connaître : le slash « / » (la touche "divisé" sur le clavier) qui permet d’indiquer le passage par un dossier....

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 le langage Java. Le langage Java n’a en commun avec JavaScript que les quatre lettres du nom. C’est un langage très compliqué, très rigoureux, qui permet de concevoir des programmes de millions de lignes de code qui tourneront comme une horloge. Par la suite, NetBeans a évolué pour permettre de programmer en PHP, un langage serveur, et plus récemment en HTML, CSS et JavaScript.

NetBeans est gratuit. Il est téléchargeable ici : https://netbeans.apache.org/front/main/download/nb20/. Il va par exemple utiliser la coloration syntaxique. C’est-à-dire que les mots du langage qui ont certaines fonctions seront écrits d’une couleur et ceux qui ont d’autres fonctions dans une autre couleur. Le code est ainsi bien plus lisible et il est beaucoup plus facile et rapide de s’y retrouver.

Un autre point est sa réactivité aux erreurs de syntaxe. Une fois une ligne de code...

Des raccourcis bien pratiques