Les outils de développement dont vous avez besoin pour développer un site

Séries d'articles : Création de site

Pour développer confortablement un site, nous aurons besoin d’outils de développement…. tout comme le maçon a besoin d’une truelle, d’un seau, d’un fil à plomb, d’un mètre… voire d’une bétonnière.

Vous n’aurez cependant pas à investir un gros budget, car la majorité des outils sont gratuits ou du moins présentent une alternative gratuite.

Seuls outils vraiment indispensables et payant, une bonne connexion internet (le fournisseur d’accès internet FAI en français ou provider en anglais) et un hébergement pour le site. Hébergement payant car comme je l’ai montré dans l’article précédent, la gratuité peut coûter cher !

La plupart des produits cités sont associés directement au lien, pour leur téléchargement.

Les outils indispensables :

Je ne reviendrai donc pas sur un accès à internet par un FAI, un préalable à tout.
N.B. : ne pas confondre FAI (fournisseur d’accès internet comme Free, SFR, Bouygues…) et Hébergeur comme 1&1 ou OVH.

Un éditeur de texte

Editeur de texteMême si Windows comprend un éditeur de texte, le bloc-notes; oubliez-le. Prenez un éditeur plus adapté, pour votre code CSS ou HTML. C’est un outils de base indispensable.

Le plus répandu et le plus utilisé dans les vidéos formation comme sur Youtube, est incontestablement Notepad++ (Notepad plus plus), un éditeur gratuit. Ce programme a bien évolué, depuis près de 10 ans que je le connais…

Les développeurs amenés à écrire des centaines et même des milliers de lignes de code, prendront des éditeurs avec des fonctions plus sophistiquées comme un accès FTP à votre serveur, et plus de langages incorporés.

Quelques alternatives à Notepad++ : PhpDesigner (pas très cher : 29€ en license personnelle) , Sublime text (70$), Komodo Edit (une version à minima gratuite)

Nota bene : oubliez et fuyez comme la peste, Adobe Dreamweawer, pour votre usage courant, car il introduit des parasites, dans vos lignes de code et risque d’avoir des effets désastreux sur votre développement de site.

Un éditeur graphique :

PhotoshopMême s’il n’est pas absolument indispensable, c’est un outil plus qu’utile, pour recadrer ou mettre au format une image ou une photo. Des alternatives en ligne, existent.

Vous avez peut-être le nec plus ultra Photoshop, voire la suite Adobe ou avez pris un abonnement Adobe CC. Mais rassurez-vous, si vous n’avez pas effectué un tel investissement : des alternatives existent.

Ce type d’outil est indispensable pour éditer des images en jpg (photos compressées) ou en png (images pouvant comprendre des zones transparentes), que vos pages recèleront.

Programme alternatif : Gimp un logiciel open source

Solution alternative, online : Pixlr qui vous évite de charger un programme, donc aussi utilisable sans problème même sur des tablettes à faibles capacités de stockage.

Un logiciel FTP

Vous aurez besoin d’un logiciel qui vous permettra de charger d’avoir un accès direct à votre espace disque chez votre hébergeur de façon à y charger ou à en récupérer des fichiers directement.

C’est un outil quasi indispensable.

Tout comme pour le navigateur Firefox de Mozilla, vous trouverez le progamme de transfert de fichiers gratuit (FTP = File Transfer Protocol) Filezilla.  N.B. : Vous chargerez la version Filezilla Client (pas serveur !).

Des alternatives plus sophistiquées existent mais sont totalement inutiles pour le travail à réaliser dans le cadre de développement voire de maintenance d’un site internet.

 

L’utile :

Même si pas indispensables, voici quelques programmes voire attitudes à avoir, utiles mais non indispensable.

Les navigateurs internet

Divers navigateurs internetLes principaux navigateurs internet sous windows, sont Firefox de Mozilla, Google chrome et Microsoft internet explorer automatiquement chargé avec windows (ou Edge dans windows10).

Il faut savoir que ces 3 navigateurs ne réagissent pas de façon totalement identique aux commandes HTML, CSS ou javascripts, qui lui sont envoyées. Récemment j’ai eu la surprise de ne pas voir s’afficher un diaporama, en en-tête de page d’accueil d’un site, sous Ms ie et Edge. (Il faut savoir que les navigateurs de Microsoft ont de tout temps toujours posés des problèmes et sont la bête noire des développeurs, dans la mesure ou Microsoft s’évertue à ne pas suivre intégralement les consignes du W3 !)

Un très grand nombre de développeurs travaillent avec Firefox ou Google chrome, mais disposent des 3, ne serait-ce que pour vérifier le bon affichage du site, sur n’importe lequel de ces navigateurs. De plus, via la touche « F12 », vous afficherez facilement le nom et les propriétés (comme la CSS) des éléments du site. Firefox dispose même d’une version « développeur« . N’hésitez pas à ajouter des modules ou des extensions pour développeurs, via les options de votre navigateur.

Un serveur local

Plus pour vous faciliter le travail, cet outil n’est pas indispensable. Il permet surtout d’effectuer le travail plus « proprement ».

Wampserver.comPour être complet, pendant toute la phase de développement, la majorité des développeurs travaillent en localhost, c’est à dire en « serveur local« , via des programmes comme Wampserver, par exemple, pour PC. Ce programme va installer un répertoire wamp64 sur votre disque dur local, et le gérer comme le ferait le serveur apache chez votre hébergeur. Tout se passe en local, sans besoin d’hébergeur extérieur. Ce n’est qu’une fois le site terminé qu’il sera transféré en bloc, chez l’hébergeur comme 1&1 ou OVH.

Attention de bien travailler avec un version PHP égale ou supérieure à 5.6, du moins équivalente à celle utilisée ou configurée chez votre futur hébergeur du site.

Sur PC : Wampserver ou EasyPHP devserver

Sur Mac : Mamp

 

Un générateur et gestionnaire sécurisé de mots de passe

J’appellerai cela, un outil de sécurité, permettant de ne pas multiplier le nombre de connexions avec un même mot de passe, faisant qu’une fois qu’il aura été éventuellement piraté, le pirate ait accès à tous vos abonnements…
Plutôt que d’avoir un tableau de mots de passe, un programme comme Keypass (gratuit) vous sera d’une très grande utilité. Vous pourrez aussi installer la traduction, dans le répertoire du programme.

Il vous permet de générer des mots de passe sophistiqués (comprenant majuscules, minuscule, nombres, caractères spéciaux voire parenthèses) pour assurer votre sécurité, aujourd’hui, plus que jamais indispensable. Il retiendra pour vous, pour chaque connexion sécurisée l’identifiant et le mot de passe particulier. Vous pourrez utiliser le copier/coller, pour compléter les champs. L’avantage, c’est que l’accès aux données n’est que temporaire et s’efface de la mémoire vive au bout de quelques secondes.

Cela permet aisément d’affecter un mot de passe différent, à chaque connexion ou inscription à un site, à un abonnement. Depuis que j’utilise ce programme et des mots de passe de 15 ou 25 caractères, plus aucun problème de piratage de mes connexions.

Des liens utiles :

Voici un ensemble de liens utiles et bien connus, qui pourront vous aider dans votre tâche :

à vous d’en trouver d’autres et de compléter cette liste de départ…

Conclusion :

Ainsi équipé, vous pouvez désormais vous lancer tranquillement dans le développement de votre site. Vous êtes désormais quasiment paré à faire face à tous les besoins auxquels vous pouvez être confronté.

Visionnez au besoin, plusieurs fois des vidéos comme celle de Tyler Moore ou autre, pour bien vous imprégner de la démarche et bien saisir ce qu’il dit en anglais, avant de voir d’autres vidéos plus spécifiques à un thème, par exemple. Ne nous cachons pas que si vous ne comprenez rien à l’anglais, il ne vous est pas impossible de développer votre site, mais ce sera dur-dur : tous les langages utilisés sont exclusivement en anglais… même en Asie et en Extrême-Orient.

Un dernier lien qui peut vous être utile, le traducteur anglais français : http://www.wordreference.com

Il ne comprend malheureusement pas tous les termes spécifiques aux pages internet. Vous essayerez alors par le moteur de recherche Google.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

5 + cinq =