juin 14

Faire un joli graphique avec google chart est un jeu d’enfant:

Lors de la rédation de son article Wordpress il suffit de cliquer sur  le rectangle qui suit ‘Insérer’ pour insérer une image puis de choisir l’option  (l’onglet)  “faire un lien vers un adresse web”

Dans le cas de l’article sur les marges et couts du e-commerce ce lien (ou URL) était:

http://chart.apis.google.com/chart?chs=480×150&chd=t:40,19.6,7,5,1,2,10,16.4&chco=FF8040,FFFF00,00FF00,00FFFF,0000FF&cht=p3&chl=Fournisseur|TVA|Frais de port|logistique|Comptable|Frais Banquaires|Marketing Pub|Marge Commercant

Explications:

chs=480×150  c’est la taille de l’image

chd=t:40,19.6,7,5,1,2,10,16.4  c’est la serie de valeurs du camember

chco=FF8040,FFFF00,00FF00,00FFFF,0000FF on en a pas besoin c’est juste pour changer les couleurs par défault

cht=p3 c’est pour avour un camember 3D

chl=Fournisseur|TVA|Frais de port|logistique|Comptable|Frais Banquaires|Marketing Pub|Marge Commerçant   c’est juste la légende

Pour avoir un camember 2D au lieu du 3D c’est cht=p :

camember 2D

camember 2D

Pour avoir un histogramme c’est cht=bvs

histogramme

histogramme

Toutes les options sur google API

avr 01

Ce petit outil vous permet d’insérer des images défilantes sur votre site.

comme par exemple:

Ce flash vous permet de faire defiler vos images, afficher une description et revoyer vers un lien de votre choix lorsque l’on clique sur l’image.

Vous pouvez juster la hauteur et la largeur  de l’encadré.

Attention les images de ne sont pas redimensionnées, il est donc préférable qu’elles aient la même hauteur.

Pour l’installer sur votre site:

  1. - téléchargez le fichier scroller_horiz.swf
  2. créez un fichier xml decrivant les images afficher, le lien pour chacune d’elle et la description
  3. ajoutez quelques ligne de html sur votre page

1) téléchargez le fichier scroller_horiz.swf

Download Gallery scroller flash Version 1.0

Downloaded a total of 141 times

le fichier devra être dezipé et sauvegardé sur votre site.

Si vous utilisez 000webhost vous pouvez créer un repertoir widgets dans /public_html/ par exemple.

/public_html/widgets/scroller_horiz.swf

2) créez le fichier xml:

C’est juste une description (text) de ce que scroller_horiz.swf doit afficher.

pour chaque image (description comprise entre <node> et </node>) on doit obligatoirement préciser ou est l’image (balise
<img_url> )  le lien de destination si l’image et cliquée (balise <link>) et le titre ou la description de l’image dans la balise <title>

dans l’exemple si dessous les images sont sous ./images/ sur le site (/public_thml/images/ sur 000webhost)

<?xml version="1.0" encoding="UTF-8" ?>
 <node>
<img_url>http://www.monsite.com/images/image1.jpg</img_url>
<link>http://www.monsite.com/monproduit1.html  </link>
<title>la description de mon image 1 </title>
</node>
 <node>
<img_url>http://www.monsite.com/images/image2.jpg</img_url>
<link>http://www.monsite.com/monproduit2.html   </link>
<title>la description de mon image 2  </title>
</node>
.
.
.

sauvegardez ce fichier avec un extention .xml par exemple myfeed.xml  et choisissez un encodage UTF-8 (avec notepad par exemple)

Faites attention a ce que votre fichier s’appelle bien myfeed.xml et non myfeed.xml.txt

transferez ce fichier sur votre site: par exemple /public_html/feeds/myfeed.xml

3) dernière étape inserez le code suivant sur la page de votre choix:

<embed allowscriptaccess=”always” bgcolor=”#ffffff” flashvars=”feed=http://www.monsite.com/feeds//myfeed.xml&amp;thumb_width=120&amp;thumb_height=120&amp;gallery_width=400&amp;gallery_height=130&amp;gallery_x=10&amp;gallery_y=0″ name=”defilimage” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” src=”http://www.monsite.com/widgets/scroller_horiz.swf” type=”application/x-shockwave-flash” wmode=”transparent” align=”middle” width=”400″ height=”130″>

il faut changer les valeurs suivantes:

feed= indique le chemin d’acces a votre fichier xml (etape 2)

src= indique le chemin d’acces à l’outils scroller_horiz.swf

thumb_width= largeur en pixel de chacune des images

thumb_height=  hauteur en pixel des images

gallery_width=  largeur de la gallery (on a choisi de faire apparaitre  un peu moins de 4 images dans la gallerie )

gallery_height=  hauteur de la gallerie

width= prendre la meme valeur que la gallery_width

height= prendre la meme valeur que la gallery_height