Widget/WebApp afficheur & convertisseur de devises en ligne

[nettlebay]

NOTE: tous les liens vers le widget on été modifiés (pas la capture d'écran) et affichent maintenant le Widget pour la Métropole: http://simpleblogbase.blogspot.com/2015/05/blog-post_16.html. Le code affiché a été changé aussi.

 
Il ne s'agit pas à proprement-parler d'une application mais plutôt d'une WebApp ou d'un widget. Je m'en sers très souvent. Ici, les devises affichées concernent plutôt ma région de St Martin aux Petites Antilles. L'île de St Martin qui est un peu plus grande que Belle-île-en-Mer (Bretagne) est partagée entre deux nations, la France et les Pays-Bas (la frontière est à moins de 400 m de chez moi... à la nage! Par la route, elle est à 4 km environ). Côté français, c'est l'Euro qui domine, mais le Dollar US (USD) est cependant omniprésent. Côté hollandais, c'est le dollar US qui domine très largement mais certains prix, dans les supermarchés notamment, sont affichés en NAF ou ANG (Netherland Antillan Florin ou Netherland Antillan Guilder). Comme je fais occasionnellement de la location saisonnière (je reçois souvent des Québécois), j'ai besoin aussi de connaître le taux du Dollar Canadien et plus rarement celui de la Livre Anglaise.
Mais cette affichage peut être facilement modifié en ligne (toutes les autres monnaies sont disponibles dans les menus déroulants) mais il n'est pas conservé. Mais en rentrant dans le code du script, on peut personnaliser ce widget pour changer les monnaies par défaut et ainsi l'adapter à ses besoins. On peut aussi rajouter des lignes. Ce n'est pas insurmontable...
 
Ce widget est évidemment multiplate-forme et fonctionnera aussi bien dans Linux, Windows ou Mac et en principe avec tous les navigateurs
 
 

Capture

Le vrai widget est ici http://simpleblogbase.blogspot.com/2015/05/blog-post_16.html

 
 
 
Si vous le voulez "pour-vous-tout-seul", il vous faudra disposer d'un serveur HTTP. Ce Widget ne fonctionne en effet pas avec Dropbox, malheureusement. Et Google Drive n'accepte pas les ressources Web qui utilisent des langages de script côté serveur. Le mien est hébergé dans un blog minimaliste Blogger que je n'utilise que pour faire des "Apps" dans ce genre et divers "bricolages". Si vous le désirez, je pourrai vous envoyer mon modèle minimaliste. Suffit de demander...
 
Voici son URL: http://simpleblogbase.blogspot.com/2015/05/blog-post_16.html
 
 
Utilisation

• Par défaut, ici c'est l'Euro qui est la monnaie de base (1 € affiché). Tout à droite des autres devises, c'est la conversion qui s'affiche (pour 1 €)
• Les menus déroulants permettent de changer temporairement les devises définies par défaut. Quasiment toutes les devises sont disponibles même les plus exotiques comme le Franc Pacifique.
• Pour convertir une somme, il suffit de la taper son montant dans une des cases grises à droite. La conversion dans les autres monnaies est instantanée. Tapez par exemple 500 en face de United State Dollar et automatiquement la valeur en Euro s'affiche: 439.02 (au 16 mai 2015 à 11 h)
• Les taux sont mis à jour fréquemment, plusieurs fois par jour, sauf le weekend. Ils suivent les cours de la Bourse via Yahoo! Finance
• Ce widget peut être converti en Application avec Google Chrome, Chromium, Firefox, ou Midori (et d'autres). Il apparaîtra ensuite dans vos Applications et vous pourrez même "l'épingler" à votre dock (Plank) si vous en avez un usage fréquent.
• Ce widget peut être affiché facilement sur un site web ou un blog. Comme ici sur mon blog météo perso: http://nbbcmeteo.blogspot.com/ (en bas de page). C'est d'ailleurs son principal usage. 
• Ce widget est "powered" par le site http://www.freecurrencyrates.com

 

 

Le code...

<div><!--Currency Converter widget by FreeCurrencyRates.com -->
<style>
.gcw_main{width:500px;font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:11px;border:#aaaaaa 1px solid;text-align:center;color:#000000;background-color:#ffffff;margin:0 auto;}
.gcw_header{margin:4px;padding:5px;text-align:center;border:#aaaaaa 1px solid;background-color:#cccccc;}
#ccw_cnhfybwf{text-decoration:none;color:#222222;font-size:13px;font-weight:bold;}
.gcw_input{color:#212121;font-weight:bold;background-color:#aaaaaa;border:#C5C5c5 1px solid;text-align:right;padding:2px 0;margin:1px 0;display:inline;font-size:11px;}
.gcw_select{color:#000;display:inline;}
#gcw_date{font-size:10px;color:#212121;}
</style>
<br />
<div class="gcw_main">
<div class="gcw_header">
<a href="http://www.freecurrencyrates.com/myconverter#cur=EUR,USD,CAD,GBP,JPY,CNY;amt=EUR1" id="ccw_cnhfybwf">Convertisseur devises | Currency converter</a></div>
<div id="gcw_rates">
</div>
<script charset="UTF-8" src="http://www.freecurrencyrates.com/converter-widget?source=Yahoo%20Finance&width=500&currs=EUR,USD,CAD,GBP,JPY,CNY&precision=2&language=en&flags=1&currchangable=1&firstrowvalue=1"></script></div>
<!--End of Currency Converter widget by FreeCurrencyRates.com -->
<br />
</div>

Dans le code ci-dessus, on trouve du HTML, du CSS (style) et du Javascript. C'est maintenant le code du widget "Métropole"

• Vous pouvez "bidouiller" le style CSS (c'est du CSS embarqué). Il n'y a pas de feuille CSS distante, et c'est tant mieux.
• Vous pouvez compléter le HTML car ici il n'y a que le contenu de <BODY> (sans les balises). Ce code est en effet adapté à Blogger (Google blog). Pas de <HEAD> non plus mais vous trouverez des modèles facilement sur le Web.

Dans cette ligne, on peut changer les monnaies par défaut: cur=EUR-USD-CAD-ANG-GBP; et les remplacer par d'autres éventuellement et même en ajouter (ce qui ajoutera des lignes). Les codes devises sont en bas d'article. amt=EUR1 est la devise de base (Euro). Vous pouvez la changer aussi.

<a href="http://www.freecurrencyrates.com/myconverter#cur=EUR-USD-CAD-ANG-GBP;amt=EUR1" id="ccw_cnhfybwf">Convertisseur devises | Currency converter</a></div>

Dans cette ligne currs=EUR,USD,CAD,ANG,GBP&precision=2& est aussi à modifier de la même manière que précédemment. precision=2 peut être modifié (décimales). D'autres éléments peuvent être changés: Langue, affichage drapeaux par exemple. Si vous êtes perdu, n'hésitez pas à demander, je vous indiquerai la marche à suivre et vous dirai si c'est possible. currchangable=1&firstrowvalue=1 : Si currchangable=1, le visiteur peut afficher d'autres devises. Si c'est 0, il ne le peut pas. firstrowvalue=1 Valeur de base à indiquer sur le premier rang (ligne). C'est 1 par défaut, mais vous pouvez mettre 10 si vous voulez.

<script charset="UTF-8" src="http://www.freecurrencyrates.com/converter-widget?source=Yahoo%20Finance&width=500&currs=EUR,USD,CAD,ANG,GBP&precision=2&language=en&flags=1&currchangable=1&firstrowvalue=1"></script></div>

Codes devises: http://www.bureaux-de-change.com/codes-iso-devises.php
 
 
Pour en faire une "Chrome App"

• Rendez-vous sur la page du Widget. Maintenant: http://simpleblogbase.blogspot.com/2015/05/blog-post_16.html
• Allez dans les paramètres de Chrome ou Chromium  (en haut à droite de l'interface) > Plus d'outils > Créer des raccourcis vers des Applications...
• Votre nouvelle Chrome App s'affiche dans une nouvelle fenêtre. Redimensionnez-la avec votre curseur de souris.
• Un lanceur est maintenant disponible dans Applications > Autres (ou Internet)
• Retour dans les paramètres de Chrome > Paramètres > Paramètres avancés > tout en bas, Système > cochez "Poursuivre l’exécution d'applications et bla-bla-bla..."

Je ferai prochainement un tuto détaillé de la création de "Chrome Apps" (Pour Les Nuls...  ). Presque tous les navigateurs proposent maintenant une telle option y compris Midori
 
LIENS:
 
Widget pour les "Métros": http://simpleblogbase.blogspot.com/2015/05/blog-post_16.html
Le mien pour St Martin: http://simpleblogbase.blogspot.com/2015/05/blog-post.html
Codes devises: http://www.bureaux-de-change.com/codes-iso-devises.php
Le "propulseur": http://www.freecurrencyrates.com
Mon blog météo: http://nbbcmeteo.blogspot.com/
Yahoo! Finances: https://fr.finance.yahoo.com/
 
 
Ce tuto est susceptible d'être modifié ou complété ultérieurement

Edited May 16, 2015 by nettlebay

[jerar77]

Convertisseur de devises et taux de change - un widget pour votre site web http://convertisseur.info/informer/index.php