ReadingIndicator.js est un plugin jQuery que j'ai conçu récemment et qui permet d'indiquer le pourcentage de lecture d'un bloc de texte ou de plusieurs blocs indépendants. Tout d'abord conçu pour ce blog (vous pouvez apercevoir la barre de chargement sous cet article), je me demandais comment calculer le pourcentage de lecture d'un bloc HTML particulier, et non pas celui de la page complète. Voilà ce qui m'a amené à développer ce plugin jQuery et à vous le proposer.
Télécharger “ReadingIndicator 1.0”readingIndicator-1.0.zip – Téléchargé 23892 fois – 6,83 Ko
Mesurer le pourcentage total de défilement (scroll) effectué dans une fenêtre une relativement simple, j'avais d'ailleurs développé un tutoriel pour expliquer comme créer des barres de chargement de ce type. Dans un cas comme celui d'un blog ou d'un site de presse en ligne, cela importe peu de savoir si 50% de la page a été parcouru par l'internaute, c'est ni une information valable pour lui, ni une source de motivation pour aller plus loin dans la navigation. Par conséquent, il peut être plus intéressant d'indiquer le pourcentage ou le taux de lecture d'un texte (article, brève, dossier...), car c'est davantage ce que les visiteurs souhaitent avoir comme information lorsqu'ils lisent des contenus web. ReadingIndicator.js répond à ce besoin, et permet de mesurer des taux de lecture pour des blocs HTML distincts (souvent pour des textes "longs", sinon l'intérêt est limité voire nul).
Reading Indicator en jQuery, ça fait quoi exactement ?
Quand je me suis mis dans le développement de la version 1.0 du plugin ReadingIndicator.js, j'ai tout de même souhaité ajouter pas mal de petites options pour personnaliser l'effet. S'il en manque certaines (que je vais citer par la suite), vous allez voir que le plugin peut avoir un rôle majeur, et bien plus que d'afficher une simple barre de pourcentage de lecture. Sans attendre, voici quelques fonctionnalités possibles :
- ajout d'une barre de chargement (taux de lecture) classique ;
- adaptation de l'affichage de la barre de chargement (CSS ou même le texte d'affichage) grâce aux fonctions Callback en jQuery ;
- adaptation de l'offset de calcul pour que le taux de lecture soit le plus réel possible (je détaillerai juste après) ;
- possibilité d'afficher des alertes selon le pourcentage de lecture atteint ;
- positionnement de la barre de chargement adaptable (haut, bas, gauche ou droite), avec effet Sticky ou non ;
- possibilité de masquer ou non la barre de chargement avant ou après un taux de lecture donné.
Toute la force du plugin réside essentiellement dans sa modularité et ses fonctions de Callback, car votre imagination et votre savoir-faire peut offrir plein de possibilités. Par exemple, une fonction de rappel (callback) peut vous servir à générer des appels en AJAX pour enregistrer automatiquement dans une base de données le taux de lecture moyen selon ce que les lecteurs d'un contenu ont réalisé. Ainsi, vous pouvez faire des statistiques et mesurer l'efficacité de vos contenus (impact de la longueur du texte, nombre de lecteurs qui abandonnent après un pourcentage de lecture précis, hiérarchie des contenus à revoir, etc.). Ceci n'est qu'un exemple, mais il me semble assez éloquent.
Si vous voulez des démos en ligne, je vous invite à vous rendre sur mon site de plugins Testeur.ML qui a une page complète dédiée au plugin jQuery Reading Indicator. Vous pourrez voir plusieurs exemples d'utilisation, le détail des options, etc.
Quelques précisions sur le plugin jQuery Reading Indicator
Le plugin a des paramètres par défaut, il peut être utilisé pour un à plusieurs blocs de lecture indépendants en même temps, mais cela ne fait pas tout. En effet, j'ai dû faire des choix pour fournir des réglages par défaut dans les options, il faut donc bien personnaliser si cela ne vous convient pas. Je vais donc expliquer quelques particularités importantes pour bien comprendre le principe du plugin.
J'ai dû créer un événement Javascript appelé "scrollStop", qui active une action après qu'un défilement ait eu lieu (lors de l'arrêt du défilement). La raison est toute simple, les navigateurs et Javascript génèrent automatiquement une sorte de latence et d'inertie lors d'un défilement. Lorsque vous souhaitez afficher une alerte après 70% de lecture et que l'internaute défile rapidement de 50% à 90% par exemple, cette latence va entraîner l'affichage multiple d'alertes (pour 71%, 72%, 73%, etc.). Ainsi, en se focalisant sur le scrollStop, l'effet ne va se produire qu'après avoir relâché le défilement, donc à 90% uniquement. Cet événement joue donc un rôle majeur dans le plugin jQuery, et peut même être utilisé pour d'autres usages si nécessaire.
Aussi, j'ai dû déterminer ce que j'ai appelé un "contexte de lecture" en jQuery, à savoir l'offset par défaut pris en compte pour le calcul du pourcentage. Normalement, il faut imaginer que c'est le pixel tout en haut de l'écran visible (offset Top) qui permet de savoir quand le lecture "entre" dans une zone de lecture. Dans ce cas, le pourcentage commence à 0% quand le pixel du haut atteint le tout début du texte, et termine à 100% quand ce même pixel atteint l'extrême fin du contenu. Reconnaissez que ce n'est pas vraiment réaliste comme mesure car l'oeil humain ne lit pas tout en haut de l'écran en général, mais au milieu environ. Par conséquent, j'ai créé l'option "context" avec trois valeurs ("top", "bottom" et "middle") qui permet d'adapter le pixel de début et de fin pris en compte pour le calcul du taux de lecture. Par défaut, c'est "middle", et de fait, le pourcentage lu est davantage en adéquation avec ce que peut ressentir un humain.
Je voulais également revenir sur les fonctions de Callback, déterminantes dans ce plugin :
- cbk est une fonction de rappel qui agit après le scrollStop (après que le défilement s'arrête). Elle retourne trois valeurs : pourcentage de 0% à 100% de lecture), pourcentage réel (pourcentage de -x% à +x%), pourcentage inversé (taux de lecture restant). Cette fonction est très utile si vous souhaitez créer vos propres fonctions (appels Ajax, affichage d'alertes personnalisées...).
- cbkDisplay sert à personnaliser l'affichage complet de la barre de progression, du pourcentage, etc. La fonction retourne un objet JSON avec les classes CSS utiles.
- cbkPercentDisplay permet de personnaliser l'affichage de la zone de pourcentage uniquement (par défaut : "Lecture : x %"). La fonction retourne deux objets JSON : divers pourcentages, classes CSS. Cette fonction permet notamment de réaliser l'effet présent sur ce blog, à savoir de modifier l'affichage du texte dès que les 50% de lecture sont atteints (avant 50%, le plugin affiche le taux de lecture puis ensuite, c'est le pourcentage de lecture restant qui prend le relais).
Ce que le plugin Reading Indicator ne fait pas par défaut
De base, le plugin Reading Indicator ne répond pas à tous les cas de figure, il faudra donc parfois mettre un peu la main à la patte à l'aide des fonctions de Callback pour aller plus loin. Après avoir fait une analyse fine des rares plugins concurrents dans ce domaine, la grande majorité d'entre eux n'indique pas un pourcentage de lecture avec des fonctions de rappel, mais uniquement des phases de lecture.
Par exemple, ces plugins vont indiquer des "crans" de lecture à chaque fois qu'une sous-partie d'un bloc de texte est atteinte (après un titre souvent). C'est aussi une bonne idée, je n'étais juste pas partie dans cette direction à l'origine. Toutefois, sachez qu'il est possible d'y arriver en utilisant les Callbacks disponibles, afin de personnaliser l'affichage d'une part (remplacer la barre de chargement par des rectangles pour marquer des crans de lecture comme ici ou là) mais aussi le comportement du calcul d'autre part (petit code jQuery à personnaliser dans une fonction de rappel).
J'espère que ce plugin vous plaire en tout cas et pourra vous aider au moins à mieux comprendre jQuery et ses possibilités. Si vous avez aussi des questions ou des suggestions, je suis preneur. :-)