Réalisé par les MATICE du Calvados

Transcription

1 Réalisé par les MATICE du Calvados (octobre 2014)

2

3 Liste des tutoriels Pour débuter 01 Se connecter à l espace privé du site Ecrire un article Ajouter une image, un document Utiliser le portfolio pour créer un diaporama Insérer des documents multimédias (son, vidéo) Insérer un média externe Gérer les rubriques et les articles : administrer un site SPIP Pour aller plus loin 08 Gérer les auteurs Modifier son mot de passe La messagerie interne Insérer un cahier de texte Supprimer le bouton «Lire la suite» Insérer un projet Didapages Insérer une activité J-Clic Pour les experts 15 Personnaliser l interface du site Gérer les accès restreints Gérer les noisettes... 37

4

5 01 Se connecter à l espace privé du site - Se rendre sur la page du site SPIP d'école : - Se rendre sur le lien «se connecter» (en bas) et s'identifier : Login (utilisateur) (inscrire son login dans la case ci-dessous pour mémoire) Mot de passe (inscrire son login dans la case ci-dessous pour mémoire) Astuce : La fonction «mot de passe oublié» permet d'en créer un nouveau à partir de son adresse mail. - Accéder à l'espace de rédaction du site en cliquant sur «Espace privé» 3

6 4

7 02 Ecrire un article Interface d'administration privée pour rédiger : (Le lien «Aide» en haut propose une aide à la rédaction.) 2 rubriques importantes en haut : Pour naviguer dans le site en partie privée, poursuivre un article enregistré en brouillon. Pour écrire des articles, voir les documents, voir les articles publiés, voir les changements... Pour rédiger un article, 2 solutions : Solution 1 : Allez dans le menu «Edition» / Articles / Ecrire un nouvel article Solution 2 : Cliquez directement sur le raccourci dans le bandeau Comment mieux rédiger son texte? - Utiliser les boutons du menu - Sauter une ligne blanche pour un paragraphe - Utiliser des accolades pour la mise en page selon le code suivant : - Cliquer sur «?» pour plus d'aide en ligne et sur l'onglet «Voir» pour voir votre article. 5

8 Comment finaliser l article? - enregistrer l article en cliquant sur le bouton prévu à cet effet en bas de l article - modifier l article si besoin - IMPORTANT : Demander la publication de l article : soit en sélectionnant «proposé à l évaluation» puis en cliquant sur changer : soit en cliquant sur le bouton sous le descriptif de l article Il n'y a plus qu'à attendre qu'un administrateur du site valide l'article pour qu'il soit publié (un message lui est envoyé automatiquement) 6

9 03 Ajouter une image, un document 1) Lors de la rédaction d un article (voir tutoriel 01), il faut utiliser le formulaire de gauche. Cliquer sur «Parcourir» pour sélectionner l image puis «Téléverser» pour l importer sur lesite. 2) Vous pouvez ensuite la modifier pour lui donner un titre. 3) Attention! Pour insérer l'image à sa place dans l'article, il est nécessaire de copier/coller le code qui la représente : <imgxxx> ou <docxxx> 4) Procéder de la même manière pour d'autres images, des documents... 5) Enregistrer ou «Voir» votre article pour un aperçu du résultat. 6) Les éléments non inclus dans l'article seront placés en bas de page ou mieux dans le Portfolio, destiné aux images. 7

10 8

11 04 Utiliser le portfolio pour créer un diaporama Lors de la rédaction d un article, remplissez les différents champs (1, 2 et 3) avant d importer le fichier contenant les images (4) : Préparation des images : 1) Organisation des images : à effectuer avant l'étape 4 de l'illustration précédente. ouvrir le dossier qui contient les images sélectionner toutes les images (en utilisant par exemple l'association des touches Ctrl + A) 2) Utiliser le bouton droit de la souris (clic droit) pour accéder à un nouveau menu et choisir Dossier compressé. 3) Cette manipulation va créer un nouveau fichier au format zip, celui-ci contient toutes les images précédemment sélectionnées. 9

12 Création du diaporama : 1) Après avoir choisis le fichier zip, il faut valider l'action en cliquant sur le bouton téléverser. 2) Au bout de quelques instants (plus ou moins long selon le nombre d'images contenues dans le fichier), de nouvelles options vont apparaître. Celles-ci sont à sélectionner dans le même ordre que celui illustré par l'image ci-contre : 3) Il reste maintenant à enregistrer l'article en cliquant sur le bouton enregistrer. Lire le diaporama : Une fois l'article en ligne sur le site (après avoir été publié), le lancement du diaporama s'exécute en cliquant sur une image du portfolio. 10

