Tema 6 Trabajo práctico: Elecciones al Parlamento de Andalucía introducción a la edición y visualización de datos inmediatos Proyecto OpenCourseWare-UNIA (ocw.unia.es)

Autora

Encarni Hinojosa

ÍNDICE

Introducción

Objetivos

Contenidos

Datos electorales: acceso, instrucciones, archivo ASCII de prueba.

Boceto gráfico estático-papel: qué datos, qué formato de datos, qué tabla para que funcionen las gráficas automáticas.

Boceto gráfico interactivo-web: qué datos, qué formato de datos, qué tabla para que funcionen las gráficas automáticas, capas-svgs para importar a Edge Animate, qué interactividades.

Programa: OpenOffice Calc

Abrir el archivo de prueba ASCII con la opción de vinculación.

Seleccionar los datos que nos interesan de la hoja 'bruto'.

Elaborar nuestra hoja de trabajo llamada 'mitabla', vinculada con 'bruto'.

Prueba de vinculaciones.

Programa: Adobe Illustrator

Diseño del gráfico estático-papel a partir de los datos de la hoja 'mitabla'.

Prueba de actualización de las gráficas automáticas usadas.

Exportación a eps.

Diseño del gráfico interactivo-web a partir de los datos de la hoja 'mitabla' y separando cada elemento principal en diferentes capas.

Exportación de cada capa a svgs.

Programa: Adobe Edge Animate

Creación del proyecto con las propiedades determinadas.

Importación y organización de los elementos-svgs

Interactividades: línea de tiempo, botones, acciones.

Prueba de uso del gráfico interactivo.

Ideas clave

Referencias

Tareas

INTRODUCCIÓN

La transmisión de información inmediata es indispensable hoy en día para cualquier agente comunicador. Las redes sociales han reducido a segundos el tiempo de reacción a un hecho informativo. Otro debate sería analizar si toda la información inmediata está tratada con profundidad, es resultado del análisis o, incluso, si es verídica. Todo se complica si el tipo de información inmediata no es sólo textual, sino que requiere una infografía. La elaboración de un gráfico siempre va a requerir más tiempo de ejecución que un texto conciso pero, para ciertas informaciones, es el mejor tipo de mensaje que se puede usar. Como pasa en unas elecciones. No es lo mismo transmitir PSOE: 47, PP: 33, Podemos: 15, Ciudadanos: 9 e IU: 5, que compartir un gráfico de hemiciclo con estos datos.

Para poder elaborar infografías con hechos o datos inmediatos hay que buscar atajos que permitan que el tiempo de ejecución se reduzca lo máximo posible. Estos atajos siempre están ligados al conocimiento informático y, en concreto, al conocimiento de las opciones de algunos programas que nos permiten tomar estos atajos.

Cuando se celebran unas elecciones, el gobierno de cada territorio se encarga de la organización de las mismas, desde la convocatoria hasta la recopilación y difusión de los datos el día seleccionado para los comicios. Normalmente, la infraestructura informática para la recopilación del gran 'data set' que supone un proceso electoral la proveen empresas dedicadas a este fin, la más popular, Indra. Estas compañías ofrecen un servicio completo a la hora de transmitir los datos electorales, desde portales web con tablas básicas donde se van actualizando los votos según el escrutinio, hasta la distribución de archivos de datos especialmente diseñados para ser compatibles con automatismos informáticos. Estos archivos, generalmente, son de tipo ASCII (American Standard Code for Information Interchange). Como hemos visto en este taller, este tipo de archivos pueden abrirse con programas informáticos de hojas de cálculo, como OpenOffice Calc.

OBJETIVOS

Los objetivos de este tema se centrarán en los conocimientos que debe adquirir el alumno para poder realizar la parte inicial del trabajo práctico de este taller. Esta primera etapa del trabajo práctico es a la que más tiempo debe dedicar el alumno, ya que deberá adelantar lo máximo posible la ejecución de cara a la segunda parte: la actualización de los datos electorales definitivos en una situación real de difusión inmediata de datos (2 horas). El alumno deberá elaborar 'en nevera' (como si fueran gráficos definitivos, pero con datos que no son definitivos):

Un gráfico electoral estático-papel de las elecciones al Parlamento de Andalucía 2015

Un gráfico electoral interactivo-web de las elecciones al Parlamento de Andalucía 2015

Los programas informáticos que se usarán para este cometido serán:

OpenOffice Calc

Adobe Illustrator

Adobe Edge Animate

Para la realización de los dos gráficos 'en nevera' (el estático-papel y el interactivo-web) por parte de los alumnos, se indicará el paso a paso para elaborar cada uno en este tema. El alumno deberá realizarlos, al menos, de igual forma a como se describe en este tema para superar satisfactoriamente el taller. Si el alumno quiere dar un paso más allá y completar cada gráfico con otras visualizaciones gráficas tiene la libertad de hacerlo y se valorará positivamente, pero tiene que ser consciente del poco tiempo que tendrá en la 'Noche electoral' para actualizar los gráficos realizados 'en nevera'. Para recordar los programas informáticos que se usarán para realizar el trabajo práctico, el alumno puede volver a visualizar el Tema 2 y el Tema 5 (o sus videotemas).

CONTENIDOS 6.1

Datos electorales

Acceso a los datos

