olympiades canadiennes des métiers et des technologies · 2018-02-05 · javascript ( jqueryui )...

Olympiades canadiennes des métiers et des technologies Projet

17 – Conception de sites Web | Niveaux secondaire et postsecondaire 27 - 30 mai 2015 – Saskatoon

Olympiades 2015 – Projet 17– Conception de sites Web

Projet secondaire - Module A, B Projet postsecondaire - Module A, B , C RENSEIGNEMENT SUR LE PROJET PRÉPARATOIRE :

Ce document contient le projet préparatoire « PRE-RELEASE» de l’épreuve deConception de

site Web # 17 . Il y aura des changements importants entre ce projet et celui présenté à

Saskatoon .Ce projet préparatoire est un bon guide pour votre entrainement.

RENSEIGNEMENTS SUR L'INSCRIPTION :

Si un concurrent du niveau secondaire sent qu'ils sont en mesure de compléter le module C , ils

peuvent s’inscrire pour compléter ce module . Les concurrents du niveau secondaires

indiqueront s’ils complèteront le Module C au début de la compétition.

INFORMATIONS SUR LA REMISE DES MÉDAILLES :

Des médailles seront remises aux trois meilleures notes pour les concurrents du niveau

secondaire. La note globale est déterminée à partir des résultats combinés pour les modules A

et B. Pour les concurrents du secondaire qui choisissent de compléter le module C ; les

résultats du module C ne seront pas inclus pour établir la distribution des médailles pour leur

niveau.

Des médailles seront remises aux trois meilleurs concurrents du niveau post-secondaire avec

les résultats combinées des modules A, B et C.


Design Module A INTRODUCTION

L’aquarium de Saskatoon nouvellement construit s’apprête à ouvrir ses portes au public. L'établissement propose une grande variété d'expositions aquatiques comprenant des écosystèmes marins d’eau douce et d’eau salé. Les aquariums contiennent des créatures marines du monde entier,mais un accent privilégié sur les espèces autochtones de la province et spécialement sur la conservation des zones humides des prairies.

Un site Web est nécessaire pour mettre en valeur les différentes attractions et programmes de l'aquarium en plus de fournir un point de vente pour les billets, passe de saison et autres produits. Le public cible du site: • les résidents de Saskatoon • les visiteurs et les touristes • les établissements d'enseignement locaux / provinciaux et les groupes scolaires DESCRIPTION DU PROJET ET MODULE

Votre tâche est de créer un logo et deux images plein écran représentant une maquette d'un site Web pour l’Aquarium fictif de Saskatoon. Le texte et les images à utiliser vous seront fournis pour votre conception. Vous n'êtes pas obligé d'utiliser toutes les images ou texte fournis. L’objectif est de donner une bonne idée du site une fois construit. Pour contribuer à la qualité de la maquette, vous êtes libre de modifier les images fournies et le texte mais le contenu du texte ne sera pas pris en considération lors de l'évaluation du travail.

Pour le module A, il s’agit de concevoir (2) pages d'un site web et un logo pour l'Aquarium de Saskatoon. Chacune des pages du site devraient inclure les éléments suivants :

• Un logo qui sera l’identité de l'organisme. Le logo doit être utilisé dans le cadre de votre conception. Votre logo doit représenter l'organisation et le sujet du site.

• Système de menus contenant les principaux liens de navigation:

• Page d'accueil / Accueil comprend les éléments suivants : o Logo que vous avez créé o Champ de recherche et le bouton o Twitter RSS Sidebar o Système de menus o Texte – Bienvenue o Bannière animée (utiliser une image statique, mais étiqueter " Bannière animée"


• Expositions o Poissons de la Saskatchewan o Don pour l’exposition o Formulaire pour les donateurs, les champs d'entrée suivantes

§ Valeur des dons § Nom du donateur § Adresse du donateur § Numéro de téléphone du Donateur § Courriel du donateur

• Bouton Soumettre

INSTRUCTIONS AU COMPÉTITEURS

Le module A doit être achevé en un temps de 3 heures comme indiqué dans l’horaire descompétitions . BARÈME

Votre page sera évalué sur la base des critères suivants :

Critère Objectif Subjectif Total

Création et intégration Web

multimédia

2.5 2 4.5

Planifier et designer pour le Web

6 4.5 10.5

Total 8.5 6.5 15

Intégration module B INTRODUCTION Un concepteur de l’aquarium de Saskatoon a créé un design (maquette) pour leur site Web . L'aquarium souhaite aller de l'avant avec cette conception et de voir une version entièrement fonctionnelle. Votre tâche est de mettre en œuvre la conception du site à partir de la maquette que l’un des cadres a mis à votre disposition.Vous devrez réaliser à partir de la maquette un site totalement fonctionnel en HTML5, CSS3 et le Framework BootStrap. La capture d'écran ci-dessous affiche la page d'accueil de l'aquarium. Le but de cette page est double: offrir aux visiteurs la même expérience utilisateur moderne et agréable qu'il éprouverait lors de la visite de l'aquarium et de présenter aux visiteurs les annonces que l'aquarium voudrais présenter. En outre , la conception finale , doit être totalement réactive « responsive » et ne demandera aucun défilements horizontale pour accéder au contenu.


