Le 12 octobre 2010

1. Présentation

Dans ce document, nous présenterons la refonte de l'interface interactive de visualisation des données météorologiques du projet de Diffusion multiformat d'informations environnementales du RALI.

Celle ci fait suite aux travaux d'Alessandro Sordoni, qui a présenté une implémentation de l'interface avec protovis, mais l'a abandonné à cause de sa complexité et de son incompatibilité avec Internet Explorer (ce dernier ne supportant pas le SVG). Actuellement, une version peu interactive est implémentée avec le plugin flot d'un framework Javascript nommé jQuery.

Alessandro Sordoni à défini le cadre du projet à http://www-etud.iro.umontreal.ca/~sordonia/scope-statement/scope-statement.html.

Le but de notre projet sera donc l'analyse et l'implémentation de plusieurs types de représentations interface graphique et interactive des données météo.

2. Description

Les données météorologiques à présenter dans la future interface graphique seront les suivantes :

  • L'indice de couverture nuageuse
  • Le type de précipitation (pluie..)
  • La probabilité du type de précipitation
  • La température
  • La vitesse du vent
  • La direction du vent

Il existe de nombreuses facons de représenter de l'information. Le but de ce projet étant de trouver la représentation la plus pertinente pour notre interface, nous en étudierons plusieurs afin d'en avoir une vue globale et de sélectionner la plus conviviale.

Nous pouvons déjà en présenter rapidement quelques unes, en mode non interactif (screenshots extraits du site de jQplot):



Représentation des données sous forme de courbe avec suivi des données via la souris.
Ce graph serait approprié pour représenter la température ou la vitesse du vent en fonction du temps.




Histogramme ou Graphique en barres empilées pouvant présenter plusieurs informations, comme la température,
la vitesse du vent ainsi que la probabilité qu'il pleuve à un certain moment.




Graphique verticalement centré sur zéro aurait l'avantage de bien mettre en avant la température, mais
ne serait pas adapté à l'affichage de toutes autres informations.
En effet, centrer le graph verticalement sur zéro met en avant un phénomène qui peut se traduire
négativement(la vitesse du vent, la probabilité qu'il pleuve ne peuvent pas avoir de valeur en dessous de 0).




Un tel graphique "chutte d'eau" est approprié pour présenter l'évolution d'une même donnée en fonction du temps.
En effet, la coloration des barres et l'affichage seul de la partie ayant variée met en avant l'évolution de l'information.



Il existe de nombreux autres types de représentation, c'est ce que nous présenterons et analyserons au cours de notre projet.

L'implantation étant sur le web, il faudra la développer de façon à ce qu'elle fonctionne aussi bien sous Firefox que sur Chrome ou Internet Explorer; c'est pourquoi nous allons nous tourner vers un framework Javascript nommé jQuery (actuellement en version 1.4.2) afin de réaliser ce travail et de faire un maximum abstraction de cette contrainte.

De plus, de nombreux plugins jQuery sont disponibles pour réaliser des graphiques, nous en explorerons quelques unes et nous choisirons le plus adapté à nos besoins (Actuellement, le plus intéressant semble être jQplot car fonctionne sur tout les navigateurs (via le composant d'HTML canvas); est facilement adaptable grâce à la possibilité de création de plugins. et aussi Open source (licence MIT et GPL version 2)).

Concernant le travail de parsage des données météos, il se fait par un script PHP développé par Alessandro Sordoni. N'ayant pas encore analysé ce script mais seulement ce qu'il produit, il se peut que nous soyons amené à le modifier afin de formater le résultat comme le nécessitera notre future librairie de création de graphiques.

3. Environnement de développement

Afin de réaliser ce projet, nous utiliserons le HTML, CSS ainsi que du Javascript (notamment le framework jQuery) pour développer l'interface cliente.
Concernant les éventuelles modifications du parseur de données, elles se feront via le langage PHP.
Les logiciels utilisés seront Notepad++ pour écrire du code, Internet Explorer 6, 7 et 8 via le plugin spoon, Safari, Google Chrome ainsi que Firefox pour tester le rendu de l'interface et Firebug (plugin de Firefox) pour débogguer le code Javascript produit.

4. Evaluation

Pour avoir des avis objectifs sur les différentes représentations, nous testerons chacunes d'entre elles par un petit groupe de personnes.

5. Modules principaux de travail
  1. Analyse du travail déjà effectué par Alessandro Sordoni, notamment au niveau du parseur XML et de l'écriture dans les fichiers des données parsées.
  2. Recherche d'un plugin jQuery permettant d'afficher des graphiques suffisamment personnalisables sous tous les navigateurs web existants (notamment Internet Explorer qui reste à ce jour l'un des plus utilisés au monde).
  3. Découverte et tests du plugin choisi afin d'en exploiter toutes les fonctionnalités.
  4. Développement d'interfaces graphiques conviviales et agréables à utiliser suivies d'argumentation sur chacunes d'entre elles.
  5. Test des interfaces graphiques par plusieurs personnes externes au projet afin d'avoir leurs impressions.
  6. Analyse des résultats obtenus et présentation de l'interface préférée des testeurs.
  7. Intégration des données générées par le script d'Alessandro Sordoni au script de création de graphiques le plus pertinent pour afficher les dernières informations météo.
  8. Tests finaux afin de nous assurer que l'application fonctionne comme prévue.
6. Plan de développement
Indicateur plan Description complémentaire Date prévue Lien vers le rapport
Date de début du projet
12 octobre 2010
a, b, c 20 octobre 2010 Rapport disponible ici
d Réalisation de 4 interfaces graphiques 9 novembre 2010 Rapport disponible ici
d Réalisation de 3 autres interfaces graphiques 16 novembre 2010 Rapport disponible ici
e, f 3 décembre 2010 Rapport disponible ici
Rapport annexe disponible ici
g 10 décembre 2010 Rapport disponible ici
Rapport annexe disponible ici
h fin du projet 15 décembre 2010 Rapport disponible ici
7. Responsable

Guy Lapalme
Professeur - DIRO
Pavillon André-Aisenstadt, Bureau 2223
Université de Montréal
Téléphone : (514) 343-6111 47493 lapalme@iro.umontreal.ca