htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Progress y Meter, elementos nuevos para Web Apps en HTML5

Progress y Meter, elementos nuevos para Web Apps en HTML5

Si estás pensando en crear una aplicación web en HTML5, deberías saber que existen dos nuevos elementos que te resultaran muy interesantes: progress y meter.

El elemento progress

Este elemento puede ser usado (en conjunto con Javascript) para mostrar el progreso de una tarea o de un proceso que este ocurriendo en la página web, como por ejemplo un archivo o recurso que se está subiendo o descargando. Su estructura es la siguiente:

1
2
3
    <progress value="60" max="100">
             <span id="descargando">60</span>%
    </progress>

Como podrán ver en el ejemplo, progress acepta 2 atributos: value y max, los cuales se explican por si solos. Este elemento (al igual que otros en HTML y HTML5 como el canvas) permite ingresar contenido alternativo dentro de sí, el cual será interpretado por los navegadores que todavía no soporten este nuevo elemento.

El elemento progress no es el adecuado para representar un medidor o indicador (por ejemplo un conteo de votos), para representar un medidor, la etiqueta correcta es meter.

Así se ve el elemento progress en la última versión de Chrome.

Así se ve el elemento progress en la última versión de Chrome.

La etiqueta meter

Como mencionabamos anteriormente, la función de la nueva etiqueta meter de la especificación HTML5 es la de indicar una medida escalar dentro de un rango conocido, o un valor fraccional. Es muy importante que quede claro que meter es usado para representar un rango, o sea que no sería correcto usarlo para mostrar nada más que un simple número, a no ser que ese número pueda ser acotado por un mínimo y un máximo.

Su sintáxis es la siguiente:

1
2
3
    <meter min="0" max="120" value="40">
            <span>1/3</span>
    </meter>

Aquí también tenemos la posibilidad de usar contenido alternativo para aquellos navegadores que todavía no soportan dicho elemento.

Meter en Chrome

Meter en Chrome

Soporte en navegadores

Como siempre, cualquiera de los dos (como la gran mayoría de funciones de HTML5) funciona perfectamente en las últimas versiones tanto de Webkit como de Opera (de escritorio y móvil). Firefox solo soporta el elemento progress recién en su versión 6, aunque sigue sin interpretar correctamente a meter. IE9 no soporta ninguno de los dos elementos ni tampoco se sabe si su décima versión lo hará.

Otro punto a notar es que ambos elementos son modificables en tamaño (tanto ancho como alto) mediante CSS.

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0
Share on facebook
Facebook
0
Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

5 comentarios para “Progress y Meter, elementos nuevos para Web Apps en HTML5”

  1. Muy buen articulo me parece de gran interes, otra cosa es que en todas las web que hablan de html5, en casi ninguna se toman el tiempo para hablar acerca de estos dos elementos que son muy interesantes, mas que todo cuando se trata de crear interfaces de usuario.

  2. Juegoshtml5 dice:

    Que interesante.
    Algun consejo de como hacer que el valor se incremente desde java script?,

    Gracias!

  3. padrote dice:

    esta buena la información solo falta la aplicación y mas etiquetas.

    pero en general todo esta de maravilla.

  4. mavmix dice:

    Buenas, alguien sabria decirme como meter texto DENTRO del elemento ? por ejemplo, si quiero un meter representando el 50%, que aparezca el texto dentro de la grafica: «50%», sin tener que usar title para que visualice el texto con mouseover…no se si me explico

    Gracias

  5. ant dice:

    Hola,

    ¿cuáles suelen ser los motivos por los que un navegador tarde o rechace soportar un elemento o propiedad html5?

    ¿Conocéis algún post, blog o slides públicas donde se cuente por encima esto?

    Muchas gracias y magnífico blog!! 😀

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)