Diaporama AccesSlide - Access42

Structure

Les diapos s'insèrent dans l'élément main avec des éléments section associés à une classe slide.

La première diapositive possède une classe complémentaire couv. La dernière, une classe end.

On peut imbriquer des section dans des section.

Exemple minimal de structure

<section class="slide">
 <h2>Titre de la diapo</h2>
 [contenu]
</section>

<section class="slide" aria-label="titre de la diapo">
 [contenu]
</section>

Masquer des éléments

Tous les éléments html d'une diapo peuvent être masqués via la classe Cmasque. Ils apparaîtront avec l'action « diapo suivante ».

Exemple : cette diapositive contient trois éléments masqués.

• un texte masqué ;
• un second texte masqué, un élément masqué en ligne.

Navigation

La barre de navigation contient successivement :

1. un bouton précédent ;
2. une liste de sélection pour atteindre une diapo par son index ;
3. un bouton suivant ;
4. un sommaire pour atteindre une diapo via son titre ;
5. l'index (n° de la diapo courante et total des diapos) ;
6. un bouton de configuration.

Navigation clavier

• Espace ; Flèche droite ; Clic Diapo suivante
• MAJ + Espace ; Flèche gauche Diapo précédente
• Début Première diapo
• Fin Dernière diapo
• ALT + 0 (zéro) Sommaire

Pour passer à la diapo suivante avec Jaws : ignorer l'appui sur la touche suivante (INSERT + 3), puis appuyer sur la barre Espace pour faire défiler le diaporama.

Avec NVDA, ignorer la touche suivante n'est pas nécessaire, la barre d'espace fonctionne.

Navigation avec une télécommande

Le diaporama se pilote avec une télécommande via les équivalents de touches Page suivante et Page précédente.

Effets

Les effets disponibles se paramètrent via le panneau de configuration.

Pour créer vos propres effets :

1. Créer une class, par exemple .mon-effet.
2. Dans le fichier AccesSlide.js, créer une entrée dans l'objet config (voir les instructions dans le fichier à la section Effects).
3. Dans le fichier de langue : créer une entrée pour l'étiquette de l'effet. Attention : l'entrée dans le fichier de langue doit avoir le même nom que dans l'objet config.

Le nouvel effet sera ajouté automatiquement à la liste des effets dans le panneau de configuration.

CSS

2 fichiers CSS sont nécessaires :

• css/style.css : propriétés générales du diaporama ;
• css/themes/default.css : thème du diaporama.

Thèmes

Plusieurs thèmes sont livrés avec AccesSlide dans le dossier css/themes :

• Thème par défaut
• Thème de Noël
• Thème sombre

<!-- Theme stylesheet -->
<link rel="stylesheet" href="css/themes/default.css" type="text/css" media="all" />

Post-processeur

Le fichier CSS est généré à l'aide du post-processeur Myth.

Les fichiers sources sont placés dans le dossier css/sources et dans css/sources/themes pour les thèmes

Les fichiers sont compilés dans :

• le dossier css/themes pour les thèmes ;
• le dossier css/ pour la mise en forme générale.

Tous les fichiers sont également proposés dans une version non minifiée pour vous permettre de modifier ou créer votre propre CSS sans passer par un post-processeur.

Automatisation avec Grunt

Une configuration minimale Grunt est à votre disposition également pour la compilation des CSS. Les 4 modules configurés dans Gruntfile.js :

• grunt-myth : pour compiler au format CSS ;
• grunt-contrib-cssmin : pour minifier le CSS ;
• grunt-combine-media-queries : pour regrouper les media queries ;
• grunt-contrib-watch.

Personnaliser l'interface

.icon-setting-sound:before{
	content: "\f028";
}

Tableaux

Images

On peut mettre des mignons chats,

mais aussi des chats qui font peur !

Titres

La hiérarchie débute avec <h1>, titre du diaporama.

Vous pouvez utiliser tous les niveaux de titre par la suite.

Un titre de niveau 2

Un titre de niveau 3

Un titre de niveau 4

Un titre de niveau 5

Un titre de niveau 6

Vue responsive

La mise en forme est réalisée pour s'adapter à la taille de la police et la taille de la fenêtre.

Adaptation accessibilité

Ces paramètres sont configurables via le panneau de configuration. Les paramètres sont persistants (utilisation de cookies ou de localStorage si possible). Un bouton Défaut permet de revenir à la configuration par défaut.

• N° de diapo Vocalise les numéros des diapos
• Textes masqués Émet un bip lorsqu'un texte masqué est affiché
• Diapo Émet un bip à l'affichage d'une diapo
• Diapo début Émet un bip lors de l'affichage de la première diapo
• Diapo fin Émet un bip lors de l'affichage de la dernière diapo
• Titre Vocalise le titre de la diapo courante
• Titre fenêtre Met à jour le titre de la fenêtre lors de l'affichage de la diapo courante
• Bouton suivant Donne le focus sur le bouton Suivant lors du chargement du diaporama
• Clic Désactive le clic pour aller à la diapo suivante

Bibliothèque des sons

Autres paramètres

• Sommaire : Choisir le comportement du sommaire (modal ou non-modal). Dans le cas d'un sommaire non-modal, les diapos sont redimensionnées.
• Mode plan : Affiche le diaporama en mode linéaire

Ces paramètres se configurent via le panneau configuration.

Impression

Une feuille print.css permet une mise en page lors de l'impression via le navigateur (Ctrl + p).

L'impression embarque certains des styles du thème choisi (propriété all du fichier CSS du thème).

Pour qu'un élément, ou une section entière, n'apparaisse pas lors de l'impression, ajoutez une classe noprint.

<section class="slide noprint">
 [contenu]
</section>

Javascript

Vous pouvez utiliser vos propres scripts dans la page html ou via le fichier slide.js

Le mode plan

Le mode plan vous permet d'afficher le diaporama sous la forme d'un contenu linéarisé, ce qui permet un travail plus rapide pour la vérification et la préparation des contenus.

Le mode plan s'active via le panneau de configuration. Des repères et le numéro des diapos indiquent le contenu de chaque diapo.

Le mode plan conserve les styles CSS des diapos, mais pas les effets.

Localisation

Les éléments de l'interface peuvent être traduits via un fichier de langue (dossier lang).

Pour utiliser un fichier de langue, modifiez la référence au fichier dans le head de la page. Par exemple, pour le fichier français :

<script type="text/javascript" src="lang/lang_fr.js"></script>

Produire un fichier de langue

1. Ouvrez le fichier de langue avec un éditeur de texte.
2. Modifiez les étiquettes label des boutons, les alternatives alt des images, les intitulés value des options de la liste des effets, les titres title de boutons ou de fenêtres et les messages help d'aide.
3. Enregistrez votre fichier de langue en utilisant le nom de fichier lang_[code de langue].js.