13 05 Insérer des documents multimédias SPIP permet d'ajouter des documents multimédia comme du son ou de la vidéo. Attention, il est nécessaire de s'assurer de la légalité de cette opération. Vous ne pouvez pas intégrer n'importe quel contenu sans l'accord de leur auteur. Activer les plugins Le plugin «Lecteur multimédia» doit être activé pour ajouter la lecture automatique des sons MP3. A activer dans «Configuration» / «Gestion des Plugins» / Préparer ses médias Qu'il s'agisse de sons ou de vidéos, il est nécessaire de les transformer dans un format compatible avec leur diffusion sur Internet. Son : format MP3 Vidéo : format MP4 ou FLV Si leur format n'est pas conforme, il faut les convertir à l'aide d'un logiciel comme «Format Factory» ou «Media Coder». Assurez-vous aussi que la taille des fichiers ne soit pas trop importante. Taille maximale autorisée : 100 Mo. Pour les vidéos, il est possible de changer la résolution de la vidéo pour diminuer sa taille. Préparer son article Créer un nouvel article dans la rubrique appropriée avec son titre et son contenu (texte, images...), puis l'enregistrer. 11

14 Ajouter le média Modifier votre article et ajouter le nouveau média comme un document classique Il apparaît comme un document standard, lié à l'article. Exemple pour les sons : Pour l'ajouter à l'article, il existe deux méthodes : l'ajouter comme un document téléchargeable (peu convivial) : uhliser le code «doc». Ex : <doc19> l'ajouter comme un media lisible sur Internet (<emb19>) (Mieux pour les sons ou vidéos). Dans ce cas, le média est présenté avec un lecteur automatiquement. UHliser le code «emb» (pour embed=intégré/embarqué). Ex : <emb19> Exemple pour les vidéos : Puis enregistrer votre article. 12

15 06 Insérer un média externe SPIP permet d'ajouter des éléments externes à votre site : vidéo en ligne sur site de partage, musique, cartes, sans voir besoin de les stocker sur votre propre site. Attention, il est nécessaire de s'assurer de la légalité de cette opération. Trouver du contenu intégrable Certains sites internet de diffusion en ligne (Youtube, Dailymotion, Deezer...) proposent des médias intégrables par le biais de lien spéciaux (iframe). Pensez à vérifier que ces médias sont légaux et que leurs auteurs sont consentants (licence CC-BY libre de partage ou accord officiel). Vous engageriez votre propre responsabilité en intégrant un contenu illicite sur votre site. N'oubliez pas que des médias particuliers peuvent aussi être intégrés : cartes, parcours, Voir par exemple : Géoportail, Openrunner... Préparer son article Créer un nouvel article avec son titre et son contenu, l'enregistrer et le garder dans un onglet ouvert de votre navigateur. Récupérer le code à intégrer Sur ces sites Internet, il existe une icône représentant un «partage». Cliquer sur cette icône puis chercher un code HTML à copier avec Ctrl+C. Code à copier Il est éventuellement possible de personnaliser ce code (changer la largeur de 700 en 500 par exemple). 13

16 Coller le code Il ne reste plus qu'à modifier l'article créé pour y insérer le code HTML copié précédemment, et à enregistrer votre article. Résultat Une fois publié votre article contiendra le media embarqué. 14

