• 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

Appréhendez la méthodologie générale

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

Voici une leçon importante à l’occasion de laquelle nous allons examiner des éléments de méthodologie, propres à la réalisation de petites animations ou interfaces avec HTML5.

Dans cette leçon, nous rappellerons quelques notions très générales concernant la gestion de projet, et présenterons les étapes d’un projet multimédia, quel qu’il soit. Ceci nous amènera à exposer des éléments adaptés à la conception et au développement d’un petit projet en HTML5.

Méthodologie générale d'un projet multimédia

Quelques mots sur le contexte dans lequel se fait en général un projet d'animation HTML5 :

  • code JavaScript.

Nous avons vu que le code JavaScript qui gère l'animation peut être écrit à différents endroits : dans la page HTML ou dans un ou plusieurs fichiers JavaScript. Ce code contient souvent plusieurs dizaines, voire plusieurs centaines d'instructions ;

Exemple code
Exemple code
  • code CSS.
    Même chose pour les styles utilisés dans l'animation. Cette animation implique même peut-être l'existence de plusieurs pages HTML.

Plusieurs types de fichiers
Nous allons donc être obligés de jongler entre plusieurs fichiers : HTML, CSS, JavaScript, pour ce qui nous concerne.
Dans des animations plus élaborées, nous pourrons avoir des fichiers TXT, XML, PHP, etc. :

Types de fichiers
Types de fichiers

Il n’est donc pas forcément aisé de développer une animation sans avoir une idée claire de l'ensemble des fichiers utilisés et de l'emplacement de telle ou telle partie de code. Il est encore moins aisé de devoir effectuer des modifications plusieurs mois après les derniers développements, si l'on n'a pas gardé suffisamment de traces de la façon dont nous avons procédé.

La réponse générale à ce problème est un cadre qu'on appelle le processus de développement logiciel.

Le processus de développement logiciel présente plusieurs parties, dont voici les plus importantes :

  • l'aspect gestion de projet, avec les notions de planification de toutes les tâches (et donc pas seulement les tâches d'écriture de code), d'organisation (notamment si l'on n'est pas seul à réaliser le projet), d'estimation du temps ou des coûts ;

  • la notion de conception des logiciels, c'est-à-dire toutes les questions que l'on se pose avant même d'écrire la moindre ligne de code ;

  • les notions de validation, de vérification et de tests de ce qui a été produit ;

  • la notion de qualité logicielle, basée sur de nombreux indicateurs tels que la fiabilité du logiciel ou de l'application, la facilité de son utilisation, sa simplicité, sa compatibilité vis-à-vis des différents navigateurs, sa facilité de correction et de transformation, sa performance, etc. ; 

Processus de développement logiciel
Processus de développement logiciel

Dans cette leçon, compte tenu de son périmètre et dans un souci de simplification, nous n'aborderons que les deux premières parties et les adapterons au contexte d'un petit projet multimédia.

Quelles sont les étapes générales d’un projet multimédia quel qu’il soit ?

Un projet, c’est un ensemble de phases, et d'activités associées.

4 phases peuvent être identifiées :

  • une phase d’avant-projet qui permet souvent de présenter le projet à un groupe de personnes qui vont décider ou pas de le poursuivre ;

  • une phase de définition ou de conception du projet qui est l'occasion de mieux décrire toutes les composantes du projet ;

  • une phase de réalisation ;

  • enfin, une phase de capitalisation pendant laquelle on va chercher à améliorer l’ensemble du processus et à identifier les bonnes pratiques.

Des activités de gestion ainsi que des activités techniques sont associées à chacune de ces phases.

Etapes du projet
Étapes du projet

Vous voyez dans cette figure que la phase de développement à proprement parler est relativement réduite par rapport à l’ensemble des tâches du projet.

Bien sûr, ce planning et cet ensemble d’activités, nous n’allons pas les reproduire pour les petites applications en HTML5 qui font l’objet de ce module. Retenons uniquement un certain nombre de ces tâches.

