STAF2X : RAPPORT EXERCICE SVG
Objectifs de la réalisation :
Mes objectifs en réalisant cet exercice étaient d'une
part d'apprendre les bases du langage SVG et de saisir sa puissance,
et d'autre part de créer un dispositif simple et dynamique dans le domaine
de la représentation de l'information. J'estime avoir réussi
à atteindre ces deux objectifs surtout en essayant diverses façon
de présenter de l'information avec SVG avant de me décider
pour mon exercice final à rendre.
Analyse des besoins :
L'exercice que j'ai effectué est un convertisseur de monnaies.
Il convertit les francs suisses vers d'autres monnaies en calculant
la valeur que l'on donne en francs suisses avec les différents
taux de change qu'on lui indique.
Ce convertisseur est très utile. Imaginons par exemple que l'on
se trouve au bord d'une plage au Mexique sur le sable blanc sous l'ombre
d'un palmier et que l'on a une petite soif. Arrive alors vers nous le
vendeur de boissons qui voit notre tête de touriste et veut nous
vendre un Coca pour 25 Pesos. On sort alors le portable, on se connecte
à Internet et on va sur mon convertisseur. En sachant qu'une
petite bouteille de Coca ne devrait pas dépasser 2.50 Frs, surtout
au Mexique où c'est moins cher bien que l'on se trouve au bord
d'une plage, en mettant la valeur 2.50 Frs on voit que le convertisseur
indique 15.48 Pesos. On est en train de se faire arnaquer! On peut donc
dire au vendeur d'aller nous chercher un vendeur qui vend ses boissons
moins cher...
Bon, tout cela n'était bien entendu que plaisanterie et bavardage !!!
L'utilité d'un tel dispositif est assez simple. La personne qui utilisera
ce convertisseur aura comme seul avantage d'avoir une représentation
visuelle des différences entre les monnaies qui sont utilisées
dans cet exercice. L'utilité pour moi est qu'il m'intéressait
davantage de représenter avec une animation SVG des données
quantifiables et de produire ainsi un exercice qui puisse par la suite
me donner peut-être des idées pour représenter d'autres
données sur graphique. Une animation de graphique comme celle-ci
peut toujouts être agréable à regarder.
Commentaires sur la réalisation :
La réalisation de cet exercice ne m'a pas posé beaucoup
de problème vu que je suis resté assez simple avec SVG.
En effet, ce langage demande un apprentissage de base mais reste très
abordable. Si l'exercice avait été de créer une
page simplement en SVG, cela aurait été terminé
très vite. En fait, c'est plutôt du côté de PHP et de XML ou
aussi MySQL qu'il faut davantage mettre l'accent si l'on veut créer
des dispositifs dynamiques. C'est d'ailleurs une fois que j'ai mis mon
langage SVG dans la page PHP que j'ai rencontré quelques problèmes
mais que j'ai pu régler assez facilement.
Design :
Du point de vue du design, j'ai surtout mis l'accent sur les histogrammes
que j'utilise dans ma représentation graphique. Je voulais qu'ils
apparaissent avec une animation et qu'ils soient sensibles lorsque l'on
passe la souris dessus, vu que la couleur change. Ensuite, Viviane m'a
fait une remarque en testant une fois mon exercice et m'a dit que ce
serait bien si la valeur apparaissait au dessus de l'histogramme que
l'on touchait avec la souris. C'était effectivement une bonne
idée à rajouter à mon exercice et j'ai simplement
chercher sur Internet un script qui me permettait de faire cela. Une
fois ce script placé, la valeur de l'histogramme s'ajoutait juste
au-dessus de la valeur indiquée par l'histogramme. J'ai trouvé
ce design assez satisfaisant pour m'arrêter là dans mon
exercice.
Difficultées rencontrées :
Les seules difficultés que j'ai rencontrées sont dans
l'écriture de la structure de base du fichier PHP qui génère
du SVG. Dès que ce problème fut réglé, le reste fut assez simple. Ensuite
il fallait surtout faire attention à ne pas oublier un point-virgule
ou une parenthèse, car cela engendrait des erreurs. Après
avoir identifié quelques erreurs de frappes de ce genre, le reste
ne posait plus vraiment de problème.
Ressources :
Les différentes ressources (polycopiés) distribués en cours
Les spécifications SVG
Le langage SVG
Scalable Vector Graphics
Convertisseur de monnaies : http://fxtop.com/fr/cnvlook.php3
|