Para tener acceso a los datos electorales el día de los comicios, así como a los archivos de prueba para poder preparar los automatismos y los gráficos 'en nevera', el usuario debe contactar, normalmente por correo electrónico, con el organismo que organiza las elecciones. Este organismo, le remitirá al usuario una dirección url, un usuario y una contraseña para poder descargar los archivos de prueba. También le enviará una url, un usuario y una contraseña para acceder al repositorio de datos el día de las elecciones. Como vamos a simular este proceso, el archivo ASCII de prueba que usa el alumno para preparar la primera parte del trabajo práctico está disponible dentro del Tema 6 del campus.

1. Descargar del Tema 6 del campus el archivo ASCII llamado andaluzas_prueba

Instrucciones de los datos electorales

Las empresas que ofrecen el servicio de transmisión de datos electorales, además de ofrecer archivos de prueba para poder trabajar con antelación, también distribuyen un archivo de texto con las instrucciones para poder traducir la tabla que contiene el archivo ASCII de prueba, que tendrá exactamente la misma estructura de columnas y filas que el archivo definitivo con los datos electorales. Gracias a estas instrucciones, podemos saber qué dato irá en cada celda y así estar seguros de seleccionar los datos correctos que necesitamos para realizar nuestros gráficos, ya que el 'data set' electoral contiene un gran volumen de datos.

2. Descargar del Tema 6 del campus el archivo de texto llamado andaluzas_instrucciones

Directorio, renombrar archivo ASCII

A la hora de elaborar una hoja de cálculo basada en los datos del archivo ASCII que bajaremos del repositorio de datos, es muy importante que esta hoja de cálculo esté vinculada siempre al mismo archivo. Pero, como deberemos actualizar el archivo al que se vincula (en la 'Noche electoral' con los datos reales y, cada cierto tiempo, según se vaya actualizando el escrutinio), lo que haremos es reemplazar el archivo al que vincularemos la primera vez en la hoja de cálculo. Por eso, es muy importante que la ruta del vínculo al archivo sea siempre la misma y esto incluye también el nombre del archivo.

3. Creamos una carpeta en el escritorio de nuestro ordenador que se llame andaluzas

4. Dentro de esta carpeta, creamos otra carpeta que se llame data

5. Dentro de la carpeta data, pegamos el archivo ASCII andaluzas_prueba que nos hemos bajado del Tema 6 del campus

6. Cambiamos el nombre del archivo a dataset

Boceto gráfico estático-papel

Dibujamos, suficiente con lápiz y papel, un boceto del gráfico que vamos a realizar. De esta manera, podemos decidir la estructura del mismo y los datos de una manera fácil. Este sería nuestro boceto:

Según este boceto...

Qué datos necesitamos

Total de escaños del Parlamento de Andalucía

Escaños conseguidos por cada partido (2015)

Escaños conseguidos por cada partido (2012)

Participación: abstención, voto en blanco y voto nulo (2015)

Participación: abstención, voto en blanco y voto nulo (2012)

De los partidos con representación parlamentaria en 2015:
número y porcentaje de votos (2015)

De los partidos con representación parlamentaria en 2015:
número y porcentaje de votos (2012)

Escrutinio

Qué formato de datos:

Escaños: cifras absolutas de, al menos, dos dígitos

Participación: cifras en porcentaje

Número de votos: datos absolutos

Porcentaje de votos: datos en porcentaje

Escrutinio: datos en porcentaje

Qué tabla necesitamos para que funcionen las gráficas automáticas:

Hemiciclos:

Recordad que, para hacer un gráfico de hemiciclo, el primer dato debe	ser el total de escaños. Después, iría el número de escaños del partido	que consiga más representantes y, así, sucesivamente.

Participación (tabla):

Número de votos y porcentaje de votos en 2015 (tabla):

Gráfico de barras porcentaje de votos en 2015:

Número de votos y porcentaje de votos en 2012 (tabla):

Boceto gráfico interactivo-web

Dibujamos, suficiente con lápiz y papel, un boceto del gráfico que vamos a realizar, con las diferentes pantallas que necesitaremos para mostrar todos los datos. De esta manera, podemos decidir la estructura del mismo y los datos de una manera fácil. Este sería nuestro boceto:

PANTALLA 1:

PANTALLA 2, 3, 4, 5, 6, 7, 8 y 9 (una por cada provincia andaluza):

Según este boceto...

Qué datos necesitamos

Total de escaños del Parlamento de Andalucía

Escaños conseguidos por cada partido (2015)

Escaños conseguidos por cada partido (2012)

Participación: abstención, voto en blanco y voto nulo (2015)

Participación: abstención, voto en blanco y voto nulo (2012)

De los partidos con representación parlamentaria en 2015:
número y porcentaje de votos (2015)

De los partidos con representación parlamentaria en 2015:
número y porcentaje de votos (2012)

Escrutinio

Qué formato de datos:

Escaños: cifras absolutas de, al menos, dos dígitos

Participación: cifras en porcentaje

Número de votos: datos absolutos

Porcentaje de votos: datos en porcentaje

Escrutinio: datos en porcentaje

Qué tabla necesitamos para que funcionen las gráficas automáticas:

Hemiciclos:

Recordad que, para hacer un gráfico de hemiciclo, el primer dato debe	ser el total de escaños. Después, iría el número de escaños del partido	que consiga más representantes y, así, sucesivamente.

