Pack Etherweb : des squelettes harmonisés

Dans le cadre du projet Etherweb, nous avions besoin de proposer plusieurs squelettes différents mais présentant tous un minimum de fonctions. D’où l’idée d’uniformiser plusieurs squelettes....

Nom du Pack : Pack Etherweb

Version du Pack : 1.0

Auteur : équipe Etherweb

Compatibilité SPIP : 1.9 / 1.9.1 / 1.9.2

L’idée est donc de prendre plusieurs squelettes différents et de leur permettre à tous d’assurer un certain nombre de fonctions essentielles (gestions des articles, news, sites syndiqués, compatibilité avec certains plugins, mots-clé, etc...)

Toutefois l’idée n’est pas de rendre tous ces squelettes identiques (ou ne variant que par la CSS), nous tenons à garder la diversité et donc la spécificité de chacun (par exemple la rubrique « zoom » du MiniGris).

Les squelettes actuellement proposés

Original

Ce design est le design de base de SPIP (dist), celui fourni par défaut, il a l’avantage d’être léger au niveau du code et très complet. Toutes les fonctionnalités y sont, toutefois, il a comme désavantage de ne pas être très folichon.

Heureusement, il existe de nombreux habillages se basant sur la même structure mais plus variés : - Original - petites-boites - SkBlueFluid - SkBlue - SkPloumanach - SkRed - SkBBJDP - SkNoire - SkCoffeNCream - SkDarkGirl - fraichdist - hotdist - En-rondeur - GoFlexiblePro - Whats_your_solution

Recit-fp

Pour ses besoins, le projet Sites Partenaires FP a développé un design élégant sous licence GPL que vous pouvez à votre tour utiliser.

Sq-Wellor

Pour son site Vision humaine, Jead Wellor a développé le design Wellor sous licence Art-libre en s’inspirant de l’ancien “drop-zone-city”.

La plupart des fonctionnalités rajoutées à l’ensemble des design (organisation par mot-clés, page de contact, citations…) sont librement inspirées des apports de ce squelette.

MiniGriSpip

MiniGriSpip ou mgs pour les intimes est un design développé sous GPL qui se veut « simple et sobre, fait par un débutant et pour les débutants ». On notera néanmoins qu’il est très réussi graphiquement et comporte quelques fonctionnalités que beaucoup d’autre pourraient lui envier dont ses rubriques « info » et « zoom ».

Pierre-Lachance-Xolson

Ce squelette a été développé par Pierre Lachance sur le modèle du thème Xolson pour les blogs DotClear. Ce squelette représente à l’origine un squelette façon blog de SPIP, nous l’avons toutefois adapté pour qu’il prenne en compte toutes les fonctionnalités essentielles à un site. Il a l’avantage d’être léger et sobre sans pour autant être trop simple.

Alternatives

Les squelettes alternatives introduisent un véritable chamboulement structurel au niveau de SPIP. Ils font probablement parti des squelettes les plus élaborés et les plus travaillés à l’heure actuelle. Pourtant les auteurs réussissent le pari avec un design relativement léger étant donné qu’il n’utilise que peu ou prou d’images.

Les habillages suivant sont proposés : - Original - perso-aj - bandeau-droit - bandeau-gauche - fluide

Sq-Etherweb

Sq-Etherweb est un design que nous avons développé nous même dans le cadre du projet Etherweb, il est très librement inspiré du design proposé pour joomla 1.5, et du site FreeMenuDesign. Il est inspiré pour sa structure du squelette Wellor présenté plus haut. Comme dis err747, il est très « glingling », ce qui a malheureusement un prix : il est assez lourd et les pages prennent donc un temps relativement long à charger.

Fonctionnalités du squelette

Général

Ces squelettes gèrent la plus part des fonctionnalités de base de SPIP, à savoir les articles, rubriques, brèves, les porte-documents, fichiers proposés en téléchargement, forum d’article, sites recommandés et syndiqués, etc...

Compatbilité

