Sommaire de cette page:
L'interdit absolu « A LA UNE »
Rédaction de la feuille paroissiale
Le codage des couleurs
Mots clefs pour la bibliothèque des MÉDIAS
Les puces, pour mettre en évidence des paragraphes
Police d’icônes
– Glyphs de WordPress
– Cliparts
Création d'un sommaire
Réduction des espacements de lignes
Quelques instructions sur les images
Les formats
– La taille optimum
– Redimensionnement apparent
Création d'un diaporama
Diaporama classique sans annotation
Diaporama avec annotation
La musique
Les spécificités détectées de WORDPRESS
L'interdit absolu « A LA UNE »
Tous les administrateurs ont complète latitude pour modifier un site internet.
MAIS
sous WordPress, ils ne doivent -sous AUCUN PRETEXTE– entrer dans la page ACCUEIL. Cette page se met à jour automatiquement, selon des choix prédéfinis qui ne peuvent être modifiés QUE PAR le WEBMASTER Sébastien sebastien@damery.com
Mettre un article en Une est très simple:
1
|
2
|
| Il suffit de cocher la case | De choisir l'image qui servira d'appel pour l'internaute |
L'image à la Une qui sera choisi, pour capter l'attention de l'internaute, doit avoir les dimensions idéales d'un rectangle, en pixels: 588 x 413. Ces dimensions (en proportions avec le format parfait 800 x 600 adapté au Web) permettent d'occuper entièrement l'espace proposé par WordPress et surtout d'avoir l'image complète. Les dimensions au-delà sont coupées (coupure au bas de la photo si elle est trop haute; coupure à droite si elle est trop large). Les dimensions en-deçà décalent la photo vers la gauche. Nous verrons plus avant, dans les recommandations, que la présence d'une photo « non carré » ou « non rectangulaire » entraîne la présence d'un liseré blanc, invisible sur une feuille blanche, apparent sur une feuille colorée. Les solutions sont décrites dans le paragraphe Quelques instructions sur les images.
Rédaction de la feuille paroissiale
Si nous ne gardons aucune archive des feuilles paroissiales, le lien dans l'article « Feuille paroissiale » est permanent si le mode opératoire suivant est exécuté:
- Rédiger sous Word (doc ou docx) la feuille paroissiale et la sauvegarder sous le titre « EN PAROISSE »
- Transformer ce fichier Word en fichier PDF (par exemple grâce au logiciel téléchargeable gratuitement PDFCREATOR ou par la fonction directement sous Word récent: Fichier – Enregistrer sous – Type de fichier: PDF). Le fichier obtenu doit donc s'appeler « EN PAROISSE.pdf »
- Détruire, dans la rubrique MEDIAS l'ancien fichier « EN PAROISSE.pdf »
- Ajouter, dans la rubrique MEDIAS le fichier récemment créé « EN PAROISSE.pdf »
ATTENTION !!:
A) Si la feuille paroissiale est éditée en *.docx (Word nouveau), seuls ceux qui possèdent ce Word pourront la lire. Si elle est éditée en *.doc (Word ancien), il faudra que l'internaute possède un Word sur son ordinateur. Les internautes qui accèderont via iPad, iPhone, ou autre tablette tactile, ou qui ne possèdent qu'un MAC, ne pourront lire le document… Ce qui élimine pas mal de monde !!
B) Si la feuille paroissiale est éditée en PDF:
– Respecter la casse du titre (ici, en majuscule)
– Veiller à bien détruire l'ancien pdf AVANT d'importer le nouveau
– L'ensemble de la manipulation a été testé. Si elle ne fonctionne pas sur votre ordinateur, en mode « Aperçu« , il peut y avoir 2 raisons:
- Vous n'avez pas ADOBE READER, le logiciel lecteur des fichiers PDF (téléchargement gratuit sur internet) ou si le document est en Word, vous n'avez pas le Word adéquat.
- Vous avez fait une erreur de manipulation. Reprenez le mode opératoire, à partir de la phase 1
Le codage des couleurs
Le codage des couleurs
Les couleurs en HTML sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de Vert et de Bleu (selon le codage RGB (Red Green Blue, en français : RVB) de la couleur choisie. Ainsi la syntaxe de codage d'une couleur en HTML est la suivante : color= »#RRVVBB » .
RR, VV et BB représentent respectivement un nombre hexadécimal (base 16. Soit 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) entre 00 et FF pour le Rouge, le Vert et le Bleu. Ainsi, plus de 16 millions de couleurs sont disponibles pour colorer les pages web. Toutefois, étant donné que tous les navigateurs ne reconnaissent pas les couleurs de la même façon, le W3C conseille l'utilisation des couleurs ci-dessous, pour lesquelles un nom intelligible a été donné.
Il est à noter que ce codage est déjà donné par WORDPRESS, pour les administrateurs & créateurs de documents.
Onglet « Plus de couleurs » –> « Par nom ».
Pour le plaisir et pour la création d'un grand tableau en langage HTML, voici une autre présentation…
| Nom de la couleur | Aperçu | Codage RVB |
|---|---|---|
| aliceblue | ███████ aliceblue | #F0F8FF |
| antiquewhite | ███████ antiquewhite | #FAEBD7 |
| aqua | ███████ aqua | #00FFFF |
| aquamarine | ███████ aquamarine | #7FFFD4 |
| azure | ███████ azure | #F0FFFF |
| beige | ███████ beige | #F5F5DC |
| bisque | ███████ bisque | #FFE4C4 |
| black | ███████ black | #000000 |
| blanchedalmond | ███████ blanchedalmond | #FFEBCD |
| blue | ███████ blue | #0000FF |
| blueviolet | ███████ blueviolet | #8A2BE2 |
| brown | ███████ brown | #A52A2A |
| burlywood | ███████ burlywood | #DEB887 |
| cadetblue | ███████ cadetblue | #5F9EA0 |
| chartreuse | ███████ chartreuse | #7FFF00 |
| chocolate | ███████ chocolate | #D2691E |
| coral | ███████ coral | #FF7F50 |
| cornflowerblue | ███████ cornflowerblue | #6495ED |
| cornsilk | ███████ cornsilk | #FFF8DC |
| crimson | ███████ crimson | #DC143C |
| cyan | ███████ cyan | #00FFFF |
| darkblue | ███████ darkblue | #00008B |
| darkcyan | ███████ darkcyan | #008B8B |
| darkgoldenrod | ███████ darkgoldenrod | #B8860B |
| darkgray | ███████ darkgray | #A9A9A9 |
| darkgreen | ███████ darkgreen | #006400 |
| darkkhaki | ███████ darkkhaki | #BDB76B |
| darkmagenta | ███████ darkmagenta | #8B008B |
| darkolivegreen | ███████ darkolivegreen | #556B2F |
| darkorange | ███████ darkorange | #FF8C00 |
| darkorchid | ███████ darkorchid | #9932CC |
| darkred | ███████ darkred | #8B0000 |
| darksalmon | ███████ darksalmon | #E9967A |
| darkseagreen | ███████ darkseagreen | #8FBC8F |
| darkslateblue | ███████ darkslateblue | #483D8B |
| darkslategray | ███████ darkslategray | #2F4F4F |
| darkturquoise | ███████ darkturquoise | #00CED1 |
| darkviolet | ███████ darkviolet | #9400D3 |
| deeppink | ███████ deeppink | #FF1493 |
| deepskyblue | ███████ deepskyblue | #00BFFF |
| dimgray | ███████ dimgray | #696969 |
| dodgerblue | ███████ dodgerblue | #1E90FF |
| firebrick | ███████ firebrick | #B22222 |
| floralwhite | ███████ floralwhite | #FFFAF0 |
| forestgreen | ███████ forestgreen | #228B22 |
| fuchsia | ███████ fuchsia | #FF00FF |
| gainsboro | ███████ gainsboro | #DCDCDC |
| ghostwhite | ███████ ghostwhite | #F8F8FF |
| gold | ███████ gold | #FFD700 |
| goldenrod | ███████ goldenrod | #DAA520 |
| gray | ███████ gray | #808080 |
| green | ███████ green | #008000 |
| greenyellow | ███████ greenyellow | #ADFF2F |
| honeydew | ███████ honeydew | #F0FFF0 |
| hotpink | ███████ hotpink | #FF69B4 |
| indianred | ███████ indianred | #CD5C5C |
| indigo | ███████ indigo | #4B0082 |
| ivory | ███████ ivory | #FFFFF0 |
| khaki | ███████ khaki | #F0E68C |
| lavender | ███████ lavender | #E6E6FA |
| lavenderblush | ███████ lavenderblush | #FFF0F5 |
| lawngreen | ███████ lawngreen | #7CFC00 |
| lemonchiffon | ███████ lemonchiffon | #FFFACD |
| lightblue | ███████ lightblue | #ADD8E6 |
| lightcoral | ███████ lightcoral | #F08080 |
| lightcyan | ███████ lightcyan | #E0FFFF |
| lightgoldenrodyellow | ███████ lightgoldenrodyellow | #FAFAD2 |
| lightgreen | ███████ lightgreen | #90EE90 |
| lightgrey | ███████ lightgrey | #D3D3D3 |
| lightpink | ███████ lightpink | #FFB6C1 |
| lightsalmon | ███████ lightsalmon | #FFA07A |
| lightseagreen | ███████ lightseagreen | #20B2AA |
| lightskyblue | ███████ lightskyblue | #87CEFA |
| lightslategray | ███████ lightslategray | #778899 |
| lightsteelblue | ███████ lightsteelblue | #B0C4DE |
| lightyellow | ███████ lightyellow | #FFFFE0 |
| lime | ███████ lime | #00FF00 |
| limegreen | ███████ limegreen | #32CD32 |
| linen | ███████ linen | #FAF0E6 |
| magenta | ███████ magenta | #FF00FF |
| maroon | ███████ maroon | #800000 |
| mediumaquamarine | ███████ mediumaquamarine | #66CDAA |
| mediumblue | ███████ mediumblue | #0000CD |
| mediumorchid | ███████ mediumorchid | #BA55D3 |
| mediumpurple | ███████ mediumpurple | #9370DB |
| mediumseagreen | ███████ mediumseagreen | #3CB371 |
| mediumslateblue | ███████ mediumslateblue | #7B68EE |
| mediumspringgreen | ███████ mediumspringgreen | #00FA9A |
| mediumturquoise | ███████ mediumturquoise | #48D1CC |
| mediumvioletred | ███████ mediumvioletred | #C71585 |
| midnightblue | ███████ midnightblue | #191970 |
| mintcream | ███████ mintcream | #F5FFFA |
| mistyrose | ███████ mistyrose | #FFE4E1 |
| moccasin | ███████ moccasin | #FFE4B5 |
| navajowhite | ███████ navajowhite | #FFDEAD |
| navy | ███████ navy | #000080 |
| oldlace | ███████ oldlace | #FDF5E6 |
| olive | ███████ olive | #808000 |
| olivedrab | ███████ olivedrab | #6B8E23 |
| orange | ███████ orange | #FFA500 |
| orangered | ███████ orangered | #FF4500 |
| orchid | ███████ orchid | #DA70D6 |
| palegoldenrod | ███████ palegoldenrod | #EEE8AA |
| palegreen | ███████ palegreen | #98FB98 |
| paleturquoise | ███████ paleturquoise | #AFEEEE |
| palevioletred | ███████ palevioletred | #DB7093 |
| papayawhip | ███████ papayawhip | #FFEFD5 |
| peachpuff | ███████ peachpuff | #FFDAB9 |
| peru | ███████ peru | #CD853F |
| pink | ███████ pink | #FFC0CB |
| plum | ███████ plum | #DDA0DD |
| powderblue | ███████ powderblue | #B0E0E6 |
| purple | ███████ purple | #800080 |
| red | ███████ red | #FF0000 |
| rosybrown | ███████ rosybrown | #BC8F8F |
| royalblue | ███████ royalblue | #4169E1 |
| saddlebrown | ███████ saddlebrown | #8B4513 |
| salmon | ███████ salmon | #FA8072 |
| sandybrown | ███████ sandybrown | #F4A460 |
| seagreen | ███████ seagreen | #2E8B57 |
| seashell | ███████ seashell | #FFF5EE |
| sienna | ███████ sienna | #A0522D |
| silver | ███████ silver | #C0C0C0 |
| skyblue | ███████ skyblue | #87CEEB |
| slateblue | ███████ slateblue | #6A5ACD |
| slategray | ███████ slategray | #708090 |
| snow | ███████ snow | #FFFAFA |
| springgreen | ███████ springgreen | #00FF7F |
| steelblue | ███████ steelblue | #4682B4 |
| tan | ███████ tan | #D2B48C |
| teal | ███████ teal | #008080 |
| thistle | ███████ thistle | #D8BFD8 |
| tomato | ███████ tomato | #FF6347 |
| turquoise | ███████ turquoise | #40E0D0 |
| violet | ███████ violet | #EE82EE |
| wheat | ███████ wheat | #F5DEB3 |
| white | ███████ white | #FFFFFF |
| whitesmoke | ███████ whitesmoke | #F5F5F5 |
| yellow | ███████ yellow | #FFFF00 |
| yellowgreen | ███████ yellowgreen | #9ACD32 |
Mots clefs pour la bibliothèque des MÉDIAS
Il est judicieux de mettre des mots clefs dans le titre des documents insérés dans la bibliothèque des médias. Cela permet de trouver rapidement ce que l'on cherche grâce à la fonction
Il est à remarquer qu'un mot-clef n'a pas besoin d'être complet pour fonctionner. Par exemple pour lister tous les Cliparts de la bibliothèque, on peut se contenter de taper clip (majuscules ou minuscules sont identiques pour le moteur de recherche).
Evidemment, plus la bibliothèque s'enflera, plus cette mesure sera appréciée ! Voici quelques mots-clefs, par ordre alphabétique- déjà utilisés:
affiche
Clipart
EN PAROISSE CETTE SEMAINE
Icone
Logo
messe
MO (sous-entendu: Mode Opératoire)
Peinture
statue
Il faut éviter des titres sans indication de sujet, du type numéro (225, 115…) ou trop vague (XTS,…). Quelques semaines après leurs introductions dans la bibliothèque, l'auteur aura oublié la dénomination ou le code, et personne d'autre n'en sera l'existence car d'autres médias seront venu le noyer dans l'ensemble.
A tout moment, un média introduit dans la bibliothèque, peut changer de nom; même s'il est utilisé dans un article ou une page. Le programme construisant, pour le Web, la page (ou l'article) code en interne le média. Le nom donné, seul apparent, n'est qu'un nom de confort pour la recherche (et la mémoire) des rédacteurs.
Ce qui explique d'ailleurs l'astuce indiquée dans le paragraphe « Rédaction de la feuille paroissiale », pour faciliter le mode opératoire…
Ce codage interne permet aussi de mettre deux ou plusieurs documents avec un même titre, bien que cela ne soit pas du tout judicieux!
Les puces, pour mettre en évidence des paragraphes
Il existe deux sortes de puces: les vrais puces (police d'icônes & glyphs de WordPress) et les cliparts (petits dessins ou symboles prêt à l’emploi, généralement sous le format JPEG, GIF ou PNG …Cf. infra les explications de ces formats d'images) qui servent de puces.
Voici quelques puces utilisables dans le corps d'un texte où il y a énumération. Il en existe d'autres: en fait certains caractères de la police WINGDINGS, sous WORDPRESS, peuvent être mise sous forme de puce. Comme toute police, chaque caractère peut prendre une des couleurs parmi les 16 millions de couleurs disponibles. Sur les exemples ci-dessous, le caractère lisible en code,qui engendre la puce, est en rouge gras afin de mieux le situer dans la ligne de programmation. A coté, ladite ligne de programme qui permet de l'obtenir. La couleur de la puce a été mise au jugé…
v <p style= »text-indent: -18.0pt; margin-left: 36.0pt »><font color= »#990000″><span style= »font-family: Wingdings »>v</span></font>
Ø <p style= »text-indent: -18.0pt; margin-left: 36.0pt »><font color: « #009900″><span style= »font-family: Wingdings »>Ø</span></font>
ü <p style= »text-indent: -18.0pt; margin-left: 36.0pt »><font color: « #0000ff »><span style= »font-family: Wingdings »>ü</span></font>
ð <p style= »text-indent: -18.0pt; margin-left: 36.0pt »><font color: « #9999ff »><span style= »font-family: Wingdings »>ð</span></font>
Ü <p style= »text-indent: -18.0pt; margin-left: 36.0pt »><font color: « #000000″><span style= »font-family: Wingdings »>Ü</span></font>
2) Les glyphs de WordPress
Les mises en couleurs de ces glyphes sont assez rétives. La seule façon rapide de modifier leur couleur, est de passer en mode « Texte »
3) Les cliparts
A l'inverse des polices d'icônes ou des glyphs, les cliparts ne peuvent pas changer de couleur, sauf si on les transforme -par exemple sous PHOTOSHOP- et qu'on les ajoute à la bibliothèque des médias.
Création d'un sommaire
Les pages internet d'explications sont en général fort longues, et un sommaire présentant le contenu de ces pages est bienvenue. Cela évite à l'internaute de s'égarer… ou lui permet de constater tout de suite que rien ne l'intéresse !!!
Le sommaire se doit d'être réactif, c'est à dire qu'il doit proposer tout de suite à l'internaute (en général pressé…) la partie dont il souhaite la lecture. Pour cela il faut créer un HYPERTEXTE. L'hypertexte est un média textuel contenant des liens (ou hyperliens) entre divers points dans des documents. L'hypertexte permet de naviguer à l'intérieur d'un même document ou d'un document à un autre.
Pour apprendre à créer des liens hypertextes, il est recommandé de travailler sur un brouillon nouvellement créé, et non de travailler sur un article (ou une page) qui fonctionne déjà correctement ! Si on veut s'éviter de taper exactement les lignes de programmation, on peut en effectuer un copier (en mode VISUEL) et un coller (en mode TEXTE) dans le brouillon de travail….
Explications en 6 phases.
L'obtention d'un sommaire ne se fait qu'à partir de l'onglet « Texte » de WORDPRESS. Pour avoir le moins de manipulations perturbatrices à effectuer, il est judicieux de bâtir la totalité de son texte sans tenir compte du sommaire, mais en mettant en place titres & sous-titres dans le corps du document. Le sommaire ne sera construit qu'après satisfaction de ce contenu. Cette pratique évitera les aller/retour entre les onglets « Visuel » & « Texte », car ce dernier onglet est difficile à lire pour ceux qui ne pratiquent que très peu la programmation…
Un sommaire raisonnable comporte donc des titres (T) et des sous-titres (ST) de chapitres. Peuvent s'ajouter dans le corps du texte, si nécessaire, des paragraphes à mettre en évidence.
PHASE 1: Dans le corps du texte (Mode VISUEL), établissez vos titres (en prenant T3 dans le bandeau Paragraphe) et vos sous-titres (en prenant T4)
PHASE 2: création du corps du sommaire, sans les liens.
En restant dans l'onglet « VISUEL ».
- Créer le libellé « Sommaire de cet article » en tête de page ou sous la photo chargée d' « accrocher » l'internaute.
- Récupérer les titres et les sous-titres au fur et à mesure par des « copier », et les coller sous le libellé « Sommaire ». Cela donnera, d'un point de vue général:
Sommaire de cet article:
Mon titre 1 (T01)
Mon sous-titre 1.01 (ST1_01)
Mon sous-titre 1.02 (ST1_02)
Mon titre 2 (T02)
Mon sous-titre 2.01 (ST2_01)
Mon sous-titre 2.02 (ST2_02)
Les abréviations en bleu ne sont pas à mettre. Elles sont là pour signaler les noms que nous allons imposer au programme pour qu'il les reconnaissent ! L'avantage de repérer les titres et les sous-titres par des abréviations, c'est de nous permettre -à la relecture- de repérer simplement l'ordre de présentation du sommaire, évitant ainsi des désignations avec accent, sans accent, majuscule, minuscule …grandes sources d'erreurs et d'impatience !
PHASE 3: Création des liens dans le sommaire.
Passer à l'onglet « TEXTE ». Les couleurs sont artificielles, pour attirer l'attention, mais n'existe pas dans le mode « TEXTE »! Nous allons programmer en langage HTML les instructions qui modifierons un simple texte en HYPERTEXTE.
Prenons l'exemple du sommaire de la page « Au service de la paroisse ». Pour la démonstration, ici, en rouge les ordres permettant un sommaire interactif, en vert les ordres donnant le type de caractères selon les titres ou les sous-titres, en bleu le libellé qui apparait dans le sommaire, coté visuel. Il faut obtenir:
<center><em>Sommaire de cet article: </em></center>
<h3 style= »text-align: center; »><strong><a href= »#T01″>Les différentes activités paroissiales</a></strong></h3>
<h4 style= »text-align: center; »><a href= »#ST1_01″>La chorale</a></h4>
<h4 style= »text-align: center; »><a href= »#ST1_02″>L'entretien de l'église</a></h4>
<h4 style= »text-align: center; »><a href= »#ST1_03″>La décoration florale</a></h4>
<h4 style= »text-align: center; »><a href= »#ST1_04″>Ouverture & fermeture de l'église</a></h4>
<h3 style= »text-align: center; »><strong><a href= »#T02″>Les différents conseils autour du curé</a></strong> </h3>
<h4 style= »text-align: center; »><a href= »#ST2_01″>L'équipe d'animation pastorale</a></h4>
<h4 style= »text-align: center; »><a href= »#ST2_02″>Le conseil pastoral</a></h4>
<h4 style= »text-align: center; »><a href= »#ST2_03″>Le conseil économique</a></h4>
NB:
- La balise <em> avec sa fermeture </em> signifie: italique pour les caractères entre les deux.
- La balise <strong> avec sa fermeture </strong> signifie: gras pour les caractères entre les deux.
- La balise <center> avec sa fermeture </center> signifie: centrage du texte entre les deux.
- Un bon programmeur s'impose de fermer les balises dans l'ordre inverse de leur ouverture: la première balise ouverte devient donc la dernière balise de fermeture.
PHASE 4: Vérification du fonctionnement des balises hypertextes.
En mode « Aperçu« , lorsque l'on passe le pointeur de la souris sur chaque libellé de titre et de sous-titre, on doit avoir une icône « petite main pointant l'index » comme ceci:
Ce n'est pas la peine d'aller plus avant dans le mode opératoire si on n'obtient pas ce résultat.
PHASE 5: Création des points de chute pour les liens créés.
Repasser à l'onglet « TEXTE ». Repérons dans le corps de l'article (ou de la page) les TITRES (indiqués par <h3… ) & les SOUS-TITRES (indiqués par <h4… ) en début de texte, et introduisons les balises qui réaliseront les liens à l'intérieur de notre prose…
CAS de <h3 (Premier titre ):
Pour obtenir
il faut avoir, au bon emplacement, la ligne de programme
<h3><a name= »T01″></a><strong> Les différentes activités paroissiales</strong></h3>
Nous aurons donc, au bon emplacement dans le corps du texte, pour le deuxième titre:
<h3><a name= »T02″></a><strong> Les différents conseils autour du curé</strong></h3>
CAS de <h4 (Premier sous-titre ):
Pour obtenir ce sous-titre, avec la puce et le décalage du sous-titre par rapport au bord de page
il faut avoir, au bon emplacement, la ligne complète de programme
<p style= »padding-left: 30px; »><strong><img alt= »Clipart flo01i » src= »https://paroissesdelacrau.aixarles.org/wp-content/uploads/2014/02/flo01i.gif » width= »10″ height= »10″ /><a name= »ST1_01″></a><em>Chorale paroissiale</em></p>
Le décalage de 30 pixels par rapport au bord de page est obtenu par l'instruction <p style= »padding-left: 30px; »>…</p>
La puce est obtenu par l'instruction <img alt= »Clipart flo01i » src …. … height= »10″ />
Nous avons déjà vu plus haut que d'autres puces peuvent être obtenues avec des moyens différents , mais aussi avec des avantages et des inconvénients divers!
Chaque sous-titre doit donc posséder sa ligne de programme adaptée ( ST1_02…ST2_01…)
PHASE 6: Vérification du bon emplacement des balises de chute des liens
En mode « VISUEL« , on doit avoir, aux emplacement des titres et des sous-titres une « petite ancre », symbole du point de chute du lien hypertexte.
Si ce résultat n'est pas obtenu, il ne reste plus qu'à réfléchir au problème pour obtenir le bon résultat…
NB: De la même façon qu'un sommaire a été créé, on peut initier des liens hypertextes à l'intérieur d'un même article, par exemple pour renvoyer le lecteur à des annotations.
– Réduction des espacements de lignes
En utilisant la fonction « indenter » (indentation en français) du bandeau supérieur de travail, donne ceci:
Paragraphe 1:
Ceci est un essai pour montrer l'espacement de 2 lignes sous ces fonctions…
Ma deuxième ligne.
Paragraphe 2
Quelques instructions sur les images
* I) Les formats
Il existe 12 formats courants de fichiers images : BMP; DXF; EPS; GIF; Jpeg (ou jpg), Photo CD, PCX, PICT, PS, TIFF, WPG, PNG.
Sur ces 12 formats, 3 sont adaptés à nos besoins internet. Avantages, caractéristiques & inconvénients :
GIF. AVANTAGES: les fichiers sont relativement petits, utilisant un système 8 bits pour enregistrer la couleur (256 couleurs – ou nuances d'une même couleur- maximum: résolution tonale petite), maximisant encore plus la compression et réduisant la taille des fichiers. Convient très bien pour les dessins, car possède une fonction de transparence qui permet d'éviter des contours rectangulaires ou carrés sur les dessins à géométrie irrégulière. INCONVENIENTS: ne convient pas pour les grandes photos très colorées, car elles deviennent alors ternes.
JPEG (ou JPG). AVANTAGES: Les images JPEG sont des images de 24 bits. C'est-à dire qu'elles peuvent afficher un spectre de 16 millions de couleurs. C'est la meilleure qualité d'images disponible. Par contre, si la carte graphique de votre ordinateur est ajustée à 256 couleurs ou ne peut afficher plus de 256 couleurs, les images JPEG auront moins bonne mine que les images en format « GIF », qui sont pourtant des images en 8 bits (256 couleurs). Il existe plusieurs niveau de qualité. Les qualités les meilleures sont les plus gourmandes en taille d'enregistrement, mais elles permettent d'obtenir de grands formats d'images de hautes définitions. Plus la qualité baisse, plus l'agrandissement de l'image en souffre, mais plus petit devient le fichier. INCONVENIENTS: le fichier devient vite très gros, surtout si la définition est très haute. Une définition en 800 x 600 qualité 7 et résolution 72 (ou 75) pixels/pouce est un bon compromis entre qualité et lourdeur de l'image. Si l'image n'est pas régulière (carré ou rectangulaire), la fonction transparence n'existant pas, il y a alors création d'une bordure séparant la feuille écrite et la photo. Si le fond de page est blanc, cette bordure ne se voit pas; si le fond de la page est coloré, la bordure apparait. Pour la faire disparaitre, il faut travailler la photo (sous Photoshop par exemple) pour donner à la bordure la même teinte que le fond de page sur lequel la photo sera plaquée.
PNG. AVANTAGES: Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé pour remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un brevet. Le PNG est un format non destructeur spécialement adapté pour publier des images simples comprenant des aplats de couleurs. Il est particulièrement approprié lorsqu’il s’agit d’enregistrer des images synthétiques destinées au Web comme des graphiques, des icônes, des images représentant du texte (bonne conservation de la lisibilité), ou des images avec des dégradés. Le PNG surpasse régulièrement le format GIF en ce qui concerne la réduction de la taille des fichiers (avec une palette de couleurs bien choisie) ou la qualité (puisqu’il n’est pas limité à 256 couleurs). Il possède la fonction transparence, utile pour les photos à contours irréguliers. INCONVENIENTS: Les caractéristiques de PNG lui permettent d’enregistrer des photographies sans perte de données, mais au détriment -s'il n'y a pas le choix d'une palette de couleurs- de la taille du fichier qui reste la plupart du temps très supérieure à celle de formats spécifiques aux photographies comme JPEG. Le fichier peut atteindre jusqu'à plus de 2 fois la taille pour la même photo en JPG.
* II) La taille optimum
Pour le Web, la taille optimum des images est 800 x 600
* III) Redimensionnement apparent d'une image de la bibliothèque
Création d'un diaporama
La création d'un diaporama sous WordPress commence par un clic sur le bandeau gauche comme ci-dessous
 |
