Module A heures à 30 points

Transcription

1 19 e Olympiades canadiennes des métiers et des technologies Création de sites Web Module A 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.

2 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é. Schéma de couleurs du client 2

3 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

4 19e Olympiades canadiennes des métiers et des technologies Création de site Web 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

5 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

6 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 o o d accéder au menu d interagir avec la base de données d interagir avec les variables de session Autres informations La nouvelle page affichera et modifiera une base de données existante. 6

7 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

8 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

9 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 : modified_at : content : this is a note }, { id : 2 created_at : modified_at : 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> </created_at > <modified_at> </modified_ at> <content>this is a note</content> </task> <task> <id>2</id> <created_at> </created_at> <modified_at> </modified_a t> <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. /api/task/id.xml GET id = id de la tâche content = le } { id : 1 created_at : , modified_at : , content : this is a note Produit une seule tâche en format XML. Voir le format JSON. 9

10 contenu de la tâche /api/task.xml POST content = le contenu de la tâche /api/task/id.json PUT id = l id de la tâche content = le nouveau contenu pour la tâche /api/task/id.xml PUT id = l id de la tâche content = le nouveau contenu pour la tâche /api/task/id.json DELETE id = l id de la tâche à supprimer /api/task/id.xml DELETE id = l id de la tâche à supprimer } { id : 3 created_at : , modified_at : , content : this is a new task Produit la tâche nouvellement créée en format XML. Voir le format JSON. Produit la tâche modifiée en format JSON. { } id : 3 created_at : , modified_at : , content : this is a modified task Produit la tâche modifiée en format JSON. Voir le format JSON. Retourne true si supprimé. { removed : true} Retourne true si supprimé. <?xml version= 1.0 encoding= UTF- 8?> <task> <removed /> </task>