La demande
Pour ce projet de semestre 5, il nous a été demandé de réfléchir puis de réaliser un projet web ou numérique sur le thème de l’altérité. Nous disposions de 10 jours pour concrétiser un projet original, abouti et à la hauteur des 10 jours dont nous disposions. Ce projet devait à terme être mis en ligne et présenté pendant 10 minutes devant un jury qui poserait à la suite de ces 10 minutes, 5 minutes de questions.
La proposition
Un site web qui change de couleur selon la météo et qui permet à l’utilisateur de se géolocaliser pour avoir accès à différentes informations : ville, météo, températures actuelles, maximales et minimales de la journée. D’autres données sont accessibles : météo, heures, actualités, informations diverses de trois pays aléatoires, petite question de culture générale et distance qui séparent les capitales des trois pays et l'utilisateur.
Ma méthode
L’altérité est un sujet assez abstrait, mais en même temps très vaste qui permet de laisser libre court à son imagination. J’ai choisi de concevoir un site web qui permet de se connecter avec l’autre quel que soit son pays via des données universelles comme la météo. L’objectif est de découvrir les autres cultures de manière interactive et originale.
Pour commencer, j’ai imaginé la maquette de mon site sur Figma ainsi que 7 harmonies colorées pour les 7 temps de la météo possible afin que le site puisse changer de couleur une fois l’utilisateur localisé. J’ai voulu créer un site coloré et moderne qui inspire la vitalité et la positivité.
Puis, j’ai intégré le front end de mon site sur Nuxt.js avec le préprocesseur SASS. A chaque chargement de la page, l’utilisateur est relocalisé et l’API OpenWeatherMap donne la météo chez ce dernier. Selon cette information, une palette de couleur spécifique est injecté dans les composants.
Ensuite, j’ai créé ma propre base de données contenant les informations de 15 pays sur Firebase. Lors du chargement du site, trois pays sont tirés au sort dans cette BDD et leurs données respectives sont injectées dans le composant.
J’ai utilisé l’API QuizzAPI pour générer et afficher la question de culture générale et ai mis en place un programme permettant d’afficher un message en cas de mauvaise ou bonne réponse.
Enfin j’ai intégré une carte interactive qui localisent les trois capitales, l’utilisateur et j’ai fait un petit programme qui calcule avec des formules mathématiques les distances entre les capitales et l’utilisateur. L’utilisateur peut découvrir cette information au survole des marqueurs.
L’ensemble de mon application est responsive.