582-233-MT Ergonomie Web

Hiver 2015
582-233-MT Ergonomie Web
TRAVAIL PRATIQUE 1 – Évaluation ergonomique d’un site Web
Contexte de réalisation




Travail s'effectue individuellement.
Pondération : le travail totalise 20 % de la note finale.
Date de présentation :
o Groupe 01 : Lundi, le 2 février 2015.
o Groupe 02 : Mercredi, le 4 février 2015.
Date de remise :
o Groupe 01 : Lundi, le 16 février 2015 avant 22h (format électronique).
o Groupe 02 : Mercredi, le 18 février 2015 avant 22 h (format électronique).
Le document imprimé doit être remis obligatoirement avant midi (12 h am) le lendemain matin de la
date de remise (Gr 01 : mardi, Gr 02 jeudi) SANS FAUTE sinon zéro pour tout le travail. Si je ne suis
pas là, glissez-le sous la porte de mon bureau.


Récupérez le dossier TP1-Phares .7z ou le .zip sur le serveur Claudine Billette/ergonomie-web.
Documents dont vous aurez besoin pour réaliser le travail sur mon site web dans la section travaux.
À remettre
Rapport
 Création d'un fichier « TP1-rapport-NomFamilleInitialeDuPrénom.docx ».
Exemple : TP1-rapport-billettec.docx
 Remettez votre TP1 (docx) sur le serveur dans Claudine Billette/Travaux.
 Installez le site Web, tous les fichiers et sous dossiers (non corrigé) sur le serveur TIM à la racine de
votre espace sans le dossier TP1.
 Impression du rapport.
Connexion au serveur

Accès par FTP (FileZilla) : Voir message envoyé par MIO.
Hôte : tim.cgmatane.qc.ca
Nom d'utilisateur : [email protected]
Mot de passe : celui qui vous a été attribué par MIO.

Pour avoir accès à vos pages Web, dans les différents navigateurs, voici l'URL :
http://tim.cgmatane.qc.ca/etudiants/2014/nomFamilleInitPrenom/ (selon votre propre login)
Installation du site Web sur le serveur TIM
Vous devez installer le site Web fourni au préalable sur le serveur TIM dans votre espace qui vous a été alloué.
Le site devra être fonctionnel à partir de l'adresse suivante :
http://tim.cgmatane.qc.ca/etudiants/2014/nomFamilleInitPrenom/
Aucun dossier TP1-Phares pour le site Web. Le site doit être installé à la racine de votre espace serveur.
TP1.docx
1
Hiver 2015
URL incorrecte :
http://tim.cgmatane.qc.ca/etudiants/2014/nomFamilleInitPrenom/TP1-Phares/
URL correcte, site fonctionnel : http://tim.cgmatane.qc.ca/etudiants/2014/nomFamilleInitPrenom/
Exemple :
http://tim.cgmatane.qc.ca/etudiants/2014/gauvertj/
Les tests devront être effectués à partir du serveur TIM. Vous comprendrez que la réaction d'un site Web sur
un poste de travail et sur un serveur n'est pas la même.
IMPORTANT après installation du site sur le serveur TIM
Vous devrez corriger une erreur afin de voir le site Web sur le serveur. C'est la seule erreur que vous devrez
corriger dans tout le travail.
Objectifs
1.
2.
3.
4.
5.
Analyser un site Web et proposer des solutions aux problèmes rencontrés.
Respect des règles d'ergonomie et de conventions web.
Respect des règles de codification XHTML 1.0 Strict et CSS 2.0 (CSS3 non pénalisé).
S’assurer de la compatibilité du site dans la plupart des navigateurs et plates-formes.
Installation d'un site web sur un serveur, protection des dossiers et sous-dossiers et gestion des erreurs.
Un Phare dans l'Océan : renseignements avant de débuter
À noter : Pour alléger le travail, j'ai supprimé certaines pages et mis des liens inactifs. Dites-vous que les pages
existent et que les contenus de ces pages sont exempts d'erreurs. À ne pas oublier que dans le menu le lien de
la page en cours doit être inactif. Le site contient au total 12 pages (à part les pages 403 et 404).
Voici l'état que devrait être les liens dans les différents menus :
Menu utilitaire : English, F.A.Q, icône de Facebook, icône de Twitter. Tous les liens sont inactifs.
Menu principal : Accueil, Histoire, Circuits, Phare du Québec, Phare du monde, Contactez-nous. Tous fonctionnels.
Menu secondaire (dans les pages internes, ceux avec les astérisques * sont fonctionnels, les autres sont inactifs) :
 Histoire : Histoire *, les autres éléments du menu sont inactifs.
 Circuits : Le tour de la Gaspésie *, les autres éléments du menu sont inactifs.
 Phare du Québec : Rocher aux Oiseaux *, Pointe-à-la-Renommée *, l'Île aux Perroquets *, les autres éléments du
