Page d'exemple

Vous êtes sur une page d'exemple. Vous trouverez ci-dessous des exemples de mise en forme mettant en avent les possibilités offertes par l'éditeur de texte riche.

Vous pouvez éditer ou supprimer cette page.

Notez que vous pourrez retrouver les recommandations et exemples ci-dessous dans votre menu d'administration, à la rubrique Aide › Aide à la réaction.

Nettoyage du code

Hiérarchie de titres

Pour créer des titres, utilisez la liste déroulante Paragraph ci-dessus et choisissez le niveau de titre qui vous intéresse. Nous recommandons fortement d'utiliser les titres pour leur ordre d’importance, et non pour leur aspect graphique :

• Vous ne pouvez pas utiliser le niveau de Titre 1 (Header 1), parce qu'il doit présenter le sujet principal de la page, et être unique. C'est le champ Title qui sera utilisé pour cela.
• Vous devriez utiliser prioritairement l'option Titre 2 (Header 2), puis Titre 3 pour un sous-chapitre, et ainsi de suite dans un ordre décroissant pour les informations de moindre importance.
  Notez que l'utilisation correcte des hiérarchies de titre améliorera votre référencement sur les moteurs de recherche (SEO), et vous donnera une meilleure visibilité sur termes figurant dans les titres.
  Attention : n'utilisez pas les titres à l'excès : cela aurait pour effet de "noyer" vos mots-clés au lieu de mettre en avant les plus importants. 

Styles de texte

Entête ou chapô

Vous pouvez mettre en avant un texte d'introduction en utilisant la liste déroulante Formats ci-dessus. Choisissez Text style › Headlines. L'effet s'applique à l'ensemble du paragraphe. 

Notes de bas de page

Exemple : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius augue odio, vel tristique tellus sollicitudin ut.

Vous pouvez ajouter des notes de bas de page en utilisant la liste déroulante formats ci-dessus. Choisissez  Text style › Footnotes. Ce format s'applique aux paragraphes ou aux listes.
Combiné avec l'option Anchor, qui permet de créer des ancres, ce peut être un bon moyen de présenter vos sources.

Exemple : 

1. Vivamus eu urna arcu. Etiam semper malesuada tincidunt.
2. Donec erat ante, sagittis sit amet dui at, tincidunt molestie augue.
3. Etiam vel arcu nibh.

Formules mathématiques

Vous pouvez insérer des formules mathématiques via des codes MathJax (similaire à LaTex).
Pour insérer une formule, placez votre curseur à l'emplacement souhaité, puis cliquez sur l'icône ∑ (Formula). En cas de besoin, un lien vers la documentation sur la syntaxe est disponible dans la pop-up de saisie de la formule.

Exemple :

`sum_(i=1)^n i^3=((n(n+1))/2)^2 `

Modèles de structure

Cet éditeur propose des modèles de mise en page pour vous aider à structurer vos pages. Ils sont disponibles sous l'icône Insert template (à côté de l'icône Tableaux) : Cliquez sur l'icône puis sélectionnez le modèle que vous souhaitez utiliser. 

Créer des colonnes

Placez votre curseue à l'endroit où vous souhaitez insérer le modèle, puis cliquez sur l'icône Insert template. Choisissez 2 columns ou 3 columns dans la liste déroulante puis cliquez sur le bouton OK. Votre modèle est inséré, vous n'avez plus qu'à remplacer les textes et images par défaut par les vôtres. Vous pouvez supprimer les titres et les remplacer par vos contenus si besoin.
Exemple :

Figures

Si besoin, avec les templates vous pouvez importer un élément appelé Figure, qui vous permettra d'afficher une image avec sa légende. Une image par défaut est fournie par le modèle. Pour la remplacer, sélectionnez-la puis éditez ses options en cliquant sur l'icône Insert/Edit image. 

Dimensions et alignement des éléments de structure

Les figures et encadrés sont affichés en pleine largeur par défaut, pour le cas où vous souhaiteriez présenter une image panoramique, ou mettre tout un paragraphe en avant.

Néanmoins, vous pouvez réduire leur largeur à 50% ou 30% de la colonne principale, et les placer à droite où à gauche du texte standard.

Largeur

Pour modifier la largeur d'un encadré ou d'une figure, utilisez la liste déroulante Formats, et choisissez Block size › Column 30%.

Alignement / positionnement

Pour aligner un élément de structure à gauche ou à droite, utilisez la liste déroulante Formats, et choisissez Block position › Align right.

Ce type de placement est appelé "Flottement". Le texte entré après un élément flottant viendra se placer à côté de lui, jusqu'à atteindre le bas de l'élément, après quoi il occupe de nouveau toute la largeur disponible.

Pour insérer du texte après un élément flottant, il vous faudra "terminer" le flottement : Placez votre curseur dans le paragraphe que vous souhaitez placer après l'élément de structure flottant, et sélectionnez dans la liste Formats l'option Block position › Clear.

Importation de médias

Images

Utilisez l'icône Insert/Edit image pour parcourir votre dossier sur le serveur, et importer et/ou sélectionner votre image. Cliquez sur OK, et votre image est insérée dans l'éditeur de texte.

Dimensions de l'image

