• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 20/11/2019

Réalisez la conception générale d'un pad musical

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les projets démarrent souvent sur la base de quelques mots suivis d'un croquis. Je vous propose de réaliser une petite interface qui reproduit le fonctionnement d’un pad musical.

Allons-y !

Le projet

À partir de l’écran d’accueil, nous affichons un écran où se trouvent 4 pads : en fait, 4 gros boutons à cliquer pour jouer le son qui y est associé. Pour associer un son à un bouton, il suffit de glisser-déposer ce son depuis une liste de samples située sur la gauche.

Une zone de contrôle est associée à chaque bouton. Dans cette zone de contrôle, il est possible de choisir de jouer le son en boucle et, dans ce cas, d’en choisir le tempo ; il est également possible de choisir le volume.

Une zone permet de visualiser les sons joués. Bien entendu, on entend les différents sons ! 

Un clic sur un bouton et on quitte l’interface.

Nous devinons que ce jeu illustre presque tous les chapitres précédents : un peu d'HTML, bien sûr, du CSS, du code JavaScript, des méthodes de dessin, d'animation et de l'interactivité souris...

Réalisons ensemble la conception de cette interface et abordons successivement les étapes suivantes.

Le cahier des charges fonctionnel :

  • la liste des écrans et leur contenu potentiel ;

  • la liste des règles et fonctionnalités.

Et la conception détaillée :

  • les données importantes ;

  • les éléments généraux ;

  • les spécifications détaillées, c'est-à-dire la façon dont l'affichage des écrans ainsi que les règles et fonctionnalités seront traduites du point de vue technique ;

  • l'architecture de fichiers.

Matériel requis
Matériel requis

Faites-le vraiment ! C'est ainsi que personnellement, la plupart du temps, je procède, pour de petits ou même de moyens projets.

Allons-y !

Conception générale sur un exemple

Commençons par établir la liste des écrans et leur contenu potentiel. Pourquoi potentiel ? Parce que ce contenu peut disparaître ou apparaître après une action utilisateur ou un temps donné.

Dans cette interface, imaginons trois écrans :

  • un écran d'accueil,

  • un écran avec l’interface proprement dite,

  • un écran de fin.

L'écran initial étant bien entendu l'écran d'accueil.

Représentons ces écrans par des rectangles. Il est utile de donner d'ores et déjà un nom à ces écrans, pourquoi pas en reprenant la notation CSS, ou jQuery qui permet de cibler un élément : #ecranAccueil, #ecranJeu, #ecranFin.

Ecrans fonctionnels
Écrans fonctionnels

Pour pouvoir préciser leur contenu et également les règles et fonctionnalités, il n'y a pas d'autre solution que de s'imaginer en train d’utiliser cette interface.

Commençons par l'écran d'accueil, puisque c'est le premier qui s'affiche à l'utilisateur.

Dans l'écran d'accueil, il y aura par exemple :

  • un titre ;

  • une image de l’écran d’interface ;

  • un bouton pour afficher cette interface ;

  • un pied de page.

Dans l'écran de jeu, il y aura :

  • la liste des samples ;

  • 4 zones de contrôle ;

  • le pad ;

  • la zone de visualisation du son qui est en train d’être joué ;

  • un bouton pour quitter cette interface et afficher l'écran de fin ;

  • un pied de page.

Dans l'écran de fin, il y aura tout simplement un texte de fin.

Reproduisons tout cela sur la feuille.

À nouveau, il peut être utile de donner un nom à ces éléments ou conteneurs, pourquoi pas en reprenant la notation CSS ou jQuery : #titre, #image, #boutonJeu, etc.

Voilà pour la liste des écrans et leur contenu potentiel. Il est important d'avoir bien identifié tout le contenu potentiel des écrans. À ce stade, vous avez sans doute déjà identifié quelques fonctionnalités.

Intéressons-nous à présent à la liste des règles et fonctionnalités.

