ElgarWeb - Ensemble le web
Le projet Elgar Web a pour objectif de donner la possibilité aux communes du territoire Pays Basque de disposer plus facilement et à moindre coût d'un site internet accessible aux personnes en situation de handicap et écoconçu.
Le réseau CCA-CIA de la Communauté Pays Basque a fait appel au Collectif d'indépendants Translucide, spécialisé dans l'écoconception web.
L'objectif est de créer un thème libre de droits (sous licence MIT) pour le CMS Translucide.
-
Récupérer les fichiers du CMS CMS Translucides et les décompresser
-
Décompresser le thème elgarweb dans le dossier
/theme
- Vous devez avoir à la racine de votre hébergement ceci :
api/ ajax.admin.php ajax.php config.init.php db.php function.php <-- fonctions principales install.php lucide.css <-- CSS du mode édition lucide.edit.js lucide.init.js translation.php <-- fichier de traduction principal theme/ default/ elgar/ <-- le thème elgarweb admin/ alaune.php <-- mise en avant d'un événement/actualité lang.php <-- gestion du multilingue tourinsoft.php <-- événements Tourinsoft img/ tpl/ <-- modèles de pages annuaire-liste.php annuaire.php arrete-liste.php arrete.php article-liste.php <-- page liste pour agenda et actualités article.php <-- page détail pour actualités contact.php event.php <-- page détail pour agenda home.php navigation.php <-- page de navigation intermédiaire page-sommaire.php <-- page avec sommaire intégré page.php <-- page générique (pour mentions légales...) personnalites.php recherche.php sitemap.php Licence ariane.php footer.php function.php <-- fonctions du thème header.php readme.md style.css style.min.css translation.php <-- fichier de traduction du thème .gitignore .htaccess Licence favicon.ico index.php readme.md robots.txt
- Vous devez avoir à la racine de votre hébergement ceci :
-
Lancer l'installation de Translucide en allant à l'adresse où se trouve
index.php
:- Rentrer les informations pour se connecter à la base de données (vous devez l'avoir créée précédemment)
- Choisir le thème Elgar qui est dans le dossier
/theme
- Choisir vos accès administrateurs, qui vous permettent par la suite d'ajouter d'autres utilisateurs et de modifier les contenus du site
Dans le fichier config.php
qui s'est créé suite à l'installation vous pouvez modifier les variables suivantes :
- Édition barre d'outils $GLOBALS['toolbox'] : vous pouvez retirer les commentaires devant les fonctionnalités que vous voulez utiliser. /!\ Attention l'option de justification de contenu (justifyFull) peut rendre non accessibles vos contenus si c'est utilisé.
$GLOBALS['toolbox'] = array(
"h2",
"h3",
//"h4",
//"h5",
//"h6",
"bold",
"italic",
"underline",
//"superscript",
//"fontSize",
//"color",
"p",
"blockquote",
"highlight",
"insertUnorderedList",
//"justifyLeft",
//"justifyCenter",
//"justifyRight",
//"justifyFull",
//"InsertHorizontalRule",
//"viewsource",
//"icon",
"media",
"figure",
//"video",
"lang",
//"anchor",
//"bt",
"link"
);
- Vous pouvez modifier le type de contenu ajoutable avec la variable $GLOBALS['add_content'] :
$GLOBALS['add_content'] = array(
"article" => ["fa" => "fa-rss", "tpl" => "article"],
"event" => ["fa" => "fa-calendar-empty", "tpl" => "event"],
"event-tourinsoft" => ["fa" => "fa-calendar-empty", "tpl" => "event"],
"annuaire" => ["fa" => "fa-location", "tpl" => "annuaire"],
"arrete" => ["fa" => "fa-info-circled", "tpl" => "arrete"],
"page" => ["fa" => "fa-doc-text", "tpl" => "page"]
);
Dans le fichier config.php
:
-
Vous devez spécifier le fichier de fonctions spécifiques au thème dans la variable
$GLOBALS['function'] = 'function.php';
-
Vous devez également ajouter les filtres suivants qui permettent de construire des URL (pour le moteur de recherche par exemple) :
// Filtre url autorisé
$GLOBALS['filter_auth'] = array(
'page',
'user',
'recherche',
'month', 'year',
'start', 'end'
);
Pour le thème vous pouvez aussi créer des pages spécifiques. Pour ajouter des contenus suivez le tutoriel
Pour le bon fonctionnement du site vous devez créer des pages types dont le permalien soit :
recherche
à partir du templaterecherche
contact
à partir du templatecontact
En plus si votre site comporte certaines sections comme des actualités vous devez créer des pages qui permettent de les lister avec les permaliens suivants :
actualites
à partir du templatearticle-liste
agenda
à partir du templatearticle-liste
annuaire
à partir du templateannuaire-liste
publication
à partir du templatepublication-liste
Il est important de garder ces permaliens car la zone de filtres des tags/catégories se nomme ainsi dans le code.
Si vous saisissez vos évènements dans Tourinsoft et que vous voulez les rapatrier dans le site il faut spécifier l'URL Tourinsoft qui contient vos évènements dans la variable $GLOBALS['tourinsoft_flux']
dans le fichier config.php
.
En plus vous devez créer un cron (tâche planifiée) qui s'exécute après minuit (heure à laquelle Tourinsoft met à jour le flux distant) sur le fichier /theme/elgar/admin/tourinsoft.php
Si votre site utilise plusieurs langues vous devez spécifier les langues existantes dans le fichier config.php
et les URL des domaines des autres langues qui doivent toutes pointer vers le même dossier où est installé le CMS.
Exemple pour un site en français et basque de config.php
:
// Fixe la langue en fonction de l'extension du nom de domaine
if(strstr($_SERVER['SERVER_NAME'], '.eus'))
$lang = $_SESSION['lang'] = "eu";
else
$lang = $_SESSION['lang'] = "fr";
// Variables sites pour le multilingue
$GLOBALS['language'] = array('fr','eu');
$GLOBALS['theme_translation'] = true;
$GLOBALS['domain_lang']['fr'] = "www.elgarweb.fr";
$GLOBALS['domain_lang']['eu'] = "www.elgarweb.eus";
$GLOBALS['domain'] = $GLOBALS['domain_lang'][$lang];
De plus vous devez ajouter les traductions dans le fichier translation.php
qui contient déjà les textes en anglais, français et basque pour l'interface vue par les visiteurs du site.
Pour la prise en main du CMS nous vous invitons à consulter ce tutoriel
Le site n'utilise pas de menu déroulant mais des pages intermédiaires de navigation pour simplifier le code HTML et aussi rendre la navigation plus stable à la souris. Pour créer une page intermédiaire de navigation vous devez :
- Créer une page avec le template
navigation
- Ajouter au menu principal cette page voir tutoriel de prise en main et ajouter les pages qui dépendent de ce menu.
Le template sitemap.php
reprend les éléments du menu dans du header et y ajoute les pages connecter à travers le template navigation.php
.
Également y sont ajoutés à la fin les liens présents dans les <ul>
du footer contenu dans les champs editable #footer-liens
et #footer-liens-webmaster
. Typiquement des liens vers des pages secondaires (actualité, agenda, annuaire, téléchargement).
Pour personnaliser le thème vous pouvez modifier le fichier style.css
dans le dossier theme/elgar/
.
Attention à bien prendre en compte les règles d'accessibilité.
Vous pouvez modifier les couleurs des class des typos .color
& .color-alt
et des fonds .bg-color
.
Bien prendre en compte les ratios de contraste à au moins 4.5:1 pour limiter les problèmes d'accessibilité. Pour plus de détails voir le point 3.2 du RGAA.
Pour vous aider pour maintenir l'accessibilité du site que vous allers construire vous pouvez suivre le tableau des critères RGAA que nous avons mise en place pour voir les critères à impacts à surveiller que vos soyers développeurs et modifier le CSS, mais aussi pour les éditeurs de contenu.
Dans les fichiers du dossier tpl
du thème vous pouvez utiliser des fonctions qui vous permettent de donner la main au webmaster sur le contenu une fois en mode édition : voir documentation du CMS, .
D'autres fonctions sont utilisables librement dans le code des templates :
_e()
permet d'afficher une traduction qui est dans le tableau présent dans le fichiertranslation.php
du dossier du thème. La variante__()
fait juste un retour de la traduction pour la manipuler en variable par exemple mais n'affiche pas la traduction.make_url()
permet de créer des URL normées avec notamment le forçage du nom de domaine :make_url(__('agenda'), array("domaine" => true))
par exemple permet de faire un lien vers la page agenda (en utilisant la traduction du motagenda
) et y ajoute le nom de domaine complet (https://www.elgarweb.fr/agenda)tag("nom-de-la-zone")
permet de créer une zone éditable pour ajouter des tags/catégories à la page courante. Typiquement pour pouvoir ensuite filtrer dans les pages qui listent des contenus, comme les pagesActualités
ouAgenda
.href()
permet de créer des liens éditables :<a <?php href('nom-du-lien');?>>texte du lien</a>
Nous ne sommes pas responsables de l'utilisation du thème. Par défaut le thème est totalement conformé au RGAA. Nous ne sommes pas garants du niveau d'accessibilité de votre site. Nous ne pouvons pas être tenus responsables de quelconque dégradations d'accessibilité dues à vos modifications ou mauvaise saisie des contenus.
Nous vous recommandons de limiter les modifications du thème aux couleurs de typographie et des fonds de couleur dans le fichier style.css
, tout en analysant les ratios de contraste pour avoir toujours au moins un ratio de 4.5:1 entre la couleur et le fond.
Vous pouvez suivre le tableau des critères RGAA pour voir les points de vigilance à avoir sur les éléments impactés par le CSS.
Aucun SAV ou support n'est compris avec le thème/dépôt Github. Aucune maintenance ou suivi des tickets n'est possible. Des changements, améliorations et/ou corrections peuvent advenir suite à la commande de la Communauté Pays basque.
Elgarweb est sous licence MIT, merci de vous référer au fichier Licence
à la racine du dossier.
L'équipe Translucide qui a participé à ce projet se compose de Simon Vandaele développeur web et auteur du CMS Translucide, Maud Subiry graphiste pour le Webdesign, Stéphanie Leroux pour l'intégration HTML & CSS, Dominique Nicolle pour l'accessibilité.