Figure 1 - Ordinateur de bureau

Figure 2 - Mobile Figure 3 - Tablette


La première chose à noter est la mises en page différente pour l'écran large des ordinateurs du bureau «desktop» (Figure 1), pour l'écran mobile (Figure 2) et l'écran Tablette (Figure 3). Tous les éléments de menu seront visibles sur un ordinateur de bureau. Certains éléments de la vue ne pourront plus s'afficher ou apparaîtront différemment à mesure que la dimension de l'écran diminue. La zone du menu de navigation sera suivi d'une zone annonçant les différentes activités de l'aquarium pouvant intéresser les visiteurs du site Web. La dernière zone de la page d'accueil contiendra trois éléments: Les heures d'ouverture pour les six prochains jours, une liste de quatre événements spéciaux à venir et les dernières nouvelles. Les éléments du menu et les autres éléments de la page devront être sensible à la dimension des écrans (ordinateur de bureau, tablette et mobile) INSTRUCTIONS AU COMPÉTITEUR

Le «framework» Bootstrap sera fourni pour réaliser ce module

BARÈME D'ÉVALUATION

Votre page sera évalué selon la grille suivante: Critère Objectif Subjectif Total

Implémentation 18 7 25

Total 18 7 25

Ce module sera évalué dans Google Chrome, en résolution plein écran sauf si spécifié

autrement dans le projet final.


Programmation client/serveur – Module C INTRODUCTION

Dans le cadre d'une promotion des olympiades canadiennes des métiers 2015, Compétences Canada souhaite développer un jeu interactif sur le Web qui pourrait-être incorporé à leur site Web . Tout en s'amusant, le jeu permettra de mettre en évidence un certain nombre d'icone représentant les métiers participants. Pour souligner le défi, les dix meilleurs résultats seront affichés

DESCRIPTION DU PROJET

Votre tâche sera de développer et de mettre en œuvre un jeu de mémoire en utilisant HTML5 , JavaScript ( jQueryUI ) et CSS3 . L'objectif du jeu est de retrouver l'emplacement de chacune des pièces cachés, le plus rapidement possible.

Le jeu sera composé de 24 cases d'image individuels (tuile) , pour un cadre maximum de 6 cases x 4 cases ( 6 cases par rangée , 4 cases par colonne ) . Toutes les images de tuiles seront fournies. L'utilisateur peut choisir entre trois niveaux de difficultés : • Facile : 4 x 3 tuiles ( 12 tuiles au total) • Intermédiaire : 4 tuiles x 4 tuiles ( 16 tuiles au total) • Expert : 6 x 4 tuiles ( 24 tuiles au total) Les figures de tuiles sont sélectionnées à partir d'une banque de figures, glisser et déposer vers le cadre du jeu. Les figures sont positionnées aléatoirement sur le cadre du jeu Le joueur pourra expérimenter les actions suivantes:

1. Les joueurs peuvent cliquer sur une tuile pour révéler, par rotation, l'image cachée. 2. Une deuxième sélection se fait dans une tentative de trouver le carreau correspondant. 3. Si les tuiles correspondent, leur faces restent révélé. 4. Toutefois , si elles ne correspondent pas, elles pivotent rapidement pour cacher leur

face. 5. Une fois que l'ensemble des tuiles a été détecté, un message " Félicitations " est affiché

à l'utilisateur ainsi que la possibilité de redémarrer le jeu. 6. Une horloge affiche le temps (en secondes) depuis le début jusqu'à ce que toutes les

tuiles aient été trouvées. La durée totale de la partie sera comptabilisée «note». 7. Chaque partie sera produite par une configuration aléatoire des tuiles choisies. 8. La «note» d'un utilisateur sera enregistrée dans une base de données en utilisant Ajax. 9. Les 10 meilleurs résultats seront affichés.


Exemple:

INSTRUCTIONS AUX COMPÉTITEURS

• Les librairies serveur ne peuvent pas être utilisées dans ce module - la codification PHP devra être développé à partir de rien

• Les librairies (jQuery, jQueryUI, mootools, propotype) peuvent être utilisées et seront fournies • Vous pouvez utiliser la structure de stockage que vous voulez (base de données ou fichiers) • La communication entre client et serveur devra être réalisé avec Ajax


CRITÈRES D'ÉVALUATION

Ce module sera évalué dans Google Chrome , plein écran sauf indication contraire dans une

description des aspects particuliers .

Votre application sera évaluée selon les critères suivants:

Critère Objectif Subjectif Total

Éléments de jeu et fonctionnalités

20 20

Fonctionnement du jeu - incluant expérience utilisateur (qualité de l'animation de rotation

d'image)

10 10 20

Structure de données, qualité de codification et

sécurité

20 20

Total 30 30 60

olympiades canadiennes des métiers et des technologies · 2018-02-05 · javascript ( jqueryui )...

Documents