SCNC13-17-Website Development Project-FR - Copy...

19e Olympiades canadiennes des métiers et des technologies 2013 - Création de sites Web

Module A -‐-‐-‐2 heures à 30 points Au module A, les concurrents concevront le prototype d’une ou plusieurs pages de site Web.

Aperçu de la tâche

Les concurrents obtiendront un ensemble de paramètres et de matériels numériques à utiliser dans la construction d’un « modèle en grandeur réelle » d’une ou plusieurs pages de site Web. Les spécifications générales de conception leurs seront données, y compris les exigences en matière de contenu (texte et images), de couleurs et de choix d’image de marque (logos).

Exigences

Les modèles de pages seront évaluées en regard des caractéristiques suivantes :

• la mesure dans laquelle la conception est conforme aux spécifications précisées; • la mesure dans laquelle la conception complète le contenu sans le congestionner; • la mesure dans laquelle le contenu est organisé de manière logique, lisible et utile; • la mesure dans laquelle la conception utilise efficacement les titres, les en-‐têtes, les

graphiques et le texte; • la mesure dans laquelle la navigation est facilement identifiable et intuitive; • les manifestations de créativité, d’originalité et de professionnalisme.

Résultat final

Un fichier d’images statiques (en format JPG ou PNG 24 de haute résolution) de la conception ainsi que des fichiers sources utilisés (PSD, AI, etc.).

Autres informations

Un prix sera accordé pour les conceptions que le public aura préféré. Le résultat du vote du public n’aura pas d’incidence sur l’évaluation des projets par les juges.

19e Olympiades canadiennes des métiers et des technologies 2013 -‐ Création de site Web

Spécifications du projet

Client : Le Seawall Grill

Description : Le Seawall Grill est un restaurant gastronomique de fruits de mer qui attire les fins gourmets. Le restaurant est situé dans un milieu urbain, mais sa salle à manger principale offre une vue sur l’océan Pacifique. Même si le restaurant se spécialise dans les plats de fruits de mer, il est aussi fier de la qualité élevée de ses steaks, de ses plats d’accompagnement et de ses desserts. Il propose aussi une gamme impressionnante de grands crus.

Logo :

Polices de caractères du logo :

Abadi MT Condensed Light Perpetua Titling MT

Schéma de couleurs spécifié par le client :

