RAPPORTS. Direction départementale des territoires. Communication. Septembre Charte graphique IDE. Guide d'utilisation

Transcription

1 RAPPORTS Direction départementale des territoires Communication Septembre 2012 Charte graphique IDE Guide d'utilisation Direction départementale des territoires

2 Historique des versions du document Version Date Commentaire 1 1er septembre 2012 Les éléments concernant la gestion de la page d'accueil sont issus du guide d utilisation du plugin Giseh IDE Affaire suivie par Bruno Singery - DDT des Ardennes Tél. : Courriel : bruno,singery@ardennes.gouv.fr Rédacteur Bruno Singery - DDT des Ardennes Référence(s) internet

3 SOMMAIRE 1 -Configuration du site Gestion des plugins Groupes d'auteurs Le bandeau haut Le pied de page Les articles Se connecter Mon premier article Mise en forme du texte de l'article Les liens hypertextes Les tableaux Insérer un document Insérer une image Insérer un logo Ordonnancement des articles Ordonnancement des pièces jointes dans un article Déplacer un article Les différentes formes d'article Les mots-clés «Vous êtes» Les sous-rubriques Création d'une sous-rubrique Ordre de tri des articles dans une rubrique Les formes de rubriques Gestion de la page d'accueil Le bandeau du haut Le pied de page Bloc «À la une» Bloc «Alerte» Bloc «Démarches administratives Bloc «Actualités» Le bloc au-dessus du bas de page Bloc «Politiques publiques»...12

4

5 1 - Configuration du site Gestion des plugins Certains plugins ne sont pas activés à la mise à disposition de la plate-forme (cisf:saisie facile, ciar : Accès restreints Giseh...), si besoin les activer dans Gestion des plugins Liste des plugins, en les cochant puis en cliquant sur «Enregistrer». Attention ne pas activer le plugins : cichat : CHAT pour SPIP ciform : Formulaires pour SPIP Groupes d'auteurs La charte IDE impose de faire apparaître le nom du service ayant publié chaque article. Pour ce faire, il convient de créer un groupe d'auteurs, par exemple «DDT» avec comme descriptif rapide : «direction départementale des territoires» et d'y affecter tous les auteurs de la DDT. Un auteur ne doit appartenir qu'à un seul groupe d'auteurs. Attention : Avant d'affecter un administrateur dans un groupe d'auteur, il faut cocher la case "Cet administrateur peut créer des espaces collaboratifs (ou y être affecté) tout en restant administrateur du site ". Il restera ainsi administrateur du site. Pour contourner le problème, voici une astuce non validée : créer un nouvel auteur pour l'administrateur (par exemple : Prénom Nom Rédacteur) ; affecter ce nouvel auteur dans un groupe d'auteurs ; créer l'article sous l'auteur administrateur ; dans l'article supprimer l'auteur administrateur, le remplacer par l'auteur Prénom Nom Rédacteur Le bandeau haut Voir 3.1 Le bandeau du haut Le pied de page La première colonne Elle comporte des liens vers des pages du site dont l'existence est imposée. Le contenu de cette colonne est imposé par la charte et ne peut pas être modifié La deuxième colonne Son contenu est partiellement imposé par la charte. Il est possible d'y ajouter des éléments en affectant le raccourci «Pied de page : raccourci vers l'article». On peut créer ces articles dans une sous rubrique de la rubrique «Outils», nommée par exemple «50. Suite de la 2e colonne». Ils apparaissent triés par numéro de titre, en dessous de ceux imposés par la charte. L'article peut avoir son contenu propre ou avoir une redirection automatique vers une rubrique du site. Il faut alors que l'article contient une redirection et que la rubrique soit de la forme : «Redirection :affiche directement le dernier article (redirection)» Charte graphique IDE Guide d utilisation 5/13

