Tutoriel - Publier sur le site du collège (spip)

Christine Fiasson - Collège Germaine Tillion - Lardy

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/

http://www.clg-tillion-lardy.ac-versailles.fr/


2

SOMMAIRE

Page 3

Page 4

Page 5

Page 6

Page 7

Page 8

Page 8

Page 9

Page 10

Page 11

Page 12

Page 13

Page 14

Page 14

Etape 1 – Comment s’identifier en tant que rédacteur ?

Etape 2 – Comment utiliser la partie privée du site du collège ?

Etape 3 – Rédiger un article simple

1 – Créer l’article

2 – Mettre l’article dans la bonne catégorie

3 – Enregistrer l’article

4 – Télécharger un logo attaché à l’article

5 – Définir les mots-clés de l’article

6 – Demander la publication de l’article

Etape 4 – Rajouter des documents (lien, image, son, vidéo, exercice interactif)

à un article

1 – Rajouter un lien ou un hyperlien

2 – Rajouter une image ou un fichier son

3 – Rajouter un exercice interactif ou un diaporama

4 – Rajouter un document grâce à du code html (vidéo, son,

diaporama, quiz)

Etape 5 – Faire une redirection vers une ressource ou un site

Informations complémentaires


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 ».

Puis, il faut écrire vos identifiants - votre Login/mot de passe (le même que scolarité.net pour les

professeurs) – et cliquer sur « Valider ».

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.

Cliquez sur

Login : en MAJUSCULES

Mot de passe : chiffres


4

Etape 2 – Comment utiliser la partie privée du site du collège ?

Raccourci vers

la page

d’accueil du

site privé

Vers la page

des catégories

dans lesquelles

il faut classer

les articles

Vers la page

des forums

mais ils ne

sont pas

activés sur

notre site

Vers la page

des auteurs :

vous pouvez y

modifier vos

infos

personnelles

Raccourci vers

la page

d’accueil du

site public

Se

déconnecter

Les 3

derniers

articles

parus

Des

raccourcis

vers les

actions les

plus courantes

Les

articles

en attente

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

mis en ligne sur le site

public

Raccourcis :

message,

recherche,

etc.

Présentation

générale du

site

Ceci est la page d’accueil du site privé


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.

Voici les outils que vous pouvez utiliser pour faire la mise en forme.

Titre

Il est obligatoire et doit être suffisamment

clair pour que les visiteurs sachent de

quoi va parler l’article.

Descriptif

rapide

Il est un résumé de quelques mots

présentant le sujet de l’article.

Il apparaît sur la page d’accueil du site

public.

Chapeau

Il peut être identique au « descriptif

rapide » car ils n’apparaissent jamais

simultanément. Le chapeau constitue le

début de l’article qui apparaît plus gros.

Texte

Il s’agit du corps de votre article. Vous

pouvez le mettre en forme grâce à des

outils, y rajouter des images ou d’autres

documents.

Transformer

en titre

Mettre en

gras

Mettre en

italique Mettre en

petites

majuscules

Faire une

liste avec

des puces

Faire une mise en forme spéciale (code html)

Exemple : un cadre

Faire un lien (hyperlien) sur un mot ou une image

Faire un tableau

Faire une note de bas de page

Faire une citation

Ajouter des caractères

spéciaux

Ajouter des guillemets


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).

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.

1

2

2

3


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

article

5 - Ajouter

des mots-

clés à votre

article

Voir étape

5


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.

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]

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.

« 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.


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.


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.

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.

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 ».

http://adresseurldusitechoisi/


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.

Vous pouvez rajouter ainsi plusieurs documents pour un même article.

Documents Pdf Documents modifiables Fichiers audio Pour les images

C’est le format

conseillé pour tous les

documents qui ne

doivent pas être

modifiés car la plupart

des ordinateurs les

ouvrent sans souci.

Word ou OpenOffice si les

élèves doivent modifier le

document il faut faire attention

à la version choisie.

Les docx par exemple ne sont

ouverts par tous les logiciels de

traitement de texte.

Le format conseillé est

mp3.

Evitez le wma.

Si les fichiers sont de

taille importante, il

faut mieux passer par

le blog de podcasts du

collège.

Privilégiez le format jpeg

ou gif.

Attention aussi à la taille

des images il ne faut

pas dépasser 450 pixels

de large et éviter de

charger des images trop

lourdes.

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 ».

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.


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.

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.

Voici un exercice

Hotpotatoes une fois téléchar-

gé comme un document

classique sur un article.

Vous pouvez donc l’insérer

comme une image dans votre

article.

Vous pouvez changer le titre

et mettre un petit descriptif.

Pour rendre cette insertion

plus agréable, il est possible

de mettre un logo à votre

exercice pour remplacer le

classique « page html ». Pour

cela il suffit de télécharger

une « vignette person-

nalisée »

Petite précision …

Le fait de télécharger un

document sur le site du

collège signifie que ce

document possède une

adresse url à partir du site.

Il est possible de connaître

cette adresse et donc de

faire un lien (hyperlien)

vers votre exercice

Hotpotatoes.

Pour trouver l’adresse url

de votre exercice, voici la

marche à suivre, elle est

très rapide :

Cliquez avec le bouton

droit de votre souris sur le

symbole représentant votre

document pour ouvrir un

menu déroulant. Vous

sélectionnez dans ce menu

« copier l’adresse du

lien » et coller ensuite

cette adresse où vous en

avez besoin.

http://www.ispringsolutions.com/free_powerpoint_to_flash_converter.html

http://www.slideshare.net/ChrisFiasson


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

http://www.youtube.com/user/ProfHisGeo

http://www.dailymotion.com/fr

http://www.ina.fr/

http://www.deezer.com/fr/index.php


http://www.quizrevolution.com/


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 :

[email protected]

http://photofiltre.free.fr/frames.htm

http://audacity.sourceforge.net/?lang=fr

http://hotpot.uvic.ca/


http://www.wordle.net/