Pour ce projet de la SAE 303, j’ai choisi de choisir de faire des statistiques sur la santé mentale des étudiants car cela me touchait personnellement et je souhaite aussi faire réagir d’autres personnes.

J’ai donc commencé par me documenter sur les sites officiels de la santé étudiante. Mais à cause des résultats pas si concluant, je décide de commencer mes recherches en anglais car les résultats statistiques sont plus concluants. Cela à tout de même été complexe, les données ne correspondaient pas, ou cela n’était pas la bonne date ou encore des données déjà consultées.

Mais j’ai tout de même réussi à récolter mes petites informations en rapport avec mon sujet.

Après avoir fait une fiche métier sur le métier de développeur web, nous avons fait une vidéo présentant ce métier. Nous avons donc fait un générique pour notre vidéo. Etant donnée que cette vidéo sera publié sur le site de MMI, nous avons fait un générique présentant le texte suivant :

« MMI Mulhouse présente… L’observatoire des métiers »

Notre générique doit être général pour pouvoir correspondre à chaque vidéo mais aussi à chaque parcours. Nous avons décidé de faire quelque chose de simple mais agréable à voir, plutôt sombre et coloré. Nous animons le texte en le « surélevant » puis des petites boules tombent pour captiver les spectateurs. Nous enchainons les plans du générique par des cercles de différentes couleurs pour faire une transition agréable.

Après avoir récoltée mes différentes données, je dois réfléchir à la façon de les afficher étant donnée que je dois faire un site web en one page. Etant une fan des palettes de couleurs colorées, je m’arrête sur une palette plutôt sympa mais malheureusement trop joyeuse pour mon sujet. Puis me viens l’idée de combiner ces couleurs joyeuses à une palette de couleurs sombre et triste.

Le but étant de passer à un moment joyeux puis de découvrir la triste vérité de la santé mentale des étudiants dans une ambiance sombre. Tout cela justement car beaucoup de personnes ne connaissent pas la vérité sur la charge de travail de ces étudiants.

Après avoir écrit le scénario de la vidéo, nous avons tourné. Malgré le fait que cela était très compliqué dans une entreprise car elle possède des horaires, nous avons réussi à trouver un créneau et surtout tourner assez rapidement.

Pour une vidéo à la « Bref. », il nous faut beaucoup de plans d’insert, et très peu de plans longs de plus de 10 secondes. La particularité de « Bref. » c’est d’être court, donc nous avons fait un maximum de plans même à en avoir de trop (ce qui n’arrive très souvent jamais…).

Pour faire ces plans efficacement, nous avons emprunté à l’IUT le Ronin. Le Ronin est un outil fantastique permettant de stabilité très facilement la caméra mais surtout de suivre son mouvement. Cet outil était indispensable pour pouvoir faire de bons plans d’insert très rapidement.

Après avoir fini de tourner, nous avons dérushé nos plans et les mettre dans le bon sens. Vient ensuite la plus grosse partie : le montage. Nous avons utilisé tous nos beaux plans d’insert pour pouvoir les ajuster en fonction de la voix d’Anissa. Puis on finit avec le traitement de son qui est très important pour notre vidéo. C’est enlever les bruits de fonds, mettre des gates pour enlever les petits sons ne servant à rien. En résumé, rendre la voix belle est surtout sans bruit autour.

Après avoir trouvé mon idée, je commence la maquette Figma me permettant de réfléchir sur la position des données dans ma page.

Le plus important est de placer les données dans le bon ordre. J’ai donc fait un plan permettant d’avoir les données les plus générales au départ, puis en terminant sur des données plus précises et choquantes. Un peu comme le bouquet final.

Le but étant de faire passer un message, je n’ai pas hésité à accentuer le problème pour pouvoir faire réagir les visiteurs.

J’ai de même décidé de faire une petite blague en fin de page mais tout aussi puissante pour encore une fois, bien faire passer le message !

Rentrons en détail sur les différents visuels de données ainsi que les animations et interaction. En restant sur la même charte graphique choisie au départ, j’ai réfléchi sur la façon de représenter des données en graphique. Mais il faut tout de même que cela ne soit pas que des tableaux ou graphiques tout simple.

J’ai donc décidé de commencer avec des petites animations simples sur des chiffres clés, ou sur les différents facteurs de cette mauvaise santé mentale. Puis j’ai réalisé mon premier « graphique » qui est une foule cliquante permettant de savoir qui sont ces personnes tant touchés. Et nous découvrons donc que ces personnes dite « différentes » e le sont pas et sont comme tout le monde.

