Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source.

Transcription

1 Manuel utilisateur Mini-site régions Version 07/2012 Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenu d un site Web. Ceci permet aux utilisateurs de faire évoluer le site sans recourir systématiquement à un programmeur. 1

2 Table des matières Architecture type d un mini site anefa.org...4 Se connecter...4 Administration du back office DRUPAL...6 Construction du site / Menu / Liste les menus / Lien primaire des sous-sites / Liste des entrées de menus..6 Gestion du contenu /Créer un contenu de type Configuration du site Affiliated content /«mini site» content gérer son contenu :...7 modifier le contenu :...7 Aide...7 Créer un contenu...8 Gestion du contenu / Créer un contenu de type... 8 Titre...8 Mots clés...8 Vocabulaire :...8 Paramètres du menu...8 Image...10 Fichiers attachés...10 Options de publication

3 L explorateur de fichier...11 Zonage...11 Actions...12 Transférer des fichiers :...12 Créer des vignettes...12 Supprimer un fichier...12 Redimensionner un fichier...12 Gérer les répertoires / Manage directories...13 Mise en page du contenu...14 L éditeur de texte...14 Ajouter une image...14 Insérer un tableau...15 Insérer un lien pdf dans votre page...16 Intégrer une vidéo...17 Référencement

4 Architecture type d un mini site anefa.org Une bannière avec une zone pour : le logo (70 par 160 pixels ) la bannière (160 par 660 pixels) ou il est possible de mettre une photo, un montage Elle est personnalisable. Une zone d accueil personnalisable également (texte, image, vidéo). Sa taille est de 730 pixels. Un rubriquage jusque 6 rubriques différentes, sachant que les mini sites comportent obligatoirement une rubrique Agenda et Actualité. Il reste donc la possibilité de créer 4 rubriques. Ces 2 catégories de contenu servent à alimenter les rubriques éponymes obligatoires du mini site et peuvent être reprises pour publication sur le site national. Une actualité est automatiquement publiée sur la page d accueil de votre mini-site avant d être archivée dans votre rubrique Actualité. Le bloc agenda en page d accueil est activé si un évènement est à venir. Si l évènement est passé, le bloc disparait (zone vide). Dans chaque rubrique, on compose le site internet avec du contenu de type Page. Ce type de contenu est utilisé pour afficher des informations qui changent rarement (noyeau du site). Il ne sera pas publié en page d accueil. Les pages intérieures ont une taille de 730 pixels. Une zone de carte d identité Mini site, avec reprise du nom de la région, qui reste toujours visible sur le bloc de droite. La taille est de 249 pixels. Une zone libre de zoom mini site où une information reste toujours visible dans le bloc de droite. Sur le bloc de droite, fixe, on trouve un lien vers la Bourse de l emploi, un lien vers le site internet de l ANEFA et un lien vers l espace métiers du site de l ANEFA. La taille est également de 249 pixels. Le contact est une rubrique spéciale pour vos coordonnées. Se connecter A partir de son mini site, dans la zone de login Accès Extranet pour un utilisateur qui a le rôle d administration sur le mini site région. Apparition d un menu d administration. 4

5 5

6 Administration du back office DRUPAL Construction du site / Menu / Liste les menus / Lien primaire des sous-sites / Liste des entrées de menus Ce menu permet d avoir une vue sur les rubriques pour : - les réordonner (glisser, déplacer) ; - les activer ou désactiver (activer ou non) ; et sur les sous-rubriques pour - les réordonner (glisser, déplacer) ; - les rendre visibles ou non (déplié ou non). En cliquant sur modifier, il est possible de modifier : - le libellé de l élément de menu, soit le nom de la rubrique ou de la sous rubrique : champs «titre du lien dans le menu» ; - le nom de l étiquette qui s affiche au survol de la souris : champs «description». Tout contenu Drupal est automatiquement nommé pas un noeud (node) par Drupal. Ne pas changer le chemin! 6

7 Gestion du contenu /Créer un contenu de type Accueil mini site Agenda Actualité Bannière Carte d identité Contact mini site Page Zoom mini site C est par ce menu qu on créé un nouveau contenu sur le site. Au départ pour toutes les catégories de contenu, ensuite, au fil des mises à jour du site, pour les nouvelles pages ou actualités, ainsi que les nouveaux évènements de l agenda Affiliated content /«mini site» content Permet d avoir une vue globale sur l ensemble du contenu du mini site. Par ce menu, il est possible de : gérer son contenu : Publier, dépublier ou supprimer. Pour cela, il faut choisir l action à effectuer dans le menu déroulant, une fois avoir sélectionné le contenu concerné (coché). modifier le contenu : Qu il soit publié ou non, il est possible de le modifier en cliquant sur modifier. Remarque : il est possible de modifier son contenu en cliquant sur modifier quand on est sur le front, et connecté. Configuration du site, Gestion des utilisateurs et Aide Sans objet 7

