Insérer une vidéo ou image distante

erational — 2015-06-26T09:03:15Z

Le site utilise le protocole oEmbed qui permet d'insérer un contenu tiers.

Pour cela placer la ressource distante entre les caractères <....>

Exemple : Youtube

Code :

Résultat :

Metronomy - The Look (Official Video)
par Metronomy

https://www.youtube.com/watch?v=sFr...

Exemple : Vimeo

Code :

Résultat :

TOKYO SLO-MODE
par BRTHR

http://vimeo.com/29186408

Exemple : Flickr

Code :

Résultat :

Spip @ 東京
par erational

http://www.flickr.com/photos/eratio...

Démonstration planche contact - portfolio

erational — 2015-06-26T09:02:28Z

Pour créer un portfolio

Préparer vos images (ne pas dépasser les 2000px de large pour ne surcharger le serveur)
placer vos images dans un zip
ajouter ce zip en documents
choisir les options : dézipper le zip
Éventuellement ajouter des titres à vos images

Les images qui ne sont pas utilisées dans l'article, sont automatiquement ajoutés en bas en mode portfolio.

Documentation sur les raccourcis typographiques

erational — 2015-06-26T08:59:36Z

Le texte préexiste à la mise en page

C'est peut-être une évidence, mais pour mettre en page un texte, il faut que le texte existe.

Dans le cas de SPIP, ça veut dire qu'il vaut mieux (au moins dans un premier temps) :

disposer de tout le texte sans aucun raccourcis typographique,
sauter une ligne à chaque changement d'idée (ce qui donne un changement de paragraphe, voire un titre),
faire un retour à la ligne avant chaque élément d'une énumération.

Ce n'est qu'ensuite que les raccourcis typographiques de SPIP pourront être appliqués avec discernement.

Distinction entre paragraphes et caractères

Certains attributs typographiques ne peuvent s'appliquer qu'à des paragraphes entiers, d'autres doivent être appliqués à des caractères dans le même paragraphe.

Dans la Barre Typographique de SPIP, les attributs de caractères forment le premier groupe sur la gauche, les attributs typographiques de paragraphes le deuxième.

Paragraphes

Un paragraphe dans SPIP est précédé d'une ligne vide et suivi d'une ligne vide [1].

Une règle générale est de ne mettre qu'un attribut de paragraphe par paragraphe.

Si deux paragraphes de suite ont le même attribut, il faut appliquer deux fois l'attribut, une fois pour chaque paragraphe.

Les attributs de paragraphe ne sont pas disponibles dans les champs de SPIP n'ayant qu'une ligne.

Les attributs de paragraphe sont :

les titres {{{Paragraphe du titre}}}.

Certains attributs sont un peu spéciaux :

Poésie Le texte de la poésie, sur plusieurs lignes, les retour à la ligne simple étant pris en compte

Le geai gélatineux gégnait dans le jasmin

Voici mes infins le plus beau vers de la langue française.

Cadre Texte qui apparaitra dans une zone de formulaire facilitant le copier/coller [2]

Ceci est du texte dans un cadre. les espaces en début de ligne comptent ! Les retour à la ligne simples aussi !

Citation Texte d'une citation

C'est en forgeant que l'on devient forgeron.

Caractères

Les attributs de caractères doivent être ouverts et fermés à l'intérieur du même paragraphe (pas question de débuter le gras sur un premier paragraphe et de le terminer sur un deuxième).

Ils peuvent être utilisés dans tous les champs de SPIP.

Mise en forme :

gras : {{texte en gras}} ; à utiliser pour un élément que l'on souhaite appuyer (sera prononcé plus fort dans un lecteur vocal) : texte en gras
italique : {italique} ; à utiliser pour une élément sur lequel on veut insister (sera prononcé avec emphase) : italique
code : du code (raccourcis typographiques, html...) que l'on ne souhaite pas que SPIP interprète
biffé : texte biffé : pour indiquer qu'on avait pensé à un autre mot et que l'on a changé d'avis : SPIP, c'est ~~bien~~ fantastique !

Comportement spécifique :

