<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="application/shiny-singletons">3891ac171834ed25f436995ba40a47edd74e5169,45534f2c59c7069db5da7f5118dc12c792e86de5</script> <script type="application/html-dependencies">jquery[3.6.0];shiny-sass[1.6.0];shiny-javascript[1.6.0];bootstrap[4.5.3];bs3compat[0.2.4];fira-mono[0.1.0];shinyWidgets[0.6.0];bootstrap-switch[3.3.4];htmlwidgets[1.5.3];tippyjs[3.2.0];tippy-binding[0.1.0];selectize[0.12.4];font-awesome[5.13.0];core-js[2.5.3];react[17.0.0];reactwidget[1.0.0];reactable-binding[0.2.3];leaflet[1.3.1];leafletfix[1.0.0];proj4[2.6.2];Proj4Leaflet[1.0.1];rstudio_leaflet[1.3.1];leaflet-binding[2.0.4.1]</script> <script src="jquery-3.6.0/jquery-3.6.0.min.js"></script> <link href="shiny-sass-1.6.0/shiny-sass.css" rel="stylesheet" /> <script src="shared/shiny.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link href="bootstrap-4.5.3/bootstrap.min.css" rel="stylesheet" /> <script src="bootstrap-4.5.3/bootstrap.bundle.min.js"></script> <script src="bs3compat-0.2.4/tabs.js"></script> <script src="bs3compat-0.2.4/bs3compat.js"></script> <link href="gfonts-fira-mono/css/fira-mono.css" rel="stylesheet" /> <link href="shinyWidgets/shinyWidgets.min.css" rel="stylesheet" /> <script src="shinyWidgets/shinyWidgets-bindings.min.js"></script> <link href="shinyWidgets/bootstrap-switch/bootstrap-switch-3.3.4/bootstrap-switch.min.css" rel="stylesheet" /> <script src="shinyWidgets/bootstrap-switch/bootstrap-switch-3.3.4/bootstrap-switch.min.js"></script> <script src="htmlwidgets-1.5.3/htmlwidgets.js"></script> <link href="tippyjs-3.2.0/themes/google.css" rel="stylesheet" /> <link href="tippyjs-3.2.0/themes/light-border.css" rel="stylesheet" /> <link href="tippyjs-3.2.0/themes/light.css" rel="stylesheet" /> <link href="tippyjs-3.2.0/themes/translucent.css" rel="stylesheet" /> <script src="tippyjs-3.2.0/tippy.all.min.js"></script> <script src="tippy-binding-0.1.0/tippy.js"></script> <link href="selectize-0.12.4/selectize.css" rel="stylesheet" /> <script src="selectize-0.12.4/selectize.min.js"></script> <script src="selectize-0.12.4/selectize-plugin-a11y.min.js"></script> <link href="font-awesome-5.13.0/css/all.min.css" rel="stylesheet" /> <link href="font-awesome-5.13.0/css/v4-shims.min.css" rel="stylesheet" /> <script src="core-js-2.5.3/shim.min.js"></script> <script src="react-17.0.0/react.min.js"></script> <script src="react-17.0.0/react-dom.min.js"></script> <script src="reactwidget-1.0.0/react-tools.js"></script> <script src="reactable-binding-0.2.3/reactable.js"></script> <link href="leaflet-1.3.1/leaflet.css" rel="stylesheet" /> <script src="leaflet-1.3.1/leaflet.js"></script> <link href="leafletfix-1.0.0/leafletfix.css" rel="stylesheet" /> <script src="proj4-2.6.2/proj4.min.js"></script> <script src="Proj4Leaflet-1.0.1/proj4leaflet.js"></script> <link href="rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" /> <script src="leaflet-binding-2.0.4.1/leaflet.js"></script> <link rel="stylesheet" href="shinycssloaders-assets/spinner.css"/> <script src="shinycssloaders-assets/spinner.js"></script> <link rel="stylesheet" href="shinycssloaders-assets/css-loaders.css"/> <style>#spinner-413cd86274d971d21a19fb83b9b485e3, #spinner-413cd86274d971d21a19fb83b9b485e3:before, #spinner-413cd86274d971d21a19fb83b9b485e3:after { background: #0275D8; } #spinner-413cd86274d971d21a19fb83b9b485e3 { color: #0275D8; } #spinner-413cd86274d971d21a19fb83b9b485e3 { font-size: 8px; }</style> <script src="__assets__/sockjs.min.js"></script> <script src="__assets__/shiny-server-client.min.js"></script> <script>preShinyInit({reconnect:true,disableProtocols:["xdr-streaming","xhr-streaming","xdr-polling","xhr-polling"]});</script> <link rel="stylesheet" type="text/css" href="__assets__/shiny-server.css"/> </head> <body> <div class="container-fluid"> <style>body {font-family: 'Fira Mono', monospace;}</style> <style type="text/css">#mappa_climatologici-mappa{ min-height: 1000px !important; } /* legenda padding right */ .info.legend.leaflet-control{ padding-right: 3% !important; padding-left: 3% !important; background-color: #FFF; background-color: rgb(247,247,247) !important; font-size: 14px !important; } /* dimensione titolo della legenda */ .info.legend.leaflet-control div{ font-size: 14px !important; }</style> <style type="text/css">div.row.intestazione{ background: #7295c0; padding-top: 15px; padding-bottom: 15px; margin-bottom: 30px; } .titolo, .sottotitolo{ font-size: 2.4rem; color: white; font-family: Montserrat,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-weight: 900; } .sottotitolo{ font-size: 1rem; } .btn-info { color: #fff; background-color: #7295c0; border-color: #7295c0; font-weight: 400; } .btn:hover { color:#000; text-decoration: none; background-color: #F4EFC4; /*#dad190;*/ } .btn-info:not(:disabled):not(.disabled):active, .btn-info.active:not(:disabled):not(.disabled), .show > .btn-info.dropdown-toggle, .in > .btn-info.dropdown-toggle { color: #000; background-color: #F4EFC4; /* */ border-color: #F4EFC4;; /* #F4EFC4; */ } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { color: #fff; background: #7295c0; } .bg-primary { background-color: #90c7d5 !important; color: #5a5a5a; } a{ color: rgb(95, 105, 125); } a:hover{ color: #7295c0; } .nav-tabs .nav-link.active, .nav-tabs > li > a.active{ color: #7295c0; } #elabora{ background-color: #7295c0; border-color: #7295c0; color: #FFF; font-weight: 400; } #elabora:focus, #elabora.focus { outline:0; box-shadow:0 0 0 .1rem #7295c0; } .riga-estrai{ margin-bottom: 30px; } /* csv button */ #csv { margin: 20px; margin-left: 0px; margin-bottom: 40px; font-family: inherit; font-size: inherit; line-height: inherit; } /* info per popup */ div.pull-right{ display: inline !important; } /* margintop per ogni panel */ .tab-pane{ margin-top: 25px; margin-right: 0; margin-left: 0; } .tab-pane div{ padding-right: 0%; line-height: 1.5rem; } .tab-pane div h4{ margin-top: 30px; } /* modal */ .modal-header{ background: #FA8F37; } ,.modal-footer, .modal-body{ background: #FFF; } /* pulsante inline nel testo */ .text-button{ display: inline-block; color: white; font-weight: 900; background: #7295c0; margin: 0; padding: 10px; border-radius: 5px;" } .map-button{ display: inline-block; color: #000; font-weight: 900; } /* colori con cui vengono evidenziati i nomi degli indicatori e il testo nella scheda sugli aggiornamenti dell'app */ .hot{ font-weight: 400; color: #dc3545; } .cold{ font-weight: 400; color: #315f86; } .rain{ font-weight: 400; color: #51678f; } /* titoli delle domande nella pagina introduzione */ h4{ color: #51678f; } /* mylinks */ .mylink{ font-weight: 400; color: #dc3545; } .mylink:hover { font-weight: 400; color: #dc3545; text-decoration: underline; } .mylink:focus { font-weight: 400; color: #dc3545; text-decoration: underline; } .mylink:active { font-weight: 400; color: #dc3545; text-decoration: underline; } /* dimensione testo temperatura/precipitazione */ .bootstrap-switch-handle-off{ font-size: 12px !important; } .bootstrap-switch-handle-on{ font-size: 14px !important; }</style> <div class="main_container"> <div class="row intestazione"> <div class="col-sm-12"> <div class="titolo"> Valori climatici normali in Italia <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-right:0.2em;font-size:inherit;fill:#F4EFC4;overflow:visible;position:relative;"><path d="M575.2 325.7c.2-1.9.8-3.7.8-5.6 0-35.3-28.7-64-64-64-12.6 0-24.2 3.8-34.1 10-17.6-38.8-56.5-66-101.9-66-61.8 0-112 50.1-112 112 0 3 .7 5.8.9 8.7-49.6 3.7-88.9 44.7-88.9 95.3 0 53 43 96 96 96h272c53 0 96-43 96-96 0-42.1-27.2-77.4-64.8-90.4zm-430.4-22.6c-43.7-43.7-43.7-114.7 0-158.3 43.7-43.7 114.7-43.7 158.4 0 9.7 9.7 16.9 20.9 22.3 32.7 9.8-3.7 20.1-6 30.7-7.5L386 81.1c4-11.9-7.3-23.1-19.2-19.2L279 91.2 237.5 8.4C232-2.8 216-2.8 210.4 8.4L169 91.2 81.1 61.9C69.3 58 58 69.3 61.9 81.1l29.3 87.8-82.8 41.5c-11.2 5.6-11.2 21.5 0 27.1l82.8 41.4-29.3 87.8c-4 11.9 7.3 23.1 19.2 19.2l76.1-25.3c6.1-12.4 14-23.7 23.6-33.5-13.1-5.4-25.4-13.4-36-24zm-4.8-79.2c0 40.8 29.3 74.8 67.9 82.3 8-4.7 16.3-8.8 25.2-11.7 5.4-44.3 31-82.5 67.4-105C287.3 160.4 258 140 224 140c-46.3 0-84 37.6-84 83.9z"/></svg> </div> <div class="sottotitolo">Istituto Superiore per la Protezione e la Ricerca Ambientale - Sezione Climatologia Operativa</div> </div> </div> <div class="row app_content"> <div class="col-sm-10 offset-md-1 col-sm-offset-1"> <div class="row pulsante_selezione_parametro"> <div class="col-sm-5"> <div data-tippy="Seleziona la grandezza di interesse e un indicatore nel menù a tendina"> <div class="form-group shiny-input-container"> <input id="seleziona_parametro-scegli" type="checkbox" class="sw-switchInput" data-input-id="seleziona_parametro-scegli" data-on-text="Temperatura" data-off-text="Precipitazione" data-label-text="" data-label-width="auto" data-handle-width="auto" data-size="" checked="checked"/> </div> </div> <span id="htmlwidget-3b9b35e3d092ddf0792d" class="tippy html-widget" width="960" height="500"></span> <script type="application/json" data-for="htmlwidget-3b9b35e3d092ddf0792d">{"x":{"element":null,"opts":[]},"evals":[],"jsHooks":[]}</script> </div> </div> <div class="row pulsanti_selezione"> <div class="col-sm-3"> <div class="form-group shiny-input-container"> <label class="control-label" id="indicatore-label" for="indicatore">Indicatore</label> <div> <select id="indicatore"><option value="Tmax" selected>Tmax</option> <option value="Tmax > 25 °C">Tmax > 25 °C</option> <option value="Tmax >= 30 °C">Tmax >= 30 °C</option> <option value="Tmax >= 35 °C">Tmax >= 35 °C</option> <option value="Tmax >= 40 °C">Tmax >= 40 °C</option> <option value="Tmean">Tmean</option> <option value="Tmin">Tmin</option> <option value="Tmin < 0 °C">Tmin < 0 °C</option> <option value="Tmin > 20 °C">Tmin > 20 °C</option></select> <script type="application/json" data-for="indicatore" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script> </div> </div> </div> <div class="col-sm-6"> <div data-tippy="Seleziona un trentennio climatologico"> <div class="form-group shiny-input-container shiny-input-radiogroup shiny-input-container-inline"> <label id="bottoni_climatologici-bottoni-label" class="control-label" for="bottoni_climatologici-bottoni">Trentennio climatologico</label> <br/> <div id="bottoni_climatologici-bottoni" class="radioGroupButtons" style="width: 100%;"> <div aria-labelledby="bottoni_climatologici-bottoni-label" class="btn-group btn-group-justified btn-group-container-sw" data-toggle="buttons" role="group"> <div class="btn-group btn-group-toggle" role="group"> <button class="btn radiobtn btn-info"> <input type="radio" autocomplete="off" name="bottoni_climatologici-bottoni" value="1961-1990"/> 1961-1990 </button> </div> <div class="btn-group btn-group-toggle" role="group"> <button class="btn radiobtn btn-info"> <input type="radio" autocomplete="off" name="bottoni_climatologici-bottoni" value="1971-2000"/> 1971-2000 </button> </div> <div class="btn-group btn-group-toggle" role="group"> <button class="btn radiobtn btn-info"> <input type="radio" autocomplete="off" name="bottoni_climatologici-bottoni" value="1981-2010"/> 1981-2010 </button> </div> <div class="btn-group btn-group-toggle" role="group"> <button class="btn radiobtn btn-info active"> <input type="radio" autocomplete="off" name="bottoni_climatologici-bottoni" value="1991-2020" checked="checked"/> 1991-2020 </button> </div> </div> </div> </div> </div> <span id="htmlwidget-9be6f222f77c50d4beb3" class="tippy html-widget" width="960" height="500"></span> <script type="application/json" data-for="htmlwidget-9be6f222f77c50d4beb3">{"x":{"element":null,"opts":[]},"evals":[],"jsHooks":[]}</script> </div> </div> <div class="row mostra_complete"> <div class="col-sm-3"> <div class="form-group shiny-input-container" data-tippy="Visualizza solo le serie per le quali e' stato possibile calcolare tutti i valori mensili, stagionali e annuali"> <div class="material-switch"> <span style="padding-right: 10px;">Solo serie complete</span> <input id="dati_completi-annuale_completo" type="checkbox" checked="checked"/> <label class="label-primary bg-primary" for="dati_completi-annuale_completo"></label> </div> </div> <span id="htmlwidget-5162797fff04995320c0" class="tippy html-widget" width="960" height="500"></span> <script type="application/json" data-for="htmlwidget-5162797fff04995320c0">{"x":{"element":null,"opts":[]},"evals":[],"jsHooks":[]}</script> </div> </div> <div class="row riga-estrai"> <div class="col-sm-3"> <button id="elabora" type="button" class="btn btn-default action-button" data-tippy="Visualizza la tabella dati, la mappa delle stazioni e i corrispettivi grafici">Visualizza dati</button> <span id="htmlwidget-9ba6eeda584271831834" class="tippy html-widget" width="960" height="500"></span> <script type="application/json" data-for="htmlwidget-9ba6eeda584271831834">{"x":{"element":"elabora","opts":[]},"evals":[],"jsHooks":[]}</script> </div> </div> <div class="row riga_pannelli"> <div class="col-sm-12"> <div class="tabbable"> <ul class="nav nav-tabs shiny-tab-input" id="pannelli" data-tabsetid="5473"> <li class="active"> <a href="#tab-5473-1" data-toggle="tab" data-value="Introduzione"> <i class=" fa fa-bars fa-fw" role="presentation" aria-label=" icon"></i> Introduzione </a> </li> <li> <a href="#tab-5473-2" data-toggle="tab" data-value="Tabella"> <i class=" fa fa-table fa-fw" role="presentation" aria-label=" icon"></i> Tabella </a> </li> <li> <a href="#tab-5473-3" data-toggle="tab" data-value="Mappa"> <i class=" fa fa-location-arrow fa-fw" role="presentation" aria-label=" icon"></i> Mappa </a> </li> <li> <a href="#tab-5473-4" data-toggle="tab" data-value="Help"> <i class=" fa fa-life-ring fa-fw" role="presentation" aria-label=" icon"></i> Help </a> </li> <li> <a href="#tab-5473-5" data-toggle="tab" data-value="Fonte dati"> <i class=" fa fa-database fa-fw" role="presentation" aria-label=" icon"></i> Fonte dati </a> </li> </ul> <div class="tab-content" data-tabsetid="5473"> <div class="tab-pane active" data-value="Introduzione" data-icon-class="fa fa-bars" id="tab-5473-1"> <div style="margin-top: 20px;"> <div> <h4> Cosa sono i valori climatici normali? </h4> <p> <p>I valori climatici normali sono i <strong>valori medi</strong>, di una variabile climatica in un periodo di riferimento sufficientemente lungo.</p> <p>La <a href="https://public.wmo.int/en" alt="sito WMO" target="_blank" class="mylink">World Meteorological Organization</a> (WMO) ha definito i normali climatici nella prima meta’ del ventesimo secolo con l’obiettivo di consentire il confronto tra le osservazioni di tutto il mondo, assicurando la coerenza fra le informazioni dei diversi servizi meteorologici. Inoltre ha fissato a <strong>30 anni</strong> la durata del periodo di riferimento, da aggiornare ogni <strong>10 anni</strong>.</p> </p> <h4> Perché si calcolano i valori climatici normali? </h4> <p> <p>Per due finalita’ principali:</p> <ul> <li>come <strong>valori di riferimento</strong> rispetto ai quali confrontare le osservazioni e calcolare le serie di anomalie (scostamenti dai valori normali);</li> <li>per fornire <strong>valori medi rappresentativi</strong> del clima attuale o del passato recente in un determinato luogo. </p></li> </ul> <h4> Come si calcolano i valori climatici normali? </h4> <p>A partire dai dati giornalieri, vengono calcolati i valori mensili (come media, somma o numero di giorni sopra o sotto una determinata soglia, in base all’indicatore considerato) secondo specifici criteri. Per ogni mese, il valore normale è il valore medio nel trentennio climatologico di riferimento, per le stazioni <strong>con almeno 24 anni validi</strong>. In base ai normali mensili vengono poi calcolati i normali stagionali e annuali.</p> <p>Le serie di temperatura minima, media e massima utilizzate sono state controllate e omogeneizzate secondo le raccomandazioni della WMO, mentre per le serie di precipitazione sono state selezionate le serie omogenee.</p> <p>Per maggiori informazioni:</p> <ul> <li><p><a href="https://library.wmo.int/doc_num.php?explnum_id=4166" target="_blank"> WMO, 2017: WMO Guidelines on the Calculation of Climate Normals, WMO-No. 1203, Geneva</a></p></li> <li><p><a href="https://library.wmo.int/doc_num.php?explnum_id=10352" target="_blank">WMO, 2020. Guidelines on Homogenization WMO-No. 1245, Geneva</a></p></li> <li><p><a href="http://www.scia.isprambiente.it/wwwrootscia/Documentazione/RAPPORTONORMALI1991-2020.pdf" target="_blank">ISPRA, 2022: I normali climatici 1991-2020 di temperatura e precipitazione in Italia</a></p></li> </ul> </div></div> </div> <div class="tab-pane" data-value="Tabella" data-icon-class="fa fa-table" id="tab-5473-2"> <div class="row"> <div class="col-sm-12"> <div> <div id="legenda" class="shiny-html-output"></div> </div> <div> <div class="shiny-spinner-output-container shiny-spinner-hideui "> <div class="load-container shiny-spinner-hidden load1"> <div id="spinner-413cd86274d971d21a19fb83b9b485e3" class="loader">Loading...</div> </div> <div style="height:400px" class="shiny-spinner-placeholder"></div> <div id="tabella_climatologici-tabella" class="reactable html-widget html-widget-output" style="width:auto; height:auto; " data-reactable-output="tabella_climatologici-tabella"></div> </div> </div> </div> </div> </div> <div class="tab-pane" data-value="Mappa" data-icon-class="fa fa-location-arrow" id="tab-5473-3"> <div class="row"> <div class="col-sm-12"> <div id="mappa_climatologici-mappa" style="width:100%; height:400px; " class="leaflet html-widget html-widget-output"></div> </div> </div> </div> <div class="tab-pane" data-value="Help" data-icon-class="fa fa-life-ring" id="tab-5473-4"> <div> <p> In queste pagine è possibile visualizzare e scaricare <strong>i valori normali climatici mensili, stagionali ed annuali</strong> di indicatori climatici di temperatura e precipitazione. </p> <p>Selezionare:</p> <ul> <li><p>la variabile di interesse (<strong>temperatura</strong> o <strong>precipitazione</strong>);</p></li> <li><p>il relativo indicatore:</p> <ul> <li><p>Temperatura massima - Tmax (°C)</p></li> <li><p>Temperatura media - Tmean (°C)</p></li> <li><p>Temperatura minima - Tmin (°C)</p></li> <li><p>Giorni con temperatura massima > 25 °C</p></li> <li><p>Giorni con temperatura massima >= 30 °C</p></li> <li><p>Giorni con temperatura massima >= 35 °C</p></li> <li><p>Giorni con temperatura massima >= 40 °C</p></li> <li><p>Giorni con temperatura minima < 0 °C</p></li> <li><p>Giorni con temperatura minima > 20 °C</p></li> <li><p>Escursione termica giornaliera (°C)</p></li> <li><p>Gradi giorni di riscaldamento (°C)</p></li> <li><p>Gradi giorni di raffrescamento (°C)</p></li> <li><p>Precipitazione cumulata (mm)</p></li> <li><p>Giorni con precipitazione cumulata >= 1 mm</p></li> <li><p>Giorni con precipitazione cumulata >= 5 mm</p></li> <li><p>Giorni con precipitazione cumulata >= 10 mm</p></li> <li><p>Giorni con precipitazione cumulata >= 50 mm</p></li> <li><p>Giorni con precipitazione cumulata >= 100 mm;</p></li> </ul></li> <li><p>il trentennio di riferimento: 1961-1990, 1971-2000, 1981-2010, 1991-2020;</p></li> <li><p>eventualmente “solo serie complete” per visualizzare solo le serie per cui e’ stato possibile calcolare tutti i corrispondenti valori climatologici: mensili, stagionali ed annuali.</p></li> </ul> <p><strong>Dopo la selezione</strong>, cliccare il pulsante “<strong>Visualizza dati</strong>”.</p> <p>Nella scheda <strong>Mappa</strong> e’ possibile visualizzare le stazioni alle quali è associato il valore normale annuale dell’indicatore selezionato, nel relativo trentennio. A sinistra, il pulsante “make a selection” permette di selezionare tutte le stazioni all’interno di un’area rettangolare, che puo’ essere modificata a piacere.</p> </div> <div class="tab-pane" data-value="Fonte dati" data-icon-class="fa fa-database" id="tab-5473-5"> <div> <p> <p>I dati utilizzati per il calcolo dei valori normali provengono dal sistema SCIA (www.scia.isprambiente.it) e sono stati integrati con quelli provenienti dai seguenti enti:</p> <ul> <li>Servizio Idrografico e Mareografico – Regione Abruzzo</li> <li>Protezione Civile – Regione Basilicata</li> <li>Protezione civile – Regione Puglia</li> <li>Settore Idrologico Regionale – Regione Toscana</li> <li>Centro Funzionale – Regione Autonoma Valle d’Aosta</li> </ul> </p> </div></div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <footer style="height: 50px;background: white;"></footer> </div> </div> </div> </body> </html>

CINXE.COM