Création d'un skin multi modèles accessible et facilement adaptable

Rencontres Scenari, Toulouse juin 2024

Benjamin Hourdouillie, Franck Rouzé

Plan

  • Contexte

  • Constat

  • Le projet « Skin Multi modèle accessible»

  • Démonstration

Contexte

  • Utilisation d'un serveur Scenari avec dépôt en v5.x personnalisé

    regroupement d'ateliers antérieurement répartis sur 3 serveurs Scenari v4.2 => arrivée tardive sous SC 5.0

  • Usage massif de Scenari (volumétrie, nombre de modèles, extensions, skins, d'ateliers et d'ateliers dérivés etc.)

    900 000 items / 110 Go / 280 ateliers / 15 modèles dont fr/en / 5 extensions / 22 skins / 600 comptes

    des modèles, extensions et skins « maison »

  • Besoin de basculer en v6.x

Constat

  • La montée de version nécessite la mise à jour de tous les packs installés

  • Spécificité du serveur Lillois

  • Accompagnement au changement auprès des utilisateurs

  • Disponibilité technique réduite

=> les mises à jour ne suivent pas le rythme de celles de Scenari

Volonté de nous donner les moyens d'être plus efficace

Le projet « Skin Multi modèle accessible»

Utiliser la charte « Université de Lille »

Particularité de la charte ULille

  • Charte conçue sous forme d'un kit (ULK) pour l'ensemble des sites de l'université (réutilisabilité) :

    variables CSS, SVG, font, font icon

  • Liberté de choisir entre une douzaine de thèmes colorimétriques différents

  • Prise en charge de l'accessibilité numérique : police, dys, contraste des couleurs, thème sombre

charte ULille

Choix parmi une douzaine de thèmes de couleurs
Choix parmi une douzaine de thèmes de couleurs
Récapitulatif des thèmes de la charte ULille
Récapitulatif des thèmes de la charte ULille
Thème « orangette »
Thème « orangette »
choix mode sombre et police dys
choix mode sombre et police dys
Thème « menthe à l'eau » sombre et dys
Thème « menthe à l'eau » sombre et dys

Ajouter le paramétrage de l'accessibilité dans le skin Scenari

Petit rappel sur l'accessibilité avec Scenari

Le sujet impacte tous les acteurs de la production du contenu numérique. dans le cadre de Scenari ça concerne :

  • L'équipe de développeurs

  • Les modélisateurs

  • Le responsable des feuilles de style

  • Les auteurs de contenu

  • Existence dans les habillages ULille pour Opale et Dokiel de fonctionnalités améliorant l'accessibilité

  • Reprise, externalisation et généralisation aux publications web des différents modèles

  • Etude de reprise de la partie thème DYS d'Opale en y intégrant les spécificités de celui en place afin de le généraliser.

Exploiter les possibilités de Styler v6

  • Création d'un seul jeu de skin pour plusieurs modèles

  • Trois méthodes de stylage selon le besoin (guidé, formulaire , avancé => choix du stylage avancé)

  • Importation unique pour tous jeux de skin des habillages d'origine des modèles => favorise la réutilisation

  • Remplacement des images d'origines par ceux du skin ULille

  • Ajout de fichiers CSS et JS au skin

  • Concaténation de bouts de JS et CSS aux fichiers existant dans l'important du skin d'origine

Travail spécifique sur les CSS

Objectif : reprendre des éléments des chartes existantes en SC5 pour surcharger l'habillage SC6

  • Utilisation des variables CSS de la charte ULille

  • Déclinaison en variable locale au modèle

Démonstration

Des questions ?

Liste des raccourcis clavier

Liste des fonctions de navigation et leurs raccourcis clavier correspondant :

  • Bloc Suivant : flèche droite, flèche bas, barre espace, page suivante, touche N
  • Bloc Précédent : flèche gauche, flèche haut, retour arrière, page précédente, touche P
  • Diapositive Suivante : touche T
  • Diapositive Précédente : touche S
  • Retour accueil : touche Début
  • Menu : touche M
  • Revenir à l'accueil : touche H
  • Fermer zoom : touche Échap.