Procédurier des principales fonctions

Transcription

1 SYSTÈME DE PUBLICATION POUR L INTERNET PARTAGÉ SQUELETTE SARKA Procédurier des principales fonctions avec éditeur de texte TinyMCE DOCUMENT DE TRAVAIL Le site de référence pour les formations de Spip 3.05 est : Le site officiel pour le squelette Sarka : L équipe APO-DSTI 13/03/2013

2 2

3 Qu est-ce que SPIP? SPIP est une application Web, ou un gestionnaire de contenus, qui permet de publier facilement du contenu sur Internet. SPIP offre la possibilité de construire un site Web directement à partir d un navigateur (Explorer, Netscape, Mozilla ) sans avoir à taper des codes HTML ou de faire des transferts. Les principaux avantages de ce logiciel sont : La possibilité de concevoir ou de tenir à jour un site Web à partir de n importe quel endroit sur la planète! Une interface simple à utiliser. La possibilité de travailler en équipe en donnant des rôles aux participants (auteurs, rédacteurs ou administrateurs). À l aide de SPIP, il est possible de publier des documents, fichiers et images tout en évitant les problèmes d affichage. Quels sont les termes spécifiques à SPIP? Les secteurs spécialisés : Il s agit de rubriques qui ont une fonction, attribution spécifique. Les rubriques : Les différentes sections du site se nomment des rubriques. Seul un administrateur peut créer des rubriques. Les sous-rubriques : Il s agit de la subdivision des rubriques. Seul un administrateur peut créer des sousrubriques. Des articles : Ce sont des textes qui présentent le contenu. Ils peuvent être accompagnés d images, de documents ou de fichiers. Les articles sont créés par des rédacteurs ou des administrateurs. Ils se situent soit dans les rubriques ou les sous-rubriques. Les brèves : Ce sont de courts textes qui présentent du contenu, mais moins élaborés que les articles. Les brèves apparaîtront sur la page d accueil de votre site. Ce sont les dernières nouvelles! Autre élément important : Il est également possible de créer des articles ou des brèves qui pointent vers des sites Web externes. 3

4 Qu est-ce que le site privé et le site public? Un site créé avec SPIP est caractérisé par deux parties distinctes : le site public et le site privé. Le site public est accessible par tous les internautes tandis que le site privé n est accessible que par les administrateurs et les rédacteurs avec des mots de passe. Le site privé permet de gérer le site et son contenu. Voici un exemple : Le site de formation de la DSTI est visible tel que sur Internet. C est le site public. Enfin, en cliquant sur «connexion», vous aurez accès au site privé. Pour voir les autres thèmes disponibles aller à l adresse suivante : Comment accéder à l interface du site public? Pour accéder à un site SPIP, vous devez démarrer Internet à l aide du fureteur FIREFOX et inscrire l adresse du site dans la barre d adresse. Tous les nouveaux sites SPIP de la CSSMI ont une adresse commune, c est pourquoi on inscrit «sites.cssmi.qc.ca/le_nom_du_site». Pour consulter le site de formation: Spip version 3.05 Vous êtes alors sur la page d accueil (du site public) qui est accessible par tous les internautes. 4

5 Comment accéder à l interface du site privé? L autre interface de votre site est l espace privé. Cette interface est accessible seulement par les administrateurs et les rédacteurs. Vous devez avoir un code d accès et un mot de passe. C est par cette interface du site que vous pourrez déposer vos textes et vos documents. Voici la procédure pour y accéder. Vous cliquez sur le mot : «connexion». Une fenêtre apparaît : inscrivez votre «login» (Identifiants personnels). 1 Dans le deuxième espace, vous devez inscrire votre mot de passe et le valider. Vous pouvez cocher la case «Rester identifié quelques jours». Vous n aurez plus à entrer votre mot de passe lorsque vous cliquez sur le «site privé». C est très pratique pour effectuer des tests. Cliquer maintenant sur «Espace privé» 1 À de la création du site, le premier «login» et le mot de passe vous sont fournis par la DSTI. Par la suite, le «webmestre» ou un administrateur pourra créer d autres accès. 5

6 Menu principal Qu est-ce qu il y a dans l interface du site privé? Les différentes fonctions du menu principal : Vous amène à la première page du site Le menu «Édition» permet la création ou la modification des auteurs, des rubriques, des articles, des documents, des mots-clés, des projets didapages, des brèves, des événements et des sites référencés. Le menu «Publication» permet de suivre la vie du site. Le menu «Activité» permet de voir les statistiques liées au site. Le menu «Squelettes» permet de modifier ou de configurer l apparence du site. Le menu «Maintenance» permet de vider la mémoire tampon ou de restaurer une base de données endommagée. La configuration des fonctions utilisées par le site est réalisée par l administrateur du site, le webmestre. 6

