WEB SITE DEVELOPMENT

TEST PROJECT
PROJET D’ÉPREUVE
WEB SITE DEVELOPMENT
CONCEPTION DE SITES WEB
SECONDARY
NIVEAU SECONDAIRE
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 2
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.
Le logo comprend à la fois le texte
(FondsEnviro) et au moins un élément
graphique additionnel.
0,5
- texte FondsEnviro (0,25)
- élément graphique (0,25)
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 3
Dernière mise à jour : 2016-03-02
0,5
Le logo montre bien que le nom du site
Web est FondsEnviro et représente le
thème du site.
A2
2
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).
La page d’accueil créée compte au
moins 3 projets.
B1
0,5
0,5
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 4
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
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 5
Dernière mise à jour : 2016-03-02
Module B
INTRODUCTION
L’organisme gouvernemental Tourisme Nouveau-Brunswick a été créé en 1995 pour faire équipe avec les
exploitants d’entreprises touristiques afin de promouvoir la province comme une destination de voyage
incontournable pour les visiteurs canadiens et étrangers. Le mandat de Tourisme Nouveau-Brunswick consiste
à accroître les recettes provenant du tourisme partout dans la province en créant de nouveaux produits et des
initiatives de marketing énergiques, et en augmentant le nombre de ressources de marketing offertes à tous les
exploitants touristiques néobrunswickois.
Bien que Tourisme Nouveau-Brunswick ait été satisfait de son site Web au cours des sept dernières années, il
constate aujourd’hui que son contenu n’est pas accessible à partir de tous les types d’appareils. L’organisme a
donc besoin d’une solution moderne, souple et complètement accessible pour son site Web.
DESCRIPTION DU PROJET ET DU MODULE
Dans le cadre du processus de détermination des besoins, vous avez rencontré des représentants de Tourisme
Nouveau-Brunswick, qui vous ont indiqué que le site Web Ontario Travel correspondait à ce qu’ils recherchaient
comme solution. Pour vous donner une idée du design, ils vous ont montré les illustrations d’écran ci-dessous.
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 6
Dernière mise à jour : 2016-03-02
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 7
Dernière mise à jour : 2016-03-02
Tourisme Nouveau-Brunswick aimerait que vous conceviez ce genre de boîtes à défilement vertical pour voir de
quoi aurait l’air le contenu de son site s’il était organisé de cette façon. Ce contenu n’est toutefois pas encore
prêt. Le groupe du marketing y travaille et, dans l’intervalle, vous devrez utiliser des images et du texte fictifs
(espace réservé).
Vous devez faire en sorte que le menu principal de navigation présente cinq options : Accueil, Explorer, Jouer,
Planifier et l’icône de recherche. Comme on peut le voir sur les illustrations d’écran, ce menu figure le long du
bord supérieur de la page. La zone de recherche doit apparaître lorsqu’un utilisateur fait glisser le pointeur de la
souris sur l’icône de recherche (ou la touche), comme dans l’illustration d’écran ci-dessous. Elle doit disparaître
dès que l’utilisateur clique ailleurs dans l’écran.
Le design que vous a présenté Tourisme Nouveau-Brunswick fonctionne plutôt bien sur bon nombre d’appareils
informatiques, comme les tablettes ou les ordinateurs de bureau. Toutefois, étant donné qu’il est fait de boîtes
de contenu, ce n’est pas la solution idéale pour les écrans de petite taille, comme ceux des téléphones
intelligents. Pour tenir compte des utilisateurs de petits écrans, les représentants de l’organisme vous ont
demandé d’empiler les boîtes de contenu de manière à ce que l’on puisse les faire défiler à la verticale. De plus,
les options du menu de navigation supérieur (Accueil, Explorer, Jouer, Planifier et Recherche) doivent être
regroupées sous un bouton unique pour les écrans de téléphones intelligents; vous devez faire en sorte qu’elles
apparaissent à la verticale lorsque l’utilisateur cliquera sur le bouton ou le touchera.
Tourisme Nouveau-Brunswick attend avec impatience que vous lui présentiez votre design accessible, moderne
et souple pour remplacer son site Web vieillissant!
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 8
Dernière mise à jour : 2016-03-02
INSTRUCTIONS
•
Sur votre bureau, créez un dossier appelé « XX_Module_B »; « XX » est votre numéro de concurrent.
•
Enregistrez les fichiers sources dans ce dossier (XX_Module_B).
BARÈME DE NOTATION DU MODULE B
Vos travaux seront évalués en fonction des critères suivants :
Points
Un design comportant des boîtes à
défilement vertical du même type que
les illustrations d’écran fournies est
présenté.
4
Le menu de navigation contient cinq
options disposées à l’horizontale :
Accueil, Explorer, Jouer, Planifier et
l’icône de recherche.
2
Une zone de recherche apparaît lorsque
l’utilisateur clique sur l’icône de
recherche ou fait glisser le pointeur de la
souris dessus; elle contient une boîte de
texte et un bouton de recherche.
2
La zone de recherche disparaît lorsque
l’utilisateur clique n’importe où à
l’extérieur de celle-ci.
2
Le menu de navigation et la zone de
recherche sont similaires à ceux des
illustrations fournies.
2
Le design est suffisamment adapté pour
un ordinateur, une tablette et un
téléphone intelligent.
4
Les boîtes du design s’empilent
verticalement sur les appareils qui ont
un écran de petite taille.
4
Les options du menu de navigation sont
regroupées sous une icône unique sur
les appareils à petits écrans. Le menu
se déploie lorsque l’utilisateur clique sur
l’icône et se cache lorsqu’il clique de
nouveau dessus.
4
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 9
Dernière mise à jour : 2016-03-02
Module C
INTRODUCTION
Le module C mettra à l’épreuve vos compétences et vos connaissances en ce qui concerne les fondements de
l’utilisation du langage PHP et d’une base de données MySQL pour modulariser un site Web statique.
DESCRIPTION DU PROJET ET DU MODULE
Votre tâche consiste à utiliser un langage de script côté serveur (PHP) et le système MySQL pour
créer un site Web modulaire dynamique au moyen du modèle HTML5 sensible fourni. Le site devrait
comprendre au minimum les directives INCLUDE suivantes (pages PHP distinctes qui seront
intégrées à une page principale pour créer un modèle très modulaire ayant des composantes
réutilisables) :
•
•
•
•
en-tête (header.php)
pied de page (footer.php)
menu de navigation (nav.php)
section contenu (content.php), qui affichera de façon dynamique le contenu d’une page choisie
par l’utilisateur.
Le contenu des pages, les éléments du menu de navigation et les renseignements d’en-tête (par. ex.
le titre et le sous-titre du site) devraient tous être récupérés dans la base de données MySQL de façon
dynamique au moyen des instructions d’appel PHP appropriées.
Outre le site dynamique décrit ci-dessus, le produit final doit comporter une section « Réservé aux
membres » accessible par l’entremise d’un écran d’ouverture de session avec nom d’utilisateur et mot
de passe. Une fois authentifié, un utilisateur du Web doit être capable de naviguer dans la section
réservée aux membres jusqu’à ce qu’il ferme sa session. Le processus d’authentification doit
permettre de comparer le nom d’utilisateur et le mot de passe fournis par l’utilisateur aux données de
la table « membres » dans la base de données MySQL. Il est important que les mots de passe soient
stockés de façon sécuritaire dans la base de données.
Une base de données MySQL appelée « modulec » ainsi que toutes les tables nécessaires et le
contenu associé vous seront fournies. Utilisez le contenu comme bon vous semble, mais veillez à ce
que le site soit dynamique et à ce que le contenu soit récupéré de la base de données au moyen des
instructions d’appel PHP appropriées.
Une attention particulière doit être portée à la sécurité du site du point de vue du codage, par exemple
il faut empêcher les injections SQL provenant des formulaires envoyés.
INSTRUCTIONS
•
Sur votre bureau, créez un dossier appelé « XX_Module_C »; « XX » est votre numéro de concurrent.
•
Enregistrez les fichiers source dans ce dossier (XX_Module_C). Enregistrez les fichiers INCLUDE dans
un dossier « inc ».
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 10
Dernière mise à jour : 2016-03-02
BARÈME DE NOTATION DU MODULE C
Vos travaux seront évalués en fonction des critères suivants :
Points
La solution présentée témoigne
clairement de l’utilisation de directives
INCLUDE côté serveur dans un but de
modélisation (pour créer des modèles).
15
L’en-tête, le pied de page, le menu de
navigation et le contenu sont insérés
dans des fichiers d’inclusion (INCLUDE)
secondaires.
6
Tout le contenu est enregistré dans une
base de données MySQL et peut être
récupéré à partir de cette base.
6
Les utilisateurs qui possèdent un
compte sont capables de s’y connecter.
Les adresses de courriel et les mots de
passe utilisent des éléments de forme
appropriés, et la validité des données
saisies est vérifiée aussi bien du côté
client que du côté serveur.
6
Les mots de passe des utilisateurs sont
chiffrés de manière appropriée.
6
La base de données est conçue et
normalisée de façon satisfaisante.
15
Une injection SQL peut être évitée.
6
Olympiades 2016 – Projet d’épreuve
17 – Conception de sites Web
Page 11
Dernière mise à jour : 2016-03-02