Par défaut, l'image est importée dans sa dimension d'origine. Pour redimensionner votre image, sélectionnez-la. De petits carrés apparaîtront aux quatre coins de l'image. Cliquez dessus, et faites un glisser-déposer pour la redimensionner. 
Il est recommandé de ne pas agrandir les images pour éviter une perte de qualité.

Lorsque vous enregistrez votre contenu, les images qui auront été redimensionnées à la baisse seront détectées, et un lien vers l'image d'origine leur sera appliqué. Ainsi, sur la page publique, un clic sur l'image réduite affichera l'image d'origine en lightbox (par dessus le reste de la page, avec un film noir translucide).

NB: Même si vous ne réduisez pas une image, elle ne sera jamais affichée plus grande que son contenant. Par exemple, si vous insérez l'image dans une colonne, elle s'adaptera automatiquement à la largeur de la colonne.

Importer des vidéos

L'importation de vidéos n'est pas permise via l'éditeur de texte.
Pour palier à ce problème, nous avons choisi de séparer l'insertion de texte et de vidéo. Ce qui était autrefois le champ Body est maintenant transformé en un tableau qui peut contenir soit un ligne de texte, soit une ligne de vidéo.

Vous pouvez ajouter autant de lignes que vous le souhaitez, et vous pouvez les réorganiser simplement par glisser-déposer. 

Pour ajouter une nouvelle ligne, allez jusqu'en bas du tableau Body et cliquez sur le bouton Ajouter rich text ou Ajouter Video. Ça ajoutera une nouvelle ligne avec un champ à remplir.

Pour importer des vidéos, allez sur la page de la vidéo en ligne, et copiez son URL (l'adresse de la page qui commence par http://). Collez cette adresse dans le champ vidéo, et enregistrez.
Et c'est tout ! Les informations de la vidéo seront automatiquement récupérées pour afficher la vidéo en pleine largeur dans votre page.

Vidéos externes uniquement

Les vidéos ne pourront être diffusées sur le site que depuis des hébergeurs de vidéo externes comme YouTube ou Viméo pour 3 raisons : 

Guerre des formats

Que ce soient les fabricants d'ordinateur, de téléphones, ou les créateurs de logiciels et navigateurs, aucun n'a réussi à imposer un format de vidéo compatible entre les différents supports. Chacun réclame donc son propre format. Dans la situation actuelle, pour publier une vidéo sur internet qui soit lisible depuis un ordinateur Windows, un Mac et/ou un mobile, il faut fournir la vidéo dans 3 formats différents. 

Simplicité

Or, les éditeurs ou modules qui existent actuellement proposent rarement de télécharger 3 versions du même fichier, ou s'ils le font, l'interface n'est pas ergonomique du tout.

De leur côté, les hébergeurs ont mis en place des systèmes complexes vous permettant d'envoyer un seul fichier vidéo, de le convertir dans les différents formats requis, dans une qualité adaptée aux besoins du web, et ils fournissent en retour un lecteur compatible sur toutes les plateformes. Ils ont à leur disposition des serveurs hyper performants, spécialement adaptés à la gestion de vidéos, et mettent tout ça à disposition du grand public gratuitement.

Ressources

Poids : Les fichiers vidéo sont très lourds. Comme il nous faut fournir 3 fichiers par vidéo, le site internet aurait besoin d'être hébergé sur un serveur qui aurait un espace de stockage et des performances qui vont bien au delà de ce qui est nécessaire au bon fonctionnement d'un site n'hébergeant pas de vidéos.
Par ailleurs, le chargement sur un serveur de fichiers volumineux est lent, et nécessite des adaptations spéciales pour prévenir les micro-coupures de connexion, ou pertes de données qui pourraient par exemple stopper votre téléchargement de fichier à 97% après une heure d'attente patiente...

Bande passante : lorsqu'on diffuse sur notre site une vidéo hébergée chez un fournisseur externe, la bande passante utilisée par le visiteur qui consulte la vidéo est celle du fournisseur, pas celle du site internet. Donc même si de très nombreuses personnes se connectent au même moment pour visionner votre vidéo, le risque que notre serveur passe en surcharge et soit indisponible est quasi nul.

Hébergeurs recommandés

• Youtube
• Viméo

Comment faire si je ne veux pas diffuser publiquement ma vidéo ?

Les hébergeurs de vidéo connaissent cette problématique et proposent de publier des vidéos de façon privée. Cela signifie que votre vidéo ne sera pas enregistrée auprès des moteurs de recherche, ni même listée sur votre chaîne vidéo. Selon l'hébergeur, la vidéo pourra être accessible uniquement aux personnes possédant la bonne URL, ou ayant un mot de passe que vous leur auriez préalablement communiqué, etc.

Pour plus d'informations, vous pouvez consulter les conditions de confidentialité des hébergeurs ci-dessous : 

• YouTube : https://support.google.com/youtube/answer/157177?hl=en-GB
• Viméo : https://vimeo.com/help/faq/managing-your-videos/privacy-settings

Nous vous recommandons également de lire la documentation de chaque hébergeur à propos du droit d'auteur :

• YouTube : https://www.youtube.com/yt/copyright/fr/
• Viméo : https://vimeo.com/help/faq/legal-stuff/copyright-law-and-infringement