8 Créer un contenu Gestion du contenu / Créer un contenu de type La page de création d un nouveau contenu comprend : Titre Le champ titre est suivi d une astérisque. Il doit donc être obligatoirement renseigné. Mots clés Ils ne sont pas spécialement actifs pour le référencement, mais ils permettent d alimenter le nuage de mots clés sur le site de l Anefa et pour la zone de recherche. Rensigné uniquement pour le contenu de type page. Vocabulaire : Dans le cas de la création d une actualité, elle doit être rattachée à une section pour permettre son archivage lors de sa reprise sur le site national. Paramètres du menu Ces paramètres régissent l architecture du site et la hiérarchisation du contenu. Ils sont masqués à l affichage. En cliquant sur l intitulé «paramètre du menu», ils s affichent. En titre du lien dans le menu, c est le titre de la rubrique (pour la création d une nouvelle rubrique) ou bien le titre de la sous-rubrique (affichage dans le bandeau) En élément parent, < lien primaire des sous sites > : pour rattacher à une rubrique principale du site, créée. autrement, a une rubrique déjà existante (ici Saisonniers) 8

9 9

10 Image Insérer une image via cette fonction (et non via l éditeur), permet d intégrer un visuel de taille 150 pixels de large (hauteur ajustée proportionnellement) qui illustrera le titre et le chapo de votre actualité ou date de l agenda dans le fil de vos publications. Fichiers attachés Permet d insérer un document à télécharger, à la fin de la page (et non dans le contenu de la page, via l éditeur de texte). Options de publication Un contenu «Non publié» (publié est décoché) est présent dans la liste du contenu mais n apparaît pas sur le site. Cette option est souvent utilisée parce que soit il n a pas encore été validé, sa rédaction n est pas encore terminée ou que son contenu est obsolète. En mode «Publié», le contenu est visible sur le site internet, en front office. Attention, dès qu un contenu de type Agenda ou Actualité est publié, il part dans le flux RSS du site de l ANEFA! 10

11 L explorateur de fichier Accessible depuis le mode d édition, il permet de gérer les fichiers : ajouter de nouveaux fichiers (images, documents...) sur le site internet supprimer des fichiers existants créer / supprimer des répertoires insérer des images dans un contenu Zonage L explorateur de fichiers est composé de 5 zones. 1. Cette zone correspond à l arborescence des répertoires sur le site internet. Cliquer sur l un des dossier pour voir son contenu s afficher. 2. Cette zone correspond à la liste des fichiers contenus dans un répertoire. Cette liste contient des informations (intitulé, poids, dimensions, date) relative à chaque fichier. Cette liste peut-être triée en cliquant sur le titre de chaque information (intitulé, poids, dimensions, date). 3. Cette zone liste les actions effectuées. Elle sert à titre d information pour indiquer lorsqu une erreur se produit (fichier trop volumineux, format de fichier non supporté...). En vert les actions qui se sont bien déroulées. En rouge les erreurs. 4. Cette zone permet de prévisualiser les images. Sélectionner l image dans la zone, vous aurez un aperçu de celle-ci dans cette zone. 5. Cette zone correspond aux actions que vous pouvez réaliser 11

