LuchoWiki

Cosas que debería hacer más a menudo

User Tools

Site Tools


desarrollo:dokuwiki:plugin-progrecss


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”1) 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 25%   del plan de <all-lucky-sevens>Dominación Mundial</all-lucky-sevens>2).
Fracción Se ha concretado 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” 75%   Estilo-default
…sin título 75%  
…dos dígitos 75%   Estilo.default
…extra ancho 75%   Estilo.default
Estilo “gauge” 50%   Estilo-gauge
…sin título 50%  
…angosto 50%   Estilo-gauge
Estilo “inline” 25%   Estilo-inline
…2 de 7 2:7   Estilo-inline

Dentro de una Tabla

Tarea Progreso Descripción
Conquistar el Mundo 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” 5%   Siempre he querido hacer una maratón (pública) de “24”, porque verla solo se está volviendo aburrido.
Plugin 20%   Completar la siguiente versión de este plugin: ya estoy trabajando en algunas mejoras, específicamente compatibilidad con otros navegadores3) ( 25%   Compatibilidad ).

Soporte de Wikitexto

:!: EXPERIMENTAL desde el release 1.4

85%   El trabajo está casi listo. ¡Yupi! :D 32%   enviar a esta web 30%   Este trabajo no está tan avanzado como el anterior, por lo que es absolutamente necesario acudir a la divinidad de turno para que haga un poco de magia en PHP.
Otra alternativa sería, simplemente, cruzarse de brazos…

Expresión de Porcentaje

:!: EXERIMENTAL desde el release 1.8 RC

27%   – Formato porcentual acorde a las opciones de configuración. 1b %   – Formato porcentual hexadecimal. 027 %   – 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: 22%   Avance 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[ 22%   Avance #2 ]# 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> 22%   Avance #2 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: 22%   Avance #3 en una tabla | 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. | 100%   | <code> ^ Una cabecera de tabla | Una columna de tabla | | Progreso en la columna de la cabecera__: 22%   Avance #3 en una tabla | 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. 100%  

</code>

TOBEDONE — más ejemplos.


Detalles Técnicos

Changelog

<source ryan.gulix.cl/dw/lib/plugins/progrecss/ChangeLog ChangeLog|Changelog de progrecss>

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 DokuWiki4).


desarrollo/dokuwiki/plugin-progrecss.txt · Last modified: 20120526 10:53 (external edit)