Présentation du projet Booki:

Je suis ravi de vous présenter le projet sur lequel je travaille en tant que développeuse web au sein de la start-up Booki. L’ objectif est de créer un site Internet permettant aux utilisateurs de trouver facilement des hébergements et des activités dans la ville de leur choix.

Collaboration:

Je travaille en étroite collaboration avec Sarah, notre CTO, et Loïc, notre talentueux UI designer. Ensemble, nous formons une équipe dévouée pour donner vie à cette vision et offrir une expérience utilisateur exceptionnelle.

Structure du Projet:

Pour démarrer, Sarah m'a fourni une structure de fichiers comprenant un fichier "index.html" avec une base de code HTML à compléter, un dossier "css" contenant des fichiers "style.css" pour le CSS, et un dossier "images" avec toutes les images nécessaires au site.

Prochaine Étape:

Je vais m'appuyer sur cette base de code pour développer le reste de l'interface, en m'assurant de respecter les spécifications techniques et les directives de conception. Une fois mon travail terminé, je fournirai à Sarah le dossier complet pour validation.

Spécificités fonctionnels:

En ce qui concerne les fonctionnalités, les utilisateurs auront la possibilité de rechercher des hébergements dans la ville de leur choix. Le champ de recherche sera interactif, permettant aux utilisateurs de saisir leurs préférences. Bien que la fonction de recherche ne soit pas encore opérationnelle dans cette première version, elle sera intégrée dans un formulaire pour valider l'interface. Les liens "Hébergements" et "Activités" dans l'en-tête seront des hyperliens redirigeant respectivement vers les sections correspondantes. Cette facilité de navigation améliorera l'expérience utilisateur. Chaque carte d'hébergement ou d'activité sera entièrement cliquable, offrant ainsi une interaction intuitive pour nos utilisateurs. Pour le moment, les liens sur ces cartes peuvent être simulés à l'aide de l'attribut href="#". Concernant les filtres de recherche, les hébergements pourront être triés par thématique, tels que le budget ou l'ambiance. Les filtres seront également interactifs, changeant de couleur au survol de la souris. Bien que non fonctionnels dans cette version initiale, ils seront inclus pour valider l'interface utilisateur.

Spécificités techniques:

Passons maintenant aux spécifications techniques. Trois maquettes ont été développées pour les écrans desktop, tablette et mobile, respectivement. Des breakpoints ont été définis à 1024 px et 768 px pour les ordinateurs et les tablettes, tandis que tout ce qui est en dessous de 768 px sera considéré pour les téléphones. La mise en page sera réalisée en suivant une approche "Desktop First", avant de s'adapter aux tablettes et aux téléphones. Nous utiliserons la bibliothèque Font Awesome pour les icônes, et les couleurs de la charte seront le bleu, le bleu clair et le gris pour le fond. La police du site sera Raleway, disponible sur Google Fonts. Flexbox sera recommandé pour la mise en page, et l'utilisation de balises sémantiques comme "header", "nav", "main", etc., sera privilégiée pour une meilleure structure du site.