Manual de utilización del CSS

Acabado el manual de utilización para la hoja de estilos de la wiki y colgado en la wiki del DFWikiteam.

Manual utilización CSS

Cargar CSS

Hasta la fecha, hemos unificado los estilos de la wiki en el fichero nwiki.css, situado en la carpeta /mod/wiki de la wiki. Esta hoja de estilos esta ampliada con los diferentes formatos utilizados en el código de la nwiki.

Para que moodle cargue la hoja de estilos de la nwiki, es necesario cambiar el archivo styles.php situado dentro de la carpeta de instalación de moodle, en …\moodle\theme\standard\ por el descargado en el paquete de instalación de la nwiki.

Este nuevo archivo styles.php realiza las mismas funciones que el de moodle, pero además añade una función para cargar la hoja de estilos de la nwiki.

Puesto que el fichero modificado se almacena en una carpeta de la wiki siguiendo la misma estructura que moodle, al descomprimir la wiki se nos reemplazará el archivo style.php.

Trabajo CSS

Seguimos reprogramando el código de la nwiki, verificando que cumple el XHTML Strict y utilizando la capa de presentación (Weblib.php)

Además, nos han encargado una nueva tarea, modificar las hojas de estilo que utiliza la nwiki (nwiki.css y wiki_tree.css) unificándolas en un único fichero, ampliarlas y modificar el código de Moodle para que cargue el fichero de estilo de la wiki.

Manual weblib.php

Este manual es una ayuda para que los desarrolladores del DFWikiTeam puedan utilizar el weblib.php. Este fichero complementa al weblib de moodle y actúa como capa de presentación. Contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos.

Puntos importantes para la utilización de weblib.php:

• CUMPLE XHTML STRICT

Todas las funciones contienen únicamente aquellos atributos de los tags que se utilizan para el desarrollo de la nwiki y siguen el XHTML Strict. De este modo conseguimos que las etiquetas creadas con la utilización de este fichero cumplan el estándar.

La mayoría de las propiedades de estilo que no cumplan el estándar se pueden definir en el class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.

Ejemplo:
$propiedades->style = 'width:1%;white-space:nowrap';
wiki_change_column($propiedades);
sería
</td> <td style="width:1%;white-space:nowrap">

• CREACIÓN DE TAGS

Para la creación de tags, todas las funciones siguen la misma estructura. En estas se abre y se cierra la etiqueta html, añadiendo las propiedades necesarias (Exceptuando algunas que se detallaran más adelante)

Todas las funciones siguen también un mismo patrón para el orden de sus parámetros:

• PARÁMETRO $INFO
  

Si la etiqueta tiene información entre la apertura y cierre de ésta, la función tendrá un primer parámetro ($info), que contendrá dicha información. A excepción de las tablas y listas, que se explicarán más adelante.

• PARÁMETRO $PROPERT
  

El parámetro $propert es un objeto que contiene las diferentes propiedades asociadas a las etiquetas creadas.

Ejemplo de asignación de propiedades a una etiqueta:
$propert->src="image.gif";
$propert->alt="imagen";
wiki_img($propert);
Sería:
<img src="image.gif" alt="imagen">

Los eventos se ubicarán también dentro del objeto. Éstos se escribirán como un string y contendrán los diferentes tipos de eventos y su función. Por ejemplo: $propert->events = 'onfocus="this.select()" onchange="updateMembers(this)" '

• PARÁMETRO $RETURN

Todas las funciones tienen como último parámetro la variable $return, inicializada por defecto a false.

En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.

• EXCEPCIONES

La creación de algunos tags no siguen las normas explicadas anteriormente.

Estas excepciones son:

• Creación de Form y Div

Debido a la longitud del parámetro $info en algunos ejemplos de FORM y DIV, hemos visto conveniente realizar una segunda función, que a diferencia de la primera, no realiza el cierre de la etiqueta, y por lo tanto, no recibe como parámetro $info. Añadiendo además sus respectivas funciones de cierre, independientes de las anteriores.

Con esto conseguimos más claridad en el código y un manejo más sencillo de las funciones.

• Creación de tablas

Para la creación de tablas tenemos varias funciones:

