Bloque 2 Google Fusion Tables

Texto completo

(1)

Tema 2

Google Fusion Tables

DEMOCRATIZACIÓN DEL HTML5:

DISEÑO WEB PARA TODOS LOS PÚBLICOS

Proyecto

OpenCourseWare-UNIA

(ocw.unia.es)

Autora

(2)

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

(3)

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

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.

(4)

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).

(5)

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.

(6)

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:

(7)

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.

(8)

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

.

(9)

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'

.

(10)

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).

(11)

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

.

(12)

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

.

(13)

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'.

(14)

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'.

(15)

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...

(16)

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.

(17)

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

.

(18)

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

.

(19)

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.

(20)

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

.

(21)

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...

(22)

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.

(23)

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

.

(24)

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

.

(25)

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

.

(26)

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

.

(27)

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

.

(28)

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

.

(29)

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

.

(30)

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

.

(31)

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

.

(32)

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.

(33)

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

.

(34)

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

.

(35)

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

.

(36)

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

.

(37)

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

.

(38)

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.

(39)

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).

(40)

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'

.

(41)

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

.

(42)

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'

.

(43)

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.

(44)

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.

(45)

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

.

(46)

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.

(47)

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.

(48)

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

.

(49)

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

.

(50)

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.

(51)

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

.

(52)

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

(53)

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

.

(54)

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.

(55)

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

.

(56)

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.

(57)

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.

(58)

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

.

(59)

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.

(60)

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.

(61)

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.

(62)

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

.

(63)

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

.

(64)

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

(65)

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

.

(66)

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%;

(67)

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%';

(68)

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.

(69)

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.

(70)

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.

(71)

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í:

(72)

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:

(73)

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:

(74)

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

:

(75)

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í:

(76)

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á.

(77)

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.

(78)

Hinojosa Onieva, Encarni. (2017).

Democratización del HTML5: diseño web para todos los públicos. OpenCourseWare-UNIA

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.

Figure

Actualización...

Referencias

Actualización...