Exercice n°6 :

Mini Site "Géothermie"

• Mini Site sur la Géothermie

Objectifs

Ce mini site a pour but de faire acquérir des notions sur la géothermie. Il n'est pas nécessaire d'avoir des connaissances préalables sur le domaine pour le consulter. Un bon niveau de compréhension orale en langue française est néanmoins requis pour comprendre le sens des informations. Ce mini site contient des vidéos explicatives sur la géothermie, les couches terrestres, les technologies géothermiques, une carte interactive représentant les projets géothermiques en cours en Suisse, un jeu de flashcard, un exercice de drag and drop ainsi qu’un pitch pour un futur jeu vidéo. Les connaissances et la manière dont les informations sont présentées pourront être abordées dès l'âge de 13 ans ou par toute personne désireuse d'alimenter ses connaissances dans le domaine.

Design

L'arrière-plan du site est noir avec des touches de couleurs chaudes (orangés, brunes) permettant une plus grande intégration du thème de la terre. Plusieurs éléments sont proposés dans ce site dans le but de favoriser l’interaction avec l’utilisateur (vidéo, questions, drag and drop). Des raccourcis sont proposés sur la deuxième page qui correspond au sommaire. Ces raccourcis sont configurés sous forme de vignettes flottantes ou intégrés à l’image centrale, permettant d’offrir un visuel plus dynamique.

Production

Différentes librairies ont été utilisées pour ce travail : Reveal js pour les slides, Carousel sliders pour les carousel, Jquery pour le drag and drop et Leaflet pour la carte interactive.

• Pour l’image du sommaire et l’image sur les croûte terrestre :Pour l’image du sommaire et l’image sur les croûte terrestre : j’ai utilisé un calque sur inscape afin d’intégrer des liens dans un svg.
• Pour la vidéo de la croûte terrestre : J’ai au préalable enregistré les informations que je souhaitais dire pour chaque couche. Puis il me semblait plus interactif et source de plus grande motivation d’avoir un visage d’une personne qui explique ces informations plutôt que juste un canal audio. Je n’avais en revanche pas envie de me filmer moi, j’ai donc choisi une image d’un avatar sur Freepik puis je l’ai associé à mes audios via Capcut. J’ai ensuite monté les différentes mini vidéo ensemble afin de faire des points d’ancrage dans la vidéo comme vu pour Stic 4. Ainsi pour chaque clique sur l’image des couches terrestres la vidéo s’active.
• Pour la vidéo (stic 4) : J’ai apporté une modification en tenant compte de vos commentaires, La fin de la vidéo est maintenant moins brutale.
• Pour le jeu de flash card (stic 3) : j’ai également apporté des modifications avant de l’intégrer au site : les couleurs des cartes sont moins flashs, permettant une meilleure lecture, il est possible de les retourner dans les 2 sens et je les ai agrandis afin qu’elles prennent la page complète et s’insèrent correctement dans le décor.
• Pour le drag and drop : C’est LA partie qui m’a causé le plus de problème alors que je pensais que ça allait être la plus simple car je venais de faire l’exercice stic 5. Je ne sais pas ce que j’ai touché mais lors de sa réalisation tout à disparu. Après des heures des recherches et d’essai sans aucune amélioration et au bord des larmes j’ai fini par demander de l’aide à mon copain qui travaille dans l’informatique. En regardant dans inspecter il s’est aperçu que Reveal prenait 100% de son dossier parent, qui était le « main » et qui n’avait pas de hauteur. Après avoir mis une hauteur de 100% au main tout est revenu. Je n’ai absolument aucune idée de ce qui a pu se passer car les choses fonctionnaient bien avant que je fasse cette slide. Cette diapo resterait tout de même à retravailler : les cartes à déposer se superposent les unes aux autres et l’ordre des cartes n’est pas aléatoire. Diminuer le nombre de catégories permettrait d’augmenter les différentes tailles des containers et de déposer les cartes sans qu’elles se superposent. Mais le temps ici me manquait également.
• Pour la carte interactive : J’ai utilisé la bibliothèque leaflet. J’aurais aimé pouvoir détailler plus les différentes zones, mettre des marqueurs différents en fonction des projets et techniques utilisées et ouvrir les marqueurs aux projets frontaliers mais le temps m’a manqué pour cette partie. J’ai trouvé cette bibliothèque très agréable à utiliser et facile d’accès.
• Pour les carousels (points techniques et points histoires) : J’ai aussi eu des soucis ici et j’ai également dû demander de l’aide à mon copain. Les librairies rentraient en « concurrence » et empêchaient la mise en page demandée. Le ratio proposé par Reveal de 0.7 empechait certaines images et diapo de s’affichaient correctement. En mettant les échelles à 1 et en réglant manuellement les différentes tailles sur les autres diapos c’était possible d’avoir quelque chose plus harmonieux et fonctionnel.
• L’audio : est inséré dans le body afin de le faire suivre pour les différentes slides et de l’éteindre lors des vidéos.

Auto-évaluation

Je suis contente car je vois que certaines habitudes et techniques d’observations ressortent. J’ai pu débloquer des choses qui ne fonctionnaient pas, beaucoup plus rapidement que les fois précédentes (liens cassés car noms de fichiers avec des espaces/ fichiers non téléversés sur cyberduck/ ponctuations ou div non fermées, noms des classes qui n’étaient pas identiques sur html, css ou js (« s » manquant ou majuscule))

Le temps à disposition ne m’a pas permis de vérifier chacune de mes sources, ou des informations théoriques données. J’ai privilégié la recherche de la technique à la vérification d’informations.

J’ai trouvé cet exercice très intéressant car il reprend beaucoup de tout ce qu’on a étudié ce semestre et permet de constater à la fois les progrès et ce qu’il reste à travailler.

Je n’ai pas eu le temps de travailler l’adaptation du contenu aux différents écrans.

Bibliographie & Ressources

• Le site Pixabay pour la musique de fond :"Space - Space Galaxy Universe Music"
• Le logiciel Capcut pour mettre un avatar sur mes audios et faire le montage de la vidéo (merci à Mohammad Shabana de m’avoir laissé son compte pro capcut.)
• Le site Freepik et power point pour les images
• Le site map.geo.admin-ch pour des informations sur les sites de géothermie profonde
• La librairie leafletjs pour la carte interactive.
• La librairie Revealjs pour les slides.
• La librairie Owl Carousel de Jquery pour les carousels.
• La librairie Jquery pour les drag and drop.
• La vidéo Le géotherme et le gradient géothermique de la Terre Première Spécialité SVTSur les couches terrestres
• Les sources de Vouillamoz Naomi, notre commanditaire du jeux vidéo et chat gpt pour les points théoriques sur la géothermie.
• Mon copain Loïc Monney, qui a été une aide précieuse lorsque je bloquais.