html5 meter facile




 

Je continue ma série sur le code html5 avec la balise meter. Je vous montre comment l’utiliser avec du code html5 et du code Javascript.

 

Prérequis

– Disposer d’un navigateur compatible html5, Chrome de préférence, la balise n’étant pas supportée par Firefox 13;
– connaitre le code html sans nécessairement en maîtriser tous les rouages;
– connaitre le code javascript sans nécessairement en maîtriser tous les rouages.

 

A quoi sert la balise html5 meter ?

La balise meter est une balise pour indiquer une mesure à un instant t. Par exemple, vous pourriez l’utiliser pour :
– indiquer le taux d’occupation d’un disque dur;
– ou encore la mesure de la mémoire utilisée par votre système.

 

html5 meter ou html5 progress ?

La balise progress rend compte de la progression d’une tâche, elle devrait est toujours être croissante. La balise meter rend compte d’un état à un instant t d’une ressource, elle peut varier à la hausse comme à la baisse.

Pour ceux qui souhaitent en savoir plus sur la balise progressbar, 2 articles sont parus sur le sujet :
Afficher une barre de progression en html5;
Une barre de progression pour le chargement de vos images.

 

La balise html5 meter en détail

Cette balise comporte 6 attributs :
value : la valeur courante de la jauge;
min : la valeur la plus basse possible, par défaut à 0;
max : la valeur la plus haute possible, par défaut à 1;
low Specifies the range that is considered to be a « low » value.
high Specifies the range that is considered to be a « high » value.
optimum : la valeur dites optimale.

La jauge comporte aussi trois couleurs indicatrices de bonne, mauvais ou moyenne valeur.

Par défaut (le choix des couleurs est ajustable via les CSS) :
rouge pour une mauvaise valeur;
vert pour une bonne valeur;
jaune pour une valeur moyenne.

C’est à l’utilisateur de spécifier ce qu’il considère comme une bonne valeur (vert), une mauvaise valeur (rouge) et une valeur moyenne (jaune).

 

Spécificités des valeurs low, high et optimum

1er exemple

Prenons l’exemple d’une jauge mesurant l’utilisation de la mémoire : moins il y a de mémoire utilisée mieux c’est, donc un faible taux d’occupation sera au vert, alors qu’un taux élevé sera au rouge.

La valeur de optimum doit être, dans ce cas, inférieure à la valeur de low (optimum < low). De cette manière, on indique qu'en dessous de la valeur low, la valeur (value) fait partie des meilleures valeurs (jauge en vert). Au dessus de la valeur de high, la valeur (value) fait partie des plus mauvaises valeurs (jauge en rouge).

2ème exemple

Un autre exemple avec le taux d’occupation d’une salle de cinéma : plus la salle est occupée mieux c’est, un taux d’occupation élevé sera au vert, alors qu’un taux faible sera au rouge.

La valeur de optimum doit être, dans ce cas, supérieure à la valeur de high (optimum < low). De cette manière, on indique qu'au dessus de la valeur high, la valeur (value) fait partie des meilleures valeurs (jauge en vert). En dessous de la valeur de low, la valeur (value) fait partie des plus mauvaises valeurs (jauge en rouge).

 

Syntaxe de la balise html5 meter

<meter value="10" min="0" max="100" low="25" high="75" optimum="80">Chaîne affichée si la balise n'est pas supportée par le navigateur</meter>

 

Quelques exemples

Avec comme attributs : min=0, max=100, low=25, high=75 et optimum=80

10% value=10 < low
20% value=20 < low
30% value=30 > low et < high
40% value=40 > low et < high
50% value=50 > low et < high
60% value=60 > low et < high
70% value=70 > low et < high
80% value=80 > high
90% value=90 > high

qui devrait donner à l’affichage :

Avec comme attributs : min=0, max=100, low=25, high=75 et optimum=20

10% value=10 < low
20% value=20 < low
30% value=30 > low et < high
40% value=40 > low et < high
50% value=50 > low et < high
60% value=60 > low et < high
70% value=70 > low et < high
80% value=80 > high
90% value=90 > high

qui devrait donner à l’affichage :

 
J’espère que cet article vous a éclairés sur la balise html5 meter. Y a plus qu’à utiliser.

 

Si vous avez aimé cet article, partagez le.

 

Si vous constatez des coquilles, ou avez des remarques à faire ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 

Posté dans html5Taggé faire des jeux, html code, html et javascript, html5 code, html5 meter, html5 progress, jauge html5  |  3 commentaires

3 réponses à "html5 meter facile"

Répondre

*