WebDev-FR

Le gros problème de Silverlight, c’est qu’il nécessite un plugin sur le navigateur du client pour fonctionner.

Pour éviter ce désagrément, l’auteur de pleased precariously propose une librairie JavaScript appelée Firelight (toujours en cours de développement) dont le rôle est de prendre du XAML et du WPF en entrée et de générer à aprtir de ça du SVG / JavaScript / DOM équivalent.

Une petite démo ? ça se passe ici (fonctionne pour l’instant sous Firefox 3.x, Safari 3.1.2 et sous Ipod).
La démo se base sur ce fichier XAML.

Le site Six Revisions a publié 8 techniques afin de réaliser des graphiques en utilisant uniquement des CSS.

1. CSS for Bar Graphs

   Le blog Apples to Oranges propose trois examples de graph. Le premier, Basic CSS Bar Graph, utilise un <div> pour contenir le graph et un élément <strong> remplir un certain pourcentage de la barre du graph. Six Revisions suggère d’utiliser un <p> plutôt que le <strong> afin d’avoir une valeur plus correcte d’un point de vue sémantique.

   Voir la démo.

2. Accessible Data Visualization with Web Standards

   Cette seconde technique est proposée par Wilson Miner sur A List Apart. L’objectif est d’obtenir des graph accessibles et respectueux des standards à partir d’une structure relativement simple. L’article propose trois affichages différents : sous forme de graph horizontal classique, sous forme de timeline ou encore en format réduit pour faire plus ou moins office d’icone.

   Voir la démo du graphe horizontal.
   Voir la démo de la timeline.
   Voir la démo de la version réduite.

3. CSS Vertical Bar Graphs

   
   Cette troisième technique, qui ressemble fortement à celle proposée par Apples To Oranges, est proposée par Eric Meyer qui présente ici un graphique vertical basé sur une liste non-ordonnée.
   

4. Creating a graph using percentage background images

   Cette solution est proposée par maxdesign et a la particularité d’utiliser des images de fond pré-créées. Chaque image est associée à une valeur précise pour le graph, par exemple 20% ou 40%. Cette technique est très limitée car elle limite le nombre de valeur affichables à moins d’augmenter le nombre d’images de fond. Par ailleurs, la multiplication des images entraîne également une multiplication des requêtes HTTP pour les charger par le navigateur.

5. Pure CSS Data Chart

   
   Ce graph vertical se base sur une liste de définitions et a l’avantage de proposer l’affichage de la valeur au centre de chaque barre.
   Voir la démo.

6. CSS Scatter Plot

   
   Parmi tous ces exemples de graph, en voici un sous forme de nuage de points. Cette technique proposée par John Graham-Cumming permet d’avoir des points clickables, idéal si on veut faire pointer chaque point vers des informations additionnelles.

7. Definition List Bar Chart

   
   Comme son nom l’indique, ce graph horizontal se base sur une liste de définitions. Cette technique utilise une classe par valeur et utilise un pourcentage de la largeur pour gérer l’affichage.

8. Accessible Bar Chart


Cette dernière technique repose sur une table et une image dont on fait varier la largeur pour gérer l’affichage des barres horizontales du graph.