Projet 2 - Reservia

Dans le cadre de ma formation chez Openclassrooms, j’ai été amené à intégrer la maquette d’un site de réservation de logement. Ce site vitrine est avant tout une maquette présentée au client dans les premières étapes du processus de création de son site internet.

Le site permettra de :

  • choisir une ville de destination,
  • accéder aux différents logements disponibles dans cette ville,
  • consulter les logements les plus populaires,
  • et connaitre les activités à faire dans la ville choisie.

 

Maquette

Voici la maquette a intégrer.

A noter que les principaux enjeux du projet (en dehors de la gestion du responsive) sont :

  • le cadrage des photos (il doit être bien fait pour donner envie aux gens de voyager),
  • le hoover sur les éléments du filtre, c’est-à-dire l’animation au passage de la sourie sur les éléments,
  • l’ancre des activités : quand on clique sur l’onglet activité du menu on arrive sur la tranche de la page d’accueil correspondante,
  • et enfin, l’utilisation d’un champ

Balises sémantiques

Une bonne écriture du code aide à maintenir le site dans la durée. C’est-à-dire l’actualiser en fonction des besoins du client et de l’évolution des moteurs de recherche.

On voit ci-dessous l’utilisation de nombreuses balises sémantiques qui contribuent à la bonne structure de notre page. Exemple avec les balises <header></header>, <nav></nav> ou <ul></ul> pour construire des listes.

Avant de ce lancer dans l’intégration d’une maquette en html et css, il est conseillé de réaliser ce qu’on appelle l’encapsulage. Ceci permet de visualiser quels éléments iront dans quels balise sémantiques.

Responsive

Le principal enjeu de ce projet est de créer une maquette 100% responsive. C’est-à-dire qu’elle va s’adapter à toutes les tailles d’écran (mobile, ordinateur, tablette). Pour ce faire on va utiliser des breaks points : quand la largeur de l’écran atteins une certaine dimension, de nouvelles règles css sont appliquées qui permettront le responsive du site.

Voici les breaks points généralement utilisés :

  • 320px à  777px de largeur pour les mobiles,
  • 778px à 1024px pour les tablettes,
  • 1024px à 2000px pour les ordinateurs.

Grâce à ces breaks points nous allons pouvoir obtenir des mises en page complétement différentes et qui s’adapte à nos écran mobile.

Flexbox

La flexbox, ou le module des boîtes flexibles en français, est utilisé en css notamment pour mettre les éléments en colonne plutôt qu’en ligne (comportement par défaut). C’est pourquoi on dit que la flexbox est une méthode de disposition unidimensionnelle. Le fait est que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne.

Cette méthode permet aussi d’utiliser flex-wrap qui va nous permettre de créer un conteneur flexible sur plusieurs lignes. En effet, on va pouvoir renvoyer à la ligne les éléments qui ne peuvent plus être contenu dans l’élément parent. Ceci aide beaucoup à obtenir un site responsive.

Unité de mesure : vw

L’utilisation de l’unité de mesure vw aide également à obtenir un design responsive puisqu’elle va s’adapter à la largeur de l’élément, contrairement au px qui ne s’adapte pas. En effet, le vw équivaut à 1/100éme de la largeur de l’écran.

Donc pour les dimensions en largeurs on préfèrera utiliser les vw plutôt que les px.

Tablette

Voici la version tablette de ce projet 2 proposé par Openclassrooms.

Site

Le résultat de l’intégration de la maquette est disponible en cliquant sur le bouton ci-dessous.utilisateur. Celui-ci prend un bord bleu et épais quand l’utilisateur clique dessus.

Mes réalisations

Venez découvrir mes autres réalisations…