Participación (tabla):

Número de votos y porcentaje de votos en 2015 (tabla):

Gráfico de barras porcentaje de votos en 2015:

Número de votos y porcentaje de votos en 2012 (tabla):

Cuántas capas-svgs necesitamos en Illustrator para,
después, importar en Edge Animate:

base: lo representado en la pantalla 1

almeria: partidos y escaños en Almería

cadiz: partidos y escaños en Cádiz

cordoba: partidos y escaños en Córdoba

granada: partidos y escaños en Granada

huelva: partidos y escaños en Huelva

jaen: partidos y escaños en Jaén

malaga: partidos y escaños en Málaga

sevilla: partidos y escaños en Sevilla

Qué interactividades tendrá el gráfico web:

Mouseclick: al pulsar en cualquiera de las provincias andaluzas en la parte superior derecha del gráfico, se visualizarán los partidos y escaños en 2015 y en esa provincia.

OpenOffice Calc:

Abrir el archivo ASCII:

1. Creamos un archivo nuevo de hoja de cálculo.

2. La guardamos en nuestra carpeta andaluzas con el nombre que queramos.

3. Por ejemplo, tablas.

4. En el menú superior, pulsamos en Insertar > Hoja desde archivo...

5. Seleccionamos el archivo ASCII que nos hemos descargado del repositorio de datos y que hemos renombrado como dataset.

6. Escogemos el juego de caracteres que mejor le venga al contenido y observamos qué separadores de campo se utilizan.

7. Seleccionamos el separador de campo correcto.

8. Es muy importante pulsar en Vincular antes de Aceptar.

9. Pulsamos dos veces en el nombre de la hoja que se nos ha creado con la vinculación al archivo ASCII.

10. Y le cambiamos el nombre a bruto.

11. Hacemos lo mismo con la siguiente hoja,
pulsamos dos veces en el nombre.

12. Y cambiamos el nombre a mitabla.

13. Pulsamos con el botón derecho a la siguiente hoja y le damos a Eliminar.

14. Y hacemos lo mismo con la siguiente, hasta que sólo nos queden la hoja bruto y la hoja mitabla.

15. Si guardamos el archivo de hoja de cálculo, lo cerramos y lo volvemos a abrir, nos saldrá un aviso de que el archivo está vinculado a otros (en este caso al archivo ASCII) y nos pregunta si queremos actualizar. Siempre hay que darle que Sí.

16. Esta actualización también la podemos realizar sin tener que cerrar y abrir el archivo. Podemos pulsar en Archivo > Recargar y nos saldrá el mismo aviso, al que le volveremos a decir que Sí.

Seleccionar los datos de la hoja 'bruto':

1. Abrimos el archivo de instrucciones del repositorio donde se nos describen qué datos tenemos en la hoja 'bruto'.

2. Le añadimos a cada descriptor de dato la columna
que le corresponde en la hoja bruto.

3. Así, ya sabemos que, para los datos generales, necesitamos los que estén en la fila 9, que se refiere a Andalucía. Para el dato de porcentaje del censo escrutado, nos interesaría entonces la celda I9 (columna I fila 9), para el porcentaje de abstención la celda M9, para porcentaje de voto blanco O9, porcentaje de voto nulo Q9 y, para el número total de escaños, R9.

4. El nombre del primer partido en el orden de mayor a menor escaños estaría en la celda T9, el número de votos de éste en la celda U9, porcentaje de votos V9 y escaños de ese partido W9. El nombre del siguiente partido, estaría en la Y9, número de votos Z9, porcentaje de votos AA9 y escaños AB9. Y así, sucesivamente, con el resto de partidos.

Elaboración de la hoja mitabla vinculada a la hoja bruto:

1. Escribimos que los datos se refieren a Andalucía y, después, los primeros epígrafes de la tabla. En este caso, indicaremos que son los datos para hacer los dos hemiciclos, el de 2015 y el de 2012.

2. Ponemos primero el total de escaños (imprescindible para poder hacer bien un gráfico de hemiciclo).

3. Después, colocamos en la siguiente columna pero en una fila más arriba el nombre del partido con más escaños. Para ello, llamaremos a la hoja bruto, que es donde está este dato. En este caso concreto tendremos que llamar a la celda T9 de la hoja bruto, así que seleccionamos la celda vacía de la hoja mitabla y, en la barra de fórmulas, escribimos =bruto.T9 y le damos a 'check'.

4. Hacemos lo mismo con el número de escaños de este primer partido pero, esta vez, llamamos a la celda W9 de la hoja bruto.

5. Repetimos la operación con el resto de partidos.

6. Siempre llamando a las celdas correspondientes de la hoja bruto.
Para saber cuántos partidos incluir, podemos guiarnos por los sondeos anteriores a las elecciones para saber cuántos partidos se prevé que consigan representación parlamentaria.
En el caso de las elecciones andaluzas de 2015, se prevé que sean 5,
pero incluimos uno más por si acaso.

7. Incluimos los mismos datos de 2012 simplemente escribiéndolos en esta tabla. Hay que poner también como primer dato el total de escaños. Para conseguir los datos de 2012 podemos consultarlo en el portal de elecciones de la Junta de Andalucía: www.juntadeandalucia.es/justiciaeinterior

8. Escribimos los epígrafes para los datos de participación (2015).