Parmi les activités de gestion, on retiendra l’étude d’opportunité. C’est important de se demander pourquoi on fait une application HTML5 ; comme cela va être coûteux en temps, est-ce c’est vraiment pertinent de passer du temps à développer cette petite animation ?

En termes d’activités techniques, nous allons mettre en avant :

  • le cahier des charges fonctionnel ;

  • l’architecture du produit ;

  • un cahier des charges technique ;

  • les spécifications techniques, le développement, les essais et les tests.

Nous ne retenons donc que quelques activités, et on va voir comment les mettre en place, sur un exemple.

La méthode proposée s'appuie sur l'élaboration d'un document unique, que nous appellerons cahier de spécifications, et dont nous allons décrire le contenu dans les diapositives suivantes.

Le développement se fera pas-à-pas, sur la base de ce document en adoptant le principe suivant :

  • une fois élaboré le cahier de spécifications, nous commençons à développer l'animation ou le jeu, tout en n'oubliant pas de mettre à jour ce cahier à la fois pour préciser des choix de programmation qui seraient faits au moment du développement, mais aussi pour définir des éléments qui auraient été oubliés lors de la phase initiale d'écriture du cahier de spécifications.
    Si le travail de conception est bien fait, il est possible que nous ne soyons pas obligés de modifier le cahier de spécifications initial ;

  • lorsque l'ensemble des fonctionnalités a été développé, une première version de l'animation est publiée, que l'on peut éventuellement faire tester par des acteurs extérieurs au développement, afin d'intégrer dans une seconde version d'éventuelles remarques ou de corriger certains éléments. 

Processus de développement
Processus de développement

Que va contenir ce cahier de spécifications ? Voici une proposition de contenu.

Nous y trouvons bien entendu des informations générales :

  • l'auteur, la date, le numéro de version ;

  • l'environnement avec lequel l'application a été développée et testée ;

  • ainsi que des éléments répondant à la question de l'opportunité : pourquoi, dans quel but, dans quelles conditions et pour qui l'on a entrepris ce projet.

Ensuite, il s'agit de rendre le plus clair possible le fonctionnement de l'animation ou du jeu. C'est évidemment la partie la plus importante. Nous l'appellerons conception générale ou cahier des charges fonctionnel.

Dans une troisième partie, on trouvera la conception détaillée. Cette partie précise la façon dont on traduit du point de vue technique la conception générale. Précisons ainsi :

  • quelles sont les données importantes de l'animation ou du jeu, et comment elles sont structurées ;

  • l’architecture globale de l’application : quels sont les différents dossiers, les différents fichiers qui sont nécessaires à l'animation, en précisant leur format (fichiers HTML, fichiers JavaScript, fichiers textes, fichiers XML, feuilles de style, mais aussi toutes les images, les vidéos, les sons) ainsi que les contraintes éventuelles sur ces fichiers (la dimension des images, le cas échéant), ou les éventuelles règles de nommage de ces fichiers ;

  • les choses du point de vue de la programmation, en écrivant les spécifications détaillées.

Cahier de spécifications sur un exemple de jeu

Pour mieux comprendre ce que contient un cahier de spécifications, nous vous proposons de prendre un exemple. Ce lien vous conduit sur un petit jeu permettant d’associer un nom à des pays sur une carte.

Cliquez sur cet autre lien pour télécharger le code complet de ce jeu.

Quel est le fonctionnement de ce jeu ?

Une carte est affichée ; elle représente plusieurs pays ; un numéro est associé à chaque pays ; sur le côté gauche de la page, on retrouve ces numéros avec en regard une liste déroulante de noms de pays.

Il s'agit donc d'associer à chaque numéro le nom du pays qui lui correspond. Deux boutons sont également présents sur la page : un bouton qui permet de valider notre choix ; un bouton qui permet de réinitialiser le jeu. Je vous propose de le tester pendant quelques minutes.

Méthode simplifiée : conception générale

