Práctica 3. Espazo e información
Disposición da información sobre o espazo xeográfico
Os mapas, as vistas dende o ceo a través de fotografías e as vistas dende o satélite son elementos moi frecuentes no día a día do traballo no campo da infografía.
Porén, este tipo de abordaxes non están exentas de retos. Nesta segunda práctica buscaremos enfrontarnos á necesidade de situar diferentes elementos sobre un mapa empregando unha das múltiples opcións que nos ofrece a ferramenta Flourish.
O traballo nesta aplicación ten lugar en dous puntos: un espazo de datos (introdución dos mesmos e selección da súa función) e un espazo de previsualización e edición. Na pestana "preview" ten lugar ese traballo de edición visual, mentres que na pestana "data" introducimos todos os elementos que entran a formar parte do noso traballo e asignámoslles unha función no mesmo.
A primeira pedra no camiño desta práctica é a de enfrontarnos a esta presentación dos elementos "a vista de paxaro" mais, especialmente, solucionar os problemas que pode traernos a proximidade ou o afastamento dos puntos que sinalemos sobre o mapa. En función do xuntos ou separados que estean os nosos puntos de interese teremos que adoptar unhas medidas ou outras (en canto ao seu tamaño, en canto á atribución de cores que determinen diferentes categorías, o emprego de diferentes iconas, etc.)
Este traballo estará integrado por arredor de 20 puntos de interese. Non pasa nada se son 18 e tampouco se optades por 23. Para todos eles teremos que elaborar unha "tarxeta" de información na pestana de datos. Esta servirá para coñecer un pouco máis que é o que hai detrás dese punto. Nunha primeira fase só imos introducir esa información. Despois veremos como programar unha ventá emerxente (pop-up) que nos traslade exactamente a información que desexamos para cada lugar.
Unha vez máis o tema é libre. Iso si, debe tratarse dun tema que teña unha explicación xeográfica e que sexa rico en elementos como imaxes ou explicacións que poidan ser realizadas a través de textos. Todo para chegar a realizar proxectos cunha riqueza alta visual, espacial e informativa. Así, por exemplo, temáticas relacionadas co turismo, o comercio, a cultura ou mesmo o deporte poden ser moi válidas para este tipo de presentación, aínda que é a vosa imaxinación a que nos vai dictar cal é o mellor tema. Podedes presentar o máis concreto (elementos dunha rúa) ou o máis xeral (en puntos diferentes do planeta).
Ferramentas útiles ou interesantes para este traballo:
iloveIMG (para a reconfigurar o tamaño das imaxes)
Ferramenta de recorte en círculo de IOimageonline
Ferramentas para localizar as coordenadas (aínda que neste caso será máis efectivo facelo con Google Maps)
Font Awesome (para as iconas)
Adobe Color (para a cor)
Para subir o traballo ao blog:
De xeito semellante ao que acontecía en Datawrapper, teremos que ir á parte superior dereita, premer en "Export & publish", fixarnos que está en verde, e copiar o código iframe que se nos presenta na nosa entrada do blog. Lembrade tamén incorporar ese pequeno comentario coas dificultades ou particularidades do proceso seguido.
Algo de código que pode ser de axuda na edición dos popups e paneis:
En primeiro lugar, aquí vos queda a ligazón á páxina de axuda de Flourish. É moi boa e adoita ter a explicación para todo o que se pode facer nesta ferramenta. Só por se vos apetece seguir afondando nela.
De xeito semellante ao que nos acontecía en Datawrapper, en Flourish sinalamos o espazo (a columna) á que facemos referencia na programación deste xeito: {{Nome da columna na folla de datos}}. Así, por exemplo, se queremos modificar o nome do punto e na folla de datos lle chamamos a esa columna "Nome", todas as veces que queiramos que o popup (ou o panel) tome información desa columna debemos referirnos a ela como {{Nome}}.
A continuación, algunhas liñas de código que poden ser de axuda para programar cousas nos popups dos nosos mapas:
1. Para insertar unha imaxe que temos cargada na folla de datos:
Opción 1:
<div class="img" style="background-image: url({{Nome da columna}})"></div>
<style>
.img {
background-size: cover;
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
</style>
Opción 2 (máis sinxela):
<center><img src="{{Image}}" style="width:150px;height:150px"></center>
Isto que vedes aquí sería o código para unha imaxe está na columna "Image" da folla de datos , que se presenta centrada (<center> </center>) e cun tamaño de 150x150px
2. Os xa coñecidos:
<b> Texto </b>: negrita
<u> Texto </u>: subliñado
<i> Texto </i>: cursiva
<s> Texto </s>: tachado
<br> Salto de liña ou "enter". Cada <br> é un salto de liña
<font color="0000ED"> Texto que queremos que vaia en cor </font>
3. Link ao exterior:
<a href="{{Nome da columna}}" target="_blank">Texto que queremos que apareza</a>
4. Centrado dos elementos
<center> código ou texto do elemento </center>
A modo de exemplo:
A continuación, presénvovos dúas imaxes de como é o proceso de edición dos popups (similar para os paneis emerxentes), para que teñades o código que é preciso elaborar ao lado do resultado que nos ofrece a elaboración dese código:
<br> <div class="img" style="background-image: url({{Image}})"></div>
<style>
.img {
background-size: cover;
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
</style>
<br>
<b>Tipo de edificio: </b> {{Categoría}}
<br><br>
{{Información relevante}}
<br><br>
<b><a href="{{URL}}" target="_blank">+info</a></font> </b>
