logo article ou rubrique
Documentation Escal

L’article que vous allez lire et issu des différentes sources de documentation existantes.
Il existe car le web est volatile, il serait dommageable pour les utilisateurs du squelette d’Escal de ne pas retrouver l’information.

Escal est un jeu de squelettes généraliste, aisément

  • configurable (pour choisir les éléments et noisettes affichés dans les colonnes)
  • habillable (pour indiquer des couleurs et apparences graphiques).

Configuration par interventions du webmestre dans l’interface privée.

  • le squelette ESCAL est libre, à l’exclusion de l’icône, propriété de l’Académie du Rhône
Ça y est ... ?

votre Spip ronronne

votre Spip ronronne

L’installation de SPIP est très simple et s’effectue en quelques minutes, aucune configuration spéciale n’est nécessaire sur votre ordinateur personnel, SPIP se gère entièrement sur le Web.

Tout ce dont vous avez besoin, c’est d’un navigateur Web (n’importe lequel) et d’un accès FTP pour installer les fichiers sur votre espace d’hébergement, que ce soit via une interface en ligne ou avec un logiciel de transfert FTP installé sur votre ordinateur.

Pour installer un site SPIP, il vous faudra un espace d’hébergement Web ordinaire pourvu d’une base de données SQL et capable d’exécuter du PHP. Mais soyez rassuré-e : aucune connaissance de PHP ou de SQL n’est nécessaire pour administrer un site SPIP ! Il vous faudra juste vérifier que votre hébergeur le propose.

Munissez-vous de vos accès, identifiants et mots de passe FTP et SQL. Ces éléments sont indispensables : si vous ne les connaissez pas, contactez votre hébergeur et demandez-lui de vous les rappeler.

La procédure la plus facile et la plus rapide est l’installation automatique avec « spip_loader ». Ce petit fichier va télécharger SPIP et l’installer lui-même chez votre hébergeur.

  • Récupérez le fichier spip_loader.php qui s’ouvrira dans une nouvelle fenêtre, via un clic droit, (enregistrez sous ...)
  • Déposez ce fichier dans votre espace d’hébergement (par FTP ou par tout autre moyen que vous propose votre hébergeur).
  • Visitez votre site avec votre navigateur habituel et affichez-y le fichier que vous venez de déposer, en vous rendant à l’adresse du style : https:// URL /spip_loader.php et suivez les indications.
  • Le script vérifie si votre hébergement est compatible puis indique la version de SPIP que vous allez installer ou mettre à jour.
  • Lancer l’installation automatique.

Une fois SPIP installé, vous pouvez laisser le script spip_loader.php sur le serveur en toute sécurité. Seuls les administrateurs autorisés et authentifiés pourront y accéder. L’avantage est de pouvoir, en cas d’alerte, mettre à jour votre SPIP très facilement.
Le spip_loader détecte les nouvelles versions le concernant et propose de se mettre à jour sans qu’on ait besoin de passer par un transfert FTP.

le squelette Escal est activé

  • Installer le plugin

Pour installer Escal, il faut l’installer comme n’importe quel plugin et l’activer.
Toutefois sur spipfactory il est installé par défaut ;)

Il sera aussi beaucoup plus facile de mettre à jour Escal pour profiter des dernières modifications et améliorations si on passe par l’installation automatique.
Toutefois sur spipfactory, c’est nous qui gérons la mise à jour automatiquement ;)

1° Si ce n’est déjà fait, il faut créer un dossier /plugins à la racine de votre site puis à l’intérieur de ce dossier, créer un sous-dossier /auto
comme dit plus haut sur spipfactory, nevous embêtez pas avec ça ;)

2° Rendez-vous ensuite dans l’espace privé du site, sur la page de gestion des plugins, URL //ecrire/ ?exec=admin_plugin

  • dans la partie "Ajouter des plugins" /ecrire/ ?exec=depots, ajoutez le dépôt par défaut de SPIP-Zone
  • Recherchez ensuite le plugin Escal /ecrire/ ?exec=charger_plugin
  • Il n’y a plus qu’à cliquer sur le bouton "Télécharger et activer".
  • Le plugin « Escal » s’installe avec les plugins « Mini Calendrier » & « Agenda »

