skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

dimanche 26 septembre 2010

La balise Meter en HTML 5

Publié par Infinite Loop, à 11 h 15 2 commentaires

Autre nouveauté dans le monde HTML 5, c'est la balise METER. Fini le temps où des mesures traînaient un peu partout dans les pages sans qu'on puisse deviner par le markup la signification de chacun. La nouvelle balise Meter a été introduite pour corriger la sémantique de l'information de la page lorsqu'on veut indiquer une mesure dans une plage connue. De plus, ça s'affiche joliment.

Essentiellement, vous pourrez indiquer que l'espace disque est utilisé à 35% ou que vous avez obtenu un pointage de 7/10 dans votre code HTML (exemple minimaliste) :

<meter>35%</meter>
<meter>7/10</meter>
Visuellement, ça ne sert pas à grand chose si on n'établit pas les bornes dans laquelle se fait la mesure. Affiché à la manière d'un thermomètre horizontal (à ce jour, seul Chrome a su l'afficher correctement), on peut d'un coup d'oeil avoir un aperçu graphique de la donnée :
<meter min="0" max="10" value="2">2/10</meter>
<meter min="0" max="10" value="5">5/10</meter>
<meter min="0" max="10" value="8">8/10</meter>


Comment ça fonctionne ?

À la base, aucun JavaScript n'est nécessaire. Il suffit de configurer les bonnes valeurs dans les attributs :

Value
Représente la valeur réelle à afficher sur l'échelle. Si elle n'est pas spécifiée, la valeur par défaut sera zéro.

Min
La borne minimum autorisée sur cette échelle de mesure. Zéro par défaut.

Max
La borne maximum. Si elle n'est pas spécifiée, la valeur maximale sera de 1 par défaut, ce qui veut dire que si on veut représenter 50% en omettant les attributs min et max, la valeur entrée devra être 0.5 (qui se situe entre 0 et 1).
<meter value="0.5">50%</meter>
Low
Si la valeur se trouve sous la barre de l'attribut low, la mesure sera considérée comme faible et le code de couleur s'ajustera en conséquence suivant ce qui sera défini dans l'attribut Optimum.

High
Si la valeur se trouve au dessus de la valeur high, la mesure sera considérée comme élevée.

Optimum
La valeur sera considérée comme optimale si elle dépasse cette limite. En étant initialisée supérieure à la valeur high, ça indique que plus la valeur est élevée, mieux c'est, donc l'ordre des couleurs changera dans l'affichage. Dans l'exemple ci-dessous, une valeur élevée sera colorée en vert pour montrer que le résultat est positif. Sinon, si la valeur optimum n'était pas spécifiée dans le même exemple, une valeur élevée serait indiquée en rouge.

Qu'est-ce que ça veut dire concrètement ?

Si on mesure une performance académique, on détermine dans l'ensemble que sur une échelle de 0 à 100, une note au dessus de la note de passage de 60% indique un succès, qu'entre 50% et 60%, ce n'est pas suffisant mais qu'on est près de la réussite (affiché en jaune), et que sous la barre des 50%, c'est désastreux (affiché en rouge).
<meter value="39" min="0" max="100" low="50" high="60" optimum="80">39%</meter>
<meter value="56" min="0" max="100" low="50" high="60" optimum="80">56%</meter>
<meter value="64" min="0" max="100" low="50" high="60" optimum="80">64%</meter>
<meter value="86" min="0" max="100" low="50" high="60" optimum="80">86%</meter>
<meter value="92" min="0" max="100" low="50" high="60" optimum="80">92%</meter>


Jusqu'à maintenant, certaines personnes se sont amusées à transformer le rendu par CSS. Il y a un peu de triche mais ça démontre bien les possibilités. Curieusement, l'auteur dit que les exemples fonctionnent bien sous Firefox et Chrome 5 mais chez moi ça ne marche pas du tout avec Chrome 6.


Tags: HTML

2 réponses à "La balise Meter en HTML 5"

  1. JpvincEnt a dit...
    27 septembre 2010 à 12 h 20

    Il me semble qu'il y a un bug avec meter sous chrome justement : la dernière fois que j'ai voulu l'introduire elle ne s'affichait pas avec ce browser, mais ça a peut être change depuis

    Anonyme a dit...
    30 septembre 2010 à 13 h 43

    Chez moi, seul google chrome l'affiche correctement :(
    Encore trop tôt pour l'implémenter !


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ▼  septembre 2010 (34)
        • Goo.gl peut générer des codes QR
        • Nous sommes les débris de Dieu
        • Programmer en français ?
        • Profession : artiste Lego
        • La balise Meter en HTML 5
        • Citation no. 100 sur la langue
        • Top 4 des chansons pour envoyer promener quelqu'un
        • Pénurie de robots
        • Lieux de tournage de films et séries télé
        • Utiliser l'API de Bit.ly avec PHP
        • Suivre l'activité d'un serveur PostgreSQL
        • Impossible veut dire 25 heures
        • Première expérience en géocaching
        • Citation no. 99 sur les voitures
        • Attribut autofocus en HTML 5
        • Générer un PDF en PHP
        • Géolocalisation avec HTML 5
        • Une surprise se cache à l'intérieur !
        • Survol de l'audio en HTML 5
        • Attribut placeholder sur input HTML 5
        • Citation no. 98 sur le journal
        • Facture d'ordinateur acheté en 1996
        • Recette de Dr Pepper
        • Combien se vendait un PC en 1989 ?
        • Symphonie à 1 bit de Tristan Perich
        • Les Invincibles : les esprits parlent le latin
        • Allez-vous tirer l'ours ou pas ?
        • Énigme : obtenir la somme de 82
        • Attention à l'heure d'été en programmation
        • Citation no. 97 sur la prison
        • Totalement inutile
        • Nouveaux contrôles HTML 5
        • Hiérarchie dans une entreprise
        • Bière Melon Head de Picaroons
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft