Créer et modifier ses squelettes depuis l’espace privé

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Ou comment créer un site SPIP complètement personnalisable sans aucune connaissance en programmation.

Dans le cadre de mon projet de fin d’études, j’ai développé pour Agora un outil permettant à un novice de créer un site web dynamique sans aucune connaissance en programmation ou en infographie. Voici la version SPIP de cet outil.

Dans le but de rendre la création de sites dynamiques accessible à tous, j’ai imaginé un outil permettant de créer et de modifier le design de ses squelettes très facilement à partir d’une interface riche et intuitive. L’objectif de ce projet était d’offrir à l’architecture SPIP / Agora la possibilité d’être instanciée très facilement et très rapidement par un néophyte. Jusqu’à présent, la phase de conception des squelettes était réservée à un webmestre confirmé car elle demande de nombreuses connaissances en programmation et en infographie.

Charte fonctionnelle :

  • Le module permet de créer un site web dynamique sans aucune connaissance en programmation et en infographie
  • Seuls l’administrateur et le webmestre du site ont accès au module.
  • L’utilisateur a la possibilité d’utiliser un design prédéfini, ou d’en définir un lui-même. Pour cela il peut :
    • Définir le style général du site (logos, polices de caractères, couleurs...)
    • Définir la composition de chacun des gabarits de pages
  • L’utilisateur a la possibilité de modifier ses choix et de régénérer les gabarits de pages.
  • Le module est accessible depuis la zone d’administration de Spip / Agora.
  • Si il le souhaite, l’utilisateur peut modifier manuellement les gabarits des pages générées via l’explorateur (Cf contrib).
  • Le module dispose d’un outil de sauvegarde et de restauration des gabarits de pages.
  • Plusieurs niveaux d’utilisation sont disponibles (débutant, confirmé, expert)
  • Les gabarits de pages générées respectent les nouveaux standards XHTML et CSS2 dans le but de rendre les sites créés accessibles à un maximum de personnes

Composition des gabarits de pages :

Un site Spip / Agora comporte plusieurs types de pages (article, rubrique, sommaire, plan...). Ces pages sont constituées de blocs. L’utilisateur peut donc définir pour chaque type de page le nombre, la position, le style, et le contenu des blocs.

Un bloc peut être :

  • du contenu (articles, logos, brèves, rubriques...)
  • des fonctionnalités (moteur de recherche, format imprimable, forum ...)
  • des éléments de navigation (menu dynamique, fil d’Ariane...)

L’application :

Interface du module :

Interface du module

1) Utilisation de jeux de squelettes prédéfinis :

Utilisation d’un jeu de squelettes prédéfinis

2) Création de ses propres squelettes

a) Définition de l’ambiance générale du site

Définition de l’ambiance générale du site
Style des éléments du site

b) Création d’un squelette

Nombre de blocs sur la page
Définition de la position et du style du bloc
Choix du contenu du bloc

c) Générer le site

Générer le site

d) Exemples de sites réalisés par l’application

Exemple de site réalisé par l’application
Exemple de site réalisé par l’application

Le contenu de ces deux pages est identique, seul la présentation est différente. Sur la première capture d’écran, les encarts sont situés sur la gauche et sur la droite de la page, alors que sur la deuxième les encarts sont situés uniquement sur la partie gauche de la page. Le module offre à l’utilisateur la possibilité de modifier le style, la position et le contenu de chacun des éléments de la page. Les pages générées par l’application sont au format XHTML / CSS2, ce qui permet de modifier facilement la mise en page des gabarits en modifiant uniquement les feuilles de style.

Le générateur de contenus permet d’afficher de nombreuses informations. Par exemple, l’utilisateur peut insérer sur ses pages :
-  Les articles d’une même rubrique, d’un même auteur, ou du même thème.
-  Une rubrique avec ses sous rubriques, ses brèves et ses articles.
-  Le plan du site.
-  Les forums associés aux articles.
-  Le moteur de recherche
-  La version imprimable des pages
-  Les documents associés aux articles
-  ...

e) Un nouveau bouton

J’ai ajouté un bouton (« Modifier la présentation ») sur la zone publique du site. Ce bouton permet d’accéder directement à la page de modification du squelette.

Comment çà marche

Fichiers de configuration :

Les choix de l’utilisateur sont stockés dans des fichiers de configuration, ce qui permet de récupérer et de modifier très facilement le design de ses squelettes. Les fichiers de configuration contiennent les informations de style, de position, et de contenu. Pour analyser ces fichiers, l’application utilise un parser de fichiers ".ini" et retourne la configuration de l’utilisateur sous forme de tableau de donnée.

Extrait du fichier contenu_article.ini
Cet extrait de fichier spécifie le contenu du bloc numéro 3 du squelette article.

[contenu_bloc_article_3]
type_contenu="article"
limite="tous"
date="oui"
auteur="oui"
trie="titre"
article="article"
id_article="courant"
surtitre="oui"
soustitre="oui"
titre="oui"
descriptif="oui"
chapo="oui"
texte="oui"
ps="oui"
notes="oui"
forum="oui"
logo="oui"
logo_position="left"
puce_titre="oui"
; FIN [contenu_bloc_article_3]

Extrait du fichier disposition_article.ini
Cet extrait de fichier spécifie le style du titre du bloc numéro 1 du squelette article.

[.titre_bloc_article_1]
; BORDURES
border-top-style="solid"
border-top-width="1px"
border-top-color="#000000"
border-bottom-style="solid"
border-bottom-width="1px"
border-bottom-color="#000000"
border-left-style="solid"
border-left-width="1px"
border-left-color="#000000"
border-right-style="solid"
border-right-width="1px"
border-right-color="#000000"
padding="5px"
vertical-align="top"
; POLICE D'ECRITURE
font-family="Arial, verdana, sans-serif"
color="#FFFFCC"
background-color="#000066"
font-size="12pt"
text-align="left"
font-weight="bold"
font-style="italic"
text-decoration="none"
; FIN [.titre_bloc_article_1]

Arborescence des sites générés :

Arborescence des sites générés
  • Le répertoire data/ contient les jeux de squelettes prédéfinis ou sauvegardés par l’utilisateur.
  • Le répertoire myspip/ contient les jeux de squelettes courants générés par l’application.
    • Le répertoire ini/ contient les fichiers de configuration de style, de contenu, et de disposition.
    • Le répertoire css/ contient les feuilles de style générées par l’application.
  • Les répertoires squelette_xxxx/ sont des jeux de squelettes prédéfinis ou sauvegardés par l’utilisateur.

Le système de fichiers de configuration offre à l’utilisateur la possibilité de changer de jeux de squelettes très facilement. Il suffit pour cela de changer les fichiers .ini et de générer le site de nouveau pour que les modifications soient effectuées.

Installer l’application :

Deux possibilités :

1) Installer l’archive suivante :

Distribution modifiée de SPIP 1.7.2
Format tar.bz2
Distribution modifiée de SPIP 1.7.2
Format .zip

2) remplacer / copier les fichiers suivants et le répertoire data/myspip/ :

  • inc-admin.php3 (Fichier SPIP)
  • ecrire/admin_squelettes.php3 (Nouveau fichier)
  • ecrire/admin_squelettes_predefinis.php3 (Nouveau fichier)
  • ecrire/creer_squelette.php3 (Nouveau fichier)
  • ecrire/creer_squelette_entete.php3 (Nouveau fichier)
  • ecrire/créer_squelette_style.php3 (Nouveau fichier)
  • ecrrie/generer_site.php (Nouveau fichier)
  • ecrire/generer_squelette.php (Nouveau fichier)
  • ecrire/inc_backup.php3 (Nouveau fichier)
  • ecrrie/inc_css.php (Nouveau fichier)
  • ecrrie/inc_logos.php3 (Fichier SPIP)
  • ecrire/inc_presentation.php3 (Fichier SPIP)
  • ecrire/inc_squelettes.php (Nouveau fichier)
  • ecrire/squelettes_predefinis.php3 (Nouveau fichier)
  • ecrire/lang/public_fr.php3 (Fichier SPIP)
  • ecrire/lang/spip_fr.php3 (Fichier SPIP)
  • le repertoire ecrire/data/myspip/ (Nouveaux fichiers)
Fichiers de la contrib
Format .tar.bz2
Fichiers de la contrib
Format .zip


-  L’application nécessite la version 4.3 de PHP

MISE A JOUR DU 27/07/2004
-  Suppression des styles contenus dans les squelettes
-  Correction des bugs signalés
-  Amélioration du format imprimable des pages générées
-  Amélioration de l’accessibilité des sites générés grâce aux remarques Goetsu

MISE A JOUR DU 10/09/2004
-  Utilisation du menu accessible proposé par jpyrat (cf : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable)
-  Utilisation du filtre couleur permettant d’insérer de la couleur dans le texte (cf :Des couleurs dans le texte SPIP)

Si vous avez créé des jeux de squelettes personalisés avec cette application, et que vous désirez les partager avec la communauté, merci de m’envoyer vos repertoire myspip sous forme d’archive par mail

Dernière modification de cette page le 6 mai 2007

Discussion

6 discussions

  • Bonjour, je souhaiterai faire un site à l’aide de SPIP mais je n’y connais pas grand chose au code. Ce petit module me semble une super bone idée mais il est très dépassé, nous en sommes maintenant au SPIP 2 ! Qu’en est-il ? est-il compatible ? Y a-t-il autre chose d’aussi simple ?

    Répondre à ce message

  • 1

    Bonjoir

    y a t il une mise à jour fonctionnelle pour spip 191 ou 192 ?

    • merci remi ; je vais regarder ça de plus prés .... spaceline..... ;)

    Répondre à ce message

  • Fred02840

    Bonjour,

    Je note qu’Agora utilise toujours SPIP 1.7, alors que la version actuelle est la 1.9. Ce module vaut-il pour cette dernière version ? Il me semble qu’Agora n’est plus entretenu...
    Sinon, connaissez un équivalent (plus simple que SPIP-squelette, par ex.) permettant de configurer un squelette assez facilement ?

    Merci de votre réponse.

    Répondre à ce message

  • 2
    alaingre

    Très intéressant dans l’idée pour rendre SPIP accessible au « grand public » mais j’ai un problème récurant sur la génération des squelettes : avec des erreurs sur les caractères (en particulier les accentués)

    Suis je le seul ?

    Exemple d’erreur

    Sur le squelette sommaire : Espace privé
    Sur la squelette rubrique ou article : Espace priv�

    Etc... (on peut corriger au bloc note mais c’est dommage)

    L’interface privée c’est pire.

    • bonjour
      je trouve cette version de spip formidables (1.8 Modifiee) et je voudrais savoir dans les squelettes fournies comment inserer sont logo

      merci par avance de votre aide, j’utilise le jeux de squelettes squelette_adoc

    • j’ai ete voir tu as des soucis avec ton site ? la il reste les repertoire mais on tombe pas sur le site online.

      sinon oui cela semble plutot coquet comme contribution. Je vais tester la version erasme car je ne compte pas utiliser agora.

      Je suppose que cela fonctionnerais egalement avec la 1.8.2 ?

    Répondre à ce message

  • Bonjour
    Je viens de charger par ftp les fichiers de la distribution de spip 1.7.2 puis les fichier de la contrib en écrasant les anciens fichiers spip (version 1.8.2).
    mes_fonctions.php3 se trouve dans ecrire/data/myspip.

    Il ne se passe rien !
    J’ai toujours la même interface, les nouveaux boutons liés à la création des nouveaux squelettes n’apparaissent pas sur l’espace privé, pouvez vous me dire pourquoi ???

    Merci

    Répondre à ce message

  • pvincent

    Une version de cet éditeur de squelette a été adaptée pour SPIP 1.8 : http://reseau.erasme.org.

    Quelques évolutions ont été apportées concernant le système de gestion des fichiers et l’affichage des blocs, mais le principe d’édition reste le même.
    L’archivage est désormais limité à 4 jeux de squelettes.
    Le problème des accents est par ailleurs résolu.

    Parmi les propositions de développement :
    -  gestion orientée objet de ses blocs d’affichage (par exemple créer des sous-blocs, menu-droite, dernieres_breves, ect), réutilisables dans plusieurs squelettes.
    -  la possibilité de définir des formes de blocs personnalisées.
    -  la possibilité d’appliquer sur l’intégralité du site une modification de forme ou de forme des blocs (police, couleur, cadres, ect) plus simplement.

    Nicolas Blaudez propose de travailler à la fusion de cet outil avec son applicatif.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom