Widget sur la qualité de l'air - Nouveau flux amélioré
Air Quality Widget - New Improved Feed

Posted on July 28th 2015
Partager: aqicn.org/faq/2015-07-28/air-quality-widget-new-improved-feed/fr/
{ widget : feed }

Afin d'améliorer l'intégration de nos widgets AQI au sein de sites Web externes, nous avons développé un nouveau flux API de widgets. Par rapport au flux de widgets existant, ce nouveau flux API offre beaucoup plus de flexibilité pour l'intégration, mais également beaucoup plus d'options pour personnaliser l'apparence du widget.

Vous pouvez, par exemple, afficher un petit widget aussi simple que ... (déplacez votre souris sur le numéro AQI pour voir les détails), ou un widget plus grand avec des détails sur les polluants des dernières 24 heures, comme indiqué à droite.

Le nouveau framework prend également en charge les modèles, plusieurs langues (anglais, chinois simplifié et traditionnel, espagnol, ...) ainsi que la possibilité de réaliser une intégration programmatique avec des rappels javascript basés sur des données.

A. Configuration de base

L'intégration de base est simple et directe. Vous devez d'abord ajouter le morceau de code suivant :

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

Ensuite, ajoutez simplement cet autre code pour inclure le widget :

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

La fonction `_aqiFeed` prend en argument le bloc de configuration du widget. Le paramètre `container: "city-aqi-container"` fait référence à l'identifiant du tag dans lequel vous souhaitez insérer le widget (par exemple `<span id='city-aqi-container'></span>`), et le paramètre city le nom de la ville pour laquelle vous souhaitez afficher la lecture actuelle de la qualité de l'air (par exemple `city: "london"`).

B. Spécification de la langue

...

Vous pouvez également spécifier la langue à utiliser en définissant l'option lang . Par exemple, pour inclure le widget en chinois (comme indiqué à droite), utilisez le code suivant :

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

