Tema 2 Google Fusion Tables Democratización del HTML5: diseño web para todos los públicos Proyecto OpenCourseWare-UNIA (ocw.unia.es)

Autora

Encarni Hinojosa

ÍNDICE

Introducción

Objetivos

Contenidos

2.1

Hojas de cálculo de Google (Spreadsheet)

Usar una hoja de cálculo de Google en Fusion Tables

Edición de datos (tipología)

2.2

Gráfico de barras

Gráfico de columnas

Gráfico de fiebre

Gráfico de tarta

Gráfico de dispersión

2.3

Mapa interactivo con hoja de cálculo de Google

2.4

Mapa con geolocalización del usuario

Ideas clave

Otras referencias

Tareas

INTRODUCCIÓN

Google Fusion Tables es un servicio ofrecido por el gigante tecnológico Google que estaba pensado, en un principio, para la gestión y edición de datos y para la fusión de diferentes hojas de datos (de ahí su nombre). Durante su desarrollo se experimentó la necesidad de permitir sencillas visualizaciones de esos datos y de ahí surgió su opción Charts, que permite la realización de gráficos simples pero interactivos y sin tener que tocar ni una línea de código.

El catálogo de Google Fusion Tables ofrece gráficos de tarta, barras, columnas, fiebre, diagramas de dispersión e, incluso, líneas de tiempo.

Otra de las opciones interesantes de esta herramienta es la posibilidad de elaborar mapas interactivos informativos que toman como base el potente mapa de Google. Aunque las opciones de edición son más limitadas que otras herramientas de mapas como Carto, es una opción a considerar para ciertos productos.

OBJETIVOS

Los objetivos de este tema se centrarán en los conocimientos que deberá adquirir el alumno para poder usar la herramienta Google Fusion Tables:

Importar una hoja de cálculo y editar los datos.

Gráficos estadísticos (barras, columnas, fiebre, tarta, dispersión y red).

Mapas interactivos (el último punto, la geolocalización del usuario, es sólo a nivel opcional y de uso avanzado de la herramienta, no será necesario aprender estos conocimientos para superar satisfactoriamente el taller).

CONTENIDOS | 2.1

1. Hojas de cálculo de Google (Spreadsheet)

Recuerda que para poder utilizar las hojas de cálculo de Google, así como el propio Google Fusion tables, es necesario tener una cuenta de Gmail.

Ve a las hojas de cálculo de Google o spreadsheets.

Si ya has elaborado alguna hoja de cálculo de Google te aparecerá en esta lista. De cualquier modo, pulsa en el botón rojo del más, en la esquina inferior derecha para crear una nueba hoja de cálculo.

Escribe en el título de la hoja de estilo y en la primera fila de las tres primeras columnas lo siguiente:

Y rellena el resto de datos:

¿Por qué repetimos los datos de las provincias andaluzas en dos columnas diferentes? A veces, a la hora de que Google Fusion Tables nos haga automáticamente la geocodificación, se confunde si algunos nombres de ciudades o países no son exclusivos a un país, como ocurre con Córdoba. Al poner entre paréntesis '(Spain)' nos aseguramos que buscará la ubicación en España. Como no nos gustaría que en las etiquetas informativas se viera 'Almería (Spain)', repetimos la columna pero dejando sólo el nombre de cada provincia.

Como sabéis, las hojas de cálculo de Google se guardan automáticamente. Pero si cerráis la ventana y queréis volver a ver o editar la hoja de cálculo (doble click), la tendréis en vuestra carpeta de
Google Drive.

2. Usar una hoja de cálculo de Google en Fusion Tables

Es hora de comenzar con Google Fusion Tables. Iremos a la web y pulsaremos en 'Create a fusion table'.

El programa nos preguntará con qué hoja de cálculo queremos trabajar. Nos da tres opciones: archivo subido desde el ordenador (csv, tsv, txt o kml), Google Spreadsheets (que son las hojas de cálculo de Google) o tabla vacía (ya que Google Fusion Tables tiene una herrmienta de tabla de datos muy sencilla y se podrían introducir los datos directamente ahí). Seleccionamos la segunda opción.

