Personnaliser l'affichage des données issues de formulaires

Dans cette formation nous allons apprendre à coder pour pouvoir maitriser entièrement la structure et la mise en forme de vos données. Nous passerons du coté obscur de la force en prenant la main sur le rendu des fiches bazar mais ne vous inquiétez pas les langages que nous utiliserons sont très accessibles et nous les aborderons progressivement. En quelques sessions vous serez capable de rendre la présentation de vos données plus claire, plus lisible, plus professionelle.


Objectifs

- Repérer et analyser le code HTML généré par YesWiki - Apprendre à mettre en forme les éléments d'une page grâce au langage CSS
- Comprendre l'architecture de Yeswiki et en particulier du dossier de personnalisation 'custom'
- Créer un modèle personnalisé pour afficher des données issues d'un formulaire grâce au langage TWIG
- Produide une synthèse de données numéraires sous forme de graphe (en option)

Pré-requis :

- Bonne connaissance de YesWiki et maitrise de l'outil de conception de formulaires : Bazar
- Avoir accès au serveur hébergeant le code sources de son yeswiki (via un logiciel FTP type
FileZilla)

Modalités pédagogiques

4 sessions de formation en visio d'une durée de 3h répartis en 45 minutes d'apport théorique et 1h30 d'exercices pratiques et 45 min de questions/réponses
Formation action - les exercices pratiques seront adaptés aux projets des stagiaires

Accès illimité aux contenus pédagogiques

Les 2 dernières sessions sur les rendus de données numéraires sous forme de graphe sont optionnels.


Tarif

780€ TCC / stagiaire
Modules optionnels graphe : 390€TTC

Organisme de formation QUALIOPI
Prise en charge par les OPCO

Nombre de stagiaire maximum : 6

Programme de formation

Session 1

Les dessous d'une page YesWiki

Découverte du code HTML - CSS - sur une page simple Les langages HTML et CSS invisibles à l'édition d'une page et pourtant ces standards du web sont la base pour gérer l'affichage de votre wiki
Graphisme -personnalisation des couleurs
mieux comprendre ce qui relève du style de base et ce qui peut être personnalisé à partir d'une galerie d'exemples

Particularité d'une fiche bazar

Yeswiki vous permet de créer vos propres bases de données, découvrez comment sont stockées les données et comment vous pouvez modifier le rendu d'une fiche Creer un premier template TWIG en lien avec les données bazar
Exercice pratique sur des formulaires de base type Actualités - Agenda - Ressource

Session 2

Créer un template de liste

Panorama des templates existants Démonstration des possibilités offertes par les templates de base Yeswiki : exploration des options avancées
et identification de leurs contraintes et limites

Exercice pratique 1 personnalisation de quelques propriétés css

Exercice pratique 2 écriture d'un template pour un rendu type newsletter



Session 3

S'approprier les concepts sur son propre projet

Les participants proposent un 1er terrain d'expérimentation en fonction de leur contexte professionnel.

Exercice pratique suivi d’un temps d'échanges sur des points de blocages

Nous alimenterons une base de connaissance commune afin de partager les astuces techniques mises en oeuvre pour répondre aux différentes problématiques rencontrées.

Session 4

Etudes de cas à partir d'exemples plus complexes

Analyser le code permettant de gérer l’affichage de fiches liées, affichages conditionnels ou des onglets afin de savoir adapter une brique de code à un besoin précis

Exercice : évaluer la lisibilité, l’accessibilité, l’adaptation à la taille de l’écran, l’impact environnemental

A partir d’une grille de critères, évaluation croisée des templates produits afin de proposer des pistes d’amélioration

Sessions 5 et 6

Présentation sous forme de graphe

Toile d'araignée, histogramme, vecteurs, il est parfois utile de transformer des chiffres en représentation graphique Nous utiliserons la bibliothèque vega pour produire dynamiquement les graphes recherchés.