dcaramello / terreDeGeek

Projet réalisé dans le cadre de ma formation dev web a l'afpa. Le but est de mettre en place une interface graphique statique au format mobile. En utilisant HTML et CSS.

Projet Réalisé pendant ma formation Développeur Web et Web Mobile à l'Afpa de Saint Etienne du Rouvray

Site web statique de Terre de Geek

Compétences acquises

• Réaliser un wireframe
• Réaliser un UseCase
• Commenter son code
• Coder une architecture HTML
• Utiliser les bases du HTML sémantique
• Appliquer une mise en forme basique grâce au CSS
• Utiliser des attributs
• Positionner ses éléments
• Utiliser des ressources extérieures pour les polices et les icônes
• Produire un CSS maintenable et réutilisable
• Comprendre le concept DRY

Projet a rendre : Terre de Geek

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 notamment 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écification fonctionnelles décrites plus bas. Vous produirez un site mobile. Vous rendrez également les documents de maquettage, à savoir les wireframes, l’arborescence et le diagramme usecase ou les stories.

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 essentielles 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

Pour aller plus loin

Vous pouvez:

• Intégrer des icônes via la librairie font-awesome pour faciliter la navigation et l’expérience utilisateur.
• Intégrer des fonts grâce à Google Fonts pour rendre les titres et le contenu plus accrocheurs

Projet à rendre : TerreDeGeek suite

Votre product owner est revenu vers vous cette semaine et les retours sont très bons. Mr Dermain est très satisfait du résultat de votre premier sprint et voudrait en voir plus. Il n’y donc pas besoin d’itérer sur ce qui a été produit, vous passez au sprint suivant. En discutant avec votre product owner Monsieur Dermain a demandé de nouvelles fonctionnalités pour son site. Voici ce qu’il faudra intégrer dans le nouveau sprint :

• 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écification techniques :

• Réalisation de wireframes pour toutes les versions du site
• Structure du site en HTML 5
• Usage d'un BoilerPlate
• HTML sémentique
• Présence de commentaires en anglais pour faciliter la la lecture du code
• Définition d'une charte graphique cohérente (3 couleur maximum)
• Design modern 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 reponsive

Pour aller plus loin:

• Essayer de mettre en place une transition ou une animation. Par exemple, intégrer un boutton qui grossit légèrement quand l'utilisateur le survol avec sa souris.