17 07 Gérer les rubriques et les articles : (ou «administrer un site SPIP») Préalable : Installation du Plug-in «Corbeille» -Dans l Espace privé choisir l onglet «Configuration» puis «Gestion des plugins» -Cocher «TOUS» pour avoir la liste des plugins disponibles - Cocher l activation du plugin «Corbeille» -Puis «Valider» L activation de ce plugin va vous permettre de gérer vous-même votre corbeille. Sans ce plugin les objets effacés restent visibles pendant plusieurs jours et peuvent perturber. La gestion de la corbeille se fait par l onglet «Maintenance» Gestion des rubriques et articles Accès au module de création : 15

18 Créer des rubriques : Attention Une rubrique n est visible sur le site que si elle contient au moins un article. Mettre en ligne des articles : 2 façons d appeler l article ou la rubrique à modifier, supprimer ou déplacer Cliquer sur le nom de l article à publier puis modifier le statut (à gauche de l écran) A savoir : Un article «refusé» est «gelé», Celui placé «à la poubelle» disparaîtra après 24h. 16

19 08 Gérer les auteurs Les statuts : Il existe plusieurs statuts d auteurs : Administrateur : il a le droit d écrire, de publier et de gérer Rédacteur : il peut écrire, soumettre à validation, mais ne peut pas publier Visiteur : il peut accéder à certaines rubriques Créer un nouvel auteur : Pour créer un nouvel auteur : mode édition/auteurs puis créer un nouvel auteur Remplir le formulaire : (obligatoire) (facultatif) Indiquer le pseudo choisi L adresse mail permettra de le contacter directement (facultatif) (facultatif) (obligatoire) Indiquer le statut choisi (administrateur, rédacteur ou visiteur) (facultatif) (obligatoire) Définir les identifiants de connexion et le mot de passe (le rédacteur aura la possibilité de modifier son mot de passe, cf.tutoriel 04) Pour supprimer un auteur : 17

20 Pour supprimer un auteur : mode édition/auteurs puis cliquez sur le nom de l auteur concerné Cliquez sur «modifier cet auteur» : Dans le formulaire, modifier le statut de l auteur et sélectionner «à la poubelle» 18

21 09 Modifier son mot de passe - Se rendre sur l espace privé de son site SPIP d'école (voir tutoriel 01) - Cliquez sur votre statut en haut à gauche (exemple : Administrateur) - Cliquez sur «Modifier cet auteur» : - Changez vos paramètres de connexion en fin de formulaire : Astuce : Un «bon» mot de passe doit avoir au minimum 8 caractères non signifiants, composés de lettres majuscules, minuscules, de chiffres et si possible de caractères spéciaux. 19

22 20

23 10 La messagerie interne Pré-requis : Avoir créé plusieurs rédacteurs (comptes élèves) (voir tutoriel 06 «gérer les auteurs») Ecrire un message : Lorsque qu'un auteur (élève) se connecte en utilisant ses identifiants, il accède à un espace privé «réduit». Pour écrire un message via la messagerie interne, il faut cliquer sur l'icône représentant un boîte aux lettres. Sur la nouvelle page qui s'affiche, choisir Envoyer un nouveau message. Ensuite l'auteur (élève) est invité à composer son message (sujet + texte) et à décider d'un destinataire. Celui-ci est à choisir parmi les autres auteurs (élèves) disposant d'un compte sur le site. 21

24 Lire un message : Lorsqu'un auteur (élève) se connecte, il peut voir immédiatement s'il a reçu un message. L'indication est signalée sur la barre de menu. Exemple de message reçu : Pour connaître le pseudo de l'ensemble des auteurs (élèves de la classe) afin d'adresser son message : Edition > Auteurs puis choisir l'onglet rédacteur. 22

25 11 Insérer un cahier de texte Créer une rubrique "cahier de texte" : Cliquer sur "Edition" pour obtenir une nouvelle fenêtre de création de rubrique Définir l'endroit souhaité (l'endroit peut être caché...) Ajouter (ou modifier) une noisette 1) dans l'espace public cliquer sur "Edition des noisettes" 2) Dans" contenu" pour un affichage juste sur la page d'accueil Dans "Post-Contenu" pour un affichage sur toutes les pages 3) Choisir liste d articles 23

