WEB SITE DEVELOPMENT

WEB SITE DEVELOPMENT
CONCEPTION DE SITES WEB
SECONDARY
NIVEAU SECONDAIRE
TEST PROJECT
PROJET D’ÉPREUVE

Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 2
Dernière mise à jour : 2016-03-02
Module A
INTRODUCTION
Une nouvelle organisation, FondsEnviro, a besoin d’un concept pour son nouveau site Web. Le fonctionnement
de FondsEnviro repose sur un site Web de financement participatif, qui permet aux internautes de contribuer au
financement de projets environnementaux en faisant des dons.
Le financement participatif est issu de l’idée de faire appel à un grand nombre de personnes pour financer des
projets multiples. Au lieu de mettre à contribution quelques grands investisseurs, ce mode de financement
sollicite un grand nombre de petits contributeurs. Le public cible du site Web est constitué des jeunes qui se
soucient de l’environnement et qui sont prêts à dépenser de l’argent pour le protéger et l’améliorer.
DESCRIPTION DU PROJET ET DU MODULE
Votre tâche consiste à établir la conception d’un site Web et d’un logo pour l’organisation FondsEnviro.
Pour vous aider à mener à bien cette tâche, nous vous fournissons un texte et des images. Vous n’êtes pas
tenu d’utiliser toutes les images ou tout le texte, mais vous devez vous assurer que votre design en contient
suffisamment pour donner une bonne idée de l’apparence du site une fois qu’il sera construit. Vous êtes libre
d’ajouter du texte, mais celui-ci ne sera évalué que pour sa forme et non pour son sens.
Dans le cadre du module A, vous devez concevoir les éléments suivants pour l’organisation FondsEnviro.
• Un logo FondsEnviro, qui doit représenter l’image de marque de l’organisation.
o Il doit être intégré à la conception du site Web.
o Il doit représenter à la fois l’organisation et la raison d’être du site Web.
o Il doit comprendre le texte FondsEnviro et au moins un élément graphique additionnel.
• Une page d’accueil comportant les éléments suivants :
o Le logo FondsEnviro que vous avez créé.
o Un lien vers la page d’inscription aux projets.
o Une fonction d’ouverture de session (champs de saisie pour le nom d’utilisateur et le mot de
passe, bouton d’ouverture de session).
o Une liste d’au moins trois projets pouvant être financés, chaque projet comprenant :
! Une image
! Un bouton « Financer »
! Un nom de projet
! Un texte descriptif
• Une page d’inscription pour les projets incluant les éléments suivants :
o Le logo FondsEnviro que vous avez créé.
o Les champs de saisie suivants :
! Nom du projet
! Image du projet
! Description du projet
! Adresse électronique
! Mot de passe;
o Un bouton « Envoyer ».

Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 3
Dernière mise à jour : 2016-03-02
Une page de présentation des projets, qui doit comprendre les éléments suivants :
o Le logo FondsEnviro que vous avez créé.
o Le nom du projet.
o Au moins une image illustrant le projet.
o Au moins un titre et un sous-titre à l’intérieur de la zone de contenu – Le texte de l’espace
réservé qui vous a été fourni peut être utilisé.
o Un résumé du projet, qui comprend :
! Le financement total recueilli
! Le nombre de jours restant avant l’échéance du projet
! Un bouton « Financer »
o Une fonction d’ouverture de session.
o Une fonction permettant aux internautes d’exprimer des commentaires ou de poser des
questions sur le projet (zone de texte et bouton « Envoyer »).
o Des options de partage sur les médias sociaux, y compris Facebook, Twitter et Google+.
Utiliser les images fournies (fichiers .eps).
INSTRUCTIONS
• Sur votre bureau, créez un dossier appelé « XX_Module_A » – « XX » est votre numéro de concurrent.
• Enregistrez les fichiers sources des images dans un dossier que vous nommerez « XX_source_files » et
que vous mettrez dans le dossier « XX_Module_A ». Les fichiers sources sont ceux qui contiennent les
couches (PSD, XCF, ID).
• Les travaux remis pour ce projet doivent comprendre trois fichiers (PNG, JPG ou SVG) :
o Un fichier contenant votre design de la page d’accueil FondsEnviro
o Un fichier contenant votre design de la page d’inscription des projets
o Un fichier contenant votre design de la page de présentation des projets
• Nom du fichier de la page d’accueil : « XX_index », par ex. : XX_index.png
• Nom du fichier de la page d’inscription des projets : « XX_project_enrollment », par ex. :
XX_project_enrollment.jpg
• Nom du fichier de la page de présentation des projets : « XX_project_presentation », par ex. :
XX_project_presentation.svg
BARÈME DE NOTATION DU MODULE A
Vos travaux seront évalués en fonction des critères suivants.
A1 Module A – Conception du logo Points
Le logo est créé et figure sur les trois
pages.
0,5
Le logo comprend à la fois le texte
(FondsEnviro) et au moins un élément
graphique additionnel.
- texte FondsEnviro (0,25)
- élément graphique (0,25)
0,5

Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 4
Dernière mise à jour : 2016-03-02
Le logo montre bien que le nom du site
Web est FondsEnviro et représente le
thème du site.
2
A2 Module A – Conception de la page Web
Les fichiers et les fichiers sources ont
été remis dans le bon format.
png, jpg ou svg pour les fichiers
(0,25). psd, id ou xcf pour les
fichiers sources (0,25).
0,5
La page d’accueil créée compte au
moins 3 projets.
0,5
B1 Module A - Conception de la page Web
Les projets mis en évidence sur la page
d’accueil comportent tous les
renseignements demandés.
Image, bouton « Financer », nom
du projet, texte descriptif. Enlever
0,25 point pour chaque élément
manquant.
1
La fonction permettant d’accéder à la
page d’inscription des projets figure sur
la page d’accueil.
Lien ou bouton menant à la page
d’inscription des projets.
0,5
La page d’accueil comporte une fonction
d’ouverture de session.
Champs de saisie pour le nom
d’utilisateur et le mot de passe,
bouton d’ouverture de session.
Enlever 0,25 point pour chaque
élément manquant.
0,5
La page de présentation des projets
affiche les icônes des médias sociaux
dont les images ont été fournies.
Icônes Facebook, Google+ et
Twitter. Enlever 0,25 point pour
chaque élément manquant.
0,5
La page de présentation des projets
contient au moins un titre et un sous-titre
à l’intérieur de la zone de contenu.
Différence d’au moins 4 pixels
entre la taille de la police du titre
et la taille du sous-titre.
0,5
La page de présentation des projets
comporte une fonction permettant
d’entrer des commentaires.
Une zone de texte et un bouton
« Envoyer »
0,5
La page de présentation des projets
comporte un résumé de projet.
Financement total recueilli,
nombre de jours résiduel, bouton
« Financer ». Enlever 0,25 point
pour chaque élément manquant.
0,5

Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 5
Dernière mise à jour : 2016-03-02
La page d’inscription des projets contient
tous les champs requis.
Nom du projet, image, description,
adresse électronique, mot de
passe et bouton « Envoyer ».
Enlever 0,25 point pour chaque
élément manquant.
1
Le design présente un bon équilibre
entre les images et le texte.
2
Le concurrent ou la concurrente a utilisé
des espaces vides pour mettre en
évidence les éléments de design.
1
Les trois designs sont attrayants pour le
public cible.
1
Les trois designs sont de belle qualité et
les éléments qu’ils contiennent sont
empreints d’originalité.
1
Page d'inscription du projet comprend
tous les champs obligatoires
1
La conception montre un bon équilibre
des images et du texte
1