Dossier distribué pour aider les rédacteurs d'un site de collège sous spip.

1. 1
Formation du 3 octobre 2011
Utiliser
le site du collège
en tant que rédacteur
URL : http://www.clg-tillion-lardy.ac-versailles.fr/
Christine Fiasson - Collège Germaine Tillion - Lardy

2. 2
SOMMAIRE
Page 3 Etape 1 – Comment s’identifier en tant que rédacteur ?
Page 4 Etape 2 – Comment utiliser la partie privée du site du collège ?
Etape 3 – Rédiger un article simple
Page 5 1 – Créer l’article
Page 6 2 – Mettre l’article dans la bonne catégorie
Page 7 3 – Enregistrer l’article
Page 8 4 – Télécharger un logo attaché à l’article
Page 8 5 – Définir les mots-clés de l’article
Page 9 6 – Demander la publication de l’article
Etape 4 – Rajouter des documents (lien, image, son, vidéo, exercice interactif)
à un article
Page 10 1 – Rajouter un lien ou un hyperlien
Page 11 2 – Rajouter une image ou un fichier son
Page 12 3 – Rajouter un exercice interactif ou un diaporama
Page 13 4 – Rajouter un document grâce à du code html (vidéo, son,
diaporama, quiz)
Page 14 Etape 5 – Faire une redirection vers une ressource ou un site
Page 14 Informations complémentaires
Christine Fiasson - Collège Germaine Tillion - Lardy

3. 3
Etape 1 – Comment s’identifier en tant que rédacteur ?
Sur la page d’accueil dans le bandeau en haut à droite, vous pouvez vous identifier en cliquant sur
« Rédaction » ou « Se connecter ».
Cliquez sur
Puis, il faut écrire vos identifiants - votre Login/mot de passe (le même que scolarité.net pour les
professeurs) – et cliquer sur « Valider ».
Login : en MAJUSCULES
Mot de passe : chiffres
Vous avez ainsi accès à la partie privée du site et vous allez pouvoir publier des articles en tant que
Rédacteur.
Cependant vos articles n’apparaîtront en ligne que si un Administrateur les valide.
Christine Fiasson - Collège Germaine Tillion - Lardy

4. 4
Etape 2 – Comment utiliser la partie privée du site du collège ?
Vers la page
Vers la page des auteurs :
Vers la page des forums vous pouvez y Raccourci vers
Raccourci vers des catégories mais ils ne modifier vos la page
la page dans lesquelles sont pas infos d’accueil du
d’accueil du il faut classer activés sur personnelles site public
site privé les articles notre site
Se
déconnecter
Raccourcis :
message,
recherche,
etc.
Les 3
derniers
articles
parus
Des
raccourcis
vers les
actions les
plus
courantes
Les
Présentation articles
générale du en attente
site de
validation
Les
catégories
auxquelles
vous avez
accès
Les
articles
modifiés
Les articles que vous
êtes en train de créer et
qui ne sont pas encore Ceci est la page d’accueil du site privé
mis en ligne sur le site
public
Christine Fiasson - Collège Germaine Tillion - Lardy

5. 5
Etape 3 – Rédiger un article simple
1 – Créer l’article
Cliquez sur « Ecrire un nouvel article » et vous arrivez sur cet écran.
Il est obligatoire et doit être suffisamment
Titre clair pour que les visiteurs sachent de
quoi va parler l’article.
Il est un résumé de quelques mots
Descriptif présentant le sujet de l’article.
rapide Il apparaît sur la page d’accueil du site
public.
Il peut être identique au « descriptif
rapide » car ils n’apparaissent jamais
Chapeau
simultanément. Le chapeau constitue le
début de l’article qui apparaît plus gros.
Il s’agit du corps de votre article. Vous
pouvez le mettre en forme grâce à des
Texte
outils, y rajouter des images ou d’autres
documents.
Voici les outils que vous pouvez utiliser pour faire la mise en forme.
Ajouter des caractères
spéciaux
Transformer
en titre
Mettre en Ajouter des guillemets
gras
Mettre en
italique Mettre en Faire une citation
petites Faire une
majuscules liste avec
des puces Faire un tableau
Faire une note de bas de page
Faire un lien (hyperlien) sur un mot ou une image
Faire une mise en forme spéciale (code html)
Exemple : un cadre
Christine Fiasson - Collège Germaine Tillion - Lardy

