Application Web
Exercices & Contacts
Hôpital du Valais · Mandat fictif · 2024
Le TPI (Travail Pratique Individuel) est l'examen final du CFC de Médiamaticien. Le mandat fictif, attribué par le CPNV : développer une application web responsive pour l'Hôpital du Valais, permettant aux patients de consulter des exercices de rééducation par groupe musculaire et de localiser le centre médical le plus proche.
Le projet couvre l'intégralité du cycle — des premiers wireframes Adobe XD jusqu'au site fonctionnel HTML, CSS, JavaScript et PHP, relié à une base de données SQL, en passant par des maquettes haute fidélité Figma déclinées mobile et desktop.
Avant toute ligne de code, les wireframes Adobe XD posent la structure fonctionnelle de chaque écran : accueil avec logo et navigation, sélection du groupe musculaire, recherche de contacts, résultats par hôpital (physiothérapie / ergothérapie), et profil membre avec sa liste d'exercices. Ces maquettes basse fidélité définissent l'architecture de l'information et la navigation avant toute décision visuelle.
Une fois les wireframes validés, j'ai travaillé les maquettes haute fidélité Figma intègrant l'identité visuelle de l'hôpital — rouge #c31a1f, gris #858585, rose pâle #efc3c4 — typographie, iconographie, photo d'ambiance. Le design est décliné sur deux supports : desktop (laptop) et mobile (iPhone). La structure one-page s'inspire directement des sites officiels de l'hôpital ainsi que des standards du web dans le domaine médical.
Le site est développé en HTML / CSS Bootstrap / JavaScript côté front-end, et PHP + MySQL via XAMPP côté back-end. L'application respecte la structure one-page avec des pages dynamiques par groupe musculaire. L'authentification, la gestion des exercices personnalisés et la recherche de centres médicaux sont entièrement pilotées par la base de données.
Le rendu final correspond fidèlement aux maquettes Figma. L'application est 100% responsive, testée mobile, tablette et desktop. Les pages d'exercices sont générées dynamiquement en PHP selon le groupe musculaire sélectionné.
La BDD compte 5 tables : membres (image, nom), Exercices (titre, description, vidéo), Utilisateurs (username, password), ListeExercices (table de jonction), et Hôpital (nom, type, adresse, n° physio/ergo). Serveur local XAMPP.