plugin:progrecss

Descarga: dw-plugin-progrecss-latest.zip
Versión 1.8 RC, Fecha 2010-12-08
Información: plugin:progrecss

Resumen

progrecss es mi primer plugin en desarrollo para la plataforma Dokuwiki. Está basado en sugerencias y ejemplos encontrados en el sitio web de David Anaxagoras acerca de cómo obtener barras de progreso utilizando solo CSS. Este plugin introduce esta característica en el mecanismo de Dokuwiki de una forma similar a como lo hace el plugin progressbar de Mike Smith.

Uso

<progrecss number% ... />
<progrecss current/total ... />

Detalles

notar que progrecss es el nombre real del plugin: no hay error ortográfico; la “c” embebida es por la referencia tanto a “progress”¹⁾ como a “CSS”.
number% es un valor en porcentaje seguido del literal “%”. Este parámetro es obligatorio.
current/total son dos números enteros, tal que current ≤ total, separados por una diagonal.
El cierre con /> requiere un espacio que lo anteceda. Esto es obligatorio.
Los parámetros son opcionales y siguen la estructura “param=value;, donde:
- param es el nombre del parámetro como se indica debajo.
- no hay blancos (whitespace) rodeando el signo igual ”=“.
- el cierre con ”;“ es obligatorio.

Configuración

Las siguientes opciones existen dentro del Administrador de Configuración:

`percent_format`	`”%u“`	Formato con el cual se imprime el porcentaje por defecto, como una máscara de sprintf. El símbolo porcentual (%) se añade automáticamente.
`fraction_divisor`	`”/“`	Símbolo divisor de fracciones usado por defecto.

El parámetro percent_format puede especificarse en invocaciones individuales al plugin por medio del parámetro pdisplay.

Parametros

Parámetro	Estructura	Efecto
(porcentaje)	`[0..100]%`	El valor de porcentaje (obligatorio).
(current, total)	números enteros	El porcentaje en tanto-de-cuánto (`current` de `total`) (obligatorio). Nuevo en la versión 1.6.
Caption	`caption=[a-zA-Z0-9\_-]+`	El título de la barra de progreso. Dependiendo del estilo utilizado (“style”), puede o no visualizarse. Se utiliza para crear una ID parcial y casi-única dentro del código XHTML. Por defecto toma el valor vacío.
Style	`style=<stylename>`	Estilo CSS utilizado para ambientar la barra de progreso. Debe existir en alguno de los ficheros CSS válidos (por ejemplo, `userstyle.conf` si existe) y tener la forma `.progrecss_stylename`. Por defecto toma el valor default.
Width	`width=<widthvalue>`	El ancho, debe ser cualquier valor CSS de ancho válido, expresado en sus unidades (pixels, ems, etc…). Dependiendo del estilo utilizado (“style”) esto puede afectar el posicionamiento de la barra de progreso.
PDisplay	`pdisplay=format`	Un formato para imprimir el porcentaje. El valor por defecto es usar la máscara de la configuración percent_format (más abajo). Nuevo en la versión 1.8.
Order		Reserved for future use
Marker		Reserved for future use

Detalles de Uso

Demo

Ejemplos de sintaxis:

Porcentaje	Se ha concretado un <progrecss 25% /> del plan de <all-lucky-sevens>Dominación Mundial</all-lucky-sevens>²⁾.
Fracción	Se ha concretado <progrecss 4/7 /> de las tareas semanales.

^ Porcentaje    | Se ha concretado un <progrecss 25% /> del plan de  Dominación Mundial.  |
^ Fracción      | Se ha concretado <progrecss 4/7 /> de las tareas semanales.  |

Ejemplos básicos de las barras de progreso generadas por el plugin:

Estilo “default”	<progrecss 75% style=default;caption=Estilo-default;width=300px; />
…sin título	<progrecss 75% style=default;width=300px; />
…dos dígitos	<progrecss 75% style=default;caption=Estilo.default;pdisplay=%02u;width=300px; />
…extra ancho	<progrecss 75% style=default;caption=Estilo.default;width=350px; />
Estilo “gauge”	<progrecss 50% style=gauge;caption=Estilo-gauge;width=300px; />
…sin título	<progrecss 50% style=gauge;width=300px; />
…angosto	<progrecss 50% style=gauge;caption=Estilo-gauge;width=200px; />
Estilo “inline”	<progrecss 25% style=inline;caption=Estilo-inline;width=300px; />
…2 de 7	<progrecss 2/7 style=inline;caption=Estilo-inline;width=300px; />

Dentro de una Tabla

