Logiciels et outils nécessaires pour la formation

Les logiciels

Pour développer avec WordPress, il nous faudra principalement 3 ingrédients : un navigateur, un éditeur de code et serveur local ! Mais je ne vais pas m’arrêter là et vous montrer quelques autres logiciels et outils indispensables.

Le navigateur

Pour le navigateur, c’est comme vous voulez ! Choisissez parmi Chrome, Firefox ou Safari. Chacun des trois possède une console de développeur évoluée, qui nous aidera beaucoup pendant la conception de nos sites.

Si vous avez du mal à choisir, voici quelques indications :

• Chrome est actuellement le navigateur le plus utilisé avec 60% de parts de marché
• Firefox est devenu le navigateur le plus rapide du marché
• Safari est également très performant

Avec Chrome vous avez l’assurance que votre rendu sera vu correctement sur plus de 60% des machines, mais si vous manquez de RAM, optez pour Firefox ou Safari !

Pour ma part, je suis sur Chrome par habitude, mais les versions récentes de Firefox me donnent envie de basculer !

L’éditeur de code

Il en existe aujourd’hui pas mal, mais je vais vous en conseiller deux principalement :

Visual Studio Code

Tout d’abord, Visual Studio Code, alias VSC l’éditeur développé par Microsoft. Eh oui, ils ont souvent fait des erreurs mais ce logiciel, c’est une très belle surprise. De nombreux développeurs l’on adopté et l’adorent. C’est l’éditeur que j’utilise actuellement :

Il est gratuit et open source, et disponible pour toutes les plateformes.

Télécharger VSC

Atom & Sublime Text

L’autre c’est Atom, qui est également gratuit et open source. Il est disponible sur Windows, Mac et Linux et développé par GitHub. Je l’ai longtemps utilisé. Il est simple, efficace, mais très puissant car extensible :

Télécharger Atom

Il ressemble beaucoup à Sublime Text, un autre éditeur apprécié des développeurs, que j’ai longtemps utilisé avant Atom.

PHP Storm

D’autres éditeurs sont pas mal non plus, comme PhpStorm, qui est très adapté pour les développeurs PHP et fournit des outils inédits et avancés. Cependant PhpStorm nécessite une licence payante qui démarre à 89$ par an.

Nicolas Juen et ses collègues de l’agence parisienne Be Api l’utilisent et l’adorent tandis que les intégrateurs préfèrent VSC.  Voici son avis :

Orateur WordCamp

Développeur PHP

Le conseil de Nicolas Juen

Développeur chez Be Api

Voici les fonctionnalités essentielles qui font la force de PHPStorm en tant que développeur PHP et me font gagner énormément de temps :

– Ses nombreux plugins
– Son intégration avec WordPress, l’autocomplétion des filtres/actions et l’accès rapide aux filtres/actions
– La possibilité de mettre les coding standards et l’auto formatage de WordPress
– L’inspection du code dans un projet pour soulever les variables/méthodes ou autres problématiques
– Toute la partie refactorisation du code, changement de variables qui est très bien exécutée
– L’intégration de grunt/gulp, profiler JS, JSX, Vagrant, détection Docker
– La possibilité de jouer avec GIT depuis l’interface et voir rapidement l’historique d’une fonction

Suivez-moi sur X : @raherian • Mon site : Be Api

Quant à Notepad++, c’est un outil d’une autre époque que je vous déconseille. Je n’ai rien contre, mais franchement avec tous les outils modernes et gratuit, il n’y a plus de raison de le garder (à part la nostalgie et la flemme du changement, ce qui est un défaut pour un développeur).

Un environnement de développement local

Indispensable pour travailler un site WordPress depuis sa machine avant de l’envoyer en ligne, l’environnement de développement local peut s’installer facilement au travers de logiciels comme WAMP, MAMP, mais surtout Local By Flywheel qui est dédié à WordPress.

Pour le moment je ne m’attarde pas sur le sujet, car ce sera l’objet d’un cours à part entière : Pourquoi travailler en local ? 

Un logiciel FTP

Pour envoyer notre site vers son hébergement il nous faudra un logiciel FTP, du moins dans un premier temps. Dans la formation Industrialisation de sites WordPress, on verra d’autres techniques plus avancées qui nous éviterons de transférer les fichiers manuellement.

Il n’y a pas réellement de logiciels sexy ici, donc vous pouvez prendre soit Filezilla, soit CyberDuck qui fonctionnent en général plutôt bien !

Pour ma part j’utilise Transmit, mais il est payant et disponible uniquement sur Mac. Il est réputé pour être plus rapide que ses concurrents.

Un gestionnaire de mots de passe

Dans la création de site web, vous allez devoir stocker un très grand nombre de mots de passe et de données sensibles. Vous aurez : l’accès FTP, la base de données, le compte client hébergeur, le compte administrateur WordPress et éventuellement des clés de licences pour vos extensions. Et cela pour chaque site que vous ferez. Alors simplifiez-vous la vie, utilisez un gestionnaire de mots de passe comme Dashlane ou 1Password :