Détaillons un peu la deuxième partie de ce cahier de spécifications et cette conception générale qui vise à rendre le plus clair possible le fonctionnement de l'animation ou du jeu.

Dans le cadre de ce module qui est une initiation à HTML5 et a pour objectif le développement d'animations simples, nous vous proposons une façon plus rustique de décrire ce fonctionnement.

Voyons-en le principe général. Nous allons distinguer deux points :

  • le premier point consiste à imaginer les différents écrans qui se présentent à l'utilisateur.
    Ces écrans correspondent à différents états de l'animation ou du jeu. Par exemple, dans le jeu des pays, nous pouvons voir deux écrans : un écran de jeu où des noms de pays peuvent être associés à des numéros, et un écran de bilan où le résultat est affiché, le bouton Valider masqué, ainsi que le compteur.

Deux remarques :

  • ce découpage en écrans ne signifie pas que nous allons avoir autant de fichiers HTML distincts que d'écrans ; en d'autres termes, un fichier HTML n'est pas forcément attaché à chaque écran (le jeu des pays en est un bon exemple),

  • ce découpage en écrans est formel ; peu importe le nombre, mais il ne s'agit pas non plus de compliquer les choses : ce découpage doit nous aider à rendre le plus clair possible ce qui se passe, notamment ici à préciser que les numéros prennent les couleurs bleue ou rouge, et que le bouton Valider disparaît.

Nous pouvons représenter cet ensemble d'écrans par des rectangles, comme ci-dessous, et donner un nom à chacun des écrans ;

Découpage écrans
Découpage écrans
  • le second point consiste pour chaque écran à décrire deux choses :

    • premièrement, lister tous les éléments qui vont s'afficher dans cet écran. C’est-à-dire textes, images, boutons, etc. Parmi ces éléments, certains vont s'afficher sans condition au moment où l'écran s'affiche ; d'autres s'afficheront en vertu de certaines règles, ou suite à des actions d'un utilisateur. Ce travail nous permet d'identifier les éléments ou conteneurs nécessaires, ce qui donne une bonne idée de la structure HTML du ou des documents HTML ; de même, le positionnement de ces éléments est identifié, ce qui donne une bonne idée des styles qui vont être utilisés. Il est possible d’enrichir le diagramme des écrans avec ces éléments constitutifs et de leur donner un nom. Pourquoi pas, d'ailleurs, leur identifiant définitif ;

Dessin

 

Dessin
  • deuxième chose : identifier toutes les règles ou fonctionnalités qui font que le contenu de cet écran va changer ou que l'on va passer à un autre écran. Cette étape est importante, elle doit être la plus complète possible, elle doit être cohérente, et logique.

Il faut préciser la distinction entre règles et fonctionnalités :

  • les fonctionnalités permettent de décrire ce qui se passe quand l'utilisateur interagit avec la page web ; dans le jeu des pays, une des fonctionnalités de l'écran de jeu est : « Si l'utilisateur clique sur le bouton Valider, alors ce résultat est affiché et le bouton Valider est masqué » ;

  • les règles permettent de décrire ce qui se passe indépendamment de l'utilisateur : dans le jeu des pays, une des règles de l'écran de jeu est « Si le temps dépasse 60 secondes, alors l'écran de bilan est affiché, c'est-à-dire que le résultat est affiché et le bouton Valider est masqué ».

Règles et fonctionnalités
Règles et fonctionnalités

Cette distinction peut paraître formelle, mais nous allons voir que règles et fonctionnalités ne font pas appel aux mêmes mécanismes.

À nouveau, ces règles sont pour l'instant écrites en langage naturel, le plus clairement possible.

Une fois que nous avons identifié les écrans, défini leur état initial, la liste des règles et fonctionnalités qui les font évoluer, une grosse partie du travail de conception est faite.

Méthode simplifiée : conception détaillée

