ATTENTION : pour utiliser plus facilement ce fichier, cocher le retour automatique à la ligne dans "Format" ci-dessus, et adaptez la taille de sa fenêtre selon votre écran.  


TICES / COLLEGE MONT MIROIR 25120 MAÎCHE / AIDE POUR ECRIRE DANS SPIP 2

Bonjour,

Vous ne trouvez pas comment écrire en couleur, souligner, changer la taille du texte, placer une photo, une vidéo, du son, ect...dans les raccourcis SPIP ?

Ce fichier, à utiliser en demi-fenêtre, va vous aider ! Il vous permettra de copier directement des codes complémentaires sur votre page. 

Rappel : TOUJOURS utiliser en priorité les raccourcis SPIP, disponibles en format PDF téléchargeables depuis le site sur cette page:
http://missiontice.ac-besancon.fr/college_mont_miroir/spip.php?article40

CI-DESSOUS QUELQUES CODES HTML À COPIER SUR SA PAGE, pour l'embellir ou mieux la mettre en page, si vous ne les trouvez pas dans les raccourcis SPIP. 

Toutes ces balises ont été testées en local sous EasyPHP, SPIP 2.010, avec le squelette EVA-Web 4.1 et semblent stables. Le "couteau suisse", pluging permettant d'écrire certaines de ces balises automatiquement sous EVA-WEB ou d'autres squelettes, n'a pas été installé sur conseil du RAIP. Enfin quelques balises n'ont pas été indiquées, car réservées à la dynamisation de notre site.

SOMMAIRE :

INTRO : organiser ses rubriques et articles comme on le veut.
1. CHANGER LA COULEUR DE LA POLICE
2. CHOISIR LA TAILLE DU TEXTE
3. SOULIGNER UN MOT OU PLUS 
4. CENTRER UN MOT OU GROUPE DE MOTS
5. FORCER LE SAUT DE LIGNE , CREER UN PARAGRAPHE
6. ESPACER LES LETTRES D' UN TEXTE
7. JOINDRE UN DOCUMENT ou UN FICHIER
8. PLACEZ UNE PHOTO OU UNE IMAGE SUR SA PAGE 
9. METTRE UNE VIDEO PROVENANT D'UN SITE DE PARTAGE ou UNE VIDEO PERSONNELLE (formatFLV)
10. METTRE DU SON (format MP3)
11. PLACER UN LIEN VERS UN SITE INTERNET (lien simple, ou ouvrant )
12. FORCER L' OUVERTURE D' UN PDF DANS UNE DEUXIEME FENÊTRE DU NAVIGATEUR


INTRO : Lorsque l'on crée des rubriques (ou des articles à l'intérieur de rubriques) dans SPIP, ce dernier les range automatiquement dans l'ordre alphabétique, selon la première lettre de la rubrique ou de l'article.Cela ne correspond pas toujours à ce que l'on veut. Pour les"ranger", écrivez au début du titre 10. (il y a un espace après le point) pour la rubrique ou l'article que vous voulez en première position; 20. (toujours un espace après le point) pour la deuxième position; ect....Cela permet de hiérarchiser son espace, entre rubriques, ou entre articles dans une rubrique. Les chiffres tapés au début du titre n'apparaissent pas en page publique.


Vous pouvez DIRECTEMENT COPIER LES BALISES CI-DESSOUS DEPUIS CE FICHIER pour les coller sur votre page d'article. Ne restera plus qu'à les adapter à vos besoins ! Principe de base du HTML : à une balise ouvrante<---> doit correspondre une balise fermante </---> 


C'est parti !


1. CHANGER LA COULEUR DE LA POLICE d'un mot ou plus : toujours balise ouvrante avant le(s) mot(s) et fermante après le(s) mot(s).


	<font color=#FF0000>Texte ou mot en ROUGE</font>
	
	<font color=#009999>Texte en VERT </font>

	<font color=#0033CC>Texte en BLEU </font>	


	D' AUTRES CODES DE COULEURS disponibles sur : (copier/coller l'adresse ci-dessous dans la barre d'adresse de votre navigateur et ajoutez-la en favoris : cela permettra de l'ouvrir en parallèle lorsque vous travaillerez sur le site)

		http://colorschemedesigner.com/previous/colorscheme2/index-en.html

		Choisissez et copiez depuis ce site le code de la couleur désirée, et le coller à la place de celui proposé ci-dessus.