6 Contacts Chaque contact est un article créé dans la rubrique «Outils > Contacts». Ils apparaissent dans l ordre de leur numéro de titre (figure en premier : «00. La préfecture»). Ces articles doivent être géolocalisés pour figurer sur la carte IGN en page d'accueil. La liste des services figure également en page d'accueil au-dessus de la carte. Les horaires et les coordonnées sont indiqués dans le descriptif rapide La troisième colonne La 3e colonne comporte des liens dont l'existence est imposée par le SIG. Ces liens pointent vers des articles situés dans la rubrique «Pied de page». Il n'est pas possible d'ajouter des éléments dans cette 3e colonne. Comme pour la 2e colonne, l'article peut avoir son contenu propre ou avoir une redirection automatique vers une rubrique du site. Le nom du service doit correspondre au nom de celui indiqué dans les groupes d'auteurs Charte graphique IDE Guide d utilisation 6/13

7 2 - Les articles Se connecter Cliquez sur l'adresse de gestion : En vous authentifiant avec le compte Cerbère sur arrivez sur l'espace privé Mon premier article 2 méthodes pour atteindre la zone de rédaction : depuis le site public : naviguer dans le site jusqu'à la rubrique puis cliquer sur : «Écrire un nouvel article» en haut à droite de l'écran (écran de saisie facile) ; «Modifier cette rubrique» (ce qui permet de voir les articles déjà rédigés) puis ««Écrire un nouvel article» dans l'espace privé ; depuis l'espace privé : cliquer sur «Édition» puis naviguer dans l'arborescence, dès que vous êtes dans la bonne rubrique cliquez sur «Écrire un nouvel article» La saisie d'un article peut s'exécuter depuis l'écran de saisie facile ou depuis l'espace privé. Dans la mesure du possible, utilisez l'écran de saisie facile car il est plus ergonomique, toutes les commandes sont disponibles sur le même écran et il enregistre automatiquement l'article dès qu'on actionne une commande. L'article est constitué d'un titre, d'un descriptif rapide, de son texte, d'un logo et de pièces jointes. Cliquez sur enregistrer et votre article a le statut «en cours de rédaction» Vous pouvez cliquez sur prévisualisez pour le voir. La pièce jointe est affichée avec son nom de fichier, on la modifie en cliquant sur «Modifier» Pour mettre l'article en ligne, cliquez sur «publié en ligne» Dès que l'article est publié le bouton «Prévisualiser» devient «Voir en ligne» Attention : ne pas mettre au même niveau un article est une sous-rubriques car l'article n apparaîtra plus dans le site public Mise en forme du texte de l'article La mise en forme du titre est définie par la charte graphique et ne peut être modifiée. Quelques éléments de mise en forme sont disponibles : gras, italique, puces et numérotation, retrait. Ces mises en forme apparaissent codées, ce sont les raccourcis typographiques ; les principaux sont : -*, -#, {texte}, {{texte}}. D'autres sont disponibles dans le bandeau de droite dans l'aide Les liens hypertextes Des liens hypertextes peuvent être insérés dans le corps du texte en cliquant sur le bouton. Ces liens peuvent pointer vers un autre article (artxx), vers une rubrique (rubxx), vers une adresse Internet ou vers une adresse de messagerie. Charte graphique IDE Guide d utilisation 7/13

8 2.5 - Les tableaux Cliquez sur le bouton, choisissez le nombre de colonnes, de lignes et des entêtes de colonnes et un titre de tableau. Dans le texte le tableau est codé, les colonnes sont séparées par (AltGr + 6) Insérer un document Cliquez Ajouter un document, Parcourir, sélectionner le fichier, Télécharger, vous pouvez changer le titre et cliquez sur Enregistrer. Le fichier téléchargé apparaît en bas de la fenêtre. Si vous voulez insérer le document dans le texte, 2 méthodes : recopier le raccourci <docxx> (ou double clic sur le raccourci) au départ, positionner le curseur à l'endroit de l'insertion puis cliquez sur le bouton «trombone» Si le document est inséré dans le texte il n apparaît plus en bas de l'article Insérer une image Même procédure que pour les documents : positionner le curseur puis droite ou à gauche ou centrée en insérant le raccourci correspondant. Quelques conseils pour les images : basse résolution : 72 DPI ne pas dépasser 600 pixels de large titre et descriptif rapide Attention si le raccourci n'est pas insérer dans le texte, l'image n apparaît pas Insérer un logo Cliquer sur Ordonnancement des articles. L image peut être calée à puis télécharger une image redimensionnée (72 DPI, 335x205 pixels) Les articles s'affichent suivant l'ordre de tri choisi dans la rubrique qui les contient soit par : date publication croissante date publication décroissante numéro de titre par ordre alphabétique Pour l ordre de tri par numéro de titre, il faut modifier le titre et y ajouter un numéro sous la forme «10.espace» par exemple : «10. Mon premier article». Le «10.» ne sera pas affiché Ordonnancement des pièces jointes dans un article 2 possibilités : même principe que pour les articles : «10. Nom du fichier» insérer les pièces jointes dans le texte dans une énumération : recopier à l'endroit voulu le raccourci de la pièce jointes : <docxx> (la pièce jointe n'est plus en bas de l'article) Déplacer un article Il est possible de déplacer un article dans une rubrique du site en modifiant l'article puis en cliquant sur.choisir la rubrique de destination puis «Enregistrer». Charte graphique IDE Guide d utilisation 8/13