9. En este caso, al tratarse de datos en porcentaje, vamos a llamar a las celdas donde están los datos en la hoja bruto pero dividiéndolos entre 10000, ya que en la hoja bruto los datos de porcentaje se representan con 4 dígitos, pero sin coma entre enteros y decimales. Para la abstención, la fórmula será entonces =bruto.M9/10000 .

10. Para el voto en blanco: =bruto.O9/10000

11. Y para el voto nulo =bruto.Q9/10000

12. Seleccionamos estas 3 celdas (pulsamos en la primera celda y, con la MAYÚSCULA pulsada, la última) y le damos a Formatear celdas.

13. Seleccionamos Porcentaje en Categoría y le damos a Aceptar.

14. Y ya tendremos los datos vinculados pero con el formato correcto.

15. Escribiremos los datos de 2012 (podemos ver estos datos en el mismo portal de información electoral de la Junta de Andalucía).

16. Creamos los epígrafes del siguiente elemento del gráfico: la tabla de número y porcentaje de votos de cada partido.

17. Seleccionamos los datos de las celdas de la hoja bruto que nos interesan como el nombre del partido1.

18. Número de votos de cada partido.

19. Y porcentaje de votos de cada partido que, al ser un porcentaje, también le incluiremos la división entre 10000.

20. En la línea inferior, pondremos los mismos datos del siguiente partido.

21. Seleccionamos todos los datos del número de votos y pulsamos con el botón derecho para después ir a Formatear celdas.

22. Seleccionamos Separador de miles.

23. Hacemos lo mismo con los datos de porcentaje de votos.

24. Pero para aplicar el formato de Porcentaje.

25. Introducimos los datos de 2012 (número de votos y porcentaje de votos). Si de algún partido no había datos (Podemos y Ciudadanos) escribimos un guión.

26. Escribimos el epígrafe para los datos necesarios para hacer el gráfico de barras del porcentaje de votos.

27. Seleccionamos todos los datos del porcentaje de votos de los partidos en 2015 y le damos a Copiar.

28. Seleccionamos la celda vacía siguiente a Barras % votos y pulsamos con el botón derecho > Pegado especial (o CONTROL + MAYÚSCULA + V).
Le damos a Aceptar con las opciones que se muestran.

29. Lo dejamos así, sin aplicarle el formato de Porcentaje, porque para realizar las gráficas automáticas en Illustrator los números no deben tener ningún símbolo que no sean estrictamente numéricos.

30. Finalmente, escribimos el epígrafe del escrutinio y llamamos a la celda de la hoja bruto que tiene este dato y preparado para, después, darle el formato de porcentaje: =bruto.I9/10000

Prueba de vinculaciones:

1. Podemos probar, primero, si funcionan las vinculaciones entre hojas en nuestro archivo de hoja de cálculo. Para ello, iremos a la hoja bruto.

2. Podemos hacer la prueba, por ejemplo, con el dato del escrutinio,
que se coloca en la celda I9. Según los datos originales es 9991 (99,91%). Seleccionamos la celda.

3. Y modificamos el dato a 9992, por ejemplo. Pulsamos en 'check'.

4. Si nos vamos a la hoja mitabla deberemos ver cómo el dato del escrutinio se ha modificado automáticamente.

5. Podemos comprobar también si la vinculación al archivo externo (ASCII) es correcta. Podemos abrir el archivo ASCII pulsando en él con el botón derecho y seleccionando Abrir con... Entonces, seleccionaremos el Bloc de notas (Windows) o el TextEdit (MacOS).

6. Nos desplazaremos al final del texto hasta localizar Andalucía.

7. Modificamos el dato del escrutinio. Para ello, localizaremos el dato de 9991 y lo cambiaremos a 9992. Le damos a guardar.

8. Al abrir el archivo de hoja de cálculo nos dirá si queremos actualizar los datos vinculados. Le decimos que sí. En el caso de que nos hayamos dejado el archivo de hoja de cálculo abierto, podemos actualizar los datos vinculados pulsando en Archivo > Recargar.

9. Al actualizar, veremos cómo automáticamente el dato del escrutinio ya no es 9991 sino 9992.

10. Si vamos a la hoja mitabla, veremos que también se ha actualizado sólo el dato, pero respetando la edición y el formato que le aplicamos a la tabla previamente.

Adobe Illustrator

Diseño del gráfico estático-papel:

1. Creamos un archivo nuevo en Illustrator con el perfil papel y con el tamaño que hemos calculado en el boceto: 200 mm x 200 mm. Incorporamos el título del gráfico y el número de escaños totales del Parlamento de Andalucía. Podemos escoger la fuente tipográfica que queramos.

2. Creamos un gráfico de tarta para hacer el hemiciclo principal.

3. Dibujamos el área del gráfico con un tamaño similar al que tiene el hemiciclo en el boceto.

4. Nos vamos a la hoja de cálculo y a la hoja mitabla y copiamos los datos del hemiciclo 2015.

5. Y pegamos los datos en la tabla de la gráfica de tarta. Le damos a 'check'.

6. Completaremos el gráfico de hemiciclo tal y como se explicó en la primera parte del Tema 5, rotando la gráfica de tarta para que el segmento que ocupa la mitad de la misma quede en la parte inferior, poniéndole a este segmento relleno y trazo sin color, dibujando encima un círculo blanco y coloreando rellenos y trazos del resto de segmentos a nuestro gusto.

7. Volveremos a hacer la misma operación pero con otro gráfico de hemiciclo más pequeño que corresponderá a los datos de 2012. Seleccionaremos todo este gráfico y le pondremos una opacidad del 50%.

8. Dibujaremos una línea vertical en el centro de ambos hemiciclos para indicar dónde se encontraría el límite de la mayoría absoluta (la mitad del total de escaños + 1 o + 0,5, como es en este caso).

9. Añadimos los textos en el hemiciclo de 2012 para poner el nombre de cada partido y los escaños (es recomendable no usar un tamaño de tipografía inferior a 12 puntos).

10. Incorporamos los textos de los partidos y escaños de los dos partidos principales en el hemiciclo de 2015. También añadimos un texto para indicar la diferencia de escaños entre 2012 y 2015.

11. Añadimos unas líneas y cajas para indicar que el resto de partidos se indicarán fuera de la gráfica de hemiciclo.

12. Ponemos los textos de esos partidos. Hay que intentar adivinar cuántos partidos conseguirán representación, ayudándonos de los sondeos. En nuestro caso, como trabajamos con la ventaja de saber qué pasó, calcularemos espacio para 3 partidos más, además de los 2 principales.

13. Añadimos un destacado para los datos de participación (2015 y 2012).

14. Enlazamos los textos de los datos en porcentaje en 2015 de la abstención, voto blanco y voto nulo.

15. Dibujamos las cajas y textos para la tabla de votos y porcentaje de votos (2015 y 2012).

16. Creamos una caja de texto donde se separarán mediante tabuladores el nombre del partido, sus votos, su porcentaje de votos, sus votos en 2012 y su porcentaje de votos en 2012. Así, con cada uno de los 5 partidos que estarán separados en líneas diferentes del texto.

17. Para determinar los tabuladores, nos vamos al menú superior y pulsamos en Ventana > Texto > Tabuladores.

18. Con los manejadores de tabuladores organizamos cómo se verán los datos en esta tabla de texto.

19. Y podemos añadir unas líneas de separación entre los partidos si queremos.

20. Creamos una Gráfica de barras automática.

21. Calculamos, más o menos, el área donde debe dibujarse la gráfica.

22. Copiamos los datos de las Barras % votos que, recordad, no deben tener el símbolo %, porque si lo tuvieran, el automatismo de la gráfica automática de barras no funcionaría.

23. Copiamos los datos y le damos a 'check'.

24. Para colocar el gráfico de barras en su lugar y alineado con el resto de la tabla de texto, tendremos que transformar la gráfica mediante el menú superior en la opción Objeto > Transformar > Escala.

25. Y probamos qué valores nos funcionan mejor...

26. Hasta ajustar la gráfica a la tabla. Seleccionamos la herramienta de Selección independiente (flecha blanca).

27. Seleccionamos con la flecha blanca los textos del eje horizontal de la gráfica para ponerle como color de relleno ninguno.

28. Seleccionamos la línea del eje vertical con la flecha blanca y en el color de trazo seleccionamos ninguno.

29. Y hacemos lo mismo con todas las líneas que componen
el eje horizontal.

30. Seleccionamos, de nuevo con la flecha blanca, las barras y le cambiamos el color al que queramos.

31. Y podemos seleccionar la primera barra para ponerle un color diferente para resaltar el partido con mayor porcentaje de votos.

32. Añadimos unos triángulos en cada línea de partido para indicar si ha subido o bajado en porcentaje de votos con respecto a 2012. Para el caso de partidos nuevos (como Podemos y Ciudadanos) no pondríamos flecha, ya que no se presentaron en 2012.

33. Por último, incorporamos el porcentaje de censo escrutado, la fuente de la infografía y la firma de la misma.

Prueba de actualización:

1. Vamos a probar cambiando el número de escaños de PSOE y PP.

2. Nos vamos a la hoja bruto y a la columna con el número de escaños del primer partido, que según el ejemplo es el PSOE.

3. Le quitamos 2 escaños, de 47 a 45.

4. Y nos vamos a la columna con los datos de los escaños del segundo partido, el PP.

5. Los 2 escaños que le hemos quitado al PSOE se lo daremos al PP, de 33 pasarán a tener 35.

6. Nos vamos la hoja mitabla para comprobar que los datos se han modificado.

7. Copiamos los datos para hacer el hemiciclo.

8. En Illustrator, pulsamos con el botón derecho en el hemiciclo principal y seleccionamos Datos.

9. Borramos todos los datos de la tabla. Tenemos que seleccionar celda por celda y pulsar en el teclado 'delete'.

10. Pegamos los datos nuevos.

11. Y le damos a 'check'.

12. Y ya vemos cómo el gráfico de hemiciclo se modifica solo.

13. Volvemos a la hoja de cálculo, mitabla, para copiar los datos de la Tabla votos.

14. Vamos a Illustrator y seleccionamos todo el texto de la tabla votos.

15. Le damos a Pegar. Como podemos ver, no se ajusta bien a los tabuladores que habíamos dispuesto. Esto tiene un motivo.

16. En el archivo ASCII, los nombres de los partidos tienen una extensión de 50 caracteres. Si el nombre del partido no llena esos 50 caracteres (lo que suele ser normal) el archivo ASCII está diseñado para que se complete hasta esos 50 caracteres con espacios. Si seleccionáis el texto pegado en Illustrator, veréis como, detrás del nombre del partido, en vez de haber una tabulación, que es lo que debería ser, hay varios espacios.

