Avec l'essor des cryptomonnaies, entre forks, arnaques, sites minant à votre insu et volatilité extrême des prix, elles sont devenues incontournables.
Si vous investissez ou envisagez d'investir en cryptos, surveiller les prix en temps réel est crucial. Créez facilement votre propre tableau de bord avec HTML et CSS uniquement.
Avertissement : Les cryptomonnaies sont un investissement hautement spéculatif. N'investissez jamais plus que ce que vous pouvez vous permettre de perdre intégralement.
Ce tableau de bord s'appuie sur un widget gratuit de CoinMarketCap.com, site de référence pour les stats et prix de milliers de cryptomonnaies. Sélectionnez une devise ou utilisez la recherche en haut à droite.
Vous accédez à la page Aperçu de la pièce, avec stats, graphiques et analyses. Allez dans l'onglet Outils pour trouver le widget prêt à l'emploi. Personnalisez-le si besoin via Personnaliser ce widget, puis copiez le code de la boîte Widget pour site web.
Exemple pour Bitcoin :
<script type="text/javascript" src="//files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD"></div>Le processus est identique pour Bitcoin, Ethereum, Ripple, Dogecoin ou toute autre des 1 000+ altcoins : recherchez la pièce, copiez le code du widget.
Pour plus d'automatisation, utilisez l'API Ticker avec Cron pour des alertes (ex. : e-mail si prix sous seuil). Cela dépasse ce tutoriel.
Créez un fichier dashboard.html avec votre éditeur de texte préféré.
Code de base :
<html>
<head>
<title>Tableau de bord crypto</title>
</head>
<body>
</body>
</html>Insérez le code du widget dans <body>. Pour Bitcoin :
<html>
<head>
<title>Tableau de bord crypto</title>
</head>
<body>
<script type="text/javascript" src="//files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD"></div>
</body>
</html>
C'est tout ! Ouvrez le fichier dans un navigateur pour voir votre dashboard crypto.
Le widget occupe tout l'écran. Ajoutez du CSS dans <head> :
<style>
</style>Contenu CSS :
.coinmarketcap-currency-widget {
width: 33%;
margin: 100px auto;
}
Ce CSS cible la classe du widget via le DOM : largeur à 33 % (contre 100 % par défaut), marge 100px haut/bas et auto gauche/droite pour centrer.
Personnalisez à l'infini : couleurs, fond, animations...
Diversifiez pour mieux analyser les tendances : altcoins montent souvent quand Bitcoin baisse (sauf crash général).
Récupérez les codes pour vos cryptos préférées et ajoutez-les :
<script type="text/javascript" src="//files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="BTC"></div>
<div class="coinmarketcap-currency-widget" data-currency="cardano" data-base="USD" data-secondary="BTC"></div>
Script une seule fois par page. Ajustez CSS pour multi-widgets :
width: 23%;
margin: 10px 1%;
float: left;
Adaptez pour plus de 12 widgets si besoin.
Pour actualisation auto, ajoutez dans <head> :
<meta http-equiv="refresh" content="60">Rafraîchit toutes les 60 secondes (ajustez le nombre).
Votre dashboard est prêt ! Plus besoin de sites comme CoinMarketCap ou Coinbase. Évitez le stress des checks constants.
Installez-le sur PC, Raspberry Pi ou mobile via nos guides apps Android crypto et achat crypto.
Avez-vous créé votre dashboard crypto ? Où l'avez-vous installé ? Dites-le en commentaires !
[]