# ATELIER PROFESSIONNEL JSP [NOV-DEC 2003] --- SUJET D'EXERCICE # # PRATIQUE XHTML/CSS/JS : FORMULAIRE DE MINI-SONDAGE INTERACTIF # ---------------------------------------------------------------------------- MODALITES DE RENDU ---------------------------------------------------------------------------- - Répertoire : ~/rendu/ap/jsp/xhtml - Fichiers : index.html, demo.css, demo.js - Droits : 700 pour les répertoires, 600 pour les fichiers - Date : jeudi 27/11/2003 à 14:00 - Conformité : XHMTL 1 Strict, CSS2, ECMAScript 1.3 ---------------------------------------------------------------------------- Conseils ---------------------------------------------------------------------------- - Prenez le temps de lire *tout* le sujet avant de commencer. - Les spécifications W3C et les sites de références sont vos amis : - W3C : - http://www.w3.org/TR/xhtml1/ - http://www.w3.org/TR/html4/ - http://www.w3.org/TR/CSS2/ - http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ - http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ - http://validator.w3.org/ - http://jigsaw.w3.org/css-validator/ - WDG : - http://www.htmlhelp.com/ - W3Schools (la spéc ECMAScript c'est vraiment indigeste...) : - http://www.w3schools.com/js/ ---------------------------------------------------------------------------- Description générale ---------------------------------------------------------------------------- Vous devez fournir une page interactive de "mini-sondage" pour un service de sondages en ligne. Cette page doit tirer parti des derniers standards largement appliqués : XHTML 1 Strict, CSS2 et ECMAScript 1.3. La page, à fond blanc et texte noir, démarre par un titre de taille large, à espacement étendu entre les lettres, de couleur verte, centré horizontalement et doté d'une belle marge basse. La page doit avoir un aspect global propre, professionnel, soigné. En aucun cas les styles de taille de police ne pourront être fixes (en pixel, centimètres, etc.). Ils doivent utiliser une unité relative (em, ex, %...) appropriée à la nature de la taille définie (hauteur, largeur, de texte ou de conteneur...). Un ou deux paragraphes courts expliquent la nature du formulaire et le traitement qui sera fait des données (improvisez...). Dans ces paragraphes, on fera usage d'au moins 2 ou 3 acronymes, qui apparaîtront comme tels au moyen d'un "soulignement" tireté gris foncé. Si la souris passe dessus, elle utilise le curseur d'aide, et un arrêt momentané de la souris produit une infobulle fournissant la signification de l'acronyme. Suite à ces paragraphes, une petite table bien propre présente quelques statistiques existantes. La table doit reproduire le schéma suivant au moyen des balises appropriées (la première ligne et la première colonne sont classées comme entêtes) : Taux de réponses à divers modes de sondage #=================#============#=================# | Type de sondage | Population | Taux de réponse | #=================#============#=================# | Journal | < 14 ans | 14 % | | +------------+-----------------# | | 15-18 ans | 37 % | | +------------+-----------------# | | 19-25 ans | 41 % | | +------------+-----------------# | | 26-40 ans | 54 % | #=================#============#=================# | Moyenne | 39 % | #=================#============#=================# | Téléphonique | < 14 ans | 28 % | | +------------+-----------------# | | 15-18 ans | 34 % | | +------------+-----------------# | | 19-25 ans | 37 % | | +------------+-----------------# | | 26-40 ans | 61 % | #=================#============#=================# | Moyenne | 40 % | #=================#============#=================# | En ligne | < 14 ans | 45 % | | +------------+-----------------# | | 15-18 ans | 48 % | | +------------+-----------------# | | 19-25 ans | 72 % | | +------------+-----------------# | | 26-40 ans | 57 % | #=================#============#=================# | Moyenne | 56 % | #==============================#=================# | Moyenne générale | 45 % | #==============================#=================# La table est centrée horizontalement. Le formulaire contient les champs suivants (les champs suivis d'une astérisque sont obligatoires ; les valeurs internes des options/boutons figurent entre crochets, les noms des champs entre accolades) : - Groupe "Qui êtes-vous ?" - Nom*, Prénom* (maximum 64 caractères chacun) {lName, fName} - Année de naissance (liste déroulante de 1900 à 1996, sélection par défaut sur une valeur initiale "Choisissez" de valeur interne "NC") {birthYear} - Groupe "Où êtes-vous ?" - Ville (maximum 255 car.) {city} - Pays* (liste déroulante préremplie, sélection par défaut "France") {country} - Groupe "Vos opinions" - Sous-groupe "Les standards du Web..." - Boutons radio, l'un en-dessous de l'autre : {webStandards} "C'est top !" (choix par défaut) [top] "C'est bien" [good] "C'est moyen" [avg] "C'est nul" [sucks] "Sans opinion" [neutral] - Sous-groupe "Votre navigateur préféré est..." - Liste déroulante avec : {favBrowser} "Internet Explorer" [ie] "Mozilla" (sélection par défaut) [mozilla] "Safari" [safari] "Konqueror" [konq] "AOL" [aol] "Netscape Navigator" [nn] "Opera" [opera] "Autre, préciser" [other] - Champ de saisie (maximum 32 car.) pour le dernier cas (autre) {favBrowserName} - Sous-groupe "Le logiciel libre..." - Boutons radio, l'un en-dessous de l'autre : {openSource} "C'est l'avenir" (choix par défaut) [future] "C'est trop compliqué" [complex] "C'est stupide" [stupid] "C'est l'horreur" [hell] "Je ne sais pas ce que c'est" [dunno] "Sans opinion" [neutral] - Fin de formulaire : - Case à cocher "M'informer des résultats" {subscribe} - Bouton "Envoyer" (soumission du formulaire) - Bouton "Effacer" (réinitialisation du formulaire) Chaque champ dispose d'un libellé à l'écran. Pour tout champ dont le clic est normalement restreint au composant (ex. case à cocher, bouton radio), cliquer sur le libellé doit équivaloir au clic sur le champ. On utilisera donc les balises appropriées pour les libellés. Chaque champ définit une touche de raccourci dans son libellé, au moyen d'un soulignement (en CSS, pas avec ...). Le contrôle correspondant (le composant visuel) doit être activable avec la touche Alt+Lettre ainsi indiquée. On évitera les lettres "classiques" (celles d'activation des menus : F, E, V, G, B, A, T, H et la lettre D pour la barre d'adresses), autant que possible. Le formulaire conteneur utilise la méthode POST, son action DOIT ETRE "test.jsp". Toute forme d'envoi du formulaire (validation depuis un champ texte, clic sur le bouton d'envoi, etc.) DOIT déclencher une vérification de saisie des champs obligatoires, qui annule l'acte d'envoi en cas de non remplissage. Un champ obligatoire est considéré vide si sa valeur satisfait l'expression régulière suivante : /^\s*$/ Une fois la page chargée, le focus doit être sur le premier champ. Les champs obligatoires doivent être clairement indiqués comme tels ( astérisque / couleur / gras...), avec une mention précédant le formulaire explicitant le rôle de cette distinction visuelle. A validation du formulaire, si le navigateur favori retenu par l'utilisateur est "AOL" ou "Netscape Navigator", un message sur deux lignes s'affiche préalablement à l'envoi du formulaire, avec simplement un bouton OK. La première ligne comporte le nom en clair du navigateur, suivi d'un espace et d'un point d'interrogation. La seconde dit "Mais vous êtes malade !". La comparaison des navigateurs, en interne, se fait sur les codes de l'attribut value, pas sur le nom. Le nom est récupéré dynamiquement depuis l'objet HtmlOptionElement examiné (enfin, ce serait plus clean...). Le champ de saisie pour un nom de navigateur différent des possibilités doit être désactivé par défaut, et ne devenir actif que lorsque le choix "Autre, préciser" est retenu. Sélectionner une autre possibilité désactive le champ de saisie. ---------------------------------------------------------------------------- Pour l'implémentation ---------------------------------------------------------------------------- - Le fichier HTML doit se nommer "index.html", débuter par un DOCTYPE XHTML 1.0 Strict, et fournir dans sa partie d'entête : - Une définition de type de contenu avec le type MIME pour les textes HTML et un jeu de caractères ISO-8859-1 - Un titre - Des références externes à la CSS et au script. - Utilisez la balise