Tutoriel SPIP

35,734
-1

Published on

Tutoriel pour SPIP

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
35,734
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
137
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Tutoriel SPIP

  1. 1. Back office SPIP Mode d’emploi www.ccvol.com La gestion dynamique de contenus
  2. 2. La gestion de contenu dynamique Le rédacteur accède à l’interface d’administration du site pour alimenter, modifier ou supprimer son contenu en texte et images. Il n’a pas besoin de connaissances techniques particulières Le visiteur consulte le site développé par SPIP à partir des éléments intégrés par le rédacteur. Les opérations se font par l’intermédiaire des navigateurs habituels. Connections à l’interface par login et mot de passe http://www.monsite.com http://www.monsite.com/ecrire
  3. 3. Extranet* Espace de travail partagé Site « Grand public » Espace «utilisateurs» <ul><li>Contenu éditorial </li></ul><ul><li>Présentation </li></ul><ul><li>Missions </li></ul><ul><li>Services </li></ul><ul><li>partenaires </li></ul>Espace Administration <ul><li>Fonctions interactives et rubriques réservées aux visiteurs habilités </li></ul><ul><li>Forum </li></ul><ul><li>documentation réservée </li></ul><ul><li>Fonctions et rubriques réservées aux utilisateurs internes </li></ul><ul><li>méthodes et outils </li></ul><ul><li>Documentation </li></ul><ul><li>Espace de travail </li></ul><ul><li>Fonctionnalités </li></ul><ul><li>Agenda </li></ul><ul><li>actu </li></ul><ul><li>Recherche </li></ul><ul><li>liens </li></ul>Espace Internet libre Consultation sur internet à accès restreint Interface d’administration Une seule interface web <ul><li>Administration du site </li></ul><ul><li>Rédaction des articles </li></ul><ul><li>Newsletter </li></ul><ul><li>Modération Forum </li></ul><ul><li>Gestion des droits d’accès </li></ul><ul><li>Etc… </li></ul>Organisation générale du site
  4. 4. Racine du site Architectures et organisation du contenu Rubrique 1 Rubrique 2 Rubrique 3 Rubrique 4 Sous rubrique Sous rubrique Article Article Article Article Article Article Article Article Article Article Sous rubrique Sous rubrique Sous rubrique Sous rubrique Article Article Article Article Article Article Article
  5. 5. La gestion de contenu dynamique <ul><li>Une interface Web intuitive : </li></ul><ul><ul><li>proposition d’articles et de brèves </li></ul></ul><ul><ul><li>gestion éditoriale du site </li></ul></ul><ul><ul><li>mise en forme un texte sans avoir à utiliser le langage HTML (raccourcis typographiques) </li></ul></ul><ul><ul><li>contribution rédactionnelle accessible à tous, et aussi simple que l’écriture d’un e-mail. </li></ul></ul>http://www.spip.net/fr_article464.html
  6. 6. Accéder à l’interface d’administration Mode d’emploi
  7. 7. Se connecter à l’administration <ul><ul><li>Pour se connecter en tant qu’administrateur ou rédacteur sur http://www.ccvol.com/ il faut  : </li></ul></ul><ul><ul><li>   </li></ul></ul><ul><ul><ul><li>Taper le lien http://www.ccvol.com/ecrire dans le champ adresse du navigateur. </li></ul></ul></ul>
  8. 8. Se connecter à l’administration <ul><ul><li>Vous arrivez alors sur l’écran suivant : </li></ul></ul><ul><ul><ul><li>Entrez votre login et validez </li></ul></ul></ul>
  9. 9. Se connecter à l’administration <ul><ul><li>Ecran suivant : </li></ul></ul><ul><ul><ul><li>Entrez votre mot de passe et validez </li></ul></ul></ul>
  10. 10. Présentation de l’interface d’administration de SPIP Découverte
  11. 11. Les différents éléments affichés Deux lignes de boutons d’outils principaux Commandes éditoriales Identité Rubriques Articles à valider Articles en cours de rédaction
  12. 12. L’interface d’administration <ul><ul><li>Interface : </li></ul></ul><ul><ul><ul><li>Vous êtes maintenant sur l’interface qui vous permet de gérer le contenu du site. </li></ul></ul></ul>Vous pouvez créer une Rubrique ou un article depuis n’importe quelle page en utilisant le menu.
  13. 13. L’interface d’administration <ul><ul><li>Interface : </li></ul></ul><ul><ul><ul><li>L’interface vous donne accès à Plusieurs niveaux dans l’arborescence : </li></ul></ul></ul>Les sous rubriques Les articles Les rubriques
  14. 14. Le menu de l’interface Permet de revenir au site public Comme son nom l’indique, il s’agit de l’aide en ligne. Attention, elle n’est pas locale et suppose donc une connexion à l’Interne Écran de l’interface privée par défaut. Elle présente l’état du site et de ses propres travaux, en cours ou non. On est à la racine, prêt à naviguer Il s’agit d’un forum interne, chaque article en possède un On a ici accès à la liste des auteurs (rédacteurs et administrateurs Parties « Statistiques » et « configuration » réservées aux administrateurs
  15. 15. Le menu de l’interface Moteur de recherche interne : remplacer Rechercher avec le mot dont on cherche les occurences. Messagerie personnelle : permet de noter des penses-bêtes dans l’agenda et de communiquer en interne avec les autres membres. Navigation sur l’ensemble du site Si on clique sur la boule de l’icône, on peut déplier toute l’arborescence.. Navigation rapide : affiche vos articles en cours de rédaction, les articles proposés à l’évaluation, les boutons de création de brèves, d’articles... Agenda, permet un affichage journalier, hebdomadaire, mensuel Suivre la vie du site : permet de synchroniser un agenda compatible iCal (Mozilla Calendar de Firefox par exemple), de connaître les adresses de syndication...
  16. 16. Modifier son profil utilisateur Mode d’emploi
  17. 17. Modifier son profil utilisateur <ul><ul><li>Pour modifier votre profil utilisateur (nom, login, mot de passe, adresse mail,…), cliquez votre login dans le menu principal. </li></ul></ul>Informations personnelles
  18. 18. <ul><ul><li>Cliquez sur « modifier cet utilisateur » </li></ul></ul>Modifier son profil utilisateur
  19. 19. <ul><ul><li>Modifiez ou complétez les champs souhaités </li></ul></ul><ul><ul><li>Une fois les modifications effectuées, cliquez sur « enregistrer » </li></ul></ul>Modifier son profil utilisateur
  20. 20. Créer une rubrique ou une sous rubrique Mode d’emploi
  21. 21. <ul><ul><li>Seul les administrateurs du site peuvent créer une rubrique ou une sous rubrique. </li></ul></ul>Créer une rubrique Cliquez sur « Créer une rubrique »
  22. 22. <ul><ul><li>La procédure pour une rubrique ou une sous rubrique est la m ême, il suffit d’affecter votre rubrique à la racine du site pour qu’elle soit de niveau 1 (rubrique) ou à une rubrique ou sous rubrique existante pour qu’elle soit de niveau 2, 3 , 4 ou plus (sous rubrique). </li></ul></ul>Créer une rubrique Remplissez les champs (au moins le titre) Indiquez si la rubrique se rattache à la racine du site ou si elle est une sous rubrique d’une rubrique déjà existante. Enregistrez
  23. 23. <ul><ul><li>Une fois la rubrique créée, il est toujours possible de la modifier ou de la supprimer après l’avoir enregistrée. </li></ul></ul>Créer une rubrique Pour modifier la rubrique Pour supprimer la rubrique (Si cette dernière possède des d’articles ou des sous rubriques, supprimez ou déplacez ces derniers avant de la supprimer)
  24. 24. Rédiger mettre un article en ligne Mode d’emploi
  25. 25. <ul><ul><li>Vous avez un statut de rédacteur , vous pouvez rédiger un article, ce dernier devra être valider par un administrateur pour être publié. </li></ul></ul><ul><ul><li>Vous avez un statut d’administrateur , vous pouvez rédiger un article et le publier directement vous m ême. </li></ul></ul>Proposer un article Cliquez sur « Ecrire un nouvel article »
  26. 26. <ul><ul><li>Rédigez votre article directement dans cette interface ou faites un « copier-coller » à partir de votre logiciel de traitement de texte. </li></ul></ul><ul><ul><li>Cliquez ensuite sur « enregistrer » pour valider et afficher un aperçu de la mise en forme. </li></ul></ul>Proposer un article Préciser la rubrique (partie du site ou sera publié votre article) Vous pouvez déplacer un article en lui affectant une autre rubrique de votre choix Sous-titre (si besoin) Titre (obligatoire) Descriptif (si besoin) Chapeau Raccourcis typographiques (mise en forme de votre texte) Texte
  27. 27. <ul><ul><li>Votre article est prêt à être publié. Vous pouvez toujours revenir en arrière pour le modifier. </li></ul></ul><ul><ul><li>N’oubliez pas d’ajouter les mots-clés nécessaires (voir tutoriel mots-clés). </li></ul></ul><ul><ul><li>« Votre article est : » Mettez « proposer à l’évaluation » si vous êtes rédacteur . </li></ul></ul><ul><ul><li>Mettez « publié en ligne » si vous êtes administrateur . </li></ul></ul><ul><ul><li>Pour supprimer un article, sélectionnez « mettre à la poubelle » et validez. </li></ul></ul><ul><ul><li>Vous pouvez joindre un document en le téléchargeant directement depuis votre ordinateur </li></ul></ul>Proposer un article Numéro de l’article
  28. 28. Gestion des mots clés Mode d’emploi
  29. 29. <ul><ul><li>Un mot-clé est une information attribuée à une rubrique ou à un article et qui détermine son lieu ou sa modalité d’affichage dans le site. Ex : Un mot-clé « page d’accueil de rubrique » sera associé à un article si l’on veut que ce dernier s’affiche sur la page d’accueil de sa rubrique. </li></ul></ul><ul><ul><li>Les mots-clé sont déterminés à la construction du site. </li></ul></ul><ul><ul><li>ATTENTION , toute modification ou suppression de mot-clé dans l’interface d’administration risquerait d’affecter l’affichage correct des contenus. </li></ul></ul>Qu’est-ce qu’un mot-clé?
  30. 30. <ul><ul><li>1. Dépliez le cadre « mot-clé » </li></ul></ul><ul><ul><li>2. Sélectionnez le mot-clé choisi et cliquez sur « choisir » </li></ul></ul><ul><ul><li>3. Le nouveau mot-clé vient s’ajouter dans la liste </li></ul></ul>Affecter un mot-clé à un article <ul><ul><li>Une fois votre article rédigé, vous pouvez lui affecter un mot-clé en fonction de sa destination et de ses modalités d’affichage. </li></ul></ul>Liste des mots-clé associé à l’article.
  31. 31. Liste des mots-clés Réunions du conseil communautaire Nos parcs et terrains Accès et transports Logements anciens Spectacles et animations Actualités et évènements Exemple Pour les rubriques dont la page d’accueil doit afficher un résumé des articles multilingues. Fonction de la rubrique Multilingue Fonction de la rubrique Réservé Mise en page de rubriques ne contenant que les documents à télécharger (ex les réunions du conseil communautaires) Fonction de la rubrique Téléchargements Mise en page de rubriques affichant le descriptif des sous rubriques. Fonction de la rubrique Rubrique avec descriptif des articles et sous rubriques Mise en page des rubriques à accueil simple Fonction de la rubrique Rubrique avec accueil simple Mise en page de rubriques de type « Annuaires de liens » Fonction de la rubrique Annuaires de liens Mise en page de rubriques de type « agenda » (affichage de la liste des évènements contenus dans les articles de la rubrique) Fonction de la rubrique Agenda Mise en page de rubriques de type actualités Fonction de la rubrique Actualités + archives Effet Attribution Nom Enfance et éducation Exemple Affiche l’article sur la page d’accueil de sa rubrique Fonction de la page Page d’accueil de rubrique Effet Attribution Nom
  32. 32. Liste des mots-clés Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil Options de la page Zoom_accueil Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil de la rubrique principale Options de la page Zoom_secteur Vie économique Ordures ménagères Accueil du site Accueil du site Accueil du site Exemple Affiche un résumé de l’article dans la partie « zoom » de la page d’accueil de la rubrique Options de la page Zoom_rubrique Affiche un résumé de l’article dans la partie « témoignage » de la page d’accueil de la rubrique Options de la page Témoignage Affiche l’article avec le visionneuse d’image Options de la page Page portfolio Options de la page Page avec menu déroulant Affiche l’article dans la partie « Editorial » de la page d’accueil du site Options de la page Edito accueil Affiche un résumé de l’article sur la page d’accueil du site dans la partie « en bref » Options de la page Brève accueil Affiche l’article en page d’accueil du site Options de la page Article accueil Effet Attribution Nom
  33. 33. Mettre un article en page Mode d’emploi
  34. 34. <ul><ul><li>SPIP vous offre la possibilité de mettre en forme votre texte en utilisant une barre de mise en forme typographique telle que l’on peut en trouver dans un logiciel de traitement de texte. </li></ul></ul><ul><ul><li>Il suffit de surligner le texte à mettre en forme et de cliquez sur l’élément typographique choisi. </li></ul></ul>Mise en forme d’un article Italique Gras Mise en évidence Exposant Petites capitales Interligne 1 <ul><li>Accès à : </li></ul><ul><li>Interligne 2 et 3 </li></ul><ul><li>Alignement du texte </li></ul><ul><li>Encadrer le paragraphe </li></ul><ul><li>Mode Poésie </li></ul>Gestion des ancres Note de bas de page Glossaire Wikipédia Lien Tableau Mode pré visualisation Caractères spéciaux Recherche Accès galerie images
  35. 35. <ul><ul><li>Outre la barre de mise en forme pour le texte, vous pouvez agir sur la mise en forme des paragraphes. </li></ul></ul><ul><ul><li>Mettre un trait de séparation horizontal : </li></ul></ul><ul><ul><ul><li>Tapez une succession d’au moins 4 tirets (Tir et 6 sur le clavier pc) </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : ---- devient ____________________________________________ </li></ul></ul></ul></ul><ul><ul><li>Commencer une phrase à la ligne </li></ul></ul><ul><ul><ul><li>Mettre un tiret bas (tiret 8 sur le clavier pc) + espace avant le premier mot. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : « Je passe directement _ à la ligne » devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Je passe directement </li></ul></ul></ul></ul><ul><ul><ul><ul><li>à la ligne </li></ul></ul></ul></ul><ul><ul><li>Sauter une ligne </li></ul></ul><ul><ul><ul><li>Faire un retour chariot comme sur tout traitement de texte. </li></ul></ul></ul>Mise en forme des paragraphes
  36. 36. <ul><ul><li>Faire une liste à puces </li></ul></ul><ul><ul><ul><li>Mettre un tiret (tiret 6 sur le clavier pc) + espace avant le premier mot de chaque point. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : Je peux mettre en forme mes paragraphes - soit en sautant des lignes - soit en revenant à la ligne -soit en créant une liste à puces. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li> Je peux mettre en forme mes paragraphes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Soit en sautant des lignes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Soit en revenant à la ligne </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Soit en créant une liste à puces </li></ul></ul></ul></ul><ul><ul><li>Créer des niveaux différents de puces </li></ul></ul><ul><ul><ul><li>Mettre un tiret (tiret 6 sur le clavier pc) + * + espace avant le premier mot de chaque point. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : - France -*Aquitaine -**Bordeaux </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li>France </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Aquitaine </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>- Bordeaux </li></ul></ul></ul></ul></ul><ul><ul><li>Les puces sont personnalisées en fonction de votre charte graphique </li></ul></ul>Mise en forme des paragraphes
  37. 37. <ul><ul><li>Faire une liste numérotée </li></ul></ul><ul><ul><ul><li>Mettre un tiret (tiret 6 sur le clavier pc) + « # » </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : </li></ul></ul></ul></ul><ul><ul><ul><ul><li>- #. Numéro un </li></ul></ul></ul></ul><ul><ul><ul><ul><li>- #. Numéro deux </li></ul></ul></ul></ul><ul><ul><ul><ul><li>- #. Numéro trois </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li>1. Numéro un </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2. Numéro deux </li></ul></ul></ul></ul><ul><ul><ul><ul><li>3. Numéro trois </li></ul></ul></ul></ul><ul><ul><ul><ul><li>La numérotation est automatique </li></ul></ul></ul></ul><ul><ul><li>Créer des niveaux différents de puces </li></ul></ul><ul><ul><ul><li>Mettre un tiret (tiret 6 sur le clavier pc) + * + espace avant le premier mot de chaque point. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : </li></ul></ul></ul></ul><ul><ul><ul><ul><li>- France </li></ul></ul></ul></ul><ul><ul><ul><ul><li>-*Aquitaine </li></ul></ul></ul></ul><ul><ul><ul><ul><li>-**Bordeaux </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li>France </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Aquitaine </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>- Bordeaux </li></ul></ul></ul></ul></ul><ul><ul><li>Les puces sont personnalisées en fonction de votre charte graphique </li></ul></ul>Mise en forme des paragraphes
  38. 38. <ul><ul><li>Créer des notes de bas de page </li></ul></ul><ul><ul><ul><li>Utiliser le bouton de la barre typographique après avoir surligner le texte à mettre en note. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : C’est au CNRS [[Centre National de Recherche Scientifique]] que le projet fut confié. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Devient </li></ul></ul></ul></ul><ul><ul><ul><ul><li>C’est au CNRS [ 1 ] que le projet fut confié. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Et en bas de page : [ 1 ] Centre National de Recherche Scientifique </li></ul></ul></ul></ul><ul><ul><li>Créer des tableaux </li></ul></ul><ul><ul><ul><li>Utiliser le bouton de la barre typographique et complétez les informations. </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>|| titre du tableau | titre du tableau || </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>| {{nom}} | {{fonction}} | </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>| Martin | communication | </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>| Dupont | transport | </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Les tableaux sont personnalisées en fonction de votre charte graphique </li></ul></ul></ul><ul><ul><ul><li>Manuellement  : Il suffit de faire des lignes dont les « cases » sont séparées par le symbole « | » (pipe, un trait vertical) : sur PC : Alt+6 et sur Mac : Alt+maj.+ la lettre « l » </li></ul></ul></ul><ul><ul><ul><li> Il est impératif de : </li></ul></ul></ul><ul><ul><ul><ul><ul><li>laisser au moins deux lignes vides avant et après ce tableau </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>laisser un espace avant et après chaque | </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>commencer le tableau par || titre | titre || </li></ul></ul></ul></ul></ul>Mise en forme des paragraphes transport Dupont communication Martin fonction nom Titre du tableau
  39. 39. Créer des liens Mode d’emploi
  40. 40. <ul><ul><li>Créer des liens hypertextes dans le texte d’une page </li></ul></ul><ul><ul><li>Créer un lien depuis l’article </li></ul></ul><ul><ul><ul><li>Mettre un lien direct vers un site se référant au contenu de l’article </li></ul></ul></ul><ul><ul><ul><li>Vous pouvez créer lien soit vers une page externe, soit vers un lien interne, une rubrique ou un article du site. Dans ce cas, il suffit de repérer le numéro de la rubrique ou de l’article et de mettre dans le champs à remplir : art10 ou rub3 par exemple. </li></ul></ul></ul>Insérer des liens 1. Surligner le texte devant servir de lien EX : Alternat.net 2. Cliquez sur le bouton « lien » 3. Inscrivez l’adresse complète 4. Cliquez sur OK [Alternat.net->http://www.alternat.net] Devient Alternat.net 1. Donner un titre (qui appara î tra en bas de l’article sous la forme d’un lien) 2. Inscrivez l’adresse complète (Url d’un site ou numéro d’article ou de rubrique de votre site : ex : art37, rub3,…)
  41. 41. <ul><ul><li>Créer un lien vers une adresse mail </li></ul></ul><ul><ul><ul><li>Ex : [Contactez-nous->mailto:contact@alternat.net] </li></ul></ul></ul><ul><ul><ul><li>devient Contactez-nous (lien menant directement vers la messagerie par défaut du visiteur). </li></ul></ul></ul><ul><ul><li>Créer des ancres à l’intérieur d’un texte </li></ul></ul><ul><ul><ul><li>Une ancre vers le haut de la page </li></ul></ul></ul><ul><li>[haut<-] Le début de ma page….. </li></ul><ul><li>… .. la fin de ma page </li></ul><ul><li>[vers le haut de page->#haut] </li></ul><ul><li>devient en bas de la page </li></ul><ul><li>vers le haut de page (lien cliquable « remontant » le visiteur vers le haut de la page) </li></ul><ul><ul><ul><li>Une ancre vers un paragraphe d’une m ême page </li></ul></ul></ul><ul><li>1. Placer une ancre au début du paragraphe concerné : Ex : [par1<-] Le projet consiste en l’élaboration concerté d’une….. </li></ul><ul><li>2. Créer le lien qui doit renvoyer vers cette partie de texte Ex: </li></ul><ul><li>[Nature du projet->part1] </li></ul><ul><li>Le lien devient Nature du projet et renvoie vers la partie du texte suivant l’ancre. </li></ul><ul><li>Il est bien s ûr possible de reproduire ce processus dans un texte autant de fois que nécessaire </li></ul>Insérer des liens
  42. 42. Mode d’emploi Intégrer des images et des documents
  43. 43. <ul><ul><li>Le format </li></ul></ul><ul><ul><ul><li>Les trois formats d’images acceptés par tous les navigateurs internet sont : </li></ul></ul></ul><ul><ul><ul><ul><li>GIF </li></ul></ul></ul></ul><ul><ul><ul><ul><li>JPEG ou JPG </li></ul></ul></ul></ul><ul><ul><ul><ul><li>PNG (certains navigateurs n’affichent pas encore ce format correctement) </li></ul></ul></ul></ul><ul><ul><li>La taille </li></ul></ul><ul><ul><ul><li>Pour certaines zones d’affichage, il est important de ne pas aller au delà d’une certaine taille EX : largeur maxi : 400 pixels. Cela dépend des choix de développement graphiques de votre site. </li></ul></ul></ul><ul><ul><li>La résolution </li></ul></ul><ul><ul><ul><li>Il est conseillé également de ne pas dépasser une résolution de 72 dpi , la technologie actuelle ne permettant pas d’afficher une résolution plus importante. Au delà l’image serait trop lourde (donc plus lente à afficher) pour un rendu à l’écran identique. </li></ul></ul></ul>Formats et caractéristiques des images
  44. 44. <ul><ul><li>Caractéristiques des logos d’article </li></ul></ul><ul><ul><ul><li>Format JPG ou PNG </li></ul></ul></ul><ul><ul><ul><li>Un seul logo par article </li></ul></ul></ul><ul><ul><li>Les logos d’article sont redimensionnés automatiquement et un filtre automatique est appliqué afin de leur donner une forme s’intégrant à la charte graphique développée. </li></ul></ul>Formats et caractéristiques des images
  45. 45. Insérer une image dans un article 1. Accédez à l’article dans le quel vous souhaitez insérez l’image 2. Cliquez sur « choisir le fichier » et sélectionner sur votre disque dur l’image à insérez. Cliquez sur « choisir » 3. Cliquez sur « télécharger » 4. Copier/coller un de ces codes à l’endroit souhaité de votre texte en fonction de la position désirée de l’image : à gauche, centrée ou à droite du texte. 5. Ajouter un titre et un descriptif si besoin et n’oubliez pas d’enregistrer. (les codes « img » se transformeront alors en codes « doc ») Si vous souhaitez supprimer l’image ou la remplacer par une autre, cliquez sur « supprimer cette image » et supprimer également le code du texte .
  46. 46. Insérer un logo d’article 1. Accédez à l’article dans le quel vous souhaitez insérez un logo 2. Cliquez sur le cadre relatif au logo de l’article et suivez exactement la m ême procédure que pour insérer une image. Le logo s'insère automatiquement à l’endroit prévu sur la page de votre site 3. Une fois le logo téléchargé, vous pouvez le supprimer en dépliant le cadre avec le petit triangle noir et en cliquant sur « supprimer » 4. Spip offre la possibilité d’intégrer une deuxième image pour créer un effet de « survol » au passage de la souris. Procédez de la m ême facon que pour le logo simple. Attention ! Si vous supprimer la première image de logo, le logo de survol sera également supprimé. Le logo est une image associée à l’article ou à la rubrique. C’est souvent un élément d’identification du contenu et peut servir d’image de lien pour la navigation. C’est pourquoi il n’est possible d’insérer qu’un seul logo par article ou par rubrique.
  47. 47. Insérer un document dans un article 1. Accédez à l’article dans le quel vous souhaitez insérez le document 2. Cliquez sur « choisir le fichier », sélectionnez le fichier sur votre disque dur, cliquez sur « choisir », puis sur « télécharger » . 3. Le document est présenté avec une vignette automatique correspondant à son type. Le document est inséré de façon à ce que le visiteur puisse cliquez sur sa vignette pour le télécharger. Vous pouvez aussi lui affecter une vignette personnalisée. 4. Faites un copier/coller du code dans la partie de l’article choisie. (idem insertion image) Vous pouvez joindre un document à un article , soit en pièce jointe , soit directement inséré dans le corps de l’article avec une vignette de prévisualisation . 5. Pour mettre votre document à télécharger hors du texte (en marge), modifiez le code du document : <docX|enmarge>. Ex : <doc7|enmarge>. Pour inclure une vignette personnalisée . Pour supprimer le document . 6. Remplissez les champs « titre » et « descriptif » si besoin avant d’enregistrer votre article
  48. 48. <ul><ul><li>La procédure d’insertion pour un document vidéo ou audio est la m ême que pour les autres types de documents . Vous avez le choix entre deux types d’insertion : </li></ul></ul><ul><ul><ul><li>Inclusion en tant qu’image (document à télécharger) </li></ul></ul></ul><ul><ul><ul><ul><li>Dans ce cas l’intégration se fait en tant que « doc » ex : <doc10|center> </li></ul></ul></ul></ul><ul><ul><ul><li>Inclusion directe (le document peut être lu directement sur la page ) </li></ul></ul></ul><ul><ul><ul><ul><li>Dans ce cas l’intégration se fait en tant que « emb » ex : <emb10|center> </li></ul></ul></ul></ul><ul><ul><li>Le choix d’un type d’intégration se fait en fonction de la nature du document à insérer. (voir tableau ci après) </li></ul></ul>Insérer un document vidéo ou audio
  49. 49. <ul><ul><li>Légende </li></ul></ul><ul><ul><ul><li>image : intégration en tant qu’image </li></ul></ul></ul><ul><ul><ul><li>embed : lecture directe via plugin </li></ul></ul></ul><ul><ul><ul><li>non : téléchargement uniquement </li></ul></ul></ul>Tableau des formats
  50. 50. <ul><ul><li>Légende </li></ul></ul><ul><ul><ul><li>image : intégration en tant qu’image </li></ul></ul></ul><ul><ul><ul><li>embed : lecture directe via plugin </li></ul></ul></ul><ul><ul><ul><li>non : téléchargement uniquement </li></ul></ul></ul>Tableau des formats (suite)
  51. 51. Utiliser l’agenda Mode d’emploi
  52. 52. <ul><ul><li>La partie « agenda » propose de mettre en ligne sous forme de calendrier tout événement (réunion, congrès, formation,…) associé à un article. </li></ul></ul><ul><ul><li>L’accès à l’agenda se fait dans chaque article entré dans l’administration du site </li></ul></ul><ul><ul><li>Déplier la partie « agenda » en cliquant sur la flèche. </li></ul></ul>Entrer un événement dans l’agenda
  53. 53. <ul><ul><li>1. Remplissez les champs </li></ul></ul><ul><ul><li>Titre </li></ul></ul><ul><ul><li>Lieu </li></ul></ul><ul><ul><li>1. Sélectionner les dates et les horaires si besoin </li></ul></ul><ul><ul><li>Descriptif </li></ul></ul><ul><ul><li>1. Sélectionner les mots-clés correspondants en dépliant les menus </li></ul></ul><ul><ul><li>Type d’événement </li></ul></ul><ul><ul><li>Autres mots clés associés </li></ul></ul><ul><ul><li>Cliquez sur « ajouter » </li></ul></ul>Entrer un événement dans l’agenda
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×