12 Actions Transférer des fichiers : En cliquant sur le bouton «Parcourir», sélectionnez sur votre ordinateur le fichier que vous souhaitez utiliser sur le site internet puis cliquer sur «Transfert de fichier». Pour les images, vous pouvez créer des vignettes (image de tailles réduites) en cochant la case correspondante à la taille désirée. Il est recommandé de suivre quelques règles de nommage des fichiers : - utiliser uniquement que des caractères alphanumériques - pas de caractères accentués (exemple : pas «écosse.jpg» mais «ecosse.jpg») - pas de caractères spéciaux à l exception des «-» et «_» (exemple : pas «fichier1,2(3).jpg mais fichier1-2_3.jpg» - pas d espace (exemple : pas de «fichier 1.jpg» mais «fichier_1.jpg») Créer des vignettes Pour redimensionner automatiquement les images déjà présentes sur le site internet. Pour cela sélectionner le fichier à redimensionner puis cliquez sur la case correspondante à la taille désirée. Supprimer un fichier Pour supprimer un fichier déjà présent sur le site, sélectionner celui-ci puis cliquez sur le bouton «Supprimer». Redimensionner un fichier Vous pouvez redimensionner les images déjà présentes sur le site internet. Pour cela sélectionner le fichier à redimensionner, saisissez les dimensions désirée et cliquez sur le bouton «Redimensionner». 12

13 Gérer les répertoires / Manage directories Pour créer un nouveau dossier, sélectionner dans la zone l emplacement du répertoire que vous souhaitez créer, saisissez son nom puis cliquer sur le bouton «Ajouter». Pour valider : envoyer à CK editor 13

14 Mise en page du contenu L éditeur de texte FCKeditor est l éditeur installé sur notre serveur Drupal. Sa présentation rappelle les fonctions de Word. Elle comporte de nombreuses fonctionnalités qui ne sont pas nécessaires dans la plupart des cas. C est via l éditeur qu il est possible d insérer du texte, des images, des vidéos... Ajouter une image Dans l éditeur, cliquez à l endroit où vous voulez insérer une image, puis cliquez sur le bouton «Insérer / modifier une image». Ce bouton ouvre la petite fenêtre des propriétés de l image que vous allez intégrer. Cliquez sur le bouton «Explorer le serveur» pour choisir une image déjà chargée sur le serveur ou télécharger une nouvelle image. -> ouverture de l explorateur de fichiers Peaufiner la présentation de l image : Il faut paramétrer les informations sur l image. - Redimensionnant l image; il suffit de changer la largeur et la hauteur est ajustée automatiquement, si le petit cadenas est vérrouillé. - Définir une épaisseur de bordure (en pixel : 1 ou 2). - Définir un espacement horizontal et vertical pour aérer le document (en pixel également : 2, 5, 10...). - Positionner l image : gauche ou droite qui permettent au texte d enrober l image. 14

15 Le champ titre de remplacement donne une indication au cas où l image n est pas visible par le navigateur (à la place de la croix rouge). Il est aussi utile pour le référencement du site! Associer l image à un document à télécharger ou à un autre site internet : dans l onglet lien, - ouvrez l explorateur du serveur et téléchargez un document ; - indiquez une url externe (ou interne). dans la cible, correspond à la fenêtre d ouverture du lien. Sélectionnez de préférence «Nouvelle fenêtre (_blank)» pour ne pas perdre l internaute. Dans les propriétés avancées, mettre une description (title) permet d avoir une indication au survol de l image avec la souris. Cette information est aussi utile pour le référencement. Vous pouvez réafficher les propriétés de l image en cliquant avec le bouton droit de la souris sur l image insérée. Insérer un tableau Positionnez votre curseur à l endroit d insertion souhaité, puis cliquez sur le bouton «Insérer un tableau». Ce bouton ouvre la petite fenêtre des propriétés du tableau que vous allez intégrer. Seuls les champs «Lignes», «Colonnes» et «Largeur» sont obligatoires, puis cliquez sur OK. Attention à la taille du tableau (en pixel). Vous pouvez mettre (en taille, en pixel) ou non (0 comme l exemple) une bordure, définir des marges, un alignement du contenu... Il est aussi conseillé de lui donner un titre. Vous pouvez réafficher les propriétés du tableau, insérer ou supprimer des cellules, des lignes, des colonnes ou le tableau en cliquant avec le bouton droit de la souris sur le tableau inséré. 15

16 Insérer un lien pdf dans votre page Dans l éditeur, sélectionnez le texte à lier au pdf, puis cliquez sur le bouton «lien». Ce bouton ouvre la petite fenêtre des propriétés du lien que vous allez intégrer. Les listes déroulantes «Type de lien» et «Protocole» ne sont à modifier que pour des liens particuliers Cliquez sur le bouton «Explorer le serveur» pour choisir un document déja chargé sur le serveur ou télécharger un nouveau document. -> ouverture de l explorateur de fichiers En type de lien, il est possible de mettre une adresse mail. Il est préférable de mettre «nouvelle fenêtre (_blank)» pour ne pas perdre l internaute. Mettre une description (title) est une zone d indication lors du survol du lien à la souris. La classe du css permet d avoir une petite icone : fichier_pdf fichier_word fichier_excel 16

17 Intégrer une vidéo Dans l éditeur de texte, basculez en mode code HTML, en cliquant sur le bouton «source». Dans youtube, En parallèle, positionnez-vous sur la vidéo à intégrer, dans youtube. Cliquez sur «partager» puis sur «intégrer». Copier le code. Note : il est possible de redimensionner le lecteur avant de copie le code. Coller le code dans l éditeur, et rebasculer en mode normal en recliquant sur «source». Le lecteur vidéo doit s afficher. En procédant de la même manière, il est possible d intégrer des diaporamas photos, des pdf en flip book... 17

18 Référencement : Rédaction : La qualité de rédaction des contenus est un critère majeur de référencement dans Google. - rédaction en pyramide inversée : information essentielle, ensuite les détails - importance du chapo - présence des mots clés dans les premières ligne de la page - répétition des mots clés dans le texte - utilisation de synonymes des mots clés - pas de textes trop longs, - utilisation d autres pages (-> liens) pour éclairage complémentaire - découpage du texte avec des sous-titre (balises styles) Netlinking ou maillage de lien : - Choix du texte des liens - Dans la zone de contenu utile d une page - variez les types des liens Contenu original: - pas de plagiat ou de contenu dupliqué Contenu recent : - actualité fraiches - mise à jour des anciens contenus Utilisation des balises : - titre - description - liste à puces - caractère gras Mais aussi... Choix des URL, vitesse de chargement du site, reprise sur réseaux sociaux... 18