6. 6
2 – Mettre l’article dans la bonne catégorie
Votre article à un sujet et il faut le placer dans la catégorie correspondante pour que les visiteurs du
site puisse le retrouver facilement.
Pour cela cliquez la loupe à côté de « À l’intérieur de la rubrique » et choisissez ensuite grâce
au système de menus déroulant la bonne catégorie. Pour la validez, cliquez enfin sur « Choisir » (sinon votre
choix ne sera pas pris en compte).
1
2
2
3
Il est important de penser à faire cette manipulation car par défaut la catégorie choisie est celle du
dernier article rédigé sur le site. Votre article en anglais pourrait donc se retrouver dans la catégorie
« Mathématiques » si vous n’y prenez garde.
En tant que rédacteur vous n’avez pas accès à toutes les catégories, mais seulement celles qui vous
concernent directement.
De façon générale, les professeurs peuvent écrire dans toutes les catégories de « Activités élèves », la
Conseillère Principale d’Education dans « Vie scolaire », le professeur-documentaliste dans « CDI » etc.
Christine Fiasson - Collège Germaine Tillion - Lardy

7. 7
3 – Enregistrer l’article
Une fois que vous avez écrit votre article et qu’il est placé dans la bonne catégorie, il est nécessaire de
l’enregistrer avant d’y apporter des modifications supplémentaires.
En bas à droite, cliquez sur « Enregistrer ».
Vous accédez alors à une page proche de celle présentée ci-dessous, ce qui vous signifie que
l’enregistrement s’est bien passé.
Sur cette page vous allez maintenant pouvoir mettre un logo à votre article et choisir les mots-clés.
4 - Mettre
un logo à
votre 5 - Ajouter
article des mots-
clés à votre
article
Voir étape
5
Christine Fiasson - Collège Germaine Tillion - Lardy

8. 8
4 – Télécharger un logo attaché à l’article
En faisant passer votre souris sur « Logo de l’article » vous avez la possibilité de mettre une image qui
va représenter votre article.
Quel est l’intérêt ? Par défaut les logos sont ceux de la catégorie de l’article mais ils n’apparaissent pas
sur la page d’accueil. Il est beaucoup plus attractif pour un visiteur de cibler d’un seul coup d’œil le sujet de
l’article grâce à son logo.
Par exemple, l’Union Jack pour un article en anglais, un schéma de l’ADN pour un article sur le même
sujet en SVT.
Pour ajouter un logo, il faut qu’il soit déjà enregistré sur votre disque dur ou
sur un espace de stockage type clé USB.
En cliquant sur « Parcourir » vous ouvrez une fenêtre qui vous permet
d’aller chercher l’emplacement de l’image choisie dans votre ordinateur
personnel/clé USB/disque dur externe.
Une fois cela effectué, cliquez sur « Télécharger ». Cela peut prendre un peu
de temps car votre image est alors téléchargée sur le serveur qui héberge le
site du collège.
Si l’image apparaît sous « Logo de l’article », alors vous avez réussi.
5 – Définir les mots-clés de l’article
Vous devez aussi ajouter des mots-clés à votre article.
Ces mots-clés à utiliser ont deux objectifs :
- Ils permettent de cibler le sujet de l’article pour lui donner un accès rapide sur la page d’accueil du site
public ; il suffit en effet de cliquer sur le mot-clé correspondant pour trouver tous les articles qui
correspondent. Ce sont les mots-clés du menu déroulant « Sujet de l’article »
- Ils agissent également sur le placement de l’article dans la page d’accueil. Ce sont les mots-clés
« affichage ».
Pour les choisir, il suffit d’ouvrir le menu déroulant correspondant et de cliquer sur votre choix avant de
le valider en cliquant sur « Choisir ».
Les mots-clés « Sujet de l’article » sont proches des catégories du site.
Voici par contre un rapide descriptif des 3 mots-clés à utiliser dans « affichage ». [Ce sont les plus
courants]
« nouveautés »  le mot-clé le plus important car il permet à votre article d’être présent dans
le ‘bloc nouveautés’ de la page d’accueil du site public. Ainsi, il est visible et reçoit plus de
visiteurs. Les articles y restent entre deux et quatre semaines en fonction de leur sujet.
« éditorial »  ce mot-clé place votre article au centre de la page d’accueil et il est donc
visible par tous les visiteurs.
« mini-calendrier » ce mot-clé permet d’associer votre article à une date. Pour cela vous
devez aussi choisir la date correspondante en mettant « une date de rédaction antérieure ».
C’est à cette date que se placera votre évènement sur le mini-calendrier de la page d’accueil.
Christine Fiasson - Collège Germaine Tillion - Lardy

