-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (87 loc) · 7.22 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
<!doctype html>
<html>
<head>
<meta charset="utf-8"> <!-- Sección de caja de caracteres en español -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Esta seccion es muy importante, ya que define si la página se escala a la pantalla o no -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Vínculo hacia Boostrap -->
<title>Seminario Gráfica Computacional I 2018, Primer Semestre → Clase 1 → Viernes 16 de marzo</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script> <!-- Ésta linea de código redirige a una librería de JavaScript, la cual es el mapa con ubicación -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"><!-- Fuente tipográfica -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600i,700" rel="stylesheet">
<link href="style.css" rel="stylesheet"> <!-- Estilo CSS que se encuentra dentro de la carpeta -->
</head>
<body>
<div class="container" style="background-color: #ffffff">
<div class="row">
<div class="col-sm-12 py-5"> <!-- El container, es parte de Boostrap. La gracia de éste, es que se puede ordenar por medio de una grilla, con columnas, filas y casillas, a modo de grilla de diseño. Boostrap funciona hasta con 12 columnas. La gracia de esto, es que se pueden agregar comandos para generar columnas "responsivas", que se adapten a distintas pantallas. col-12 (normal), col-sm-12 (pantallas pequeñas), col-md-12 (pantalla mediana), col-lg-13 (pantalla grande) y col-xl-12 (pantalla extra grande). Además, la sección "py-5", es el "padding", o espaciado superior entre las columnas y el margen. -->
<h1>Tembló</h1> <!-- h1: títulos grandes, h2: títulos medianos, p: párrafos -->
<h2>En alguna parte del mundo</h2>
<p>Usaré espanglish:</p>
<p>El <a href="https://earthquake.usgs.gov/">Earthquake Hazards Program</a> del <a href="https://www.usgs.gov/">USGS</a>, tiene un servicio de <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">GeoJSON Summary Format</a>, donde pueder is a buscar data sobre los movimientos telúricos alrededor del mundo.</p>
<p>Consultando el registro de los M4.5+ Earthquakes del Past Day, podemos enterarnos que el último registro corresponde a un movimiento de M<span id="magnitud"></span> ocurrido a las <span id="hora"></span> GMT en <span id="lugar"></span>, con epicentro en las coordenadas <span id="coords"></span></p>
<p>Para ser más preciso, este es el epicentro registrado:</p>
<div id="mapid"></div>
<p>Si quieren ver la hora a la que ocurrió este movimiento telúrico, métanse a la consola de Javascript del Navegador, allí hay un número raro. Ese número es un Unix Timestamp, que pueden traducir en <a href="https://www.unixtimestamp.com/" target="_blank">https://www.unixtimestamp.com/</a></p>
</div>
<div class="col-sm-6 pb-5">
<p>Antes de continuar, necesito que cada uno de ustedes genere una cuenta en <a href="https://home.openweathermap.org/users/sign_up" target="_blank">OpenWeatherMap</a>. Vamos a usar la <a href="https://openweathermap.org/api">WeatherAPI</a>, y para ello, es mejor que cada cual cuente con su <a href="http://openweathermap.org/appid">APIKey</a>.</p>
</div>
<div class="col-sm-6 pb-5">
<p>¿De qué está hablando?¿Qué es una API? No es nada complicado. De hecho, se trata de algo creado para facilitar la programación, en rigor es una <a href="https://es.wikipedia.org/wiki/Interfaz_de_programaci%C3%B3n_de_aplicaciones" title="Wikipedia">Interfaz de programación de aplicaciones.</a></p>
</div>
<div class="col-sm-12" style="border-top:1px solid #eee;">
<div class="row pt-3 pb-4 small">
<div class="col-sm-9">
<p>Seminario Gráfica Computacional I 2018, Primer Semestre → Clase 2, Prueba 1 → Viernes 23 de marzo</p>
</div>
<div class="col-sm-3 text-right">
<p><a href="weather.html">Continuar</a></p>
</div>
</div>
</div>
</div>
</div>
<script> // JSON (JavaScript Object Notation), es básicamente un sistema de programación que ordena datos, al cual se puede acudir para obtener datos y representarlos en la página. Para lograr esto, se crean variables con nombres, las cuales solicitan los datos de la fuente.
var request = new XMLHttpRequest();
request.open('GET', 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson', true);
request.onload = function () { // Esta linea hace referencia a la solicitud a la base de datos.
var data = JSON.parse(this.response); // Para lograr esto, se crean variables con nombres, las cuales solicitan los datos de la fuente. para ordenar esto, se utiliza la siguiente nomenclatura, separando por puntos cada caategoría interna, y el orden del dato solicitado.
var lat = data.features[0].geometry.coordinates[1];
var lon = data.features[0].geometry.coordinates[0];
var where = data.features[0].properties.place;
var when = new Date(data.features[0].properties.time);
var whenUTC = when.toUTCString();
var magnitud = data.features[0].properties.mag
document.getElementById("magnitud").innerHTML = magnitud;
document.getElementById("lugar").innerHTML = where.split(',')[1];
document.getElementById("hora").innerHTML = whenUTC.split(' ')[4];
document.getElementById("coords").innerHTML = "("+ lat + ", " + lon +")"; // Este comando sirve para ingresar un dato de las variables anterior, e ingresarlo en una variable ingresada en el texto del cuerpo del html
console.log(data);
console.log(when);
console.log(whenUTC);
//ícono mapa
var sismoicon = L.icon({ // Variable para introducir un ícono en el mapa
iconUrl: 'sismo.png',
iconSize: [150, 150], // Tamaño del ícono.
iconAnchor: [75, 75], // Punto del ícono que corresponderá a las coordenadas.
popupAnchor: [0, 0] // Punto del pop up relativo al icono.
});
//mapa
var mymap = L.map('mapid').setView([lat, lon], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([lat, lon], {icon: sismoicon}).addTo(mymap)
.bindPopup("<h5>"+ magnitud + "</h5><p>" + lat + "," + lon + "<p>").openPopup();
}
request.send();
</script> <!-- JSON (JavaScript Object Notation), es básicamente un sistema de programación que ordena datos, al cual se puede acudir para obtener datos y representarlos en la página. Para lograr esto, se crean variables con nombres, las cuales solicitan los datos de la fuente. -->
</body>
</html>