Cette semaine, création des interfaces graphiques pour le web, c’est à dire des sites non dynamiques en HTML et CSS. L’objectif est de coder l’architecture HTML d’une page web simple pour smartphone dans le respect des bonnes pratiques mais aussi d’appliquer les grands types de mises en forme sur vos éléments HTML à l’aide du langage CSS. Il faut gérer le positionnement de ces éléments grâce à une technique de mise en page très connue nommée flexbox.
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
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.
Réaliser un premier sprint d’une semaine centré sur les spécification fonctionnelles décrites plus bas. Produire un site mobile. Rendre é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