La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE1 123SpipAdmin V2 PREAMBULE Vous avez opté pour.

Présentations similaires


Présentation au sujet: "Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE1 123SpipAdmin V2 PREAMBULE Vous avez opté pour."— Transcription de la présentation:

1 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE1 123SpipAdmin V2 PREAMBULE Vous avez opté pour un site Internet 123WEBCE suivant un modèle spécifique. Ceci implique que votre site Internet se comporte comme un masque daffichage. Il fait état des informations (textes, images, tableaux, liens) qui auront été préalablement enregistrées dans votre interface de mise à jour. Ainsi, lorsque vous naviguez sur votre site Internet et demandez à voir une page en particulier, celui-ci interroge la base et affiche les informations présentes dans cette base, à un instant t, dans des zones spécifiques, prédéfinies par le modèle. Site Internet 123SpipAdmin Base de données Cache

2 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE2 Les invariants des modèles 123WEBCE Tous les modèles 123WEBCE offrent au minimum les possibilités de présenter : 6 entrées (Rubriques) qui donnent chacune accès à une ou plusieurs Sous Rubriques qui elles-même donnent accès à un ou plusieurs Articles 1 Fil Info défilant 1 zone Annonce défilante 1 formulaire de contact 1 texte daccueil Le détail dune rubrique sélectionnée Le détail dun article sélectionné Puis viennent sajouter les modules et/ou fonctionnalités choisies au cas par cas... RUBRIQUE SOUS RUBRIQUE 1SOUS RUBRIQUE 2SOUS RUBRIQUE n Article 1 Article 2 Article n 123SpipAdmin V2

3 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE3 Affichage coté site Internet 6 Entrées Principales Articles défilants FIL INFOS Articles défilants ANNONCES Accès à lArticle de type Formulaire de contact Texte daccueil 123SpipAdmin V2

4 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE4 Affichage coté site Internet Détail dune rubrique sélectionnée 123SpipAdmin V2

5 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE5 Affichage coté site Internet Détail dun article sélectionné 123SpipAdmin V2

6 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE6 Détail du formulaire de contact Affichage coté site Internet 123SpipAdmin V2

7 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE7 Lancer linterface dadministration Login donné lors de votre formation Mot de passe Donné lors de votre formation Validation Ladministration nest accessible quaux personnes connaissant le login et mot de passe daccès. Celle-ci se lance depuis Internet à ladresse suivante : et vous demandera en premier lieu de vous authentifier. 123SpipAdmin V2

8 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE8 Structure de linterface Bandeau intermédiaire 1- Pour changer de session et se reconnecter sous un autre login si besoin 2- Pour personnalisé l'apparence de l'administration du site 3- Pour retrouver les principales fonctions de navigation de l'administration Affichage centrale des derniers articles créés ou modifiés. Bandeau supérieur permet de retrouver les infos importantes du site. Vous arrivez alors sur linterface complète dadministration qui se décompose en 3 grandes sections SpipAdmin V2

9 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE9 Interface : LARBORESCENCE Cette partie de linterface va vous permettre de mettre à jour la partie centrale et de visionner le contenu de la branche sélectionnée par simple clic gauche. Clic gauche sur le + : la branche se développe Clic gauche sur le libellé : vous donne accès au contenu de la rubrique choisie. Clic gauche sur le + : la branche se développe Clic gauche sur le libellé : vous donne accès au contenu de la rubrique choisie. Pour afficher l'arborescence complète cliquez sur cet icône dans le bandeau intermédiaire. 123SpipAdmin V2

10 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE10 Interface : GESTION DE CONTENU Règles de base Au travers de ladministration, vous gérer 2 natures déléments : des rubriques des sous Rubriques (rubrique de rubrique) des articles. Quelques règles à connaître Nos modèles gèrent au maximum 2 niveaux de profondeur (Rubrique/Sous rubrique). Rien nempêche de créer des sous-sous- rubrique, mais elles ne seront jamais visible sur le site Internet. La sous rubrique sert à classer les articles quelle contient sous un même titre. Les articles sont principalement créés au niveau sous rubrique (sauf cas particulier du texte daccueil, des annonces et des textes du fil info). Les articles sont En cours de rédaction à leur création Les documents sont toujours accrochés à un article Les rubriques et articles sont, par défaut, triés par ordre alphabétique. Si vous désirez piloter lordre daffichage dans votre site, pensez à numéroter les titres (sans oublier lespace et de 10 en 10 pour faciliter les insertions) ex: [10. Titre de mon article] 123SpipAdmin V2

