Projet 3 - ohmyfood

Afin de valider le 3éme projet de ma formation chez Openclassrooms, j’ai intégré une seconde maquette pour présenter l’application nommée : ohmyfood. Elle permet de consulter les menus de différents restaurants. Ce site 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 un restaurant et de pouvoir consulter les différents plats qu’il propose,
  • de composer son propre menu avec les plats qui nous font envie,
  • de commander son menu dans le restaurant de notre choix,
  • de se rendre au restaurant et déguster les plats préalablement choisis,
  • de liker (aimer) les différents menus.

Maquette

Comme ce projet concerne une application on va intégrer une maquette adaptée aux mobiles.

A noter que les principaux enjeux du projet sont :

  • l’adaptation du site aux différentes tailles d’écran (tablette et ordinateur),
  • la mise en place de petites animations avec le langage de mise en forme : SASS,
  • la mise en place d’un spiner simulant le temps de chargement (animation avec une durée préalablement établie).

Animations

On peut voir dans la vidéo ci-dessous :

  • le spinner qui simule le temps de chargement de l’application avant de laisser apparaitre les différents restaurants,
  • un éclaircissement des boutons au passage de la sourie,
  • et une mini-animation des cœurs au passage de la sourie : un cœur rose et violet rempli le cœur vide.

Dans cette seconde vidéo on voit :

  • au téléchargement de la page, les différents plats qui apparaissent en décalés, les uns après les autres. On note une opacité progressive allant du transparent au opaque et un mouvement du haut vers le bas pour chacun des plats.
  • au passage de la sourie sur les différents plats, une icône « check » apparaît. On voit l’apparition d’un encadré vert avec un mouvement de la droite vers la gauche mais aussi une rotation de l’icône sur elle-même.

L’ensemble de ces animations peuvent paraitre anodine mais représentent des challenges à mettre en place au niveau du code.

Mixins

Pour aboutir à de tels animations sur un site, j’ai choisi d’utiliser SASS. Une de ses particularités est l’utilisation des mixins.

Une mixin est un morceau de code paramétrable et réutilisable n’importe où dans notre fichier SASS. Comme pour une fonction, une mixin peut prendre des paramètres;

Ci-dessous on voit l’ensemble des règles de style permettant la mise en forme du cœur en dégradé rose qui apparait au passage de la sourie.

Cette mixin est réutilisé dans le fichier SASS de notre page ‘menu’. Elle sera activée au passage de la sourie sur le cœur vide.

Keyframe

La règle @keyframes permet aux auteurs de définir les étapes qui composent la séquence d’une animation CSS. Cela permet de contrôler une animation plus finement que ce qu’on pourrait obtenir avec les transitions.

Ci-dessous on voit l’utilisation d’un @keyframes permettant de faire apparaître progressivement les différents plats de chaque restaurant et de les décaler doucement du haut vers le bas.

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. Pour rappel, la maquette initiale de ce projet est adapté aux téléphone portable principalement. Il nous reste donc à adapter notre site aux tablettes et ordinateurs.

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 utilisés pour ce projet :

  • 320px à  1024px de largeur pour les mobiles et tablette, (grâce, entre autre aux flex-wrap, le code est déjà adapté aux écrans de tablette),
  • 1024px à 1900px pour les petits et moyens écrans d’ordinateurs,
  • 1900px et plus pour les grands écrans d’ordinateurs.

Grâce à ces breaks points nous allons pouvoir obtenir des mises en page adapté aux ordinateurs.

Pages menus

Découvrez les plats des 4 restaurants pris pour modèle lors de la conception de cette mvp (=minimum viable product).

Et voici ces 4 pages en version mobile.

Soutenance

Voici les diapositives utilisées lors de mon passage de ce 3éme projet avec Openclassrooms.

Site

Le résultat de l’intégration de la maquette est disponible en cliquant sur le bouton ci-dessous.

Mes réalisations

Venez découvrir mes autres réalisations…