Copyright © 2025 Yves MARCOUX; dernière modification de cette page: 2025-06-03.
SCI6373 Programmation documentaire
Yves MARCOUX - EBSI - Université de Montréal
Vous devez créer une page HTML scriptée qui calcule la fréquence des différents mots dans un texte, avec différentes options de comptage et de tri des résultats.
Le texte est accepté de l’utilisatrice dans une zone textuelle de l’interface. Les résultats sont affichés dans un nouvel onglet (pop-up window). Les résultats sont présentés dans un tableau donnant la fréquence de chaque mot, de même qu’un histogramme de la fréquence relative normalisée de chaque mot (fréquence du mot / fréquence du mot le plus fréquent).
Le texte peut être tapé directement par l’utilisatrice dans la zone appropriée; cependant, pour traiter un texte pré-existant, on peut aussi le copier-coller à partir d’une autre application (un logiciel de traitement de texte ou une autre fenêtre de navigateur, par exemple). Cette façon de procéder permet notamment d’expérimenter avec des longs textes.
Les options de comptage suivantes doivent être offertes à l’utilisatrice :
Chacune de ces options doit pouvoir être spécifiée par l’utilisatrice avant le comptage.
Lorsque les mots de moins de trois lettres sont ignorés, il est intéressant d’en tenir quand même un décompte pour pouvoir faire mention de leur nombre à la présentation des résultats.
Par défaut, toute suite de caractères alphanumériques (lettres ou chiffres) consécutifs est considérée comme un mot. Ainsi, « 2027-09-01 » sera par défaut considéré comme trois mots distincts: « 2027 », « 09 » et « 01 ». Autre exemple :
Aujourd’hui, j’ai vu dix-sept chauves-souris.
est considéré comme la suite suivante de mots :
- Aujourd
- hui
- j
- ai
- vu
- dix
- sept
- chauves
- souris
Cependant, la quatrième option ci-dessus permet à l’utilisatrice de spécifier un certain nombre de caractères « non séparateurs de mots », c’est-à-dire qui ne doivent pas être considérés comme délimitant des mots, mais plutôt comme faisant partie des mots. Concrètement, une zone de saisie doit permettre à l’utilisatrice d’inscrire, si elle le veut, un ou des caractères « non séparateurs de mots ».
Par exemple, si l’utilisatrice inscrit « - », alors « 2027-09-01 », « dix-sept » et « chauves-souris » doivent être considérés chacun comme un seul mot; s’il inscrit « ’ », alors « aujourd’hui » et « j’ai » doivent être considérés comme un seul mot; s’il inscrit à la fois « - » et « ’ », alors « l’avant-veille » et « d’outre-mer » doivent être considérés comme un seul mot.
L’utilisatrice peut n’inscrire aucun caractère non séparateur de mots (laisser vide la zone de saisie prévue à cet effet), en spécifier un, ou en spécifier plusieurs. L’espace est toujours considérée comme séparateur de mots, même si l’utilisatrice inscrit une ou des espaces dans la zone de saisie prévue pour inscrire les non séparateurs de mots. Si l’utilisatrice inscrit un ou des caractères alphanumériques parmi les « non séparateurs » fournis, ce n’est pas une erreur, mais la présence de ces caractères comme « non séparateurs » ne change rien, puisque les caractères alphanumériques sont toujours considérés comme non séparateurs de mots. De même, ce n’est pas une erreur si l’utilisatrice inscrit plusieurs fois le même caractère (même si une seule fois suffit pour rendre le caractère « non séparateur »).
Deux possibilités de tri des résultats doivent être offertes à l’utilisatrice :
Évidemment, une seule option de tri peut être « active » à la fois.
Il va sans dire que le tri alphabétique (qu’il soit le critère de tri principal ou secondaire) doit traiter correctement la casse des lettres et les signes diacritiques.
L’utilisatrice doit avoir le choix parmi 4 couleurs pour les bandes de l’histogramme, et doit pouvoir régler la longueur des bandes entre 200 et 1500. Pour la couleur, l’utilisatrice doit pouvoir choisir parmi une liste de noms de couleur en français.
Si aucun mot de longueur suffisante n’est fourni (donc, notamment, si on n’inscrit rien ou que des caractères séparateurs de mots), le script doit afficher un message d’erreur approprié.
Les fréquences de mots doivent apparaître dans un tableau à trois colonnes, donnant le mot lui-même puis sa fréquence; la troisième colonne est consacrée à l’histogramme des fréquences relatives normalisées. Tel que mentionné ci-dessus, les résultats doivent apparaître dans un nouvel onglet du navigateur. À titre d’exemple, avec L’Après-midi d’un Faune, de Stéphane Mallarmé, et en supposant que les options choisies par l’utilisatrice demandent de ne rien ignorer, de trier les mots par fréquence et ne spécifie aucun caractère de mots additionnels, le tableau obtenu ressemblera à ceci (seul le début du tableau est montré ci-dessous, il faudrait utiliser la barre de déroulement pour visualiser le reste) :
Avec le même texte, mais des options différentes, le tableau pourrait ressembler à un de ces exemples :
Au début de la fenêtre de résultats, avant le tableau des fréquences lui-même, un rappel des options de comptage et de tri en vigueur doit être affiché (incluant le nombre de mots de moins de 3 lettres ignorés, si l’option correspondante a été sélectionnée). Les statistiques suivantes globales sur les résultats présentés doivent aussi figurer : nombre de mots distincts (i.e. le nombre de ligne du tableau), nombre total de mots.
Dans le tableau, la casse originelle des lettres ne doit être préservée que si la différenciation entre minuscules et majuscules est demandée; autrement, les mots doivent être présentés tout en MAJUSCULES.
Si les signes diacritiques sont ignorés, les mots doivent être présentés sans signe diacritique.
Si vous êtes intrigués par la disparition du mot « or » dans le dernier exemple, sachez que l’exemple a été produit avec l’apostrophe (') comme non séparateur de mots, et que les deux seules occurrences de « or » dans ce texte sont comme partie des groupes nominaux « l’or » et « d’or ». Le mot « onde » subit un sort similaire.
Si vous voulez tester votre application avec le même texte que ci-dessus, vous pouvez le récupérer ici. Si vous voulez la tester avec un texte plus long, vous pouvez utiliser les Chants et silences des trois créatures, recueil de poèmes en prose du poète québécois Denys Gagnon (texte utilisé avec permission). Prenez note que ce texte (tout comme le présent protocole) utilise l’apostrophe française « ’ », et non l’apostrophe anglo-saxonne « ' ». Si vous voulez tester votre application sur ce texte avec l’apostrophe comme caractère non séparateur de mots, assurez-vous de spécifier l’apostrophe française (que vous pouvez copier-coller à partir du présent protocole).
Un contrôle de formulaire de type TEXTAREA devrait être utilisé pour
accepter le texte à traiter.
Comme les trois premières options de comptage sont « binaires » (oui/non),
l’utilisation de cases à cocher pour permettre à l’utilisatrice de les activer ou
désactiver est appropriée. Pour la quatrième option (spécification de caractères non
séparateurs de mots), un contrôle input de type text, que
l’utilisatrice peut laisser vide ou non, est plus approprié.
L’utilisation de boutons de radio pour le choix de l’option de tri est appropriée, puisque les deux possibilités sont mutuellement exclusives.
En ce qui concerne l’histogramme, autant pour recueillir les options de l’utilisatrice que pour le produire et l’afficher, vous pouvez procéder comme pour le devoir précédent.
Toutes les options doivent avoir un réglage initial par défaut au lancement de
l’application; l’utilisatrice n’a alors qu’à changer les options qui ne lui
conviennent pas. Ceci s’applique aussi au contrôle de texte TEXTAREA,
qui devrait contenir un court texte par défaut.
Pour recueillir de l’utilisatrice la taille de la plus grande bande de
l’histogramme, vous pouvez utiliser un contrôle
<input type="number"> pour restreindre à des entrées numériques,
avec les attributs min, max et step pour
limiter les valeurs acceptées. Prévoyez une valeur par défaut déjà dans le contrôle
pour que l’utilisatrice n’ait à modifier la valeur que si la valeur par
défaut ne lui convient pas. Vous n’avez pas à faire d’autres validations que celles
déjà effectuée par le navigateur pour ce type de contrôle.
Une façon simple d’obtenir une liste déroulante dans un formulaire est le contrôle
<select>, dont voici un exemple d’utilisation:
<select id="saison"> <option value="spring">printemps</option> <option value="summer">été</option> <option value="fall" selected="selected">automne</option> <option value="winter">hiver</option> </select>
Comme pour les autres types de contrôle de formulaire vus jusqu’ici, l’option
sélectionnée au moment où le formulaire est soumis (en fait, l’attribut
value de l’option sélectionnée) est disponible comme propriété
.value de l’objet JavaScript correspondant au contrôle HTML; donc,
pour l’exemple ci-dessus, par l’expression :
document.getElementById("saison").value
Il est plus facile de produire un histogramme à bandes horizontales qu’à bandes verticales; c’est donc ce qui est conseillé (la « longueur » d’une bande sera donc en fait une largeur).
Une façon simple de tout « aligner » correctement dans l’extrant est d’utiliser un
tableau (élément HTML <table>) et c’est donc aussi ce qui est
conseillé.
Un façon simple de produire une bande colorée en HTML est le code suivant :
<div style="border:thin black solid;
width:200px; background-color:red"> </div>
où 200 doit être remplacé par la largeur souhaitée, en pixels, et
red par la couleur souhaitée. L’espace insécable
( ) est importante car sans elle, l’élément
<div> ne s’affiche pas du tout. La présence de l’espace
insécable n’interfère pas avec la largeur de la bande affichée.
Si vous voulez tester votre solution avec un texte de longueur conséquente, vous pouvez utiliser le texte des Chants et silences des trois créatures, recueil de poèmes en prose de l’écrivain québécois Denys Gagnon (texte utilisé avec permission). Prenez note que ce texte (tout comme le présent protocole) utilise l’apostrophe française « ’ », et non l’apostrophe anglo-saxonne « ' ». Si vous voulez tester votre application sur ce texte avec l’apostrophe comme caractère non séparateur, assurez-vous de spécifier l’apostrophe française (que vous pouvez copier-coller à partir du présent protocole).
N’utilisez que les outils que nous avons vus dans le cours jusqu’ici, pour les raisons discutées aussi dans le cours.
Vous devez remettre tous les fichiers requis pour faire fonctionner votre « application ». Si vous utilisez plusieurs fichiers, assurez-vous que les liens entre eux sont relatifs et fonctionnels.
Aucun caractère spécial, espace ou caractère accentué ne doit être utilisé dans les noms des fichiers remis.
Essayez quand même de donner un nom significatif à votre fichier HTML principal, en lien avec la fonctionnalité de l’application (n’utilisez pas "TPn"). Soyez inventif (même si ne n’est pas facile avec une fonctionnalité aussi… frivole !). Une URL significative est une belle façon d’entamer un dialogue fructueux avec l’utilisatrice.
Si vous travaillez en équipe, un seul des coéquipier doit déposer le(s) fichier(s) dans StudiUM.
Vous serez évalués non seulement sur la fonctionnalité de votre page scriptée selon les spécifications ci-dessus (le fait qu’elle fait bien ce qui est demandé), mais également sur sa lisibilité, l’absence d’inefficacité et son utilisabilité, en particulier, sur un minimum de souci de l’expérience utilisatrice, comme on a vu et fait en classe.
Dans le(s) fichier(s) source(s) :
