Esqueletos mas nuevos? para SPIP 2.0

Hola, he bajado los de colewebs pero no funcionan en el SIP 2.0?
Hay otros que puedan recomendarme?
Basicamente necesito una estructara con 3 columnas, luego se cambiara el diseño y los colores pero eso, 3 columnas.

gracias

Gisela

Hola Gisela.

Dentro de la poquita documentación que hay sobre spip 2.0 (que flojo andamos che! el francés nos sacó como 50 artículos de diferencia! --en gran parte por la reestructuración de la docu que hubo–) hay un artículo que describe someramente las novedades.

http://www.spip.net/es_article3839.html

En la sección « SPIP y el diseño web » dice:

« (…)Los esqueletos entregados junto al núcleo de Spip, la «dist», se basan a partir de ahora en la estructura HTML «Layout Gala», que permite modificar la disposición de diferentes bloques con sólo modificar algunas líneas de CSS »

El « Layout Gala » es un gran trabajo del desarrollador italiano Alessandro Fulciniti; un conjunto de estilos CSS para presentar distintas disposiciones de bloques sobre la misma estructura html.

http://blog.html.it/layoutgala/

Como verás, podés hacer casi cualquier cosa sobre el maquetado básico: cabecera, contenido, dos bloques auxiliares y pie de página. Facilmente, podes convertir el juego de esqueletos que viene con SPIP en una presentación de tres columnas ¡sin tocar una linea de código en los esqueletos! (ah, la magia del CSS).

Lamentablente, los esqueletos SPIP « se basan » en LayoutGala, pero no implementan su estructura html al pie de la letra. Quizas sea por retrocompatibilidad, aunque a mi me suena más a orgullo francés, los « id » de cada bloque son distintos.

El original es

<div id="container">
<div id="header">Header</div>
<div id="wrapper">
<div id="content">Content</div>
</div>
<div id="navigation">Navigation</div>
<div id="extra">Extra stuff</div>
<div id="footer">Footer</div>
</div>

Y el que implementa SPIP es
<div id="page">
<div id="entete">Encabezado</div>
<div id="conteneur">
<div id="contenu">Contenido</div>
</div>
<div id="navigation">Navegación</div>
<div id="extra">Extra</div>
<div id="pied">Pié de página</div>
</div>

Igual se entienden los cambios, cierto?

Entonces, breve tutorial:

  • Vas al sitio de LayoutGala y elegís el layout que más te guste. El código CSS está embebido en el html de cada ejemplo, por lo que podés hacer un Ver Código (control + U en firefox) y copiarlo directamente de allí.,
  • Le hacés los cambios de « id » pertinentes. (container por page, header por entete, etc.)
  • Hacés las modificaciones extra que quieras (ver ejemplo)
  • Lo guardás en un archivo perso.css en la raiz de tu sitio. Los esqueletos dist traen una llamada a este estilo, que originalmente no existe, justamente para « sobrecargar » estilos definidos en las otras hojas. Recordemos que en CSS, el que rie último rie más fuerte que todo los demás.
  • Listo, tenés tu sitio a tres columnas! (o el diseño que quieras).

Te paso adjunto un ejemplo basado en el Layout Nº 1 (tres columnas líquidas, con el menú a la izquierda).

Si tengo tiempo (difícil que el chancho chifle, mañana empiezo las fucking clases) vos a hacer los otros estilos y publicarlo como una contrib. Si alguien gusta de coloborar, bienvenid@!

Abrazo
Martín

On Sun, Mar 8, 2009 at 3:16 PM, Gisela Ahumada <giahumada@gmail.com> wrote:

Hola, he bajado los de colewebs pero no funcionan en el SIP 2.0?
Hay otros que puedan recomendarme?
Basicamente necesito una estructara con 3 columnas, luego se cambiara el diseño y los colores pero eso, 3 columnas.

gracias

Gisela


Spip-es@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-es

perso.css (754 Bytes)

Ya fuí al sitio de « …Gala », elegí un ejemplo, el 19. http://blog.html.it/layoutgala/LayoutGala19.html

hago « ver código fuente »
y luego me bajo el archivo « perso » que tú me enviaste.

¿Dónde dije que hagas eso? Ver el código no es un paso de cábala: sirve para copiar el código CSS que está allí para luego pegarlo en tu propio archivo perso.css

El que yo te pasé es un ejemplo acabado para que veas lo que deberías obtener, si siguieras la somera guia que te pasé. O sea, si querés usarlo NO tenés que hacer el resto de los pasos.

Algunos comentarios al margen:

  • Cuando alguien de la comunidad te pasa algo que te puede servir, al que le dedicó cierto tiempo, tratá de sacarle el máximo provecho, leyendo y releyendo lo que quiso decir. Si así y todo no se entiende o algo falla, bueno… consultamos de nuevo. Pero si uno pregunta y repregunta lo mismo, los demás pueden interpretar que no se está haciendo esfuerzo suficiente, y sentirse ofendidos. Sucede mucho en los foros especializados.

  • Ser diseñador gráfico es una ventaja para el desarrollo web, pero lejos está de ser suficiente. Quiero decir: si querés hacer sitios web (hacerlos vos, digo), vas a tener que estudiar, bastante, por lo menos HTML y CSS. Pero una buena noticia: no hay que pagar una carrera para esto (diría que pagar es contraproducente). Hay mucho mucho material online disponible para enseñarte!

  • Lo he dicho: Dreamweaver es lo peor que le pasó al desarrollo web.

  • Es buena costumbre mantener el hilo en la lista, apretando « Responder a todos » . Si apretás responder, el mensaje sólo le llega al remitente.

saludos