Avancement TFE | suivi 05

Céline Genco
May 6 · 4 min read

Bonjour ou bonsoir ? Je ne sais plus, en tout cas les jours passent. Mon projet est sur le point de devenir concret, j’ai la forme, le support, le concept, tout se met petit à petit et étape par étape en place.

Quid? Je pose les autres articles présentant les états d’avancements précédant, ici:

— Rapport I

— Rapport II

— Rapport III

—Rapport VI


La page de présentation du sujet

Yes, j’ai encore changé d’avis pour la couleur de fond de ma landing page. Maintenant, et pour le projet final, c’est le fond qui va changer de couleur tout aux du site web et non plus la sphère. Celle-ci est une forme svg, point d’accroche, de contraste qui sert à attirer et guidé l’utilisateur lors de sa lecture.

Image for post
Image for post
Version finale et décliner en version desktop / mobile — Maquette Adobe XD

Une des pages pour que vous puissiez voir plus précisément l’ambiance générale:

Image for post
Image for post
Pages “La méthode” du projet du site OCO.

Le contenu une fois validé et adapté je suis passer au code. Pour l’instant pas de problème majeurs rencontrés, je peaufine les animations des svg.


L’interface du suivi de temps

Une fois les avis et remarques récolter par mon A/B testing de ma web app, j’ai enfin l’aspect esthétique et fonctionnel, il n’y pas qu’à la coder. J’avais déjà dans un premier temps créé un suivi de temps en JavaScript, je vais donc combiner les deux en passant au côté pratique, le code.

Image for post
Image for post
Version A — Designer sur Adobe XD
Image for post
Image for post
Version B — Designer sur Adobe XD

Après plusieurs avis et remarques constructives j’ai pu adapter et créer une proposition plus claire et simpliste. J’ai mis en priorité la compréhension et l’accessibilité des fonctionnalités. J’ai choisi un design épuré car ma thématique se veut justement sur la concentration et je ne voulais pas “encombrer” de visuels superflus et du coup, distraire mon utilisateur.

Communiquer et stocker des donnés avec un serveur

J’ai réalisé une démo afin de m’assurer de comprendre le fonctionnement et d’estimer la faisabilité côté réalisation de l’objet connecté, c’est-à-dire communiquer avec un ESP qui lui reçoit des données d’une interface web. J’ai créée un test pour communiquer avec un serveur, en l’occurrence mon hébergement de site pour ce test, afin de lui envoyer des données et les stocker lorsque l’on rafraîchit la page… Cela m’aie très utile et intéressant pour la suite du développement pour les fonctionnalités de ma web app.

Accrochez-vous c’est un peu technique.🤸🏻‍♀️

Voici le processus décrit dans les grandes lignes: il y a un formulaire (HMTL), permettant de sélectionner une couleur (Valeur GET), celle-ci une fois sélectionné est mémorisé (PHP) et inscrite dans un fichier .txt dans le même environnement de ressources de fichier car lorsque l’utilisateur va quitter et revenir sur cette page sa couleur sera toujours sélectionné, c’est le code en JavaScript qui va questionner le serveur et rechercher la valeur dans le fichier .txt.


Pour les jours à venir c’est du code qui m’attend. La page de présentation en cours de finition, il me restera à coder l’application mobile, la relié à mon Arduino et imprimer en 3D mon support qui me fera office de lampe. Donc “il n’y a plus qu’à”.🧗🏻‍♀️

Mon mon parcours d’avancement en détails:


Pour conclure cet article, en regardant de manière global mon avancement je suis contente de voir que je n’ai pas choisi ma zone de confort concernant la manière dont je conçois ce projet. Il est pour moi un vrai challenge et je suis contente de m’être dirigé vers de nouvelles choses qui me permettent d’expérimenter et d’apprendre encore de nouvelles techniques qui puissent ce combiner au code. J’ai constamment été et je suis enthousiaste à l’idée de mon projet. J’ai hâte qu’il soit réalisé afin de le présenter! 🚀

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store