En plus du blanc (#FFFFFF), le client désire conserver le schéma de couleurs ci-‐dessous afin de rester conséquent avec son identité visuelle. La dominance des couleurs n’est pas indiquée et est laissée à la discrétion du concepteur. Les variations d’opacité (transparence) sont permises en autant qu’elles ne s’écartent pas de façon importante du schéma donné.

2

Schéma de couleurs du client

19e Olympiades canadiennes des métiers et des technologies 2013 -‐ Création de site Web Dimensions de page :

Le site a 978 pixels de largeur. La hauteur de page peut varier, mais un défilement excessif pour voir le contenu sera considéré indésirable.

Texte de la page :

Pendant 15 ans, le Seawall Grill a constamment mérité et maintenu sa réputation de restaurant de Vancouver primé et le « meilleur restaurant de fruits de mer en ville ». Des gourmets des quatre coins du monde s’attendent évidemment à une expérience culinaire exemplaire dans ce haut lieu du fruit de mer de style californien où l’on ne ménage pas les efforts pour dépasser les attentes et offrir une hospitalité, une variété et une qualité insurpassées.

Ce restaurant de renom de Vancouver est bien situé près du centre-‐ville et offre, par les grandes fenêtres de sa salle à manger, une vue sur l’océan Pacifique. Les Vancouverois et les visiteurs viennent savourer les fruits de mer les plus frais et des steaks âgés à la perfection, avec une carte de vins impressionnante de plus de 400 crus.

En peu de mots, la qualité, l’excellence du service et une cuisine exceptionnelle qui sont l’apanage des légendes. Et c’est ce à quoi vous pouvez vous attendre à chaque visite au restaurant The Seawall Grill. Il nous fera un grand plaisir de vous servir.

Navigation :

Les options de menu de navigation suivantes sont requises :

• Accueil

• À notre sujet

• Contactez-‐nous

• Réservations

• Menus

• Spéciaux

• Prix

La navigation peut se faire à l’horizontale ou à la verticale. Le système de navigation peut se situé à l’endroit où le concepteur juge qu’il fonctionne le mieux.

3


Mise en place du texte et des images :

Le choix et la disposition des images sont laissés au choix concepteur. La conception devrait être conforme à la description du client indiquée précédemment. Le texte indiqué doit figurer sur la ou les pages requises.

Si le concepteur désire ajouter du texte qui selon lui complétera la conception, il peut le faire, mais en n’oubliant pas que les juges détermineront l’utilité de ces ajouts

Exemples de types d’images qui pourraient être fournis :

En plus d’une gamme d’images facultatives, les concurrents obtiendront une copie du logo dans un fichier Adobe Illustrator® (.ai). Il est permis de manipuler les couleurs en autant que le schéma de couleurs soit respecté.

4


Module B -‐ 3 heures à 20 points

Évaluation Vous devrez créer un gabarit à l’aide des logiciles HTML, CSS et Javascript qui fonctionnera soit avec Joomla ou WordPress. Vous obtiendrez un logiciel standard d’installation de Joomla et WordPress avec le module d’installation du contenu standard. Vous obtiendrez aussi les fichiers PSD qui vous donnera l’aperçu du gabarit lorsque vous aurez terminé la conception.

Exigences Exigences CMS :

• Fonctionne avec Joomla 2.5+ ou WordPress 3.4+ • Capacité d’ajouter, supprimer et modifier les options

du menu • Capacité d’ajouter des pages • Capacité d’ajouter des modules à différents endroits

dans le module

Exigences du gabarit :

Figure 1 – Voir : Field_House_Mockup-‐MAIN_initial_release.pdf

• S’ajustera lorsque du contenu supplémentaire est ajouté à une page. • Aura le même aspect que l’image fournie. • Aura les mêmes positions de module que les noms d’emplacement de module du gabarit.

Résultat final À la fin, vous devriez avoir un gabarit complet qui peut être utilisé avec n’importe quelle installation Joomla ou WordPress.

Autres informations Le gabarit doit fonctionner avec les dernières versions de IE et Chrome.

5


Module C – 2,5 heures à 25 points

Évaluation • Vous allez devoir modifier une structure MVC simple en adaptant le contrôleur, le modèle

et la vue pour intégrer une nouvelle page à une application php/mySQL. On vous remettra une structure MVC fonctionnelle connectée à une base de données mySQL.

Exigences • Capacité de coder en PHP/mySQL

• Capacité d’intégrer PHP à HTML

• Capacité de manipuler une structure MVC

Résultat final • À partir de la nouvelle page il sera possible :

o d’accéder au menu

o d’interagir avec la base de données

o d’interagir avec les variables de session

Autres informations La nouvelle page affichera et modifiera une base de données existante.

6


Module D – Tests de vitesse – 0,5 heure à 5 points Créer un script PHP aussi rapidement que possible qui résoudra un problème d’intégration donné. Le problème pourrait être l’un des suivants : une erreur de syntaxe, une erreur logique ou simplement, de concevoir la solution pour un problème algorithmique. Il s’agira de trouver une solution optimalisée et bien structurée.

Évaluation Le concurrent sera évalué en fonction du nombre de problèmes qu’il peut résoudre dans un laps de temps de 30 minutes. Les problèmes ne seront pas dévoilés avant la tenue de l’épreuve.

Exigences • Trouver une solution qui donne un résultat exact • Produire une solution optimale et bien structurée

7


Module E -‐ JavaScript – 3,5 heures à 20 points

Évaluation

On vous remettra une page HTML préconstruite de style CSS. Vous disposerez d’un mini API construit en PHP et qui se raccordera à une base de données MySQL déjà installée. Vous devrez créer le JavaScript pour ajouter les fonctionnalités, mais sans rafraîchir la page.

On vous remettra les logiciels jQuery, Prototype et Mootools. Vous pouvez utiliser l’un ou l’autre de ces logiciels ou utiliser le JavaScript natif.

Une tâche consiste en la création de date, la modification de la date et du contenu. L’API a trois fonctions principales. Rapportez-‐vous à la section d’appels API du présent document pour les détails.

Exigences • Les appels aux fonctions API devraient se faire à l’aide de AJAX • Votre application devrait être en mesure :

○ D’ajouter une nouvelle tâche ○ De supprimer une tâche

• Avec la confirmation de JavaScript ○ De modifier une tâche

• en cliquant sur une tâche, vous pouvez modifier son contenu en mode dynamique

• Afficher les tâches à l’aide de AJAX dans une table ○ Nous devrions être en mesure de rafraîchir les tâches

• Animations ○ Ajouter des effets qui amélioreront l’expérience de l’utilisateur

Résultat final

À la fin, vous devriez avoir un système de tâche entièrement fonctionnel à l’aide des versions les plus récentes d’Internet Explorer et Chrome. Le système devrait être disponible à quiconque du public (sans authentification).

Appels API

Voici la liste des appels API que vous pouvez faire sur les tâches.

8


Voie Méthode Paramètres Type de sortis

/api/task.json Json

GET Auncun paramétre

Produit une liste des tâches dans un format [{ “id”: “1” “created_at” : “1362422709” “modified_at”: “1362422709” “content”: “this is a note” }, { “id”: “2” “created_at” : “1362422726” “modified_at”: “1362422726” “content”: “this is a second note” }]

/api/tasks.xml GET Aucun paramètre Produit une liste des tâches en format XML.

<?xml version=”1.0” encoding=”UTF-‐8” ?> <tasks>

<task> <id>1</id> <created_at>1362422709</created_at> <modified_at>1362422709</modified_at> <content>this is a note</content>

</task> <task> <id>2</id>

<created_at>1362422726</created_at> <modified_at>1362422726</modified_at> <content>this is a second note</content>

</task> </tasks>

/api/task/id.json GET id = id de la tâche Produit une seule tâche en format JSON. {

“id”: “1” “created_at”: “1362422709”, “modified_at”: “1362422709”, “content”: “this is a note”

}

/api/task/id.xml

G E T

id = id de la tâche

content = le

Produit une seule tâche en format XML.

Voir le format JSON.

9

contenu de la tâche

{

“id”: “3” “created_at”: “1362423138”, “modified_at”: “1362423138”, “content”: “this is a new task”

}

/api/task.xml POST content = le contenu de la tâche

Produit la tâche nouvellement créée en format

XML. Voir le format JSON.

/api/task/id.json PUT id = l’id de la tâche content = le nouveau contenu pour la tâche

Produit la tâche modifiée en format JSON.

{ “id”: “3” “created_at”: “1362423138”, “modified_at”: “1362423249”, “content”: “this is a modified task”

}

/api/task/id.xml PUT id = l’id de la tâche content = le nouveau contenu pour la tâche

Produit la tâche modifiée en format JSON.

Voir le format JSON.

/api/task/id.json DELETE id = l’id de la tâche à supprimer

Retourne true si

supprimé. {“removed”:

true} /api/task/id.xml DELETE id = l’id de

la tâche à supprimer

Retourne true si supprimé. <?xml version=”1.0” encoding=”UTF-‐8” ?> <task> <removed />

</task>

SCNC13-17-Website Development Project-FR - Copy...

Documents

Transcript of SCNC13-17-Website Development Project-FR - Copy...