Vous êtes ici : Accueil Support Documentation Tutoriels Créer son site avec le produit site communal (Plone 2.5)

Créer son site avec le produit site communal (Plone 2.5)

Note: Ceci est une impression contenant toutes les pages du Tutoriel sur une seule page. La version paginée est disponible ici.

Comment modifier les thèmes, le logo, le banner, les couleurs, le contenu, les produits, etc

La navigation par thème

Pourquoi privilégier une navigation par thèmes, quels principes respecter


L'information reprise sur un site communal est très variée et comprend une masse importante de documents.

themes.jpgLes thèmes permettent d'orienter presque instinctivement l'internaute sans qu'il aie à lire beaucoup d'information.

Le libellé du thème doit être le plus expicite tout en gardant sont aspec "grand ensemble d'information".

A vouloir être trop précis à ce niveau, on exclu certaines informations; ce qui conduit à devoir créer d'autres thèmes. Plus il y a de dossier thèmes à la racine du site, plus on s'oriente vers une navigation par rubrique.



Prenons l'exemple du site de Seneffe qui a été organisé comme suit:

Le thème "Commune" reprend ce qui est "officiel", les services public, para public, le politique, l'enseignement.

Le thème "Communication" ne respecte pas la typologie de classification des autres thèmes. Cela a été mentioné lors d'un audit. En effet, Commune, Loisirs et Economie reprennent des catégories d'"acteurs" (servcices communaux, enseignement pour les écoles,...) alors que Communication reprend des types d'information (articles, événements, communiqués de Presse,...). L'idée du thème communication est de centraliser l'information en un thème qui devient le "journal" du site.

Le thème "Loisirs" reprend les associations, les club sportifs, la culture, le tourisme, ...

Le thème "Economie" reprend les indépendants, les entreprises, l'horeca, l'emploi et la formation

Testons quelques scénarios:
Je cherche une école primaire, ou la trouver: dans le thème "Economie", pas vraiment;  Loisirs, non plus; dans le thème "Commune", il y a de fortes chances.
Je cherche un club sportif: il y a de fortes chances de le trouver dans loisirs.
Une entreprise, dans "Economie" et ainsi de suite.

La structuration de l'information par thèmes doit permettre de fonctionner par déduction. Comme il y a peu de thèmes, la démarche pour trouver la bonne porte d'entrée devient instinctive et prend peu de temps. L'internaute, après quelques essais, comprend rapidement comment trouver l'information sans devoir lire et relire une dizaine de rubriques. En un coup d'oeil, il sait quel choix opérer.

