[ ]

Démonstration Construction d’une présentation SPIP/S5

Ce texte est affiché en seconde page de votre diaporama.

Il est le contenu du chapo de votre article.

Ce chapo constitue une première présentation. En général le résumé de la présentation qui suit.

En l’occurrence pour cette présentation : la construction d’un diaporama à l’aide de l’outil S5.

La construction du diaporama

  • Chaque vue commence par un inter-titre ;
  • Le texte qui suit est relativement court. 4 à 6 lignes ;
  • Ce texte est constitué de paragraphes, d’une liste, d’une image...

La construction du diaporama

A éviter :

  • Commencer votre article par du texte au lieu d’un inter-titre ;
  • Terminer une liste par une ligne de texte (conflit avec les effets graphiques) ;
  • Les animations sonores. Ou peut-être à la fin de la présentation afin de réveiller ceux venus pour le cocktail.

SPIP : liste énumérative

Dans l’éditeur SPIP, l’emploi du tiret suivi de l’astérisque (-*) :

  • Cette liste respecte la norme HTML ;
    • Emploi des éléments UL et LI classiques ;
  • Parfaitement reconnue par les moteurs de recherche et lecteurs d’écrans.

Liste numérotée

Autre style de liste, construite à l’aide du tiret suivi de dièse (-#) :

  1. Liste dont les éléments sont numérotés ;
  2. Composée de quelques éléments ;
    1. Qui peuvent être imbriqués d’autres listes ;
    2. Du même type (faire des essais).

Une liste a-la-SPIP

Une liste SPIP est composée d’éléments identifiés par le seul usage du tiret en début de ligne (-) :
- Exemple : cette même ligne qui commence par un triangle.

  • Ce triangle en début de ligne est reconnu en tant qu’image par le lecteur d’écrans. La légende de l’image est lue au lieu de préciser que cette ligne est un élément de liste ;
  • -> Ne pas utiliser ce raccourci typographique.

Les extraits de code source

Exemple avec les balises PHP :

<?php
    echo('Hello World!');
?>

  • Léger problème de validation XHTML, le code HTML produit pour cet extrait ajoute les attributs style ;
  • -> Ajouter <meta http-equiv="Content-Style-Type" content="text/css" /> dans le head de votre page.

Les extraits de code source

Exemple avec les balises code :

<?php
        echo('Hello World!');
?>
  • Pas de colorisation syntaxique/sélective.

Les extraits de texte

Exemple avec les balises quote :

Portez ce vieux whisky au juge blond qui fume

Les tableaux

Le code SPIP (back-office) :

||Légende|Résumé||
| {{Nom}} | {{Date de naissance}} | {{Ville}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |

Les tableaux

Le résultat :

Légende
Nom Date de naissance Ville
Jacques 5/10/1970 Paris
Claire 12/2/1975 Belfort
Martin 1/31/1957 Nice
Marie 23/12/1948 Perpignan

Les images

Une image au format PNG :

PNG

  • Redimensionner la fenêtre redimensionne le texte, pas les images !

Commandes clavier disponibles accesskey

Quelques accesskey disponibles dans le code original de S5 :

Modification de slides.js

Le code Javascript utilisé sur ce site a été modifié :

  • Les accesskeys ont été supprimées ;
  • La gestion des notes a été désactivée ;
  • L’ordre des contrôleurs a été modifié (personnalisation par icônes).

Voir sur le site de l’auteur pour les codes d’origine (dernière page).

Références :