Los archivos .csv y .tsv se generan con programas de hojas de cálculo como Microsoft Excel u OpenOffice Calc. Los datos se presentan en diferentes líneas y separados por comas (.csv) o tabulaciones (.tsv). Los .kml son parecidos, pero tienen datos de geocodificación (para mapas).

Nos aparecerán nuestras hojas de cálculo de Google. Seleccionamos la que acabamos de crear y, después, pulsamos en Select.

Veremos un previsualización de los datos. Pulsamos en Next.

Podremos editar el título del fusion table, la atribución o la descripción. Es muy importante que esté seleccionada la opción de Allow export. Pulsamos en Finish.

Y ya entramos en la interfaz de Google Fusion Tables. Donde lo más importante es:

3. Edición de datos (tipología)

Fusion Tables nos reconoce como datos 'localizables' en un mapa los de la columna 'Provincia' (están en amarillo). Sin embargo, necesitamos que sean los datos de la columna 'Localización'.

Pulsamos en la parte derecha de la cabecera de la columna 'Provincia' y, después, en 'Change'.

Nos muestra una ventana de opciones sobre los datos de esa columna. En Type, efectivamente, vemos que está la opción Location. Pulsamos para cambiar la tipología de los datos de esta columna...

… a Text. Text es texto, Number son cifras numéricas que van a servir para 'pintar' una gráfica, Location son datos que se pueden localizar en un mapa y Date/Time datos de tiempo. Después de seleccionar Text, pulsamos a Save para guardar los cambios.

Vemos que los datos de la columna 'Provincia' ya no están en amarillo. Hacemos lo mismo con la columna 'Localización'. Pulsamos en la parte derecha de la cabecera y, después, en Change.

Esta vez, en Type seleccionamos Location. Pulsamos en Save.

Por último, deberíamos comprobar que la tipología de los datos de la columna 'Parques' es Number, para que, después, no tengamos problemas a la hora de elaborar los distintos gráficos estadísticos.

CONTENIDOS | 2.2

1. Gráfico de barras

Para crear un gráfico estadístico en Google Fusion Tables, deberemos pulsar en el botón rojo del más y, después, en Add chart.

Entre las opciones de la izquierda, seleccionaremos Bar chart.

Y ya tendríamos el gráfico de barras. Si queremos cambiar algo del diseño del gráfico, pulsaremos en Change appearance...

En el editor, podremos, por ejemplo, poner un título.

Como la leyenda queda reiterativa con el título, podemos quitarla.

Si bajamos hasta el final del editor, tenemos la opción para poder cambiar de color las barras.

Y si pulsamos en Done, ya tendríamos nuestro gráfico acabado. Al igual que pasa con las hojas de cálculo de Google, los proyectos de Google Fusion Tables se guardan automáticamente en nuestra carpeta de Google Drive.

Para volver a editar, podemos pulsar en Tools y Change chart.

Para publicar el gráfico y que sea visible en internet, hay que pulsar en Tools y Publish. La herramienta nos avisa de que, de manera predefinida, se publicará el gráfico como privado, por lo tanto, no será visible por todo el mundo. Pulsaremos en Change visibility.

Y, después, en Cambiar.

Seleccionamos público en la Web y Guardar.

Y, por último, Ok.

Volvemos a pulsar en Tools y Publish.

Copiamos el enlace.

Y si lo pegamos en la barra del navegador de internet, esto veremos:

2. Gráfico de columnas

Podemos hacer otro tipo de gráfico con los mismos datos y sin modificar (y por tanto, borrar) el que ya tenemos: pulsando otra vez en el botón rojo del mas y en Add chart.

Podemos modificar también su apariencia.

3. Gráfico de fiebre

