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

  1. Télécharger animate.css
  2. Télécharger WOW.js
  3. Incluez animate.css dans l’entête du document
  4. Incluez WOW.js (avant la fermeture de la balise body est l’une de meilleurs habitudes
  5. Instancier WOW.js (après avoir inclus WOW.js

Utilisation

Quelques classes suffisent pour animer un élément quand il se voie à l’écran

  • 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

Configuration de WOW.js

WOW.js comme dit dans le début est entièrement configurable. Voyons en détail quelques configurations essentielles.

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

Pour plus d’informations, allez sur WOW.JS , Animate.css et dans l’utilisation de Animate.css

Article sponsorisé

Cahier de charge, spécification technique, développement et déploiement, enfin, c’est réussi, le site est en ligne, c’est fini. FAUX !

faux norman
Norman dans la chaîne YouTube Norman fait des vidéos

Comme on peut bien le remarquer, Le vrai début d’un projet web commence après son déploiement. Après le déploiement d’un site web ou un blog, Il faut assurer sa maintenance, son amélioration mais surtout son optimisation dans les moteurs de recherches.

Dans la suite de cet article, je vous parle sur ce que vous devriez faire pour le référencement de votre site web après son déploiement.

Les enjeux du référencement

Je ne peux certes rappeler qu’un site web sans visiteur n’a pas une longue vie. Les visiteurs sont ceux qui peuvent être convertis en future clients, donc sans client, peu importe le meilleur produit au monde qu’on offre, les portes doivent devoir se fermer. La provenance d’un visiteur vers votre blog peut être de plusieurs canaux.

  • Le lien direct: Le visiteur tape directement l’URL dans la barre d’adresse
  • Le lien référent: Le visiteur clique sur un lien depuis un site X et lui ramène vers le votre
  • Le lien organique: Le visiteur cherche depuis les moteurs de recherche via un mot clé et tombe sur votre site web

Dans la majorité de cas, le lien organique représente plus de 40% du trafic des sites web, c’est ce qu’on appelle le trafic organique. 

Généralement, en faisant une recherche dans un moteur de recherche comme Google par exemple, on a tendance à cliquer sur les premiers résultats qui apparaissent dans le résultat de recherche qu’on appelle SERP. Donc, pour pouvoir attirer plusieurs visiteurs en provenance des moteurs de recherches, il faut chercher à apparaître dans le premier résultat de SERP.

Comment apparaître dans le premier résultat des moteurs de recherches ?

Simple que cela pourrait paraitre, mais en réalité, c’est une profession tout entière qui a des règles, techniques et méthodes particuliers. Il y a :

Pour votre cas il y a deux solutions

  • Apprendre le référencement
  • Faire appel à une agence de référencement

Apprendre le référencement

Si vous avez suffisamment du temps libre, vous pouvez vous engager à apprendre le référencement avec ABCM Performances à Strasbourg, ou bien évidemment, plusieurs ressources sur la toile sont à votre porté.

Faire appel à une agence de référencement

Il existe des agences spécialisées dans le référencement web tant locale qu’internationale que vous pouvez trouver sur la toile. Leur mission serait selon votre demande et leur tarif d’optimiser votre référencement dans les moteurs de recherches. Ils ont les compétences nécessaires pour qu’en moins de temps, vous soyez mieux référencé. Exemple de sitepenalise qui a aussi sa formation SEO gratuite.

J’espère que vous savez la longue étape suivante après que votre projet soit déployé et bienvenu dans l’univers de référencement web.

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 :

Dit au navigateur d’utiliser l’encodage UTF-8 qui en HTML5 est simplifié par l’utilisation de l’attribut charset.

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.

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 :

  1. Il doit avoir au moins un de ses attributs name, http-equiv ou charset
  2. S’il a l’attribut name ou http-equiv, il doit aussi avoir l’attribut content

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 :

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 :

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

Fournie cette description dans les moteurs de recherches notamment dans Google

meta description

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 :

open-graph meta

Exemple d’utilisation :

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

Pour plus d’informations