Je continue ma page avec d’autres chiffres clés puis je passe au gros graphique. Ce graphique est une simple courbe permettant de voir très facilement l’ENORME augmentation de la mauvaise santé mentale chez les étudiants à travers ces dernières années. C’est un graphique qui a pour but de choquer et de faire réagir.

Toutes ces animations sont faites en SVG, en plus d’être un format idéal pour le web, il est très modulable pour l’animation. Mais j’en parlerai plus dans l’ AC 24.03.

Vient la partie la plus intéressante, le développement web du site. Tout d’abord, avec mon groupe, nous avons commencé par créer un projet sur GitHub nous permettant de travailler en collaboration. A chaque grosse modification on fait une transaction de notre code, appelé commit. Puis les autres collaborateurs peuvent téléchargé le projet avec les dernières modifications.

Après s’être préparé, place à la programmation. Nous avons codé avec la structure de MVC (Model View Contrôler), ce qui est une façon d’organiser ses fichiers. Chaque fichier a sa propre fonction ce qui fait que pour les gros projets, il est plus simple de s’y retrouver.

Nous commençons par la version mobile du site, nous permettant de faire du responsif. Nous avons donc programmé la partie HTML, CSS et JavaScript pour l’intégration.

Puis vient la création de la base de données pour les différents biens sur le site web. Cela va permettre notamment d’afficher un immense nombre de biens seulement en programmant une seule page type. Mais aussi de faire fonctionner les fonctionnalités tel que le filtre ou encore les favoris.

Pendant ce temps-là, c’est la version ordinateur qui commence. Toujours en intégration, la page se construit plus vite étant donné que l’intégration de la version mobile avait été terminé.

Puis nous terminons par les détails pour l’expérience utilisateur tel que des boutons pour revenir à la page précédente, un bouton pour remonter en haut de la page…

Maintenant que je sais quelle est la forme de mon site ainsi que son contenu, je passe à la programmation. Je commence par faire la version ordinateur et créer ma structure HTML en respectant les balises et la hiérarchie et en ajoutant mes SVG. Ensuite, j’ajoute le style en CSS sans animation pour l’instant. Je m’attaque ensuite au JavaScript qui correspond à une grosse partie de mon site car il va me permettre de faire de l’interactivité.

Après avoir fait les animations et interactivité que je détaille dans l’AC 24.03, j’ai programmé la version mobile. Et c’est à ce moment que les choses se compliquent. En effet la version mobile étant plus petite, certains éléments tenant dans le viewport de la version ordi, ne tient plus sur la version mobile. J’ai donc refait certains SVG notamment le graphique final car il était trop large et cela n’était pas si visible. J’ai également modifié la taille des textes, les grid et flex pour que cela tienne sur l’écran.

Les pop-up informatifs sont un problème car ils sont difficilement responsive quand on leur définit une position en fonction de la hauteur et de la largeur de l’écran. En fonction des ordinateurs et des téléphones, ces pop-up se retrouvent à des endroits différents. J’ai donc dû faire un compromis et position ces pop-up en fonction d’un résolution d’écran plus présente que la mienne.

Pour les animations ainsi que les interactivité comme le changement de palettes de couleurs, je vais faire en sorte que le style CSS change en fonction de ce qui apparait dans l’écran. Je fais donc un petit calcul simple qui prend l’élément choisi moins la taille de l’écran par rapport à sa hauteur. Je commence à m’occuper du changement de fond du site ainsi que le SVG de la Terre. J’ai pris chaque trait en SVG et j’ai changé les couleurs. Bien sûr je l’ai fait aussi dans l’autre sens (revenir aux couleurs joyeuses) pour pouvoir revenir à l’état précédant en remontant.

Je programme ensuite les animations grâce à des @keyframes en CSS qui me permettre de déplacer les SVG. Avec des dashoffset et encore des pathlength, j’ai fait en sorte que les traits en SVG commence de 0 et finissent à 100. Et je réutilise la technique expliquée plus haut avec le JavaScript pour faire mettre en action l’animation au moment où les visiteurs se trouve sur celui-ci.

Je suis passée aux graphiques comme la foule et le graphique final. J’ai fait en sorte qu’au clic de la souris, une information apparait. J’ai donc fait en sorte en JS, grâce à un addEventListener, qu’au clic, le style se modifie en display : initial. Cela permet de faire apparaitre le pop-up informatif.