Vous reste à configurer votre site :

  • Coté privé, Escal préinstalle
    une rubrique cachée avec deux articles, constatez la présence des mots-clés sous le titre de l’article|
    les Groupes de mots-clé, affichage et Agenda_couleur
  • Coté public

et vous avez créé vos rubriques, pleines d’articles passionnants mais vous trouvez votre site un peu trop stéréotypé.
Alors vous avez envie de personnaliser un peu ce site.
Ok ! Commençons par la base.

Important (au risque de me répéter) : on ne touche pas aux fichiers du plugin mais on se crée un dossier /squelettes qu’on met à la racine du site. On copie le fichier que l’on veut modifier du dossier /escal vers le dossier /squelettes en respectant l’arborescence. Et on modifie le fichier copié.

  • Le dossier /squelettes
    • Mais à quoi sert-il ?
      Ce dossier /squelettes va contenir toutes vos personnalisations, qu’elles concernent certaines images, une personnalisation CSS ou un fichier HTML. Il doit être créé via FTP à la racine du site, au même niveau que /config, /ecrire, /local, /tmp, /plugins etc.
    • L’intérêt d’un tel dossier est double :
      • vos personnalisations ne sont pas écrasées par une mise à jour de SPIP ou d’Escal
      • une erreur qui fait planter le site est vite corrigée en renommant le fichier concerné ou, au pire, en renommant le dossier /squelettes lui-même

personaliser Escal

la page de configuration dans l’espace privé permet de faire pas mal de chose



… La suite de cet article est réservée aux visiteurs enregistrés …

Mise en page - Concerne tous le site

soit la configuration des mots-clés, des couleurs, selon la langue, selon le secteur, les css, les cadres, les logos, Les langues Internationalisation

Les mots-clés

Pour profiter pleinement du jeu de squelettes ESCAL, il faut utiliser quelques mots-clés, au moment où vous activez ou mettez à jour, les groupes affichage et Agenda_couleur sont créés ainsi que les mots-clés à l’intérieur de ces groupes s’ils n’existent pas.


Si vous désactivez Escal, ces groupes perdureront mais si vous désinstallez Escal, ces groupes seront supprimés, ainsi que tout votre paramétrage d’Escal.