Tarea	Progreso	Descripción
Conquistar el Mundo	<progrecss 5% />	Conquistar el mundo es una tarea dificil, y es necesario empezar en casa, por lo que creo que me tomará mucho tiempo.
Maratón de “24”	<progrecss 5% />	Siempre he querido hacer una maratón (pública) de “24”, porque verla solo se está volviendo aburrido.
Plugin	<progrecss 20% />	Completar la siguiente versión de este plugin: ya estoy trabajando en algunas mejoras, específicamente compatibilidad con otros navegadores³⁾ (<progrecss 25% style=inline;caption=Compatibilidad; />).

Soporte de Wikitexto

EXPERIMENTAL desde el release 1.4

Expresión de Porcentaje

EXERIMENTAL desde el release 1.8 RC

<progrecss 27% style=default; /> – Formato porcentual acorde a las opciones de configuración. <progrecss 27% style=default;pdisplay=%2x /> – Formato porcentual hexadecimal. <progrecss 27% style=default;pdisplay=%03u /> – Formato porcentual de tres dígitos (para mejor ordenación).

Estilos

default

Ejemplo del posicionamiento del estilo default.

Cualquier navegador con soporte de CSS 2 debiera mostrar la siguiente barra de progreso sin mayores problemas: <progrecss 22% style=default;caption=Avance;width=25em; /> Esta barra de progreso se posiciona como un elemento de un párrafo nuevo, de modo que escribir wikitexto delante o detrás del mismo resulta en un quiebre de párrafo.

Cualquier navegador con soporte de **CSS** 2 debiera mostrar la siguiente barra de progreso sin mayores problemas: <progrecss 22% style=default;caption=Avance;width=25em; /> Esta barra de progreso se posiciona como un elemento de un párrafo nuevo, de modo que escribir wikitexto delante o detrás del mismo resulta en un quiebre de párrafo.

Interacción con Objetos

#lppDfloatl[ <progrecss 22% style=default;caption=Avance #2;width=15em; /> ]# Observar la diferencia cuando se utiliza la flotación del elemento (float: left;...) y el efectoque esto tiene en el texto circundante. En este caso, si el soporte de CSS del navegador es adecuado, el marcador punteado de la parte inferior no deberá interferir con la alineación del texto; sin embargo queda probar si el tamaño del párrafo y del objeto no causarán un interlape cuando el largo del caption es mayor que el de la barra. <code> <progrecss 22% style=default;caption=Avance #2;width=15em; /> Observar la diferencia cuando se utiliza la flotación del elemento (float: left;…) y el efectoque esto tiene en el texto circundante. En este caso, si el soporte de CSS del navegador es adecuado, el marcador punteado de la parte inferior no deberá interferir con la alineación del texto; sin embargo queda probar si el tamaño del párrafo y del objeto no causarán un interlape cuando el largo del caption es mayor que el de la barra. </code> ^ Una cabecera de tabla | Una columna de tabla | | Progreso en la columna de la cabecera: <progrecss 22% style=default;caption=Avance #3 en una tabla;width=20em; /> | Observar el efecto que se produce en la alineación de objetos cuando una barra de progreso se inserta en una celda en una tabla. En este caso la tabla debe adecuarse al contenido interno. | | Algo de información nada relevante. | <progrecss 100% style=default;width=5em; /> | <code> ^ Una cabecera de tabla | Una columna de tabla | | Progreso en la columna de la cabecera__: <progrecss 22% style=default;caption=Avance #3 en una tabla;width=20em; /> | Observar el efecto que se produce en la alineación de objetos cuando una barra de progreso se inserta en una celda en una tabla. En este caso la tabla debe adecuarse al contenido interno. Observar también el enlace en el título. |

Algo de información nada relevante.

</code>

TOBEDONE — más ejemplos.

Detalles Técnicos

Changelog

Soporte de Idioma

Desde la version 1.8 RC, este plugin incorpora cadenas localizadas para la descripción de las opciones de configuración en los siguientes idiomas:

es Español por Luis Machuca Bezzaza (el Autor).
en Inglés por Luis Machuca Bezzaza (el Autor).
de Alemán por Gunnar Gorges.
ru Ruso por Ksenia Glushak.

El plugin incorporará a futuro descripciones y ajustes localizados en el Panel de Configuración de plugins como se está discutiendo en el mailinglist de DokuWiki⁴⁾.

indexmenu_n_31

informatica, dokuwiki, plugins, css

¹⁾

progreso

²⁾

ya lo quisiera yo, por supuesto…

³⁾

Excepto IE

⁴⁾

http://www.freelists.org/post/dokuwiki/Internationalization-in-plugin-descriptions-via-plugininfotxt