L'APP CASCADE

Année de BUT n°2 - Développement Web - Réalisé en 2026

Dans le cadre de ma seconde année au sein de la formation au BUT MMI de l’IUT de Toulon, j’ai créer un équipe une application web mobile destiné à guider les visiteur du site naturel de Sillans-la-cascade : L’app Cascade (SAE 4.00). ( AC22.03 - Co-construire une recommandation stratégique (en structurant un plan d’action) + AC24.03 - Intégrer, produire ou développer des interactions riches ou des dispositifs interactifs)

Notre application, commandité par le département du Var, a été crée en mobilisant nos compétences en développement web (HTML, CSS, JS), notamment en utilisant GitHub pour partager notre code facilement (AC24.06 - Configurer une solution d’hébergement adaptée aux besoins + AC24.02 - Mettre en place ou développer un back office).

Génèse

projet de l’App cascade commence en Avril 2026 où notre promo a été invité par le département du Var à visiter le site de Sillans-la-cascade afin de récolter le plus d’information possible sur le lieu. Le but était de proposer un dispositif de médiation pour informer les visiteurs.

Nous rapidement commencé imaginer les fonctions de l’application comme une bibliothèque des espèces et une carte interactive. Nous avons ensuite crée un wireframe (un squelette du site) pour organiser le contenu des pages de l’application. À cause du manque de réseau sur le site, il a été décidé de permettre aux utilisateur de télécharger les données de l’application avant leur visite.

La maquette suivie ensuite avec l’élaboration de l’identité visuelle en parallèle.

Maquette Figma de différentes pages

L’identité visuelle

Nous décidèrent de suivre les pas de notre commanditaire en reprenant certaines couleurs de la charte graphique du département du Var : le vert et le jaune. Nous y ajoutèrent deux nuances de bleu afin de représenter l’eau de la cascade.

Évolution des logo conçus pour l'application de du premier au dernier (celui qui sera choisi)

Pour le style général de l’application, nous choisirent d’adopter l’esthétique Neo brutaliste. Le style de l’application utilisant plusieurs couleurs vives, cette esthétique nous parut naturelle afin d’éviter de rendre l’application enfantine.

Nous avons également choisi d’utiliser une mascotte, Frisby, afin de rendre l’expérience plus conviviale. (AC23.02 - Définir une iconographie (illustrations, photographies, vidéos) + AC23.03 - Créer et décliner une identité visuelle (charte graphique))

Mascotte conçu par Océane Groux

Développement de l'application

Une fois la maquette complétée, l’application fut développé avec une combinaison de Visual Studio Code et GitHub. Je fus en charge d’intégrer les bases du style de l’application comme les boutons, le header, le footer, etc. Évidemment, nous veillèrent à ce que les pages soient responsive pour que tous les modèles de smartphone soient pris en charge. Une fois l’entièreté des pages conçus, je mis en place un système de traduction des pages utilisant un fichier JSON central des contenu texte de l’application (AC24.04 - Modéliser les traitements d’une application Web). Nous avons également optimisé les pages de l’application en utilisant des balises adaptés (AC24.05 - Optimiser une application web en termes de référencement et de temps de chargement).

Conclusion

Notre application a été présenté face à un jury composé de deux professeurs de la formation et de plusieurs membres de l’administration du site. Les retours furent très positifs.

Globalement, ce projet fus une joie. J’ai beaucoup peaufiné mes compétences en développement web. J’ai néanmoins du utiliser l’IA à certaines moments, mais j’ai néanmoins gardé la main sur les réponses. Malgré quelques problèmes rencontrés comme des fonctionnalités qui n’ont pas pu être implémentés, je suis très satisfait du résultat.