Tous les quelettes proposés sont compatibles avec Internet Explorer 6 et 7, Firefox, Safari, Opéra et Konquéror. De plus ils sont valides XHTML et pour ne rien gâcher, sont internationalisés.

Mots clés :

Au moment d’uniformiser les squelettes, la parti qui s’est imposée comme essentielle est bien sûr l’utilisation des mot-clés. En effet, à quoi sert d’avoir un mot clé "invisible" permettant de cacher une rubrique ou un article sous un squelette alors qu’il appairait sous un autre ?

Voilà donc tous les mot-clés communs :

invisible à un article, à une brève ou à un rubrique permet de ne pas l’afficher dans la page d’accueil, mais aussi dans les pages plan et rubrique.

sommaire_edito définit l’éditorial du site (appliqué à un article) ce dernier apparaîtra tout en haut de la page de sommaire.

sommaire_centre appliqué à un ou plusieurs articles permet de les mettre en valeur en les disposant en haut de la page de sommaire (juste en dessous de l’édito s’il existe)

cote_edito définit l’article qui sera placé juste en dessous du menu des rubriques dans la colonne de droite (ou de gauche selon les squelettes).

citations Le mot clé citations doit être appliqué à l’article qui contient les phrases destinées à apparaître aléatoirement dans l’entête. Les phrases que vous souhaitez voir apparaître doivent être séparées par un ".". Dans le cas ou il n’existe pas d’article de citations, cet espace restera vide.

Les autres mots clés (map, diaporama) seront abordés plus bas à propos des plugins

Adaptation aux plugins

Nous avons voulu faire du squelette Etherweb un squelette qui s’adapte facilement aux différents plugins activés et permet de les intégrés dans le design de la page. Il fallait donc adapter aussi les autres squelettes afin d’intégrer les plugins même en cas de changement de thème.

Google map

Il existe deux plugins appelés GoogleMap Api et Escoitar Gis Plugin qui permettent de visualiser un google map dans l’espace privé mais aussi dans l’espace public. Pour l’afficher dans le squelette Etherweb, il faut avoir activé ces plugins, choisi les coordonnées et appliqué à l’article le mot clé « map ». Ainsi la map apparaît avant le texte dans l’article.

Le mot clé map permet de ne mettre sur la page le code nécessaire à l’affichage de la map que lorsque ce mot clé est activé (et donc seulement lorsqu’il y a besoin d’afficher la map).

diaporama

Le plugin diaporama_innerfade permet de faire un diaporama à partir des images contenues dans le porte-document. De la même façon que pour la map, pour afficher le diaporama sur les squelettes, il suffit d’activer le plugin et et d’appliquer à l’article le mot clé « diaporama ». Ce dernier s’affiche alors au dessus du texte de l’article.

Le mot clé diaporama permet de ne mettre sur la page le code nécessaire à l’affichage du diaporama que lorsque le mot clé est appliqué à l’article.

Attention, il faut penser à donner un hauteur fixe au diaporama (dans CFG > diaporama_innerfade) sous peine de voir les images recouvrir le texte.

Lecteur Flash Multimedia

Le plugin Lecteur Flash multimedia permet notamment de mettre en page d’accueil de votre site un playlist avec toutes les dernières musiques ajoutées. Cette fonctionnalité est intégrée à ce pack de squelette mais est commentée car sinon cela provoque un bug quand le plugin n’est pas installé.

