-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtaller-storymaps.html
279 lines (256 loc) · 19.5 KB
/
taller-storymaps.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Taller historias visuales georreferenciadas</title>
<style type="text/css">
/* Global styles */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
margin: 2cm 1cm;
text-align:justify;
}
ul,
ol,
dl,
p {
font-size: 1.5rem;
}
li,
p {
line-height: 1.5;
}
/* Code styles */
code {
font-family: monospace, monospace;
font-size: 1em;
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
/* Preformatted text styles */
p.francesa {
text-indent: -30px;
margin-left: 40px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
blockquote {
background-color: #b3aeae;
padding: 10px;
font-family: Courier New;
font-size: 12px;
border-left: 5px solid #ccc;
}
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
/* Container styles */
.main-container {
max-width: 940px;
margin: 0 auto;
font-size: 16px;
text-align: justify;
}
.container-fluid {
padding: 0 15px;
}
/* Image styles */
img {
max-width: 100%;
height: auto;
}
/* Social icons */
.social-icon {
font-size: 24px;
}
.social-name {
font-size: 16px;
}
.footnote {
margin: 0;
padding: 0;
font-size: 1em;
font-family: inherit;
text-decoration: none;
}
.image-container {
text-align: center;
margin-bottom: 0.5cm;
}
</style>
<!--iframe-->
<style>
#frame {
border: 2px dotted;
width: 600px;
height: 600px;
margin: 1cm;
}
</style>
<!-- CSS: Bootstrap and Devicon -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-lg bg-dark">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="materiales.html">Materiales</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="descargas.html">Descargas</a>
</li>
<li class="nav-item"></li>
<a class="nav-link" href="publicaciones.html">Publicaciones</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main-container">
<h1 class="title toc-ignore">Taller Storytelling georreferenciados: Creación y visualización de historias con StoryMapJS</h1>
<h4 class="author">Romina De León</h4>
<h5><a href="mailto:[email protected]" class="email">[email protected]</a></h5>
</div>
<div class="container-fluid main-container">
<nav id="index">
<h2>Índice</h2>
<ul>
<li><a href="#section-id1">Historias visuales y Humanidades Digitales</a></li>
<li><a href="#section-id2">Recorrido por Argentina de la AAHD</a></li>
<li><a href="#section-id3">A trabajar con StoryMap JS</a></li>
<li><a href="#section-id4">Ejercitación</a></li>
</ul>
</nav>
</div>
<div class="container-fluid main-container">
<div id="section-id1" class="section level3">
<h2>Historias visuales y Humanidades Digitales</h2>
</div>
<p>Cuando hablamos de visualización de datos, nos referimos a la representación gráfica de la información, lo que permite interpretar y relacionar los datos de formas nuevas y significativas mediante el uso de elementos visuales como gráficos, infografías y mapas. En el contexto de las Humanidades Digitales y la Historia Digital, la visualización de datos desempeña un papel fundamental, ya que facilita a historiadores, investigadores y académicos no solo representar la información, sino también analizar fenómenos culturales, sociales y temporales de manera interactiva y accesible.</p>
<p>La <a href="historia_digital.html">Historia Digital</a>, como rama de las Humanidades Digitales, se enfoca en el uso de tecnologías digitales para estudiar, analizar y representar el pasado. A través del análisis de grandes bases de datos, visualizaciones interactivas y mapas históricos dinámicos, abre nuevas formas de explorar la historia, permitiendo a los historiadores generar relatos más accesibles y dinámicos.</p>
<p>En este ámbito, la narrativa digital o <em>digital storytelling</em>, juega un rol crucial, ya que permite representar datos históricos visualmente, y también construir narrativas interactivas que conectan con el receptor de formas innovadoras, haciendo que las historias sea más comprensibles y cercanas.</p>
<p>Las <em>historias visuales</em> buscan no solo presentar datos de manera objetiva, sino también crear narrativas complejas que proporcionen un contexto profundo a la información. El <em>storytelling</em>, entendido como el arte de contar historias, permite estructurar la información en una narrativa con un inicio, desarrollo y conclusión. Esto facilita generar una conexión emocional del público con el contenido, haciendo que los datos cobren vida y sean más relevantes. Actualmente, esta práctica es clave en áreas como el marketing, los medios digitales, y la educación.</p>
<div class="image-container">
<img src="https://live.staticflickr.com/65535/51887423693_d31c132735_b.jpg" alt="Obtenido desde: https://www.flickr.com/photos/cnichele65/51887423693" style="width: 75%;"></img>
</div><br/>
<p>El <strong>Digital Storytelling</strong> complementa las historias visuales al proporcionar un marco narrativo que combina datos, visualizaciones y narrativas, transformando como se comunican y perciben los hechos, haciendo la información más memorable. En el ámbito educativo fomenta la creatividad y el pensamiento crítico, pues permite a los estudiantes expresar ideas complejas a través de narrativas digitales que integran texto, audio y elementos visuales. Esta metodología promueve el aprendizaje activo y la colaboración, mientras desarrolla habilidades tecnológicas esenciales para el mundo contemporáneo.
</p>
<h3>Storytelling en la Visualización de Datos</h3>
<p>Las historias, ya sean visuales o digitales, se estructuran alrededor de preguntas clave como: ¿quién?, ¿qué?, ¿cuándo?, ¿dónde? y ¿por qué? Al conectar eventos, personajes y espacios, estas narrativas ayudan a comprender fenómenos complejos. Por lo que surge la necesidad de entender el contexto, destacar los elementos más centrales y visuales, eliminar lo innecesario, tener en cuenta a los destinatarios, y dar coherencia a la historia. Esto implica combinar técnicas tradicionales de narración con herramientas digitales para enriquecer el relato.</p>
<p>Veamos algunos ejemplos de software para la creación de historias visuales digitales. Y, dejaremos para el final la herramienta que utilizaremos en el taller. Asimismo primero quiero mostrarles el potencial de la misma con este recorrido de los Congresos de la <a href="https://aahd.net.ar/" target="_blank">AAHD</a>:</p>
<div class="container-fluid main-container">
<div id="section-id2" class="section level3">
<h2>Recorrido por Argentina de la AAHD</h2>
<iframe src="https://uploads.knightlab.com/storymapjs/ca5247e9464ebf1dae72e0cf471ba85d/taller-congreso-aahd/index.html" frameborder="0.5" style="width: 100%; height: 600px;"></iframe>
</div>
</div>
<br/>
<h3>Algunas herramientas disponibles para la creación de historias visuales:</h3>
<ul>
<li><a href="https://storymaps.arcgis.com" target="_blank">ArcGIS StoryMaps</a>:
<p>Es una plataforma de <a href="https://www.esri.com/en-us/home" target="_blank">ESRI</a> que combina mapas interactivos con narrativas multimedia, permite contar historias complejas que requieren múltiples capas de datos espaciales. Integra mapas y datos geoespaciales, además de contar con la capacidad para añadir texto, imágenes, videos, gráficos y otros medios. Es utilizado en investigaciones, periodismo y proyectos académicos. <strong>Contras</strong>: Requiere suscripción paga. Ofrece un plan gratuito limitado.</p>
<div class="image-container">
<iframe width="100%" height="800px" src="https://lancasteruni.maps.arcgis.com/apps/Cascade/index.html?appid=618aede6f7d045b9b526a71fd943dc6d" frameborder="0" scrolling="yes">Mesoamerican Pathways | Depicting Geographies</iframe></div>
</li>
<li><a href="https://www.mapbox.com" target="_blank">Mapbox</a>
<p>Se trata de una plataforma que permite visualización de datos con incorporación de mapas personalizados, y añadir datos geoespaciales junto a textos y otros medios. Se utiliza en aplicaciones web, visualización de datos, y narrativas interactivas georreferenciadas. Su uso gratuito es limitado, en el número de visualizaciones de mapas o accesos API. Para proyectos más grandes requiere suscripción paga.</p>
<div class="image-container">
<iframe src="https://history-maps.com/es/story/History-of-Egypt" width="100%" height="500px" frameborder="0" allowfullscreen allow="geolocation">Historia de Egipto</iframe></div>
</li>
<li>Otras software que requieren subscripción paga: <a href="https://carto.com" target="_blank">Carto</a>, <a href="https://www.scribblemaps.com">Scribble Maps</a> y <a href="https://mapme.com" target="_blank">Mapme</a>; gratuitos y open source: <a href="https://cartodb.github.io/odyssey.js" target="_blank">Odyssey.js</a>, <a href="https://umap.openstreetmap.fr" target="_blank">uMap</a>, <a href="https://www.historypin.org" target="_blank" >Historypin</a></li>
<li>Acá podemos ver otro ejemplo de historias visuales georreferenciadas creada con <em>Historypin</em>:
<br/>
<div class="image-container">
<iframe width="560" height="315" frameborder="0" allowfullscreen src="https://www.historypin.org/en/first-world-war-centenary/geo/51.165687,10.45149,19/bounds/51.165178,10.449552,51.166196,10.453428/paging/1/project/about/state/map">First World War Centenary</iframe>
</div> </li>
</ul>
</p>
</div>
<br/>
<div class="container-fluid main-container">
<div id="section-id3" class="section level3">
<h2>A trabajar con StoryMap JS!</h2><br/>
<h3>¿Qué es <a href="https://storymap.knightlab.com/" target="_blank">StoryMap JS</a>?</h3><br/>
<p>StoryMap es una plataforma web gratuita y abierta, desarrollada por la comunidad <a href="https://knightlab.northwestern.edu/" target="_blank">Knight Lab</a> de la Universidad de Northwestern, que permite crear historias digitales interactivas con textos, imágenes, audios, vídeos, con mapas georeferenciados. Además, posee una gran cantidad de opciones para el diseño de las historias, pudiendo combinar plantillas para integrar los elementos multimedia con georreferenciación de lugares. Y todo ello sin requerir conocimientos de programación ni de diseño. <a href="#section-id2">Más arriba</a> pudieron ver el potencial en el mapa creado para el recorrido de los Congresos de la AAHD.</p>
<p>Ahora vamos a modificar el mapa y observar los cambios en dicha historia. Para ello, ingresaré al sitio de knightlab con mi usuario, y seleccionar el mapa que quiero editar. Luego, voy a añadir una nueva diapositiva al final, y allí comenzaré a editar.</p>
</div><br/>
<div class="container-fluid main-container"></div>
<div id="section-id4" class="section level3">
<h2>Ejercitación con StoryMap JS!</h2><br/>
<h3>¿Cómo crear un mapa</h3><br/>
<ul><li>Crear un usuario desde <strong>Make a StoryMap</strong> en <a href="https://knightlab.northwestern.edu/">https://knightlab.northwestern.edu/</a>, luego seleccionar <strong>Sign in with Google</strong><a href="#section-fn1" class="footnote-ref"><sup>1</sup></a>:
<div class="image-container"><img src="https://pressbooks.library.yorku.ca/csiw-workshops/wp-content/uploads/sites/92/2021/10/unnamed-8.png" style="width: 75%;"></img></div>
</li>
<li>Ahora podremos crear un mapa desde <strong>New</strong>, allí añadiremos el título, y clickearemos en <strong>Create</strong><div class="image-container">
<img src="img/storymap-create.png" style="width: 75%;"></img>
</div></li>
<li>Luego de crear el mapa, ingresaremos a la interfaz de creación, la primera <em>slide (diapositiva)</em> que genere será la presentación. En esta interfaz podremos agregar título, subtítulo y una descripción. En la parte izquierda, podremos subir una imagen o la URL, agregar créditos; en la derecha, sumaremos título y descripción, y seleccionar fondo de diapositiva mediante una nueva imagen o añadiendo URL. Para este punto, ya tendremos la carátula de nuestro mapa.</li>
<li>En el margen superior izquierdo, encontraremos un botón de <em>Opciones</em>, desde donde podremos cambiar el idioma, seleccionar el tamaño del mapa, la tipografía, el tipo de mapas<a href="#section-fn2" class="footnote-ref"><sup>2</sup></a>, etc. Es decir, modificar el diseño y la apariencia de nuestra historia georreferenciada.</li>
<div class="image-container">
<img src="https://programminghistorian.org/images/displaying-georeferenced-map-knightlab-storymap-js/treatasimage_storymapjs.png" style="width: 60%;"></img>
</div><br/>
<li>Para agregar nuevas diapositivas, lo haremos desde <em>add slide</em>, en la barra lateral izquierda. Allí colocaremos la georreferenciación, por medio de longitud y latitud, así como buscar un sitio puntual<a href="#section-fn3" class="footnote-ref"><sup>3</sup></a>. Además de los mismos pasos que en la diapositiva principal, nos permitirá seleccionar marcadores, para lo cual podremos subir imágenes de iconos<a href="#section-fn4" class="footnote-ref"><sup>4</sup></a>.</li>
<li>El último paso será el de compartir nuestra historia visual georreferenciada, desde <em>Share</em>, que permitirá copiar en <strong>link</strong> a compartir, el código para embeber en un sitio web, o la descarga de un archivo <strong>ZIP</strong>, con los archivos necesarios para alojar y gestionar nuestro proyecto fuera de la plataforma de KnightLab. Este proceso permite un control total sobre el mapa, incluyendo la personalización de la visualización y la posibilidad de compartirlo sin depender de la herramienta en línea.</li></ul>
<p>Por ello, les traigo un ejemplo de esta metodología,</p>
<br/>
<iframe src="https://j-spinelli.github.io/ulrico-schmidel-storymap/" frameborder="0.5" style="width: 100%; height: 600px;"></iframe>
<br/>
<p>Este un proyecto en el que hemos estado trabajando este año en el <a href="https://hdlab.space/" target="_blank">HDLAB</a> sobre un cronista alemán del siglo XVI que viajó por esta región. Desde el río de la Plata, aguas arriba por el río Paraná, hasta llegar a Asunción del Paraguay, con la expedición de Pedro de Mendoza. Aún no hemos publicado la edición digital pero aquí pueden ver un avance de un mapa que ha diseñado un colega desde la parte técnica de esta plataforma.</p><br/>
<p>En resumen, StoryMapJS facilita la creación de mapas interactivos con narrativas visuales de manera estándar, además ofrece opciones para compartir y publicar fácilmente, por medio de la generación de una URL o permitiendo embeber el mapa en sitios web. Todo ello proporciona una gran flexibilidad para integrar estas visualizaciones en distintos entornos. Asimismo, con la opción de descarga del proyecto completo, nos habilita la posibilidad de personalizar y alojar nuestro proyecto en servidores locales, con un mayor control del contenido y modificación de ajustes avanzados, que se podrán adaptar a las necesidades específicas de cada proyecto. Esta combinación de accesibilidad y personalización hace de StoryMapJS una herramienta potente tanto para usuarios principiantes como avanzados en la creación de narrativas georreferenciadas.</p>
</div>
<div class="footnotes footnotes-end-of-document">
<hr />
<ol>
<li id="section-fn1"><p>StoryMap JS tiene su propia herramienta de autoría a través de <em>Google</em>, es lo que utilizaremos en este tutorial. Asimismo, es posible utilizarlo sin una cuenta de Google, sin embargo la edición es un proceso diferente. Si prefieres no utilizar una cuenta de Google, Knight Lab tiene informa sobre cómo hacerlo en su <a href="https://storymap.knightlab.com/advanced/">página para usuarios técnicos</a>. <a href="#section-fn1" class="footnote-backref">↩</a></p></li>
<li id="section-fn2"><p>Para otros tipos de mapas, como ser MapBox o Stadia, se requiere en ambos sitios crear una cuenta para que facilite el token. Mapbox como Stadia Maps ofrecen opciones gratuitas que permiten obtener un token y utilizar mapas básicos, aunque con algunas limitaciones. <a href="#section-fn2" class="footnote-backref">↩</a></p></li>
<li id="section-fn3"><p>Para encontrar una ubicación, si no figura en el buscador que proporciona StoryMap, se puede añadir latitud y longitud que se encuentre en otro mapa, por ejemplo en Google Maps.<a href="#section-fn3" class="footnote-backref">↩</a></p></li>
<li id="section-fn4"><p>Para marcadores personalizados, puedes subir iconos en tu Mapa, pero se debe realizar individualmente para cada punto (deslizamiento) del mapa. Incluso, se puede crear un marcador distinto para uno o más puntos. Para ello, en el botón <em>Opciones de marcadores</em>, sube una imagen del marcador que te gustaría utilizar, debe ser con formato PNG y fondo transparente. Recomiendo tener en cuenta la <em>licencia Creative Commons</em> apropiada para el uso de imágenes en toda la confección de la historia. En los siguientes sitios se puede hallar imágenes de marcadores, seleccionar la opción gratuita, <a href="https://www.flaticon.com/free-icons/">Flaticon</a>, <a href="https://www.freepik.com" target="_blank">Freepik</a>, <a href="https://icons8.com/" target="_blank">Icons8</a>, <a href="https://openmoji.org/" target="_blank">Openmoji</a>, <a href="https://iconduck.com/" target="_blank">Iconduck</a> entre otros.<a href="#section-fn4" class="footnote-backref">↩</a></p></li>
</ol>
</div>
</div>
<!-- JS: Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qphytj8LA8exTJO1r1CXbIktKW5mbxc1Y7ubtvnUP07o0f21E8rGTk7FWeF6mcA7" crossorigin="anonymous">
</script>
</body>
</html>