Éléments <présentation> de mise en page: affichage de blocs et/ou d'images en carrousel (diaporama)

Utilisation d'un bloc dans une présentation

Une présentation peut contenir n'importe quel type de bloc (<bloc>, <toc>, <index>, <nuage>...).

Ces blocs peuvent posséder les attributs communs à tous les blocs: style, bords et ses variantes ainsi que l'attribut ajuster-hauteur (le bloc sera ajusté à la taille du bloc ou de l'image de hauteur maximale). Ils peuvent également utiliser un élément <titre>.

Dans l'exemple qui suit, on utilise des blocs plus complexes (qui contiennent plusieurs paragraphes, des titres, des images...) possédant chacun leur style class1, ainsi qu'un style class6 pour l'ensemble de la présentation. On a également utilisé l'attribut ajuster-hauteur="oui" dans les trois blocs, afin qu'ils aient exactement la même hauteur.

<présentation délai-transition="8" effet-transition="gauche1TrèsLente" bords="arrondis" style="class6">
   <bloc style="class1" bords="arrondis" ajuster-hauteur="oui">
      <titre2 toc="non">Lorem ipsum</titre2>
      <image file="img/ibmm2.jpg" position="droite-texte"/>
      <p><a href="...">Lorem ipsum</a> dolor sit amet, ...</p>
   </bloc>   
   <bloc style="class1" bords="arrondis" ajuster-hauteur="oui">
      <image file="img/ibmm1.jpg" position="gauche-texte"/>
      <titre2>Lorem ipsum - suite</titre2>
      <p>Sed ut perspiciatis unde omnis iste ...</p>
   </bloc>
   <bloc style="class1" bords="arrondis" ajuster-hauteur="oui">
      <titre2>Traduction anglaise</titre2>
      <p>But I must explain to you how all this ...</p>
   </bloc>
</présentation>

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.

Lorem ipsum - suite

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.

Traduction anglaise

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Utilisation d'une <image> dans une présentation

Pour afficher des images dans une présentation, il suffit d'utiliser des éléments <image> au sein de l'élément <présentation>.

Tous les attributs et les sous-éléments que l'on peut placer dans un élément <image> restent d'appliciation ( file, position, espace-haut, <légende>, <crédit>, <grande-image>, <lien>, <map>...).

L'exemple qui suit utilise des images possèdant chacune un lien hypertexte, grâce à une élément <lien> (voir <image>). En cliquant sur une des trois images au moment où elle est affichée dans la présentation, vous serez dirigé vers le site donné par le lien en question.

Utilisation d'un répertoire d'<images> dans une présentation

On peut également afficher l'ensemble des images qui se trouvent dans un répertoire, grâce à un élément <images> (toujours placé dans l'élément <présentation>).

Cet élément <images> doit avoir un attribut répertoire qui mentionne le répertoire en question. Ce répertoire doit être l'un des répertoires lié au projet ou l'un de ses sous-répertoires.

Certains attributs d'une image classique peuvent également être utilisés. Ils seront simplement appliqués à toutes les images qui seront trouvées dans le répertoire. Ces attributs sont: position, espace-gauche, espace-droite, espace-haut et espace-bas (voir <image> pour plus d'info).

C'est également le cas des éléments suivants: <légende>, <crédit> et <lien> (voir <image> pour plus d'info).

Légende des images