17. Pinchamos con la herramienta texto dentro de la primera letra del texto y, en el menú superior, seleccionamos Edición > Buscar y reeemplazar.

18. En Buscar tecleamos 2 espacios seguidos y en Reemplazar con: lo dejamos tal cual, sin nada. Pulsamos en Buscar.

19. Después, en Buscar siguiente y, a continuación, Reemplazar todo.

20. Le damos a OK y, después, a Hecho.

21. Y ya se nos ajusta el texto perfectamente.

22. Ya sólo quedaría editar algunos nombres de los partidos.

Exportación a .eps:

1. Una vez que tengamos nuestra infografía lista y actualizada, seleccionaremos todos los elementos.

2. Y los agruparemos (Objeto > Agrupar).

3. Iremos a Archivo > Guardar como.

4. Seleccionaremos la ubicación y, en Formato, pulsamos en Illustrator EPS.

5. Dejamos las opciones del .eps tal y como se muestran aquí.

Diseño del gráfico interactivo-web:

1. Creamos un archivo nuevo en Illustrator con el perfil web y con el tamaño del boceto: 900 píxeles de ancho x 600 píxeles de alto.

2. Y lo guardamos en nuestra carpeta andaluzas indicando que es la versión web del gráfico.

3. Seleccionamos el gráfico que hemos hecho para papel y lo copiamos.

4. Lo pegamos en el gráfico para web.

5. Para aprovechar algo más el espacio, podemos aplicarle a todo el conjunto un Transformar > Escala.

6. Por ejemplo, aplicarle una escala uniforme de 110%.

7. Así quedaría.

8. Lo colocaríamos bien dentro del lienzo.

9. Movemos el indicador del escrutinio a la esquina superior derecha del lienzo.

10. Y también colocamos la fuente y la firma. Así que, cuando en la 'Noche electoral' actualicemos el gráfico de web o papel, podremos seleccionar, agrupar y copiar la masa gráfica común (todo, menos el indicador del escrutinio, la fuente y la firma) y pegarla en el otro gráfico (el de papel o el de web) para así no tener que hacer el mismo proceso de actualización dos veces.

11. Dibujamos una caja en la esquina superior izquierda del lienzo.

12. Y le ponemos tanto el relleno como el trazo de color ninguno.

13. En la ventana Capas cambiamos el nombre de la Capa 1.

14. Y la llamamos base.

15. Seleccionamos todo lo que hay pintado y agrupamos.

16. Creamos otras 8 capas y, a cada una, le ponemos el nombre de una provincia andaluza sin mayúsculas, tildes ni eñes.

17. Dibujamos una caja en la esquina superior derecha del lienzo en cada capa de provincia, la caja tendrá el relleno y trazo de color ninguno.

18. En la capa base, dibujamos una tabla con las provincias andaluzas
y un texto que explica que hay que pulsar en cada provincia para ver la información.

19. Copiamos la misma tabla que hemos creado en base en la capa de almeria.

20. Dibujamos una caja de color blanco de relleno que rodee esta tabla.

21. Y la enviamos detrás de la capa almeria. Así, cuando se visualice la capa almeria, tapará esa parte del lienzo de la capa base.

22. Modificamos la tabla de provincias en la capa almeria,
separando el resto de provincias de la barra de Almería.
Seleccionamos solo la caja de la barra de Almería...

23. Y le damos una altura determinada, en este caso 188 píxeles de altura. Este tamaño de altura hay que recordarlo, ya que tendremos que darle esta misma altura al resto de barras de provincias en su correspondiente capa.

24. Dibujamos un texto sencillo con tabuladores para poner el nombre del partido y los escaños obtenidos. Calculamos el máximo de partidos que pueden tener representación en una provincia (en este caso, 5).

25. Agrupamos todos los elementos de la capa almeria: la tabla de provincias modificada, el rectángulo blanco que hay por debajo y que tapa la tabla de provincias de la capa base y el cuadro invisible situado en la esquina superior derecha del lienzo.

26. Hacemos lo mismo con todas las provincias.

27. Para tener por un lado la capa base (con todo el gráfico y con la primera visualización de la barra de provincias) y por otro lado una capa por cada provincia donde se indicarán los escaños de esa provincia.

Exportación de cada capa a svgs:

1. Primero, creamos una carpeta nueva dentro de nuestra carpeta andaluzas que se llame svgs.

2. A continuación, abriremos el archivo Illustrator de andaluzas_web,
pero lo guardaremos como y lo nombraremos como copia, para trabajar así en una copia de este archivo.

3. Visualizaremos sólo la capa base, donde todos los elementos de la capa deberán estar agrupados. En el menú superior, pulsamos en Texto > Crear contornos.

4. Seleccionamos el resto de capas que están invisibles y las eliminamos.

5. Una vez que nos quedemos sólo con la capa que nos interesa, seleccionamos Guardar como.

6. Le ponemos el mismo nombre de la capa, en este caso base, y en Formato seleccionamos SVG (.svg).

7. En las opciones de SVG debemos poner éstas:

8. Cerramos el archivo, ya que ahora estamos en base.svg.

9. Hacemos lo mismo, ahora, con la capa almeria. Los elementos de esta capa deberán estar agrupados.