Les langues actuellement prises en charge sont :

  • "en": Anglais
  • "cn": Chinois
  • "jp": Japonais
  • "es": Francais
  • "kr": Coréen
  • "ru": Russe
  • "hk": Cantonais
  • "fr": Francais
  • "pl": Polish
  • "de": German
  • "pt": Portuguese
  • "vn": Vietnamese
  • "it": Italian
  • "id": Indonesian
  • "nl": Dutch
  • "fa": Persian
  • "th": Thai
  • "hu": Hungarian
  • "el": Greek
  • "ro": Romanian
  • "bg": Bulgarian
  • "ur": Urdu
  • "hi": Hindi
  • "ar": Arabic
  • "sr": Serbian
  • "bn": Bangla
  • "hu": Hungarian
  • "bs": Bosnian
  • "hr": Croatian

    S’il n’est pas spécifié ou défini sur null , l’anglais est utilisé.

  • C. Spécification du format d'affichage

    ...

    Il est possible de personnaliser le texte à afficher dans le widget en spécifiant l'option display . Par exemple, pour afficher à la fois le nom textuel « AQI » ainsi que l'heure de mise à jour (comme indiqué sur le widget de gauche), vous pouvez utiliser le code suivant :

    >
      
    _aqiFeed({    
    	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
    	container:"city-aqi-container-display",    
    	city:"beijing"  
    });  
    

    L' display du paramètre est une chaîne HTML et peut contenir l'un des mots-clés suivants :

    • `%cityname` pour le nom de la ville (par exemple Beijing ),
    • `%aqi` pour la valeur AQI décorée (par exemple 58 ),
    • `%aqiv` pour la valeur AQI non décorée (texte brut) (par exemple 58 ),
    • `%style` pour la déclaration css des détails AQI décorés (par exemple background-color: #ffde33;color:#000000; ),
    • `%date` pour l'heure à laquelle l'AQI a été mis à jour (par exemple Wed 20:00 ),
    • `%impact` pour l'impact sur la santé associé (ex : Good , Moderate ...)
    • `%attribution` pour l'attribution des données AQI (par exemple Beijing Environmental Protection Monitoring Center )
    • `%details` pour les détails complets de l'AQI (le contenu de la fenêtre contextuelle affichée lorsque vous déplacez la souris sur la valeur de l'AQI).

    Voici quelques exemples:

    Display Configuration Result

    D. Rappel programmatique

    Si vous préférez l'intégration DIY, vous pouvez également spécifier un rappel de fonction javascript lors du chargement des données. Il suffit d'ajouter l'option callback dans le bloc paramètre, comme par exemple :

      
    _aqiFeed({  city:"beijing",  callback:function(aqi){  
    	/*  Do  whatever  you  want  with  the  AQI  object  */  
    	console.log(aqi);    
    }  });

    Par exemple, en supposant que vous utilisez également jquery, le code suivant :

      
    <div  id='my-container'></div>  
    <script  type="text/javascript"  charset="utf-8">  
    	_aqiFeed({  
    		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
    			$("#my-container").html(aqi.details);  
    		}  
    	});  
    </script>

    produira le contenu suivant :

    Les objets aqi contiennent tous les mots-clés mentionnés dans la section C (format d'affichage).

    E. Inclure plusieurs widgets

    Il est possible d'inclure plusieurs widgets sur une seule page. Tout ce dont vous avez besoin est de transmettre à la fonction `_aqiFeed` un tableau avec tous les widgets que vous devez inclure. Par exemple, pour insérer Londres, Paris et New York, on peut utiliser ce code :

      
    var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
      
    var  aqiWidgetConfig  =  [];    
    cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
    _aqiFeed(aqiWidgetConfig);  
      
    function  displayCity(aqi)  {  
    	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
    }  
    
    The result is:

    F. Utilisation des aliments pour animaux

    Ce flux de widgets est fourni gratuitement et dans le seul but d'intégrer le flux dans d'autres sites Web (c'est-à-dire que les applications sont exclues), et sous condition d'utilisation raisonnable et acceptable. Nous nous réservons le droit de modifier la structure du flux (format des données) à tout moment et sans préavis, mieux vaut donc nous contacter si vous envisagez de faire une intégration personnalisée.

    Lors de l'intégration, quelques règles déontologiques doivent être appliquées lors de l'utilisation du flux de données :

    • Tout d’abord, assurez-vous toujours que l’attribution à l’EPA d’origine est présente. Toutes les données sur la qualité de l'air que vous pouvez trouver sur le projet World Air Quality Index sont le résultat du travail acharné de toutes les EPA du monde entier, alors assurez-vous de fournir également l'attribution de leur travail. Si vous utilisez l'API programmatique, l'attribution est disponible à partir du champ attribution .
    • Si vous faites partie d'une institution et utilisez les données, veuillez faire preuve de respect et rembourser les crédits pour notre travail. Si vous essayez de supprimer le flux de données, gardez à l'esprit que ce projet repose sur des projets de parrainage et de coopération, alors pensez à nous soutenir plutôt que de nous supprimer, surtout si vous êtes une institution ou une université à grande échelle.
    • En fait, n'agissez pas comme le WRI ( World Resource Institute ) : en supprimant le flux global de données du projet World Air Quality Index , et en étant si bon marché qu'ils ne donneraient même aucune attribution à notre travail, et ce malgré leurs 80 millions de dollars de financement annuel. Vous ne nous croyez pas ? Vérifiez cet instantané .

    G. Améliorations futures

    Il s'agit de la première version de cette nouvelle API de flux de widgets. De nombreuses améliorations sont déjà en cours, telles que la largeur et la hauteur graphiques réglables, l'échelle AQI sélectionnable, etc. Si vous souhaitez suggérer d'autres améliorations spécifiques, n'hésitez pas à nous envoyer un message.

    Cliquez ici pour voir toutes les entrées de la FAQ
  • AQI Scale: What do the colors and numbers mean?
  • Using Statistical Distances for Real-time Sensor Networks Validation
  • Nitrogen Dioxyde (NO2) in our atmosphere
  • À propos de la qualité de l'air et des mesures de la pollution atmosphérique :

    À propos des niveaux de qualité de l'air

    IQANiveau de pollution de l'air Impact sur la santé
    0 - 50BonLa qualité de l'air est jugée satisfaisante, et la pollution de l'air pose peu ou pas de risque.
    51 -100ModéréLa qualité de l'air est acceptable. Cependant, pour certains polluants, il peut y avoir un risque sur la santé pour un très petit nombre de personnes inhabituellement sensibles à la pollution atmosphérique.
    101-150Mauvais pour les groupes sensiblesLa qualité de l'air est acceptable; Cependant, pour certains polluants, il peut y avoir un problème de santé modérée pour un très petit nombre de personnes qui sont particulièrement sensibles à la pollution de l'air.
    151-200MauvaisTout le monde peut commencer à ressentir des effets sur la santé; les membres des groupes sensibles peuvent ressentir des effets de santé plus graves.
    201-300Très mauvaisAvertissements de santé de conditions d'urgence. Toute la population est plus susceptible d'être affecté.
    300+DangereuxAlerte de santé: tout le monde peut ressentir des effets de santé plus graves.

    Pour en savoir plus sur la qualité de l'air, consultez le sujet Qualité de l'air sur Wikipedia ou le guide AirNow de la qualité de l'air et de votre santé .

    Pour des conseils de santé très utiles du Dr. Richard Saint Cyr, consultez le blog myhealthbeijing.com.


    Notice d'utilisation: Toutes les données sur la qualité de l'air ne sont pas validées au moment de la publication et, pour des raisons d'assurance de la qualité, ces données peuvent être modifiées à tout moment et sans préavis. Le projet Indice de la qualité de l'air dans le monde a exercé toutes les compétences et l'attention réalisables dans la compilation du contenu de ces informations. Indice de la qualité de l’air dans le monde , l’équipe de projet ou ses agents ne peuvent être tenus responsables, contractuellement, judiciairement ou autrement, de toute perte, blessure ou préjudice résultant directement ou indirectement de la fourniture de ces données.



    Paramètres


    Choix de la langue :


    Temperature unit:
    Celcius