menu sont inactifs.
 Phare du monde : Amédée *, Byron Bay *, Baleines *, les autres éléments du menu sont inactifs.
À noter : Je n'ai pas mis toutes les régions du Québec, ni tous les pays pour les Phares du monde.
Menu pied de page : Accueil, Histoire, Circuits, Phare du Québec, Phare du monde, Contactez-nous. Tous fonctionnels.
Lien dans la page d'accueil sur les images : Phare du Rocher-aux-Oiseaux *, Phare de la Pointe-à-la-Renommée *, Phare
de l'Île aux Perroquets *, Phare Amédée *, Pare de Byron Bay *, Phare des Baleines * sont fonctionnels, les autres sont
inactifs.
Le moteur de recherche : ne peut rechercher dans le site web, ce n'est pas une erreur... c'est pour alléger le
travail.
Formulaire : ne vous préoccupez pas de la validation du formulaire. Il n'y a aucun Javascript - non fait, ceci pour
alléger le travail. Vérifiez seulement l'ergonomie…
Vous n'avez pas à corriger le code HTML, ni le code CSS, ni le JavaScript dans ce travail.
TP1.docx
2
Hiver 2015
Analyse du site Web : Exigences particulières
Rapport :
Rédigez un rapport des problèmes rencontrés et les solutions proposées. Soyez professionnel lors de la
rédaction de votre rapport, ceci inclus la mise en page.

