LuchoWiki

Cosas que debería hacer más a menudo

User Tools

Site Tools


desarrollo:dokuwiki:plugin-progrecss

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
desarrollo:dokuwiki:plugin-progrecss [20101207 14:58]
manager
desarrollo:dokuwiki:plugin-progrecss [20120526 10:53] (current)
Line 3: Line 3:
  
   * **Descarga**:​ {{:​desarrollo:​dokuwiki:​dw-plugin-progrecss-latest.zip|}}   * **Descarga**:​ {{:​desarrollo:​dokuwiki:​dw-plugin-progrecss-latest.zip|}}
-  * Versión ''​1.6'',​ Fecha ''​2010-02-08''​+  * Versión ''​1.8'' ​RC, Fecha ''​2010-12-08''​
   * Información:​ [[doku>​plugin:​progrecss]]   * Información:​ [[doku>​plugin:​progrecss]]
 </​note>​ </​note>​
Line 9: Line 9:
 ===== Resumen ===== ===== Resumen =====
  
-**progrecss** ​(//barras de progreso en CSS//​) ​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.+**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.
  
-===== Sintaxis ​=====+===== Uso =====
  
 <​code>​ <​code>​
Line 22: Line 22:
   * 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"​.   * 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__.   * ''​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 ​o //slash//.+  * ''​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__.   * El cierre con ''/>''​ requiere un espacio que lo anteceda. Esto es __obligatorio__.
   * Los parámetros son __opcionales__ y siguen la estructura "''​param=value;'',​ donde:   * Los parámetros son __opcionales__ y siguen la estructura "''​param=value;'',​ donde:
Line 28: Line 28:
     * no hay blancos (//​whitespace//​) rodeando el signo igual "​="​.     * no hay blancos (//​whitespace//​) rodeando el signo igual "​="​.
     * el cierre con ";"​ es __obligatorio__.     * 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 ==== ==== Parametros ====
Line 33: Line 44:
 ^ __Parámetro__ ​   ^  Estructura ​  ^ Efecto ^  ^ __Parámetro__ ​   ^  Estructura ​  ^ Efecto ^ 
 ^ (porcentaje) ​     | ''​[0..100]%''​ | El valor de porcentaje (__obligatorio__). ​ | ^ (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.**|+^ (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//​. ​ | | 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//​. ​ | | 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. | | 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__  | | Order             ​| ​     | __Reserved for future use__  |
-| NumberDisplay ​    ​| ​     | __Reserved for future use__  | 
 | Marker ​           |      | __Reserved for future use__  | | Marker ​           |      | __Reserved for future use__  |
  
-===== Demo =====+===== Detalles de Uso ===== 
 + 
 +==== Demo ====
  
 Ejemplos de sintaxis: Ejemplos de sintaxis:
Line 56: Line 69:
  
 ^ Estilo "​default" ​ | <​progrecss 75% style=default;​caption=Estilo-default;​width=300px;​ /> | ^ 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;​ /> | ^ 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;​ /> | ^ Estilo "​inline" ​  | <​progrecss 25% style=inline;​caption=Estilo-inline;​width=300px;​ /> |
 +^ ...2 de 7         | <​progrecss 2/7 style=inline;​caption=Estilo-inline;​width=300px;​ /> |
  
-Ejemplos de barras de progreso dentro ​de una __tabla__:+==== Dentro ​de una Tabla ====
  
 ^ Tarea   ^ Progreso ​  ^ Descripción ​   ^ ^ Tarea   ^ Progreso ​  ^ Descripción ​   ^
Line 65: Line 84:
 | Maratón de "​24" ​ | <​progrecss 5% /> | Siempre he querido hacer una maratón (pública) de "​24",​ porque verla solo se está volviendo aburrido. ​ | | 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;​ />​). ​ | | 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;​ />​). ​ |
- 
-Algunos ejemplos de los actuales problemas de alineación que tiene el plugin: 
  
 ====Soporte de Wikitexto==== ====Soporte de Wikitexto====
Line 75: Line 92:
 <​progrecss 32% style=default;​width=250px;​caption=enviar a [[http://​www.web.com/​|esta web]]; /> <​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...; /> <​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==== ====Estilos====
Line 86: Line 112:
 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.
 </​code>​ </​code>​
- 
-=== Otros Estilos === 
- 
-TOBEDONE 
  
 ==== Interacción con Objetos ==== ==== Interacción con Objetos ====
Line 115: Line 137:
  
 TOBEDONE --- más ejemplos. 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}} {{indexmenu_n>​31}}
desarrollo/dokuwiki/plugin-progrecss.txt · Last modified: 20120526 10:53 (external edit)