|
Chapitre 1 |
L’ergonomie.
Ce chapitre expliquera dans les grandes lignes les choix qui ont été faits dans l’élaboration de ce site aussi bien dans l’organisation que dans le choix des couleurs, etc …
I)
Croquis
II)
Architecture du site
Le site est composé d’un tableau précédé et suivi
respectivement de la bannière et de l’image de bas de page. Le tableau compose
donc le milieu du site est donc composé de 2 lignes et 3 colonnes. La première
ligne est composée de 2 colonnes qui contiennent le haut du menu à gauche et du
fond du site à gauche. La deuxième ligne est composée de 3 colonnes dont la première
contient le menu ainsi que son fond, la deuxième contient le corps du site
(texte, etc …) et la troisième continue le fond de droite du site. Bien
entendue les bords de ce tableau ne sont pas resté visibles afin de rendre le
tout complètement transparent pour l’utilisateur.
La police de caractère utilisée tout au long du site est
« Time New Roman ».
III) Choix
des couleurs
Nous avons choisi le bleu comme couleur dominante du site car
ce n’est pas une couleur agressive à l’œil qui permettra aux internautes de
rester longtemps sur le site sans être incommodé. De plus, c’est une couleur
qui reste sobre et permet au site de garder un certain professionnalisme car nous
avons définis une cible « adulte » plus qu’enfantine. Afin de ne pas
entraîner la lassitude nous avons choisi de mettre 5 tons de bleu différents
tout en restant dans les mêmes teintes.
IV) Elaboration
de la bannière
La bannière est une image réalisée à
partir de Paint Shop Pro. Le fait d’utiliser une image nous a permis d’utiliser
une police ce caractère non intégrée par défaut dans Windows : Benegraphic.
Cela nous permet de ne pas avoir à demander à l’utilisateur de télécharger la
Police et de l’installer chez lui. La couleur de fond choisie est une des 5
teintes de bleu utilisé dans le site afin que la bannière entre dans la cohérence
globale du site.
L’image est composée de trois bandes
dont une, au milieu, plus large que les autres afin d’y faire rentrer le titre
du site : Les Damagnacs.
Ce titre a donc été tapé, comme
expliqué précédemment avec le police de caractère Benegraphic en utilisant la fonction
zone de texte de Paint Shop Pro. Les contours de ce texte sont noirs et l’intérieur
est blanc pour que le titre ressort plus sur le fond bleu de la bannière. Un
fin trait noir est placé au dessus de la bannière.
V)
Le cadre du site
Le cadre est délimité en haut en bas
par deux bandeaux bleus. Les cotés sont délimité directement par le menu pour
la gauche et une image à droite.
Le bandeau du haut est, comme les
autres images, dans une teinte de bleu. Il est également bordé d’un très fin
trait bleu plus foncé afin de le faire ressortir sur le fond blanc. A droite ce
bandeau est discontinue en relation avec l’image d’en dessous afin d’améliorer
l’esthétique du site.
Le bandeau du bas est identique à
celui du haut, il est lui aussi bleu, discontinue sur la droite et bordé d’un
bleu plus foncé par souci d’homogénéité dans la page.
L’image de droite est constituée de
trois bandes verticales d’un bleu clair. Cette image est insérée dans une seule
case du tableau. En fait, elle constitue le fond de la case et lui permet de se
répéter à l’infini lorsque la page s’allonge. Cette manipulation nous a permis
d’ajuster automatiquement le cadre au contenu de la page.
Le taille du site à, quand à elle,
été entièrement optimisé pour un affichage en 800x600 car beaucoup
d’utilisateur avec des moniteurs 14 ou 15 pouces utilisent encore cette résolution.
Bien entendu, le site est parfaitement visible sous des résolutions plus
hautes. Sur une résolution plus basse comme le 640x480, le site ne sera pas très
beau mais cette résolution parait suffisamment obsolète pour qu’on n’y prête
pas attention.
VI) Le menu
Le menu est constitué d’une image ayant
un bandeau bleu foncé et à gauche d’un bandeau stylisé de trois points blancs
insérés verticalement. Le corps du menu est réalisé en flash (à l’aide du
logiciel Macromedia Flash) car se format permet de gérer plus facilement et
plus rapidement les effets sur le texte que du HTML. Les éléments du menu sont
écrits en blanc et ils deviennent noirs lorsque la souris passe dessus. De
plus lorsque l’internaute clique sur un lien celui-ci devient rouge le temps du
clic. Le menu ne pesant que 3ko il n’est donc pas très lourd à charger pour
quelqu’un utilisant un modem bas débit (56k ou plus faible).
|
Chapitre 2 |
L’organigramme.
|
Chapitre 3 |
Description détaillée du site.
I)
La page d’index
La page d’index
constitue une page d’entrée au site. Elle ne contient pas de texte à proprement
parler. Elle se doit donc d’être sobre mais de susciter l’envie de continuer à
aller sur le site.
Afin de rendre
cette page plus agréable nous y avons inclus une petite animation. Nous nous
sommes basé sur l’image « garde » représentant l’écusson rond des
Damagnac (le logo). Nous lui avons appliqué un effet de rotation complète
(360°) dans le sens des aiguilles d’une montre combiné avec un effet de flou gaussien
qui démarre d’une image flou pour en arriver au logo des damagnacs. Cette
animation a été réalisée à l’aide du logiciel Animation Shop 3 de Jasc. Afin de
ne pas rendre le chargement trop lourd pour les utilisateurs (encore nombreux) de
modems 56k ou moins nous avons diminué au maximum le nombre d’image pour
arriver à seulement 8. Le fichier pesant 259 ko il n’es donc pas très lourd à
charger pour un modem classique bas débit.
En dessous de
l’image a été placé un texte souhaitant la bienvenue aux utilisateur :
« Cliquez pour pénétrer l’univers des Damagnacs ». Ce texte est en
taille 18.
L’image comme le
texte sont aussi des liens vers la page principale du site (edito.htm).
Le titre de la
page est « Site Officiel des Damagnacs ».
II)
Légende
La page
d’accueil du site souhaite juste la bienvenue sur le site et invite
l’utilisateur à utiliser le menu sur la gauche. Le titre est ecrit en taille 18
et le texte en 12. Tout est en noir. Le titre de la page est « Site
Officiel des Damagnacs ».
III) Légende
Cette page relate la légende
qui entoure l’histoire de Damagnac. Cette légende est divisée en plusieurs
parties et les titres de ces parties ont été mis en gras, en rouge et en taille
18 afin de mieux ressortir. Les textes quand à lui sont comme dans le reste du
site en noir et en taille 12. Toute la page a été centrée afin d’en améliorer
l’esthétique. Afin de rendre la lecture plus agréable et de mieux imprégner
l’internaute de l’imagerie des Damagnacs, plusieurs images ont été insérées à
certains endroits clés du texte (quand le texte est en rapport avec l’image).
En haut de la page a été
créé une balise servant à créer un lien en bas de cette même page faisant un
lien vers cette balise. A l’aide de ce lien, l’utilisateur pourra revenir en
haut de la page (à la balise). Pour créer une balise sous FrontPage il faut
sélectionner l’option « signet » dans le menu « insertion »
de FrontPage lorsque le curseur de texte est à l’endroit ou on veut mettre la
balise. Chaque signet portera un nom afin d’être facilement identifiable par la
suite. Ceci fait, lorsqu’on crée un lien hypertexte un option est disponible
pour faire un lien vers une balise (signet) précédemment créé.
Le titre de la
page est « La Légende ».
IV) Personnages
La page des personnages se présente comme un tableau de trois lignes et trois colonnes où chaque case est représentée par une image d’un personnage. Chaque image contient le nom du personnage et un lien vers une autre page qui décrit plus précisément celui-ci. Les cadres du tableau ont été laissés visible en laissant le choix de la couleur automatique et la taille à 1. Les textes du tableau ont été écrits en taille 12 et le titre de la page quand à lui est écrit en taille 18 et en noir.
Cette page descriptive est composée d’une ou plusieurs images du personnage. Sous ces images on peut consulter une fiche détaillée sur le physique, la nourriture, les vêtements, les activités et l’habitat du personnage. Ces informations sont écrites en rouge pour différentier le contenu de l’intitulé qui lui est écrit en noir et en gras. Tous ces textes ont été écrits en taille 12. Par souci d’esthétique nous avons centré l’ensemble de la page. Un lien en bas de la page a été disposé pour pouvoir revenir à la page principale des personnages.
Les images de la première page sont en fait des miniatures des images présentes dans les fiches descriptives détaillées. Ces réductions ont été faites avec Paint Shop Pro.
Le titre de la
page est « Les Personnages ».
V)
Boutique
Cette page est composée d’un
tableau à trois lignes et trois colonnes où on peut consulter et acheter les
produits dérivés des Damagnacs.
Dans chaque case du tableau
une miniature du produit a été insérée et en indique le prix. De plus, lorsque
l’on clique sur l’image du produit, une image agrandie de celui-ci apparaît,
permettant aux surfers d’avoir une meilleure vision du produit, ainsi qu’une
fiche détaillée apparaissent afin de mieux informer l’utilisateur. Les textes
de la page ont été écrits en taille 12 sauf le titre de la page écrit en taille
18.
En bas de la page nous
expliquons aux utilisateurs qu’étant donné qu’aucun paiement sécurisé n’est
actuellement disponible sur le site et qu’il faut pour commander imprimer un
bon de commande le remplir à la main et le renvoyer à une adresse indiquée. Un
lien a été disposé vers ce bon de commande. Ce texte est en taille 12 et a été
tapé en gras afin d’attirer l’attention de l’utilisateur.
La page comprenant le bon de
commande est composé d’un titre écrit en grand et gras suivi d’un
tableau : le bon de commande en tant que tel. Ce tableau est divisé en 2
parties : la première est un tableau de 9 lignes et 5 colonnes. L’acheteur
sera amené à y saisir la référence du produit, sa désignation, sa quantité
voulue, son prix unitaire et le prix total. La 2eme partie du tableau concerne
le total à payer. Cette partie est composée de 2 colonnes et lignes. On y reporte le total de tous les
articles puis on y met les frais de ports en fonction des quantités de
demandées (on y met deux astérisques afin de renvoyer à un texte explicatif sur
les frais de ports plus bas dans la page) ainsi que le Total général. En
dessous de ce tableau un texte écrit en gras (afin d’attirer l’attention de
l’utilisateur) expliquant le prix des frais de ports par article et par
commande et infirmant que l’entreprise ne livre qu’en France métropolitaine. Au
dessus de ce texte est également inscrite l’adresse à laquelle renvoyer le bon
de commande. Une partie du tableau a été laissé en taille 1 (pour les bordures)
et les cases ne servant à rien ont été mises en transparent afin de rendre le
tableau plus agréable. Les textes à l’intérieur sont en noir et en taille 12.
Les images des produits
n’existant pas elles ont été réalisé en faisant un montage entre des photos
d’articles vierges existants et les différentes images des Damagnacs (ex :
pour le Tee Shirt une images du logo et un autre d’un Damagnac ont été rajouté
sur une photo d’un tee shirt blanc). Les images ont ensuite été réduites sous
Paint Shop Pro pour en faire des miniatures pour la page principal.
Le titre de la
page est « La Boutique ». Chaque page de produit a pour titre le nom
du produit.
VI) Le
Forum
Le forum sera en php plutôt qu’en HTML, car c’est un format qui permet de gérer les bases de données. Nous avons choisi pour ce site d’utiliser un forum gratuit et libre de droit déjà programmé : le phpBB. C’est un forum très utilisé sur Internet et qui a mainte fois fait ses preuves sur des sites professionnels comme amateurs. Son installation est simple, il suffit d’uploader les fichiers php contenu dans l’archive et de configurer le nom de la base de donnée du serveur. Ensuite plusieurs utilisateurs peuvent s’y inscrire et poster des messages afin de créer une communauté autour de l’univers de Damagnacs. Afin de rester en harmonie avec l’ambiance du site le forum lui aussi est dans des teintes de bleu. En haut de la page on peut voir un logo des Damagnacs ainsi que le nom du forum écrit à coté. Chaque utilisateur pourra avoir sa signature et son avatar personnalisés afin de rendre le forum plus convivial et plus esthétique. Il sera également inclus une galerie de smileys.
Dans l’absolu c’est comme ça que sera le forum. Mais l’accès au serveur ftp ne nous étant pas autorisé, nous avons opté pour un site réalisant des forums gratuits. Ce site est www.aceboard.net. Nous avons gardé les paramètres par défaut au niveau de l’aspect du forum car ceux-ci sont par défaut dans des tons de bleu ce qui correspond globalement aux couleurs choisies pour le site. Nous avons simplement ajouté 2 forum : Les discussion générales permettant de parler de tout autour de l’univers des Damagnacs et un forum servant à l’organisation de compétitions officielles (affichage des dates, des résultats, etc …).
VII) Contact
La page contact
est en fait divisée en deux parties. En haut de la page nous avons tout d’abord
placé un titre en noir et en gras par soucis, encore une fois, d’homogénéité
avec le reste du site. Ensuite on amorce la première partie du site. Elle
présente les auteurs, leurs noms, leur parcours et une adresse mail afin de
contacter plus précisément l’un ou l’autre.
En dessous est
mise une autre méthode de contact des auteurs. Elle permet d’envoyer
directement au mail du site des commentaires sur ce site avec plusieurs options
pour faciliter la lecture rapide des mails par les auteurs qui les recevront.
Ce formulaire est créé avec les modèles de formulaire de FrontPage. Toutes les
options par défaut ont été laissées car toutes paraissaient pertinentes pour
faire un commentaire sur le site.
Ne possédant
actuellement pas les coordonnées des Auteurs ni une description suffisamment
détaillée de leur parcours nous avons pour le moment inclus seulement la
première partie du site. Pour le moment seul un message annonçant que ce
coordonnées seront bientôt disponibles et donnant le nom et le rôle de chaque
auteurs est présent.
Le
titre de la page est « Comment nous contacter ? ».
VIII)
Cartes
A) Les Règles
du Jeu
Cette première page expose
les règles du jeu de cartes de Damagnacs. En haut de la page est écrit le titre
en noir et en gros puis en dessous, en vert, est écrit « Sommaire »
en plus petit que le grand titre. Puis en dessous du sommaire sont disposés six
liens chacun portant sur un point particulier des règles du jeu (jeu, matériel,
but, comptage des points, déroulement d’une partie, variante). Dans la page ont
été créées 6 balises auxquelles amènent les liens précités. Pour créer une
balise sous FrontPage il faut sélectionner l’option « signet » dans le
menu « insertion » de FrontPage lorsque le curseur de texte est à
l’endroit ou on veut mettre la balise. Chaque signet portera un nom afin d’être
facilement identifiable par la suite. Ceci fait, lorsqu’on crée un lien
hypertexte un option est disponible pour faire un lien vers une balise (signet)
precedement créé. Les grands titres des différentes parties de la règle du jeu
sont écrits en rouge et en gras puis le texte qui les suit en noir et en
écriture normale. Dans la section « matériel » ou la règle explique
combien chaque joueurs devra prendre de carte le couleur du texte a été changée
selon la couleur de la famille en question (bleu pour les hommes, vert pour les
Damagnacs et rouge pour les livres). Comme pour les autres pages du site, le
texte a été centré encore une fois pour une meilleure esthétique du site.
En
bas de la page a été disposé un lien permettant de revenir à la page d’accueil.
En dessous de ce lien un message en gras et en noir précise que les droits de
ce jeu de carte sont réservés et qu’en aucune façon il ne fait partie du
domaine public.
Encore
une fois les textes de cette page ont été écrits en taille 12 et sauf mention
spéciale ils sont en noirs.
Le titre de la page est « Les Regles du Jeu ».
B) Cartes
Cette section permet de
visualiser certaines cartes afin de montrer aux potentiels acheteur le design général
des cartes. Afin d’éviter le copie frauduleuse toutes les cartes ne sont pas
disponible afin d’empêcher un utilisateur de simplement télécharger les images
et les imprimer. En haut de la page a été mis le titre comme d’habitude en noir
en gras en en grand.
La page est constituée d’un
tableau de 3 colonnes et 2 lignes. Chaque case contient une miniature de la
carte réalisée à l’aide de Paint Shop Pro ainsi que le nom de la carte écrit en
caractères normaux et en noir. 6 cartes ont été mises à disposition : 1
carte représentative de chaque équipe, 2 cartes spéciales (Raoul et le Grimoire
des illusions) ainsi que la carte introductive du jeu. Chaque image est en fait
un lien amenant vers une page présentant la même carte mais dans une image plus
grande permettant de mieux apprécier les détails.
Chaque page détaillée est présentée
de la même façon : en haut est reporté le nom de la carte en grand, en
gras et en noir et en dessous on peut voir l’image en plus grand de la carte en
question. En bas a été placé un lien permettant de revenir à la page précédente
ou on peut voir toutes les cartes en miniature.
Les textes de la page ont
tous été écrit en taille 12 sauf le titre écrit en taille 18 et en gras comme
sur toutes les autres pages. Dans tous les cas (sauf pour les liens) c’est la
couleur noire qui a été choisie. Pour les pages de visualisation détaillée des
cartes, le lien est en taille 1é en y laissant les couleurs par défaut et le
titre est en gras, taille 18 et en noir.
Le titre de la
page est « Le jeu de Carte ».
C) Boutique
Cette page renvois à la page boutique. Cette page est
la même que celle expliquée précédemment dans la partie III de ce cahier des
charges. Ce lien a aussi été disposé là afin que l’utilisateur intéressé après
avoir lu les règles et vu les cartes puisse accéder rapidement à la boutique
afin de découvrir ce jeu de carte ainsi que les autres produits dérivés des
Damagnacs.