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.
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
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.
Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
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.
Que interesante.
Algun consejo de como hacer que el valor se incremente desde java script?,
Gracias!
esta buena la información solo falta la aplicación y mas etiquetas.
pero en general todo esta de maravilla.
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
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!! 😀