7 Comment débuter? Cliquer sur le menu «Édition» Voici les différents éléments du menu «Édition» 7

8 1. Pour ajouter ou modifier un auteur. Le premier écran affiche la liste des auteurs du site. Pour créer un nouvel auteur cliquer sur Les différents statuts des auteurs : Le webmestre est celui qui gère le site. Il a tous les droits et il peut modifier la configuration du site. L administrateur peut créer des rubriques, des articles, donner des droits à d autres auteurs, et modifier ces droits. Il peut également publier ces articles en ligne Le rédacteur peut écrire des articles, mais doit les soumettre pour approbation et publication. Il ne peut modifier les articles des autres. Le visiteur peut avoir certains droits et collaborer de l extérieur. 8

9 Compléter les informations suivantes Inscrire le nom de l auteur Inscrire son adresse La biographie est facultative Ne rien inscrire à l intérieur de cet espace Choisir le statut (voir les possibilités plus bas) Ne rien inscrire à l intérieur de cet espace Inscrire le login Inscrire le mot de passe et confirmer Enregistrer ce nouvel auteur 9

10 Pour modifier un auteur : Simplement cliquer sur le nom de l auteur à modifier 2. Pour créer ou modifier une rubrique Les rubriques sont l équivalent des menus de votre site. Ces dernières apparaîtront soit à la gauche du site ou dans le bandeau, c est selon le thème choisi. Voici deux exemples : Menu à gauche Menu dans le bas du bandeau 10

11 Créer une nouvelle rubrique? Cliquer sur créer une rubrique Une seule information est importante : le «Titre» de la rubrique. Donner un titre à votre rubrique N oubliez pas d enregistrer 11

12 Pour chacune des rubriques, on peut créer des sous-rubriques (sous-menus). Voici un exemple : Sous-rubriques de «Les procéduriers» Lors de la création de votre site, il y aura déjà trois rubriques. Ces rubriques sont ce qu il est convenu d appeler des secteurs spécialisés. - Squelette = Pour les annonces et l éditorial - Agenda = Pour les événements et la gestion du mini-calendrier - Album-photo = Pour vos albums photos Note importante : Toutes les rubriques (menus) peuvent être créées à l avance, cependant seules celles qui contiennent un ou plusieurs articles seront visibles sur le site publique. 3. Pour créer ou modifier un article. Dans le menu «Édition» sélectionner «Articles» Tous les articles apparaissent. 12

13 Pour créer un nouvel article cliquer sur l icône. Trois informations sont importantes : le titre, la rubrique et le contenu (texte). Titre Le choix de la rubrique Votre texte 13

14 Première étape : Saisissez le titre de votre article Deuxième étape : Cliquer sur le triangle et sélectionner la rubrique dans laquelle votre article doit apparaître. Troisième étape : Saisissez votre texte dans l espace approprié 14

15 Référence rapide de la barre d outils TinyMCE Description Description Gras Liste numérotée avec choix de numérotation Italique Retrait de l indentation Souligné Indentation Barré. Insérer ou modifier un lien Alignement du texte (gauche, centré, à droite ou justifié) Supprimer un lien Format de paragraphe (Titre) Insérer ou modifier une ancre Choix de la police de caractères (17 choix) Choix de la couleur du texte Choix de la taille de la police Choix de la couleur de surlignage Indice Insérer ou modifier un tableau Exposant Propriété d une ligne du tableau Insérer un trait horizontal Propriété d une cellule du tableau Guillemet pour les citations Insérer une ligne avant Abréviation Insérer une ligne après Acronyme Supprimer une ligne Suppression de paramètres spéciaux Retrait de l indentation Insertion de paramètres spéciaux Insérer une colonne avant Liste à puces avec choix de puces Insérer une colonne après 15

16 Supprimer une colonne Coller comme texte brut Scinder une cellule Coller un texte créer sous Word Fusionner des cellules Rechercher dans le texte Insérer de caractères spéciaux Rechercher et remplacer Insérer ou éditer une image Activer les caractères de mise en page Insérer ou éditer un média Insérer ou éditer les attributs Insérer un modèle Supprimer le formatage Insérer une espace insécable Nettoyer le code Écriture de gauche à droite Insérer la date Écriture de droite à gauche Insérer l heure Annuler une action Éditer le code source HTML Passer en mode plein écran Couper Protéger la sélection pour un traitement par Spip Copier Retour à l éditeur Spip par défaut Coller 16

17 Quatrième étape : vous devez enregistrer votre article Cliquer sur «Enregistrer» Après avoir cliqué sur «Enregistrer», une nouvelle fenêtre apparaît : Pour modifier l article, cliquer sur cette icône. 17

18 Pour voir son article en ligne Dans le coin gauche quatre solutions, - en cours de rédaction - publié en ligne si votre article est terminé. - refusé, pour un rédacteur - à la poubelle pour effacer un article Cliquer sur changer pour confirmer votre choix Pour voir directement cet article cliquer sur le globe (Voir en ligne) Insertion d une image dans le texte. L insertion d une image est un tout petit peu plus compliquée que dans un traitement de texte normal. Pour insérer une image dans l'article, il faut rédiger l'article, l'enregistrer et le publier en ligne. Par la suite revenir modifier l'article et suivre les étapes suivantes. Il faut envoyer l'image sur le serveur (Télécharger). En haut à gauche de l écran Cliquer sur parcourir et sélectionner votre image Cliquer sur Téléverser 18

19 Votre image apparaît dans la partie gauche de l écran Dans la barre d outils du texte, sélectionner la fonction image Cliquer sur le triangle Sélectionner votre image 19

20 Cliquer sur l onglet apparence, sélectionner votre alignement et les dimensions de votre image. Largeur des images : - petite 100 pixels -moyenne 300 pixels -grande 560 pixels. Cliquer sur «Insérer». L image est insérée dans votre texte. 20

21 Enregistrer votre article Comme votre image ou photo est dans votre article, vous ne désirez pas que cette dernière apparaisse dans le portfolio de l article. Alors cliquer sur l option «Retirer du portfolio» Insertion d un fichier PDF dans le texte ou en ajout au bas du texte Pour l insertion d un fichier dans le texte, la méthode est sensiblement la même que pour l image Cliquer sur parcourir et sélectionner votre image Cliquer sur Téléverser 21

22 En haut à gauche de l écran Cliquer sur parcourir et sélectionner votre image Cliquer sur Téléverser À l aide de la souris, vous glissez l image du fichier PDF dans l espace de votre texte Vous cliquer sur l image dans votre texte puis vous sélectionner la fonction «Lien» L adresse du fichier va apparaître au niveau de L URL du lien Il est conseillé de faire ouvrir le fichier dans une nouvelle fenêtre 22

23 Vous enregistrer votre document, et vous détacher le fichier de l article. Voici le résultat en ligne, votre fichier est maintenant dans votre texte Pour ajouter des fichiers PDF à la suite de votre texte, il faut l option «Ajouter un document» qui se trouve dans le bas de votre article 23

24 Cliquer sur parcourir Cliquer sur Téléverser Une fois le document téléversé vous pouvez le modifier pour lui donner un titre. Voici le résultat en ligne, vos documents sont maintenant à la suite de votre texte, dans la section document joint. 24

25 Insertion d un lien vers une adresse de courriel. Pour créer un lien, on tape son texte puis on sélectionne le nom sur lequel on veut faire le lien. Exemple pour un courriel à Carole On sélectionne l'outil lien Puis on inscrit le code suivant mailto:l'adresse de courriel Finalement on clique sur «Mettre à jour» 25

26 Pour un lien vers une adresse Internet (URL) Sélectionner le texte qui servira de lien Sélectionner l icône lien Copier et inscrire l adresse URL du site Pour éviter la fermeture de votre site Choisir la «Cible» Ouvrir dans une nouvelle fenêtre. Cliquer sur «Mettre à jour» 26

27 Pour ajouter une image (logo) à un article? Dans le haut de l écran après avoir rédigé votre article, vous trouverez cette section. Cliquer sur «parcourir» et allez chercher votre image (sur le disque dur ou dans le réseau). Terminer en cliquant sur «Téléverser». Le logo apparaîtra dans le haut à la droite de votre article Qu est-ce que le logo de survol? Le logo de survol fera changer le logo de l article (image) en une autre image lorsque la souris passe par-dessus l image. Faites la même démarche pour insérer un logo de survol que pour insérer un logo de l article. 27

28 Comment fait-on pour voir le site en ligne (interface du site public)? Aller sur le site public via cette option Quels sont les problèmes rencontrés ou les oublis lors de la publication? Vos rubriques n apparaissent pas? Il faut un article publié dans votre rubrique pour que celle-ci s affiche. Votre article n apparaît pas? Vérifier l état de votre article : En cours de rédaction Publié en ligne Proposé À la poubelle Votre article n apparaît toujours pas? Avez-vous rédigé un article ou une rubrique? Vous ne voyez toujours pas vos ajouts ou vos images? Recalculer la page 28