Livello: Avanzato
Google Sheet è uno strumento utile, nonché gratuito, per creare tabelle, grafici, moduli da compilare, simile ad altri prodotti commerciali a pagamento e anche se non fornisce funzionalità avanzate come altre applicazioni a pagamento, può comunque esserci davvero utile per una varietà di applicazioni come per esempio crearsi dei moduli in cui registrarsi spese, entrate, una moltitudine di dati sui quali estrapolare statistiche e quant'altro, ma sopratutto ha alcuni punti di forza interessanti: è gratuito e basato sulla collaborazione.
I Google Sheet, o anche Fogli Google, possono infatti anche essere condivisi tra più collaboratori, ognuno dei quali può sia visualizzarli, sia modificarli contemporaneamente.
Una volta creata la tabella in Google Sheet basterà pubblicarla dal menu File → Pubblica sul Web.
A questo punto basta scegliere il modo di pubblicazione, se tramite link o tramite codice da incorporare all'interno di una pagina web. Una volta scelta la modalità basterà fare copia-incolla del codice fornito da Google Sheet e inserirlo nel proprio sito dove si preferisce.
Vedi Fig.1 qui sotto.
 |
| Fig.1 - Pubblicare il file sul Web. |
Una volta inserito il codice sul proprio sito (nella posizione che si ritiene più opportuna), la tabella apparirà grosso modo come quella qui sotto.
Per impostazione predefinita la tabella apparirà con l'header e il footer che eventualmente possono essere disattivati con un semplice work-around. Vediamo come fare...
Quello qui di seguito è il codice html predefinito fornito da Google Sheet per embeddare la tabella in una pagina web tramite un iframe
<iframe src="https://docs.google.com/spreadsheets/d/1lExnWeHNE8AhOpZmmp1RBhaVTAp-oehVzJoatLXpkrE/pubhtml?widget=true&headers=false"></iframe>
mentre quello seguente è quello utilizzato per visualizzare la tabella qui sotto.
<div style="overflow: hidden;">
<div style="margin-left: -1px;">
<iframe scrolling="no" src="https://docs.google.com/spreadsheets/d/1zCchSC83LOpjkETjAL0Rl_ETwT2T1fQpYwfwpl6ZdSI/pubhtml?gid=0&single=true&chrome=false&headers=false" style="border:none; height: 500px; width: 100%; overflow: hidden;"></iframe>
</div>
</div>
vediamo le varie modifiche e perché sono state introdotte.
Prima di tutto abbiamo applicato un po di CSS all'iframe per togliergli il bordo, impostargli un altezza di 500px e una larghezza pari al 100% del viewport.
Sucessivamente abbiamo disabilitato l'header e il footer della tabella impostando il parametro chrome=false al posto del parametro widget=true nell'src dell'iframe.
In seguito l'iframe è stato inserito in un classico box model per questa ragione: incorporando una tabella in una pagina web viene visualizzato un bordo grigio di 1px sul lato sinistro della tabella anche se dal foglio sono stati disattivati tutti i bordi. Il box model permette di traslare a sinistra l'iframe di 1px impostandone il margine a -1px nascondendo così il fastidioso bordo sinistro della tabella.
Per vedere la differenza basta fare una prova con entrambi i codici HTML.
Nessun commento:
Posta un commento