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.

Présentation au sujet: "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."— Transcription de la présentation:

1 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 d’affichage. 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 Base de données Cache 123SpipAdmin 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

2 Les invariants des modèles 123WEBCE
123SpipAdmin V2 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 d’accueil Le détail d’une rubrique sélectionnée Le détail d’un article sélectionné Puis viennent s’ajouter les modules et/ou fonctionnalités choisies au cas par cas ... RUBRIQUE SOUS RUBRIQUE 1 SOUS RUBRIQUE 2 SOUS RUBRIQUE n Article 1 Article 2 Article n 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

3 Affichage coté site Internet
123SpipAdmin V2 Affichage coté site Internet 6 Entrées Principales Articles défilants FIL INFOS Articles défilants ANNONCES Accès à l’Article de type Formulaire de contact Texte d’accueil 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

4 Affichage coté site Internet
123SpipAdmin V2 Affichage coté site Internet Détail d’une rubrique sélectionnée 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

5 Affichage coté site Internet
123SpipAdmin V2 Affichage coté site Internet Détail d’un article sélectionné 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

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

7 Lancer l’interface d’administration
123SpipAdmin V2 Lancer l’interface d’administration L’administration n’est accessible qu’aux personnes connaissant le login et mot de passe d’accès. Celle-ci se lance depuis Internet à l’adresse suivante : et vous demandera en premier lieu de vous authentifier. Login donné lors de votre formation Mot de passe Donné lors de votre formation Validation 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

8 Structure de l’interface
123SpipAdmin V2 Structure de l’interface Vous arrivez alors sur l’interface complète d’administration qui se décompose en 3 grandes sections ... Bandeau supérieur permet de retrouver les infos importantes du site. 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. 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

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

10 Interface : GESTION DE CONTENU Règles de base
123SpipAdmin V2 Interface : GESTION DE CONTENU Règles de base Au travers de l’administration, 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 n’empê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 qu’elle contient sous un même titre. Les articles sont principalement créés au niveau sous rubrique (sauf cas particulier du texte d’accueil, 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 l’ordre d’affichage dans votre site, pensez à numéroter les titres (sans oublier l’espace et de 10 en 10 pour faciliter les insertions)‏ ex: [10. Titre de mon article] 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

11 Interface : GESTION DE CONTENU Les rubriques ou sous rubriques
123SpipAdmin V2 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 d’un élément, il faut utiliser les pictogrammes présents sur cette page.. Voir le contenu de l’élément rubrique Supprimer l’élément rubrique (n'apparaît que si la rubrique 'est vide)‏ Créer une sous rubrique Créer un article Consulter la page internet faisant appel à l’élément rubrique pour voir le résultat 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

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

13 Interface : GESTION DE CONTENU Champs des description d’une rubrique
123SpipAdmin V2 Interface : GESTION DE CONTENU Champs des description d’une 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 corps de texte (dans le seul cas d’une 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, interface de mise à jour du site Internet 123WEBCE

14 Interface : GESTION DE CONTENU Champs de description d’un article
123SpipAdmin V2 Interface : GESTION DE CONTENU Champs de description d’un 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, interface de mise à jour du site Internet 123WEBCE

15 Interface : GESTION DE CONTENU La mise en forme d’un Corps de texte
123SpipAdmin V2 Interface : GESTION DE CONTENU La mise en forme d’un Corps de texte L’interface 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, c’est-à-dire : Sélection / Application d’une mise en forme/(paramétrage éventuel/validation) (ex: gras, italique, alignement, lien hypertexte)‏ Ou Positionnement du curseur dans le document/ insertion d’un élément après paramétrage et validation (ex: insertion image, insertion tableau ...)‏ 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

16 Interface : GESTION DE CONTENU Mise en forme : le texte
123SpipAdmin V2 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, c’est-à-dire : Sélection / Application d’une mise en forme/(paramétrage éventuel/validation) (ex: gras, italique, alignement, lien hypertexte)‏ Mise en gras de la sélection Mise en italique de la sélection Soulignage de la sélection Création d’une liste numérotée. Un numéro se créé au début de chaque paragraphe sélectionnés Création d’une 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 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

17 123SpipAdmin V2 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 qu’au 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 s’affichera 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 d’une ancre à l’emplacement du curseur (dépose d’un marqueur dans la page) Un lien peut être de 3 natures différentes Lien externe : pointe vers une page d’un 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, interface de mise à jour du site Internet 123WEBCE

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

19 123SpipAdmin V2 LIEN INTERNE 1 2 3 Interface : GESTION DE CONTENU
Mise en forme : création de liens hypertextes Vous définissez un lien interne pour donner la possibilité à l’internaute 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 qu’une 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 l’adresse dans la zone de l’étape 2 LIEN INTERNE 1 2 Sélection du texte (ou de l’image le cas échéant) puis choix du picto lien hypertexte Collez ici l’adresse de la page à cibler, que vous aurez préalablement copier depuis le site Internet 3 Validation 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

20 123SpipAdmin V2 LIEN INTERIEUR (avec définition d’une ancre)‏ 3 1 2
Interface : GESTION DE CONTENU Mise en forme : création de liens hypertextes Vous définissez un lien interne pour donner la possibilité à l’internaute 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 qu’une 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 l’adresse dans la zone de l’étape 2 LIEN INTERIEUR (avec définition d’une ancre)‏ 3 Validation 1 Positionner votre curseur à l’endroit ou doit pointer le lien, sélectionner le pictogramme ancre, nommer l’ancre puis validez 2 Sélectionnez le texte qui supportera le lien, cliquez sur l’icô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 l’ancre précédemment créée. 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

21 Interface : GESTION DE CONTENU Mise en forme : insertion d’une image
123SpipAdmin Interface : GESTION DE CONTENU Mise en forme : insertion d’une 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 d’espace ni de caractère accentués ou spéciaux). 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 Choisissez dans la liste le nom de l’image .un simple clic validera votre choix, l’image choisie sera présente à la place du curseur; restera à la paramétrer. Si l’image ne se trouve pas dans la liste, passez à l’étape 4 2 Placez votre curseur à l’endroit où doit s’insérer l’image et Choisissez le pictogramme Insertion d’image 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 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

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

23 123SpipAdmin V2 1 2 Interface : GESTION DE CONTENU
Mise en forme : Insertion et propriétés d’un tableau 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, c’est-à-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 1 Positionner votre curseur à l’endroit ou insérer le tableau, sélectionner le pictogramme tableau 2 Paramétrer votre tableau puis validez 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

24 123SpipAdmin V2 1 2 Interface : GESTION DE CONTENU
Mise en forme : modification des propriétés d’un tableau NOTER BIEN : Lorsque vous cliquez droit alors que votre curseur se trouve dans une cellule du tableau, vous accédez à une autre liste d’items qui vous permettra d’ajouter supprimer des lignes, des colonnes, et d’accéder aux propriétés de la cellule 1 2 Sélectionnez le tableau en plaçant votre curseur sur une de ses bordure, puis cliquez droit 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 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

25 Interface : GESTION DE CONTENU Valider un article
123SpipAdmin V2 Interface : GESTION DE CONTENU Valider un article 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 l’administration), mais ne sera pas mentionné dans le site Internet tant qu’il n’aura pas le statut de « publié en ligne ». 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