Détaillons un peu la dernière partie de ce cahier de spécifications, la conception détaillée :

  • premier point, nous identifions les données importantes de l'animation ou du jeu. Dans le jeu présenté plus haut, nous nous doutons que la liste des pays joue un rôle important puisqu’elle sert à créer toutes les listes déroulantes.

    Données importantes à lister
    Données importantes à lister

    Cette identification des données est très importante : du choix de structurer les données de l’application de telle ou telle façon dépend beaucoup la facilité avec laquelle elle sera programmée et la facilité avec laquelle on parviendra à la faire évoluer. Nous détaillerons ce point sur un exemple, dans la leçon suivante ;

  • deuxième point : il nous faut réfléchir à l’architecture globale de l’application. C'est à ce stade, pour des raisons que nous expliciterons plus loin, que le choix du nombre de fichiers en présence est fait ; il est par exemple possible de choisir de rendre plus lisible le code JavaScript en le répartissant de façon cohérente dans plusieurs fichiers ; même chose avec le code CSS.

    Dans le jeu des pays, c'était assez simple, nous avions une structure de cinq fichiers :

    • le fichier HTML (qui rassemble donc les deux écrans) ;

    • le fichier JavaScript de notre code et celui de jQuery ;

    • le fichier CSS et celui de l'image ; nous aurions pu, comme dans l'image ci-contre, ranger ces fichiers dans différents dossiers : js pour le code JavaScript, images pour les images, css pour les fichiers CSS.

      Structure
      Structure de fichiers
  • troisième point : les spécifications techniques détaillées.
    Il nous faut penser à plusieurs choses :

    • à des éléments généraux tels que les règles de base de l’ergonomie (à la façon dont l’application est organisée à l’écran),

    • à l’esthétique générale, au choix des couleurs, des polices, etc.,

    • aux dimensions générales de notre application, ni trop petite (au risque qu'elle ne soit pas très visible ou qu'il soit difficile d'interagir avec elle) ni trop grande (au risque qu'il faille constamment utiliser l'ascenseur pour l'utiliser),

    • nous ne détaillerons pas ces aspects ici : vous trouverez facilement sur Internet des recommandation sur ces aspects,

    • il nous faut enfin envisager les choses du point de vue de la programmation :

      • identifier les briques que nous allons mettre en œuvre : glisser-déposer, dessin, événements, etc.,

      • il faut penser aussi aux performances de l'application, notamment en mettant en place des algorithmes performants et, dès que possible, en utilisant des fonctions permettant de réutiliser du code.
        Et c'est ce point essentiel que nous allons préciser plus loin sur un projet d’application.

Cahier des spécifications

Avant de présenter ce projet d’application, résumons le contenu de ce fameux cahier de spécifications. Nous y trouvons :

  • des informations générales :

    • numéro de version, auteur, date,

    • environnement de développement,

    • éléments répondant à la question de l'opportunité de ce projet ;

  • le fonctionnement de l'animation ou cahier des charges fonctionnel, détaillant :

    • la liste des écrans et leur contenu potentiel,

    • la liste des règles et fonctionnalités qui transforment ces écrans et permettent éventuellement de passer d'un écran à l'autre ;

  • des spécifications techniques détaillées qui éclairent sur les données importantes, les choix techniques, sur la structure du code et l'architecture de l’application en dossiers et fichiers.

Voici un exemple de cahier des spécifications professionnel que nous invitons à parcourir. Cliquez sur ce lien pour le télécharger.

En résumé

Cela semble faire beaucoup de choses. Alors que nous n’avons qu'une seule envie : ouvrir un fichier et commencer à programmer !

J'aimerais vous convaincre qu'une conception bien faite vous fera gagner beaucoup de temps lors de la phase de développement ; elle vous évitera sans doute beaucoup de questionnements et de déconvenues, y compris celle de devoir mettre à la poubelle ou de revoir de fond en comble un développement presque abouti.

Pour préciser cette démarche, il est temps de prendre un exemple.

Je vous donne rendez-vous dans la prochaine partie de cette leçon.

À tout de suite !

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