Pyrat.net – Création de sites Internet

Des pictos SVG dans le texte

2023-08-10T16:59:08Z

Navigation

Localisation

Réseaux sociaux

Agenda événementiel avec SoyezCréateurs

2023-06-14T11:02:53Z

Principes

Tout article du site peut recevoir un ou plusieurs événements qui lui seront liés.

Vous pouvez donc, selon la nature de l'événement :

Faire un article pour l'événement et juste mettre la date dans l'événement
Faire un article générique pour plusieurs événements et mettre les détails spécifiques dans chaque événement rattaché

SoyezCréateurs peut être configuré pour lister tous les événements, y compris ceux passés. Ou seulement ceux dans le futur (ou pas encore terminés).

Résultat

Chaque date affichable provoque :

l'affichage d'un bouton calendrier dans les outils en haut du site [1]
ce bouton permet d'afficher un mini-calendrier avec en dessous la liste des prochains événements
le mois et l'année sont cliquables et mènent respectivement à une vue mensuelle ou une liste annuelle
la vue mensuelle permet de naviguer, et de basculer sur une vue à la semaine ou au jour

[1] ou d'un mini-agenda dans des configurations plus anciennes de SoyezCréateurs

Voir en ligne :

Nouveautés 2014 de SoyezCréateurs

2015-03-16T12:52:22Z

L'année 2014 a été riche en possibilités nouvelles pour soyezCréateurs. C'est surtout le mode communiquant qui a bénéficié de beaucoups d'améliorations [1].

Voici les plus marquantes :

Possibilité d'afficher le slideshow du mode communiquant en pleine largeur
Possibilité d'afficher l'introduction de l'édito en page d'accueil communiquant
Nouvelle possibilité : administrer des fonds de page tirés au hasard.Documentation du fonctionnement (comme les bannières)
Pouvoir afficher les rubriques DessousBreves (sous l'image défilante) même si elle n'ont pas d'article.
Si pas d'article, affichage des sous-rubriques
La page d'accès à un espace réservé propose un lien vers l'inscription. Page d'inscription au look du site.
Les crayons sont disponibles sur beaucoup plus d'éléments, en particulier, la page plan du site [2]
Meilleure présentation du retour vers le sommaire automatique : plus compacte avec seulement une image flottant à droite du titre
Les images du carrousel sont désormais cliquables
Avec le plugin QRCode, vous pouvez avoir un QRCode pour chacune des pages du site [3]
GisSecteur : Mettre ce mot clef à une rubrique où l'on veut afficher la carte Gis pour l'ensemble du Secteur (Rubrique racine de SPIP et toutes ses sous rubriques)
Les outils peuvent être toujours affichés en haut, y compris sur la page d'accueil du Mode Communiquant
Les liens sur les rubriques DessousBreves du Mode Communiquant peuvent être désactivés
ClassementAlpha : Mettre ce mot clef à la rubrique pour classer son contenu alphabétiquement
Un modèle pour afficher les détails d'un auteur :
Permet de faire un Trombinoscope, par exemple pour une mairie
Ajout de la configuration de l'affichage des goodies en mode communiquant. Celui-ci pourra soit s'afficher dans le contenu principal soit dans le zone du menu secondaire
Ajout de la possibilité de changer l'affichage de la « Vidéo à la une »
Ajout de la possibilité de configurer l'affichage des nouveautés (alias la syndication)
Possibilité de régler la hauteurs des cartes GIS pour : les rubriques et les articles
Possibilité de paramétrer une transparence alpha sur : en-tête, contenu, navigations principale et secondaire, pied
Pouvoir mettre des « ZoomSur » en dessous de l'Edito en Mode communiquant (Titre, Logo, Introduction)
Le lien « Participer à la vie du site » est déplacé en fin de navigation secondaire
Le lien de Connexion disparaît [4]
Le bandeau d'annonce pulse 3 fois au chargement de la page
De nombreux correctifs et ajustements des CSS, du code HTML pour son accessibilité, des possibilités de paramétrage

[1] Utilisé par exemple sur www.rapic.com, www.epss-edu.com …

[2] Très utile pour réorganiser rapidement l'ordre des éléments du site

[3] Intéressant à copier/coller dans votre communication papier.

[4] Si vous avez besoin d'aller dans l'espace d'administration, il faut rajouter /ecrire/ à l'URL de votre site.

Toutes ces évolutions sont intégrée dans notre offre d'hébergement SPIP+SoyezCréateurs de tout repos !

Fonctionnement de la compilation

2010-07-02T13:55:10Z

Diagramme de compilation avec SPIP

Voir en ligne : SPIP, PHP et Javascript sont dans un bateau

Initiation à la création de plugins

2010-07-01T13:28:05Z

Possibilités d'un plugin

Un plugin ça peut :

Fournir un ou plusieurs filtres
Fournir un ou plusieurs critères à utiliser dans les boucles
Rajouter des CSS ou des JavaScript côté public ou côté privé
Modifier l'interface d'admin visuellement ou dans son fonctionnement
Créer des tables et les utiliser
Ajouter des boutons dans le menu d'admin
Fournir ou modifier des balises
Fournir ou modifier des Boucles
Fournir des modèles (permettant par exemple de faire des raccourcis type comme )
Fournir des fichiers squelettes
Fournir des fichiers squelettes pour l'interface privés

Création d'une rubrique d'archive

2010-07-01T11:45:33Z

Créer une rubrique d'archive

Pour cela, nous avons besoin de définir un comportement spécifique à une rubrique. Sur spip, pour assigner un squelette spécifique à une rubrique particulière ou un article, il vous faudra créer un fichier squelette nommé rubrique=8.html. Ceci est bien sûr un exemple visant à vous montrer un nom type. Pour un article présent dans la rubrique 12, il faudrait utiliser article=12.html.

Mais ce n'est pas tout. Dans notre cas (une archive basé sur la rubrique portant l'identifiant 8) si nous n'utilisons que rubrique=8.html, l'affiche sera bien spécifique pour cette rubrique mais tous les articles inclus ainsi que les sous rubriques auront un affichage classique tel que défini dans rubrique.html si définie. Pour cela nous allons utiliser un nom du type article-8.html. [1] Idem pour la rubrique, rubrique-8.html permettra de définir un fichier squelette qui affectera l'ensemble des sous rubriques à la rubrique 8.

