Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
Introduzione
1Google Sites
Parte 2
Google Sites
Libri di testo consigliati:
Ryan Teeter and Karl Barksdale
Google Sites & Chrome for Dummies
Wiley Publishing Inc. (2009)
ISBN 978-0-470-39678-0
3Organizzazione del testo
Organizzare il testo: titolazioni
Negli articoli scientifici, nei saggi e nei testi dal contenuto lungo e articolato, si usa organizzare il testo in sezioni, sotto-sezioni, paragrafi, capoversi...
Ciascuna suddivisione è preceduta da un titolo «posto» al livello corrispondente.
Google Site fornisce un discreto numero di
Headings (titolature) standard.
Font, corpo, stile e colore dei titoli cambiano a seconda del tema selezionato .
Google Site fornisce il componente Sommario per accedere rapidamente a ciascuna sezione
Organizzare il testo: titolazioni
Google Site fornisce un discreto numero di
Headings (titolature) standard.
Font, corpo, stile e colore dei titoli cambiano a seconda del tema selezionato .
I diversi titoli sono selezionabili nel
menù Formato dell’editor
I livelli dei titoli sono numerati in
ordine crescente, dal più in alto a
quelli successivi nella «gerarchia»
Organizzare il testo: titolazioni
7Organizzare il testo: posizionare immagini
Selezionando un’immagine, l’editor visualizza un menù per l’accesso
rapido ad alcune proprietà dell’immagine
Rimozione dell’immagine Disposizione di immagine e testo Dimensione apparente dell’immagine Allineamento immagine
con gli altri componenti
All’immagine è sempre associato un link al suo file. Chi visita il sito può visualizzare l’immagine nel suo formato originale semplicemente con un click
Cambia il link Rimuove il link
Organizzare il testo: posizionare immagini
Selezionando un’immagine, l’editor visualizza un menù per l’accesso
rapido ad alcune proprietà dell’immagine
«Testo a capo» attivato
Organizzare il testo: posizionare immagini
«Testo a capo» attivato
Organizzare il testo: sommario
Il componente sommario crea un riquadro in cui è riprodotta la gerarchia dei titoli inseriti nel testo. A ciascuna riga del sommario è associato un link all’inizio della sezione corrispondete.
Nel menù Inserisci seleziona tra i gadgets la voce sommario
Organizzare il testo: sommario
Il controllo stabilisce la larghezza che deve avere il riquadro «sommario»
E’ possibile scegliere quali livelli di titolazione debbano essere contemplati nell’indice
Organizzare il testo: sommario
Il sommario non è visibile dall’editor. Una volta salvata la pagina, sarà possibile vedere il riquadro completo di tutti i link previsti. 13
Altri componenti della pagina
Aggiungere allegati
Aggiungi file
Spesso le pagine sono corredate da allegati (file di vario tipo) destinati al download
15Aggiungere commenti
Ai visitatori del sito può essere data la possibilità di aggiungere dei brevi
commenti in calce alla pagina.
Impostazioni della pagina…
17Impostazioni di pagina
Ogni pagina riporta una serie di link e funzionalità «standard»: link alle pagine
secondarie, allegati, commenti…
…accesso alle attività sul sito
Impostazioni di pagina
La gestione di queste funzionalità può essere regolata nel menù «Impostazioni
di pagina»
Impostazioni di pagina
Layout di pagina
Lo spazio della pagina dedicato al contenuto può essere organizzato in diversi riquadri, a seconda di una serie di "layout di pagina" resi disponibili dal tema del sito.
Qualsiasi sia il layout scelto, la pagina mantiene delle "zone" comuni a tutte le tipologie di pagina definite nel tema del sito (Desert, in questo caso).
La selezione del layout si effettua dal menù «layout» dell’editor di pagina.
Layout di pagina
Anteprima
Per effetto delle diverse impostazioni di pagina e della variabilità dell’aspetto dei componenti, non è sempre possibile avere un idea dell’aspetto della pagina durante l’editing.
Per verificare in ogni momento come la pagina appare all’utente, dal menù di gestione è possibile visualizzare una sua «anteprima». 23
Condivisione e controllo d’accesso
Condivisioni…
Le funzioni di condivisione sono accessibili dal menù di gestione o dal pulsante 25
Condivisioni…
I «collaboratori» devono essere invitati
Condivisioni…
I «collaboratori» devono essere invitati indicando il loro indirizzo e-mail
I «collaboratori» devono ricevere dei ruoli che indichino ciò che sono
autorizzati a fare sul sito…
Condivisioni…
I «collaboratori» devono essere invitati indicando il loro indirizzo e-mail
…un messaggio di benvenuto è sempre preferibile…
Gestione sito: i permessi di accesso
Dal menù di gestione è possibile stabilire la visibilità del sito su Internet.
Ciò è piuttosto utile per i siti «Work in progress»
Altri modelli di pagina
Annunci
• Le pagine del modello «Annunci» sono più simili a Blog.
• Gli amministratori del sito possono aggiungere post utilizzando un apposito
controllo della pagina principale.
• Un post, in sé è una normale pagina web.
• La pagina principale riporta l’elenco di tutti i post
• I post sono elencati dal più recente ai più vecchio
• Ciascun post presente nell’elenco reca un link alla sua pagina dedicata
• A ciascun post è possibile aggiungere allegati e commenti…
Annunci
Per realizzare una pagina di annunci, occorre selezionare il modello corrispondente
Annunci
Dalla pagina principale, si possono inserire nuovi post
L’inserimento di un post è effettuato secondo il modello «pagina web»
Annunci
Terminato l’inserimento del post, tornando alla pagina principale, è possibile vedere un suo «sunto» visualizzato nell’elenco.
Successivamente è possibile modificarlo
(modifica post)
La cancellazione di un post si effettua come per qualsiasi altra pagina del sito.
Annunci
L’elenco dei post è disponibile anche in forma di RSS (Rich Site Summary).
RSS Feed Reader (qui utilizzato a titolo di esempio), è solo una delle tante estensioni disponibili per Google Chrome per questo scopo.
Con il comando (iscriviti ai post), il browser riceve i contenuti e chiede all’utente di «iscriversi» alle «notifiche» della pagina. Tali informazioni sono di solito gestite da un plugin o estensioni di terze parti
Annunci
Generalmente, i contenuti pervenuti tramite RSS sono notificati all’utente tramite un controllo aggiuntivo della finestra del browser.
In realtà, il browser si collega periodicamente ai siti a cui è «iscritto» e ne scarica la descrizione sintetica.
Archivio file (file cabinet)
Il modello «Schedario» (file cabinet in lingua originale) implementa un semplice ambiente per la condivisione di file.
L’archivio, consente di condividere file: • Immagazzinati sul sito stesso
• Residenti altrove e referenziati mediante un link • Residenti in una condivisione Google Drive E’ possibile dividere i file tra più sotto-cartelle… 37
Archivio file (file cabinet)
L’archivio, consente di condividere file: • Immagazzinati sul sito stesso
• Residenti altrove e referenziati mediante un link • Residenti in una condivisione Google Drive E’ possibile dividere i file tra più sotto-cartelle…
Archivio file (file cabinet)
La funzione Aggiungi file permette di caricare sul sito un file attualmente presente sul computer locale. 39
Archivio file (file cabinet)
Selezionando la regione a destra del nome del file, è possibile aggiungere/modificare una descrizione.
Archivio file (file cabinet)
Per aggiungere una risorsa resa disponibile da un altro sito, occorre fornire il suo URL, un nome e una breve descrizione del link.
Archivio file (file cabinet)
Il menù «Sposta in» permette di creare nuove sotto-cartelle
Archivio file (file cabinet)
1
Selezionare gli elementi2
Selezionare la cartella di destinazione3
I file sono trasferiti. Questo controllo «apre» e «chiude la cartella»Archivio file (file cabinet)
Se lo stesso file (stesso nome) viene modificato più volte, l’archivio tiene traccia di tutte le sue versioni
Elenco
Il modello «Elenco» permette di gestire liste omogenee di
record tra cui è possibile introdurre alcuni criteri di
ordinamento.
Una rubrica telefonica. Ciascun record
rappresenta uno dei numeri telefonici inseriti. 45
Elenco
Il modello «Elenco» permette di gestire liste omogenee di
record tra cui è possibile introdurre alcuni criteri di
ordinamento.
Un record della rubrica «mette insieme» il campo «nome» e il campo «numero» di ogni singola persona inserita in rubrica
I record sono insiemi di informazioni aggregate che descrivono un «oggetto» arbitrario. Ciascuna di queste informazioni è detta campo
Elenco
Il modello «Elenco» permette di gestire liste omogenee di
record tra cui è possibile introdurre alcuni criteri di
ordinamento.
I record sono insiemi di informazioni aggregate che descrivono un «oggetto» arbitrario. Ciascuna di queste informazioni è detta campo
Un elenco, in Google Sites, è rappresentato da una tabella in cui a ciascuna colonna corrisponde un campo e a ciascuna riga corrisponde un record.
Nome Numero
Carabinieri 112
VV. FF. 115
Soccorso sanitario 118
Elenco
Per creare un elenco si usa lo strumento «nuova pagina», e si seleziona il modello Elenco. Il posizionamento della pagina nel sito si effettua sempre nello stesso modo.
Elenco
Il modello offre alcuni schemi già pronti. Se nessuno di questi risponde alle nostre esigenze, si procede a creare un elenco personalizzato
Elenco
1
Selezionare «Aggiungi una colonna», quindi indicare il nome del campo e il tipo di dato che è destinata a contenere;Elenco
1
Selezionare «Aggiungi una colonna», quindi indicare il nome del campo e il tipo di dato che è destinata a contenere;2
Continuare fino a quando non sono stati inseriti tutti i campi richiesti…Sposta a sinistra Sposta a destra Elimina colonna 51
Elenco
1
Selezionare «Aggiungi una colonna», quindi indicare il nome del campo e il tipo di dato che è destinata a contenere;2
Continuare fino a quando non sono stati inseriti tutti i campi richiesti…3
Impostare il criterio di ordinamento (ora di creazione, ordine alfanumerico, …) ordine: crescente/decrescente…Elenco
1
Selezionare «Aggiungi una colonna», quindi indicare il nome del campo e il tipo di dato che è destinata a contenere;2
Continuare fino a quando non sono stati inseriti tutti i campi richiesti…3
Impostare il criterio di ordinamento (ora di creazione, ordine alfanumerico, …) ordine: crescente/decrescente…4
Premere «Salva» per terminare.Elenco
L’elenco appena creato ha questo aspetto.
Elenco
Per aggiungere un record, premere «Aggiungi articolo»
Inserire il contenuto di ciascun campo nel nuovo record e premere «Salva»
Elenco
Elenco
Per modificare il contenuto di un record, basta selezionarlo e riempirne i campi con il nuovo valore… 57
Elenco
Per modificare il contenuto di un record, basta selezionarlo e riempirne i campi con il nuovo valore…
Da qui è anche possibile cancellare il record.
Utilizzare le Google Apps
59Utilizzare le Google Apps
Creiamo la pagina «Google Apps», secondaria della pagina «Esempi»
Utilizzare le Google Apps
Dal menù inserisci, selezionamo
l’applicazione YouTube, che
inserirà nella nostra pagina un riquadro per la riproduzione di un
video condiviso su tale
piattaforma.
Utilizzare le Google Apps
Nel riquadro di configurazione, vanno inseriti l’URL del video (preso dal sito di YouTube stesso), le dimensioni del riquadro di visualizzazione e indicazioni sulla presenza del bordo e del titolo.
Utilizzare le Google Apps
Al termine, nell’editor di pagina, il componente appare come un riquadro grigio, avente dimensioni, bordo e titolo indicati.
Allineamento e disposizione del componente rispetto alla pagina e al testo, possono essere stabiliti con i comandi che conosciamo.
Utilizzare le Google Apps
Il riquadro YouTube, nell’anteprima, appare così.
In maniera del tutto analoga, si inseriscono le altre app, come ad esempio una mappa...
Utilizzare le Google Apps
Dal menù «Inserisci»: selezionare «Mappe»…
Quindi inserire l’indirizzo/coordinate del luogo che si intende indicare.
Utilizzare le Google Apps
Dal menù «Inserisci»: selezionare «Mappe»…
Quindi inserire l’indirizzo/coordinate del luogo che si intende indicare.
Infine, completare con i consueti dettagli…
Utilizzare le Google Apps
L’anteprima della pagina mostra il risultato… 67
Creazione di un sito web
Esercizio 2
Creare il sito web di una associazione culturale (e.g. di fotoamatori) strutturato come segue: Home
• Chi siamo • Mission • Storia
News (utilizzando il modello «Annunci») Risorse (utilizzando il modello «File Cabinet»)
Organizzare i file in due cartelle: «regolamenti» e «modulistica»
Contatti • Dove trovarci
• Referenti (utilizzando il modello «Elenco»)
Per ciascun referente i campi sono: nome, città e indirizzo mail