10. Creamos contornos.

11. Eliminamos el resto de capas.

12. Y guardamos como.

13. Ponemos el nombre de la capa y seleccionamos como Formato svg.

14. Repetiríamos la operación con el resto de capas hasta que en la carpeta svgs tengamos tantos archivos .svg como capas en el archivo de Illustrator andaluzas_web. En este caso, tendríamos que tener 9 archivos .svg.
Uno base y 8 por cada provincia andaluza.

Adobe Edge Animate

Creación del proyecto:

1. En Edge Animate, seleccionamos Crear nuevo.

2. En las propiedades del proyecto/Stage escribimos en Título Elecciones al Parlamento de Andalucía 2015, ponemos el ancho y alto que determinamos en el boceto del gráfico web (900 píxeles de ancho x 600 píxeles de alto), quitamos la opción de Reproducción automática y, en Esc. Central, seleccionamos horizontal. Le damos a Guardar.

3. Dentro de nuestra carpeta andaluzas, creamos una nueva carpeta que se llame, por ejemplo, andaluzas_web y, dentro de esta, guardamos nuestro proyecto AEA como, por ejemplo, andaluzas.

Importación y organización de los elementos-svgs:

1. En nuestro proyecto AEA, pulsamos en la ventana Biblioteca.

2. Pulsamos en el + de Imágenes.

3. Exploramos en nuestra carpeta andaluzas hasta llegar a la carpeta svgs y seleccionamos todos los archivos .svg.

4. Nos saldrán en la Biblioteca. Los seleccionamos todos (pulsamos en el primero y, con la MAYÚSCULA pulsada, en el último) y los arrastramos al Stage.

5. Pulsamos en la ventana Elementos.

6. Ordenamos las capas-svgs. Por ejemplo, el svg base debe estar abajo del todo, para que los svgs de cada provincia se vean por encima de la base.
Si base no es el elemento que está más abajo, hay que pulsarlo y, sin soltar, arrastrarlo hasta abajo.

7. Seleccionamos base y, en las propiedades, indicamos que la x sea 0 y la y sea 0. Esto hace que el elemento se coloque justo en la esquina superior izquierda del Stage.

8. Seleccionamos el resto de elementos, los de las provincias, pinchando en uno de los elementos y, con la MAYÚSCULA pulsada, en el último. En las propiedades de los elementos seleccionados modificamos también la x a 0 y la y a 0.

9. Aprovechando que tenemos la selección de todos los elementos de las provincias vamos a seleccionar, también en propiedades, que la visualización esté Desactivada.

Interactividades: línea de tiempo, botones, acciones:

1. En la ventana de Línea de tiempo pulsamos en el botón de Etiqueta.

2. A esta primera etiqueta le ponemos el nombre inicio.

3. Movemos la línea de desplazamiento de la Línea de tiempo y vamos pulsando en el botón de Crear etiqueta para así crear una etiqueta de Línea de tiempo para cada provincia andaluza, además de la primera etiqueta inicio.

4. Movemos la barra de desplazamiento de la Línea de tiempo hasta la etiqueta almeria. Seleccionamos el elemento .svg almeria y, en las propiedades, seleccionamos que la visualización esté activada.

5. Movemos la barra de desplazamiento de la Línea de tiempo hasta la etiqueta cadiz y, teniendo seleccionado el elemento almeria, volvemos a ponerle la visualización Desactivada.

6. Estando ubicados en la etiqueta cadiz en la Línea de tiempo, pulsamos en el elemento cadiz y le ponemos la visualización Activada.

7. Movemos la barra de desplazamiento de la Línea de tiempo hasta la etiqueta cordoba y, con el elemento .svg cadiz seleccionado, pulsamos en la Visualización Desactivada.

8. Repetimos esta operación con el resto de etiquetas de provincias de la Línea de tiempo y con los elementos .svg de las provincias.

9. Dibujamos un rectángulo que ocupe uno de los huecos de la tabla de provincias.

10. Con este nuevo elemento seleccionado, en las propiedades cambiamos la opacidad a 20%.

11. Cambiamos el nombre de este elemento a btn_provincia

12. Y en Cursor, seleccionamos el cursor del 'dedito'.

13. Pulsamos en las acciones de este elemento btn_provincia y seleccionamos como evento mouseover.

14. Escribimos el código para modificar la opacidad de un elemento.
En este caso, le vamos a indicar que cuando el cursor esté encima del elemento, la opacidad de éste cambie de 20% a 50%.

Código: sym.$('btn_provincia').css({'opacity': 0.5});

15. Pulsamos en el + de la ventana de Acciones y seleccionamos el evento mouseout. Aquí copiamos el mismo código pero cambiamos la opacidad a 0.2. Es decir, que cuando el cursor del ratón se vaya fuera de este botón, el botón volverá a tener la opacidad del 20%.

16. Pulsamos en el elemento btn_provincia con el botón derecho y seleccionamos en Convertir en símbolo.

17. Le ponemos como nombre btn_almeria, quitamos la opción de Reproducción automática y pulsamos en Aceptar.

18. Pulsamos en las Acciones de este nuevo elemento btn_almeria y seleccionamos el evento click.

19. Pulsamos en Reproducir > Detener en...

20. Stage y le damos a Intro.

