IFT 6800 – Travail pratique 2 Modalités de remise Préalables

Département d’informatique et de
recherche opérationnelle
IFT 6800 – Travail pratique 2
Modalités de remise
L’échéance pour ce travail, de même que les moyens de le remettre, sont détaillés sur le
site Web des démonstrations du cours, dans la section des travaux pratiques.
Préalables
Dans ce travail, on vous demandera de créer une page Web. Un problème surgit : si votre
page est lisible par tout fureteur dans le monde, cela signifie aussi que tout le monde peut
copier le code HTML que vous allez créer pour vos travaux pratiques et copier vos
réponses. Puisque le plagiat a des conséquences fâcheuses, il faut créer un répertoire
secret pour publier vos pages Web.
Pour créer un dossier secret, ouvrez une console Linux et naviguez jusqu’à votre
répertoire Web (/home/www-etud/usagers/user/HTML). Faites ensuite
chmod 711 .
pour protéger votre répertoire HTML.
Vous pouvez ensuite créer votre dossier à l’aide des commandes suivantes, où
dossier_secret est le nom que vous choisirez (choisissez-le difficile à deviner) :
mkdir dossier_secret
chmod 711 dossier_secret
Si vous créez, par exemple, un fichier test.html dans votre dossier_secret et
que vous lui donner les bons droits d’accès, alors il sera disponible à l’url
www-etud.iro.umontreal.ca/~nom_utilisateur/dossier_secret/test.html
mais personne ne saura qu’il existe là, car le nom du dossier_secret n’est connu
que de vous.
Construction d’un site Web
Dans ce travail, on vous demande de créer une page Web qui représentera une page de
catalogue d’une compagnie fictive, SurfShoppe. Vous devrez utiliser les technologies
XHTML 1.0 et CSS 2.0 vues en classe et produire des documents valides, tel que défini
dans notre démonstration. C’est-à-dire que les validateurs XHTML 1.0 et CSS 2.0 que
nous avons vus ne doivent pas se plaindre lorsqu’on leur soumet votre page.
Il faudra reproduire aussi fidèlement que possible le site dont vous trouverez la capture
d’écran sur le site IFT6800, section travaux pratiques.
Puisqu’un capture d’écran seule ne fournit pas assez de détails pour bien définir ce que
l’on attend, la page suivante présente une image annotée de la page Web que l’on vous
demande de reproduire. Cette capture d’écran représente l’apparence de la page lorsqu’on
vient juste de la charger. L’image sur le site IFT6800 est de meilleure qualité.
2
Partout dans cette page,
lorsqu’on rencontre cette
couleur bleu marine, c’est en fait
le code de couleur 003366
« Catalogue », « Un gage de
qualité » et « Nos produits » sont
des titres
Les bordures pointillées ont la
couleur bleu marine des titres
Code de couleur 99CCFF (bleu
pâle)
L’utilisateur a le choix entre les
tailles « S », « M » et « L ».
Notez que ce texte est en petites
majuscules (« small caps ») et a la
couleur bleu marine
Les images vous sont fournies sur
le site du travail pratique. Mettez
ce que vous voulez pour l’attribut
alt.
Cet lien hypertexte permet d’envoyer un courriel à
[email protected].
Pour ce devoir, lorsque l’internaute clique sur « Commander », un courriel
doit être créé, prêt à être envoyé, à [email protected],
contenant les valeurs saisies dans le formulaire. Si on clique « Effacer ma
commande » , les champs remplis sont remis à zéro.
3
Notez que les annotations de la page précédente ne sont là que pour préciser le problème.
Il s’agit de reproduire tous les éléments HTML et de style de la capture d’écran, pas
seulement ceux qui font l’objet d’une annotation plus haut.
Certains types de formatage (p.ex. les petites majuscules) n’ont pas été vus en
démonstration, mais on vous a présenté les sites de référence qui vous permettront de
trouver les styles appropriés.
Il n’est pas nécessaire de reproduire exactement les distances en pixels. Par exemple, si la
solution inclut une marge de 60 pixels quelque part, et que vous utilisez 45 pixels, on ne
vous pénalisera pas dans la mesure où vous avez compris qu’il fallait utiliser une marge.
La capture d’écran donnée est identique sous Firefox, Internet Explorer et Safari.
Appelez votre fichier html tp3.html et votre fichier css tp3.css.
Des points sont accordés au formatage que vous donnerez à vos éléments.
Observez donc soigneusement l’image donnée pour que votre travail y
ressemble le plus possible. Par exemple, dans l’image ci-contre, la
largeur du champ quantité est assez petite (quelques caractères
seulement) et ce champ est aligné au bas de la cellule bleue (alignement
vertical « bottom »).
Barème
Dossier secret valide, avec les bons droits d’accès............... 5%
Conformité au standard XHTML 1.0................................. 20%
Conformité au standard CSS 2.0.......................................... 5%
Présence de tous les éléments XHTML ............................. 40%
Présence de tous les éléments CSS .................................... 30%
Sources
La partie « Dossier Secret » des préalables s’inspire du travail d’Alexandre Patry pour le
cours de IFT3220 :
http://www-etud.iro.umontreal.ca/~dift3220/moin.cgi
Rédigé par Fabrizio Gotti, automne 2007.
4