Les noms des thèmes reprennent des termes du quotidien et non des appelations que l'on crée pour l'Internet tels que "Vie pratique" qui veut tout dire et ne rien dire (chercher une formation, un emploi, une école, ... tout peut être repris sous l'appelation "Vie pratique").


Analysons l'organisation de l'information:

organisation-themes.jpg

Il est important que les thèmes doit organisés de telle manière à représenter des grands ensembles équilibrés d'information.
Un thème est mal libellé s'il comporte 20 pages d'informations alors que les autres en comportent 500.

Il est aussi important de tenir compte du fait qu'il s'agit d'une navigation à trois niveaux:

Les deuxièmes niveaux comprennent des rubriques qui permettent de catégoriser plus finement l'information reprise sur le site.

Exemple: Créer un dossier CPAS au deuxième niveau n'est pas cohérent avec le fonctionnement d'une navigation à trois niveaux.
L'idée, c'est bien de pointer vers la page ou le mini site d'une organisation et d'ouvrir un troisième niveau de navigation en pointant sur le dossier de l'organisation comme dans l'exemple suivant.

troisniveauxouverts.jpgSi le "CPAS" était au deuxième niveau, il faudrait chaque fois activer le menu déroulant pour accéder à un de ses sous-dossiers.

Dans le cas ou l'on veut rendre une orgaisation plus visible ou accessible, il faut créer une autre "porte d'entrée" en créant un lien à partir d'un portlet (boite d'information visible dans la colonne de gauche ou de droite) visible en page d'accueil.

Autre exemple: Les pages de l'office du tourisme sont dans "Loisirs/Tourisme/Office du Tourisme".

Et le tourisme est un des atout majeur de ma commune.
Dans ce cas, on peut créer un portlet dédié au tourisme en page d'accueil.












troisniveauxouverts2.jpgLe troisième niveau permet d'afficher l'arborescence de l'organisation.

Nous pouvons voir qu'un thème une fois "ouvert", permet d'accéder à tous les éléments qu'il contient en un clic de souris

Par ailleurs, la navigation est claire et lisible.

On distingue bien les "thèmes", les "rubriques" et au troisième niveau l'arborescence de l'élément sélectionné.



La navigation: les thèmes

Comment fonctionne la navigation du produit, comment renommer les thèmes, créer les sous-dossiers, etc.

themes.jpgLa navigation comprend trois niveaux.
Le premiers niveau est affiché par le portlet "thèmes"
Dans ce cas ci, nous avons quatre thèmes nommés "Commune", "Communication", "Loisirs", "Economie".

Le portlet "thèmes" affiche le Titre des dossiers situés à la racine du site et dont les identifiants sont listés dans l'espace de configuration du produit.

Nous allons modifier l''id' d'un dossier repris comme un thème en renomant ce dossier. Pour ce faire, il faut cliquer sur l'onglet "contenu" à la racine du site, cocher la case devant le dossier que l'on veut renommer et cliquer sur le bouton "renommer"

renommerdossier.jpg

nouvel-identifiant.jpg



Attention, l'"id" d'un élément ne doit pas comprendre d'espace, d'accent, de majuscule (les espaces doivent être remplacés par un tiret "-" )

Une fois le dossier renommé, un message apparaît dans le "portlet thèmes" à la place du nom du dossier qui vient d'être renommer.

Il suffit de cliquer sur ce message pour aboutir dans l'espace de configuration qui permet de lister les "id" des dossiers que l'on veut reprendre comme "Thèmes" (en effet, il peut y avoir d'autres dossiers que les dossiers repris comme thèmes à la racine du site).










cpskinconfig.jpg

Voici l'espace de configuration des thèmes.

Attention, chaque ligne correspond à un thème; ce qui signifie que si l'on fait un retour à la ligne après le quatrième thème, on en crée un cinquième même si aucun "id" n'est mentionné.

Par défaut, les css du produit sont créés pour quatre thèmes, mais il est possible d'en créer d'autres.

La navigation: les sous-dossiers

Comment créer les rubriques (deuxième niveau) et le troisième niveau (page de présentation ou mini site)

themeloisir.jpgPour créer les rubriques, il suffit de créer des dossiers dans les dossiers thèmes et de les publier.

Les dossiers qui s'affichent par défaut ont été créés à titre d'exemple, ils peuvent être supprimés.

Dans l'exemple ci-contre nous pouvons voir que le dossier "Loisirs" comprend cinq dossiers publiés.

La création de la navigation est simple et intuitive.

Ce sont les dossiers qui constituent la structure de navigation et, dans Plone, il suffit de surfer vers l'endroit ou l'on veut ajouter un élément et ensuite de l'ajouter.

  Un élément est ajouté par défaut dans le dossier courrant.










Changer le logo et le banner du site, etc

Comment modifier le logo, le banner, les couleurs des thèmes, ...

Avant toute chose, il est utile customiser le fichier "base_properties" qui permet de définir plusieurs propriétés du site.

Attention! il existe deux dossiers "base_properties"; celui d'origine de plone et celui, adapté, du produit "cpskin" (produit site communal).

C'est bien le deuxième qu'il faut "customiser" si on ne veut pas avoir de problèmes.

Lorsque l'on "customise" un dossier ou un fichier, Plone en fait une copie dans le dossier custom (portal_skins/custom).

Cela permet d'y apporter ses propres modifications sans affecter le dossier, le fichier d'origine.

Dans "portal_skins", on trouve les dossiers des produits installés sur son instance Plone. Parmi ces produits, il y a "cpskin", le produit de site communal.

Dans le dossier "cpskin", on trouvera le dossier "base_properties". Il faut cliquer dessus et ensuite cliquer sur le bouton "Customize" en vérifiant que c'est bien le dossier "custom" qui apparaît comme dossier de destination juste à gauche du bouton.

Allons ensuite dans le dossier "custom" et cliquons sur le dossier "base_properties" et ensuite sur l'onglet "properties".

On a alors différentes propriétés de base du site sous les yeux.

Exemple:

base_properties2.jpg

Le nom du logo est spécifié dans les base_properties. Il s'appelle "logo.gif". Si l'on veut utiliser une image .jpg .png,... c'est ici qu'il faut le spécifier.

Pour modifier le logo, il faut donc se rendre dans le dossier custom lui-même situé dans le dossier portal_skins dans la ZMI (Zope Management Interface).

Si un fichier logo est déjà présent, il suffit de le modifier en respectant les dimensions de l'image d'origine (181px de large pour 106 px de haut).

Il est possible de mettre un logo qui a plus de hauteur, mais augmenter la largeur peu poser problème pour l'alignement avec la colonne de gauche (cela peut aussi demander quelques adaptations css).

L'affichage du banner fonctionne sur un principe simple; Plone regarde dans le dossier courant s'il y voit une image nommée "banner.jpg". Si c'est le cas il l'affiche, sinon il regarde plus haut (dossier parent) et ainsi de suite.

Exemples de chartes graphiques

Deux maquettes calquées sur le produit de site communal

Ces chartes graphiques peuvent être utilisées gratuitement.

Cliquez sur l'image pour une vue en plein écran

maquette 4 copie.jpg

Voir les codes couleurs

maquette 4 code couleur copie.jpg



maquette 3 copie.jpg

Voir les codes couleur

maquette 3 codes couleurs copie.jpg