Si vous utilisez un élément <légende> dans l'élément <images> , une légende sera affichée en dessous de chaque image. Si cette légende contient les caractères suivants: {fichier}, {nom}, {num} ou {total}, ceux-ci seront respectivement remplacés par le nom du fichier de l'image (tel quel, y compris l'extension), par le nom de l'image (le nom du fichier, dans lequel on supprime l'extension et où les '-' et '_' sont remplacés par des espaces), le numéro de l'image (dans l'ordre de l'affichage) et le nombre total d'images trouvées.

Ordre des images

L'élément <images> peut également utiliser un attribut ordre (comme c'est le cas de l'exemple précédent) afin de trier les images avant de les afficher.

Cet attribut peut valoir:

• ordre="alphabétique": tri par ordre alphabétique des noms de fichier;

• ordre="alphabétique-inverse: tri par ordre alphabétique inversé des noms de fichier;

• ordre="numérique: tri par ordre numérique sur base du dernier nombre extrait du nom fichier (img001.gif, img002.gif...);

• ordre="numérique-inverse: tri par ordre numérique inversé, sur base du dernier nombre extrait du nom fichier (img005.gif, img004.gif...).

Petites images (vignettes) et grandes images

L'utilisation de l'attribut petites-images permet de choisir les images à afficher: seules celles dont le nom correspond à la valeur de cet attribut seront affichées. Cette valeur ne peut contenir que des lettres (minuscules ou majuscules), des chiffres, des '-' et des '_', ainsi qu'une extension (.jpg, .gif ou .png).

Il doit obligatoirement contenir un caractère * (caractère wildcard) pour indiquer la partie variable du nom des fichiers. Par exemple: tn*.jpg

Si vous utilisez cet attribut, vous pouvez également lui adjoindre l'attribut grandes-images. Il permet de faire référence à des images plus grandes, qui apparaîtront lorsqu'on clique sur l'image en petite dimension. La valeur de cet attribut se construit comme ci-dessus. Par exemple: img*.jpg

Ces grandes images seront affichée comme un élément <grande-image> au sein de <image>. Vous devez bien sûr vous arranger pour que chaque petite image possède son équivalent en grande image. Par exemple: tn001.jpg avec img001.jpg, tn002.jpg avec img002.jpg...

Délai entre l'affichage de deux blocs ou images successifs

Par défaut, le délai d'attente entre le moment où une image ou un bloc est affiché et le démarrage de la transition qui permet d'afficher l'image ou le bloc suivant est fixé à 4 secondes.

On peut changer cela grâce à l'attribut délai-transition. Cet attribut doit contenir une valeur entière positive, exprimée en secondes (ou les valeurs "manuel" et "non", comme expliqué ci-dessous).

Délai "manuel" pour supprimer la transition automatique

Si cet attribut est égal à délai-présentation="manuel" ou à délai-présentation="0", il n'y aura pas de passage automatique d'un bloc ou d'une image à l'autre (si rien ne se passe, le bloc ou l'image affichée restera en permanence).

Dans ce cas, il est nécessaire de prévoir un moyen manuel de passage d'un bloc ou d'une image à l'autre, soit via des onglets, soit via des actions (via un lien hypertexte, par exemple). Par défaut, des onglets de type "disque" seront utilisés. Si vous ne voulez pas d'onglets, ajoutez l'attribut onglets="non".

Type de transition d'un bloc ou d'une image à l'autre

Style d'une présentation

En voici quelques exemples:

Onglets placés au dessus des blocs

Le type d'onglets à utiliser est donné par la valeur de l'attribut onglets. La manière dont ces onglets vont s'afficher vont dépendre de ce type, mais également du style qui est imposé à la présentation (qui est considéré comme un bloc) et d'autres facteurs comme le choix de coins arrondis ou carrés, la présence d'un titre, la couleur de fond, etc.

Utiliser du texte en guise d'onglet

On peut se servir des onglets pour introduire une nouvelle manière de naviguer au sein même d'une page. L'exemple qui suit en est une bonne illustration.

<présentation délai-transition="manuel" effet-transition="immédiate" onglets="accolés" style="colorBar4" bords="arrondis">
   <bloc label="exemple">
      <p>...</p>
      <p>...</p>
   </bloc>
   <bloc label="code de cet exemple">
      <exemple titre="" style="transparent">...</exemple>
   </bloc>
   <bloc label="table des matières">
      <toc>...</toc>
   </bloc>
</présentation>

Ordre utilisé pour l'affichage

Par défaut, les blocs et les images seront affichés dans l'ordre de la liste mentionnée dans l'élément <présentation>, en commençant par le premier bloc ou la première image. Vous pouvez changer cela avec les attributs ordre et onglet-initial.

Ordre de l'affichage

L'attribut ordre="aléatoire" fera en sorte que les blocs et les images seront affichés dans un ordre aléatoire (cet ordre sera établi au moment de l'affichage de la page, et restera le même par la suite).

Vous pouvez également utiliser l'attribut ordre="liste". Cela aura le même effet que la valeur par défaut (si vous ne mentionnez pas cet attribut).

Image ou bloc initial

L'attribut onglet-initial="xxx" permet de désigner le premier bloc ou la première image qui sera initialement affiché. Ce bloc ou cette image est désigné par la valeur xxx, qui peut être:

• soit une valeur numérique (supérieure ou égale à 1) désignant quelle image ou quel bloc afficher en premier lieu (le 1 désignant la première image ou le premier bloc);

• soit la valeur d'une ancre que vous placez sur l'image ou le bloc à afficher en premier lieu;

• soit la valeur "aléatoire" pour indiquez que l'image ou le bloc à afficher en premier lieu doit être choisi aléatoirement.

Contrôler la présentation via des actions

Les actions permettent de contrôler l'affichage d'une présentation via, par exemple, un lien hypertexte. Ces actions peuvent également être déclenchées à intervalles régulier via un élément <interaction> ou provenir d'une autre présentation (voir ci-après).

Elles permettent notamment de synchroniser l'affichage des images ou des blocs d'une présentation avec d'autres éléments au sein de la page (avec des blocs qui apparaissent et disparaissent en fonction du déroulement de la présentation, avec le contenu d'autres présentations, etc.)

Actions pour afficher une image ou un bloc particulier au sein d'une présentation

Les deux actions présentation:xxxx et présentation:yyyy:xxxx permettent d'afficher une image ou un bloc particulier désigné par xxxx au sein d'une présentation.

La valeur xxxx peut être:

• une valeur numérique (supérieure ou égale à 1) désignant la position de l'image ou du bloc à afficher (le 1 désignant la première image ou le premier bloc);

• la valeur d'une ancre placée sur l'image ou le bloc à afficher.

Si vous utilisez présentation:xxx, on recherchera dans toutes les présentations la première image ou le premier bloc correspondant à xxxx. Si vous utilisez présentation:yyyy:xxxx on recherchera uniquement dans la présentation possédant une ancre égale à yyyy.

Actions pour passer à l'image ou au bloc suivant/précédent

Les actions présentation:xxxx et présentation:yyyy:xxxx ci-dessus permettent également le passage à l'image ou au bloc suivant/précédent, en remplaçant xxxx par suivant ou précédent.

Actions pour suspendre ou redémarrer l'animation

Si votre présentation n'est pas configuré avec un délai de transition manuel, le passage d'une image ou d'un bloc à l'autre se fait de manière automatique avec un délai fixe exprimé en secondes. Dans ce cas, vous pouvez utiliser les deux actions suspendre:xxxx et redémarrer:xxxx, où xxxx est l'ancre de votre présentation, pour suspendre et par la suite redémarrer le défilement des images ou des blocs.

Déclencher des actions lors d'une transition

Chaque transition d'un bloc à l'autre peut déclencher une ou plusieurs actions. Ces actions pourront, par exemple, servir à synchroniser la transition avec l'affichage d'autres éléments dans la page (des blocs, d'autres présentations, etc.).

Ces actions sont définies par un ou plusieurs éléments <actions> placés dans l'élément <présentation> (ces éléments <actions> sont similaires à ceux utilisés dans une <interaction>). Plusieurs actions peuvent être définies dans le même élément <actions>, séparés par des virgules ou des retours à la ligne.

Quand déclencher ces actions

Chaque élément <actions> peut posséder un attribut exécuter qui va indiquer quand déclencher les actions:

• exécuter="démarrage" pour déclencher les actions une seule fois, au moment de l'affichage de la page lorsque la présentation est prête à fonctionner;

• exécuter="avant" pour déclencher les actions juste avant le début d'une transition;

• exécuter="après" pour déclencher les actions juste après la fin d'une transition (le type de transition choisi peut en effet introduire un délai pour passer d'un bloc ou d'une image à l'autre).

Si vous ne précisez pas cet attribut, la valeur "avant" sera utilisée par défaut.

Dans quelles conditions déclencher les actions

Si vous ne précisez rien, les actions seront déclenchées à chaque transition, quels que soient le bloc ou l'image d'origine ou le bloc ou l'image de destination lors de cette transistion.

Il peut être utile de déclencher des actions uniquement pour certains blocs ou certaines images.

Vous pouvez réaliser cela en ajoutant à vos éléments <actions> un attribut de et/ou un attribut vers. Ces attributs doivent mentionner une liste de blocs ou d'images de la présentation auxquelles ces actions vont s'appliquer.

• de="xxxx": si le bloc ou l'image qui est affichée (et qui va être remplacé par un autre bloc ou une autre image) est mentionné dans l'attribut de, alors les actions seront exécutées. Si ce n'est pas le cas, les actions ne seront pas exécutées. Si l'attribut de n'est pas mentionné, les actions s'appliqueront à tous les blocs et/ou images d'origine;

• vers="xxxx": si le prochain bloc ou la prochaine image à afficher est mentionné dans l'attribut vers, alors les actions seront exécutées. Si ce n'est pas le cas, les actions ne seront pas exécutées. Si l'attribut vers n'est pas mentionné, les actions s'appliqueront à tous les blocs et/ou images de destination.

Les blocs ou les images sont mentionnées dans la liste via leur position (à partir de 1) ou leur ancre, séparés par des espaces ("1 3 5", "img1 img2 img3").

Cet exemple utilise deux présentations côte à côte. La présentation de droite (qui ne possède pas de transition automatique, grâce délai-transition="manuel") est synchronisée avec celle de gauche (qui elle change toute les 4 secondes). Ce sont des actions placées dans la présentation de gauche, qui déclenche l'affichage d'une image particulière dans la présentation de droite: à chaque changement d'une image, celle qui était placée à gauche est placée à droite à l'aide d'actions en donnant l'illusion que c'est l'image de gauche qui se déplace sur celle de droite. Cette illusion est obtenue en utilisant des effets de transition différents (droite3TrèsLente et droite2TrèsLente). Comme les actions à exécuter sont différentes pour chaque image, on utilisera trois éléments <actions>. L'attribut de permet de ne déclencher les actions que pour une des trois images de gauche.
	suspendre l'animation redémarrer l'animation

Ces actions sont (pour la première image):

• délai:100, pour décaler légèrement dans le temps l'affichage de l'image de droite, de 100ms, afin d'accentuer l'illusion que l'image de la première présentation se déplace sur l'image de la deuxième présentation;

• présentation:pr2:img1, pour afficher dans la présentation pr2 (celle de droite) l'image dont l'ancre est égale à img1;

...							
<présentation ancre="pr1" effet-transition="droite3TrèsLente" délai-transition="4" onglets="disques" ajuster-hauteur="oui">
   <image ancre="img1" file="img/dhc-01.jpg" position="centre"/>
   <image ancre="img2" file="img/dhc-02.jpg" position="centre"/>
   <image ancre="img3" file="img/dhc-03.jpg" position="centre"/>
							
   <actions de="img1" exécuter="avant">délai:100,présentation:pr2:img1</actions>
   <actions de="img2" exécuter="avant">délai:100,présentation:pr2:img2</actions>
   <actions de="img3" exécuter="avant">délai:100,présentation:pr2:img3</actions>
</présentation>							
...
<présentation ancre="pr2" effet-transition="droite2TrèsLente" délai-transition="manuel" onglets="non" ajuster-hauteur="oui">
   <image ancre="img1" file="img/dhc-01.jpg" position="centre"/>
   <image ancre="img2" file="img/dhc-02.jpg" position="centre"/>
   <image ancre="img3" file="img/dhc-03.jpg" position="centre"/>
   <actions exécuter="démarrage">présentation:pr2:img3</actions>
</présentation>							
...
<p alignement="centre">
   <section options="!op1"><a cible="suspendre:pr1,activer:op1">suspendre l'animation</a></section>
   <section options="op1"><a cible="redémarrer:pr1,désactiver:op1">redémarrer l'animation</a></section>
</p>						
							
			

Dans la deuxième présentation de cet exemple, on a utilisé une action déclenchée lors du chargement de la page (exécuter="démarrage") afin de démarrer la présentation avec la dernière image. A la place, on aurait pu tout simplement utiliser l'attribut onglet-initial="3" ou onglet-initial="img3" pour obtenir le même résultat.