2. CHOISIR LA TAILLE DU TEXTE :


	<font size=6px>Ceci est mon texte agrandi</font>


	Vous pouvez modifier la taille du texte, de 7 à 1 : ici 6px (pixel) dans le code ci-dessus. En dessous de 3, on réduit la taille.




3. SOULIGNER UN MOT OU PLUS : 


	<U>mot(s) à souligner</U>



4. CENTRER UN MOT OU GROUPE DE MOTS


	<center>mots ou groupe de mots à centrer</center>



5. FORCER LE SAUT DE LIGNE , CREER UN PARAGRAPHE

	- Pour sauter une ligne, cliquer 2 fois sur "entrée" sur votre page.

	- Sauter plusieurs lignes : à la fin de votre phase, taper deux fois sur "entrée", coller la balise suivante :

	<BR>

	retaper "entrée"2 fois après cette balise et enregistrer. Faire cela plusieurs fois pour sauter plus de lignes.
       



6. ESPACER LES LETTRES D' UN TEXTE :


	<font style="letter-spacing: 6px;">Ceci est mon texte avec des lettres éloignées</font>

	
	Vous pouvez modifier l'espacement des lettres : ici 6px (pixel) dans le code ci-dessus.En dessous de 3px, on rapproche les lettres, au dessus on les espace.




7. JOINDRE UN DOCUMENT : 

	
 	Pour JOINDRE UN FICHIER PDF, ou OPEN OFFICE, OU WORD ou autre......( de taille maximale de 5,5 Mo, pas plus !)


			- SUR SA PAGE  D' ARTICLE : à gauche de la page ou vous rédigez votre article, une fenêtre vous permet de télécharger un document depuis votre ordinateur. Cibler l'emplacement de votre fichier en cliquant sur "parcourir", une fois le document atteint cliquer sur "ouvrir",  puis enfin sur "télécharger". SPIP attribue automatiquement un numéro à votre document, qu'il faudra indiquer dans votre page, selon les balises suivantes, à copier:
	
			<docXX|left>    ou     <docXX|center>    ou     <docXX|right>   selon la zone ou vous vous placez le doc sur votre page

			XX représente le numéro de document attribué par SPIP après le téléchargement. Toujours dans 	les fenêtres à gauche de votre article, vous pouvez attribuer un titre à votre document, ainsi qu'une description : n'oubliez pas d'enregistrer la modif.

			- EN BAS DE PAGE : même méthode, mais APRÈS avoir enregistrer votre article, en utilisant " joindre un document" tout en bas de votre page.





8. PLACEZ UNE PHOTO OU IMAGE SUR SA PAGE  ( formats acceptés = .JPEG  ou  .GIF ou .PNG )

			Attention important : SPIP ne prend pas en charge les photos de plus de 5 à 5.5 Mo, et les photos que vous "collez" pleine page ne doivent PAS DEPASSER  580px (pixels) de largeur ! Il faut donc avant téléchargement sur le site PREPARER SON IMAGE, en utilisant par exemple les éditeurs d'images gratuits PHOTOFILTRE ou GIMP, ( liens de téléchargement présents sur le site dans l'onglet TICES) ou, pour ceux qui ont Office, le logiciel Microsoft Office Picture Manager (il faut le pack Windows SP3 à jour). Essentiel :si vous voulez placer votre image SUR la page, il faudra donc REDIMENSIONNER votre image, avec 580 pixels de largeur, au maximum.

			- UNE PHOTO SANS TITRE :

			<imgXX|left>    ou	 <imgXX|center>    ou     <imgXX|right>      ou XX est le n° d'image attribué par SPIP

				Vous pouvez quand-même ajouter un titre à votre photo, avec cette balise, mais ce dernier n'apparaîtra qu'en survolant la photo avec la souris.


			- UNE PHOTO AVEC UN TITRE : remplacer sur votre page d'article <imgXX> par <docXX> : votre titre sera alors visible sous l'image.



				