Il faut donc ouvrir inc-gauche.html (ou inc-menu, ou inc/inc-menu selon le squelette) et décommenter (c’est à dire enlever la baliser [(#REM)  ] qui est autour de :

	[<div class="module_menu">
		<div>
			<div>
				<div>
					<h3><:dernieres_musiques:></h3>
					(#MODELE{playliste}{id_article})
				</div>
			</div>
		</div>
	</div>]

Licence
Comme son nom le laisse supposer, le plugin licence permet d’associer facilement sa licence à un article. Les squelettes ici proposés comprennent déjà la balise licence, vous pouvez donc activer le dit plugin, sélectionner les licences voulues, elles s’afficheront sous le texte.

Envoi_ami
Même principe avec le plugin Envoyer l’article aux amiEs qui permet d’ajouter à votre article un formulaire pour le recommander à plusieurs amis.

Espace wiki
Il est toujours sympa d’avoir un espace sous forme de wiki (auquel tout le monde peut participer) sur son site. Pour en avoir un avec les squelettes de ce pack, il faut installer et activer le plugin "crayons« , appliquer le mot-clé »wiki" à un rubrique et ajouter la portion de code suivante à config/mes_options.php :

###################
# Gestion du wiki #
###################

function autoriser_article_modifier($faire, $type, $id, $qui, $opt) {
       // Si on est deja autorise en standard, dire 'OK'
       if (autoriser_article_modifier_dist($faire, $type, $id, $qui, $opt))
               return true;
       // Sinon, verifier si le mot cl� est asscoie � l'article
        $sss = spip_query("SELECT id_secteur FROM spip_articles WHERE id_article="._q($id));
        if ($t = spip_fetch_array($sss)){
        
        $s = spip_query("SELECT id_mot FROM spip_mots_rubriques WHERE id_rubrique="._q($t['id_secteur']));
       while ($row = spip_fetch_array($s)){
     
       if ($row['titre_mot'] = 'wiki') return true;
       
       }}
       // par defaut, NIET
       return false;
}

function autoriser_rubrique_publierdans($faire, $type, $id, $qui, $opt) {
	// Si on est deja autorise en standard, dire 'OK'
	if (autoriser_rubrique_publierdans_dist($faire, $type, $id, $qui, $opt))
		return true;

	// Sinon, verifier si la rubrique est dans un secteur gribouille
	// et si on est bien rédacteur
$s = spip_query("SELECT id_mot FROM spip_mots_rubriques WHERE id_rubrique="._q($id));
       while ($row = spip_fetch_array($s)){
       if ($row['titre_mot'] = 'wiki') return true;
       }

	// par defaut, NIET
	return false;
}


function analyse_droits_rapide() {
       return true;
}

A ce moment là, les articles de la rubrique wiki pourront être édités par tous les webonautes grâce aux crayons. De plus, un formulaire apparaîtra en dessous des articles (et dans la page de rubrique), proposant de créer un nouvel article dans la même rubrique.

Ceci s’inspire bien sûr du chantier gribouille.

Walma
Walma est une galerie en SPIP, toutefois, il parait intéressant d’avoir une page « personnalisée » de walma, adaptée au design du site. C’est pourquoi il existe un fichier walma.html qui s’ocupe de ça dans les squelettes dont nous parlons. Il suffit donc d’installer walma....

Toutefois, il semble que cela ne marche pas avec la toute dernière version de walma, mais ça viendra...

Spécificité selon les squelettes

Recommandation
Un petit formulaire permettant au webonaute de recommander votre site à ses connaissances est disponible bas de page, si vous n’en voulez pas ou si vous trouvez qu’il prend trop de place, vous pouvez le remplacer par un simple lien vers spip.php ?page=recommandation . La recommandation est basée sur le script JCreco.
Disponible pour les squelettes Etherweb et Wellor.

Formulaire de contact

Un visiteur peut contacter les auteurs par deux autres moyens : le formulaire de contact présent sur la page de chaque auteur (dans la colonne de gauche) ou la page « contact » qui reproduit tout simplement le formulaire de contact de l’auteur n°1, qui est logiquement le créateur du site.
Disponible pour les squelettes Etherweb, Wellor, RecitFP, PL_Xolson.

Liens

Tous les liens de votre site (sites syndiqués, articles syndiqués) sont rassemblés dans une page « Liens » accessible via la barre de menu.
Disponible pour les squelettes Etherweb, Wellor, RecitFP, Alternatives

Et bien d’autres spécificités encore : le zoom, les infos de MiniGris, le « résumé » de Alternatives, etc...

Comment gérer tous ces squelettes

Il existe à ma connaissance trois gestionnaires de thème pour SPIP, permettant de changer aisément de thème : le switcher, le plugin habillage et le plugin SKtheme :

Le plugin switcher est le plus rustique des trois, il permet simplement d’installer un petit formulaire en haut à gauche de votre site, pour que le wenonaute puisse lui même passer d’un style à un autre.

Le plugin Habillages permet de gérer les thèmes mais aussi les thèmes d’icones, le tout depuis l’espace privé. Son grand défaut est de ne pas proposer de switcher permettant aux utilisateurs et non aux administrateurs de changer de thème.

Le plugin Shthème a retenu notre préférence dans la mesure ou il permet, depuis l’espace privé, de changer le thème par défaut et de mettre en place un swiycher accessible soit aux administrateurs seulement soit à tous les webonautes.

A faire

Il reste beaucoup d’évolutions possibles :

* Intégrer d’autres squelettes et thèmes

* Intégrer d’autre fonctionnalité

* Améliorer ce qui est déjà fait (galerie walma, problème de modèle absent lorsque l’on switch depuis un age spécifique)

* Il y a a sûrement un certains nombre de bugs ;)

Nous attendons de pied ferme vos suggestions !

Discussion

6 discussions

  • 1

    Pour la rapidité, c’est un pur coup de chance^^

    Etant donné que le problème est sur la dist, la seule chose qui me parait sure, c’est que cela doit se régler dans /dist/inc-rubrique.html.

    Par exemple on peut remplacer tout de B-rubriques à /B_rubriques par

    <B_secteurs>
    <div class="rubriques">
    <h2 class="menu-titre"><:rubriques:></h2>
    <ul>
    <BOUCLE_secteurs(RUBRIQUES){id_parent=0}{par titre}{tout}{doublons}>
                    <li>
    		<a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>
                      <B_secteurs_1>                  
                    <ul>
                            <BOUCLE_secteurs_1(RUBRIQUES){id_parent}{par titre}{tout}{doublons}>
                            <li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>
                            <B_secteurs_2>
    			<ul>
                            <BOUCLE_secteurs_2(RUBRIQUES){id_parent}{par titre}{tout}{doublons}>
                            <li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
                            </BOUCLE_secteurs_2> 
                            </ul> 
    			</B_secteurs_2> 
                            </li>                    
                            </BOUCLE_secteurs_1>
                            <br />
                        </ul>
    		    </B_secteurs_1>
                    
                    </li>
    </BOUCLE_secteurs>
    </ul>
    </div>
    </B_secteurs>

    ça donne les trois premiers niveaux...

    En tout cas merci pour vos commentaires enthousiastes. J’ai franchement envie de continuer mais n’ai pas du tout le temps en ce moment

    • Bonsoir,

      En appliquant votre solution, les rubriques et sous-rubriques sont affichées en permanence.

      En suivant votre idée, j’ai comparé les deux fichiers inc-rubrique.html. Celui de la dist originale qui fonctionnait correctement avec un menu déroulant pour les sous-rubriques, et celui de la dist du pack Etherweb.

      La différence portait sur le critère doublons en ligne 14 et 21. En supprimant ce critère cela fonctionne comme je le voulais.

      Il ne me reste plus qu’à régler « proprement » ce problème de traduction de manage_theme.

      Encore une fois, merci pour votre aide et votre réactivité.

      Bon courage pour la suite.

    Répondre à ce message

  • 1

    Est-ce que ça ne viendrait pas des squelettes eux même tout simplement ? La dist affiche-t-elle plusieurs niveaux de rubriques normalement ? car si ce n’est pas le cas, nous n’avons pas fait de modifications de ce côté là.

    Sinon, pour le manage_theme, ça doit tout simplement être un oubli de traduction

    • Impressionnant la rapidité de la réponse !

      1 - Normalement, les squelettes affichent plusieurs niveaux de rubriques sans problème. Par contre, j’ai regardé sur le site de démo Etherweb (chose à laquelle je n’avais pas pensé avant), et là aussi, il y a le même problème d’affichage avec la dist.........

      2 - Le manage_theme est bien traduit dans sktheme_fr. Par contre je ne sais pas si elle est bien appelée dans le fichier sktheme_fonctions (je ne connais pas la syntaxe). Néanmoins, en modifiant comme un sauvage la ligne 31 par : _L(« Gestion des Thèmes »)) ; cela règle le problème (pour le FR...)

      Encore une fois BRAVO pour votre travail !

    Répondre à ce message

  • Bonjour,

    Félicitations pour ce Pack.

    J’ai un petit problème d’affichage :
    -  Pour les thèmes de la dist, le menu des rubriques n’affiche que les rubriques de niveau 1 (les secteurs).
    -  Pour d’autres squelettes, le menu des rubriques est fixe avec affichage de 2 niveaux,le troisième niveau restant invisible.
    -  Dans l’espace de rédaction, le texte sous l’icône est « manage theme » alors que la fenêtre de configuration est bien en Français. (Le fichier sktheme_fr.php est bien présent).
    -  Par contre Sq-Etherweb semble afficher correctement le menu « déroulant » des rubriques.

    Ma configuration est : Spip 1.9.2.e - Plugins activés : sktheme 1-9-2 et cfg - Répertoire Themes à la racine du site.

    Quelqu’un aurait-il une idée ?
    Merci

    Répondre à ce message

  • 1

    Bonjour,
    Excellente idée, félicitations.
    J’ai plusieurs problèmes d’affichage des squelettes :
    -  Dans l’espace privé, s’affichent bien tous les squelettes, mais pas les thèmes, qui sont dans le même répertoire ainsi que l’indique le fichier d’aide de sktheme.
    -  Dans l’espace public, le switch ne fonctionne pas, seul dist apparaît (mais le nom de mon répertoire où sont tous les squelettes est bien reconnu puisque dans la partie privée leurs noms s’affichent).

    Ce qui est vérifié :
    -  Le switcher de thèmes est bien activé, « Seulement pour les administrateurs » est coché « Non ».
    -  Quelqu’un a une idée ?

    Par ailleurs il faudrait activer par défaut partout le filtre |supprimer_numero, c’est maintenant largement utilisé et il serait dommage qu’on repasse dans tous les fichiers pour l’ajouter partout...
    Merci

    • Je me réponds à moi-même : c’est le choix des répertoires de habillages publics en fonction de celui des squelettes publics qui était en cause.
      Ne manque plus que de résoudre la question du filtre |supprimer_numero < :-)
      Je propose la solution du squelette alternatives, d’ajouter dans le fichier mes_options.php :

      ################ CONFIGURATION TITRAGE #######################
      // Supprimer globalement ce qui est fait avec #TITRE|supprimer_numero;
      // s'appliquera aussi a tous les squelettes du site, ajoutés plus tard ou
      //aux squelettes /dist/ (backend, formulaire, etc...).
      
      $table_des_traitements['TITRE'][]= 'supprimer_numero(typo(%s))';
      #########################################################


      Merci pour tout ! < :-)

    Répondre à ce message

  • bonjour, inscrit depuis peux dans le systeme etherweb voici quelques demandes...

    Comment référencer un site situé cher vous ? impossible de créer le fameux googledqhsfqhfzefhio.html :)

    Comment modifier un petit peu l’appartement ? en mettant son bandeaux, ces couleurs, un plugin serait le bien venu :)

    le plugin couteau suisse si pratique manque d’options, une mise a jour du plug peut être ?

    Répondre à ce message

  • 1
    lessorg

    Merci pour ce squelette.

    L’article avec le mot-clé « invisible » s’affichait dans la page rubrique.

    J’ai ajouté ldoublons dans la boucle des articles de la rubrique

    <BOUCLE_articles(ARTICLES) {id_rubrique} {par date}{inverse}{doublons} {pagination}>
    • c’est le cas dans tous les squelettes ou dans un squelette spécifique ?

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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