9 Les différentes formes d'article La forme normale (par défaut) C'est la forme la plus utilisée avec les mises en forme, gras, italique, puces, intertitre Avec des liens vers les sites référencés dans la rubrique Galerie de photos Les photos chargées, des vignettes sont créées et paginées automatiquement. Des fonctions de défilement et de recherche sont disponibles Le texte est issue de Service-Public.fr Cette forme d'article est essentiellement utilisée pour la rubrique «Démarches administratives» Les librairies javascript sont incluses Les mots-clés «Vous êtes» 4 profils ont été définis : particulier, professionnel, association et collectivité qui correspondent à 4 mot-clés. L'alimentation de ces pages s'effectue donc simplement en affectant les mots-clés du groupe «Vous êtes» aux articles que l'on souhaite voir figurer dans ces pages. Un même article peut disposer de plusieurs mots clés, il figurera alors dans les pages correspondant aux différents profils correspondant. Lorsque l'on marque un article avec un des 4 mots-clés, la rubrique s'affiche dans «Vous êtes» avec l'ensemble des articles de cette rubrique. Charte graphique IDE Guide d utilisation 9/13

10 3 - Les sous-rubriques Création d'une sous-rubrique Se positionner dans la rubrique d'accueil : par le site public puis cliquer sur «Modifier cette rubrique» puis sur «Créer une sous-rubrique» par l'espace privée puis cloquer sur «Créer une sous-rubrique» Saisir le titre de la rubrique avec un numéro d'article pour l'ordre d affichage sur le même principe que les articles (10. Titre de rubrique) Ordre de tri des articles dans une rubrique Voir le Ordonnancement des articles Les formes de rubriques La forme par défaut Cette forme affiche : dans le bandeau de gauche la liste des fichiers ou des sous-rubriques qu'elle contient en partie centrale les fichiers ou les sous-rubriques qu'elle contient éventuellement le descriptif rapide avec du texte et une petite image La rubrique calendrier Un ou plusieurs articles peuvent être mis dans le calendrier. Ces articles peuvent contenir, par exemple, un ordre du jour, des pièces jointes La rubrique : affiche directement le texte de ses articles Chaque article est présent dans une liste déroulante. Un seul article s affiche dans la page (ne pas oublier de cliquer sur OK) La rubrique FAQ Le choix de la forme doit être «FAQ» et la rubrique doit contenir des sousrubriques par thématique. Chaque question-réponse fait l'objet d'un article publié dans la rubrique thématique La rubrique «Redirection» Cette forme de rubrique permet d'aller directement dans une autre rubrique par un simple clic. Il faut créer une rubrique avec la forme «Redirection :affiche directement le dernier article (redirection)» Publier un article avec une redirection (artxx, rubxx) Charte graphique IDE Guide d utilisation 10/13

