-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (171 loc) · 12.7 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
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<title>Zorro de Chiloé</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@0;1&display=swap" rel="stylesheet">
<style>
:root { --bs-font-sans-serif: "DM Sans", sans-serif; }
:hover { transition: all ease 0.5s; }
* { font-weight: 300; }
header p { text-align: justify; }
header p.lead { line-height: 1.6; }
.card, .card-img-top { border: none; border-radius: 0 0; }
footer a { color: var(--bs-gray); text-decoration: none; }
footer a:hover { color: var(--bs-light); }
</style>
</head>
<body>
<header class="container">
<div class="row py-5">
<div class="col-12 col-sm-11 col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h1 class="mb-3 mt-5 text-center">Zorrito de Chiloé: de la invisibilidad a la extinción</h1>
<h2 class="fs-6 mb-5 text-center text-uppercase">Marcos Fernández, Agustina González, Rosario González, Cristian Risco, Elisa Román</h2>
<p class="lead">Lycalopex fulvipes, es el nombre científico del Zorro Chilote, animal endémico de la Araucanía en Chile el cual vive mayoritariamente en la isla Grande de Chiloé y en el Parque Nacional de Nahuelbuta. Fue descubierto por Charles Darwin y se considera la especie de cánido de mayor riesgo de exitinción en el mundo.
</p>
<p>Este tipo de zorro es considerado como uno de los carnívoros más amenazados a nivel mundial, siendo así catalogado como en peligro de extinción a causa de diferentes factores, ya sea por ataques de animales domésitcos, persecución de avicultores pero principalmente a causa de la destrucción de su hábitat. Hoy en día se estima que la población total de la especia ronda entre los 650 y 2500 ejemplares, manteniéndose en decrecimiento.</p>
<!--SKETCH PARA PANTALLA GRANDE-->
<div class="d-none d-md-block shadow my-5">
<!--NINGUNA IMAGEN DEBE PESAR MÁS DE 200KB-->
<img src="img/INTROL.png" class="w-100" alt="introducción pantalla grande" />
<img src="img/DESARROLLOL.png" class="w-100" alt="desarrollo pantalla grande" />
<img src="img/CONCLUSIONL.png" class="w-100" alt="conclusión pantalla grande" />
</div>
<!--SKETCH PARA PANTALLA CHICA-->
<div class="d-md-none shadow my-5">
<!--NINGUNA IMAGEN DEBE PESAR MÁS DE 200KB-->
<img src="img/INTROS.png" class="w-100" alt="introducción pantalla chica" />
<img src="img/DESARROLLOS.png" class="w-100" alt="desarrollo pantalla chica" />
<img src="img/CONCLUSIONS.png" class="w-100" alt="conclusión pantalla chica" />
</div>
</div>
</div>
</header>
<main class="container-fluid bg-light">
<div class="row py-5">
<div class="col-sm-11 mx-auto py-3">
<!--LA PALETA CROMÁTICA-->
<h3 class="text-center">Colores</h3>
<!--Esto se define más abajo, en línea 175-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" class="shadow-sm my-3">
<g id="colores"></g>
</svg>
<p class="text-center">La paleta cromática construida para la infografía del Zorro Chilote se compone de dos tonos de grises, uno claro y otro oscuro que servirán de fondo en diferentes secciones del sitio, dependiendo de su contenido. Para generar acentos en elementos destacados se hará uso de un color rojizo principal, similar al del pelaje de las orejas del Zorro, mientras que para elementos secundarios se hará uso de dos tonos pastel de verde y azul.</p>
<!--LAS FUENTES TIPOGRÁFICAS-->
<h3 class="text-center pt-5 pb-1">Tipografías</h3>
<div class="row my-2 g-3">
<!-- PRIMERA FUENTE DEBE ESTAR DISPONIBLE EN GOOGLE FONTS-->
<!--https://fonts.google.com/ -->
<div class="col-md-6">
<div class="card shadow-sm">
<img src="img/Lexend.png" class="card-img-top" alt="lexend-ejemplos" />
<div class="card-body">
<h4 class="card-title">Lexend (Regular & Semi-Bold)
</h4>
<p class="card-text">Las fuentes Lexend están destinadas a reducir el estrés visual y así mejorar el rendimiento de lectura. </p>
</div>
</div>
</div>
<!-- SEGUNDA FUENTE TAMBIÉN DEBE ESTAR DISPONIBLE EN GOOGLE FONTS-->
<!--https://fonts.google.com/ -->
<div class="col-md-6">
<div class="card shadow-sm">
<img src="img/Bitter.png" class="card-img-top" alt="bitter-ejemplos" />
<div class="card-body">
<h4 class="card-title">Bitter (Regular)</h4>
<p class="card-text">Esta fuente se diseñó en un principio para leer cómodamente en cualquier dispositivo, ya sea computador o teléfono. Partió de la austeridad de la cuadrícula del pixel.</p>
</div>
</div>
</div>
</div>
<!--LOS GRÁFICOS-->
<h3 class="text-center pt-5 pb-1">Gráficos</h3>
<div class="row my-2 g-3">
<!--primer gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/anatomia.png" class="card-img-top" alt="anatomia-zorritodechiloe" />
<div class="card-body">
<h4 class="card-title">Anatomía - Figurativo</h4>
<p class="card-text"> Gráfico figurativo, llamado Illustration Diagram según <a href="https://datavizcatalogue.com"> DataVizCatalogue</a> que muestra una ilustración del zorro con un énfasis en sus particularidades fisiológicas, tales como su audición, sus patas, entre otras.</p>
</div>
</div>
</div>
<!--segundo gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/habitos1.png" class="card-img-top" alt="habitos-zorrodechiloe" />
<div class="card-body">
<h4 class="card-title">Hábitos-No figurativo</h4>
<p class="card-text"> Gráfico no figurativo, llamado Radar Chart según <a href="https://datavizcatalogue.com/methods/radar_chart.html"> DataVizCatalogue</a>, que exhibe los patrones de actividad horaria del zorro de Chiloé.</p>
</div>
</div>
</div>
<!--tercer gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/mapaconceptual1.png" class="card-img-top" alt="familias-zorrodechiloe" />
<div class="card-body">
<h4 class="card-title">Mapa Conceptual- No figurativo</h4>
<p class="card-text">Gráfico no figurativo, llamado Tree Diagram según <a href="https://datavizcatalogue.com/methods"> DataVizCatalogue</a>, el que busca mostrar el despliegue de las familias a la que pertenece el zorro de Chiloé y cuáles otros pertenecen a la misma. </p>
</div>
</div>
</div>
<!--cuatro gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/chiloe.png" class="card-img-top" alt="poblacion-zorrodechiloe" />
<div class="card-body">
<h4 class="card-title">Chiloé- No figurativo</h4>
<p class="card-text">Gráfico no figurativo, basado en la idea de un Dot Map definido en <a href="https://datavizcatalogue.com"> DataVizCatalogue</a>, este busca mostrar que se sabe la población actual, pero no se sabe cuántos especímenes se extinguieron. Particularmente, la población se encuentra fragmentada en dos grupos, la más grande se encuentra situada en la Isla de Chiloé y la con menos individuos se encuentra en el Parque Nacional de Nahuelbuta. </p>
</div>
</div>
</div>
<!--quinto gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/habitat.png" class="card-img-top" alt="describir la imagen" />
<div class="card-body">
<h4 class="card-title">Hábitat-Figurativo</h4>
<p class="card-text">Gráfico figurativo, llamado Illustration Diagram según <a href="https://datavizcatalogue.com"> DataVizCatalogue</a>, que muestra una ilustración del hábitat del Zorro de Chiloé con un énfasis en las particularidades del lugar, tales como la temperatura, árboles, especies, etc.</p>
</div>
</div>
</div>
<!--sexto gráfico-->
<div class="col-sm-6 col-md-4">
<div class="card shadow-sm">
<img src="img/extincion.png" class="card-img-top" alt="extincion-zorrodechiloe" />
<div class="card-body">
<h4 class="card-title">Extinción - Mixto</h4>
<p class="card-text">Gráfico mixto que muestra el estado de extinción del zorro de Chiloé en comparación a otros zorros presentes en Chile.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid bg-dark text-white-50">
<div class="row py-3">
<div class="col-12">
<p class="d-flex justify-content-between small p-1 m-0">
<a href="https://github.com/ZorroDeChiloe-InfoDigital">Zorro de Chiloe</a>
<a href="https://github.com/profesorfaco/dno075-2021-1/">Infografía Digital v2</a>
<a href="https://github.com/profesorfaco/dno075-2021-1/tree/main/clase-14" class="d-none d-lg-inline">Lunes 14 de junio, 2021</a>
</p>
</div>
</div>
</footer>
<script>
var colores = ["#333333","#333333", "#669999", "#cccc99", "#cc6666", "#cc6666", "#efefef", "#efefef", "#efefef"];
var n = colores.length;
var w = 100 / n;
for (var x = 0; x < n; x++) {
document.getElementById("colores").innerHTML += '<rect width="' + w + '" height="20" x="' + x * w + '" y="0" fill="' + colores[x] + '" stroke="' + colores[x] + '"/>';
}
</script>
</body>
</html>