Règles de mise en page Web

Utiliser les outils de la barre d'édition

Le portail Miriadi utilise CKeditor.

De gauche à droite :

  • "Format" : il est obligatoire de structurer le texte avec des titres de différents niveaux et d'utiliser successivemnet le  titre 1, le titre 2, etc. qui apparaîtront dans la table des matières à droite en haut du texte. Le plus souvent, on considère que le titre 1 est le titre de la page (celui du champ « Titre », et le titre 2 est le premier niveau dans la page. On n'utilisera donc peu le Format « Titre 1 ».
  • "Gras, italique, souligné" : marqué d'abord les mots à mettre en forme.
  • "Citation" : marquer la citation et cliquer sur les guillemets.
  • "Supprimer la mise en forme" : Si vous collez un texte provenant d'un fichier imprimable (.doc, etc. ), il vaut mieux ne pas chercher à conserver la mise en forme.
  • "Insérer/Supprimer la liste numérotée"
  • "Insérer/Supprimer la liste à puces"
  • "Lien vers un contenu"
  • Supprimer le  lien
  • Ajouter un media
  • Vérifier l'orthographe
  • Annuler (la dernière action), ou Rétablir
  • Agrandir/Minimiser
  • Faire un trait de séparation

Vous pouvez également utiliser les raccourcis clavier pour une édition plus rapide : http://ckeditor.com/tmp/adctheme/keyboard_shortcuts.html

Il ne faut pas changer la taille des caractères où que ce soit dans le document. S'il y a une variation, elle sera corrigée par les développeurs quand le texte sera complet. La taille n'a aucune signification sémantiquement. Le type de police de caractères ne doit pas être changé non plus. Il y en a un seul pour le site selon la charte graphique. Ce sera aussi le travail des développeurs de le rectifier.
Ce qui a un intérêt sémantiquement c'est l'usage du gras, de l'italique, du souligné, si on l'utilise avec parcimonie.

L'utilisation d'abréviations doit être évitée pour des raisons de lisibilité.

Les lettres capitales sont proscrites en dehors des initiales de phrases ou de noms propres.

Un document structuré

Une page web est un document structuré. En rédigeant du contenu sur le site miriadi vous devriez vous soucier de sa structure logique (son contenu) et pas de sa présentation (structure physique) qui est prise en charge par le logiciel.

Voici quelques règles a respecter lors de la rédaction d'un document structuré :

  • On utilise pas la barre d'espace plusieurs fois de suite pour faire des retraits de texte, la première ligne d'un paragraphe n'est pas en retrait sur une page web. Si besoin une règle peut être ajoutée lors de la présentation du texte sous une autre forme (pour impression par exemple) ;
  • On n'utilise pas non plus les sauts de lignes plusieurs fois de suite, normalement les espaces entre les différents éléments (titres, paragraphes…) sont prévus et changeables en un seul endroit pour tous les contenus du site web (dans la feuille de style du site) ;
  • Le document doit être écrit en se concentrant sur le contenu et non sur la forme ;
  • Le document doit être structuré en parties, chaque partie commence par un titre ;
  • Le sommaire généré par le site web doit être cohérent, pour cela vous devez respecter la hiérarchie des titres ;
  • Les titres sont fait en utilisant la fonction style du logiciel, les tailles de titres en fonction du niveau sont prévues dans la feuille de style du site web ;
  • Le document ne doit comporter qu'un seul titre de niveau 1 : le titre du document ;
  • Le premier élément de la page est le titre du document, vous n'avez pas besoin de l'ajouter dans le corps de vos contenus, puisqu'il vous est demandé avant dans le champ titre ;
  • La numérotation des parties du document ne doit pas être manuelle mais générée par la fonction « table des matières » ;
  • Les titres y compris celui du document ne doivent pas être placés dans des tableaux ;
  • Les tableaux doivent être utilisés avec parcimonie, uniquement lorsque cela est pertinent (pas de textes longs dans les cases d'un tableau, ni des paragraphes, ni des titres) ;
  • Les différentes parties doivent être placées les unes en dessous des autres, jamais les unes à côté des autres ;
  • Le document doit être accessible (il le sera si vous respectez les règles précédentes) par exemple aux lecteurs d'écran ;

À voir

Historique des contenus

Chaque version d'un contenu est conservée, avec sa date et son auteur, à partir du moment où on a coché la case "Créer une nouvelle révision", qui se trouve dans "Informations sur les révisions". Ces versions successives sont visibles en cliquant sur l'onglet "Révisions" pour les personnes qui ont le statut suffisant.

Notes de bas de pages

Le module footnotes permet d'insérer des notes de bas de pages. Il fonctionne en incluant dans le texte des balises entre lesquelles on écrit le conteru de la note. Pour l'explication complète, lire cette page.

Les ancres permettaient déjà de le faire mais de façon moins simple.

Insérer un son

Cliquez sur "Add media" et laissez-vous guider.

Insérer une image

Cliquez sur "Add media" et laissez-vous guider.

Taille de l'image, et position de l'image

Une fois l'image affichée, ouvrez le menu contextuel par un clic droit sur l'image, et vous pouvez agir sur sa taille et sur sa position. Attention, tenez compte du fait que l'affichage ne sera pas le même sur tous les écrans, et peut modifier les rapports entre le texte et l'image. Le meilleur choix est de ne pas alligner les images, surtout si elles sont de grande taille.

Une image téléversée en tant que logo d'un groupe s'affichera avec la taille maximum de 480x480 pixels, quelle que soit sa taille initiale.

Images du diaporama

Les pages de base permettent d'ajouter une image au diaporama de la page d'accueil, si on a coché le " 1 " sous " To slideshow ", et le résumé de la page s'affiche aussi sur la diapositive.

Insérer une vidéo

Il suffit de coller le lien de la vidéo à l'endroit où on désire qu'elle s'affiche.

Insérer un lien vers une page web ou vers un fichier

Les images, les sons et les vidéos peuvent être intégrés directement dans des pages web. Pour les autres fichiers il faut faire un lien qui permet de télécharger ou d'ouvrir le fichier dans le navigateur comme une nouvelle page.

Liens internes (vers une page du site ou vers un fichier)

Pour faire un lien internes dans un texte il faut déjà que la page cible existe ou si c'est un fichier qu'il ait été envoyé sur le site en passant par « Contenu > Fichiers ».

Quand on est dans le texte :

  • placer le curseur là où on veut faire le lien. On peut aussi sélectionner du texte ou une image si on veut ça comme texte du lien. Sinon c'est le titre de la page ou le nom du fichier qui sera utilisé comme texte pour le lien ;
  • cliquer sur le bouton lien  () ;
  • dans le premier champ de recherche chercher la page ou le fichier vers laquelle/lequel on veut faire le lien (quelques lettres suffisent, pour avoir tous les PDF on peut juste écrire « pdf », pour tous les JPEG « jpg », pour la page « Ressources » « ress ») ;
  • cliquer sur « insérer le lien » (Insert link).

Exemple des fichiers HTML

Ces fichiers peuvent provenir de Hot Potatoes, de H5P, etc.

Liens externes

Comme pour les liens internes on place le curseur là où on veut faire le lien ou bien on sélectionne du texte ou encore une image puis il faut cliquer sur le bouton lien (). Ensuite il faut coller l'adresse du lien dans « adresse du lien » (Link URL) et cliquer sur « insérer le lien » (Insert link).