La plus part des éditeurs dispose d’un système d’autocomplétion de balise, et une fonctionnalité de suggestions de balises et/ou attributs CSS que vous tapez. Bref, une manière d’aider le développeurs à faire des choses rapidement. Je vous présente un autre surplus outil qui vous permettra d’aller encore plus rapidement, Emmet !
Je partage avec vous aujourd’hui une fonctionnalité que je trouve très pratique de mettre dans les pages web de mes projets, une barre de progression indiquant le chargement de la page. Tellement facile à mettre en place que je me suis dis, que certains le trouveraient aussi peut-être intéressant.
Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec tout le support de Webstorm, grâce à son extensibilité, plusieurs plugins existent pour étendre ses fonctionnalités. Il supporte nativement les langages PHP, HTML, CSS et JavaScript.
AVANTAGES ET FONCTIONNALITES
Si plusieurs développeurs Web se penchent vers cet IDE, c’est grâce aux nombreux avantages et fonctionnalités que possède PHPStorm qui rendent vraiment facile la vie des développeurs en occurrence :
- Le support de la coloration syntaxique
- Un générateur de code
- L’auto complétion intelligent du code
- Une documentation du langage PHP intégré
- La factorisation du code
- File watcher, un outil qui fait la surveillance des fichiers surtout pour la transpilation des codes pour ceux qui utilisent des préprocesseurs comme SASS ou Webpack
- Un support de gestion de version (GIT, SVN) intégré
- Les supports des framework (Symfony) PHP intégré
- Les supports des moteurs de templates comme blade, twig intégré.
Et on est loin d’atteindre la moitié des fonctionnalités qu’offre cet IDE nativement… Il est quasi entièrement customisable et est très extensibles grâce aux nombreux plugins disponibles sur le web.
INCONVENANTS
Et que pensez-vous ? Que dans toutes ces features, il ne manquera pas de point faible ? Détrompez-vous ! PhpStorm est génial avec ces fonctionnalités mais cela lui rend gourmand en ressource mémoire. Il peut consommer jusqu’à 700Mo de mémoire vive.
Télécharger PhpStorm
PhpStorm n’est malheureusement pas gratuit, mais ils sont une version d’essaye d’une durée de 30 jours à voir dans le site officiel
SI vous avez commencé le développement web avec notepad++ comme c’est le cas de la plus part, c’est le moment de voir un peu plus grand et professionnel en migrant vers PHPStorm. Si vous ne voulez pas PhpStorm en raison de sa gourmandise, pensez à SublimText.
La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais le problème avec est que les animations avec cette librairie sont un peu incontrôlable.
Généralement, on peut avoir besoin d’exécuter une animation selon une condition donnée. Par exemple, lors d’un clic, d’un scrolling, etc… Découvrons WOW.js, une librairie JQuery qui en mélangeant avec animate.css, déclenche les animations au scroll de la page.
WOW.Js est une librairie JavasScript qui permet de déclencher les animations lors d’un scroll. L’animation est lancée seulement après que l’élément HTML apparaisse à l’écran, et avec l’avantage que tout cela soit configurable. Il est par défaut configurer pour être utilisé avec animate.css, mais vous pouvez utiliser une autre librairie d’animation qu’animate.css.
Installation
- Télécharger animate.css
- Télécharger WOW.js
- Incluez animate.css dans l’entête du document12345<head><!-- ... --><link rel="stylesheet" href="enmplacement-de/animate.min.css"><!-- ... --></head>
- Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes1<script src="emplacement-de/wow.min.js" charset="utf-8">
- Instancier WOW.js (après avoir inclus WOW.js123<script>new Wow().init()</script>
Utilisation
Quelques classes suffisent pour animer un élément quand il se voie à l’écran
1 2 3 | <div class="wow bounce"> Je veux sauter de joie quand l’utilisateur me verra </div |
- wow : Signale qu’il faut animer cet élément lors d’un scroll
- bounce : Le nom de l’animation (toutes les animations ici)
Exemple complet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Les animations en CSS</title> <link rel="stylesheet" href="css/animate.min.js"> </head> <body> <div class="container"> <div class="wow bounce"> Je veux sauter de joie quand l’utilisateur me verra </div> </div> <script type="text/javascript" src="js/wow.min.js"></script> <script> new Wow().init(); </script> </body> </html> |
Configuration de WOW.js
WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.
1 2 3 4 5 | new WOW({ boxClass: 'bouger', // On aura maintenant à utiliser <div class= « bouger bounce »>Je saute</div> mobile: false, // Cela fera à ce que les animations ne se fassent pas depuis les terminaux mobiles offset : 0 //La distance entre le bas de la page et l’élément avant le lancement de l’animation }).init(); |
Et puis il y a les attributs data-wow-* qui permettent de configurer aux plus fines les détails des animations de chaque animation.
- data-wow-duration : La durée de l’animation. L’équivalent de animation-duration en CSS
- data-wow-iteration : Le nombre de fois que l’animation va se répéter. L’équivalent de animation-iteration-count en CSS
- data-wow-offset : La distance entre le bas de la page et l’élément lui seul, avant le lancement de l’animation.
- data-wow-delay : Le temps avant que l’animation soit lancée. L’équivalent de animation-delay en CSS
Exemple
1 2 3 4 | <div class="bouger tada" data-wow-duration="3s" data-wow-iteration="infinite" data-wow-delay="2s" data-wow-offset="20"> Je veux bouger un peu quand l'utilisateur me verra </div> |
Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css
Au moins une fois dans votre parcourt de programmation web, vous avez eu à faire face à cette balise; la balise meta qui sans doute semble être différent de la plus part d’autres balises. Certains se posent même des questions sur son importance. découvrons le ensemble dans la suite de ce tuto.
C’est quoi la balise meta
Une balise meta est une balise orpheline qui se place dans la partie head (entre <head> et </head>) du document HTML. La balise meta comme toutes les autres balises d’entête (head), permet de fournir les informations concernant le document HTML. Ces informations sont celles qu’on appelle les métadonnées d’où le nom de la balise meta.
Quelle est son utilité ?
Les métadonnées sont destinées à des outils comme le moteur de recherche, le navigateur, etc… Ce qui veut dire qu’il n’est vraiment utile qu’à l’outil qui l’exploite et le comprenne. L’outil qui n’a pas été fait pour une métadonnées quelconque ne fait que l’ignorer.
Exemple :
1 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
Dit au navigateur d’utiliser l’encodage UTF-8 qui en HTML5 est simplifié par l’utilisation de l’attribut charset.
1 | <meta name="robots" content="index" /> |
Dit aux moteurs de recherches de ne pas indexer ce document HTML.
Pour vous donner vraiment son utilité, prenez cet exemple :
Vous utilisez notepad++, devinez alors que les concepteurs du logiciel notepad++ aimeraient savoir le nombre de site en ligne créés en utilisant notepad++. Il peuvent simplement créer un bot qui aura comme mission de parcourir tous le web à la recherche des sites dont par exemple cette métadonnée existe.
1 | <meta name="generators" content="notepad++" /> |
Du coup, si vous mettez cela dans votre site, les concepteurs du logiciel sauront que vous avez utilisé notepad++ comme éditeur texte pour créer le site.
Utilisation de la balise meta
La balise meta se défini comme suit :
- Il doit avoir au moins un de ses attributs
name,http-equivoucharset - S’il a l’attribut
nameouhttp-equiv, il doit aussi avoir l’attributcontent
Vous connaissez sans doute déjà son utilisation avec l’attribut charset concentrons plutôt sur son utilisation avec name ou http-equiv
L’attribut name ou http-equiv fourni le l’intitulé de l’information et content fourni l’information elle même.
Exemple :
1 | <meta name="author" content="Mbungu Ngoma" /> |
La balise meta ci-dessous fournie l’information que l’auteur (author) du site est Mbungu Ngoma
Information au navigateur
Les informations données au navigateur utilisent toutes l’attribut http-equiv. Exemple :
1 | <meta http-equiv="Refresh" content="10; URL=https://informagenie.com"> |
Qui dit au navigateur qu’après 10 seconde, de rediriger l’utilisateur sur informagenie.com
Vous pouvez retrouver les informations concernant d’autres http-equiv sur Internet.
Information sur la page
Les balises metas fournissent les informations sur le document HTML vis-à-vis des moteurs de recherches, des robots de reconnaissances vocales, etc… voici ses utilisations courantes
1 | <meta name="description" content"Les astuces les plus explicites du web" /> |
Fournie cette description dans les moteurs de recherches notamment dans Google
Voici une liste non exhaustive des utilisations possibles
- author : Définie l’auteur de la page
- keywords: Mettre les mots clés de la page
- robots : Donnes les instructions aux moteurs de recherches vis-à-vis de la page. index pour permettre d’indexer la page, nonindex pour le contraire (Plus d’infos)
- application-name : Donner le nom de l’application
Pour plus d’information, allez dans la spécs W3
Open Graph
Open graph est un protocole utilisé par Facebook pour permettre à n’importe quelle page web de devenir un objet social riche. cela étant dit, Facebook à travers open graph arrive par exemple à représenter un lien comme suit au sein de sa plateforme :
Exemple d’utilisation :
1 | <meta name="og:title" content="Limiter l'utilisation de données hors forfait" /> |
Comme vous pouvez bien le deviner, c’est le titre dans l’objet social.
Voici quelques autres éléments :
- og:description : PLa description de la page. (“Qu’est ce que c’est agaçant, acheter…“)
- og:url : L’URL de la page
- og:type : Le type de l’objet. par ex: article
- og:image : L’image de l’url