La start-up Booki envisage de créer un site web permettant aux utilisateurs de rechercher des hébergements et des activités dans la ville de leur choix.
Dans le cadre de ce projet, ma responsabilité était de réaliser l’intégration de l’interface utilisateur en utilisant HTML et CSS. Ce travail a été effectué en collaboration étroite avec Sarah, la Directrice Technique (CTO), et Loïc, le designer d’interface utilisateur (UI Designer).
J’ai reçu un courriel de Sarah m’informant sur les dernières avancées du projet :
Bonjour,
Ça y est, Loïc a finalisé les maquettes desktop, tablette et mobile du site ! Tu vas pouvoir les intégrer. Elles sont disponibles en pièces jointes sur Figma. Pense à te connecter à Figma pour pouvoir voir toutes les informations sur les éléments de la maquette.
Tu trouveras également en pièce jointe le dossier contenant toutes les images à utiliser sur le site.
Pour que le projet soit très clair, Loïc et moi t’avons préparé une note de synthèse qui regroupe les spécifications et contraintes techniques à respecter (voir pièce jointe).
Pour que nous puissions consulter le site une fois fini, il faudra que tu crées un dossier, compressé au format ZIP, avec :
- un fichier “index.html” contenant l’ensemble du code HTML du projet ;
- un dossier “CSS” comprenant un ou plusieurs fichier “style.css” contenant l’ensemble du code CSS du projet ;
- un dossier “images” contenant l’ensemble des images utilisées.
Bon courage pour ce projet, et bonne journée !
Sarah, CTO @Booki
Note de Synthèse
La présente note de synthèse détaille les spécifications fonctionnelles et techniques pour le développement du nouveau site de Booki, telles que validées par l’équipe Produit. Le respect de ces directives est crucial pour la réalisation du projet.
Spécifications Fonctionnelles
- Fonction de Recherche
- Permet aux usagers de rechercher des hébergements dans la ville de leur choix.
- Intégration d’un champ de saisie éditable par l’utilisateur, inséré dans un formulaire. La fonctionnalité de recherche proprement dite n’est pas requise à ce stade, l’objectif étant de valider l’interface.
- Liens “Hébergements” et “Activités”
- Ces éléments textuels, situés dans l’en-tête, sont des liens menant respectivement vers les sections “Hébergements à Marseille” et “Activités à Marseille”.
- Cartes d’Hébergements et d’Activités
- Chaque carte doit être intégralement cliquable. Utiliser
href="#"
pour simuler un lien.
- Chaque carte doit être intégralement cliquable. Utiliser
- Filtres de Recherche
- Possibilité de filtrer les hébergements par thématiques (ex. budget, ambiance).
- Les filtres doivent changer de couleur lors du survol par la souris. Ils ne sont pas fonctionnels pour cette version.
Spécifications Techniques
- Limites de Largeur
- Fixer une largeur maximum de 1440 px pour le contenu, avec des marges blanches de chaque côté au-delà. Une largeur minimum de 1025 px est établie, en prévision d’adaptations futures pour tablettes et mobiles.
- Bibliothèque d’Icônes
- Utiliser Font Awesome pour les icônes.
- Palette de Couleurs
- Bleu (#0065FC), Bleu Clair (#DEEBFF), et Gris (#F2F2F2) sont les couleurs officielles.
- Police de Caractères
- Raleway, disponible via Google Fonts.
- Mise en Page
- L’utilisation de Flexbox est recommandée.
- Balises Sémantiques
- Privilégier l’usage des balises sémantiques essentielles telles que “header”, “nav”, “main”, “section”, “article”, et “footer”.
- Validité du Code
- Le code doit passer les validateurs W3C pour HTML et CSS, sans intégrer de styles CSS dans le HTML. Favoriser les classes CSS pour le ciblage d’éléments.
- Compatibilité Navigateurs
- Assurer la compatibilité avec les dernières versions de Google Chrome et Mozilla Firefox.
- Restrictions
- Aucun framework CSS ou préprocesseur CSS n’est autorisé. L’utilisation de JavaScript est également exclue.
- Date: mai 31, 2022
- Categories: Formation JavaScript ReactFormation WordPressHTML5/CSS3
- technologies: HTML5
- CSS3
- maquette: LINK
- github: LINK
- hebergement: VERCEL
- url: booki.jeremyteurterie.com