26 Interface : GESTION DE CONTENU Attacher des documents aux articles
123SpipAdmin V2 Interface : GESTION DE CONTENU Attacher des documents aux articles Pour les articles, il vous est possible d’y accrocher 1 ou plusieurs documents (Excel, Word, Pdf ...). En cliquant sur l’onglet 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 qu’il s'affiche correctement sur le site. A partir de ce moment, votre site fera mention d’un document en bas de page de l’article en mentionnant son titre son descriptif, sa nature et son poids. Le titre et descriptif sont cliquables pour permettre à l’internaute de le télécharger. 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

27 123SpipAdmin V2 LES RUBRIQUES PARTICULIERES
Rubriques principales - Fil infos - Annonces Nous avons donc vu qu’en ce qui concerne les Rubriques principales c’est-à-dire les 6 points d’entré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 Idem pour les pages Annonces, qui n’utilise que des articles. Le Titre et le Chapeau de l’article sont utilisés pour les parties défilantes. Le corps de texte est visible lors du clic de l’internaute sur le chapeau défilant. RUBRIQUE FIL INFO ANNONCES SOUS RUBRIQUE 1 SOUS RUBRIQUE 2 SOUS RUBRIQUE n Phrase 1 Phrase 2 Phrase n Annonce 1 Annonce 2 Annonce n Article 1 Article 2 Article 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 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

28 LES RUBRIQUES PARTICULIERES La photothèque
123SpipAdmin V2 LES RUBRIQUES PARTICULIERES La photothèque La PHOTOTHEQUE également se structure par défaut sous forme Rubrique/Sous rubrique/Articles. Elle utilise un type d’article 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. RUBRIQUE Vos photos s'affichent ici et sont visible sur votre site SOUS RUBRIQUE 1 SOUS RUBRIQUE 2 SOUS RUBRIQUE n 4 Article 1 Article 2 Article n 3 1 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. Créer votre article comme d'habitude, créer votre contenu personnalisé 2 Sauvegardez votre article 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

29 Interface : GESTION DE CONTENU Vider le cache
123SpipAdmin V2 Interface : GESTION DE CONTENU Vider le cache Une fois vos modifications, créations réalisées, pensez à vider le cache. Il existe en effet un cache serveur qui, tant qu’il n’est 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])‏ 123SpipAdmin, interface de mise à jour du site Internet 123WEBCE

30 important 1. Lorsque l’on 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 d’un nouvel article en « publier en ligne » afin qu’il soit visible sur le site. 3. Lorsque l’on intègre un lien dans un texte ne pas oublier de faire la manipulation suivante