Blog ENI : Toute la veille numérique !
Jusqu'à ce soir ! : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici

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.

1. L’indentation

L’indentation est le fait d’ajouter des espaces (ou une tabulation) devant certaines lignes afin de les décaler visuellement et également de regrouper les lignes de code.

Même si le code suivant est un peu confus à cette étape du livre, l’objectif ici est de mettre l’accent sur la mise en page du texte, avec des indentations, qui donne des informations sur l’organisation du code.

Examinons le code JavaScript suivant :

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

Ce petit programme affecte à la variable actif le texte ’indefini’, puis il teste si la variable age a une valeur supérieure ou égale à 18. Une condition est l’action de tester une variable. Dans l’exemple, la variable age serait créée plus tôt dans le code.

Si la variable age est supérieure ou égale à 18, une troisième variable, adulte, est initialisée...

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 :

  • HTML

  • CSS

  • JavaScript

  • image

  • vidéo

  • audio

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

1. Sauvegarder et tester une page

Pour un développeur, la souris n’est absolument pas nécessaire pour l’écriture du code. La souris est certes indispensable dans certains cas sur l’ordinateur ou à défaut peut être bien pratique, mais pour la programmation c’est loin d’être le cas !

Pour se passer de la souris, encore faut-il connaître des méthodes qui permettent au clavier de faire la même chose qu’avec la souris.

Par exemple, pour sauvegarder un document, le tester, puis revenir sur l’éditeur pour continuer à coder, il n’y a pas besoin d’utiliser la souris. Ou du moins la souris va être utile au début pour lancer les différents logiciels mais ensuite elle risque de faire perdre du temps.

Supposons qu’il y a déjà eu un test sur une page HTML. L’éditeur de code est ouvert, le navigateur qui est utilisé pour les tests est ouvert également. Il faut, après avoir écrit quelques lignes de plus, tester si les pages s’affichent comme prévu.

Il faut donc :

1 Sauvegarder le travail.

2 Afficher le navigateur web.

3 Rafraîchir la page pour voir les modifications.

4 Revenir dans l’éditeur pour continuer ou corriger.

1) Le raccourci le plus fréquent pour sauvegarder un document est [Ctrl] S sous Windows et [Cmd] S ou [Pomme] S sur Mac.

N’hésitez pas à prendre dix secondes pour regarder dans le menu Fichier de votre éditeur, il y sera sûrement indiqué à côté des options le raccourci à utiliser pour lancer la sauvegarde d’un fichier ou de plusieurs fichiers.

2) Un raccourci très pratique permet de passer d’un logiciel ouvert à un autre logiciel ouvert. Dans notre cas, l’éditeur de code est ouvert, et le navigateur web l’est également. Pour passer de l’un à l’autre, il faut dans un premier temps avec le pouce appuyer sur la touche [Alt]. Cette touche ne fait rien si elle est pressée seule...