9. METTRE UNE VIDEO PROVENANT D'UN SITE DE PARTAGE (Youtube, Dailymotion, Deezer...) :


En fait, c'est très simple ! Sur YOUTUBE, COPIER le code en dessous de "insérer cette vidéo sur votre site", en haut à droite de la page Youtube, et le coller sur votre page ! Et c'est tout ! Placer la balise "center" et vous obtenez ceci :

		<center>ce code est long comme un train de marchandise</center>

Une fois enregistrée, la vidéo doit apparaître centrée sur votre page de prévisualisation, et vous pouvez la tester. La vidéo s’affichera tant que le site qui l' héberge la propose en partage.Même démarche globale sur les autres sites de partage.


METTRE UNE VIDEO PERSONNELLE, format FVL uniquement (voir les pages TICE de notre site pour se doter d'un logiciel d'encodage gratuit) : télécharger votre fichier au format FVL comme pour un document, et coller sur votre page la balise suivante.

<docXX|player|center>

ou XX est le numéro attribué au fichier par SPIP après téléchargement. Cela placera automatiquement sur votre page le lecteur interne du site avec votre vidéo.Vous pouvez attribuer un titre sur l'écran du lecteur et/ou en dessous du lecteur, comme pour un document.




10. METTRE DU SON SUR SA PAGE ( format MP3, et 5,5 Mo maxi) : télécharger votre fichier MP3 comme  un document et coller la balise suivante

<docXX|player|> 

 ou XX est le numéro attribué au fichier par SPIP après téléchargement. Cela implantera automatiquement un lecteur audio sur votre page, avec votre musique.



11. PLACER UN LIEN VERS UN SITE INTERNET sur sa page :


Avant tout, ouvrir un deuxième onglet de votre navigateur à l'adresse voulue, pour plus tard copier la barre d'adresse du site sur votre page, puis, au choix :


	a) Insérer un LIEN SIMPLE (sans ouverture d'une nouvelle fenêtre, il faudra faire "page précédente" sur votre navigateur pour revenir au site du collège) : utiliser les raccourcis SPIP traditionnels soit,
		
		[mot(s) qui apparait en lien ->adresse Internet du site voulu, copiable depuis votre deuxième onglet]

		ou selectionner le mot lien et utiliser le raccourci typographique en haut de votre page article (la petite main), en acceptant le script si nécessaire


	b) Insérer un LIEN OUVRANT une nouvelle fenêtre, en intégrant ce lien à une phrase de votre page.


		<class="spip"><a href="adresse http du site web voulu" class="spip_out" target="_blank"">mot(s) qui apparaîtront en lien sur votre page</a>
		

	c) Insérer un LIEN OUVRANT une nouvelle fenêtre, en plaçant le lien à la ligne inférieure (pour faire des listes de liens)

		<p class="spip"><a href="adresse http du site web voulu" class="spip_out" target="_blank"">mot(s) qui apparaîtront en lien sur votre page</a></p>
 
  	
	ATTENTION : après avoir copier ces codes, veillez à bien implanter vos données ! Par exemple l'adresse internet voulue se place entre deux petits guillemets, soit "adresse" : il faut être précis !


12. FORCER L' OUVERTURE D' UN PDF DANS UNE DEUXIEME FENÊTRE DU NAVIGATEUR :

	Marre de voir une vilaine icône PDF sur votre page ? Voici la solution.

	Télécharger normalement votre PDF sur le site, mettez-le sur votre page. Enregistrez : la vilaine est là sur votre page ! Cliquez dessus, le PDF s'ouvre. Copier l' adresse http qui apparait dans la barre d'adresse en haut de page. Rouvrez votre article, et collez l' adresse dedans, vous la glisserez plus tard dans la balise. Ensuite utilisez une des balises " lien ouvrant" ci-dessus ( la 11.b par exemple), collez-la sur votre page, et placez-y l'adresse de votre PDF et vos mots liens comme d'habitude. Puis supprimez le doc collé précédemment, et enregistrez. La vilaine s'est transformée en lien qui ouvrira une seconde fenêtre.




Ce document est en cours de développement. Réalisé par Claude CHAILLON, ATICE collège public Mont Miroir, 25120 Maîche