L’objectif de se dispositif était d’aller plus loin que l’objectif de l’exercice précédent c.f (le rapport de l’exercice 5) Ce nouveau dispositif est sa continuité. Le but est encore de familiariser n’importe quel public aux merveilles de notre système solaire et à ses dimensions difficilement appréhendables pour le cerveau humain. Ce dispositif permet aux utilisateurs d’en prendre une meilleure mesure grâce à son interactivité et à ses animations. Il offre cette fois, en plus d’une représentation de la distance au soleil, la vitesse de circonvolution (le temps que met une planète pour faire le tour de son étoile) ainsi que la taille des différentes planètes. Il y a aussi la possibilité à travers un graphique de pouvoir plus facilement comparer ces différentes caractéristiques entre elles.
Ce dispositif se veut principalement interactif et visuel, surtout à travers l’animation qui permet de captiver l’attention de l'utilisateur. Dans ce dispositif l’utilisateur peut, à choix, grâce aux interactions, se concentrer sur la vitesse de circonvolution, la taille ou la distance au soleil et mieux appréhender grâce aux animations les dimensions gigantesques de notre système solaire mis à l’échelle dans ce dispositif. Il peut ensuite, en cliquant sur le nom des planètes avoir des données quantifiées correspondant aux valeurs réelles des planètes sélectionnées afin de pousser un peu plus loin sa curiosité. Dans la deuxième partie du dispositif, l’utilisateur peut comparer les planètes qu'il souhaite entre elles à l’aide d’un graphique de type radar. En sélectionnant les planètes qui l’intéresse, le graphique lui permet de se rendre compte des différences et des similitudes entre les différentes planètes. Ce graphique permet à l'utilisateur de visualiser certains “paterns” qui se dégagent, comme par exemple le rapport entre la distance et la vitesse de circonvolution.
Je savais déjà que je souhaitais poursuivre sur le thème que j’avais choisi pour l’exercice précédent. (cf. exercice 5. Je voulais trouver un moyen de mieux rendre compte des dimensions folles de notre système solaire. Pour réaliser ce dispositif, j’ai pu à l’aide de “third party code” trouver une simulation de notre système sur un codepen disponible en licence MTI réalisé par un certain Julian Garnier, qui presque uniquement à l’aide de CSS rendait compte, à l’échelle, de notre système solaire à travers une animation. J’ai donc emprunté son code libre de droit et me suis confronté à la première difficulté: Utiliser ce code destiné à l’affichage sur un codepen pour que celui-ci fonctionne sur un navigateur. Après plusieurs tentatives infructueuses, j’ai fini par réussir en me rendant sur son Github et en trouvant le code permettant un affichage sur navigateur. J’ai ensuite lu son code pour essayer de mieux le comprendre et ai traduit celui-ci au français pour correspondre à un public francophone. J’ai tenté de trouver et d'insérer les fichiers sources (dont les images) et les différentes bibliothèques utilisées (JQuery) sous la forme d’assets, pour pouvoir les téléverser sur le serveur tecfa, comme demandé. Mais au vu de la complexité du code, et après plusieurs essais empêchant l’affichage correct des animations, j’ai décidé de laisser les liens aux sources telles qu’il était dans le code original afin de garantir un affichage des animations fonctionnel. J’ai cependant mis deux liens en “commentaires” car ils affichaient une erreur au chargement de la page car le navigateurs ne trouvait pas ces fichiers. De plus, ils n’étaient pas mis à dispositions dans les fichiers que j’ai pu récupérer sur le codepen. Comme il n'empêchait pas l’affichage correct du dispositif, j’ai choisi de les “enlever”. Je n’ai pas réussi cependant à empêcher la barre de navigation de se déplacer partout sur la page et de passer sur les sections où se trouvent le graphique et le footer lorsqu'elle suit le “scrolling” de l’utilisateur. (seulement en affichage suffisamment grand) Comme il était demandé dans les consignes de ne pas utiliser Jquery comme bibliothèque mais que je souhaitais vraiment réutiliser l’animation de Julian Garnier pour sa grande efficacité d’animation et d’interactivité au niveau pédagogique, j’ai décidé d’y ajouter un graphique grâce à une autre bibliothèque javascript: Chart.JS ce qui me permettait de répondre au contraintes de l’exercices et d’ajouter une possibilités de comparaisons intéressantes entre planètes. J’ai donc choisi d'ajouter un graphique permettant de comparer les caractéristiques des planètes entre elles. Le type de graphique qui selon moi permettait le mieux de faire cela est un graphique de type radar. Lorsque j’ai voulu ajouter la bibliothèque je me suis heurté à plusieurs problèmes, en effet la bibliothèque n’est plus “construite” automatiquement une fois téléchargée. Il faut passer par des lignes de commande pour pouvoir l’installer. Après plusieurs échecs, j’ai choisi de suivre les recommandations de la documentation disponible sur chart.js Je cite :”If you download or clone the repository, you must build Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is strongly advised.” et suis donc passé par le CDN.
J’ai choisi l’animation de Julian Garnier car selon moi elle permettait de rendre compte de façon interactive et de manière animée de l’immensité de notre système solaire ce qui lui procure selon moi un potentiel pédagogique conséquent. Je ne regrette pas ce choix bien que la mise en page a été très difficile. Travailler avec le code de quelqu’un d’autre que l’on ne comprend pas dans son entièreté est très compliqué. Il se trouve que l’animation et la barre de navigation se trouvaient toujours au premier plan et que tout ce que je tentais d’ajouter, que ce soit le graphique ou le footer se retrouvaient au second plan, derrière l’animation et absolument pas où je m’attendais à les trouver sur la page. Le footer se trouvait tout en haut de la page comme s’il ne prenait pas en compte l’animation et le graphique se trouvant au deuxième plan se voyait privé de son interactivité. Après avoir fait plusieurs essais en changeant certaines propriétés de la balise “universe” (“z-index:1” et “position: absolute”), qui se sont toutes soldées par des animations qui ne s'affichent plus. J’ai donc décidé de “tricher” et j’ai créé une balise vide de la taille approximative de l’animation. Ce qui m’a permis de placer les contenus comme le graphique ou le footer au endroit prévus à cet effet. Les possibles adaptations qui pourraient être apportées à ce dispositif sont selon moi au nombre de trois. Il serait intéressant de proposer un petit quizz qui permettrait aux utilisateurs d'approfondir leur connaissances ou de leur apporter plus de précisions sur le système solaire, avec des questions du type:” Pourquoi pensez-vous que les planètes gazeuses se trouvent en périphéries du système solaire?” La seconde adaptations que je souhaiterais ajouter serait de proposer plus de graphiques, ceci permettrait aux utilisateurs une meilleure visualisation des données. La dernière adaptation mais qui relève d’une complexité certaine au niveau du code, serait de permettre l’animation du déplacement du système solaire autour du centre de notre galaxie. Les gens oublient souvent que le système solaire n’est pas statique et que bien que les planètes tournent autour de notre étoile, tout le système solaire tourne, lui aussi, autour de la galaxie. En résumé, bien que ce dispositif possède des forces, comme sa capacité à permettre une bonne visualisation du système solaire grâce à ses animations, je pense que le gros point faible de mon dispositif par rapport à l’exercice précédent est que celui-ci ne permet pas à l'utilisateur de tester ses connaissances, Il serait donc intéressant d’y ajouter un petit quizz comme mentionné plus haut. De plus, le graphique permet certes une comparaison entre les différentes planètes mais selon moi, il faudrait en rajouter au moins un supplémentaire qui permettrait un différent type de visualisation des données.
w3schools: w3schools pour les questions sur CSS
Aucune autre image que celles déjà présente dans le code et le codepen de Julian Garnier n'ont été utilisée.
Le code utilisé pour l'animation du système solaire est de Julian Garnier et est sous license MIT. Un lien ci-dessous mène à sa page personnelle Github ainsi qu'au codepen repris dans ce dispositif.