26 Configurer la noisette On obtient un menu de configuration Choisir "affichage dans une ou plusieurs branches spécifiques" Cliquer sur ajouter pour ajouter la Rubrique "cahier de texte" Création des articles «jours» Configurer la suite suivant les besoins puis enregistrer. Créer un article «Lundi» A publier dans la rubrique «cahier de texte» Publier l article Eventuellement, remplir le corps de l article, puis valider Modifications hebdomadaires : Le cahier de texte apparait en bas de page Cliquer sur le crayon : Pour changer le texte Pour changer le titre, la date 24

27 12 Supprimer le bouton «Lire la suite» Vous souhaitez que la page que vous écrivez s affiche pleine page, et non un extrait suivi du bouton «Lire la suite». Dans le menu Squelettes, choisissez «Gérer les noisettes» Pour la page d accueil : Choisissez «Page d accueil du site» (presque en bas) Puis «Article éditorial» dans la partie Contenu Cliquez sur «Modifier cette noisette». Pour les autres pages : Choisissez «Rubrique» (juste en-dessous de page d accueil) 25

28 Puis «Liste d articles» dans la partie Contenu Cliquez sur «Modifier cette noisette» au bout de la ligne Liste d articles Dans «Longueur maximum de l introduction», choisissez «Texte complet» En-dessous, à la ligne Afficher «lire la suite», cliquez sur «Non» Enfin, cliquez sur «Enregistrer en bas de page pour valider votre choix. 26

29 13 Insérer un projet Didapages Préalable - Avoir son projet Didapages prêt au format «zip» - Vérifier l activation du Plug-in «Didaspip»: Dans l espace privé choisir l onglet «Configuration» puis «Gestion des plugins». Cocher «TOUS» pour avoir la liste des plugins disponibles. Plugin déjà activé Sinon cocher la case d activation du plugin puis «Valider» Import du projet Didapages dans le site : Dans l onglet «Edition», sélectionner «Projets Didapages» Choisir «Parcourir» Donner un nom au Didapage (sans espace, ni tirets, ni accents, ni caractères spéciaux). Importer Un message de confirmation apparaît et le projet est référencé dans la liste des projets en ligne. Copier le code à insérer en ligne (sélectionner le code puis Ctrl + C) Insérer le projet dans un article Lors de la rédaction d un article, coller le code du projet (Ctrl+V) dans le corps du message. N oubliez pas de publier l article. Donner un titre à l article Sélectionner la rubrique dans laquelle il va apparaître. Copier le code du projet (Ctrl+V) Enregistrer 27

30 28

31 14 Insérer une activité J-Clic Préalable - Avoir son activité J-Clic prête au format «zip» - Vérifier l activation du Plug-in «Jclic Modèle»: Dans l espace privé choisir l onglet «Configuration» puis «Gestion des plugins». Cocher «TOUS» pour avoir la liste des plugins disponibles. Plugin déjà activé Sinon cocher la case d activation du plugin puis «Valider» Import de l activité J-Clic dans le site : Lors de la rédaction d un article : Ajouter l activité Jclic en tant que document non-décompressé. Cliquer sur Parcourir, sélectionner le fichier xxxx.jclic.zip, Ouvrir Puis Téléverser. A la question ce fichier peut être : garder coché Installé tel quel Puis Valider Noter bien le numéro du document correspondant (ici doc=184) Il vous suffit d indiquer le code suivant à l endroit où vous souhaitez afficher l activité Jclic : <jclic doc=184> 29

32 30

33 15 Personnaliser l interface d un site La gestion du site se déroule à partir de «l espace privé» Pour cela il est nécessaire de s authentifier avec son identifiant et son mot de passe. (voir tutoriel 01) (Seul le compte administrateur possède l ensemble des droits d intervention à ce niveau.) Le bandeau change alors et devient : L éditeur de noisettes : Noisettes : zone prédéfinie du squelette d une page, d un article, Une noisette est une zone indépendante et autonome qui peut être modifiée ou supprimée sans conséquence sur le reste du site. Exemple de noisettes : Calendrier, zone de texte libre, liste d articles. L espace privé : Les onglets «configuration/identité du site» et «squelettes et thèmes» vous permettront de modifier l aspect visuel du site. Onglet : Configuration / identité du site 31