9. 9
6 – Demander la publication de l’article
Une fois votre article fini, vous pouvez changer son statut.
En effet en dessous du numéro de votre article, il est identifié comme « en cours de rédaction ». Seul
l’auteur de cet article peut le voir. Lorsque vous en êtes satisfait, il faut demander à un Administrateur de le
valider pour qu’il apparaisse sur le site public.
Pour cela, il faut cliquer sur « proposé à l’évaluation ». Une fenêtre vous présente un message vous
demandant de confirmer votre choix.
À partir du moment où vous avez demandé l’évaluation vous pouvez « Prévisualiser » votre article et
ainsi voir comment il apparaîtra une fois en ligne. Il vous est donc possible de modifier vos erreurs.
Attention : une fois votre article mis en ligne, il n’est plus possible pour vous de le modifier. Il faut
demander à l’Administrateur de le dépublier ou de faire la modification lui-même.
En attendant que un
Administrateur valide votre article, il
apparaît sur la page d’accueil du site
privé (pour la voir cliquer sur « À
suivre ») dans le bloc « Articles
proposés ».
Tout le monde (Rédacteurs/
Administrateurs) peut alors le voir.
Christine Fiasson - Collège Germaine Tillion - Lardy

10. 10
Etape 4 – Rajouter des documents (lien, image, son, vidéo, exercice interactif) à un article
1 – Rajouter un lien ou un hyperlien
Il y a deux façons d’insérer un lien dans un article :
 La façon la plus facile est de compléter la case qui correspond lorsque l’on rédige son article.
Pour faire un lien vers un site
intéressant, il vous faut lui
mettre un « Titre » et copier
l’adresse de ce site dans la
case URL.
L’adresse d’un site commence
par http://....... et se situe
toujours en haut du navigateur
(logiciel) que vous utilisez
pour aller sur Internet.
Le plus simple est de
copier/coller l’adresse URL
pour éviter les erreurs de
recopiage.
Pour finir, enregistrer les
modifications en cliquant sur
« Enregistrer ».
 La seconde façon est de faire des hyperliens dans le corps de votre article
