Canicule, submersion, incendie… Vous voulez évaluer l’impact du changement climatique chez vous ? Callendar propose des applications simples et gratuites pour vous aider. Vous pouvez aussi intégrer facilement ces outils à votre site personnel ou professionnel pour les partager avec vos propres lecteurs. Voici comment faire.
Vous êtes une entreprise ou une collectivité et vous voulez mettre à disposition une de nos applications sur votre site ? Nous pouvons la mettre à vos couleurs et en personnaliser le contenu pour vous : n’hésitez pas à nous contacter !
Intégrer une application à votre site en une ligne
Pour intégrer une de nos applications d’évaluation des risques climatiques à votre site, il vous faut tout simplement l’url de l’application et la possibilité d’éditer le code html de la page web où l’application sera affichée.
Pour ces démonstrations, nous allons utiliser notre application « Ça chauffe ». Une de nos application les plus populaires, elle permet de visualiser l’évolution de la température moyenne annuelle pour n’importe qu’elle adresse en France, y compris en outremer, et de calculer le rythme de réchauffement local sur les 30 dernières années. Son url est : https://ca-chauffe.climint.com/
Une fois que vous avez cette adresse, rendez-vous sur la page où vous souhaitez mettre l’application. Il vous suffit d’ajoutez la ligne suivante au code html :
<iframe src="https://ca-chauffe.climint.com/" width="100%" height="600"></iframe>
Pour intégrer une autre application, il suffira de changer l’url. Vous pouvez aussi personnaliser la largeur de la fenêtre (width) et sa hauteur (height) en fonction de votre site. Ensuite, il ne vous reste plus qu’à coller cette ligne à l’endroit où vous souhaitez voir apparaitre l’application. Comme ceci :
Enregistrez et l’application s’affiche sur la page comme si elle appartenait à votre site. 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.
Démonstration 1 : intégrer une application dans une page ou un article
Voyons maintenant à quoi ressemble le résultat. Si vous écrivez un article sur votre blog au sujet du changement climatique, vous pouvez y ajouter très simplement cet outil de sensibilisation local et interactif. Par exemple de la façon suivante :
Il vous suffit pour cela de copier-coller le code suivant à l’endroit de votre article où vous voulez afficher l’application :
<center> <iframe src="https://ca-chauffe.climint.com/" width="600" height="520"> </iframe> </center>
Démonstration 2 : changer la taille de l’application et son format
Dans l’exemple précédent, nous avons fixé la largeur de l’application à 600 pixels et sa hauteur à 520 pixels. Vous pouvez évidemment modifier ces valeurs en fonction de l’espace dont vous disposez. Si vous voulez intégrer une de nos application à un endroit bien particulier, mettons dans la colonne latérale de votre site, vous pouvez même modifier sa taille d’affichage pour qu’elle s’adapte parfaitement à votre situation.
Par exemple, comme ceci :
Voici le code pour cela :
<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>
Aller plus loin avec nos outils d’évaluation des risques climatiques
Vous avez intégré une de nos applications sur votre site personnel ou votre blog ? N’hésitez pas à nous le signaler, nous serons ravis de partager les meilleures réutilisations !
Vous êtes une entreprise, une collectivité ou un média et vous souhaitez utiliser une de nos applications. C’est bien sur possible. Nous pouvons aussi vous aider à l’intégrer à votre site et la personnaliser en fonction de vos besoins : ajout de votre logo, mise en avant de vos initiatives, localisation sur un territoire spécifique, etc. Contactez-nous pour en discuter.