/ Conseils aux rédacteurs

Clipart humour 00

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é:

  1. Rédiger sous Word (doc ou docx) la feuille paroissiale et la sauvegarder sous le titre « EN PAROISSE »
  2. 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 »
  3. Détruire, dans la rubrique MEDIAS l'ancien fichier « EN PAROISSE.pdf »
  4. Ajouter, dans la rubrique MEDIAS le fichier récemment créé « EN PAROISSE.pdf »

ATTENTION !!:

Clipart panneau attentionA) 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:

  1. 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.
  2. 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.

Clipart MO 01Onglet « 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

MO MediasIl 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.

1) Police d'icônes

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 ».

  1. Créer le libellé « Sommaire de cet article » en tête de page ou sous la photo chargée d' « accrocher » l'internaute.
  2. 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 &amp; 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:

MO Explique 00

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

MO Explique 01il 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

MO Explique 02 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.

MO Explique 03

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é

MO Explique 16

Il est alors simple de constituer son diaporama

MO Explique 17Astuce 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:

MO Explique 19

Les choix de transition sont nombreux. Ces transitions peuvent être différentes pour chaque diapositive…

MO Explique 20Ne 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:

MO Explique 21

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:

MO Explique 22

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
Clipart-cul-de-lampe-05