En primer lugar os muestro lo que vamos a conseguir con este pequeño tutorial aquí.

Conseguir este resultado no es difícil y tan sólo hay que tener cuidado con los estilos CSS y los bucles de SPIP. Para empezar tenemos dos partes bien diferenciadas, una de ellas es la parte del inicio del sitio (sommaire.html) donde no hay ninguna pestaña activa y se muestran las distintas secciones a las que se puede acceder dentro del sitio. Una vez que seleccionamos una sección (entramos ya en rubrique.html) vemos como su pestaña se activa y se muestra como la pestaña sobresaliente de un fichero. En esta parte he añadido además una pestaña que nos lleva al inicio del sitio, pero es preferible que éste enlace se sitúe en otro sitio distinto del contenido por cuestiones de usabilidad.

Elementos comunes a ambas partes

Como ya he comentado, para conseguir este efecto de pestañas he utilizado CSS2, por lo que lo primero es definir los estilos que gobernarán la apariencia de pestañas. Para implementar el menú de pestañas utilizaremos una lista desordenada ul. Así definiremos una clase para la lista general y después afinaremos y limitaremos el resto de las características al formato de cada uno de los ítems li. Así el estilo general es:

Donde realmente reside la esencia de las pestañas está en el estilo individual de los ítems. Para que en lugar de mostrarnos la lista de forma vertical lo haga de forma horizontal, utilizaremos el valor inline para el atributo display. Esto elimina el formato de caja de los ítems y los situa como si de texto simple se tratase. Este efecto se puede conseguir también utilizando el formato de bloque flotante, eliminando el display: inline; y usando el valor left para float. No obstante con esta última forma hay problemas con el iexplorer ya que no se consigue una buena alineación de las pestañas con el cuerpo de la supuesta carpeta de debajo de ellas. El resto de argumentos se utilizan para darle el aspecto de separación de los bordes y demás aspectos estéticos.

Una vez definida la clase queremos que nuestras pestañas se nos muestren activas cuando estemos en la sección correspondientes. Para ello definimos un selector ID y más tarde se lo aplicaremos a esta pestaña. En este selector estamos definiendo un borde inferior mayor que el del borde del cuerpo donde se situará nuestro contenido y del mismo color que éste. Con esto conseguimos el efecto de desaparición del borde inferior de la pestaña activa. Nótese que en la parte del sommaire.html no se aplica este selector.

Por último definimos el cuerpo del documento. Lo más destacable de esta clase es que tenemos que situar el margin-top con un valor negativo para que el borde de las pestañas queden justo encima del borde del contenido.

Me gustaría resaltar que los valores de z-index no se aplican en el sitio, y están puestos más bien por seguridad. Ahora veremos cómo se codifica el sitio con los bucles y balizas de SPIP para conseguir nuestros objetivos.

La parte principal del sitio: sommaire.html

Como ya hemos comentado anteriormente, el aspecto de sommaire.html es ligeramente distinto al de las secciones para dar la sensación de que no se está en ninguna sección. Por tanto lo único que nos debe preocupar a la hora de seleccionar las secciones es que las pestañas no sobrepasen el tamaño del cuerpo ya que de lo contrario pierde totalmente la estética. Dentro del cuerpo podemos situar lo que queramos, ya sea texto, imágenes, balizas que nos den resultados de SPIP...

Las secciones: rubrique.html

Realmente lo que puede resultar algo más chocante es el código de las secciones, ya que hay que hacer que SPIP nos dé como resultado la pestaña activa y además no debe moverla de sitio por cuestiones de usabilidad, si no, ¡nuestros visitantes se volverían locos! Así necesitaremos 3 bucles para que nos den:

1. Todas las secciones anteriores a la sección activa.
2. La sección activa actual, a la que además le añadimos el correspondiente selector ID que dé la sensación de que está activa.
3. Las secciones posteriores a nuestra sección activa. Así el código correspondiente será:
   
<ul class="pestanas">
<BOUCLE_secciones-principio(RUBRIQUES){id_rubrique < #ID_RUBRIQUE} {0,5}>
        <li><a href="#URL_RUBRIQUE">[(#TITRE)]</a></li>
</BOUCLE_secciones-principio>

<BOUCLE_secciones-igual(RUBRIQUES){id_rubrique}>
        <li id="activa"><a href="#URL_RUBRIQUE"><img src="huevo.png" height="20" border="0" alt="" align="middle">[(#TITRE)]</a></li>
</BOUCLE_secciones-igual>

<BOUCLE_secciones-final(RUBRIQUES){id_rubrique > #ID_RUBRIQUE}{0,4}>
        <li><a href="#URL_RUBRIQUE">[(#TITRE)]</a></li>
</BOUCLE_secciones-final>
</ul>

<div class="cuerpo">
<BOUCLE_texto(RUBRIQUES) {id_rubrique=#ID_RUBRIQUE}{unique}>
        [(#TEXTE)]
</BOUCLE_texto>
</div>


Como veis no es en absoluto difícil conseguir un sitio con pestañas de SPIP, aunque como todo este diseño tiene sus limitaciones:

Limitaciones del diseño

• Los tamaños deben estar bien definidos y por supuesto deben darse en píxeles para asegurarnos de que no se estropea por los distintos tamaños. Esto es un grave problema de accesibilidad ya que podría hacer que usuarios que necesiten usar un tipo de letra muy grande no puedan ver correctamente los textos. La solución pasa por tomar unos tamaños del cuerpo lo suficientemente grandes. Para el tamaño de las pestañas no se me ocurre una solución que sea compatible con el diseño.
• El número de secciones está limitado por cuestiones de espacio. Este problema realmente no lo es si tenemos planeado un sitio con pocas secciones. Para sitios con muchas secciones siempre se puede reservar este diseño para las subsecciones o ir separando el diseño, primero en pestañas de secciones, después de subsecciones... Aunque no lo he implementado debe de ser sencillo implementar un submenú para las pestañas dentro del cuerpo.

La ventaja principal es la tremenda usabilidad que da al sitio al ser un método de organización muy usado en la vida real por su sencillez. Además nos aporta un diseño diferente que no está muy extendido y puede aportar originalidad a nuestra web.