wiki_table_start($propert, $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. El atributo $propert contiene los atributos de la tabla y los de la primera columna creada (los atributos de la columna estarán identificados por un "td" final, por ejemplo $propert->aligntd)

wiki_table_end($return=false)
Cierra una columna, fila y tabla.

wiki_change_column($propert, $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.

wiki_change_row($propert, $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.

Ejemplo:
$propert->border = '0';
$propert->width = '100%';
$propert->aligntd = 'right';
wiki_table_start($propert);
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>

• Creación de listas

Para crear las listas tenemos varias funciones que siguen la misma mecánica que las utilizadas para la creación de tablas.

wiki_start_ul($propert, $return=false)
Inicia una lista no ordenada y el primer ítem

wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada

wiki_change_li($propert, $return=false)
Cambio de ítem

Para las listas ordenadas las funciones son iguales.

Nueva modificación Weblib.php

Después de varios días trabajando con la capa de presentación, y aconsejados por algunos miembros del DFWikiteam, modificamos el weblib.php.

Las funciones creadoras de los tags, pasarán a tener como mucho tres parámetros de entrada. Para ello utilizaremos un objeto que contenga todas las propiedades de los tags, en vez de tener un parámetro de entrada para cada atributo. De este modo conseguimos que la capa de presentación sea más sencilla, tanto a la hora de utilizarla, como a la hora de modificarla.

Una de las grandes ventajas de este cambio, es que si necesitamos una nueva propiedad para un tag, únicamente tendríamos que modificar la función, añadiendole al objeto la nueva propiedad. Pero este cambio no supondría modificar todas las llamadas que ya habíamos realizado a esta función, ya que los parámetros seguirían siendo los mismos.

En breve colgaremos un nuevo manual para la utilización del nuevo weblib.php

Cumple XHTML Strict

Por fin!!!

Después de semanas de trabajo, modificando el código de los archivos principales de la nwiki, hemos conseguido que cumpla XHTML Strict.

De aquí a final de proyecto, nuestro objetivo es modificar el código de la nwiki, que todos los archivos utilicen el weblib.php, es decir, la nueva capa de presentación. Además, tenemos que ampliar el nwiki.css, creando nuevos estilos propios utilizados para la creación del código html.

Manual Weblib.php

Este manual es una ayuda para que los desarrolladores del DFWikiTeam puedan utilizar el weblib.php. Este fichero complementa al weblib de moodle y actúa como capa de presentación. Contiene una serie de funciones para crear las diferentes etiquetas de HTML que utilizamos.

Puntos importantes para la utilización de weblib.php:

• CUMPLE XHTML STRICT

Todas las funciones tienen como parámetros únicamente aquellos atributos de los tags que se utilizan para el desarrollo de la nwiki y siguen el XHTML Strict. De este modo conseguimos que las etiquetas creadas con la utilización de este fichero cumplan el estándar.

La mayoría de atributos que no cumplan el estándar se pueden definir en el atributo class o style. Estos atributos están contenidos en todas las etiquetas. Su función es la de asignar al tag un formato o estilo, cumpliendo las normas de XHTML Strict. Este formato puede estar definido en una hoja de estilo (css), y por lo tanto utilizaríamos el atributo class para asignarle la clase ya definida, o mediante el style, en caso de que no este declarado.

Ejemplo:
wiki_change_column('', 'top', '', '', '', 'width:1%;white-space:nowrap');
sería
</td><td valign="top" style="width:1%;white-space:nowrap">

• PARÁMETRO RETURN

Todas las funciones tienen como último parámetro la variable $return, inicializada por defecto a false.

En caso de ser false, la función escribiría el tag directamente. Y si lo cambiásemos a true, la función retornaría una variable con la etiqueta.

• CREACIÓN DE TAGS

Todas las funciones siguen un mismo patrón para el orden de sus parámetros.

Si la etiqueta tiene información entre la apertura y cierre de ésta, la función tendrá un primer parámetro ($info), que contendrá dicha información. A excepción de las tablas y listas, que se explicarán más adenate.

Los parámetros estilo y clase siempre se ubican en la penúltima y antepenúlima posición. A excepción de la etiqueta
que no tiene formato.

Como hemos dicho anteriormente, la variable $return está ubicada como último parámetro.

El resto de parámetros dependerá de los diferentes atributos que puedan tener las etiquetas.

• Creación de tablas

Para la creación de tablas tenemos varias funciones:

wiki_table_start($border=0, $width='', $padding='', $spacing='', $class='', $style='',
$aligntd='', $valigntd='', $colspantd='', $rowspantd='', $classtd='', $styletd='', $return=false)
Inicia tabla, fila y columna, con las respectivas propiedades. Los seis primeros parámetros son atributos de la tabla y los seis siguientes de la primera columna.

wiki_table_end($return=false)
Cierra una columna, fila y tabla.

wiki_change_column($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna e inicia una nueva con las propiedades correspondientes.

wiki_change_row($align='', $valign='', $colspan='', $rowspan='', $class='', $style='', $return=false)
Cierra columna y fila e inicia una nueva fila y una columna con las propiedades correspondientes.

Ejemplo:
wiki_table_start('0','100%','','','','','right');
echo '1';
wiki_change_row();
echo '2';
wiki_table_end();
sería
<table width="100%" border="0">
<tr><td align="right">
1
</td></tr><tr><td>
2
</td></tr>
</table>

• Creación de listas

Para crear las listas tenemos varias funciones que siguen la misma mecánica que las utilizadas para la creación de tablas.

wiki_start_ul($class='', $style='', $classli='', $styleli='', $return=false)
Inicia una lista no ordenada y el primer ítem

wiki_end_ul($return=false)
Cierra el último ítem y la lista no ordenada

wiki_change_li($class='', $style='', $return=false)
Cambio de ítem

Para las listas ordenadas las funciones son iguales.