-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
451 lines (428 loc) · 26.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sensores | León Ayuntamiento</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/png" href="img/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital@1&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/1af8ef7b77.js"></script>
<!--/ Mapbox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/sensor.png" alt="Hacking Cívico" /></a>
<span class="brand-span"><a href="#">Sensores León</a></span>
</div>
<div class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav">
<li class="active"><a href="#giras">SOBRE LOS SENSORES</a></li>
<li class="active"><a href="#temario">MEDIO AMBIENTE</a></li>
<li class="active"><a href="#clubes">MOVILIDAD</a></li>
<li class="active"><a href="#conectividad">CONECTIVIDAD</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-generacion">
<div class="container no-padding">
<div class="text-center">
<img src="img/hero2.png" alt="León Ciudad Humana e Inteligente" />
</div>
</div><!-- /.container -->
</div><!-- /.container-generacion -->
<div class="container-participa">
<div class="container no-padding">
<div class="container container-participa-interno">
<div class="col-xs-12">
<p>
La <b>red de sensores</b> permite mejorar la eficiencia del Gobierno Municipal mediante el control y supervisión de los servicios públicos, a partir de una nueva modalidad de administración y gestión integral con un alto soporte tecnológico.
</p><br>
</p>
<p>
Brinda al Municipio de León la capacidad de relacionar datos y generar capas de información para la mejor toma de decisiones e implementación de correctos protocolos a seguir, impactando de forma directa en la mejora de la calidad de los servicios que se le brindan a los ciudadanos.
</p>
<div class="clearfix"></div><br><br>
</div>
</div>
</div><!-- /.container -->
<div class="container-city">
<div class="container no-padding">
<div class="text-center">
<img class="logo-city" src="img/leon_inteligente.png" alt="León Ciudad Humana e Inteligente" />
</div>
</div>
</div><!-- /.container-city -->
</div>
<!-- SENSORES -->
<div id="giras">
<div class="container no-padding">
<div class="container-temario-interno">
<h2>RED <span>DE SENSORES</span></h2>
<p>¿Qué tipo de información generan los sensores y quiénes los leen?</p>
</div>
</div>
</div>
<div id="temario-secundario">
<div class="container no-padding">
<div class="container-temario-interno">
<h3>Acerca de:</h3>
Los datos generados por los sensores son accesibles para la Dirección General de Innovación, Gestión Ambiental, Movilidad, Obra Pública, Seguridad Pública, el Administrador de Servicios del Municipio, y el Alcalde Municipal.
Sin embargo, siguiendo con la iniciativa de ser un Municipio Humano Inteligente se busca centralizar la información para que sea accesible y con capacidad de ser correlacionada por todo el Municipio.
<p></p><br>
Actualmente los sensores se encuentran distribuidos estratégicamente dentro de la ciudad para poder medir y complementar la información generada por cada uno de ellos. En total esta red mide más de 20 variables diferentes.
<p></p><br>
</div>
<div class="col-xs-12 no-padding">
<div class="col-sm-3">
<img src="img/meteorologico.png" alt="Meteorologicos" />
<p>Estaciones <strong>ambientales</strong>.</p>
</div>
<div class="col-sm-3">
<img src="img/movilidad.png" alt="Particulas" />
<p>Sensores de <strong>movilidad</strong>.</p>
</div>
<div class="col-sm-3">
<img src="img/telegestion.png" alt="Contaminantes" />
<p>Sensores de <strong>telegestión</strong>.</p>
</div>
<div class="col-sm-3">
<img src="img/conectividad.png" alt="Contaminantes" />
<p>Puntos de <strong>conectividad</strong>.</p>
</div>
</div>
</div>
</div>
<div id="temario-tercero">
<div class="container no-padding">
<div class="col-xs-12 no-padding">
<div class="col-sm-3 border border-gray border-right-separador">
<div class="border-fload-right border-gray"></div>
<div class="container-temas">
<p>
<span class="color-gray">MEDIO AMBIENTE</span>
<br><br>
<span class="color-gray">1. Clima y ruido</span>
<br><br>
<span class="color-gray">2. Partículas contaminantes</span>
<br><br>
<span class="color-gray">3. Otros gases</span>
</p>
</div>
<div class="border-fload-left border-gray"></div>
</div>
<div class="col-sm-3 border border-gray border-right-separador">
<div class="border-fload-right border-gray"></div>
<div class="container-temas">
<p>
<span class="color-gray">MOVILIDAD</span>
<br><br>
<span class="color-gray">1. Tráfico</span>
<br><br>
<span class="color-gray">2. Velocidades</span>
<br><br>
<span class="color-gray">3. Origen-destino</span>
</p>
</div>
<div class="border-fload-left border-gray"></div>
</div>
<div class="col-sm-3 border border-gray">
<div class="border-fload-right border-gray"></div>
<div class="container-temas">
<p>
<span class="color-gray">TELEGESTIÓN</span>
<br><br>
<span class="color-gray">1. Alumbrado público</span>
<br><br>
<span class="color-gray">2. Monitoreo de circuitos</span>
<br><br>
<span class="color-gray">3. Atención a fallas</span>
</p>
</div>
<div class="border-fload-left border-gray"></div>
</div>
<div class="col-sm-3 border border-gray">
<div class="border-fload-right border-gray"></div>
<div class="container-temas">
<p>
<span class="color-gray">CONECTIVIDAD</span>
<br><br>
<span class="color-gray">1. Puntos de conexión</span>
<br><br>
<span class="color-gray">2. Usuarios conectados</span>
<br><br>
<span class="color-gray">3. Disponibilidad del servicio</span>
</p>
</div>
<div class="border-fload-left border-gray"></div>
</div>
</div>
</div>
</div>
<!-- Mapbox -->
<div id='map' style='width: 100%; height: 450px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicmljYXJkb21pcm9uIiwiYSI6ImNrM25zd2xxYTF0cHczbW4xanI4NnR5dXYifQ.Opb-lL0Si3GS8MUlG6fdsQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ricardomiron/ckx9debou15b514nvxzf5a8n0', // stylesheet location
center: [-101.6827918, 21.1213316], // starting position [lng, lat]
zoom: 12 // starting zoom
});
</script>
<!-- END SENSORES -->
<!-- CALIDAD DEL AIRE -->
<div id="temario">
<div class="container no-padding">
<div class="container-temario-interno">
<h2>DATOS <span> MEDIO AMBIENTE</span></h2>
<p>Datos sobre calidad del aire, así como las recomendaciones y nivel de riesgo asociado.</p>
</div>
</div>
</div>
<div class="gira-secundario" id="temario-secundario">
<div class="container no-padding">
<div class="container-temario-interno">
El <a href="https://www.dof.gob.mx/nota_detalle.php?codigo=5579387&fecha=20/11/2019"> Índice de Calidad del Aire y Riesgos a la Salud</a> relaciona la concentración de contaminantes con una categoría de calidad del aire, asignando un nivel de riesgo y las recomendaciones para la protección para la población en general. Por ejemplo, las partículas PM10 se calculan en una concentración promedio móvil ponderado de 12 horas*
<p></p><br>
<h3> PM10:</h3> Se denomina PM10 a pequeñas partículas sólidas o líquidas de polvo, cenizas, hollín, partículas metálicas, cemento o polen, dispersas en la atmósfera, y cuyo diámetro aerodinámico es menor que 10 µm (1 micrómetro corresponde la milésima parte de 1 milímetro). La exposición prolongada o repetitiva a las PM10 puede provocar efectos nocivos en el sistema respiratorio de las personas.
<p></p><br>
<!-- BUENA -->
<div class="panel-group reto-green" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse1" aria-expanded="false">Buena (riesgo bajo) </a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
(PM10: 0 - 50) Disfruta las actividades al aire libre. Se considera que el riesgo es mínimo o nulo.
</div>
</div>
</div>
<!-- MODERADA -->
<div class="panel-group reto-yellow" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse2" aria-expanded="false">Aceptable (riesgo moderado) </a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
(PM10: 51 - 75) Considera reducir las actividades físicas vigorosas al aire libre. Las personas sensibles pueden experimentar síntomas respiratorios (asmáticos).
</div>
</div>
</div>
<!-- MALA -->
<div class="panel-group reto-orange" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse3" aria-expanded="false">Mala (riesgo alto) </a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
(PM10: 76 - 155) Evita las actividades físicas (tanto moderadas como vigorosas) al aire libre. Para todos los contaminantes criterio existe probabilidad de disminución en la capacidad pulmonar en personas sanas.
</div>
</div>
</div>
<!-- MUY MALA -->
<div class="panel-group reto-red" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse4" aria-expanded="false">Muy mala (riesgo muy alto) </a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
(PM10: 156 - 235) No realices actividades al aire libre. Acudir al médico si se presentan síntomas respiratorios o cardiacos. Para todos los contaminantes criterio, mayor probabilidad de presencia de síntomas respiratorios en población general.
</div>
</div>
</div>
<!-- EXTREMADAMENTE MALA -->
<div class="panel-group reto-purple" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse5" aria-expanded="false">Extremadamente mala (riesgo extremadamente alto) </a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
(PM10: > 235) Permanece en espacios interiores. Acudir al médico si se presentan síntomas respiratorios o cardiacos. Para todos los contaminantes criterio, incremento en la probabilidad de síntomas severos respiratorios en población general.
</div>
</div>
</div><br>
<!-- Google Data Studio -->
<h3> Históricos (2020):</h3> Podemos ver los niveles históricos promedio por día de partículas (PM10) que proveen los sensores para detectar picos en los niveles de contaminación en determinado lugar de la ciudad. Este tipo de análisis permiten que el Gobierno Municipal tome las medidas adecuadas de manera focalizada para mejorar las condiciones ambientales de la zona.
<p></p><br>
<!-- <div class="google-data-studio">
<iframe width="820" height="470" src="https://datastudio.google.com/embed/reporting/e8c751b3-57bf-43b3-bc6b-91a8ba447512/page/39hzB" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<br><br> -->
<div class="google-data-studio">
<iframe width="820" height="470" src="https://datastudio.google.com/embed/reporting/3369d6f1-5717-4ed9-81f1-375f14ec7f89/page/RZS0B" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<i>* Utiliza las flechas para cambiar de ubicación.</i>
<br><br>
</div>
</div>
</div><br>
<!-- END CALIDAD DEL AIRE -->
<!-- MOVILIDAD -->
<div id="clubes">
<div class="container no-padding">
<div class="container-temario-interno">
<h2>DATOS<span> MOVILIDAD</span></h2>
<p>Datos sobre movilidad que ayudan a determinar los niveles de servicio de tráfico en la ciudad.</p>
</div>
</div>
</div>
<div class="clubes-secundario" id="temario-secundario">
<div class="container no-padding">
<div class="container-temario-interno">
<div class="col-xs-12">
<div class="col-sm-12">
<h3>TIPOS DE CONTEO</h3>
Los sensores de movilidad son dispositivos especializados para el cálculo de niveles de servicio de tráfico a través de la lectura de señales Bluetooth y Wifi dentro de la red de sensores, manteniendo siempre la privacidad de los datos, brindando adicionalmente cálculos como Matriz Origen-Destino y tiempos de desplazamiento.
<p></p><br>
<!-- BUENA -->
<div class="panel-group reto-green" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse6" aria-expanded="false">Tráfico fluido </a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
Dispositivos o vehículos que viajan a una velocidad de 50 Km/h ó superior se considera "Tráfico fluido"
</div>
</div>
</div>
<!-- MODERADA -->
<div class="panel-group reto-yellow" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse7" aria-expanded="false">Tráfico regular </a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
Dispositivos o vehículos que viajan a una velocidad entre 25 km/h y 49 km/h se considera "Trafico regular"
</div>
</div>
</div>
<!-- MALA -->
<div class="panel-group reto-orange" id="accordion">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="index.html#collapse8" aria-expanded="false">Tráfico lento </a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
Dispositivos o vehículos que viajan a una velocidad menor de 25 Km/h se considera "Tráfico lento o congestionado"
</div>
</div>
</div>
<iframe width="820" height="470" src="https://datastudio.google.com/embed/reporting/0c3fb507-7eb6-426f-ae9c-e3d82b506117/page/Bne0B" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe width="820" height="470" src="https://datastudio.google.com/embed/reporting/d7e3f621-9d47-4973-9140-a9ed780c8e56/page/p_iiy2juvdqc" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="clearfix"></div><br><br>
</div>
</div>
</div>
<!-- END MOVILIDAD -->
<!-- CONECTIVIDAD -->
<div id="clubes">
<div class="container no-padding">
<div class="container-temario-interno">
<h2>DATOS<span> CONECTIVIDAD</span></h2>
<p>Datos sobre los puntos de conectividad a internet en zonas urbanas y rurales de la ciudad.</p>
</div>
</div>
</div>
<div class="clubes-secundario" id="temario-secundario">
<div class="container no-padding">
<div class="container-temario-interno">
<div class="col-xs-12">
<div class="col-sm-12">
<h3>PUNTOS DE CONEXIÓN</h3>
En la primera fase del servicio de internet gratuito se instalaron 51 nodos, mismos que ya están activos en 48 comunidades rurales y 3 en plazas públicas, mismos que benefician a 119 centros escolares, en beneficio de 20 mil habitantes.
<p></p><br>
<iframe width="820" height="600" src="https://datastudio.google.com/embed/reporting/3e39bd54-c64e-40f8-b276-35950a2239d2/page/VKpVB" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="clearfix"></div><br><br>
</div>
</div>
</div>
<!-- END CONECTIVIDAD -->
<!-- FOOTER -->
<div class="footer">
<div class="container no-padding">
<div class="col-xs-12">
<div class="col-sm-4">
<ul>
<li>Calle Madero #322, Zona Centro, León, Guanajuato.</li>
</ul>
</div>
<div class="col-sm-4">
<ul>
</ul>
</div>
<div class="col-sm-4 move-bottom">
<p>Dirección General de Innovación, Gobierno Municipal de León.</p>
</div>
</div>
</div>
</div>
<div class="footer footer-secundario">
<div class="container no-padding">
<div class="text-center">
<div>
<a href="https://www.leon.gob.mx/leon/" target="_blank"><img class="logo-leon" src="img/municipio.png" alt="León Municipio" /></a>
</div>
</div><br>
<div class="text-footer">
Dirección General de Innovación, LAB León 2021 ©
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- script references -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-nav>li>a").click(function(event){
var aid = $(this).attr("href");
$('html,body').animate({scrollTop: $(aid).offset().top-50},'slow');
$( ".navbar-nav>li>a" ).each(function() {
$( this ).removeClass( "active-dos" );
});
$( this ).addClass( "active-dos" );
});
$("a").click(function(event){
var aid = $(this).attr("href");
$('html,body').animate({scrollTop: $(aid).offset().top-50},'slow');
});
});
</script>
</body>
</html>