Puis « Create New Slider ». En français: « Créer un nouveau diaporama » |
A partie de là, nous avons accès aux généralités qui gouverneront notre nouveau diaporama. Les demandes sont à remplir avec soin. Des réponses données dépendront les résultats de fonctionnement du diaporama. Nous allons donc analyser les différentes rubriques proposées par le logiciel pour diaporama de WordPress.
* I) Diaporama classique sans annotation des diapositives
Première rubrique nommée New Slider.
 |
 |
Les autres rubriques, par ordre de demande du logiciel:
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 Clic sur ce bouton pour enregistrer notre nouveau diaporama |
||
Ce diaporama apparait alors dans la liste des diaporamas utilisables, bien que pour l'instant aucune diapositive ne soit choisie. Nous retrouvons le Slider Title & le Slider Alias. Désormais nous allons pouvoir entrer nos diapositives grâce au bouton indiqué
Il est alors simple de constituer son diaporama
Astuce pour se faciliter la vie:
Avant d'incorporer les photographies, il est judicieux de les choisir dans la bibliothèque des MEDIAS, et de les nommer par un mot clef commun suivi d'un numéro qui sera l'ordre dans lequel elles passeront sur le diaporama. Les appels se feront en se servant du mot clef; sans cela, on sera toujours à la recherche de la bonne image, qui ne sera pas forcément dans le bon ordre, d'où une grande perte de temps !!
Si l'ordre des diapos ne correspond plus au souhait du rédacteur, il suffit de présenter le pointeur de la souris à droite du rectangle des slides (en français: « diapositives »). Ce pointeur prend une forme caractéristique. En laissant appuyé son doigt sur le bouton gauche de la souris, on peut déplacer la diapo au bon endroit en lâchant ce bouton : clic sur bouton indiqué par l'encart A de la figure ci-dessous.
– Ne reste plus alors qu'à régler les transitions entre chaque diapo, en les ouvrant les unes après les autres: clic sur bouton indiqué par l'encart B de la figure ci-dessus. Deux solutions raisonnables:
* Laisser le logiciel donner à chaque diapo une transition aléatoire. C'est l'option proposée par défaut. Il n'y aura donc qu'une rubrique à modifier: la durée de transition entre chaque diapo. Le choix par défaut est trop long (Transition Duration 300)
* Imposer à toutes les diapos une même transition que l'on va choisir et une même durée de transition (150 est une valeur raisonnable)
Quelle que soit la solution pour laquelle on opte, il faut, après un clic sur le bouton Edit Slide, remplir les conditions de la feuille proposée par le logiciel:
Les choix de transition sont nombreux. Ces transitions peuvent être différentes pour chaque diapositive…
Ne reste plus qu'à fixer la vitesse de transition entre chaque image, le choix est un peu plus bas sur la feuille proposée par WordPress:
Enfin proche de l'objectif de départ: insérer le diaporama au sein du reportage ! Pour cela, sur une ligne vierge de votre texte, faire un copier/coller du Slider Shortcode que le logiciel a donné (Cf. supra, la vue New Slider à l'emplacement numéro 3). Soit ici, pour les besoins de notre démonstration [*rev_slider FAM_01_2014*]. Attention, les deux asters « * » mis dans le Slider Shortcode, ne sont là que pour neutraliser le déroulement du diaporama. Dans la réalité d'une exécution de page, ils ne doivent pas y être; si je les ôte, vous ne verrez plus le code, mais le diaporama !!!
* II) Diaporama avec annotation de chaque diapositive
Les actions à exécuter sont les mêmes que précédemment, mais il faut continuer de remplir le bas de la feuille proposée par WordPress:
Par ces instructions, nous allons obtenir une image décentrée par rapport au diaporama, nous découvrant alors un emplacement à gauche. Emplacement qui va nous permettre d'implanter un texte explicatif de la diapositive.
– La musique
Exemple de ce que l'on peut faire en liant musique, partition et texte…
Livret de la Messe 02 02 2014
Chant: Tu fais ta demeure en nous Seigneur 
Semaine du Dimanche 02 02 2014
– Les spécificités détectées de WORDPRESS
L'éditeur de texte de WordPress ne donne pas un réel WYSIWYG (What you see is what you get); en français « ce que vous voyez est ce que vous obtenez ». Ce qui est censé être une interface utilisateur qui permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C'est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final.
Bien que simplifiant la vie des rédacteurs (car la programmation en langage compris par le Web demande à être longuement étudiée et évolue assez rapidement) et bien que proposant un confort de lecture aux internautes (par le biais d'une harmonisation de présentation des articles), nous buttons sur quelques inconvénients, levés lorsque l'on fait appel au bouton Aperçu .
Liste de quelques limitations de notre éditeur de texte:
* La position des images par rapport au texte n'est pas conforme à la réalité de la page Web
* Les tableaux (écrits directement en langage de programmation ou issu du logiciel interne à WordPress « TablePress ») n'occupent pas la place réelle qu'ils occuperont dans la page Web
* Les liens hypertextes ne sont pas directement actifs
