Développement de Logiciels Libres pour Internet

Mélange d'éléments hétérogènes

2012-01-13T12:07:47Z

Il existe déjà un système pour mélanger des éléments hétérogènes avec Spip, celui-ci utilise des boucles avec des tests de supériorité sur les éléments. Cette méthode fonctionne mais permet difficilement de mélanger 3 types d'éléments et ne permet pas de se servir de certaines possibilités, particulièrement la pagination.

Avec le plugin Bonux et surtout l'arrivée de Spip 3, nous allons pouvoir utiliser une autre méthode qui va nous permettre de mélanger un nombre illimité d'éléments, d'utiliser les paginations, ou encore d'autres possibilités offertent par le système de boucles habituelles.

La base du système.

Nous allons utiliser des tableaux de tableaux d'éléments. Chaque élément sera constitué de 3 éléments : Son type d'objet [1], son identifiant [2], et le champ de tri qui sera utilisé dans la boucle suivante.

Ensuite nous utilisons une boucle POUR [3].
Pour faciliter la mise en place des tableaux, nous utilisons Bonux, nous remplissons des variables avec la balise #VALEUR, le filtre |table_valeur et la balise #SET.

Dans l'ordre :

Création du tableau.
Remplissage du tableaux avec les tableau des éléments avec des boucles dédiées.
Boucle sur le tableau ordonné à notre convenance.
Dans cette boucle nous utilisons soit un filtre de test |oui pour inclure chaque squelettes en fonction du type d'objet, soit une boucle CONDITION pour afficher le contenu selon le type d'objet, cette possibilité peut se faire dans un autre fichier [4].

Nous présentons 2 possibilités à la suite. La première inclut un fichier commun pour tous les éléments, le 2ème se sert du filtre |oui pour l'un des éléments et une boucle CONDITION pour l'autre.

Cela nous permet d'utiliser toutes les fonctionnalités de tri sur la dernière boucle, les filtres étant appliqués sur les premières boucles.

Exemple pour une liste de brèves et d'articles d'une rubrique triés par date

Création et remplissage du tableau : nous utilisons la balise #SET pour créer et remplir un tableau défini par #ARRAY. Il serait possible d'ajouter les éléments avec |push, nous utilisons ici #SET_PUSH de bonux.

[(#REM) On créé le tableau] #SET{elements,#ARRAY{}} [(#REM) On le remplit avec les articles de le rubrique en cours] <BOUCLE_articles(ARTICLES){id_rubrique}> #SET{element, #ARRAY{objet,"article",id_objet,#ID_ARTICLE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_articles> [(#REM) On le remplit avec les brèves de la rubrique en cours] <BOUCLE_breves(BREVES){id_rubrique}> #SET{element, #ARRAY{objet,"breve",id_objet,#ID_BREVE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_breves>

Construction de la boucle pour récupérer les éléments du tableau, rien de difficile sur cette boucle.
Nous remplissons 2 variables : objet et id_objet avec les valeurs des tableaux d'éléments. Nous utilisons |table_valeur sur la #VALEUR pour raccourcir le code et faciliter la mise en place. Un autre choix serait d'utiliser directement la boucle condition dans cette boucle. Cette boucle peut remplacer la boucle de contenu/rubrique.html de Zpip-dist.

<B_elements><div class="liste"><ul class="list-items"> <BOUCLE_elements(POUR){tableau #GET{elements}}{!par date}{pagination 5}> #SET{id_objet,#VALEUR|table_valeur{id_objet}} #SET{objet,#VALEUR|table_valeur{objet}} <INCLURE{fond=inclure/element-resume}{objet=#GET{objet}}{id_objet=#GET{id_objet}}> </BOUCLE_elements> </ul></div><B_elements>

Il nous reste enfin à construire le squelette inclure/element-resume.html, cette fois ci en nous servant de la boucle CONDITION. Comme nous l'avons déjà remarqué, ce choix permet de n'avoir qu'un seul fichier à modifier en cas de changement du contenu des éléments de la liste.

<BOUCLE_test_article(CONDITION){si #ENV{objet}|=={article}}> <BOUCLE_article(ARTICLES){id_article=#ENV{id_objet}}> <li class="item hentry"> <h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3> [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>] <div class="meta-publi"> <a class="lire-la-suite" href="#URL_ARTICLE"><:lire_la_suite:><span class="lire-la-suite-titre"><:lire_la_suite_de:> <em>#TITRE</em></span></a> </div> </li> </BOUCLE_article> </BOUCLE_test_article> <BOUCLE_test_breve(CONDITION){si #ENV{objet}|=={breve}}> <BOUCLE_breve(BREVES){id_breve=#ENV{id_objet}}> <li class="item hentry"> <h3 class="h3 entry-title"><a href="#URL_BREVE" rel="bookmark">#TITRE</a></h3> [<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>] <div class="meta-publi"> <a class="lire-la-suite" href="#URL_BREVE"><:lire_la_suite:><span class="lire-la-suite-titre"><:lire_la_suite_de:> <em>#TITRE</em></span></a> </div> </li> </BOUCLE_breve> </BOUCLE_test_breve>

Un flux RSS mélangeant article et brèves.

Pour ce fichier, nous remplissons le tableaux en effectuant un filtre sur les dates inversées, en effet, nous remplissons le tableau avec un minimum d'élément pour alléger les requêtes sur le serveur. Nous prenons la base du fichier backend.php de squelette-dist sur la version 2.1 de Spip.

Remplissage du tableau :

<BOUCLE_10articles(ARTICLES) {lang ?}{branche ?}{id_mot ?}{id_auteur ?} {par date}{inverse}{0,10}{unique}> #SET{element, #ARRAY{objet,"article",id_objet,#ID_ARTICLE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_10articles> <BOUCLE_articles_tres_recents(ARTICLES){lang ?}{branche ?}{id_mot ?}{id_auteur ?} {par date}{inverse}{age<3}{unique}> #SET{element, #ARRAY{objet,"article",id_objet,#ID_ARTICLE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_articles_tres_recents> <BOUCLE_10breves(BREVES){lang ?}{branche ?}{id_mot ?}{id_auteur ?}{par date}{inverse}{id_rubrique ?}{lang ?}{id_mot ?}{unique}{0,5}> #SET{element, #ARRAY{objet,"breve",id_objet,#ID_BREVE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_10breves> <BOUCLE_breves_tres_recents(BREVES){lang ?}{branche ?}{id_mot ?}{id_auteur ?} {par date}{inverse}{age<3}{unique}> #SET{element, #ARRAY{objet,"breve",id_objet,#ID_ARTICLE,date,#DATE}} #SET_PUSH{elements,#GET{element}} </BOUCLE_breves_tres_recents>

Nous bouclons ensuite sur les éléments comme précédemment, par contre cette fois-ci : nous allons utiliser un test sur le type d'objet : soit avec un test direct et une inclusion [5], soit avec une boucle CONDITION [6].

Pour les articles : le test s'effectue via [(#VALEUR|table_valeur{objet}|=={article}|oui) ].
Pour les brèves, la boucle CONDITION donne :

Ce qui donne, avec un contenu minimum pour les brèves :

<BOUCLE_elements(POUR){tableau #GET{elements}}{!par date}> #SET{id_objet,#VALEUR|table_valeur{id_objet}} [(#VALEUR|table_valeur{objet}|=={article}|oui) <INCLURE{fond=inc-rss-item}{id_article=#GET{id_objet}}>] <BOUCLE_test_breve(CONDITION){si #VALEUR|table_valeur{objet}|=={breve}}> <BOUCLE_breve(BREVES){id_breve=#GET{id_objet}}> <item[ xml:lang="(#LANG)"]> <title>[breve] [(#TITRE|supprimer_tags|texte_backend)]</title> <link>[(#URL_BREVE|url_absolue)]</link> [<guid isPermaLink="true">(#URL_BREVE|url_absolue)</guid>] [<dc:date>(#DATE|date_iso)</dc:date>] <dc:format>text/html</dc:format> [<dc:language>(#LANG)</dc:language>] <description>[(#INTRODUCTION|liens_absolus|texte_backend)] <BOUCLE_breve_rubrique_mf(RUBRIQUES){id_rubrique}>- [<a href="[(#URL_RUBRIQUE|url_absolue)]" rel="directory">(#TITRE|texte_backend)</a>] </BOUCLE_breve_rubrique_mf> </description> </BOUCLE_breve> </BOUCLE_test_breve> </BOUCLE_elements>

Vous pouvez télécharger le fichier joint directement pour mettre en place un flux RSS mélangeant brèves et articles dans votre installation de Spip.

[1] article, breve, article syndiqué …

[2] #ID_ARTICLE, #ID_BREVE, #ID_SYNDIC_ARTICLE …

[3] Intégrée à Spip-Bonux

[4] Le dernier choix permet de n'avoir qu'un seul squelette à modifier en cas de changement de contenu de la liste, et donc de ne pas oublier l'un des éléments

[5] pour les articles

[6] pour les brèves

Cet article sera complété par un plugin pour Spip pour gérer les contenus de son flux RSS, et sera publié sur Spip-contrib.

Pour les autres système mélangeant des éléments hétérogènes sous spip :

Le site des PEC du Nord - Pas-de-Calais

2012-01-10T11:45:38Z

Sur une conception graphique de Marie-Anne Rabier, mise à jour du site pec5962.org. En plus de cette mise à jour graphique, le site intègre une fonctionnalité de gestion des pec basée sur le plugin Contacts & Organisation, ainsi que plusieurs solutions pour faciliter le passage du site public à la partie d'édition du site.

Le site est constitué principalement de 2 parties :

Une rubrique pour agir ou s'informer sur l'environnement. Une interface permet aux rédacteurs de proposer plus facilement un lien ou un article
Une rubrique pour un répertoire des points conseils du Nord - Pas-de-Calais utilisant une adatation du plugin Contacts et Organisation. Les PEC peuvent modifier l'ensemble de leurs données sans passer par l'interface privée.

Gestion des Organisations

L'un des objectifs de l'adaptation du site est de permettre aux différents points environnements conseils de gérer eux même leur propre fiche. J'ai donc repris le plugin Contacts & Organisation et totalement adapté celui-ci au besoin des PEC.

L'ensemble des champs des organisations sont gérés via l'interface de Spip avec l'utilisation de champs extra et de Gmapv3 pour la cartographie. Chaque membre d'un PEC, une fois connecté, peux modifier les PECs [1] tout en restant sur l'interface publique du site.

Aperçus de différents formulaires de modifications :

Modification du logo

Modification de l'adresse complète

L'adresse de l'organisation est gérée via champs extra

Description avec la barre d'outil

Position cartographique

Un menu dynamique en javascript

La seconde partie du site qui vous propose d'agir pour l'environement présente un menu dynamique en javascript. Ce menu est inspiré Image Menu with Jquery cependant, il est adapté pour :

Une largeur de page dynamique : la largeur de chaque partie visible du menu est en pourcentage, et le contenu fait 100% de son conteneur.
Un nombre de rubriques variable : le code permet d'ajouter ou de supprimer des rubriques sans devoir revoir la feuille de style ou le script. Il suffit juste recalculer le cache, Spip recalculera l'ensemble des largeurs.

Un menu de raccourcis pour les personnes connectées

Mes options

Selon ses droits sur la rubrique en cours, sur l'article en cours ... chaque utilisateur connecté voit différentes options selon ses droits et son organisation de référence, il peux : proposer un nouvel article, accèder à sa fiche, proposer un nouveau site ...

Les crayons permettent aussi d'éditer une majeure partie du contenu du site sans sortir de l'interface publique, toujours selon les droits de chacun.

Mélange de différents contenus

Le flux RSS du site pec5962 mélange différents types de contenu. Il mélange en les triant convenablement les articles généraux, les actualités (brèves) et les sites référencés.

Une rubrique spécifique mélange aussi les articles provenant d'un site externe et les articles du site lui même. De façon transparente pour l'administrateur et avec l'ordre des dates respectées.

La méthode est détaillé sur Mélange d'éléments hétérogènes

Voir en ligne : Points Environnement Conseil du Nord - Pas-de-Calais

[1] Les PEC sont des organisations, les membres des auteurs liés par contact de l'organisation

Intéressé pour un développement de site sous Spip, ou pour connaitre les possibilités du logiciel : contactez-moi.

Thème Cisticole pour zpip

2010-08-15T18:41:01Z

Cisticole est un thème original pour Zpip. C'est un thème en 2 colonnes.

Basé sur 2 dégradés de couleurs, il est possible de choisir différentes configuration de couleurs.

Présentation

Le thème Cisticole est distribué sous licence GPL par Denis Chenu. Le thème est basé sur le layout Gala. Le contenu est situé avant le menu pour une meilleure prise en compte par les moteurs de recherche, il est positionné en absolu pour s'intégrer dans l'entête. Le menu est déroulant sur 4 niveaux, un peu de javascript permet de l'animer et de poser un repère pour les sous menus.

Actuellement, 8 variations de couleurs sont possible :

Capture

Page sommaire

Charte typo

Voir en ligne : Cisticole sur Spip Contrib

Le thème est sur la zone, il peut donc évoluer.

Il est prévu :

proposer la configuration du layout gala (colonne à gauche, 3 colonne ...)
proposer la configuration complète des couleurs

De nombreux thèmes disponibles

2026-04-30T22:00:00Z

Pour un premier site, il est possible d'utiliser des squelettes disponibles gratuitement sous licence GPL ou équivalente. Ses squelettes permettent de profiter rapidement de toutes les possibilités de SPIP.

Bien sûr, selon vos besoins , je peux créer un squelette personnalisé totalement adapté à vos souhaits et vos besoins.

Vous pouvez voir des exemples de squelettes que je peux mettre rapidement en place pour un coût faible sur la page dédiée de spip-contrib. Ces squelettes offrent en général tout ce que vous avez besoin pour votre site internet. Je peux adapter l'habillage du site à votre charte graphique.

Des squelettes à vos couleurs et à votre charte graphique

Une première adaptation sera d'intégrer vos couleurs et votre logo dans un de ses squelettes.

Nous décidons ensemble des couleurs ou vous me fournissez l'ensemble des codes couleurs que vous utilisez. Nous pouvons aussi partir des couleurs de votre logo existant.

Pour plus d'originalités et pour des besoins spécifiques, vous pouvez aussi choisir une mise en page que j'adapterai à SPIP et intégrerai dans votre site internet. Si vous n'avez pas d'idée de mise en page , vous pouvez en trouver sur oswt, sur oswd, ...). J'intégrerai ces mises en pages en respectant votre cahier des charges.

Si vos besoins graphiques sont plus importants, je peux aussi intégrer complètement une mise en page conçues par vous ou par vos graphistes. En validant avec vous l'équilibre entre le respect des règles sémantiques, la visibilité, l'ergonomie du site et le graphisme.

Un contenu selon vos besoins

Selon vos activités, il est possible d'intégrer

un portfolio ou galeries d'images
un système de commentaires ou un forum complet.
une mailing liste
un système d'agenda
Encore énormément d'autres possibilités de type de contenu ...

Votre interface d'administration

2026-05-01T22:00:00Z

Un accès complet à l'interface d'administration de votre site internet. Ceci vous permettra d'apporter toutes les modifications sur les pages en ligne ou sur l'organisation de votre site.

Ceci vous permet aussi d'ajouter facilement de nouveaux contenus, de nouvelles rubriques ou de nouveaux documents.

Se former à l'administration de votre site internet

Je vous propose une formation pour une ou plusieurs personnes chargées de l'administration du site. Après cette formation, ces personnes pourront modifier le contenu existant pour les mises à jour de vos informations. De plus, elles seront aussi totalement indépendantes pour l'ajout de nouveaux contenus, la modification de l'arborescence de votre site. Les droits de modification de chaque rédacteur peuvent être gérés par un ou plusieurs administrateurs.

Tester les modifications en ligne

Toutes les modifications peuvent être testées et validées pour voir directement en ligne le résultat et éventuellement revenir en arrière.

Selon la configuration de votre site internet, nous verrons comment ajouter une actualité (news), comment gérer les commentaires ou les forums.

Référencement de votre site

Nous verrons quelques règles pour que votre site soit mieux référencé sur internet. Ce référencement doit se faire principalement sur le contenu, mais aussi sur l'organisation de la page. J'attache une grande importance aux règles d'accessibilités et sémantiques de votre page, ceci est un atout important pour votre référencement. Je peux vous proposer aussi d'intégrer certains systèmes d'aide au référencement.

Contenu sémantique

Le rédacteur n'a pas à se soucier de la présentation finale, mais uniquement du contenu sémantique de la page. Il doit choisir quand mettre un titre, une liste pour que le contenu soit compréhensible. Ce contenu se mettra naturellement sur votre site avec le respect de la charte graphique que nous aurons décidé ensemble.