01 – Avant de commencer : Amélioration du design

Félicitations ! Vous avez terminé le Parcours 1 – Initiation et vous disposez désormais d’un tableau de bord entièrement fonctionnel.
Vous savez créer des requêtes SQL, construire des Datasources, réaliser différents composants et assembler l’ensemble dans une page de reporting BiBOARD.
Ce nouveau parcours a un objectif différent.
Nous allons apprendre à améliorer le rendu graphique de ce tableau de bord afin de le rendre plus moderne, plus lisible et plus agréable à utiliser, tout en conservant son fonctionnement.
L’objectif n’est donc plus de créer de nouveaux composants, mais d’améliorer ceux qui existent déjà.

Résultat final #

À la fin de ce parcours, le tableau de bord réalisé dans le parcours Initiation aura été entièrement modernisé.

Il bénéficiera notamment :

• d’un bandeau plus professionnel ;
• de KPI modernes réalisés en HTML ;
• de graphiques plus lisibles ;
• d’une meilleure organisation de la page ;
• d’une identité graphique homogène.

📷 Capture du tableau de bord final

(Insérer ici une capture d’écran du résultat final du parcours.)

Prérequis #

Ce parcours s’appuie directement sur le projet réalisé dans le Parcours 1 – Initiation.
Avant de commencer, assurez-vous de disposer du tableau de bord créé lors du parcours précédent.
Nous utiliserons ce projet comme base de travail pendant toute la formation.

Une nouvelle méthode de travail #

Contrairement aux parcours précédents, nous ne repartirons pas de zéro.
Afin de conserver une version de référence toujours fonctionnelle, nous travaillerons systématiquement à partir d’une copie des éléments que nous souhaitons améliorer.

Selon les besoins, nous pourrons être amenés à dupliquer :

• un tableau de bord ;
• une page de reporting ;
• une requête SQL ;
• une Datasource ;
• un composant.

Chaque élément créé dans ce parcours sera identifié grâce au préfixe DESIGN_.

Cette méthode présente plusieurs avantages :

• conserver le projet d’origine intact ;
• comparer facilement le rendu avant et après les modifications ;
• revenir en arrière si nécessaire ;
• reproduire une méthode de travail proche des projets réalisés en entreprise.

Notre démarche #

Dans les parcours précédents, nous construisions les composants selon la logique suivante :

SQL → Datasource → Composant

Dans ce parcours, nous adopterons une démarche différente.
Nous partirons d’un objectif graphique, puis nous adapterons les éléments techniques uniquement lorsque cela sera nécessaire.

Notre logique de travail sera donc la suivante :

Rendu souhaité → Composant → Datasource → SQL

Cette approche permet de répondre à un besoin concret avant de modifier les données qui alimentent le tableau de bord.

Convention de nommage #

Afin d’identifier facilement les nouveaux objets créés dans ce parcours, tous les éléments dédiés à l’amélioration du design utiliseront le préfixe DESIGN_.

Exemples :

Cette convention permettra de distinguer immédiatement les objets du parcours Initiation de ceux créés dans le cadre de l’amélioration du design.

Ce que vous allez apprendre #

Au fil des chapitres, vous apprendrez à :

• créer un bandeau plus professionnel ;
• concevoir des KPI modernes en HTML ;
• améliorer la présentation des graphiques ;
• mettre en valeur les tableaux de données ;
• harmoniser la mise en page ;
• construire des composants facilement réutilisables.

Chaque amélioration sera réalisée progressivement afin de comprendre les impacts sur les composants, les Datasources et, si nécessaire, les requêtes SQL.

Ce qu’il faut retenir #

À la fin de ce parcours, vous ne saurez pas uniquement créer un tableau de bord fonctionnel.
Vous serez également capable de lui donner une identité graphique professionnelle, de rendre les informations plus lisibles et d’améliorer l’expérience utilisateur, tout en appliquant une méthode de développement propre et facilement maintenable.