11 4 - Gestion de la page d'accueil Le bandeau du haut L'image du bandeau et le logo de la préfecture sont installés par le PNE-Web. L'intitulé du site est à paramétrer dans la configuration du site. Les sites de la région sont des sites référencés disposant du raccourci «Bandeau : raccourci dans la liste déroulante des sites de la région». Ils sont triés par numéro de site. Le menu déroulant est constitué des rubriques de niveau 1 et 2. Les rubriques de niveau 1 sont imposées par la charte, de même qu'une partie des rubriques de niveau Le pied de page Le pied de page figure à l'identique sur toutes les pages du site. Il comporte 4 colonnes : la 1 re colonne comporte des liens vers des pages du site dont l'existence est imposée. Le contenu de cette colonne est imposé par la charte et ne peut pas être modifié ; la 2 e colonne est partiellement imposé par la charte. Il est possible d'y ajouter des éléments en affectant le raccourci «Pied de page : raccourci vers l'article». Ces articles apparaissent triés par numéro de titre, en dessous de ceux imposés par la charte ; la 3 e colonne comporte des liens dont l'existence est imposée par le SIG ; Il n'est pas possible d'ajouter des éléments dans cette 3ème colonne ; la 4 e colonne est entièrement imposé par la charte et ne peut pas être modifiée Bloc «À la une» Le bloc «À la une» (dans le cadre bleu) est constitué des 3 derniers articles publiés disposant du raccourci «Page d'accueil : raccourci vers le bloc à la une». Le titre de chaque article figure dans la partie droite du bloc, l'image s'affichant dans la partie gauche du bloc est le logo de l'article et le texte s'affichant sous l'image est le descriptif de l'article. Les articles s'affichent par ordre décroissant de publication. La taille optimum de l'image à insérer comme logo est : 335x205 pixels Bloc «Alerte» Le bloc «Alerte» apparaît lorsqu'au moins un article dispose du raccourci : «Raccourci vers le bloc ALERTE». Il apparaît alors en page d'accueil à la place du bloc «à la une», ainsi qu'en colonne de gauche sur les autres pages du site. Il ne peut y avoir qu 'un seul article Bloc «Démarches administratives Ce bloc est constitué des 10 démarches les plus utilisées par les internautes et classées par popularité. Une démarche est un article disposant de la forme «Le texte est issu de Service Public.fr» Bloc «Actualités» Partie gauche L'article doit avoir le raccourci : «Page d'accueil : actualité principale». L'affichage comporte le logo, le titre, la date de publication et le descriptif de l'article. Charte graphique IDE Guide d utilisation 11/13

12 Il ne peut y avoir qu'un seul article (le plus récent sera affiché)) Partie droite L'article doit avoir le raccourci «Page d'accueil : actualités (raccourci temporaire)» et un mot-clé de la catégorie «Actualités». L'affichage comporte : la date, la catégorie d'actualité et le titre de l'article. Ne sont visibles que les 4 derniers articles Le bloc «Dossiers» Le contenu de ce bloc est défini à l'aide de mots-clés : le bloc est constitués des 6 (au plus) derniers articles publiés (triés par date inverse) ayant un motclé du groupe «page d'accueil : dossier». Le titre affiché (Dossier, Zoom...) est le descriptif du mot-clé au singulier. Le lien «Tous les dossiers» est le contenu du texte explicatif du mot-clé. En cliquant sur ce lien on affiche la liste de tous les articles qui ont le même mot-clé. L'affichage comporte le logo de l'article, le titre de l'article, la date de publication, le descriptif de l'article et un lien vers la page de l'article Bloc «Politiques publiques» Le nuage de mots-clés des politiques publiques est défini sous forme d'un article de la rubrique «90.Technique» ayant le raccourci «Page d'accueil : raccourci vers le bloc nuage» (un seul article est pris en compte). Le texte de l'article contient les différents termes ou expressions du nuage, sous forme d'une liste à puces (au sens spip) et en associant un lien à chacun. La mise en forme de chaque terme ou expression est définie en utilisant les raccourcis typographiques de SPIP pour mettre en italique ou en gras. La taille d'affichage est déterminée par le niveau de retrait de la liste à puce : plus le niveau de retrait est élevé (plus il y a d'étoiles «*»), moins le terme est important. Charte graphique IDE Guide d utilisation 12/13

13 Direction départementale des territoires 3 rue des Granges Moulues B.P Charleville-Mézières Cedex Téléphone : Télécopie : Courriel : ddt@ardennes.gouv.fr Site Internet :