11 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE11 Interface : GESTION DE CONTENU Les rubriques ou sous rubriques Une rubrique (ou sous rubrique) et un article se décomposent en champs de description. Ce sont ses champs dont fera état le site Internet. Pour accéder à la structure dun élément, il faut utiliser les pictogrammes présents sur cette page.. Voir le contenu de lélément rubrique Consulter la page internet faisant appel à lélément rubrique pour voir le résultat Créer un article Créer une sous rubrique Supprimer lélément rubrique (n'apparaît que si la rubrique 'est vide) 123SpipAdmin V2

12 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE12 Interface : GESTION DE CONTENU Les articles Voir le contenu de lélément article Consulter la page internet faisant appel à lélément article pour voir le résultat Supprimer lélément article ou modifier le statut de l'article. 123SpipAdmin V2

13 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE13 Interface : GESTION DE CONTENU Champs des description dune rubrique Une rubrique se décompose par défaut en 3 champs de description : Le Titre Le Descriptif rapide Le Corps de texte. Nos modèles utilisent généralement : Le Titre Le corps de texte (dans le seul cas dune rubrique) La mise en page du Corps de texte se fait via une interface de mise en forme de texte qui se rapproche des outils Microsoft pour une utilisation simplifiée. 123SpipAdmin V2

14 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE14 Interface : GESTION DE CONTENU Champs de description dun article Un article se décompose par défaut en 3 champs de description : Le Titre Le Chapeau Le Corps de texte. Nos modèles utilisent principalement ces 3 champs, néanmoins en fonction des options choisies, d'autre champs peuvent être utilisés. La mise en page du Corps de texte se fait également via une interface de mise en forme de texte. 123SpipAdmin V2

15 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE15 Interface : GESTION DE CONTENU La mise en forme dun Corps de texte Linterface de mise en forme de vos Corps de texte vous permet de : Mettre en forme du texte Insérer des images Créer des tableaux Créer des liens hypertextes La démarche reste la même que dans une application de type traitement de texte, cest-à-dire : Sélection / Application dune mise en forme/(paramétrage éventuel/validation) (ex: gras, italique, alignement, lien hypertexte) Ou Positionnement du curseur dans le document/ insertion dun élément après paramétrage et validation (ex: insertion image, insertion tableau...) 123SpipAdmin V2

16 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE16 Interface : GESTION DE CONTENU Mise en forme : le texte La démarche reste la même que dans une application de type traitement de texte, cest-à-dire : Sélection / Application dune mise en forme/(paramétrage éventuel/validation) (ex: gras, italique, alignement, lien hypertexte) Mise en italique de la sélection Soulignage de la sélection Création dune liste numérotée. Un numéro se créé au début de chaque paragraphe sélectionnés Création dune liste à puces. Une puce se créée au début de chaque paragraphe sélectionnés Alignement de la sélection (Gauche-Centré-Droite-Justifié) Retrait positif ou négatif de la sélection Redéfinition de la couleur des caractères Mise en gras de la sélection 123SpipAdmin V2

17 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE17 Interface : GESTION DE CONTENU Mise en forme : création de liens hypertextes Un lien est supporté soit par du texte soit par une image. Il se caractérise par un changement du curseur lors de son survol (qui devient une main) et suppose quau clic sur ce lien, le navigateur va rechercher une page internet à une adresse spécifique mentionnée dans la définition du lien. Cette page saffichera alors dans la page courante par défaut ou dans une nouvelle page si demandé comme tel dans la définition du lien. Définition du lien sur la sélection courante Suppression du lien sur la sélection courante Création dune ancre à lemplacement du curseur ( dépose dun marqueur dans la page ) Un lien peut être de 3 natures différentes Lien externe : pointe vers une page dun autre site Lien Interne : pointe vers une page du site même Lien Intérieur : Pointe dans la page courante sur une emplacement préalablement défini (ancre) 123SpipAdmin V2