21. En las opciones del stop, escribimos entre comillas el nombre de la etiqueta de la provincia que corresponda, en este caso almeria.

22. Duplicamos este elemento btn_almeria y hacemos 7 copias (hasta completar las 8 provincias andaluzas). Después, renombramos las copias a btn_cadiz, btn_granada, etc.

23. Seleccionamos en las Acciones de estos nuevos elementos y modificamos el código para poner el nombre de la etiqueta de la provincia que corresponda: btn_cadiz tendrá el código sym.stop('cadiz');

24. Una vez modificados los códigos de cada botón de provincia, hay que mover los elementos para ocupar el hueco que le corresponde en la tabla de provincias.

25. Movemos todos los elementos btn_cadiz, btn_granada, etc. para colocarlos en su sitio.

26. Movemos la barra de desplazamiento de la Línea de tiempo hasta la etiqueta almeria y seleccionamos todos los elementos de btn provincia salvo el de almeria.

27. Los movemos a su nueva ubicación. A la hora de cambiarlos de posición, es muy importante comprobar que estamos realizando este cambio en la etiqueta de la Línea de tiempo correcta.

28. Movemos la barra de desplazamiento de la Línea de tiempo hasta la etiqueta de cadiz y seleccionamos el elemento btn_cadiz y lo movemos hasta su nueva ubicación. Esta operación la repetimos con el resto de provincias.

29. Seleccionamos todos los botones de provincia y en las Propiedades seleccionamos que el Cursor sea el 'dedito'.

30. Si abrimos el html que crea AEA de nuestro proyecto podemos comprobar si funciona o no las interactividades que acabamos de editar.
Si pasamos el cursor por cada nombre de Provincia se debe destacar cada provincia.

31. Y si pulsamos en una provincia visualizamos los datos de los escaños de esa provincia. Recordad que lo que vemos es la capa-svg de cada provincia que hicimos en Illustrator y que hemos permitido que se visualice o no en AEA mediante la Línea de tiempo y las etiquetas.

IDEAS CLAVE

— Tenemos que conseguir el acceso a los archivos de prueba y definitivos del repositorio de datos electorales. De este servicio, descargaremos siempre un archivo tipo ASCII que contendrá los datos.

— El archivo ASCII se abre con OpenOffice Calc, mediante la opción de Insertar > Hoja desde archivo.

— Debemos crear una hoja con el bruto del 'data set' y otra hoja con nuestra tabla editada que estará vinculada a los datos de la hoja con el 'data set' en bruto y ésta vinculada al archivo ASCII.

— Mediante esta tabla que hemos creado, podemos realizar gráficas automáticas en Illustrator. Para ello, es muy importante pensar en la distribución de las celdas en la tabla.

— El gráfico estático-papel, una vez terminado, se exporta a .eps.

— Para realizar el gráfico interactivo-web, primero se dibujan los diferentes elementos en Illustrator separados por capas diferentes.

— Estas capas se exportan independientemente como .svg.

— En AEA se importan estos .svgs y se organizan en el proyecto. Después, le podemos dar a estos elementos propiedades de visualización y opacidad.

— Mediante la Línea de tiempo, podemos usar fácilmente interactividades mediante botones.

EDICIÓN DE DATOS (OpenOffice Calc):

Visualizar el tema y el videotema del Tema 2.

VISUALIZACIÓN DE DATOS CON HERRAMIENTAS DE ECICIÓN TOTAL
(Adobe Illustrator y Adobe Edge Animate):

Visualizar el tema y el videotema del Tema 5.

— Visualizar el videotema del trabajo práctico, donde se explica con detalle el proceso para realizar la práctica y otras claves que aquí no se contemplan.

— Descargar los Archivos de recurso del Tema 6 para poder empezar a elaborar el trabajo práctico. El tiempo estimado es de 10 horas para poder realizar esta parte: preparar el gráfico 'en nevera' estático-papel y el gráfico 'en nevera' interactivo-web de las elecciones al Parlamento de Andalucía 2015.

— El día 14 de diciembre se llevó a cabo la segunda parte del trabajo práctico, la 'Noche electoral', en dos horas. La idea era adelantar lo máximo posible la elaboración del gráfico aunque fuera con datos no definitivos. Cuando en la 'Noche electoral' sí estuvieron los datos definitivos, y si se preparaban bien los automatismos, el proceso de actualización de datos no tomaría mucho tiempo.

— Para superar satisfactoriamente este taller era fundamental realizar un gráfico estático-papel y otro interactivo-web, al menos, igual que los que se describen en este ejemplo.

TRABAJOS REALIZADOS POR LOS ALUMNOS

Puntuación máxima de las dos versiones (estática-papel, interactiva-web) del gráfico sobre las elecciones al Parlamento de Andalucía 2015: 18 puntos.

Alumnos que realizaron el trabajo práctico: 11.
Promedio de todos los alumnos que realizaron el trabajo práctico: 13,3.

De cada alumno, se presenta el gráfico estático-papel. Para visualizar el gráfico interactivo-web, hay que pulsar en la imagen del gráfico.

Francisco Javier Sánchez Ramírez

Andrea Benítez Gutiérrez

José Luis García Rey

Fernando Millán Villalobos

María Ángeles Cuenda

José Manuel Fernández

María Sánchez

María Luisa Lorenzo

José Antonio Zarrías

Estrella Gualda

Eva Romance