Diferencias

Muestra las diferencias entre dos versiones de la página.


desarrollo:dokuwiki:plugin-progrecss [2012/05/26 10:53] (actual) – creado - editor externo 127.0.0.1
Línea 1: Línea 1:
 +====== plugin:progrecss ======
 +<note dl>
 +
 +  * **Descarga**: {{:desarrollo:dokuwiki:dw-plugin-progrecss-latest.zip|}}
 +  * Versión ''1.8'' RC, Fecha ''2010-12-08''
 +  * Información: [[doku>plugin:progrecss]]
 +</note>
 +
 +===== 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 =====
 +
 +<code>
 +<progrecss number% ... />
 +<progrecss current/total ... />
 +</code>
 +
 +====Detalles====
 +
 +  * notar que ''progre**c**ss'' es el nombre real del plugin: no hay error ortográfico; la "c" embebida es por la referencia tanto a "progress"((progreso)) 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 [[#Parametros|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 [[phpfn>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>((ya lo quisiera yo, por supuesto...)).  |
 +^ Fracción      | Se ha concretado <progrecss 4/7 /> de las tareas semanales.  |
 +
 +<code dokuwiki>
 +^ 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.  |
 +</code>
 +
 +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((Excepto IE))** (<progrecss 25% style=inline;caption=Compatibilidad; />).  |
 +
 +====Soporte de Wikitexto====
 +
 +**:!: EXPERIMENTAL desde el release 1.4**
 +
 +<progrecss 85% style=default;width=250px;caption=El trabajo está __casi__ listo. ¡Yupi! :D; />
 +<progrecss 32% style=default;width=250px;caption=enviar a [[http://www.web.com/|esta web]]; />
 +<progrecss 30% style=gauge;width=250px;caption=Este trabajo no está //tan// avanzado como el anterior, por lo que es **absolutamente** necesario [[wpes>Dios|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**
 +
 +<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.
 +
 +<code>
 +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.
 +</code>
 +
 +==== Interacción con Objetos ====
 +
 +#lpp__Dfloatl[
 +<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 [[doku>table|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 [[doku>table|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.    <progrecss 100% style=default;width=5em; /> |
 +</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 DokuWiki((http://www.freelists.org/post/dokuwiki/Internationalization-in-plugin-descriptions-via-plugininfotxt)).
 +
 +----
 +
 +{{indexmenu_n>31}}
 +{{tag>informatica dokuwiki plugins css}}
 +
 +