Plantilla:Barra progreso/Uso

Descripción

Esta plantilla permite crear una barra de progreso altamente personalizable en cualquier lugar de la wiki. Úsala del modo siguiente:

{{barra progreso
| param1 = valor1
| param2 = valor2
| etc.
}}

Parámetros

A continuación hay una lista de los parámetros que acepta la plantilla y como afectan a la barra.

Hay dos métodos para indicar el porcentaje (el valor) que representa la barra. El primero usa el parámetro porcentaje, mientras que el segundo usa los parámetros min, max y actual. Sea cual sea el método que uses, puedes usar el parámetro texto para mostrar cualquier texto en la barra, o usar el parámetro texto2 que escribirá un texto después del número que represente el porcentaje indicado por la barra. Mira los ejemplos que hay a continuación.

Parámetros para valores fijos

porcentaje

Indica el porcentaje representado por la barra de progresión. Se necesita si usas el primer método de cálculo (ver parámetros), si usas el segundo método de cálculo no necesitas usarlo.

• ej: 74.2%
• valor por defecto: 0%

Ejemplo

{{Barra progreso|porcentaje=50%}}

{{Barra progreso|porcentaje=25%}}

Parámetros para valores variables

min

Indica el valor mínimo del rango representado por la barra.

• ej: 10
• valor por defecto: 0
• nota: Este parámetro, junto con los dos siguientes son los que se usan para el segundo método de cálculo (ver parámetros). Si usas estos tres no necesitas usar porcentaje y viceversa.

max

Indica el valor máximo del rango representado por la barra.

• ej: 15
• valor por defecto: 100
• nota: Este parámetro, junto con min y actual son los que se usan para el segundo método de cálculo (ver parámetros). Si usas estos tres no necesitas usar porcentaje y viceversa.

actual

Indica el valor de la posición en el rango representado por la barra. Éste tiene que estar entre los valores min y max.

• ej: 13
• valor por defecto: 0
• nota: Este parámetro, junto con los dos anteriores son los que se usan para el segundo método de cálculo (ver parámetros). Si usas estos tres no necesitas usar porcentaje y viceversa.

Ejemplo

{{Barra progreso|min=5|max=15|actual=10}}

{{Barra progreso|min=0|max=100|actual=10}}

{{Barra progreso|min=0|max=100|actual=25}}

Parámetros de texto

texto

Indica el texto mostrado en la barra. Si no se especifica, el texto se determina automáticamente. Ver explicación más adelante.

• ej: La gente me conoce
• valor por defecto: 0%

texto2

Indica el texto a mostrar al lado del porcentaje de la barra.

• ej: explorado
• valor por defecto: ninguno
• nota: si se usa el parámetro texto2, el parámetro texto se ignora.

la diferencia entre texto y texto2 es que texto es exactamente lo que se ve en la barra, mientras que texto 2 se ve al lado del porcentaje.

título

Indica el texto mostrado en la caja de texto emergente. Si no se especifica, el texto se determina automáticamente. Ver explicación más adelante.

• ej: La gente me conoce
• valor por defecto: 0%

ejemplos

{{Barra progreso|porcentaje=50%|texto=estoy a la mitad}}

{{Barra progreso|porcentaje=50%|texto2=del total}}

{{Barra progreso|porcentaje=50%|titulo=estoy a la mitad}}

(poner el cursor sobre la barra para ver el efecto)

Parámetros de tipo de valor

modo

Indica el si valor mostrado en la barra y en la caja de texto emergente es de tipo porcentaje ó valor actual. Solo se indica cuando se usa el segundo método.

• especifica modo=valor para hacer que el texto muestre el valor del parámetro actual en lugar del porcentaje calculado
• para obtener el método por defecto (porcentaje), no añadir este campo

ejemplo

{{Barra progreso|min=5|max=15|actual=10|texto2=del total}}

{{Barra progreso|min=5|max=15|actual=10|modo=valor|texto2=puntos}}

Parámetros de formato de la barra

color-barra

Color usado como fondo de la barra de progresión.