Para hacer un gráfico de fiebre no nos sirven los datos usados en los ejemplos anteriores, ya que necesitamos que los 'items' del gráfico sean datos de tiempo y, así, poder representar una evolución. Vamos a crear una nueva hoja de cálculo de Google.

Pondremos título y cabeceras de columnas.

E introducimos el resto de datos.

Crearemos, también, una nueva fusion table.

Seleccionamos la hoja de cálculo que acabamos de crear.

Modificamos la tipología de los datos de la columna 'Año'.

A Date/Time.

Y ya podemos crear el gráfico.

Seleccionamos Line chart.

Y, si queremos, modificamos el diseño.

4. Gráfico de tarta

Volvemos al fusion table de los Parques Naturales de Andalucía.

Creamos un nuevo gráfico.

Seleccionamos Pie chart.

5. Gráfico de dispersión

Vamos a nuestro Google Drive y hacemos una copia de la hoja de cálculo de los Linces ibéricos en Sierra Morena.

Y, después, le cambiamos el nombre a esta copia.

Y editamos los datos de la hoja de cálculo (doble click).

Cambiamos la cabecera de la segunda columna.

Creamos una nueva columna con la cabecera de 'Doñana'.

Y añadimos los datos.

Creamos un nuevo fusion table.

Seleccionamos la nueva hoja de cálculo.

Cambiamos los datos de la columna de 'Año'.

Y seleccionamos Date/Time.

Creamos gráfico.

Seleccionamos Scatter chart.

Y seleccionamos Doñana, para que se muestren las dos series.

CONTENIDOS | 2.3

1. Mapa interactivo con hoja de cálculo de Google

Creamos un nuevo fusion table.

Esta vez, usaremos una hoja de cálculo de Google de otro usuario, quien ha modificado las opciones de ésta para que sea pública.

Copia el siguiente enlace:

https://docs.google.com/spreadsheets/d/19S3AamMV8hMwnElnlVNVN1wXXRB3pLfqeL7SSYj4zbo/edit?usp=sharing

Y pégalo en la barra inferior del selector de hojas de cálculo.

Después, pulsa en Select.

Nos ha identificado como 'localizables' los datos de la primera columna. Sin embargo, necesitamos que los datos 'localizables' sean los de la segunda columna. Modificamos la tipología de los datos de ambas.

La columna 'Parque' tendrá como tipología de datos Text.

La columna 'Centro de interpretación', Location.

Ya tenemos los datos de 'Centro de interpretación' como 'localizables' (en amarillo). Ya podremos pulsar en Map.

La herramienta inicia el proceso de geocodificación automáticamente.

Y ya tenemos nuestro mapa interactivo creado. Podemos cambiar algunos detalles de diseño en Change feature styles...

Por ejemplo, podemos cambiar el estilo del Map marker icon.

Podemos usar un Map marker icon personalizado. Para ello, volveremos a la tabla de datos de nuestro fusion table.

Y pulsamos en Edit, Change columns.

Pulsamos en New, Column.

A esta nueva columna le ponemos el nombre de 'Icon'. Guardamos.

Y vemos cómo se ha creado una nueva columna que, todavía vacía.

Vamos al siguiente enlace:

https://fusiontables.google.com/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA#map:id=3

Esto es un fusion table público creado por Google para que se puedan
ver fácilmente todos los map marker icons personalizados disponibles.

Pulsamos en el que nos interesa y copiamos su nombre, en este caso parks.

Volvemos a nuestro fusion table, pulsamos en la primera fila de datos y, después, en editar fila.

En Icon, pegamos el nombre del map marker icon (parks) y, después, pulsamos en Save and edit next. Lo mismo en el resto de filas.

Hasta que en todas las filas tengamos la palabra parks en la columna Icon. Volvemos al mapa.

Pulsamos en Change appearance styles.

En Map marker icons, pulsamos en Column.

Pulsamos en Use icon specified in a column, después en Select y escogemos la columna 'Icon'. Guardamos.

Y ya tenemos el mapa con los marker icons personalizados.

