Student project from openclassrooms.com
Project : http://webagency-rjamali.com/
In English :
Web Design project : HTML5, CSS3 and Responsive Design (Media Queries).
Integrated a one page design originally made with Photoshop (the links in the page are voluntarily not functional : The project only focuses on copying the Photoshop design).
Wrote the page content.
In French :
Enoncé - Intégrer la maquette du site Web d'une agence.
Vous venez d'être embauché(e) par une agence Web, la WebAgency, qui réalise des sites web pour différents clients. Cependant, ils reconnaissent eux-mêmes que leur site actuel est vieillissant car ils ont peu de temps pour travailler dessus. Certes, il paraît que les cordonniers sont les plus mal chaussés, mais tout de même...
On vous propose donc, pour votre première mission, de vous occuper de la refonte du site de l'agence.
Le site doit tenir sur une page avec un menu qui reste visible, en haut de la page, meme lorsque l'on se déplace dans la page. Les différentes sections attendues sont :
Un premier écran d'accueil de bienvenue, très visuel
La liste des services offerts par l'agence
Des exemples de projets déjà réalisés
Une carte avec un formulaire de contact (on ne vous demande pas de faire marcher le formulaire, juste de l'afficher).
Le site sera réalisé en HTML et CSS (sans framework tel que Bootstrap).
J'ai une bonne et une mauvaise nouvelle.
La mauvaise, c'est qu'on vous "fait confiance" pour rédiger le texte de présentation de WebAgency. Il va donc falloir rédiger un peu. 😉
La bonne, c'est que vous ne partez pas de rien : le graphiste vous a déjà concocté une petite maquette, ce qui va grandement vous aider ! Voici les différentes sections : ---- Images sections -----
Encore mieux : le graphiste a effectué un premier découpage des fichiers de la maquette pour vous ! Vous n'avez plus qu'à réaliser l'intégration.
N'oubliez toutefois pas d'adapter le rendu pour vos visiteurs utilisant des terminaux mobiles.
Télécharger les fichiers découpés
Livrables attendus Une fois votre page terminée, vous devez l'héberger. Vous pouvez utiliser l’hébergeur de votre choix, à la condition qu’il n’ajoute pas de publicité dénaturant votre page. Certains fournisseurs d’accès proposent un hébergement adapté tout comme des sites comme Heroku, Hostinger, Free, Nexgate, Github Pages ou Google Sites.
Notre partenaire 1&1 offre 2 mois d'hébergement gratuits aux étudiants pour toute souscription à un pack d'hébergement (plus d'infos).
Vous devez également livrer les éléments suivants :
Code source complet du projet (HTML/CSS et tout autre fichier nécessaire, zippés) URL de la page hébergée Support de présentation tel que défini pour la 2ème partie de la soutenance. Les 2 premiers livrables devront être déposés sur le site au plus tard 48h avant la soutenance. Le support de présentation devra obligatoirement être présenté pendant la soutenance.
Soutenance La soutenance se déroule en 3 étapes :
Dans un premier temps, votre mentor jouera le rôle de votre directeur technique lors d’un débriefing de 15 minutes sur les travaux réalisés. Dans un second temps vous utiliserez votre support de présentation pour présenter, dans un temps compris entre 8 et 10 minutes ce que vous avez compris du rôle d'intégrateur web et en quoi votre réalisation répond bien à ce rôle les difficultés rencontrées et comment vous les avez résolues les perspectives d’amélioration : comment feriez-vous évoluer l’application si vous étiez libre d'en fixer les contraintes ? Enfin, votre mentor reprendra pleinement son rôle de validateur pour un échange Questions/Réponses compris entre 5 et 10 minutes. Référentiel d'évaluation La validation du projet implique l'acquisition de l'ensemble des compétences qui y sont associées
Chaque compétence est validée si tous les critères d'évaluation définis dans ce référentiel sont validés.
Pour ce projet, la validation sera effectuée par un mentor validateur.
Votre mentor accompagnateur vous inscrira pour cette soutenance dès que vous aurez défini une date de complétion de ce projet.
Définir le contenu d'une page web à partir d'une maquette L'ensemble du contenu défini par la maquette est présent Le contenu texte est pertinent et grammaticalement correct L'aspect visuel correspond à la maquette sur écran d'ordinateur La maquette est adaptée de manière pertinente sur un terminal mobile Les sliders et onglets ne sont pas nécessairement fonctionnels. JavaScript n'est pas requis pour ce projet.
Coder la structure d'une page web en HTML La page HTML passe la validation w3c HTML sans erreur Les balises HTML sont définies avec la sémantique HTML 5 pertinente Les icônes sont crées avec un outil pertinent, type font-awesome Coder la présentation d'une page web en CSS Le code CSS passe la validation w3c CSS Le code CSS est écrit dans un ou plusieurs fichier CSS Aucun code CSS n'est appliqué via un attribut style dans une balise HTML La zone avec le menu reste visible, en haut de la page, même lorsque l'on se déplace dans la page Gérer la responsivité avec les Media Queries Le viewport est configuré dans l'en-tête de la page HTML (Au moins) Un breakpoint pertinent est défini Des règles CSS @media et/ou des feuilles de styles dédiées identifiées par un attribut mediasont utilisées Aucun Framework (type Bootstrap) n'est utilisé pour ce projet Présenter une réalisation de manière professionnelle La soutenance est préparée La tenue et l'attitude sont appropriées Le support de présentation est soigné, respecte la structure imposée et le temps imparti Le temps de présentation est respecté Les réponses aux questions sont pertinentes Votre mentor est là pour vous conseiller et vous faire progresser. Certaines notions (sérieux, soin, ...) comportent une part de subjectif. Acceptez les conseils et apportez les modifications demandées s'il y en a.
Le mentor validateur a pour mission de ne valider une compétence que lorsque tous les critères sont validés ! Si tous les critères ne le sont pas, apportez les modifications demandées dans le temps qui vous est imparti.
Si vous êtes amenés à effectuer une autre soutenance, prenez-cette décision comme une opportunité pour progresser. La décision du mentor validateur est finale.
Compétences à valider Gérer la responsivité avec les Media Queries Coder la présentation d'une page web en CSS Présenter une réalisation de manière professionnelle Définir le contenu d'une page web à partir d'une maquette Coder la structure d'une page web en HTML