Site mobile (uniquement) crée après avoir suivi des cours OpenClassrooms.

Projet à rendre : TerreDeGeek

TerreDeGeek SARL est une entreprise familiale de vente de produits électroniques (téléphonie, informatique, produits dérivés etc.) dont le siège se situe à Evreux et qui jusqu’à maintenant n’avait que des points de vente physiques. Elle détient à l’heure actuelle 40 % du marché en Normandie. Elle est not amment présente à Dieppe, Forge les eaux, Louviers et Alençon. Quel est l’ADN de TerreDeGeek ? L’entreprise est née d’une volonté, proposer du matériel et des produits dérivés de qualité dans un cadre jeune et dynamique. Son directeur Mr Dermain réfléchit à lancer son activité dans le e commerce pour partir à la conquête de nouveaux marchés, son ambition ? Devenir le leader de la vente de produits électroniques dans l’ouest de la France. Pour cela il a contacté votre agence afin qu’elle lui produise un site e commerce statique qui lui permettra de mieux se représenter le rendu final du site avant d’investir éventuellement de plus grosses sommes d’argent dans la réalisation d’un site e commerce fonctionnel en PHP. Vous allez réaliser un premier sprint d’une semaine centré sur les spécifications fonctionnelles décrites plus bas. Vous produirez un site mobile. Vous rendrez également les documents de maquettage, à savoir les wireframes et l’arborescence des pages du site (ou sitemap en anglais).

Spécifications fonctionnelles

• Présence d’un header avec un titre, d’un menu de navigation et d’un footer avec les mentions légales sur l’ensemble des pages
• Accès à une sélection de 3 produits sur la page d’accueil sous forme de cartes avec les informations essenti elles du produit (image, nom, prix et courte description)
• Possibilité de visualiser le détail d’un produit en cliquant sur sa fiche, l’utilisateur arrive alors sur une page dédiée au produit
• Présentation de l’entreprise sur une page dédiée à l’entreprise

Spécifications techniques

• Structure du site en HTML5
• Usage d’un BoilerPlate
• HTML sémantique
• Présence de commentaires en anglais pour faciliter la lecture du code
• Définition d’une charte graphique cohérente (3 couleurs maximum)
• Design moderne et élégant avec un CSS maintenable
• Respect du principe DRY
• Présence d’un favicon
• Code HTML et CSS passés au validateur
• Site mis en ligne via une GH page
• Projet géré via un outil de type Kanban

UPDATE

Ajout de features et du responsive

Spécifications fonctionnelles :

• Les pages de l’application sont accessibles, cohérentes et utilisables quelque soit le support de navigation (smartphone, tablette, ordinateur)
• Possibilité de contacter l’entreprise via une page dédiée avec un formulaire
• Le formulaire demande les informations suivantes : nom et prénom, numéro de téléphone, email, âge, objet du contact sous forme de dropdown, message. Les objets de contact sont : information, réclamation, partenariat, autre
• Les vérifications de sécurité suivantes sont effectuées : les champs nom, email, objet et message sont obligatoires. Il faudra vérifier que l’utilisateur entre un numéro de téléphone et un email valides. Le nom et le prénom font entre 2 et 40 caractères.
• Sur la page dédiée à l’entreprise une vidéo intégrée avant ou à coté du texte de l’entreprise présente l’entreprise (choisissez simplement une vidéo youtube sur une entreprise)
• Sur une page prestations, un tableau liste les prestations réalisées par l’entreprise avec leur tarif et le nom de la personne en charge.
• Voici la liste des prestations : réparation de smartphone phone, réparation de tablette, réparation d’ordinateur, commande spéciale, impression 3D.
• Sur le site l’utilisateur trouve des icônes et des polices chargées par des librairies externes

Spécifications techniques :

• Réalisation de wireframes pour toutes les versions du site
• Structure du site en HTML5
• Usage d’un BoilerPlate
• HTML sémantique
• Présence de commentaires en anglais pour faciliter la lecture du code
• Définition d’une charte graphique cohérente (3 couleurs maximum)
• Design moderne et élégant avec un CSS maintenable
• Respect du principe DRY
• Présence d’un favicon
• Code HTML et CSS passés au validateur
• Site mis en ligne via une GH-page
• Usage des media query pour la gestion du responsive