Mise en forme du rapport :
- soit un mode paysage ou portrait (à votre convenance);
- page de présentation;
- numérotation des pages (sauf la page de présentation);
- titres des sections (voir un peu plus bas);
- sous forme de tableau : la page où est l'erreur, l'erreur et la solution (voir l'exemple en annexe);
- etc.
À noter : le tableau ne doit pas déborder des marges des pages. S'il le faut agrandissez les marges
gauche et droite de la page. Fichier/Options/Options avancées/ dans la section « Afficher le contenu
du document », cocher « Afficher les limites d'un texte ».

Contenu du rapport :
- Spécifiez en premier lieu la page ou les pages où se trouve le problème (soyez précis).
- Spécifiez le problème, c’est quoi l’erreur.
- Proposez une ou des solution(s) au problème.
- Voici les sections demandées selon les types d’erreurs (ces titres sont obligatoires) :
1. Le nom des fichiers html, les titres1 et libellés;
2. La navigation et les liens;
3. Le contenu et la lisibilité;
4. La typographie et la mise en forme des textes;
5. Les images;
6. Le formulaire de la page contact;
7. La validation XHTML & CSS (préciser la ligne et l'erreur dans le code);
- Vérifiez sur IE10 ou moins (pour le favicon) et sur Firefox (PC).

Qualité de la langue : les fautes d'orthographe seront évaluées dans le rapport.
Présenter le produit :
 Installation du site Web sur le serveur TIM, à la racine de votre dossier.
htaccess :
 Nom du fichier et emplacement sur le serveur TIM
 Protection des dossiers (empêcher le listage des répertoires et fichiers)
 Gestion des erreurs 403 et 404 et affichage d'une page personnalisée selon l'erreur.
(les pages html 403 et 404 sont déjà faites)
1
Titres dans la barre de titre et dans la page
TP1.docx
3
Hiver 2015
Critères et pondération
20 points
Élément de compétence : Vérifier la qualité de l'intégration.
 Rapport :
- Mise en forme du rapport (incluant la page de présentation)
- Contenu du rapport : erreurs et solutions proposées
- Qualité de la langue
/51
/6
/40
/5
Présenter le produit
 Installation du site Web sur le serveur à la racine de votre espace
/3
htaccess
 Nom et emplacement du fichier : .htaccess + emplacement
 Protection des dossiers (empêcher le listage des répertoires et fichiers) avec .htaccess
 Gestion des erreurs 403 et 404 et affichage de la page personnalisée selon l'erreur
/6
TOTAL
/1
/2
/3
/ 60
Remarque : La note sera ramenée sur une pondération de 20 % de la note finale.
PRÉSENTATION DES TRAVAUX : Chaque travail doit être présenté selon les standards précisés dans son énoncé.
Jusqu’à 10 % de la pondération du travail peut être retranché pour toute présentation non conforme.
POLITIQUE QUANT AU RESPECT DES ÉCHÉANCES : Tout travail remis en retard sans raison valable sera refusé par
l'enseignante et se verra attribuer la note zéro. (PIEA, art. 2.2.8)
PLAGIAT : Le plagiat est évidemment interdit. Conformément à l’article 2.2.10 de la Politique Institutionnelle
d’évaluation des apprentissages le plagiat entraîne la note zéro ( 0 ) pour le travail.
TP1.docx
4
Hiver 2015
Annexe
Voici un exemple incomplet de sections du rapport :


Affichez les pages où il y a une erreur selon l'ordre du menu principal et/ou secondaire.
Si une erreur se retrouve sur plusieurs pages, elle compte pour une seule erreur. Donc, vous devez indiquer
dans la colonne « Page » la liste des pages où se trouve l'erreur (voir ce qui est en bleu).
1. Le nom des fichiers html, les titres* et libellés
* Titres dans la barre de titre et dans la page
Page
Accueil
xxxxxx
xxxxxx
Nom du fichier
Titre (title)
*voir note
Err. :
Sol. :
Err. :
Sol. :
Err. :
Sol. :
*voir note
*voir note
Titre
dans la page
Libellés
Err. :
Sol. :
Err. :
Sol. :
*voir note
*voir note
Err. :
Sol. :
*voir note
*Note : Si une page n'a aucune erreur, vous ne l'écrivez pas. Si vous n'avez aucune erreur dans une des cellules ne rien écrire.
2. La navigation et les liens
Page
Erreur
Solution
Toutes les pages
Accueil
Phares du
Québec et Phares
du monde
3. Le contenu et la lisibilité
Page
Erreur
Solution
Toutes les pages
Accueil
Circuits
Le Phare de
Byron Bay
4. La typographie et la mise en forme des textes
Page
Erreur
Solution
Toutes les pages
sauf Histoire
Histoire
Phares du
Québec
Amédée, Byron
Bay, Baleines
TP1.docx
5
Hiver 2015
5. Les images
Page
Erreur
Solution
Accueil
….
6. Le formulaire de la page contact
L'élément
Erreur
Solution
Champ nom et
ville
Champ sujet
L'étiquette
Téléphone
*Note : Au lieu de la page vu que c'est une section dédié au formulaire de la page contactez-nous, mettre l'élément en erreur. Vous indiquez
seulement ce qui concerne le formulaire. S'il y a d'autres erreurs non dû au formulaire, vous les écrivez dans les autres sections).
7. La validation XHTML & CSS (le CSS est OK pas besoin de le valider)
Page
Ligne
Erreur
Solution
Toutes les
pages
Juste
avant
</body>
~34
Le div du conteneur n'est pas fermé.
Écrire : </div> <!-- fin conteneur -->
Le ul du menu utilitaire n'est pas fermé.
</ul>
34, 38, 40
les balises <a … > ne sont pas fermées
Fermer les balises </a>
Toutes les
pages
Byron Bay
Bon Travail!
TP1.docx
6