Qu’est-ce qu’un hyperlien ? Un hyperlien est le fait de transformer un mot ou une image en lien. C'est-à-
dire que si on clique sur ce mot/cette image on se rend sur un autre site.
Pour faire cela, il faut sélectionner le mot ou l’image et cliquer ensuite sur l’outil suivant :
Une fenêtre apparaît et vous demande de donner l’adresse URL du site que vous voulez mettre en lien.
Vous devez copier/coller l’URL dans la case et cliquer sur OK.
Maintenant, le mot que vous avez choisi (ou l’image) apparaissent ainsi :
[Texte ->http://adresseurldusitechoisi/]
Si vous enregistrez vous pourrez tester si le lien fonctionne en cliquant sur le mot ou l’image.
Christine Fiasson - Collège Germaine Tillion - Lardy

11. 11
2 – Rajouter une image ou un fichier son
Il est important de comprendre comment fonctionne l’insertion de documents dans un site qui
fonctionne avec le système Spip.
 Vous possédez des documents dans votre disque dur ou sur votre clé USB, vous en trouvez d’autres
sur Internet (attention à la question des droits). Pour les afficher dans un article, il faut les mettre sur
le serveur du site sinon ils ne s’afficheront jamais.
Pour faire cela il faut utiliser le bloc « Ajouter une image ou un document » pour télécharger ce que
vous voulez rajouter dans votre article.
Pour ajouter un document, il faut qu’il soit déjà enregistré sur votre disque dur
ou sur un espace de stockage type clé USB.
En cliquant sur « Parcourir » vous ouvrez une fenêtre qui vous permet
d’aller chercher l’emplacement de l’image choisie dans votre ordinateur
personnel/clé USB/disque dur externe.
Une fois cela effectué, cliquez sur « Télécharger ». Cela peut prendre un peu
de temps selon la taille de votre document.
L’image du document apparaît alors en petit sous « Ajouter une image ou un
document ».
Vous pouvez rajouter ainsi plusieurs documents pour un même article.
Pour insérer votre document dans l’article une fois que vous
l’avez téléchargé, il faut copier le code qui apparaît sous la
miniature de votre document.
Selon l’emplacement que vous souhaitez lui attribuer, choisissez le
code à copier/coller :
<…..|left> pour alignement à gauche
<…..|center> pour centrer le document
<…..|right> pour alignement à droite
Il est fortement conseillé de centrer les documents car l’apparence
de l’article est alors plus harmonieuse.
Vous pouvez changer le titre de votre document.
Si vous n’insérez pas les documents dans votre article ils
apparaîtront en bas de celui-ci une fois publié avec des icônes qui
représentent le format du document.
Documents Pdf Documents modifiables Fichiers audio Pour les images
C’est le format Word ou OpenOffice  si les Le format conseillé est Privilégiez le format jpeg
conseillé pour tous les élèves doivent modifier le mp3. ou gif.
documents qui ne document il faut faire attention Evitez le wma. Attention aussi à la taille
doivent pas être à la version choisie. Si les fichiers sont de des images  il ne faut
modifiés car la plupart Les docx par exemple ne sont taille importante, il pas dépasser 450 pixels
des ordinateurs les ouverts par tous les logiciels de faut mieux passer par de large et éviter de
ouvrent sans souci. traitement de texte. le blog de podcasts du charger des images trop
collège. lourdes.
Christine Fiasson - Collège Germaine Tillion - Lardy

12. 12
3 – Rajouter un exercice interactif ou un diaporama
 Si vous savez faire des exercices interactifs avec le logiciel Hotpotatoes vous souhaitez peut-
être pouvoir les mettre en ligne.
Pour cela, une fois voir exercice créé, générez la page html de cet exercice grâce à Hotpotatoes et
téléchargez cette page comme un document classique dans votre exercice.
Petite précision …
Le fait de télécharger un
document sur le site du
Voici un exercice
collège signifie que ce
Hotpotatoes une fois téléchar-
document possède une
gé comme un document
adresse url à partir du site.
classique sur un article.
Il est possible de connaître
cette adresse et donc de
Vous pouvez donc l’insérer
faire un lien (hyperlien)
comme une image dans votre
vers votre exercice
article.
Hotpotatoes.
Vous pouvez changer le titre
Pour trouver l’adresse url
et mettre un petit descriptif.
de votre exercice, voici la
marche à suivre, elle est
Pour rendre cette insertion
très rapide :
plus agréable, il est possible
de mettre un logo à votre
Cliquez avec le bouton
exercice pour remplacer le
droit de votre souris sur le
classique « page html ». Pour
symbole représentant votre
cela il suffit de télécharger
document pour ouvrir un
une « vignette person-
menu déroulant. Vous
nalisée »
sélectionnez dans ce menu
« copier l’adresse du
lien » et coller ensuite
cette adresse où vous en
avez besoin.
 Pour mettre un diaporama en ligne sur le site du collège, il y a plusieurs façons possibles.
La plus simple est de télécharger le fichier Microsoft PowerPoint ou OpenOffice Impress comme un
document. Ensuite les visiteurs doivent pour pouvoir le voir le télécharger sur leur ordinateur puis l’ouvrir. Le
document est alors modifiable par la personne qui l’a téléchargé.
Pour que le diaporama soit visible en ligne, on peut le modifier en fichier flash. Pour cela il faut utiliser
PowerPoint et avoir téléchargé et installé iSpring Free qui permet de convertir gratuitement des diaporamas en
fichier Flash (http://www.ispringsolutions.com/free_powerpoint_to_flash_converter.html)
Une fois votre diaporama.ppt transformé en diaporama.swf vous pouvez le télécharger comme un document
classique et l’insérer dans votre article.
Enfin, il est possible de télécharger votre diaporama sur un site comme SlideShare qui génère pour
vous un code html à insérer dans votre article pour que votre diaporama apparaisse directement dans le corps
du texte.
Cette méthode est expliquée dans la suite du tutoriel.
Christine Fiasson - Collège Germaine Tillion - Lardy

13. 13
4 – Rajouter un document grâce à du code html (vidéo, son, diaporama, quiz)
Qu’est ce que le code html ? Il s’agit d’un code invisible lorsque l’on va sur internet mais il est omniprésent
car il encode les pages pour leur donner leur apparence.
Il n’est pas nécessaire lorsque l’on publie grâce à un site qui fonctionne avec Spip de maîtriser le code
html. Cependant il peut être bien pratique pour insérer des ressources déjà en ligne et que l’on veut rendre
visible directement dans un article.
Par exemple :
- Des vidéos YouTube, Dailymotion, INA
- Des playlists Deezer ou d’autres sites de musique
- Des diaporamas SlideShare
- Des quiz Quiz révolution
 Premièrement pour que l’élément ajouté soit centré, la première chose à faire est de mettre les
balises qui centrent ce qui est placé entre elles : <center></center>
 Deuxièmement, il faut allez chercher sur un autre site le code à copier entre les deux balises
<center></center>
Quand un élément peut être inséré vous avez l’indication « Partager », « Intégrer » ou « Embeb ».
Par exemple sur une page Youtube :
Copier ce
code et le
coller
entre les
deux
balises
<center>
Cette manipulation permet l’insertion
de la vidéo directement dans l’article
Christine Fiasson - Collège Germaine Tillion - Lardy

14. 14
Etape 5 – Faire une redirection vers une ressource ou un site
Qu’est ce que la redirection ? Il s’agit d’un lien qui évite l’ouverture de l’article et envoie directement le
visiteur vers un autre site ou une ressource.
Pour faire une redirection vers un document, il faut connaître l’adresse du document sur le site.
Si vous ne savez pas comment faire relisez l’étape 3 – partie 3 du tutoriel. Une fois l’adresse obtenue,
copiez-là dans la case « Redirection ».
Désormais, lorsque les visiteurs cliqueront sur l’article, ils seront immédiatement redirigés vers la
ressource.
Il suffit de faire la même démarche mais avec l’url d’un site pour rediriger les visiteurs vers celui-ci.
Informations complémentaires
Quelques raccourcis pratiques :
- Ctrl + C = Copier
- Ctrl + V = Coller
- Ctrl + X = Couper
Pour aller plus vite, pensez à ouvrir deux onglets au moins dans votre navigateur. L’un affiche le site privé
et l’autre vous permet de naviguer sur le web. Cela évite de sortir sans cesse de votre cession sur le site du
collège.
Quelques logiciels essentiels :
- Si vous devez transformer une image pour quelle ait le bon format pour le site : PhotoFiltre
- Si vous avez besoin d’un logiciel pour transformer vos enregistrements audio : Audacity
- Pour créer vos propres exercices interactifs : Hotpotatoes
Quelques sites bien pratiques :
- SlideShare pour mettre en ligne vos diaporamas (vous devez créer votre compte)
- Wordle pour créer des nuages de mots
Si vous rencontrez des difficultés ou si vous avez une question, contactez-moi par mail :
christine.fiasson@ac-versailles.fr
Christine Fiasson - Collège Germaine Tillion - Lardy