CONTENIDOS | 2.4

1. Mapa con geolocalización del usuario

No es necesario que el alumno asimile los contenidos a continuación. Sólo son un complemento para aquellos que quieran saber más o conocer un uso avanzado de esta herramienta.

Pulsamos en Tools, Publish.

Pulsamos en Get HTML and JavaScript.

Pulsamos en el código. Se seleccionará todo automáticamente. Copiamos.

Creamos un nuevo documento de Bloc de notas (Windows) o TextEdit (Mac).

Y pegamos el código.

Pulsamos en Archivo, Guardar como...

Le ponemos un nombre al archivo y es muy importante añadirle al final del nombre .html

Lo primero que vamos a hacer es modificar el código para que el mapa se presente siempre a pantalla completa.

Buscamos la palabra height (alto) y cambiamos el tamaño en píxeles por 100%; Ojo, es muy importante que no borres este ; final.

Hacemos lo mismo con width (ancho): ponemos 100%;

Bajamos por el código y ponemos en 100% también el último dato de las líneas mapDiv.style.width y mapDiv.style.height. Es importante no borrar las comillas y el ; final: '100%';

Si guardamos y abrimos el archivo en el navegador, ya veremos el mapa a pantalla completa.

Volvemos al código y buscamos la palabra zoom. Cambiaremos el dato a 12 con cuidado de no borrar la , final. Esto hará que el mapa se presente con un zoom más ampliado.

Y tocaría el turno de introducir el código que permitirá que el mapa tenga geolocalización del usuario. Buscamos la parte del código señalada abajo y le damos un intro al final del corchete de cierre.

Para que quede así:

Copiamos el siguiente código:

var infoWindow = new google.maps.InfoWindow({map: map});

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var pos = {

lat: position.coords.latitude,

lng: position.coords.longitude

};

infoWindow.setPosition(pos);

infoWindow.setContent('Location found.');

map.setCenter(pos);

}, function() {

handleLocationError(true, infoWindow, map.getCenter());

});

} else {

// Browser doesn't support Geolocation

handleLocationError(false, infoWindow, map.getCenter());

}

Y lo pegamos en la línea en blanco que hemos preparado en el código del mapa:

Copiamos el siguiente código:

function handleLocationError(browserHasGeolocation, infoWindow, pos) {

infoWindow.setPosition(pos);

infoWindow.setContent(browserHasGeolocation ?

'Error: The Geolocation service failed.' :

'Error: Your browser doesn\'t support geolocation.');

}

Y en el código del mapa buscamos la línea en blanco que se muestra abajo (al final del código) y pegamos:

Para que quede así:

Guardamos. Abrimos de nuevo el archivo en el navegador o, si ya lo teníamos abierto, le damos a recargar (mejor probar en Firefox). Pulsamos en compartir ubicación.

Y el mapa nos geolocalizará.

IDEAS CLAVE

Google ofrece un servicio online de hojas de cálculo que funciona con Google Fusion Tables.

En Google Fusion Tables existen cuatro tipologías de datos: Text, Number, Location y Date/Time.

En Google Fusion Tables se pueden hacer gráficos de barras, columnas, fiebre, tarta o de dispersión.

Los mapas interactivos en Google Fusion Tables se hacen importando los datos de una hoja de cálculo de Google con datos 'localizables' y editando correctamente la tipología de los datos antes de crear el mapa.

ENLACES DIRECTOS:

Gmail

Google Drive

Hojas de cálculo de Google

Google Fusion Tables

SOPORTE:

Google Support

Help Forum

ALGUNOS EJEMPLOS:

Al Jazeera

Newspapper Map

Visualiza la guía de primeros pasos de Google Fusion Tables.

Visualiza el vídeo Videotutorial de Google Fusion Tables.

Practica con la herramienta. Puedes seguir, paso por paso, las indicaciones de este documento o del videotutorial o, si lo prefieres, probar libremente Google Fusion Tables.