Le principe est de ne créer qu’un seul mot de passe maitre, qui servira à déverrouiller le coffre fort et récupérer l’identifiant dont on a besoin, de manière automatique pour chaque site grâce à l’extension de navigateur.

Ce genre de logiciel est devenu indispensable aujourd’hui alors évitez vraiment de tout stocker dans un classeur Excel ou un fichier texte. Assurez vos arrières et dormez sur vos deux oreilles !

Les outils

Voici maintenant quelques outils bien pratiques qui nous seront utiles lors de cette formation.

L’inspecteur de code du navigateur

Le premier outil dont on aura besoin est indispensable, et se trouve au coeur de votre navigateur : c’est la console développeur. Impossible de travailler sans cela. C’est elle qui nous permettra d’inspecter notre code, que ce soit le HTML, le CSS, le Javascript et même les requêtes Ajax. Et quand on en viendra aux performances de notre site la console s’avèrera également utile !

Pour ouvrir la console faites un clic droit > Inspecter depuis votre page web. utilisez le bouton en haut à gauche de la console pour sélectionner un élément de votre page.

Emmet : l’indispensable

Si je ne devais conseiller qu’un seul outil, ce serait Emmet (anciennement Zen Coding). Il vous fera gagner énormément de temps car Il permet de réduire considérablement le code HTML et CSS que vous devez taper en utilisant des abréviations de syntaxe.

Par exemple taper p.big puis Tabulation générera automatiquement <p class="big"></p>. Pratique non ?

Imaginons ce code HTML :

Avec Emmet il vous suffirait de taper : section.block>h2+(p>lorem)+ul.list>li*4>a{Lien}. Bon je vous avoue que ça fait un peu bizarre lu comme ça. Mais avec un peu d’habitude ça devient très pratique. Et rien ne vous empêche de taper ça en plusieurs fois, lignes après ligne.

Et pour le CSS c’est la même chose ! Ici le principe c’est de taper des abréviations correspondant bien souvent aux initiales des mots, prenons cet exemple :

Au lieu de tout taper, il suffit d’écrire : db+tac+m10+w50p+fwb et appuyer sur Tabulation. Et le tour est joué ! Là aussi, vous pouvez simplement taper les abréviations ligne par ligne pour faire plus simple.

Vous trouverez pleins d’autres exemples sur la documentation officielle. Emmet est disponible pour tous les éditeurs de code.

Si vous voulez vous entrainer sans rien installer, rendez-vous sur CodePen.io qui est d’ailleurs un très bon outil pour tester du HTML, CSS et JS.

Sur Atom c’est très simple à installer. Allez dans Preferences > Packages > Install, cherchez Emmet, et validez ! Redémarrez ensuite le logiciel et le tour est joué !

Et sur VSC, c’est déjà installé par défaut !

Comment savoir si un site utilise WordPress ?

On a vu précédemment que de nombreux sites, dont des grands groupes, utilisent WordPress. Vous vous êtes peut-être demandé comment savoir si un site était fait avec WordPress ? Ma petite astuce est d’utiliser Wappalyzer, une extension de navigateur, qui vous permettra de détecter les technologies utilisées par un site : CMS, serveur, librairies JS…

Installez gratuitement Wappalyzer sur votre navigateur :

Cet outil est très pratique et vous donnera un tas d’informations sur les sites que vous visitez !

Tester la rétro compatibilité de son site

Quand vous développez en HTML, CSS et JS, vous utilisez parfois des technologies récentes pas forcément compatibles avec les anciens navigateurs. Heureusement aujourd’hui on est bien loin du fiasco des années 2010. Mais il est toujours intéressant de vérifier à partir de quel navigateur on est compatible.

Pour cela j’utilise le site Can I Use qui est très bien fait et donne des indications claires. Ici je teste la compatibilité de CSS Grid :

Tester les performances de son site

Aujourd’hui la rapidité d’affichage de votre site est un critère important pour Google : Un site doit être optimisé pour être affiché le plus rapidement possible, que ce soit sur ordinateur ou smartphone, avec une connexion potentiellement limitée.

Pour tester votre site, vous pouvez utiliser le service Google PageSpeed ou encore GT Metrix.

Outre le score sur 100, les services vous donneront de nombreuses astuces pour améliorer les temps de chargement de vos sites. Pour l’instant on ne vas pas s’en occuper. Quand le moment sera venu, une extension de cache comme WP Rocket va grandement nous aider !

Pour aller plus loin, je pourrais vous conseiller de versionner votre code avec Git et de l’héberger sur GitHub, ou encore d’utiliser des préprocesseurs CSS comme Sass ou Stylus, mais c’est au programme de la formation industrialiser son site que je vous conseille de suivre à la suite de celle-ci. Pour l’instant on peut s’en passer !

Vous avez pour le moment tout ce qu’il faut pour continuer. Vous êtes parés avec les bons outils pour aborder cette formation.  On va maintenant passer en revue les bonnes ressources et voir où trouver de l’aide dans la communauté.