34 Onglet : Squelettes et thèmes Squelette : structure du site Thèmes : habillage du squelette Le thème de base est «MUTU» mais il existe plusieurs autres thèmes. Vous pouvez les tester en cliquant sur «Apercevoir» qui est inscrit sous chaque thème ou directement sur «choisir». Il vous est toujours possible de revenir sur le thème de départ. Mutu a l avantage d être paramétrable plus facilement en choisissant «Configurer ce thème» dans son cartouche Astuce : Autre méthode plus rapide pour tester les différents thèmes : Les possibilités de paramétrages sont inhérentes à chaque thème Pour MUTU : Dans le doute, mieux vaut s abtenir! 32

35 Pour visualiser le résultat : Paramétrage du bandeau et changement de l image de fond : L image de fond du thème Mutu est en 960 x 200, il faut bien garder en tête ce ratio afin d éviter toute déformation. OU Personnaliser le titre de la page d accueil : 33

36 34

37 16 Gérer les accès restreints SPIP permet de publier du contenu réservé à certains utilisateurs et non visibles par les autres. Par exemple : rubrique réservée aux parents, aux enfants, à la collectivité Activer le plugin «Accès restreint» Se rendre dans «Configuration» / «Gestion des Plugins» et afficher «Tous». Activer ce plugin à l'aide du bouton correspondant. Créer des auteurs pour cet accès Cet accès n'est possible que si des utilisateurs se sont authentifiés dans le site. Il faut donc créer des comptes pour chaque type d'accès. Astuce : il est possible d'utiliser un seul et même compte pour plusieurs personnes. Par exemple, le compte «enfants» ou «parents» pour tous les parents. Se rendre dans «Edition» / «Auteurs» et créer des comptes. Il est souhaitable de créer des comptes de type Visiteur, si vous ne souhaitez pas que ces utilisateurs aient accès à l'espace privé. Vous pouvez créer plusieurs comptes, pour créer des accès différents selon différents rubriques par exemple. Créer des accès restreints Il faut ensuite définir ces espaces restreints dans «Publication» / «Accès restreint». Puis «Créer une nouvelle zone» et lui donner un nom (ex : zone-parents), cocher la partie visible (publique pour le côté web ou visiteurs) et définir quelles sont les rubriques associées à cette zone. Enregistrer et «modifier cette zone», puis «Ajouter un auteur» pour choisir les auteurs qui seront autorisés à voir cette zone dans l'espace public. 35

38 Puis choisir dans la liste des auteurs ceux qui seront autorisés à voire cette ou ces rubriques. Il n'est pas nécessaire d'y inclure les administrateurs du site qui sont autorisés à tout voir. Mais vous pouvez ajouter d'autres rédacteurs, par exemple. Vider le cache Lors de l'installation ou modification des zones d'accès, il est nécessaire de demander au site de prendre en compte aussitôt ces changements. Se rendre dans «Maintenance» / «Vider le cache» et appuyer sur le bouton correspondant. Communiquer les codes d accès Il sera ensuite nécessaire de communiquer aux personnes concernées les identifiants et mots de passe pour utiliser le compte visiteur créé, réservé à cet accès. Les utilisateurs devront s'identifier («Se connecter» en bas du site) pour pouvoir voir les articles de la zone restreinte. Les autres visiteurs anonymes ne pourront pas voir la zone restreinte du site. Exemples en images : Menu du site pour un visiteur anonyme Menu du site pour un visiteur authentifié 36