Donc pour faire une archive sur la rubrique 8, il faudra définir 3 fichiers squelettes : rubrique=8.html, rubrique-8.html et article-8.html. Ces derniers contiendront donc le code spécifique pour un affichage sous forme d'archive.

Les boucles pour un affichage chronologique

Afin, dans une rubrique, d'afficher les articles contenus dans un ordre chronologique nous allons utiliser une série de boucles disponible sur spip contrib que nous allons légèrement modifier.

A partir de ça, il nous suffit de rajouter le critère branche aux 3 boucles afin qu'elles aient le comportement voulu (pour afficher tous les articles contenus). Ce qui nous donne :

  [(#DATE|annee)]    [(#DATE|nom_mois)]    #TITRE

[1] Attention, le 8 ne pointe pas vers l'article 8 mais vers la rubrique

Utilisation avancée de spip

2010-06-29T12:05:30Z

Les Inclusions (INCLURE) sous SPIP

Dans certains cas, vous avez certaines parties de votre squelette qui sont répétées sur plusieurs pages. Il devient alors fastidieux de recopier ou copier/coller des parties entières de code qui sont identiques.

Afin de « remédier » à cela, nous pouvons utiliser les 2 possibilités suivantes :

[(#INCLURE{fond=votrefichiersquelette})]

les 2 possibilités fonctionnent, mais elles ne fonctionnent pas tout à fait de la même façon. Je vous invite bien sûr à consulter la doc de spip.net à ce sujet.

Les boucles récursives

Je trouve que la documentation d'origine sur les boucles récursives est très bien, je vous invite donc à aller la voir : Article sur les boucles récursives

La balise EXPOSE

Cette balise, permet d'exposer l'article en cour. Plus clairement, cela va vous permettre de distinguer par exemple l'article en cour de lecture dans un menu ou une liste d'articles. Cela fonctionne également dans le cadre d'une rubrique. Il vous faut donc l'utiliser dans une boucle d'article ou de rubrique afin d'exposer l'article ou la rubrique choisie dans l'URL. Voici un exemple de syntaxe :

#EXPOSE{contenu à afficher si actif}

Vous pourrez trouver plus d'information sur spip.net

La boucle HIERARCHIE

Cette boucle va vous permettre d'afficher les rubrique qui contienne la rubrique ou l'article passé en paramètre. Cela vous permettra d'afficher par exemple un file d'Ariane sur vos page afin de pouvoir revenir au rubriques parente. Cette boucle ne retourne ni la racine, ne la rubrique ou l'article en cour. Il convient donc de les rajouter dans le cas d'un file d'Ariane. Un petit exemple :

 Acceuil >  [(#TITRE|supprimer_numero)] >  [(#TITRE|supprimer_numero)]

Documentation spip.net de HIERARCHIE

Utilisation de `{doublons}`

Le critére doublons, va vous permétre de générer une liste d'éléments qui poura vous servir plus tard pour filtrer les article d'une seconde boucle afin par exemple d'enlever certain article d'un menu. Bien évidement vous pourrez retrouver plus d'info sur spip.net.

Allons plus loin dans les boucles

2010-06-29T09:43:55Z

En cas de résultat vide

Nous avons vu comment afficher les informations d'une boucle, comment trier les résultats avec les critères, comment traiter les résultats pour changer/modifier leur contenu avec les filtres.

Mais si il n'y a aucun résultat ?

Dans notre cas si il n'y a aucun résultat, cela enverra une simple

à notre visiteur. Afin de ne pas afficher ce qui contient les éventuels résultats au cas ou il n'y a pas de résultat nous allons utiliser ce code :


 [(#TITRE|supprimer_numero)]

Nous avons donc rajouté pour encadre les ligne et .

Cela nous permet donc d'encadrer le code qui sera à afficher autour des boucle si ces dernières retournent des résultats.

D'accord mais si je veux afficher un message à la place de rien ?

Et bien c'est dans le même principe. Si je veux afficher autre chose si il n'y a pas de résultat il me faudra encadrer ce quelque chose par le qui encadre les boucle et . Vous pouvez ainsi afficher ce que vous voulez en cas de non résultats, même une boucle !

Le même principe peut s'appliquer aux Balises

Dans le cadre de l'affichage d'un article, nous voulons afficher le titre, le chapeau, et le texte de l'article ou afficher un message si l'article n'existe pas. Voici donc un code qui permet cela :


 [(#TITRE|supprimer_numero)]
  #CHAPO 
  #TEXTE


 Désolé il n'y aucun article correspondant à ce numéro.

Il n'est normalement pas nécessaire de commenter ce code puisque qu'il n'y à rien de nouveau.

Mais voilà, si par exemple un rédacteur n'a pas entré de chapeau dans son article, le code HTML

s'affichera quand même. Pour remédier à ce problème nous allons utiliser la même technique que dans la partie précédente mais spécifique aux Balises.


 [(#TITRE|supprimer_numero)]
 [ (#CHAPO) 
]  #TEXTE


 Désolé il n'y aucun article correspondant à ce numéro.

Qu'est-ce qui a changé ?

Et bien c'est très simple, nous avons encadré la balise avec des parenthèses, puis nous avons encadré le code à afficher, si la balise contient quelque chose, avec des crochets. Cela permet donc de n'afficher le div du chapeau que si le chapeau a été complété par le rédacteur.

Création des première Boucles

2010-06-29T09:19:12Z

Les Rubriques

Pour créer une boucle, il vous faut d'abord écrire le paramètre de la boucle entre les symbole < et >. Voici un exemple de boucle que nous allons commenter.

Dans ce code, vous pouvez voir que la déclaration de la boucle est bien entre les 2 symboles cités ci-dessus. Le « _NomDeLaBoucle » est le nom de votre boucle afin de pouvoir la reconnaitre quand vous la fermerez. Essayez que votre nom soit le plus explicite possible afin de contribuer à la documentation de votre code, comme par exemple l'objectif de votre boucle.

L'élément entre parenthèses est le domaine de la boucle, c'est à dire quel est le type de donnée que vous allez chercher. Attention toutefois à ne pas oublier le S à la fin qui est une erreur commune. Pour afficher des articles par exemple il aurais fallu écrire (ARTICLES).

Une fois la boucle « ouverte », nous pouvons écrire ce qui va être répété et qui servira à afficher le contenu demandé par la boucle. Dans notre cas, nous avons demandé toutes les rubriques, nous pouvons rajouter, à la ligne, la balise #TITRE qui nous permettra d'afficher les titres des rubriques demandées.

Enfin, pour fermer la boucle (important) il vous suffit d'utiliser ceci :

Ne pas oublier le / qui permet de savoir que c'est la fermeture de la boucle. Le nom doit également être exactement le même que celui utilisé pour ouvrir la boucle.

Notes : Quelques règles sont à respecter.

Le mot BOUCLE doit forcement être écrit en majuscules.
Il faut forcément fermer une BOUCLE.
Le nom de la boucle peut être constitué de _ mais il faut éviter les accents ou tout autre caractère spécial.

Afficher votre page

Une fois réaliser, votre page est disponible à l'adresse suivante :

http://adressedusite/?page=nomdelapage

Il vous suffit de remplacer adressedusite par l'adresse de votre site et nomdelapage par le nom du fichier squelette sans le .html.

Encore une fois vous pourrez retrouver plus d'information sur le site de spip.net

les balise dans du code HTML

Avec l'exemple utiliser ci-dessus, vous n'aurez qu'une liste de titre mélanger, sans retour à la ligne et sans lien vers ces rubrique. C'est pas très beau, et absolument pas présentable. Voici un bout de code qui vous permétra de présenter sa un peut mieu :


 #TITRE

Dans ce code, le fonctionnement est le même. Sauf que nous avons utiliser un peut de HTML mélanger avec notre code SPIP. Nous ne nous étalerons pas sur le fonctionnement de HTML et ces balise car ce n'est pas le but ici. Nous partirons du principe que vous connaissez ce langage.

Nous avons toutes fois utiliser une nouvelle balise qui est #URL_RUBRIQUE, qui va vous servir à générer l'url pointant vers votre rubrique.

Les Critères

ce code est bien mais il nous affiche l'intégralité de rubriques qui constitue notre site. Nous allons donc utiliser un critère afin de n'afficher que les Rubriques qui sont à la racine de votre site. Voici un code qui le permet :


 #TITRE

Vous l'avez remarquer nous avons rajouter racine, en effet, les critère sont inclut entre 2 accolades. grace à la doc de SPIP, vous pourrez avoir la liste des critère et leur fonctionnement.

Trier les Résultats selon une valeur

Pour trier les resultat, cela fonctionne de la méme maniére que les critére, mais il faut utiliser la syntaxe :

{par valeur}

dans notre cas, nous voulons trier les article par numéro dans le titre par exemple. Ce qui donnerais coupler avec le critère racine :


 #TITRE

« num titre » désigne donc le trie par numéro de titre.

Les Filtres

Nous avons afficher les rubriques avec les boucles et balise, nous avons choisie et trier celle que nous voulions avec les critères, mais il serait mieux de ne pas afficher les numéro qui précèdes nos articles. Nous allons pour cela utiliser le filtre « supprimer_numero ». Voici, encore une fois un exemple commenté :


 [(#TITRE|supprimer_numero)]

Afin d'appliquer un filtre à une balise, il faut au préalable entourer la baliser par [()]. Cette subtilité sera reprise plus loin. On à ensuite rajouter le filtre avec le symbole « pipe » (ALT GR + 6) puis le nom du filtre. vous pouvez bien sur appliquer plusieurs filtre toujours en utilisant le symbole pipe pour commencer. Vous pourrez trouver une liste des filtre sur spip.net.

Plugins avant-gardistes

2010-06-28T13:14:44Z

Bandeau : Amélioration de l'interface de l'espace privé.
CFG : Permet la configuration de certain plugin.
Crayons : Le plugin Crayons dynamise l'espace public en permettant des mises à jour directes des articles et autres sans passer par l'espace privé.
Forums : Permet une meilleur gestion des forum de SPIP.
FullText : Ce plugin permet d'une part d'exploiter le mode de recherche FULLTEXT de MySQL et d'améliorer ainsi énormément les recherches par rapport au fonctionnement natif de SPIP, et d'autre part d'indexer le contenu de certains documents.
Médiathèque : Un plugin pour gérer tous vos documents de façon centralisée.
Job queue : Un changement de la gestion des tâches de fond de SPIP
MediaBox : Permet l'affiche de popup de manière un peut plus jolie, ainsi que la création de galerie de photo. Essentiellement utiliser par Médiathèque.
Notifications : Le plugin notifications sait envoyer des mails quand les gens s'expriment dans le forum de l'espace privé, sous un article, ou dans la messagerie personnelle…
Porte Plume Partout : Le plugin « Porte-plume Partout » ajoute la barre d'outil "Porte-Plume" à l'interface de SPIP à la plupart des champs de saisie.
Prévisualisation pour les rédacteurs : Ce plugin permet d'activer la prévisualisation des articles « en cours de rédaction » et non plus seulement ceux « proposé à l'évaluation ».
Protection formulaires : Permet d'afficher un message de confirmation lors de l'édition d'un article en cas de clic sur un lien externe. Cela évite donc les perte de donnée inutiles.
Saisies : Il permet l'ajout de certaine balise afin de facilité la création de formulaire de saisie. Essentiellement utiliser par CFG.
SPIP Bonux : Rajoute certain fonctionnalité pour le fonctionnement des squelettes.

Notes : Il est conseillé de les installer dans le dossier extensions/, dans un sous dossier nommé par exemple indispensables/, afin que ces derniers soient utilisés par défaut. Les plugins installés dans le dossier plugins/ sont à activer manuellement via l'interface d'administration.