La distinction opérée ici entre règles et fonctionnalités est importante :

  • une fonctionnalité est quelque chose de nature à changer l'aspect des écrans ou la valeur des variables JavaScript, et qui implique l'utilisateur (comme un clic sur un bouton qui permet de changer d'écran) ;

  • une règle est par ailleurs quelque chose de nature à changer l'aspect des écrans ou la valeur des variables JavaScript, mais qui se produit hors utilisateur et doit être testé en continu (comme dans ce jeu, le fait que l'on passe automatiquement à l'écran de bilan après un certain temps de jeu).

Que se passe-t-il ici en termes de règles et fonctionnalités ? À nouveau, pas d'autre solution que de s'imaginer en train d’utiliser cette interface.

Première chose, l'écran d'accueil s'affiche au chargement (et masque les autres, bien entendu). C'est en quelque sorte la première fonctionnalité : elle est liée au fait que l'utilisateur charge la page HTML.

Dans l'écran d'accueil, sans condition, tous les éléments potentiels s'affichent : le titre, l'image et le bouton.

Quelles sont les règles et fonctionnalités de l'écran d'accueil ? Dans cet écran, pas de règle, mais une seule fonctionnalité :

  • si le bouton #boutonJeu est cliqué, alors on passe à l'écran de jeu (et les autres écrans sont masqués).

Dans cet écran de jeu, sans condition, tous les éléments potentiels s'affichent : la liste des samples, le pad, les zones de contrôle, la zone de visualisation, le bouton. Un son est déjà associé à chaque bouton du pad.

Les fonctionnalités sont les suivantes :

  • si un glisser-déposer d’un sample depuis la liste des samples sur un des boutons du pad est effectué, alors le son est associé à ce bouton (bien entendu, si une association existait avant ce glisser-déposer, elle est remplacée) ;

  • si un des boutons du pad est cliqué, alors :

    • si la case loop du contrôle associé à ce bouton n’est pas cochée, le son est joué une fois (au volume défini par le curseur associé au volume) et visualisé dans la zone de visualisation,

    • si la case loop est cochée, le son est joué en boucle selon le tempo et le volume définis, et visualisé dans la zone de visualisation ;

  • si la case à cocher loop non cochée préalablement est cliquée, alors elle devient cochée et rend actif le curseur permettant de changer le tempo ;

  • si la case à cocher loop déjà cochée préalablement est cliquée, alors elle devient décochée et rend inactif le curseur permettant de changer le tempo ;

  • si le curseur associé au tempo est modifié, alors le tempo du son est ou sera modifié ;

  • si le curseur associé au volume est modifié, alors le volume du son est ou sera modifié ;

  • si le bouton #boutonQuitter est modifié, alors l'écran de fin est affiché

La seule règle associée à cet écran est la suivante : la zone de visualisation affiche en continu le son qui est joué : une barre verticale (dont la hauteur est liée au volume du son et la couleur est associée à la couleur du bouton du pad) est affichée sur la droite de cette zone, puis se déplace vers la gauche.

Voici pour les règles et fonctionnalités. À ce stade, il s'agit simplement de décrire le mieux possible le fonctionnement de l’interface. De la même façon, ce n'est pas encore ici que l'on essaie de réfléchir à la mise en œuvre de ces fonctionnalités et règles.

Intéressons-nous à l'écran de bilan. Dans cet écran, à l’affichage tous les éléments potentiels s'affichent : ici le texte de fin.

Reproduisons tout cela sur la feuille. Voilà pour les règles et fonctionnalités.

En résumé

À ce stade, avec ces écrans, leur contenu, ces règles et fonctionnalités, nous avons déjà une bonne idée du fonctionnement de l’interface. Nous allons passer à la conception détaillée qui consiste à essayer de traduire du point de vue technique la conception générale.

Exemple de certificat de réussite
Exemple de certificat de réussite