Tema 2
Google Fusion Tables
DEMOCRATIZACIÓN DEL HTML5:
DISEÑO WEB PARA TODOS LOS PÚBLICOS
Proyecto
OpenCourseWare-UNIA
(ocw.unia.es)
Autora
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA
Hojas de cálculo de Google (Spreadsheet)
Usar una hoja de cálculo de Google en Fusion Tables
Edición de datos (tipología)
Mapa interactivo con hoja de cálculo de Google
2.4
Mapa con geolocalización del usuario
Ideas clave
Otras referencias
Tareas
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
INTRODUCCIÓN
Google Fusion Tables
es un servicio ofrecido por el gigante tecnológico
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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).
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Escribe en el
título
de la hoja de estilo y en la
primera fila
de las tres
primeras columnas lo siguiente:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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'
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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).
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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'.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en la parte derecha de la cabecera de la columna 'Provincia'
y, después, en 'Change'.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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...
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
… 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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Esta vez, en
Type
seleccionamos
Location
. Pulsamos en
Save
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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...
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
En el editor, podremos, por ejemplo, poner un
título
.
–
Como la
leyenda
queda reiterativa con el título, podemos quitarla.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Si bajamos hasta el final del editor, tenemos la opción para poder
cambiar de color las barras
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Seleccionamos
público en la Web
y
Guardar.
–
Y, por último,
Ok
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Volvemos a pulsar en
Tools
y
Publish
.
–
Copiamos el enlace
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Podemos modificar también su
apariencia
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pondremos
título
y
cabeceras de columnas
.
–
E introducimos el resto de
datos
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Crearemos, también, una
nueva fusion table
.
–
Seleccionamos la hoja de cálculo
que acabamos de crear.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Modificamos la tipología de los datos de la columna
'Año'
.
–
A
Date/Time
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y ya podemos
crear el gráfico
.
–
Seleccionamos
Line chart
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y, si queremos, modificamos el diseño.
4. Gráfico de tarta
–
Volvemos al fusion table de los
Parques Naturales de Andalucía
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Creamos un
nuevo gráfico
.
–
Seleccionamos
Pie chart
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y, después, le
cambiamos el nombre
a esta copia.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y
editamos
los datos de la hoja de cálculo (doble click).
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Cambiamos la cabecera
de la segunda columna.
–
Creamos una nueva columna con la cabecera de
'Doñana'
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y
añadimos los datos
.
–
Creamos un nuevo
fusion table
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Seleccionamos la nueva hoja de cálculo.
–
Cambiamos los datos de la columna de
'Año'
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y seleccionamos
Date/Time
.
–
Creamos gráfico.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Seleccionamos
Scatter chart
.
–
Y
seleccionamos Doñana
, para que se muestren las dos series.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
CONTENIDOS | 2.3
1. Mapa interactivo con hoja de cálculo de Google
–
Creamos un nuevo
fusion table
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
La columna
'Parque'
tendrá como tipología de datos
Text
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
La columna
'Centro de interpretación'
,
Location
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA
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
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Hasta que en todas las filas tengamos la palabra
parks
en la columna
Icon
. Volvemos al mapa.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en
Change appearance styles
.
–
En
Map marker icons
, pulsamos en
Column
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en
Use icon specified in a column
, después en
Select
y
escogemos la columna
'Icon'
. Guardamos.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en
Tools
,
Publish
.
–
Pulsamos en
Get HTML and JavaScript.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en el código
. Se seleccionará todo automáticamente.
Copiamos
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Creamos un nuevo documento de
Bloc de notas
(Windows) o
TextEdit
(Mac).
–
Y
pegamos el código
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Pulsamos en
Archivo
,
Guardar como...
–
Le ponemos un nombre al archivo y
es muy importante añadirle al
final del nombre .html
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Lo primero que vamos a hacer es modificar el código para que el mapa
se presente siempre a
pantalla completa
.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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%;
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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%';
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Si
guardamos
y abrimos el archivo en el navegador, ya veremos el
mapa a pantalla completa.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Para que quede así:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Copiamos el siguiente código:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Y lo
pegamos
en la línea en blanco que hemos preparado en el código
del mapa:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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
:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
Para que quede así:
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
–
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á.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA (ocw.unia.es). Bajo licencia Creative-Commons Atribución-NoComercial-CompartirIgual 3.0
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.
Hinojosa Onieva, Encarni. (2017).
Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA