Facilitateur de site

Des trucs et des astuces pour aménagé votre squelette (site) et facilté sa lecture.

Charte graphique

C’est important d’avoir une homogénéité de lecture. La charte graphique est là pour ça.
Elle sert aussi à proposer des visuels qui sont normés et si utilisés en extérieur doivent correspondre à l’image de votre site.

Logos d’articles

Nous vous conseillons comme dimensions : 8 cm X 8 cm en 72 Dpi.

Polices

Par défaut, Escal utilise les familles de polices suivantes : Verdana, Arial, Helvetica car ce sont des polices qui sont présentes sur tous les ordinateurs, elles sont devenues des standards.
Mais on pourrait avoir envie d’en utiliser une autre, le problème est que l’on ne peut jamais être sûr que le visiteur aura bien cette police installée sur son ordinateur ou sa tablette ou son smartphone. Il va donc falloir l’embarquer avec votre site pour la fournir à vos visiteurs.
Voici un site permettant de trouver son bonheur : dafont.com ; Il y en a d’autres, plein d’autres...

Une fois que vous avez trouvé la police de la mort qui tue, il faut télécharger cette police qui est normalement fournie sous plusieurs formats pour fonctionner sur tous les navigateurs et appareils. L’idéal est d’avoir les formats suivants :

   .eot pour IE9 et +
   .eoteot ?#iefix pour IE6-IE8
   . woff pour les navigateurs modernes
   .otf pour Safari, iOS, Mobile
   .ttf pour Firefox, Safari, iOS, Mobile
   .svg pour iOS, Mobile

Ces polices doivent être copiées dans un dossier /squelettes/fonts (à créer)

On va ensuite rajouter ceci dans perso.css (fichier à créer s’il n’existe pas dans /squelettes/styles). Le code est bien sur à adapter avec le nom des fichiers de la police que vous utilisez.

Souvent ce code est fourni avec le jeu de polices mais il faut adapter le chemin de l’url pour les fichiers.

@font-face {
font-family : 'texgyreadventorregular' ;
src : url('../fonts/texgyreadventor-regular-webfont.eot') ;
src : url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
url('../fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg') ;
font-weight : normal ;
font-style : normal ;
}

Voilà, maintenant, votre code

titre-rubrique, #titre-article {

font-family : 'texgyreadventorregular' ;
}

sera pris en compte partout et vous avez de jolis titres !

Et si on veut utiliser cette police sur l’ensemble du site, on utilisera ce code :

body {
font-family : 'texgyreadventorregular' ;
}

Attention Veillez à ne pas perdre l’accessibilité visuelle de votre site

Ombres portées
Pour les photos et autres objets qui le nécessitent il peu être est agréable de voir leur ombre sur la page.
Elles sont mises essentiellement sur les images qui, au clic, se dévoilent dans une nouvelle fenêtre en plus grandes.
Dans le logiciel graphique :

Opacité : 75 %
Angle : 135°
Distance : 37 px
Grossi : 7 %
Taille : 43 px
Bruit : 0 %
Vignettes
Elles sont construites comme une feuille en format A4 (21 cm X 29,7 cm) et sont réduites à 5 cm de largeur et 96 Dpi pour obtenir le format final.
Si il s’agit d’une vignette qui charge un Pdf, il faut ajouter via un logiciel de retouche d’images une corne de page en haut à droite de la vignette.

Accès restreint
Le plugin Accès restreint est installé en "natif" avec le squelette Escal.
Sur ce site il est utilisé pour permettre de mettre des documents à disposition suivant des "Zones" réservées. Ces zones sont crées, par exemple, pour mettre des comptes-rendus de réunions, voire des propositions d’articles. Chaque personne déclarée "visiteur" peut y accéder avec des zones déclarées qui lui sont attribuées.

Créer une zone

Faire une rubrique spécifique (ici c’est dans la rubrique "Espace réservé") et au moins un article.
Sur la barre des menus, toujours en espace privé, aller dans Publication / Accès Restreint et Créer une nouvelle Zone.
Cocher la case "Restreindre l’accès à cette zone dans la partie publique" (pour l’instant, il n’y a pas lieu à ce que des personnes accèdent à l’espace privé ; trop dangereux...).
Cocher la rubrique concernée, qui vient d’être créée (avertissement : attention que cette rubrique ne soit pas cochée dans une autre zone !).

Déclarer

Aller sur la fiche du Visiteur (ou autre...) qui est concerné par cet espace et ajouter (Édition / Auteurs).
Ajouter une zone (ou plusieurs...). Note : c’est ici que vous déclarez les zones auxquelles le Visiteur à droit !

Identification
Déclarer le bloc qui est dans le squelette d’Escal. Ici il est dans la colonne de droite.

Où
Un onglet spécifique a été créer en page d’accueil : Espace réservé.

Documentation
Escal

    Identification
    Accès restreint
Plugin Accès restreint

Acronymes, abréviations et sigles

L’acronyme est un sigle qui se prononce tel qu’il s’écrit, par exemple l’ARÉMORS pour désigner l’ Association de recherche et d’études sur le mouvement ouvrier dans la région de Saint-Nazaire. Vous remarquerez que les lettres ne sont pas séparées par des points afin de lire d’un seul trait le nom.
L’abréviation est quand le mot est tronqué, par exemple "La Sécu." pour parler de la Sécurité sociale.
Le sigle est une suite de lettres qui se prononcent une à une, par exemple la "S.N.C.F." pour la Société Nationale des Chemins de Fer Français. Vous remarquerez que les lettres sont séparées par des points afin de lire le nom lettre par lettre.

Nous mettrons une info-bulle au passage de la souris sur eux. Il peut y être un lien pour se rendre sur un site internet ou une autre page de notre sujet.

Cela est une source d’information aussi pour les personnes non concernées directement. Un Espagnol connaît bien la RENFE mais pas la S.N.C.F..

Certains et certaines pensent que nous savons toutes et tous ce qu’est le P.C.F. ou la C.G.T., mais qu’en est il des enfants avec leurs premiers pas dans l’adolescence, des étrangers aussi qui ont leurs propres sigles, ou d’ici plusieurs années d’éventuels changements de noms ?

Inclusive ou pas ?

Pour les mêmes raisons d’accessibilité, nous éviterons d’employer cette forme d’écriture, tout au moins l’utilisation du point médian
.
Toutefois dans un esprit féministe, nous essaierons d’utiliser une écriture avec la forme féminine incluse pour toutes et tous. Vous trouverez peut-être les phrases un peu longues, mais elles seront lisibles en écrit et à l’oral.
Bien sûr nous respecterons celles et ceux qui l’utilisent. Par exemple, dans la transcription d’une allocution que nous diffuserions, si le point médian est présent, nous le laisserons.

Crédits

Dessin ou photo, nous mettons systématiquement le crédit des autrices ou auteurs, voir propriétaires. C’est un droit et aussi une forme de reconnaissance de leur travail. De même nous mettons la cote des archives ; cela permet de retrouver plus facilement les sources de documents.
Les logos des articles font exception à cette règle dans la majorité des cas. Ce n’est que pour une raison technique lié à ce gestionnaire de contenus (SPIP). Toutefois, ils sont tous la propriété du Collectif et sont libres de droits.
Réseaux sociaux

Le Collectif n’a pas encore de pages ou comptes sur les réseaux sociaux. Les logos, en bas de page, vous permettent de publier le lien de l’article sur lequel vous vous trouvez sur votre propre réseau.
À notre connaissance, pour l’instant, seuls "Facebook" et "X" permettent, techniquement, de le faire.
Tabulations

<div style="text-indent :3em;">Mon texte en retrait de 3e niveau</div>
<div style="text-indent :6em;">Mon texte en retrait de 6e niveau</div>

Donne :
Mon texte en retrait de 3e niveau
Mon texte en retrait de 6e niveau

ps/ _Cette documentation existe parcequ'il nous on autorisé à Copier/Coller.

Merci à Jean Christophe, Sandy, Patrice Moreel, SPIP, etc .._