Chez Callendar, notre but est d’accélérer l’adaptation au changement climatique en proposant des outils efficaces et accessibles pour anticiper ses impacts. Nous pensons que chacun devrait être en mesure de connaître précisément les dangers auxquels il est exposé. C’est pourquoi nous proposons des applications grand public capables, à partir d’une adresse et des données scientifiques les plus récentes, de calculer l’évolution des risques au cours du XXIe — par exemple pour les canicules, les feux de forêt ou les inondations côtières.
Non seulement l’accès à ces applications est complètement libre et gratuit, mais elles peuvent aussi être intégrées très facilement à n’importe quel site internet.
Dans ce tuto, nous allons voir comment vous pouvez mettre nos applications d’évaluation des risques climatiques à disposition des visiteurs de votre page web ou de votre blog.
C’est très simples, la preuve : nos contenus sont déjà intégrés sur les sites de nombreux médias - comme Les Echos, L’Obs ou le Petit Journal, d’entreprises et d’associations !
Intégrer une appli en une ligne de code
Si vous voulez intégrer une de nos applications à votre site internet, la première étape consiste à décider laquelle vous intéresse. Vous pouvez trouver une liste régulièrement mise à jour ici.
Une fois que vous avez choisi, remplacez simplement “https://appli.climint.com/” par l’adresse de l’application dans le code suivant :
<iframe src="https://appli.climint.com/" width="100%" height="600"></iframe>
Ensuite, il ne reste plus qu’à copier cette ligne dans le code html de votre page à l’endroit où vous souhaitez que l’application apparaisse.
Enregistrez et l’application s’affiche sur la page. Vous n’avez rien d’autre à faire : c’est nous qui hébergeons et maintenons l’application et vous bénéficierez automatiquement de toutes les mises à jours.
C’est simple, non ?
Exemple : enrichir un post de blog sur le climat
Imaginons que vous avez un blog que vous écrivez un article sur l’aggravation des vagues de chaleur et leurs conséquences. Nous avons justement une application qui permet de calculer la fréquence des canicules en s’appuyant sur des projections climatiques détaillées et sur la définition applicable dans chaque département.
En intégrant cette application à votre post, vous permettrez à vos lecteurs de quantifier l’évolution du risque de canicule chez eux. Vous rendrez votre article plus interactif et vous inciterez vos visiteurs à prendre une première action. Tout ça sans qu’ils aient à quitter votre page.
Cette application peut être intégrer dans votre post avec le code suivant :
<center>
<iframe src="https://canicule.climint.com/" width="600" height="520">
</iframe>
</center>
Vous pouvez bien sûr modifier la largeur (width) et la hauteur (height) pour les adapter au design de votre site. La balise center permet de centrer l’application sur la page.
Une fois que c’est fait, collez simplement le code à l’endroit où vous voulez faire apparaitre l’application :
Exemple avancé : intégrer une appli dans une barre latérale
Si vous avez un site consacré aux questions climatiques, vous voudrez peut-être proposer une application sur toutes les pages, par exemple dans la barre de navigation latérale.
Nos applications sont conçues pour être utilisées en plein écran. Pour les afficher dans une barre latérale ou dans un autre espace limité, il est préférable de les redimensionner.
C’est possible en rajoutant quelques lignes de css au code, par exemple pour intégrer l’application “ça chauffe ?” à une barre latérale de 242 pixels de large :
<style>
/*
Taille maximale d'affichage de l'application divisée par le
facteur de redimensionnement
*/
#wrap {
width: 403px;
height: 420px;
overflow: hidden;
}
/* Taille originale et facteur de redimensionnement */
#scaled-frame {
width: 500px;
height: 800px;
transform: scale(0.6);
transform-origin: 0 0;
}
</style>
<div id="wrap">
<iframe id="scaled-frame" src="https://ca-chauffe.climint.com/"></iframe>
</div>
Scaled-frame définit le facteur de redimensionnement, ici 0.6 : la taille de tous les éléments de l’application (polices d’écriture, images, etc.) va être réduite à 60% de la taille d’origine. Vous pouvez adapter ce chiffre en fonction de l’espace disponible mais pour que l’application reste lisible sur un écran d’ordinateur il est préférable de ne pas descendre en-dessous de 0.6.
Wrap définit la taille maximale de l’affichage. Pour obtenir le résultat souhaité, il faut prendre la taille de la zone d’affichage et la diviser par le facteur de redimensionnement. Dans notre cas : 242 / 0.6 ≈ 403 pixels.
A votre tour !
A vous de jouer. Comment allez-vous utiliser nos applications pour sensibiliser vos lecteurs et enrichir vos contenus ?
Vous avez certainement des idées auxquelles nous n’avons jamais pensé ! N’hésitez pas à nous les signaler : nous serons ravis de partager les meilleures réutilisations !
Vous êtes une entreprise, une collectivité ou un média et vous souhaitez proposer une de nos applications sur votre site internet ? C’est bien sur possible.
Nous pouvons vous aider à l’intégrer à votre site, et même la personnaliser en fonction de vos besoins : ajout de votre logo, mise en avant de vos initiatives, localisation sur un territoire spécifique, etc.
N’hésitez pas à nous contacter pour en discuter.