Lien : [texte du lien->http://www.spip.net/] : lien : texte du lien
À noter qu'il est possible de faire des liens à l'intérieur du site SPIP à l'aide des numéros des éléments et de leur type (se reporter à l'aide en ligne fournie par SPIP).
Lien avec bulle d'aide : [texte du lien|Le site officiel de SPIP->http://www.spip.net/] : texte du lien
Lien avec langue des destination (non visible sur Internet Explorer) : [texte du lien|{fr}->http://www.spip.net/] : texte du lien
Lien avec bulle d'aide et langue des destination : [texte du lien|Le site officiel de SPIP{fr}->http://www.spip.net/] : texte du lien
Lien vers un email [Contacter max->max@domaine.com] Contacter max
Lien vers un email avec un sujet pré-rempli [Contacter Max pour le spam->mailto:max@domaine.com?subject=Cadeau pour les robots spammeurs]Contacter Max pour le spam
Ancre et retour à l'ancre : [definition_ancre<-] et [retour à l'ancre->#definition_ancre] : retour à l'ancre
Définition dans Wikipedia : [?GPL] : appelle l'encyclopédie libre Wikipedia pour obtenir la définition du mot [3] : GPL
Avec bulle d'aide : [?GPL|Définition sur Wikipédia] : GPL
note de bas de page : texte[[note de bas de page]] : crée une note de bas de page avec le texte entre les doubles crochets [4]
expression mathématique $expression TeX$ : affichage une formule mathématique selon la syntaxe LaTeX :

Listes

Les listes sont à utiliser pour tout ce qui à le sens d'une énumération.

Attention : il faut entourer un bloc de listes à puces d'une ligne vide avant et après.

Listes à puces

-* première ligne -* deuxième ligne -** une sous liste à puce -* de retour dans le niveau initial

Donnera :

première ligne
deuxième ligne
- une sous liste à puce
de retour dans le niveau initial

Listes numérotées

-# première ligne -# deuxième ligne -## une sous liste à puce -# de retour dans le niveau initial

Donnera :

première ligne
deuxième ligne
1. une sous liste numérotée
de retour dans le niveau initial

Tableaux

Pour être complètement accessible, un tableau dans SPIP doit avoir un titre et une description.

Ainsi :

||Produits bio et prix|Ce tableau sert d'exemple de mise en forme spip|| | {{Produit}} | {{Prix €}} | | Beurre Bio | 5€ | | Lait Bio | 3€ | | Choux Bio | 4€ |

Donnera :

Produits bio et prix
Ce tableau sert d'exemple de mise en forme spip
Produit	Prix €
Beurre Bio	5€
Lait Bio	3€
Choux Bio	4€

Notez les doubles || sur la première ligne du tableau !

Attention : les pièges classiques avec les tableaux sont :

ne pas avoir le même nombre de | sur une ligne
avoir un espace après le dernier | de la ligne (un moyen simple de vérifier : la touche fin du clavier amène à la fin de la ligne)

Tableaux avec fusion de cellules

||Tableau avec fusion|Ce tableau sert d'exemple de mise en forme spip|| | {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} | | ligne 1 | Cellule fusionnée avec la suivante |<| | ligne 2 | Celulle fusionnée _ avec celle du dessous | normale | | ligne 2 |^| normale aussi |

Donnera :

Tableau avec fusion
Ce tableau sert d'exemple de mise en forme spip
Colonne 1	Colonne 2	Colonne 3
ligne 1	Cellule fusionnée avec la suivante
ligne 2	Celulle fusionnée avec celle du dessous	normale
ligne 2	Celulle fusionnée avec celle du dessous	normale aussi

Principe :

|<| fusionne avec la cellule de gauche
|^| fusionne avec la cellule au dessus

Images

Pour les images et documents, reportez-vous à l'aide en ligne de SPIP. Seule contrainte pour l'accessibilité (et donc un meilleur référencement) : donnez un titre à toutes vos images décrivant le [sens/signification] de chacune d'elles.

Caractères spéciaux

~ (espace insécable ou espace dur — correspond au du HTML) placé entre deux mots remplace l'espace en ayant l'avantage d'être insécable, c'est-à-dire, qu'il empêchera les deux mots d'être séparés par un retour à la ligne malvenu. S'utilise en particulier entre le prénom et le nom propre.
-- : — (tiret cadratin) à utiliser pour les incises dans un texte

Ligne horizontale

---- : 4 signes moins en seuls sur une ligne (précédés d'une ligne vide et suivis d'une ligne vide) donneront un trait de séparation horizontal.

Éléments dangereux

Il y a deux éléments dangereux dans SPIP :

le retour à la ligne simple : _ (souligné espace) en début de ligne.
Usage toléré pour donner adresse et numéro de téléphone/fax.
Usage toléré : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
Usage interdit : pour mettre plus d'espace vertical entre deux éléments de la page.
les fausses listes à puce : - (moins espace) en début de ligne
L'effet visuel peut être intéressant, mais il n'a pas de sens.
Ceci est une fausse liste à puce
le HTML pur : il est possible dans SPIP de mettre du code HTML. Le faire est fortement déconseillé :
- parce que c'est la porte ouverte à toutes les dérives, ne serait-ce que celle de sortir de la charte graphique du site, ou celle de produire un code HTML non valide (voire non interprétable ailleurs que sur Internet Explorer
- parce que c'est partir du postulat que votre site ne sera visité qu'en tant que site web ; il pourrait très bien être un jour disponible sous forme de fichier PDF...

Exemples de titraille : Titre principal

{{{Exemples de titraille : Titre principal}}}

Placement des images


I love SPIP


I love SPIP


I love SPIP

[1] Sauf les listes à puce et les tableaux

[2] Essentiellement utilisé sur spip-contrib pour donner des exemples de code

[3] Si le mot n'existe pas, vous pouvez le créer vous-même !

[4] Et la note de bas de page est automatiquement numérotée, rendue clicable, pour la consulter, et pour revenir au texte l'ayant appelée

Ajouter une vidéo locale

erational — 2010-03-15T12:58:00Z

Comment ajouter simplement une vidéo locale dans SPIP

Étape 1 : Préparer la vidéo pour le web

Installer le logiciel libre Handbrake https://handbrake.fr/

Encodez votre vidéo dans Handbrake

1	Définir le nom de la vidéo ré-encodée
2	Choisir le format MP4 et optimisé pour le web
3	Vérifier la taille de la vidéo : Ne pas dépasser 800 pixels de large
4	Lancer l'encodage !

Étape 2 : A jouter la vidéo dans votre article SPIP

Ajouter le fichier obtenu dans votre article SPIP avec le formulaire d'ajout de documents

Cliquer sur modifier (Facultatif)

Champs Titre	Permet de définir un titre qui sera affiché sous la vidéo
Vignette	Permet d'ajouter l'image qui servira d'image d'introduction de la vidéo L'astuce consiste à ajouter une capture de l'écran de la vidéo

Voici une vidéo avec une vignette personnalisée et un titre

Étape 3 : Intégrer la vidéo dans votre article SPIP en utilisant le code

Vidéo sans autoplay

Code à utiliser

Résultat :

Vidéo sans autoplay et avec une vignette personnalisée

Code à utiliser

Résultat :

Démonstration d'aspirateur

Vidéo avec autoplay

Code à utiliser

Résultat :

Article 3 : logo survol moins de 420x212

erational — 2000-09-10T10:54:00Z

Article 2 : sans logo

erational — 2000-09-10T10:51:00Z

- Test images : Logo rubrique 2000x1500

Article 1 : logo 2000x800

erational — 2000-09-10T10:51:00Z

Frères des Hommes

Insérer une vidéo ou image distante

Exemple : Youtube

Exemple : Vimeo

Exemple : Flickr

Démonstration planche contact - portfolio

Pour créer un portfolio

Documentation sur les raccourcis typographiques

Le texte préexiste à la mise en page

Distinction entre paragraphes et caractères

Paragraphes

Caractères

Listes

Tableaux

Tableaux avec fusion de cellules

Images

Caractères spéciaux

Ligne horizontale

Éléments dangereux

Exemples de titraille : Titre principal

Placement des images

Ajouter une vidéo locale

Étape 1 : Préparer la vidéo pour le web

Étape 2 : A jouter la vidéo dans votre article SPIP

Étape 3 : Intégrer la vidéo dans votre article SPIP en utilisant le code

Article 3 : logo survol moins de 420x212

Article 2 : sans logo

Article 1 : logo 2000x800