Vous êtes sur la page 1sur 5

582-243, Hiver 2011

Énoncé du TP1
Professeurs : Vincent LeBlanc, Eddy Martin & Denis Sherknies
Objectifs

Le travail consiste à faire la conception, la construction et la mise en œuvre partielle d’une


application HTML/CSS et JavaScript. Cette application sera finalisée lors du tp2. Le travail doit se
faire individuellement.

Il vous faudra réaliser un site de diffusion de musique, où l’usager doit s’inscrire. À partir d’un
seul fichier HTML/CSS, les trois pages suivantes devront être générées à l’aide de programmation
JavaScript :

1. Identification
2. Inscription
3. Audio

Page 1: Identification

Cette page permettra à l’utilisateur déjà inscrit de saisir son nom d’usager et son mot de passe.
L’utilisateur non-inscrit pourra cliquer sur le bouton Inscription pour passer à la page
d’inscription.

Pour les besoins du tp1, tout utilisateur, inscrit ou non, ne pourra que cliquer sur Inscription,
pour être redirigé vers la page d’inscription.
Page 2 : Formulaire d'inscription

Il doit contenir les informations suivantes:


Prénom, Nom, Numéro de rue, Nom de rue, Code Postal, Ville, Province, Nom d’usager
et Mot de passe.

- La ville doit être spécifiée dans une liste déroulante.


- Toutes les autres informations devront être spécifiées dans des champs texte.
- La province doit être affichée automatiquement, à partir du choix de la ville.
- Un bouton Enregistrement doit permettre de valider le formulaire.
- Lorsque la page est chargée, tout élément du formulaire doit être vide, à l’exception de Ville et
Province, qui seront initialisées respectivement à Montréal et Québec.

- Par défaut, le premier élément du formulaire doit avoir le focus.


- Chaque élément doit avoir son étiquette dans une balise <label>.
- Pour des raisons d'accessibilité, cliquer sur l'étiquette d'un élément doit avoir pour effet de
transférer le focus sur l'élément associé.
- Le formulaire doit contenir des regroupements de champs avec les balises <fieldset>.

À côté de chaque élément du formulaire devra se trouver une zone permettant d’afficher un
message d’erreur, advenant qu’une erreur de validation survienne.
Règles de validation:

Aucun élément du formulaire ne doit rester vide.


1. Le champ Numéro de rue ne doit contenir que des chiffres.
2. Le Nom d’usager doit compter au moins 7 caractères.
3. Le Mot de passe doit compter au moins 10 caractères, dont 4 chiffres
4. Un choix doit être fait dans la liste Ville.
5. Le Code Postal sera validé avec une expression régulière. Les formats suivants devront
être acceptés:
1. H2C 3K6
2. H2C3K6
3. H2C-3K6
4. Les 3 formats précédents, avec les lettres en minuscules

Règles de fonctionnement:

Après avoir cliqué sur Enregistrement,


 un message précisant le type d'erreur doit apparaître à côté de
chaque champ en erreur.
 le curseur doit être placé dans le premier champ en défaut.
 La couleur d'arrière-plan de chaque élément où une erreur a été
détectée doit être changée.
 Si aucune erreur n’a été détectée, on passe à la page Audio.
Page 3 : Audio

Pour les besoins du travail pratique 1, seules les fonctionnalités suivantes sont requises :

a. Un message personnalisé doit être présent, exemple: « La musique de Bob ».

b. Une balise <audio> doit être présente.

c. Une liste déroulante contenant une liste de pièces musicales.

d. Le fait de sélectionner une pièce musicale doit la faire jouer par la balise <audio>.
Autres fonctionnalités

1. Une fonctionnalité de type Chemin de fer (« breadcrumb ») doit être présente


dans les 3 pages.
2. Le site doit utiliser des fonctions d’usage général, qui seront regroupées dans un
fichier .js.

Qualité du codage

- Le code JavaScript doit être indenté correctement.


- Des commentaires doivent être présents pour expliquer le fonctionnement des programmes.
- Toute ligne de programmation doit avoir son utilité.
- Tout élément défini par l’utilisateur (variables, fonctions, <input>, etc.) doit avoir un nom
significatif.
- Balises à proscrire : <font>, <br>, <table> pour la mise en page de formulaires.
- Ne pas utiliser d’attribut HTML là où une propriété CSS peut faire le travail.

Pondération et remise

Ce travail sera corrigé sur 50 points, et il compte pour 10% de la note finale du cours.

Le travail doit être remis avant la fin de la semaine 9 (vendredi 1er avril, 17h).
Remettre un fichier .zip, nommé NomdeFamille_Prenom_tp1.zip dans le dossier de remise.

Le site doit aussi fonctionner en ligne sur le serveur Webdev, à l’adresse suivante :

votre_code.webdev.cmaisonneuve.qc.ca/243