• ej: red o #328A9C (rojo)
• valores: cualquiera escrito en inglés ó su equivalente hexadecimal (de #000000 a #FFFFFF) Para más info clica aquí
• valor por defecto: #AAAAFF (gris)

color-fondo

Color usado como fondo del marco que contiene la barra.

• ej: red o #328A9C (rojo)
• valores: cualquiera escrito en inglés ó su equivalente hexadecimal (de #000000 a #FFFFFF) Para más info clica aquí
• valor por defecto: white (blanco)

borde

Estilo del borde del marco que contiene la barra.

• ej: 2px dotted red (punteado rojo de 2 píxeles)
• formato: <tamaño> <estilo> <color>
• valores:
  • tamaño: cualquier número positivo entero ó decimal (con el punto como separador de decimales) indicado en %/px/pt/mm/em
  • estilo: dotted (línea punteada) ó solid (línea contínua)
  • color: cualquiera escrito en inglés ó su equivalente hexadecimal (de #000000 a #FFFFFF) Para más info clica aquí
• valor por defecto: 1px solid black (línea negra de 1 pixel)

margen

Indica la distancia entre el marco que contiene la barra y el texto que lo rodea.

• ej: 5px
• valores: cualquier número positivo entero ó decimal (con el punto como separador de decimales) indicado en %/px/pt/mm/em
• valor por defecto: 1px

padding

Indica la distancia entre la barra y el borde del marco que la contiene.

• ej: 0
• valores: cualquier número positivo entero ó decimal (con el punto como separador de decimales) indicado en %/px/pt/mm/em
• valor por defecto: 1px

ancho

Indica el ancho del marco que contiene la barra.

• ej: 15em
• valores: cualquier número positivo entero ó decimal (con el punto como separador de decimales) indicado en %/px/pt/mm/em
• valor por defecto: 0% (del ancho de pantalla)

ejemplos

{{Barra progreso|porcentaje=50%|color-barra=#DDFFFF}}

{{Barra progreso|porcentaje=50%|color-fondo=#DDFFFF}}

{{Barra progreso|porcentaje=50%|borde=dotted 5px red}}

{{Barra progreso|porcentaje=50%|ancho=50%}}

Parámetros de formato de texto

color-texto

Color del texto mostrado en la barra.

• valores: cualquiera escrito en inglés ó su equivalente hexadecimal (de #000000 a #FFFFFF) Para más info clica aquí
• valor por defecto: black (negro)

tamaño-texto

Tamaño del texto mostrado en la barra.

• valores: cualquier número positivo entero ó decimal (con el punto como separador de decimales) indicado en pt/px/mm/em
• valor por defecto: small (pequeño)

grosor-texto

Grosor del texto mostrado en la barra.

• valores posibes: light/regular para texto normal y bold para la negrita
• valor por defecto: bold (negrita)

Ejemplos

{{Barra progreso|porcentaje=50%|texto=esto es la mitad|color-texto= #0000FF}}

{{Barra progreso|porcentaje=50%|texto=esto es la mitad|tamaño-texto= large}}

{{Barra progreso|porcentaje=50%|texto=esto es la mitad|grosor-texto= light}}

Métodos de cálculo

Hay dos métodos que puedes usar para mostrar la progresión en la barra. TEl primer método consiste simplemente en especificar el parámetro porcentaje. Escribes el porcentaje que quieres que muestre la barra, sencillamente. El segundo método se usa si quieres que la barra muestre la progresión entre dos valores dados. Tuienes que dar los parámetros min, max y actual y el porcentaje se calcula con la fórmula siguiente: ((actual - min) / (max - min)) * 100. Si usas los dos métodos, el primero tiene preferencia. En lso ejemplos del final puedes ver como usar los dos métodos.

Como se muestra el texto en la barra y en la caja de texto emergente

La caja de texto emergente(el texto que sale al poner el cursor sobre la barra) y la barra en si son los dos lugares donde se muestra el texto. Cada una tiene su "parámetro maestro", texto2 para la caja y texto para la barra. Si le das valor a uno de estos parámetros el texto aparecerá en el área correspondiente. Si dejas en blanco uno de los dos parámetros, el texto que se muestra se determina automáticamente. Será el porcentaje representado por la barra (independientemente del método de cálculo usado) seguido por el contenido de texto2 (si ha sido especificado). De todos modos, si has usado el segundo método, puedes obligar a que el texto muestre el valor de actual en lugar del porcentaje añadiendo modo=valor al invocar la plantilla.

Ejemplos

Barra progreso simple, usando el primer método:

{{Barra progreso
| porcentaje = 52.4%
| texto2 = explorado
}}

Barra progreso con formato, usando el segundo método:

{{Barra progreso
| min = 10
| max = 15
| actual = 13
| modo = valor
| texto2 = Títulos al máximo
| texto = [[El auténtico amo|La gente me conoce]] (2)
| ancho = 15em
| borde = 1px dotted black
| color-barra = #000000
| tamaño-texto = 8pt
}}

A few combinations of both calculation methods and the texto, texto2 and título parameters:

{{Barra progreso
| min = 10
| max = 15
| actual = 13
| texto2 = Títulos al máximo
| título = La gente me conoce (2)
| ancho = 15em
| tamaño-texto = 8pt
}}

{{Barra progreso
| min = 10
| max = 15
| actual = 13
| texto2 = títulos máximos
| texto = La gente me conoce (2)
| ancho = 15em
| tamaño-texto = 8pt
}}

{{Barra progreso
| min = 10
| max = 15
| actual = 13
| modo = valor
| texto2 = títulos máximos
| título = La gente me conoce (2)
| ancho = 15em
| tamaño-texto = 8pt
}}

{{Barra progreso
| min = 10
| max = 15
| actual = 13
| modo = valor
| texto2 = títulos máximos
| texto = La gente me conoce (2)
| ancho = 15em
| tamaño-texto = 8pt
}}

{{Barra progreso
| porcentaje = 14.7%
| texto2 = explorado
| texto = exploración
| margen = 15em
| tamaño-texto = 8pt
}}

{{Barra progreso
| porcentaje = 14.7%
| texto = explorado
| título = exploración
| ancho = 15em
| tamaño-texto = 8pt
}}

Notas

• No pongas los mismos valores en color-barra y color-fondo o no se verá nada.
• Si quieres más información sobre los parámetros válidos para cada parámetro, consulta Documentación sobre CSS en W3C.
• Desgraciadamente, el atributo url de css attribute no se puede usar en mediawiki, de modo que no puedes poner color-fondo=url(dirección/de/imagen)