Barras gráficas usando la etiqueta <meter>

En esta clase vamos a estudiar la etiqueta <meter> en HTML5. Vamos a ver algo de color, por fin, en nuestro navegador.

La etiqueta <meter> nos permite indicar una medida dentro de un rango, es decir, donde se conoce un valor mínimo y un valor máximo.

Su sintaxis es la siguiente:

<p><meter min="0" 
max="100" value="50"></meter></p>

Algunos ejemplos en los que podemos usar la etiqueta <meter> son:

• El espacio usado en mi disco duro (70gb de 250gb consumidos)
• El numero de entradas vendidas (700 de 850)
• El resultado de una votación

Se que son unos ejemplos un poco "tontos", pero aquí la cuestión es que podáis entender el funcionamiento de esta etiqueta, de la manera mas fácil para vosotros.

Ejemplo de uso para temperatura

<h2>Las temperaturas de las principales ciudades de España</h2>
<p>Sevilla:<meter min="0" max="52" value="33">33 grados</meter>33 grados</p>

Vista del ejemplo en el navegador (Google Chrome)

La etiqueta <meter> acepta 3 atributos mas:

• higth="": se usa para definir un valor que nosotros consideramos ALTO o peligroso, que se sale de lo normal.
• low="": se usa para definir un valor que nosotros consideramos BAJO o peligroso que se sale de lo normal.
• optimum="": se usa para definir un valor que nosotros consideramos OPTIMO o bueno

Ejemplo de subida peligrosa de temperatura

<p>Sevilla:<meter min="0" 
max="50" value="38" high="35" low="5"optimum="28">38 grados</meter>38 grados</p>

Vista del ejemplo en el navegador (Google Chrome)

Conclusiones

Hablar más sobre la etiqueta <meter>, sería alargar esta clase sin necesidad. Se que los que ya sois más avanzados me diréis que esta etiqueta tiene tres clases CSS propias. Pero estudiarlas ahora, sin haber tenido contacto aún con CSS3, sería inútil. Hemos aprendido su sintaxis, sus atributos y hemos visto algunos ejemplos que nos han ayudado a entender mejor su uso. No quiero que se me olvide recomendaros una web con la que os debéis ir empezando a familiarizar, es para comprobar el soporte de ciertas etiquetas en diferentes navegadores, caniuse.com, tambien hay un enlace directo en el . Hoy os dejo más abajo un sencillo ejercicio para que practiquéis y vayáis cogiendo soltura.

Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.

Ejercicio

Convierte este texto en codigo para que sea un titulo y un valor gráfico, "Desgaste de los frenos del coche: 21% de desgaste"

Resultado

No hagas trampas, haz el ejercicio y comentanos si lo hiciste bien o si te a costado resoverlo. Aunque seguro que para ti a sido bastante facil.

<h2>Desgaste de los frenos del coche:</h2>
<p><meter min="0" 
max="100" value="21" optimum="21">21% de desgaste</meter>21% de desgaste</p>

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018