39 17 Gérer les noisettes SPIP permet de paramétrer de manière très fine ce qui est affiché sur chaque type de page (rubriques, page d'accueil, articles ). Ces options sont destinées à des personnes voulant exploiter des fonctions avancées, mais pas sans risques pour l'affichage du site. Astuce : Lisez la totalité de ce tutoriel avant de vous lancer! Qu'est-ce qu'une noisette? Une noisette est un bloc dans une page par exemple : une liste d'articles un calendrier un menu un diaporama un forum Où sont utilisées les noisettes? Chaque page du site Internet appartient à un type particulier : La page «article» pour afficher tous les articles la page «rubriques» pour afficher le contenu d'une rubrique la «page d'accueil», celle par défaut lorsqu'on saisit l'adresse du site la «page par défaut», définit la structure commune à toutes ces pages. etc. Se rendre dans «Squelettes» / «Gérer les noisettes» pour voir la liste des pages disponibles. Pour chaque type de page, on peut définir une ou plusieurs noisettes qui viendront créer du contenu, visible par les visiteurs. Exemple : lorsqu'on arrive sur la page d'accueil du site, que voulezvous faire afficher? la liste des 5 ou 10 derniers articles publiés, du plus récent au plus ancien un unique article que vous pourrez modifier selon vos besoins un calendrier avec les articles classés par date tous ces éléments positionnés dans un ordre particulier Les noisettes peuvent vous aider à faire tout cela. 37

40 Des emplacements particuliers dans une page Chaque type de page est divisée en 3 parties aux noms spécifiques mais évolutif sur leur rôle : Contenu (ou Content) : en général, le principal de ce qu'on cherche Navigation (ou Extra 1): utilisé pour accéder à d'autres contenus Extra (ou Extra 2) : une partie supplémentaire pour d'autres liens ou outils. NB : la disposition de ces trois parties se trouvent dans l'espace «Squelettes» / «Configurer le thème» Choisir un modèle de présentation header, nav et footer sont réservés à d'autres fonctions déjà utilisées (bandeau, menus...) Personnaliser les noisettes Pour personnaliser les noisettes, il suffit de s'identifier, et de se rendre sur une page de la partie publique et de cliquer sur «Editer les noisettes». La page sera alors détaillée sur les noisettes présentes dans cette page. «Pré-» et «Post-» emplacement Pour la page par défaut du site (celle utilisée par tous les types de page), chaque emplacement (contenu, Navigation, Extra) se décompose en 3 parties : Pré-emplacement : tout ce qui vient avant les emplacements, Emplacement : les noisettes Post-emplacement : ce qui vient à la fin des emplacements. Ainsi, si vous placez une noisette en Pre- Navigation, elle sera visible au-dessus de toutes les pages dans l'emplacement «Navigation» 38

41 Une nouvelle noisette? Lorsque vous ajoutez une nouvelle noisette, vous devez choisir quel bloc vous souhaitez ajouter : liste d'articles, calendrier, diaporama Les options sont nombreuses et il faut vouloir y consacrer un temps assez important pour tout maîtriser. Une fois choisie, il faudra alors personnaliser la noisette. Pour une liste d'articles, par exemple, vous devrez choisir s'il faut ou non afficher le nombre d'articles, leur ordre, selon quels critères, le logo, la date, la rubrique, les mots-clefs, le nombre de visites... Les possibilités sont très importantes et il est nécessaire d'y consacrer beaucoup de temps pour bien comprendre les conséquences et le vocabulaire employé. Derniers conseils 1) Avant de procéder aux modifications, n'oubliez pas de sauvegarder la configuration actuelle. «Squelettes» / «Gestion des noisettes» / «Exporter la configuration.». Vous pourrez notamment sauvegarder (ie Télécharger) le contenu de votre site, mais surtout la configuration du noizetier. Et le réimporter en cas de besoins. 2) De manière plus conviviale, vous pouvez personnaliser les noisettes par type de page dans l'espace privé, et accéder à la documentation précise pour chaque noisette ou option. 3) La configuration proposée par défaut aux écoles répond à la majeure partie des besoins et la personnalisation des noisettes n'est pas indispensable au bon fonctionnement du site Internet. 39

42 Pour toute demande d information complémentaire, n hésitez pas à contacter le MATICE de votre circonscription. MATICEs du Calvados - Octobre 2014