18 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE18 Interface : GESTION DE CONTENU Mise en forme : création de liens hypertextes LIEN EXTERNE Définition de ladresse de la page à pointer (URL de type : Détermination de la fenêtre daffichage de la nouvelle page : _blank nouvelle fenêtre _self même fenêtre (option prise par défaut) Validation Sélection du texte (ou de limage le cas échéant) puis choix du picto lien hypertexte 1 123SpipAdmin V2

19 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE19 Interface : GESTION DE CONTENU Mise en forme : création de liens hypertextes LIEN INTERNE Collez ici ladresse de la page à cibler, que vous aurez préalablement copier depuis le site Internet Validation 2 Sélection du texte (ou de limage le cas échéant) puis choix du picto lien hypertexte 1 3 Vous définissez un lien interne pour donner la possibilité à linternaute de pointer une page article ou rubrique du site depuis une autre pages rubrique ou article. Ex : je suis sur une page article qui me fais la liste des voyages proposer par un prestataire. Il se trouve que ce prestataire fais également parti des partenaires du CE et quune page en fait e détail. Je peux donc dans la page du voyage faire un lien sur la page qui donne des information sur ce partenaire. Pour ce faire, consulter le site, placez vous sur la page à cibler, copier son adresse puis dans la démarche de création du lien, coller ladresse dans la zone de létape 2 123SpipAdmin V2

20 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE20 Interface : GESTION DE CONTENU Mise en forme : création de liens hypertextes LIEN INTERIEUR (avec définition dune ancre) Sélectionnez le texte qui supportera le lien, cliquez sur licône lien, puis dans la liste déroulante « type de lien », sélectionnez ancre dans cette page, dans la seconde liste déroulante sélectionnez le nom de lancre précédemment créée. 2 Positionner votre curseur à lendroit ou doit pointer le lien, sélectionner le pictogramme ancre, nommer lancre puis validez 1 Vous définissez un lien interne pour donner la possibilité à linternaute de pointer une page article ou rubrique du site depuis une autre pages rubrique ou article. Ex : je suis sur une page article qui me fais la liste des voyages proposer par un prestataire. Il se trouve que ce prestataire fais également parti des partenaires du CE et quune page en fait e détail. Je peux donc dans la page du voyage faire un lien sur la page qui donne des information sur ce partenaire. Pour ce faire, consulter le site, placez vous sur la page à cibler, copier son adresse puis dans la démarche de création du lien, coller ladresse dans la zone de létape 2 Validation SpipAdmin V2

21 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE21 123SpipAdmin Interface : GESTION DE CONTENU Mise en forme : insertion dune image ATTENTION : Toutes les images que vous désirez intégrer dans vos différentes mises en pages doivent être préalablement téléchargées sur le serveur hébergeant votre site. Soyez vigilant sur leur format (gif ou jpg), sur leur poids et enfin sur leur nom (pas despace ni de caractère accentués ou spéciaux). Placez votre curseur à lendroit où doit sinsérer limage et Choisissez le pictogramme Insertion dimage 1 Cliquez sur parcourir le serveur pour ouvrir une fenêtre qui fera la liste des images déjà présente et à disposition sur le serveur 2 Choisissez dans la liste le nom de limage.un simple clic validera votre choix, limage choisie sera présente à la place du curseur; restera à la paramétrer. Si limage ne se trouve pas dans la liste, passez à létape 4 3 Cliquez sur parcourir, sélectionnez le fichier image depuis votre propre machine, validez puis cliquez sur upload pour télécharger le fichier image sur le serveur. Ne fois fais, son nom apparaîtra alors dans la liste et vous pourrez faire létape 3 4

22 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE22 Interface : GESTION DE CONTENU Mise en forme : Propriétés dune image Les propriétés sur lesquelles vous allez pouvoir jouer sont : Taille de limage (en pixel). Le cadenas fermé garanti de garder les proportion lors du redimensionnement. La flèche permet de revenir à la taille dorigine de limage suite à une déformation. Ses espacements (espace de réserve verticaux et/ou horizontaux) Son alignement, cest-à-dire comment vont réagir les éléments placés à coté delle. Dans notre exemple, limage a une taille de 120x120 pixels, a des espaces de réserve de 5 pixels et un alignement gauche, cest-à-dire quelle se placera à gauche de la page et le texte écrit à sa suite se distribuera tout autour. 123SpipAdmin V2

23 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE23 Les propriétés sur lesquelles vous allez pouvoir jouer sont : Le nombre de ligne et colonnes du tableau. La largeur du tableau exprimées en % Son alignement, cest-à-dire sa position et comment vont réagir les éléments placés à coté de lui. La présence ou non de bordure (taille) Les espaces entre cellule Les marges intérieur des cellules Interface : GESTION DE CONTENU Mise en forme : Insertion et propriétés dun tableau Positionner votre curseur à lendroit ou insérer le tableau, sélectionner le pictogramme tableau 1 Paramétrer votre tableau puis validez 2 123SpipAdmin V2

24 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE24 NOTER BIEN : Lorsque vous cliquez droit alors que votre curseur se trouve dans une cellule du tableau, vous accédez à une autre liste ditems qui vous permettra dajouter supprimer des lignes, des colonnes, et daccéder aux propriétés de la cellule Interface : GESTION DE CONTENU Mise en forme : modification des propriétés dun tableau Sélectionnez le tableau en plaçant votre curseur sur une de ses bordure, puis cliquez droit 1 Dans la liste des items, sélectionnez « Propriétés du tableau » pour afficher la fenêtre des propriétés vue précédemment 2 123SpipAdmin V2

25 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE25 Pour valider votre article, il vous suffit de cliquer sur le bouton Enregistrer. A NOTER Vous avez la possibilité de mettre votre article en attente en lui donnant le statut de « en cours de rédaction ». Il sera présent dans votre base (et donc accessible depuis ladministration), mais ne sera pas mentionné dans le site Internet tant quil naura pas le statut de « publié en ligne ». Interface : GESTION DE CONTENU Valider un article 123SpipAdmin V2

26 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE26 Interface : GESTION DE CONTENU Attacher des documents aux articles Pour les articles, il vous est possible dy accrocher 1 ou plusieurs documents (Excel, Word, Pdf...). En cliquant sur longlet Parcourir dans la boite de gauche, vous avez la possibilité de parcourir votre ordinateur et de pointer le document à attacher. Une fois téléchargé, renseignés son titre et son descriptif, validez pour quil s'affiche correctement sur le site. A partir de ce moment, votre site fera mention dun document en bas de page de larticle en mentionnant son titre son descriptif, sa nature et son poids. Le titre et descriptif sont cliquables pour permettre à linternaute de le télécharger. 123SpipAdmin V2

27 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE27 LES RUBRIQUES PARTICULIERES Rubriques principales - Fil infos - Annonces Nous avons donc vu quen ce qui concerne les Rubriques principales cest-à-dire les 6 points dentrées principaux du site, nous utilisons la structure suivante Par contre pour le Fil infos, la rubrique ne contient que des articles dont il faudra renseigner le titre et le corps de texte. Attention, le corps de texte ne doit pas contenir de paragraphe mais une seule phrase FIL INFO Phrase 1 Phrase 2Phrase n Idem pour les pages Annonces, qui nutilise que des articles. Le Titre et le Chapeau de larticle sont utilisés pour les parties défilantes. Le corps de texte est visible lors du clic de linternaute sur le chapeau défilant. ANNONCES Annonce 1 Annonce 2Annonce n Il est également d illustrer votre Annonce en attachant à son article un logo ( petite image gif ou jpg depuis votre machine ) qui apparaitra également dans le panneau défilant RUBRIQUE SOUS RUBRIQUE 1 SOUS RUBRIQUE 2 SOUS RUBRIQUE n Article 1 Article 2Article n 123SpipAdmin V2

28 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE28 LES RUBRIQUES PARTICULIERES La photothèque La PHOTOTHEQUE également se structure par défaut sous forme Rubrique/Sous rubrique/Articles. Elle utilise un type darticle identique aux articles classiques, et se sert du formulaire Joindre un document qui permet lui accrocher des photos ou un dossier compressé (.zip), contenant toutes les images (au format jpg) qui composeront le diaporama. Créer votre article comme d'habitude, créer votre contenu personnalisé 1 Sauvegardez votre article 2 Utilisez le bouton parcourir pour pointer votre fichier.zip présent sur votre machine. Cliquez sur Télécharger pour envoyer le fichier sur le serveur. 3 Vos photos s'affichent ici et sont visible sur votre site 4 RUBRIQUE SOUS RUBRIQUE 1 SOUS RUBRIQUE 2 SOUS RUBRIQUE n Article 1 Article 2Article n 123SpipAdmin V2

29 Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE29 Une fois vos modifications, créations réalisées, pensez à vider le cache. Il existe en effet un cache serveur qui, tant quil nest pas vide, montre létat antérieur de votre base au internaute. Seulement après avoir vider le cache, revenez sur votre site Internet et réactualisez la page que vous avez modifiée pour vérifier votre travail. Attention, il est fortement conseillé que votre navigateur également ne fasse pas de cache (Voir le menu du navigateur [Outils/Options Internet]) Interface : GESTION DE CONTENU Vider le cache 123SpipAdmin V2

30 Interface de gestion de contenu 123WEBCE important 1. Lorsque lon supprime les infos contenus dans un article du fil info, ne pas toucher à la rubrique « fil info » même si celle-ci vous propose un bouton supprimer la rubrique. 2. Ne pas oublier de bien mettre le statut dun nouvel article en « publier en ligne » afin quil soit visible sur le site. 3. Lorsque lon intègre un lien dans un texte ne pas oublier de faire la manipulation suivante


Télécharger ppt "Interface de gestion de contenu 123WEBCE 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE1 123SpipAdmin V2 PREAMBULE Vous avez opté pour."

Présentations similaires


Annonces Google