Laboratorio di Informatica 3 Anno Accademico 2019-2020

35  Download (0)

Full text

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

1

(2)

Google 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

3

(3)

Organizzazione 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

(4)

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

7

(5)

Organizzare 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

(6)

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

(7)

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

(8)

Altri componenti della pagina

Aggiungere allegati

Aggiungi file

Spesso le pagine sono corredate da allegati (file di vario tipo) destinati al download

15

(9)

Aggiungere commenti

Ai visitatori del sito può essere data la possibilità di aggiungere dei brevi

commenti in calce alla pagina.

Impostazioni della pagina…

17

(10)

Impostazioni 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»

(11)

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.

(12)

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

(13)

Condivisione e controllo d’accesso

Condivisioni…

Le funzioni di condivisione sono accessibili dal menù di gestione o dal pulsante 25

(14)

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…

(15)

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»

(16)

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…

(17)

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»

(18)

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

(19)

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

(20)

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

(21)

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.

(22)

Archivio file (file cabinet)

Il menù «Sposta in» permette di creare nuove sotto-cartelle

Archivio file (file cabinet)

1

Selezionare gli elementi

2

Selezionare la cartella di destinazione

3

I file sono trasferiti. Questo controllo «apre» e «chiude la cartella»

(23)

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

(24)

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

(25)

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

(26)

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

(27)

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.

(28)

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»

(29)

Elenco

Elenco

Per modificare il contenuto di un record, basta selezionarlo e riempirne i campi con il nuovo valore… 57

(30)

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

59

(31)

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

(32)

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.

(33)

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.

(34)

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

(35)

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

Figure

Updating...

References

Related subjects :