Le groupe affichage
mot-clérôle
acces-direct choisir l’article qui sera affiché dans le bloc "Accès direct" (noisette inc-acces_direct.html)
accueil choisir l’article affiché en onglet d’accueil seulement)(noisette inc-accueil.html)
actus choisir les articles qui seront affichés dans le bloc "Actus" (noisette inc-actus.html)
agenda choisir les articles ou la ou les rubriques dont les articles seront affichés dans l’agenda
annonce choisir l’article dont le texte sera affiché dans le bloc "Annonce" de la page d’accueil (noisette inc-annonce.html)
annonce-defilant choisir les articles dont le texte sera affiché dans le bloc "Annonces défilante" de la page d’accueil (noisette inc-annonce_defilant.html)
annuaire choisir l’article qui sera utilisé par la page annuaire.html
archive choisir la rubrique dont un article pris au hasard sera affiché dans l’onglet "Article archive" de la page d’accueil
articles-de-rubrique choisir la rubrique dont les articles seront affichés dans la noisette "Articles de rubrique" (inc-articles_de_rubrique.html)
article-libreN (N = 1 à 5) choisir l’article à afficher en bloc latéral
article-sans-date ne pas afficher les dates de publication et de modification pour un article précis
chrono pour afficher les articles d’une rubrique dans les menus en ordre anté-chronologique, comportement non transmis aux rubriques-filles seulement)
citations choisir l’article qui servira de réservoir pour les citations dans le pied de page
edito choisir l’article qui sera affiché dans le bloc "Edito" (noisette inc-edito.html)
favori choisir les sites dont les vignettes seront affichées dans le bloc "Sites favoris" (noisette inc-sites_favoris.html) seulement)
forum choisir le secteur qui sera utilisé pour le forum du site
invisible ce mot-clé équivaut aux 4 mots-clés suivants à la fois : pas-a-la-une + pas-au-menu + pas-au-menu-vertical + pas-au-plan
mon-article, mon-article2, mon-article3 choisir un à 3 articles qui seront affichés chacun dans un onglet du bloc central de la page d’accueil
pas-a-decouvrir choisir les rubriques et les articles à exclure de l’affichage dans la noisette "A découvrir" si on choisit "dans tout le site" (inc-decouvrir-articles-sites.html)
pas-a-la-une ne pas afficher une rubrique (et ses articles) ou des articles dans le bloc "les derniers articles ..." de la page d’accueil
pas-au-menu ne pas afficher une rubrique ou un article dans le menu horizontal. Ce mot-clé empêche aussi l’affichage de la rubrique dans la liste des sous-rubriques de la page rubrique
pas-au-menu-vertical ne pas afficher une rubrique ou un article dans les 2 menus verticaux
pas-au-plan ne pas afficher une rubrique (et ses articles) ou des articles dans le bloc "Plan du site" de la page d’accueil
photo-une choisir les articles dont les images seront affichées dans le bloc "Quelques images au hasard" (noisette inc-photos.html)
pleinepage choisir les articles ou les rubriques qui seront affichés en pleine page sans blocs latéraux
RubriqueOngletN (N = 1 à 5) choisir une ou des rubriques qui seront affichées dans les onglets en page d’accueil
site-exclu exclure des sites dans le bloc "Sur le web" (noisette inc-sites.html)
special choisir la rubrique et/ou les articles qui seront affichés dans le bloc à personnaliser (noisette inc-perso.html)
texte2colonnes pour afficher le texte d’un article en 2 colonnes
video-une choisir les articles dont les vidéos seront affichées dans le bloc "Vidéo" (noisette inc-video_accueil.html)
Le groupe type_rubrique
mot-clérôle
trombino appeler inc-rubrique_trombino à la place de inc-rubrique_normal dans la partie principale de la page rubrique afin d’afficher la rubrique avec ce mot-clé, donc le trombinoscope
votre-mot appeler inc-rubrique_votre_mot (à créer) à la place de inc-rubrique_normal dans la partie principale de la page rubrique
Le groupe type_article
mot-clérôle
votre-mot appeler inc-article_votre-mot (à créer) à la place de inc-article dans la partie principale de la page article pour tous les articles de la rubrique avec le mot-clé "votre-mot"
Le groupe Agenda_couleur
mot-clérôle
votre_mot pour choisir la couleur de fond des évènements dans l’agenda
Marron Quelques couleurs proposées par défaut pour colorer le fond de chaque événement
Noir
Rouge
Vert
Violet
  • Créer les mots-clés avec le titre que vous voulez
  • Pour chaque mot-clé, écrire dans le descriptif du mot-clé la couleur que vous voulez
    Vous pouvez mettre une couleur nommée comme red ou green, une couleur en code hexa comme #000 ou #9900CC et même une couleur en rvb comme rgb(255,0,0)
  • Renseignez le "texte explicatif" pour chaque mot-clé, celui-ci s’affichera en légende dans l’agenda avec la couleur correspondante
  • Attribuer le mot-clé que vous voulez à chaque événement (un événement sans mot-clé sera par défaut bleu foncé), préférez des couleurs foncées car le texte sera écrit en blanc. |
Le groupe trombino
mot-clérôle
votre-mot pour classer vos trombines si vous utilisez la noisette inc-rubrique_trombino

les couleurs

Une page de configuration dans l’espace privé permet de choisir les couleurs pour l’ensemble du site
fonds du site
fonds et texte des blocs
textes spécifiques
bordures

Mais on peut avoir envie de jouer un peu plus.

Selon la langue

Si on utilise le multilinguisme, on peut définir un fond en fonction du contexte de langue dans le site, en créant un fichier css pour chaque langue.

Ces fichiers doivent s’appeler XX.css où XX correspond au code de langue (fr, en, de, es, it, ....) et doivent se trouver dans le dossier /squelettes/styles
mettre dans ces fichiers le code suivant où couleur sera la couleur choisie pour chaque secteur.

Cette couleur pourra être
une couleur en code hexadécimal -> exemple : #0000FF
une couleur nommée -> exemple : grey
une couleur en code rgb -> exemple : rgb(24,125,255)

On peut évidemment définir d’autres règles CSS dans ces fichiers lang.css

Selon le secteur

On peut aussi définir le fond des pages en fonction du secteur dans lequel on se trouve. Il suffit de créer un fichier css pour chaque secteur.

Ces fichiers doivent s’appeler secteurXX.css (où XX correspond au numéro du secteur) et doivent se trouver dans le dossier /squelettes/styles
mettre dans ces fichiers le code suivant où couleur sera la couleur choisie pour chaque secteur

Cette couleur pourra être
une couleur en code hexadécimal -> exemple : #0000FF
une couleur nommée -> exemple : grey
une couleur en code rgb -> exemple : rgb(24,125,255)

On peut évidemment définir d’autres règles CSS dans ces fichiers secteurXX.css

les css

Très simplement, il suffit de créer un dossier /styles dans le dossier /squelettes avec dedans un fichier perso.css qui contiendra vos modifications.

les cadres

Tous les cadres latéraux que ce soit dans la page sommaire, rubrique, article ou autre, ont une class spécifique. On peut donc personnaliser les couleurs de chacun d’entre eux.
Tous ces cadres sont appelés de la même manière, "fichier" correspondant au nom de la noisette appelée.

  • Modifier leur position
    il suffit d’aller sur la page de configuration d’Escal et de choisir les noisettes qu’on garde et de les afficher où on veut et dans l’ordre souhaité.
  • changer la couleur
    une page de configuration dans l’espace privé permet de changer la couleur des noisettes (une seule couleur pour toutes les noisettes) .

Néanmoins, on peut changer l’aspect de chaque bloc individuellement en définissant ses propriétés CSS dans le fichier perso.css qui doit être placé dans le dossier /squelettes/styles.

A noter que les sélecteurs css correspondent au nom de la noisette concernée mais attention, en cas de nom composé, c’est bien le tiret du 6 qu’il faut employer, pas l’underscore (tiret du 8), comme pour cet exemple avec acces-direct.

Exemple : modifier l’aspect du bloc "Accès direct (inc-acces_direct)


- affichera un bloc rouge avec un texte blanc, même pour les liens.

Un autre exemple pour être plus clair avec le bloc "Dans la même rubrique" de la page article (inc-meme_rub)

on peut choisir la même couleur que le fond qui se trouve en-dessous ou rajouter dans perso.css le code suivant :

pour enlever le fond et les bords du texte de la noisette "Évènements" ou

pour enlever le fond et les bords de toutes les noisettes.

les logos

Vous avez vu les petits logos dans le coins des cadres et les logos des rubriques.

  • Les logos de rubriques ou d’articles
    Pour associer un logo à une rubrique ou a un article, c’est du SPIP pur. On joint le logo à la rubrique dans l’espace privé et il sera affiché.
  • Les logos des cadres
    Pour changer ou rajouter un logo de cadre, il faut aller dans le code et repérer ou rajouter à l’intérieur de la noisette correspondante une ligne de ce genre juste avant la balise fermante

en remplaçant (toujours après copie dans /squelettes/inclusions) acces-direct.png par le nom de votre fichier-logo que vous aurez placé dans le dossier /squelettes/images, en adaptant les valeurs pour la largeur et la hauteur et en remplaçant le texte de la balise alt par celui que vous voulez.

Si vous voulez que ce logo soit à droite, rajouter la class "a-droite" à la balise h1 comme sur cet exemple

Les langues Internationalisation

Tous les textes affichés sont paramétrés par une chaîne de langue.
Exemple :
on trouve ce texte :

"Vous aussi, vous utilisez ESCAL ?
Alors ajoutez votre site dans cette page."

Et ce n’est évidemment pas adapté à votre besoin. Vous préféreriez un simple

"Et si vous inscriviez votre site sur notre annuaire ?"

Pour cela, il vous faut créer un dossier /squelettes/lang dans lequel on va créer un fichier local_fr.php qui contiendra ce code :

On peut bien sur modifier n’importe quelle chaîne de langue ainsi.

Toutes les chaînes de langue d’origine se trouvent dans le fichier /escal/lang/escal_fr.php. Attention à bien respecter la syntaxe du fichier !

- Escal est international, d’autres fichiers de langue sont disponibles dans le dossier escal/lang et sont bien sur modifiables de la même façon. pour l’instant, traduit en :

  • albanais
  • Allemand [de] Deutch
  • Anglais [en] English
  • Espéranto [eo] Esperanto
  • Espagnol [es] Espanôl
  • Italien [it] Italiano
  • Letton [lv] Latvieŝu
  • Néerlandais [nl] Nederlands
  • ukrainien
  • Russe [ru] русский

Toutefois, si les traductions doivent être à jour pour la partie publique, en revanche, seul l’italien et l’anglais doivent être presque à jour pour la partie privée.

Afin d’accélérer les choses nous allons utiliser l’outil en ligne Traduire SPIP

En effet, si la partie publique est bien traduite en plusieurs langues, ce n’est pas le cas des pages de configuration d’Escal.

Pour cela, il faudrait traduire tous les textes des pages de configuration, ce qui est un énorme travail que je n’ai ni les compétences, ni le temps de réaliser.

L’espace des traducteurs accueille tous ceux qui souhaitent aider la communauté des utilisateurs de SPIP, en participant aux travaux de traduction de SPIP lui-même et de ses diverses contributions.

- Pour commencer le travail de traduction, vous devez :

  • vous inscrire sur le site : https://trad.spip.net/
  • vous connecter avec vos identifiants
  • choisir le module de langue à traduire (Escal donc !)
  • la langue d’origine qui vous servira de modèle (privilégiez la langue mère si vous le pouvez) ;
  • la langue cible qui est la langue vers laquelle vous traduisez ;

Pour la langue cible, vous devez choisir si vous travaillez vers une langue déjà existante, ou si vous créez une nouvelle langue.

Le head

Cette noisette n’affiche rien mais elle est essentielle.
Nom du fichier inc-head.html
pages concernées Toutes les pages
mots-clés aucun
C’est elle qui contient
l’appel au favicon, en le créant automatiquement à partir du logo de votre site, sinon on affiche le favicon à partir du logo d’Escal.
les balises meta pour (entre autres) le charset
la version de spip
l’email du webmaster
l’auteur du site
les directives pour les moteurs de recherche
les appels aux feuilles de style celle qui définit la mise en page générale (layout.css)
la feuille de style générale (general.css)
celle pour le menu (menu.css)
celle pour le forum (forum.css)
celle pour les couleurs (couleurs.css)
celle pour l’impression
celle pour vos surcharges personnelles (perso.css)
les appels aux javascripts pour le menu horizontal (menu.js)
pour le premier menu vertical (menu_vertical.js)
pour changer la taille du texte dans les articles (changetaille.js)
pour les effets de rotation des articles ou images dans les noisettes inc-actus et inc-photos (rotative.js)
(menu.js) pour le menu horizontal, pour Internet Explorer
(ie.css) pour que le menu horizontal et le menu vertical 2, pour Internet Explorer
(tabs_ie.css) pour les derniers articles de la page d’accueil, pour Internet Explorer

Ce n’est pas moins de 13 mises en pages possibles qui sont proposées :

5 mises en pages fixes avec paramétrage de la largeur totale et de celle des colonnes latérales
3 mises en pages fluides, c’est à dire s’adaptant à la taille de l’écran
5 mises en pages mixtes, c’est à dire avec une partie centrale fluide et les 2 colonnes latérales fixes. La largeur de ces colonnes étant paramétrable.

Chacun peut donc choisir sa mise en page mais je conseille d’utiliser une mise en page fluide en indiquant une largeur maximum. On profite ainsi du "Responsive Web Design" sans avoir un site trop large sur les grands écrans, ce qui peut gêner la lecture avec des lignes trop longues.

On peut aussi envisager des mises en page différentes selon la page sommaire, rubrique, article ou autre mais là il faut enlever cet appel du fichier inc-head et mettre celui qu’on veut dans le "head" de chaque page.

Exemple : Pour avoir une page d’accueil en 3 colonnes (layout PMP) et les autres avec 2 colonnes (layout PM)

on va procéder ainsi :

  • on paramètre le layout PM dans la configuration d’Escal
  • on copie le fichier inc-head.html de /escal/inclusions vers /squelettes/inclusions et on le renomme inc-head-sommaire.html par exemple
    dans cette copie, on modifie les lignes

par

on copie ensuite le fichier sommaire.html de /escal vers /squelettes
dans cette copie, on remplace

par

