-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCalidad-Internet-moviles-ene-mar-2021.html
160 lines (153 loc) · 10.4 KB
/
Calidad-Internet-moviles-ene-mar-2021.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
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>PEPA PING</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Mobland - Mobile App Landing Page Template">
<meta name="keywords" content="HTML5, bootstrap, mobile, app, landing, ios, android, responsive">
<!-- Font -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Themify Icons -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- Main css -->
<link href="css/style.css" rel="stylesheet">
<!--Map JS-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!--D3 Copyright 2010-2021 Mike Bostock-->
<script src="js/d3.js"></script>
<!--SVG.js Copyright (c) 2012-2018 Wout Fierens-->
<script src="js/svg.js"></script>
<!--Map CSS CC License CC-BY-SA. Author B1mbo-->
<link rel="stylesheet" href="./css/mapa.css">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="30">
<!-- Nav Menu -->
<div class="nav-menu fixed-top">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-dark navbar-expand-lg">
<a class="navbar-brand" href="index.html"><img src="images/pepa.png" class="img-fluid custom-logo" alt="logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="Reportes.html">Reportes</a> </li>
<li class="nav-item"> <a class="nav-link" href="Investigacion.html">Investigación</a> </li>
<li class="nav-item"> <a class="nav-link" href="Contacto.html">Contacto</a> </li>
<!-- <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li>
<li class="nav-item"><a href="#" class="btn btn-outline-light my-3 my-sm-0 ml-lg-3">Download</a></li> -->
<li class="nav-item"><a href="https://play.google.com/store/apps/details?id=cl.niclabs.vpnpassiveping" class="btn btn-outline-light my-3 my-sm-0 ml-lg-3">Descargar</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<header class="bg-gradient" id="home">
</header>
<div class="section mb-5 pt-5">
<div class="container mb-5">
<div class="row pt-4">
<div class="col-md-12">
<h2 class="mb-3 text-center">Datos Región Metropolitana</h2>
<div class="container">
<div>
<p>
Toda la informacion que consumimos a través de Internet se transporta a través de paquetes de datos. a cada uno de éstos se les puede calcular su <strong>RTT</strong> ( de inglés "Round Trip Time" o "Viaje de ida y vuelta"), que corresponde al <strong>tiempo que demora cada paquete en ir y volver</strong>. En general estos paquetes se envían a intervalos regulares de forma que vayamos consumiendo lo que se nos va enviando y no quedemos con espacios "en blanco" de contenido. Por ejemplo, si hay un servidor de streaming mandando un segundo de contenido cada segundo, podemos ir viendo el contenido sin quedarnos esperando a que el resto de la información llegue.
</p>
<p>
Pero, a pesar de que en un mundo ideal eso funcionaría bien, en la vida real existen <strong>fluctuaciones en las tasas de envío</strong>, lo que se conoce como <strong>jitter</strong>. Las fluctuaciones pueden deberse a varios factores, pero los principales son la congestión de Internet, el cambio de rutas o caminos de Internet, o la limitación de cuota de Internet desde tu ISP (o Proveedor de Servicios de Internet).
</p>
</div>
<h4 class="text-center">Seleccione tipo de datos</h4>
<div id="tabs_selector" class="row">
<div class="col-md-12 d-flex justify-content-center">
<button id="wifi" onclick="selectWifi()" class="btn btn-dark ">WiFi</button>
<button id="mobile" onclick="selectMobile()" class="btn btn-light ">Datos Móviles</button>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<h3 id="tipo_datos" class="pt-4" style="font-size:28px">Mostrando datos WiFi </h3>
<p> Datos recolectados mediante los teléfonos móviles de nuestros usuarios.</p>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<h4 class="pt-4">Seleccione compañía</h4>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div id="companies" class="col-md-11" style="display:block; margin:auto;width:100%;">
<button id="all" onclick="particularIsp('all', 'all')">Mostrar todas
</button>
</div>
</div>
<div id="seleccion_comuna" class="row pt-4">
<div class="col-md-1"></div>
<div class="col-md-11">
<h4>Selecciona una Comuna</h4>
</div>
</div>
<div id="chart" class="row ">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="row">
<div id="outer-map" style="display: inline-block;" class="col-md-9">
<div id="map" >
</div>
<div id="tooltip_comuna" class="tooltip_map" style="opacity:0">
</div>
</div>
<div id="map_scale" class="col-md-3">
</div>
</div>
</div>
<div id="table" style="visibility: hidden" class="col-md-5">
<div>
<h4 id="table_name">Comuna</h4>
<p>Indicadores de Calidad</p>
</div>
<div id="concrete_table" class="table_data tableFixHead">
</div>
<div id="tooltip_tabla" class="tooltip_tab">
</div>
</div>
</div>
<div class="row">
<p>
Cuando queremos saber si tenemos una buena o mala calidad de Internet, lo que buscamos es tener un <strong>bajo RTT</strong> (o sea que nuestros paquetes se muevan rápido) y un <strong>bajo Jitter</strong> (que los paquetes se muevan a velocidad similar).
</p>
<p>
En estos gráficos se muestran algunos de los datos recolectados por PePa Ping, correspondientes a <strong>algunas comunas de la Región Metropolitana</strong>. Los datos de PePa Ping fueron recolectados por voluntarios utilizando sus teéfonos móviles, por lo que puedes elegir ver entre los datos utilizando datos móviles o utilizando la señal wifi disponible.
</p>
<p>
Recuerda que estos datos no corresponden necesariamente a la realidad de todos los usuarios, ya que son sólo una pequeña <strong>muestra estadística</strong> de los datos recolectados por nuestros usuarios en el periodo de <strong>Enero a Marzo de 2021</strong>.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Map data managment-->
<script src="js/nuevo_mapa.js"></script>>
<!-- jQuery and Bootstrap -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<!-- Plugins JS -->
<script src="js/owl.carousel.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>