Clima, calidad del aire y radiación solar

Introducción

La información generada por la Secretaría de Medio Ambiente (SEDEMA) sobre las condiciones atmosfericas de la Ciudad de México puede ser consumida facilmente por sitios web y aplicaciones moviles gracias a la API del Laboratorio de Datos.

El reporte de las condiciones atmosfericas es actualizado cada hora, las 24 horas del día y los 365 días del año por la Dirección de Monitoreo Atmosferico de la SEDEMA.

En este tutorial vamos a crear un widget para cualquier página web que despliegue la temperatura, calida del aire y nivel de radiación UV de la Ciudad de México. Para permitir la comunicación JavaScript entre dominios vamos a usar la técnica de JSONP que soportan todos los métodos de la API del Laboratorio de Datos.

Para utilizar cualquier método de la API del Laboratorio de Datos por medio de JSONP basta con agregar a la URL ?jsonp=callback donde callback es la función que devolvera la consulta con su respuesta como unico argumento.

Información

En este tutorial vamos a utilizar el método /aire.json de la API de Calidad del Aire que nos devuelve toda la información sobre las condiciones atmosfericas de la Ciudad de México en formato JSON.

Si consultamos http://datos.labplc.mx/aire.json nos devuelve:

{ consulta: { reporte: "19",
              calidad: { categoria: "mala",
                         color: "ff9900" },
              clima: { temperatura: "19",
                       condicion: "nublado_noche" },
              uv: { indice: "0",
                    color: "ffffff" },
              zonas: { noroeste: { categoria: "regular",
                                   color: "ffff00" },
                       noreste: { categoria: "mala",
                                  color: "ff9900" },
                       centro: { categoria: "regular",
                                 color: "ffff00" },
                       suroeste: { categoria: "regular",
                                   color: "ffff00" },
                       sureste: { categoria: "regular",
                                  color: "ffff00" } } } }

El significado de la respuesta a la consulta es:

  • Reporte: Hora del reporte
  • Calidad: Calidad del aire en la Ciudad de México
    • Categoría: Categoría de la calidad del aire, puede ser: buena, regular, mala, muy_mala o extremadamente_mala
    • Color: Color asociado a la cateogría de la calidad del aire en formato hexadecimal
    • Recomendaciones: Recomendaciones de la SEDEMA de acuerdo a la categoría de la calidad del aire
  • Clima: Clima de la Ciudad de México
    • Temperatura: Temperatura en grados centigrados
    • Condición: Condición del clima, puede ser: no_disponible, despejado_dia, despejado_noche, bruma_dia, bruma_noche, despejado_medio_nublado_dia, despejado_medio_nublado_noche, medio_nublado_dia, medio_nublado_noche, nublado_dia, nublado_noche, lluvia_ligera_dia, lluvia_ligera_noche, lluvia_moderada_dia, lluvia_moderada_noche, lluvia_intensa_dia, lluvia_intensa_noche o desconocido
  • UV: Índice de radiación UV en la Ciudad de México
    • Categoría: Categoría del índice UV, puede ser: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 u 11
    • Color: Color asociado al índice UV en formato hexadecimal
    • Recomendaciones: Recomendaciones de la SEDEMA de acuerdo al índice UV
  • Zonas: Calidad del aire en las cinco diferentes zonas de la Ciudad de México.

Esqueleto

Nuestra página de ejemplo donde aplicaremos el widget sera:

index.html

<html>
  <head>
    <title>Ejemplo</title>
    <style>
      body { font-family: Arial, Helvetica, sans-serif; }
      .parrafo_muy_alto { height: 1600px; }
    </style>
  </head>
  <body>
    <h1>Mi página web</h1>
    <p class="parrafo_muy_alto">Contenido</p>
  </body>
</html>

Widget

Primero vamos a crear la hoja de estilo para nuestro widget:

calidad_aire.css

#reporte {
    position: fixed;
    z-index: 100; 
    bottom: 0; 
    left: 0;
    width: 100%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-top: solid 1px;
}

#reporte div {
    display: inline;
    margin: 0 10px;
}

#reporte div span {
    padding: 2px 6px;
    font-weight: bold;
    text-transform: capitalize;
}

Y vamos a crear el script con la función para procesar la consulta sobre la calidad del aire y colocarla dentro de la página web:

calidad_aire.js

function reporte_calidad(res) {
  // temperatura
  $("#reporte_temperatura").text(res.consulta.clima.temperatura);
  // calidad del aire
  var txt = res.consulta.calidad.categoria;
  txt.replace('_', ' '); // reemplazamos los _ por espacios
  $("#reporte_calidad_aire").text(txt);
  // color asociado a la calidad del aire
  $("#reporte_calidad_aire").css('background-color', '#' + res.consulta.calidad.color);
  // indice uv
  $("#reporte_indice_uv").text(res.consulta.uv.indice);
  // color asocaido al índice uv
  $("#reporte_indice_uv").css('background-color', '#' + res.consulta.uv.color);
}

Por último vamos a agregar a la página web original la biblioteca jQuery, nuestra hoja de estilo, el script con la función reporte_calidad y la base HTML para desplegar la información:

index.html

<html>
  <head>
    <title>Ejemplo</title>
    <style>
      body { font-family: Arial, Helvetica, sans-serif; }
      .parrafo_muy_alto { height: 1600px; }
    </style>
    <link rel="stylesheet" type="text/css" href="calidad_aire.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  </head>
  <body>
    <h1>Mi página web</h1>
    <p class="parrafo_muy_alto">Contenido</p>
    <!-- inicio reporte de temperatura, calidad del aire e índice uv -->
    <div id="reporte">
      <div>Temperatura: <span id="reporte_temperatura">--</span>&deg;C</div>
      <div>Calidad del aire: <span id="reporte_calidad_aire">----</span></div>
      <div>Índice UV: <span id="reporte_indice_uv">---</span></div>
    </div>
    <script src="calidad_aire.js"></script>
    <script src="http://datos.labplc.mx/aire.json?jsonp=reporte_calidad"></script>
    <!-- fin reporte de temperatura, calidad del aire e índice uv -->
  </body>
</html>
El ejemplo pueden verlo operando aquí y descargarlo en formato zip o tar.gz.

Siguientes pasos

  • Mostrar las recomendaciones de la SEDEMA de acuerdo a la categoría de la calidad del aire e índice UV
  • Incluir un mapa con la calidad del aire en la Ciudad de México en sus diferentes zonas
  • Agregar un icono que ilustre la condición del clima

Referencias