A noter
- que la feuille de style et le javascript spécifiques pour le bloc central de la page sommaire est dans la partie "head" du fichier sommaire.html, soit :

  • (alaune.css) la feuille de style du bloc central
  • (onglets.js) et (jquery.tabs.pack.js) permet l’affichage de l’onglet actif et l’effet d’enroulement/déroulement

- que la feuille de style pour l’agenda (agenda.css) est dans la partie "head" du fichier agenda.html

- rotative.js permet aussi les effets de rotation des articles ou des images pour les noisettes inc-annonce_defilant, inc-sites_favoris et l’éventuelle noisette inc-perso

- on rajoute l’appel vers la feuille de style pour la configuration d’Escal dans la partie privé du site (config.css)

- on rajoute l’appel javascript pour déplier/replier les noisettes (bloc_depliant.js) ou les forums des articles (bloc_depliant2.js)

configurer certaine balises meta du site
Paramétrage via le back office « https:// URL /ecrire/ ?exec=configurer_escal&cfg=meta »
Balise "Keyword"
Balise "Author" (déplacé dans sommaire.html)
  • choisir le layout qui définit la mise en page générale
    Paramétrage via le back office « https:// URL /ecrire/ ?exec=configurer_escal&cfg=layout »
  • choisir votre favicon
    Paramétrage via le back office « https:// URL /ecrire/ ?exec=configurer_escal&cfg=elements »

Bandeau

C’est le premier élément que verra un visiteur. Alors autant s’appliquer pour qu’il reflète au mieux l’identité de votre site. En fonction du secteur, de la langue, en "slider", avec un menu horizontal, une Identification simplifiée

0

Bandeau

Bandeau

En fonction du secteur

En fonction du secteur

En fonction de la langue

En fonction de la langue

Un bandeau slider

Un bandeau slider

Le menu horizontal

Le menu horizontal

Identification simplifiée

Identification simplifiée

La colonne principale

C’est la colonne centrale de contenu, page sommaire, rubrique, article

0

Sommaire, Rubriques & (...)

Sommaire, Rubriques & Articles

Sommaire - A la une

Sommaire - A la une

Rubriques

Rubriques

Articles

Articles

Les colonnes latérales

Plus communément appelé droite "Extra" et gauche "Menu"

0

Accès direct

aaaaaaaaaaaaaaaaaaaaa

Actus

Actus

A découvrir

A découvrir

Articles de rubrique

Articles de rubrique

Articles les plus vus

Articles les plus vus

Article libre 1 à 5

Article libre 1 à 5

A télécharger

A télécharger

Bloc à personnaliser

Bloc à personnaliser

Dans la même rubrique

Dans la même rubrique

Derniers articles

Derniers articles

Derniers articles syndiqués

Derniers articles syndiqués

Derniers commentaires

Derniers commentaires

Edito

Edito

Evènements à venir

Evènements à venir

Identification

Identification

Menu vertical dépliant

Menu vertical dépliant

Menu vertical déroulant a (...)

Menu vertical déroulant a droite

Mini calendrier

Mini calendrier

Mots-clés associé

Mots-clés associé

Navigation par mots-clés

Navigation par mots-clés

Photos au hasard

Photos au hasard

Rainette

Rainette

Recherche multi-critères

Recherche multi-critères

Sites favoris

Sites favoris

Statistiques

Statistiques

Sur le web

Sur le web

Vidéos

Vidéos

Pied de page

Malgré sa petite taille, commun a toute les pages, il a une grande importance, comme source d’informations supplémentaires.

0

Pages spéciales

Toutes les pages autre que les 3 pages de base (sommaire, rubrique et article)

Agenda et Mini-calendrier

Agenda et Mini-calendrier

Annuaire de sites

Annuaire de sites

Auteur

Auteur

Contact

Contact

Erreur 404

Erreur 404

Forum du site

Forum du site

Mots-clés

Mots-clés

Recherche

Recherche

Trombinoscope

Trombinoscope

Des modèles intégrés

Simplement une noisette de SPIP, rendue disponible de façon dynamique au sein même des articles (donc pour les rédacteurs), avec la syntaxe d’appel HTML, les paramètres étant pris dans l’environnement d’appel.

0


« L’écoute et la compréhension de la problématique de l’autre est un premier pas vers la solidarité. »
puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.98